commit 316678d97ac539affb3a2b0ee92f29e4fcc1b91e
parent f5741aa7c70b49d25a741d94bf2a38905346581b
Author: massi <mdsiboldi@gmail.com>
Date: Sat, 27 Jul 2024 02:05:14 -0700
split out code to share, update styles, update build process slightly
Diffstat:
6 files changed, 139 insertions(+), 71 deletions(-)
diff --git a/Makefile b/Makefile
@@ -13,4 +13,4 @@ serve:
make build; \
done
publish: build
- scp -r build/* "${MASSIWORLD_HOST}:"
+ rsync -r --delete build/ "${MASSIWORLD_HOST}:/home/protected/builds/massi-world"
diff --git a/src/massi_world.clj b/src/massi_world.clj
@@ -2,41 +2,23 @@
(:require [hiccup2.core :as h]
[clojure.java.io :as io]
[markdown.core :as md]
- [clojure.string :as cstr]))
+ [clojure.string :as cstr]
+ [share :as shr]))
-(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 massi-world-site-stuff [argmap]
+ (concat (shr/massi-world-domain-stuff argmap)
+ (list [:link {:rel "stylesheet" :href "/static/style.css"}]
+ [:link {:rel "manifest" :href "/manifest.json"}])))
+
+
+(defn with-page [argmap & body]
+ (h/html (h/raw "<!DOCTYPE html>")
+ [:html.no-js
+ [:head
+ (massi-world-site-stuff
+ (merge argmap
+ {:path (str "https://massi.world" (get argmap :path))}))]]
+ [:body (seq body)]))
(defn header []
[:header "massi world 🦝"])
@@ -66,28 +48,6 @@
(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
@@ -101,7 +61,7 @@
:desc "a digital video synthesizer on the web"}
(header)
[:main.color-synth
- [:div.md (md "src/color-synth.md"
+ [:div.md (shr/md "src/color-synth.md"
{:samples [:div.samples
[:img {:src "/static/color-synth-sample-1.webp"
:alt "a pixelated wobbling smiley face"}]
@@ -113,3 +73,5 @@
:alt "mellow swampy waves"}]]})]]
(footer))}]]
(mk-page spec))))
+
+(build nil)
diff --git a/src/share.clj b/src/share.clj
@@ -0,0 +1,67 @@
+(ns share
+ (:require [hiccup2.core :as h]
+ [clojure.java.io :as io]
+ [markdown.core :as md]
+ [clojure.string :as cstr]))
+
+(defn base-head-stuff [ {:keys [path title desc img]}]
+ (list [:meta {:charset "UTF-8"}]
+ [:meta {:name "viewport"
+ :content "width=device-width"
+ :initial-screen-scale "1"}]
+ [:title title]
+ [:script {:type "module"} (h/raw "document.documentElement.classList.remove('no-js');
+document.documentElement.classList.add('js');")]
+ [: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 path}]
+ [:meta {:name "theme-color" :content "#000033"}]
+ [:link {:rel "canonical" :href path}]))
+
+(defn massi-world-domain-stuff [{:or {img {:src "https://massi.world/static/massi-world-180-180.png"
+ :desc "an undiscovered planet."}}
+ :as argmap}]
+ (concat (base-head-stuff argmap)
+ (list [: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"}])))
+
+(def linkback-footer
+ (list [:footer "made by " [:a {:href "https://massi.world"} "massi"]]))
+
+(defn fill-templ [templstr hole-map]
+ (clojure.string/replace
+ templstr
+ #"@\(([^\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)))))
+
+(defn process-templ [in-file out-file hole-map]
+ (if (or (not (string? in-file)) (not (string? out-file)) (= in-file out-file))
+ (throw (Exception. "unable to process template. either in/out files not specified or they're the same. which would be weird.")))
+ (spit out-file (fill-templ (slurp in-file) hole-map)))
+
+(defn md-hole [hole-map]
+ (fn [text state]
+ [(fill-templ text hole-map) 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)))))
+
diff --git a/static/spiral.svg b/static/spiral-for-dark-mode.svg
diff --git a/static/spiral-for-light-mode.svg b/static/spiral-for-light-mode.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.9rem" height="0.9rem" 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="#000000">
+ <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
@@ -1,16 +1,22 @@
:root {
- --light: #99ccff;
- --dark: #001133;
+ --dark-bg: #1d2c3a;
+ --dark-fg: #acbdcf;
+ --light-bg: #def0ff;
+ --light-fg: #455564;
}
html {
font-size: 24px;
+ color: var(--light-fg);
+ background: var(--light-bg);
+
}
body {
line-height: 1.5;
margin: 0px auto;
max-width: 35rem;
+ padding: 0.75rem;
}
h1 {
@@ -18,19 +24,16 @@ h1 {
}
ul > li {
- list-style: url("/static/spiral.svg")
+ list-style: url("/static/spiral-for-light-mode.svg")
}
@media (prefers-color-scheme: dark) {
html {
- background: var(--dark);
- color: var(--light);
+ background: var(--dark-bg);
+ color: var(--dark-fg);
}
-}
-@media (prefers-color-scheme: light) {
- html {
- color: var(--dark);
- background: var(--light);
+ ul > li {
+ list-style: url("/static/spiral-for-dark-mode.svg")
}
}
@@ -42,9 +45,26 @@ ul > li {
.color-synth .samples > * {
flex: auto;
min-width: 1px;
- max-width: 200px;
+ max-width: 8rem;
+ margin: 0 0 0.5rem 0.5rem;
+ border-radius: 0.2rem;
+}
+
+.color-synth .samples > *:first-child {
+ margin-left: 0;
}
-.color-synth .samples > *:not(:first-child) {
- margin-left: 10px;
+@media (max-width: 600px) {
+ html {
+ font-size: 18px;
+ }
+ .color-synth .samples {
+ flex-wrap: wrap;
+ }
+ .color-synth .samples > * {
+ max-width: calc(50% - 0.25rem);
+ }
+ .color-synth .samples > *:nth-child(2n+1) {
+ margin-left: 0;
+ }
}
