polish up the index and some exposition

README.md

@@ -1,4 +1,4 @@
-# Nature of Code
+# Nature of Code - Clojure
 
 [![License][license]][license-url]
 

deps.edn

@@ -1,4 +1,4 @@
-{:paths ["src" "dev"]
+{:paths ["src" "dev" "resources"]
  :deps  {org.clojure/clojure {:mvn/version "1.11.2"}
 
          ;; Make beautiful animations with p5.js
@@ -37,10 +37,7 @@
   {:exec-fn user/static-build!
    :exec-args
    {:paths    ["notebooks/**"]
-    ;; TODO uncomment this if you want to specify a specific file as your index.
-    ;; If it stays commented and you add more notebooks, Clerk will
-    ;; automatically generate an index for you.
-    ;; :index "notebooks/a_notebook.clj"
+    :index "notebooks/index.md"
     :out-path "public"}}
 
   :watch

dev/noc/sci.cljs

@@ -9,12 +9,9 @@
 ;; ## SCI Customization
 
 (def custom-namespaces
-  {'noc.sketch
-   (sci/copy-ns noc.sketch (sci/create-ns 'noc.sketch))
-   'q
-   (sci/copy-ns quil.core (sci/create-ns 'quil.core))
-   'noc.render
-   (sci/copy-ns noc.render (sci/create-ns 'noc.render))
+  {'noc.sketch (sci/copy-ns noc.sketch (sci/create-ns 'noc.sketch))
+   'q (sci/copy-ns quil.core (sci/create-ns 'quil.core))
+   'noc.render (sci/copy-ns noc.render (sci/create-ns 'noc.render))
    ;; Add any more namespaces here! Make sure to `:require` anything you add at
    ;; the top.
    })

dev/user.clj

@@ -96,19 +96,20 @@
 
 (comment
 
-  (start-with-shadow!)                  ;; rcf
   (do
+    (start-with-shadow!)
     (require '[portal.api :as p])
     (def p (p/open {:theme :portal.colors/gruvbox}))
-    (add-tap #'p/submit))
+    (add-tap #'p/submit)) ;; rcf
 
   (garden!
    {:paths    ["src/**"]
-    ;; TODO uncomment this if you want to specify a specific file as your index.
-    ;; If it stays commented and you add more notebooks, Clerk will
-    ;; automatically generate an index for you.
-    ;; :index "path/to/notebook.clj"
+    :index "notebooks/index.md"
     :out-path "public"})
 
-  ;;
+  (static-build! {:paths    ["notebooks/**"]
+                  ;; :index "notebooks/index.md"
+                  :out-path "public"})
+
+;;
   )

notebooks/background.md

@@ -0,0 +1,56 @@
+```clojure
+(ns background
+  {:nextjournal.clerk/visibility {:code :hide}}
+  (:require
+   [nextjournal.clerk :as clerk]))
+```
+
+# Background
+
+In addition to Clojure itself, I'm using a few stellar libraries that make this beautiful and readable in the browser.
+
+**Rendering**: I am using [Quil](http://quil.info/) for rendering. Quil is a Clojure wrapper around p5.js, so much of the rendering code is thankfully the same.
+
+**Static Publishing**:  I am also using [Clerk](https://clerk.vision/) to render the sketches among prose. Clerk is a Clojure library that allows you to embed interactive Clojure code in a notebook.
+
+### Mutation-free Sketches
+
+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 (I mean, that's what makes this a fun exercise in the first place!).
+
+You will always see at least three functions in each example
+
+```clojure
+^{:nextjournal.clerk/visibility {:code :show :result :hide}}
+(defn init-state
+  "Calculate the initial state given the width and height of the sketch.
+
+  This pure function is called once at the beginning of the sketch, and again
+  whenever the sketch is restarted.  The return value must be a map that contains the
+  initial state of the sketch."
+  [{:keys [width height]}])
+
+^{:nextjournal.clerk/visibility {:code :show :result :hide}}
+(defn setup!
+  "Setup initial canvas
+
+  This function is called once at the beginning of the sketch, and again
+  whenever the sketch is restarted, and it is called in the Quil context, so it
+  can make drawing calls. The return value is ignored."
+  [])
+
+^{:nextjournal.clerk/visibility {:code :show :result :hide}}
+(defn tick
+  "Update the state of the sketch
+
+  This pure function is called once per frame. It takes the current state and returns
+  the next state."
+  [state])
+
+^{:nextjournal.clerk/visibility {:code :show :result :hide}}
+(defn draw!
+  "Draw the current state of the sketch.
+
+  This function is called once per frame after the tick function. It takes the
+  current state and draws it to the screen. The return value of this function is ignored."
+  [state])
+```

notebooks/chapter_0.clj

@@ -8,13 +8,13 @@
 ;; ## [Example 0.1: A Traditional Random Walk](https://natureofcode.com/random/#example-01-a-traditional-random-walk)
 
 ^{::clerk/no-cache true ::clerk/viewer clerk/code}
-(slurp "dev/noc/chapter_0_1.cljs")
+(slurp "src/noc/chapter_0_1.cljs")
 
 (show-sketch :walker)
 
 ;; ## [Example 0.2: A Random-Number Distribution](https://natureofcode.com/random/#example-02-a-random-number-distribution)
 
 ^{::clerk/no-cache true ::clerk/viewer clerk/code}
-(slurp "dev/noc/chapter_0_2.cljs")
+(slurp "src/noc/chapter_0_2.cljs")
 
 (show-sketch :rand-dist)

notebooks/index.md

@@ -0,0 +1,54 @@
+```clojure
+(ns index
+  {:nextjournal.clerk/visibility {:code :hide}}
+  (:require
+   [noc.render]
+   [nextjournal.clerk :as clerk]
+   [clojure.java.io :as io]))
+```
+
+# Nature of Code in Clojure
+
+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]
+
+[noc2]: https://github.com/nature-of-code/noc-book-2
+
+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.
+
+
+### Why?
+
+I've been a fan of Daniel Shiffman's work (the 1st edition of Nature of Code, as well as his excellent [Coding Train](https://thecodingtrain.com/) for a long time.  I've always wanted to work through the book. This is a great way to do it!
+
+Implementing it in Clojure lets me train my functional muscles and it's rather fun.
+
+### How?
+
+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](background.md).
+
+## Table of Contents
+
+```clojure
+(clerk/html
+ (into
+  [:div.md:grid.md:gap-8.md:grid-cols-2.pb-8]
+  (map
+   (fn [{:keys [path preview title description]}]
+     [:a.rounded-lg.shadow-lg.border.border-gray-300.relative.flex.flex-col.hover:border-indigo-600.group.mb-8.md:mb-0
+      {:href (clerk/doc-url path) :title path :style {:height 300}}
+      [:div.flex-auto.overflow-hidden.rounded-t-md.flex.items-center.px-3.py-4
+      (when preview
+        (noc.render/image-ext {:width "100%" :style {:object-fit "contain"}}
+                               preview))]
+      [:div.sans-serif.border-t.border-gray-300.px-4.py-2.group-hover:border-indigo-600
+       [:div.font-bold.block.group-hover:text-indigo-600 title]
+       [:div.text-xs.text-gray-500.group-hover:text-indigo-600.leading-normal description]]])
+   [{:title "Chapter 0"
+     :preview (io/resource "assets/img/chapter0.png")
+     :path "notebooks/chapter_0.clj"
+     :description "Randomness"}])))
+```