diff --git a/README.md b/README.md
index 80de2a4..1169647 100644
--- a/README.md
+++ b/README.md
@@ -180,6 +180,7 @@ Are you sure? (y/N):
- [shadow-cljs](https://github.com/thheller/shadow-cljs): ClojureScript compilation made easy
- [babashka](https://github.com/babashka/babashka): Native, fast starting Clojure interpreter for scripting
- [flipps](https://github.com/flipps): CSS and Aesthetics
+ - [font-awesome](https://fontawesome.com/license): Sun and Moon SVGs
# License
This is free and unencumbered software released into the public domain.
diff --git a/resources/public/index.html b/resources/public/index.html
index bb02b91..8b371b2 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -9,7 +9,7 @@
-
+
diff --git a/resources/public/pages/about.md b/resources/public/pages/about.md
index 82d9455..368ac64 100644
--- a/resources/public/pages/about.md
+++ b/resources/public/pages/about.md
@@ -9,6 +9,7 @@ Great tools used to build this:
- [shadow-cljs](https://github.com/thheller/shadow-cljs): ClojureScript compilation made easy
- [babashka](https://github.com/babashka/babashka): Native, fast starting Clojure interpreter for scripting
- [flipps](https://github.com/flipps): CSS and Aesthetics
+ - [font-awesome](https://fontawesome.com/license): Sun and Moon SVGs
## Contributing
If you find any dead links, misinformation or any improvements in this documents at all [Emails](https://github.com/rafaeldelboni), [PRs](https://github.com/rafaeldelboni/buildlogs/pulls) and [Issues](https://github.com/rafaeldelboni/buildlogs/issues) are highly encouraged.
diff --git a/src/nota/resolvers.cljs b/src/nota/resolvers.cljs
index 6dd0a02..b65e68d 100644
--- a/src/nota/resolvers.cljs
+++ b/src/nota/resolvers.cljs
@@ -57,7 +57,8 @@
:post/name
:post/path
:post/description
- :post/tags]}
+ :post/tags
+ :post/timestamp]}
(-> :posts
database-fn
(get id)
diff --git a/src/nota/ui.cljs b/src/nota/ui.cljs
index 3f51ae6..baeb8a0 100644
--- a/src/nota/ui.cljs
+++ b/src/nota/ui.cljs
@@ -1,12 +1,13 @@
(ns nota.ui
(:require [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
[com.fulcrologic.fulcro.dom :as dom]
- [com.fulcrologic.fulcro.routing.dynamic-routing :as dr :refer [defrouter]]
[com.fulcrologic.fulcro.react.hooks :as hooks]
+ [com.fulcrologic.fulcro.routing.dynamic-routing :as dr :refer [defrouter]]
+ [nota.routing :as routing]
+ [nota.ui.icons :as ui.icons]
[nota.ui.pages :as ui.pages]
[nota.ui.posts :as ui.posts]
- [nota.ui.posts.pagination :as ui.posts.pagination]
- [nota.routing :as routing]))
+ [nota.ui.posts.pagination :as ui.posts.pagination]))
(defrouter TopRouter [_this {:keys [current-state]}]
{:router-targets [ui.pages/Page
@@ -29,16 +30,18 @@
{:use-hooks? true}
(let [[theme change-theme] (hooks/use-state "dark")]
(dom/header
- (dom/nav {:class "nota-nav"}
+ (dom/nav {:classes ["nota-nav"]}
(dom/button {:onClick #(js/window.open "https://github.com/rafaeldelboni/nota" "_blank")
- :class "nota-btn nota-btn--source"}
+ :classes ["nota-btn" "nota-btn--source"]}
"Source")
- (dom/button {:class "nota-btn nota-btn--theme"
+ (dom/button {:classes ["nota-btn" "nota-btn--theme"]
:onClick (toggle-theme theme change-theme)}
- (if (= theme "dark") "🌞" "🌚"))
+ (if (= theme "dark")
+ (ui.icons/sun-icon {:width 25 :height 25})
+ (ui.icons/moon-icon {:width 25 :height 25})))
(map ui.pages/ui-list-page list-pages)
(dom/button {:onClick #(routing/route-to! (dr/path-to ui.posts.pagination/PaginatedPosts "list"))
- :class "nota-btn"}
+ :classes ["nota-btn"]}
"Blog")))))
(def header (comp/factory Header))
diff --git a/src/nota/ui/icons.cljs b/src/nota/ui/icons.cljs
new file mode 100644
index 0000000..bfae243
--- /dev/null
+++ b/src/nota/ui/icons.cljs
@@ -0,0 +1,36 @@
+(ns nota.ui.icons
+ (:require [com.fulcrologic.fulcro.dom :as dom]
+ [com.fulcrologic.fulcro.components :as comp :refer [defsc]]))
+
+(defsc SunIcon [_ {:keys [width height]}]
+ {}
+ (dom/svg {:version "1.1"
+ :xmlns "http://www.w3.org/2000/svg"
+ :aria-hidden "true"
+ :role "img"
+ :width (or width 10)
+ :height (or height 10)
+ :style {:verticalAlign "-0.125em"}
+ :preserveAspectRatio "xMidYMid meet"
+ :viewBox "0 0 512 512"}
+ (dom/title "sum")
+ (dom/path {:d "M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96s96-43.1 96-96s-43.1-96-96-96zm246.4 80.5l-94.7-47.3l33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5l-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4l-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3l-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5l47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7l100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4l94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0c-49.9-49.9-49.9-131.1 0-181c49.9-49.9 131.1-49.9 181 0c49.9 49.9 49.9 131.1 0 181z"
+ :fill "white"})))
+
+(def sun-icon (comp/factory SunIcon))
+
+(defsc MoonIcon [_ {:keys [width height]}]
+ {}
+ (dom/svg {:version "1.1"
+ :xmlns "http://www.w3.org/2000/svg"
+ :aria-hidden "true"
+ :role "img"
+ :width (or width 10)
+ :height (or height 10)
+ :preserveAspectRatio "xMidYMid meet"
+ :viewBox "0 0 512 512"}
+ (dom/title "moon")
+ (dom/path {:d "M283.211 512c78.962 0 151.079-35.925 198.857-94.792c7.068-8.708-.639-21.43-11.562-19.35c-124.203 23.654-238.262-71.576-238.262-196.954c0-72.222 38.662-138.635 101.498-174.394c9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256c0 141.309 114.511 256 256 256z"
+ :fill "#575757"})))
+
+(def moon-icon (comp/factory MoonIcon))
diff --git a/src/nota/ui/pages.cljs b/src/nota/ui/pages.cljs
index f855718..0414a15 100644
--- a/src/nota/ui/pages.cljs
+++ b/src/nota/ui/pages.cljs
@@ -31,6 +31,6 @@
:page/name]
:ident (fn [] [:page/id (:page/id props)])}
(dom/button {:onClick #(routing/route-to! (dr/path-to Page id))
- :class "nota-btn"} name))
+ :classes ["nota-btn"]} name))
(def ui-list-page (comp/factory ListPage {:keyfn :page/id}))
diff --git a/src/nota/ui/posts.cljs b/src/nota/ui/posts.cljs
index f06f3e5..270176f 100644
--- a/src/nota/ui/posts.cljs
+++ b/src/nota/ui/posts.cljs
@@ -19,12 +19,13 @@
(def link-tags (comp/factory LinkTags {:keyfn :tag/id}))
-(defsc Post [_this {:post/keys [body tags]}]
+(defsc Post [_this {:post/keys [body tags timestamp]}]
{:query [:ui/modified?
:post/id
:post/name
:post/path
:post/body
+ :post/timestamp
{:post/tags (comp/get-query LinkTags)}]
:ident :post/id
:route-segment ["post" :post/id]
@@ -38,7 +39,8 @@
(dom/div
(dom/div :.inline
(map link-tags tags))
- (ui.markdown/render {:body body}))
+ (ui.markdown/render {:body body})
+ (dom/h3 (adapters/timestamp->utc-string timestamp " mmm dd, yyyy")))
(dom/div "loading")))
(defsc ListPost [_this {:post/keys [id name timestamp description]}]
@@ -48,7 +50,7 @@
:post/description
:ui/fetch-state]
:ident [:posts/by-id :post/id]}
- (dom/section {:class "nota-posts"}
+ (dom/section {:classes ["nota-posts"]}
(dom/a {:onClick #(routing/route-to! (dr/path-to Post id))}
(dom/p :.inline
(dom/span :.post-title