Fix links to the NOC book and add a prominent under-construction notice.

README.md

@@ -2,9 +2,11 @@
 
 [![License][license]][license-url]
 
-This is a ClojureScript implementation of the samples and exercises from [Nature of Code (2nd Edition)](noc2) by Daniel Shiffman 
+This is a ClojureScript implementation of the samples and exercises from [Nature
+of Code (2nd Edition)][noc2] by Daniel Shiffman, implemented using [Quil][quil]
+and rendered with [Clerk][clerk].
 
-> ➡️View live at: https://ramblurr.github.io/nature-of-code/
+> ##  ➡️ View live at: https://ramblurr.github.io/nature-of-code/
 
 ## Dependencies
 
@@ -99,4 +101,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 [license]: https://img.shields.io/github/license/ramblurr/nature-of-code
 [license-url]: LICENSE
-[noc2]: https://github.com/nature-of-code/noc-book-2
+[noc2]: https://natureofcode.com/
+[quil]: http://quil.info/
+[clerk]: https://clerk.vision/

notebooks/index.md

@@ -3,6 +3,7 @@
   {:nextjournal.clerk/visibility {:code :hide}}
   (:require
    [noc.render]
+   [noc.clerk-ext :as clerk-ext]
    [nextjournal.clerk :as clerk]
    [clojure.java.io :as io]))
 ```
@@ -11,11 +12,15 @@
 
 This is my ClojureScript implementation of the samples and exercises from [Nature of Code (2nd Edition)][noc2] by Daniel Shiffman.
 
-The book will be released in July 2024 but is available for pre-order now, [go check it out!][noc2]
+The book will be released in July 2024. It is available online for free, but the pre-order for the hardback and ebook editions are open now. [Go check it out!][noc2]
 
-[noc2]: https://github.com/nature-of-code/noc-book-2
+[noc2]: https://natureofcode.com/
 
-This project is a work in progress and isn't yet finished. I add to it when I find the time, which may not be often.
+```
+(clerk-ext/admonition " This project is a work in progress and isn't yet finished. I add to it when I find the time, which may not be often." :style :warning)
+```
+
+You can find the source code for all of this at on GitHub at https://github.com/Ramblurr/nature-of-code
 
 
 ### Why?
@@ -28,7 +33,12 @@ Implementing it in Clojure lets me train my functional muscles and it's rather f
 
 Though I've tried to keep the code as close to the original as possible, Clojure is an immutable functional programming language, and my translation of the examples adhere to that property.
 
-To learn how I've structured the code to avoid willy-nilly mutation or what tech I'm using to render all of this, check out the [background](notebooks/background).
+
+```clojure
+(clerk/html
+  [:p "To learn how I've structured the code to avoid willy-nilly mutation or what tech I'm using to render all of this, check out the " 
+    [:a {:href (clerk/doc-url "notebooks/background")} "background"] "."])
+```
 
 ## Table of Contents
 

src/noc/clerk_ext.clj

@@ -0,0 +1,44 @@
+(ns noc.clerk-ext
+  (:require [nextjournal.clerk :as clerk]))
+
+(def icons {:info [:svg
+                   {:xmlns "http://www.w3.org/2000/svg",
+                    :fill "none",
+                    :viewBox "0 0 24 24",
+                    :stroke-width "1.5",
+                    :stroke "currentColor",
+                    :class "size-8 flex-shrink-0 inline me-3"}
+                   [:path
+                    {:stroke-linecap "round",
+                     :stroke-linejoin "round",
+                     :d
+                     "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"}]]
+            :warning  [:svg
+                       {:xmlns "http://www.w3.org/2000/svg",
+                        :fill "none",
+                        :viewBox "0 0 24 24",
+                        :stroke-width "1.5",
+                        :stroke "currentColor",
+                        :class "size-8 flex-shrink-0 inline me-3"}
+                       [:path
+                        {:stroke-linecap "round",
+                         :stroke-linejoin "round",
+                         :d
+                         "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"}]]})
+
+(def color {:info "text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
+            :warning "text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"})
+
+(defn admonition [body & {:keys [style]
+                          :or {style :info}}]
+  (clerk/html
+   [:div
+    {:class
+     (str
+      "flex items-center p-4 mb-4 text-sm rounded-lg "
+      (get color style))
+     :role "alert"}
+    (get icons style)
+    [:span {:class "sr-only"} "Info"]
+    [:div
+     body]]))

src/noc/ui.cljs → src/noc/quil/ui.cljs

@@ -1,4 +1,4 @@
-(ns noc.ui
+(ns noc.quil.ui
   (:require
    [quil.sketch :as ap :include-macros true]))
 

src/noc/sketch.cljs

@@ -3,7 +3,7 @@
   (:require [quil.core :as q]
             [quil.middleware :as m]
             [quil.sketch :as ap :include-macros true]
-            [noc.ui :as ui]
+            [noc.quil.ui :as ui]
             [noc.chapter-0-1 :as c0.1]
             [noc.chapter-0-2 :as c0.2]
             [noc.chapter-0-3 :as c0.3]