commit 594ae0dea4236df2aacdf0c9de88139449436eec
parent 529643581b962f5be401c0050ef8edb606a5859d
Author: massi <mdsiboldi@gmail.com>
Date: Thu, 25 Jul 2024 00:33:28 -0700
complete transition to clojure.. and more!
Diffstat:
8 files changed, 165 insertions(+), 90 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
build
.env
**/#*#
-**/*.draft
-\ No newline at end of file
+**/*.draft
+.cpcache
+.nrepl-port
+\ No newline at end of file
diff --git a/Makefile b/Makefile
@@ -5,7 +5,7 @@ build:
cp -r static build/
cp server-root/* build/
tsc --outDir build/js src/*.ts
- ./make.lisp
+ clj -X massi-world/build
serve:
http-server build -p 8080 & while true; do \
inotifywait @./build -qre close_write .; \
diff --git a/deps.edn b/deps.edn
@@ -1,4 +1,3 @@
-{
- :deps
- {hiccup/hiccup {:mvn/version "2.0.0-RC3"}}
- }
+{:deps {
+ hiccup/hiccup {:mvn/version "2.0.0-RC3"}
+ markdown-clj/markdown-clj {:mvn/version "1.12.1"}}}
diff --git a/src/color-synth.md b/src/color-synth.md
@@ -1,6 +1,10 @@
-- [git repo here](https://massi.world/git/color-synth)
+# color-synth
+
+- [git repo here](https://massi.world/git/browse/color-synth)
- [check out color-synth here!](https://massi.world/color-synth)
+@(samples)
+
## About
Color-synth is a virtual modular [video synthesizer](https://en.wikipedia.org/wiki/Video_synthesizer). Add and hook up various signal-generating modules, connect them to the video output channels, and watch the colors start dancing in your eyes.
diff --git a/src/main.clj b/src/main.clj
@@ -1,82 +0,0 @@
-(ns massi-world
- (:require [hiccup2.core :as h]))
-
-(defmacro with-page
- "wraps body in a nice page with metadata and such"
- [{:keys [path title desc img]
- :or {img {:src "https://massi.world/static/massi-world-180-180.png"
- :desc "an unknown planet. could it be... massi world!?"}}}
- & body]
- (let [abs-path (str "https://massi.world" path)]
- `(h/html [:doctype]
- [:html.no-js]
- [:head
- [:meta {:charset "UTF-8"}]
- [:meta {:name "viewport"
- :content "width=device-width"
- :initial-screen-scale "1"}]
- [:title ~title]
- [:script {:type "module" :src "/js/js-check.js"}]
- [:link {:rel "stylesheet" :href "/static/style.css"}]
- [:meta {:name "description" :content ~desc}]
- [:meta {:property "og:title" :content ~title}]
- [:meta {:property "og:image" :content (get ~img :src)}]
- [:meta {:property "og:image:alt" :content (get ~img :desc)}]
- [:meta {:property "og:locale" :content "en_US"}]
- [:meta {:property "og:type" :content "website"}]
- [:meta {:property "og:url" :content ~abs-path}]
- [:meta {:name "theme-color" :content "#000033"}]
- [:link {:rel "canonical" :href ~abs-path}]
- [:link {:rel "shortcut icon" :href "/favicon.ico"}]
- [:link {:rel "icon" :type "image/png" :sizes "16x16" :href "/static/massi-world-16-16.png"}]
- [:link {:rel "icon" :type "image/png" :sizes "32x32" :href "/static/massi-world-32-32.png"}]
- [:link {:rel "icon" :type "image/png" :sizes "48x48" :href "/static/massi-world-48-48.png"}]
- [:link {:rel "apple-touch-icon" :href "/static/massi-world-180-180.png"}]
- [:link {:rel "manifest" :href "/manifest.json"}]]
- [:body ~@body])))
-
-(str (with-page {:path "/index.html"
- :title "massi world"
- :desc "massi world - home page"}))
-
-(defn header []
- [:header "massi world 🦝"])
-(defn footer []
- [:footer
- "Last generated: "
- (.format (java.text.SimpleDateFormat. "MM/dd/yyyy hh:mm:ssa z")
- (new java.util.Date))])
-
-(defn mk-home [path]
- (with-page {:path path
- :title "massi world"
- :desc "home"}
- (header)
- [:section
- [:h1 "projects"]
- [:ul
- [:li [:a {:href "/projects/color-synth.html"} "color-synth"]]]
- (footer)]))
-
-(defn mk-page [{:keys [path fn]}]
- (let* [out-dir "build"
- out-file (str out-dir path)
- out-str (str (apply fn `(~path)))]
- (spit out-file out-str)
- (println "wrote" out-file)
- out-str))
-
-(defn mk-site []
- (println "building site...")
- (time
- (doseq [spec [{:path "/index.html" :fn mk-home}
- {:path "/projects/color-synth.html"
- :fn #(with-page {:path %
- :title "projects -> color-synth"
- :desc "a digital video synthesizer on the web"}
- (header)
- [:main.color-synth
- [:div.samples
- [:img {:src "/static/color-synth-sample-1.webp" :alt "a pixelated wobbling smiley face"}]]]
- (footer))}]]
- (mk-page spec))))
diff --git a/src/massi_world.clj b/src/massi_world.clj
@@ -0,0 +1,115 @@
+(ns massi-world
+ (:require [hiccup2.core :as h]
+ [clojure.java.io :as io]
+ [markdown.core :as md]
+ [clojure.string :as cstr]))
+
+(defmacro with-page
+ "wraps body in a nice page with metadata and such"
+ [{:keys [path title desc img]
+ :or {img {:src "https://massi.world/static/massi-world-180-180.png"
+ :desc "an unknown planet. could it be... massi world!?"}}}
+ & body]
+ (let [abs-path (str "https://massi.world" path)]
+ `(h/html [:doctype]
+ [:html.no-js]
+ [:head
+ [:meta {:charset "UTF-8"}]
+ [:meta {:name "viewport"
+ :content "width=device-width"
+ :initial-screen-scale "1"}]
+ [:title ~title]
+ [:script {:type "module" :src "/js/js-check.js"}]
+ [:link {:rel "stylesheet" :href "/static/style.css"}]
+ [:meta {:name "description" :content ~desc}]
+ [:meta {:property "og:title" :content ~title}]
+ [:meta {:property "og:image" :content (get ~img :src)}]
+ [:meta {:property "og:image:alt" :content (get ~img :desc)}]
+ [:meta {:property "og:locale" :content "en_US"}]
+ [:meta {:property "og:type" :content "website"}]
+ [:meta {:property "og:url" :content ~abs-path}]
+ [:meta {:name "theme-color" :content "#000033"}]
+ [:link {:rel "canonical" :href ~abs-path}]
+ [:link {:rel "shortcut icon" :href "/favicon.ico"}]
+ [:link {:rel "icon" :type "image/png" :sizes "16x16" :href "/static/massi-world-16-16.png"}]
+ [:link {:rel "icon" :type "image/png" :sizes "32x32" :href "/static/massi-world-32-32.png"}]
+ [:link {:rel "icon" :type "image/png" :sizes "48x48" :href "/static/massi-world-48-48.png"}]
+ [:link {:rel "apple-touch-icon" :href "/static/massi-world-180-180.png"}]
+ [:link {:rel "manifest" :href "/manifest.json"}]]
+ [:body ~@body])))
+
+(defn header []
+ [:header "massi world 🦝"])
+(defn footer []
+ [:footer
+ "Last generated: "
+ (.format (java.text.SimpleDateFormat. "MM/dd/yyyy hh:mm:ssa z")
+ (new java.util.Date))])
+
+(defn mk-home [path]
+ (with-page {:path path
+ :title "massi world"
+ :desc "home"}
+ (header)
+ [:section
+ [:h1 "projects"]
+ [:ul
+ [:li [:a {:href "/projects/color-synth.html"} "color-synth"]]]
+ (footer)]))
+
+(defn mk-page [{:keys [path fn]}]
+ (let* [out-dir "build"
+ out-file (str out-dir path)
+ out-str (str (apply fn `(~path)))]
+ (io/make-parents out-file)
+ (spit out-file out-str)
+ (println "wrote" out-file)
+ out-str))
+
+(defn md-hole [hole-map]
+ (fn [text state]
+ [(clojure.string/replace
+ text
+ #"@\(([^\s]+)\)"
+ (fn [match]
+ (let [hole-filler (get hole-map (keyword (second match)))]
+ (cond
+ (fn? hole-filler) (hole-filler)
+ (vector? hole-filler) (str (h/html hole-filler))
+ (nil? hole-filler) (throw (Exception. (str "No filler for hole " (second match))))
+ true hole-filler))))
+ state]))
+
+(defn md
+ ([file] (md file nil))
+ ([file hole-fillers]
+ (let* [base-args [:heading-anchors true]
+ args (if (map? hole-fillers)
+ (into base-args [:custom-transformers [(md-hole hole-fillers)]])
+ base-args)]
+ (h/raw (apply md/md-to-html-string (slurp file) args)))))
+
+;; _ arg is so we can call this with clj -X massi-world/build
+;; _ is expected to be a map, and clojure complains if we don't accept it
+(defn build [_]
+ (println "building site...")
+ (time
+ (doseq [spec [{:path "/index.html" :fn mk-home}
+ {:path "/projects/color-synth.html"
+ :fn #(with-page {:path %
+ :title "projects -> color-synth"
+ :desc "a digital video synthesizer on the web"}
+ (header)
+ [:main.color-synth
+ [:div.md (md "src/color-synth.md"
+ {:samples [:div.samples
+ [:img {:src "/static/color-synth-sample-1.webp"
+ :alt "a pixelated wobbling smiley face"}]
+ [:img {:src "/static/color-synth-sample-2.webp"
+ :alt "jagged vibrant waves"}]
+ [:img {:src "/static/color-synth-sample-3.webp"
+ :alt "a complicated animation. fuzzy, sharp, and checkered"}]
+ [:img {:src "/static/color-synth-sample-4.webp"
+ :alt "mellow swampy waves"}]]})]]
+ (footer))}]]
+ (mk-page spec))))
diff --git a/static/spiral.svg b/static/spiral.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="0.8rem" height="0.8rem" viewBox="-1 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title> spiral [#30]</title>
+ <desc>Created with Sketch.</desc>
+ <defs>
+
+</defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Dribbble-Light-Preview" transform="translate(-381.000000, -8039.000000)" fill="#ffffff">
+ <g id="icons" transform="translate(56.000000, 160.000000)">
+ <path d="M336.622775,7895.01452 C333.022714,7895.3213 329.929083,7892.89808 329.177444,7889.58357 C328.445822,7886.35728 330.675718,7883.02874 333.977526,7883.00969 C336.468644,7882.99565 338.540405,7884.8043 338.941747,7887.1814 C339.245004,7888.98202 338.148072,7890.82275 336.33453,7891.01324 C334.529995,7891.20273 333.0067,7889.7911 333.0067,7888.02256 C333.0067,7887.46914 333.455081,7887.01999 334.007551,7887.01999 C334.560021,7887.01999 335.008402,7887.46914 335.008402,7888.02256 C335.008402,7888.57598 335.456783,7889.02513 336.009253,7889.02513 C336.561723,7889.02513 337.010104,7888.57598 337.010104,7888.02256 C337.010104,7886.25402 335.486809,7884.84239 333.682275,7885.03188 C331.868733,7885.22337 330.7718,7887.0631 331.075058,7888.86372 C331.476399,7891.24183 333.548161,7893.04947 336.039279,7893.03543 C339.341086,7893.01638 341.570982,7889.68784 340.83936,7886.46155 C339.941597,7882.49938 335.695987,7879.81147 331.240198,7881.5369 C328.964263,7882.41716 327.340883,7884.52758 327.062646,7886.95582 C326.472144,7892.11507 330.230339,7896.53241 335.138513,7897.00463 C335.637937,7897.05275 336.009253,7897.49088 336.009253,7897.99417 C336.009253,7898.5917 335.488811,7899.05489 334.894305,7898.99474 C329.388624,7898.44031 325.07996,7893.82346 325.000893,7888.18097 C324.940842,7883.91401 327.915371,7880.06111 332.086918,7879.1989 C337.477502,7878.08404 342.265573,7881.79657 342.935142,7886.81546 C343.469596,7890.82075 340.642192,7894.67164 336.622775,7895.01452" id="-spiral-[#30]">
+
+</path>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/static/style.css b/static/style.css
@@ -3,6 +3,24 @@
--dark: #001133;
}
+html {
+ font-size: 24px;
+}
+
+body {
+ line-height: 1.5;
+ margin: 0px auto;
+ max-width: 35rem;
+}
+
+h1 {
+ font-size: 2rem;
+}
+
+ul > li {
+ list-style: url("/static/spiral.svg")
+}
+
@media (prefers-color-scheme: dark) {
html {
background: var(--dark);
