feat: Adds sun/moon svgs; time on posts

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.  

resources/public/index.html

@@ -9,7 +9,7 @@
     <!-- 114px PNG Icon -->
     <link rel="icon" type="image/png" href="img/favicon.png"> 
 
-    <!-- Google Fonts -->
+    <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;500&family=Poppins:wght@500;600&display=swap" rel="stylesheet">

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.

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)

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))

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))

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}))

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