Pattern generation for each site is working

index.janet

@@ -29,4 +29,4 @@
           :posts {:each :posts
                   :dest (bagatto/%p "posts" '%i "title" '% ".html")
                   :out (fn [data item]
-                         (views/with-raw-html data (bagatto/mmarkdown->html (item :contens))))}})
+                         (views/base data (bagatto/mmarkdown->html (item :contents)) true))}})

views.janet

@@ -3,15 +3,93 @@
 (defn as-html [h]
   (html/encode (html/doctype :html5) [:html h]))
 
-(defn header [data]
+(defn html-head [data]
   [:head
    [:meta {:charset "utf-8"}]
-   [:title (get-in data [:config :title])]])
+   [:title (get-in data [:config :title])]
+   [:style
+    [```
+    body {
+      background: #fefefe;
+    }
 
-(defn base [data body]
+    path {
-  (as-html [(header data)
+      stroke: rebeccapurple;
-            [:body body]]))
+      fill: transparent;
+      stroke-width: 1.5px;
+      stroke-linecap: round;
+    }
+    ```]]])
 
-(defn with-raw-html [data raw-html]
+# below are some functions we need for the unique svgs generated for each page
-  (as-html [(header data)
+# arc drawing in svg is a bit messy. these two links helped me:
-            [:body (html/raw raw-html)]]))
+# - http://xahlee.info/js/svg_circle_arc.html
+# - https://stackoverflow.com/a/18473154
+
+(defn polar->cartesian
+  ```
+  Given a pair of coordinates representing the center, returns the cartesian
+  coordinate for a straight line drawn at radian angle `alpha` with
+  length `len`.
+  ```
+  [c-x c-y radius alpha]
+  [(+ c-x (* radius (math/cos alpha)))
+   (+ c-y (* radius (math/sin alpha)))])
+
+(defn arc
+  ```
+  Draws an svg arc with the given radius with a center at `c-x` and `c-y`. Note
+  that `start` and `end` have to be given in radians. Due to limitations in SVG
+  angles at exactly (* 2 math/pi) are not possible.
+  ```
+  [c-x c-y radius start end]
+  (let [large-arc? (<= (- end start) math/pi)
+        [x1 y1] (polar->cartesian c-x c-y radius end)
+        [x2 y2] (polar->cartesian c-x c-y radius start)]
+    [:path {:d (string/format
+                 "M %.2f %.2f A %.2f %.2f 0 %.0f 0 %.2f %.2f"
+                 # starting point
+                 x1 y1 
+                 # defining the arc
+                 radius radius (if large-arc? 0 1)
+                 # end point
+                 x2 y2)}]))
+
+(def num-tiles 10)
+(def width 160)
+(def height 160)
+(def half-pi (/ math/pi 2))
+
+(defn ten-print
+  "Generates a unique SVG pattern for some given content."
+  [content]
+  (let [xs (map |(* width (/ $0 num-tiles)) (range (+ num-tiles 1)))
+        ys (map |(* height (/ $0 num-tiles)) (range (+ num-tiles 1)))
+        radius (/ width num-tiles 2)]
+    (math/seedrandom (hash content))
+    [:svg {:viewBox (string/format "0 0 %d %d" width height)
+           :xmlns "http://www.w3.org/2000/svg"
+           :width width
+           :height height
+           :style "overflow: visible"}
+     [:g {:transform "translate(0.5, 0.5)"}
+      (mapcat
+        (fn [y]
+          (map (fn [x]
+                 (let [rand (math/random)
+                       start-angle (if (< rand 0.5) half-pi 0)]
+                   (arc x y radius start-angle (+ start-angle (* 3 half-pi)))))
+               xs)) ys)]]))
+
+(defn base
+  ```
+  You can call this with some content and have it generate an entire HTML
+  structure for you.
+  ```
+  [data body &opt raw?]
+  (default raw? false)
+  (as-html [(html-head data)
+            [:body
+             [:header
+              (ten-print body) ]
+             (if raw? (html/raw body) body) ]]))