96 lines
5.7 KiB
Plaintext
96 lines
5.7 KiB
Plaintext
;; SX docs — home page components
|
|
|
|
;; YouTube video embed — rendered client-side from video ID returned by /api/random-video.
|
|
;; Marsh demo: server picks video (hypermedia), island controls playback (reactive).
|
|
;; Play/pause uses YouTube postMessage API via dom-call-method — no iframe reload.
|
|
(defcomp ~video-embed (&key video-id)
|
|
(let ((playing (signal true)))
|
|
(<>
|
|
;; Close button — clears via hypermedia
|
|
(button
|
|
:sx-get "/api/clear-video" :sx-target "#video-embed"
|
|
:sx-swap "innerHTML"
|
|
:style "position:absolute;top:-0.5rem;right:-0.5rem;width:1.25rem;height:1.25rem;border-radius:50%;border:none;background:rgba(0,0,0,0.5);color:white;font-size:0.75rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;"
|
|
"x")
|
|
;; Play/pause button — reactive signal toggles YouTube via postMessage
|
|
(button
|
|
:on-click (fn (e)
|
|
(let ((iframe (dom-query "#video-iframe"))
|
|
(win (dom-get-prop iframe "contentWindow"))
|
|
(cmd (if (deref playing) "pauseVideo" "playVideo")))
|
|
(dom-call-method win "postMessage"
|
|
(str "{\"event\":\"command\",\"func\":\"" cmd "\",\"args\":[]}")
|
|
"https://www.youtube.com")
|
|
(reset! playing (not (deref playing)))))
|
|
:style "position:absolute;top:1rem;right:-0.5rem;width:1.25rem;height:1.25rem;border-radius:50%;border:none;background:rgba(0,0,0,0.5);color:white;font-size:0.75rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;"
|
|
(if (deref playing) "||" ">"))
|
|
;; Iframe — stays in DOM, playback controlled via postMessage
|
|
(iframe :id "video-iframe"
|
|
:src (str "https://www.youtube.com/embed/" video-id "?autoplay=1&enablejsapi=1&controls=0&modestbranding=1&rel=0")
|
|
:allow "accelerometer; autoplay; encrypted-media"
|
|
:style "width:100%;aspect-ratio:16/9;border-radius:0.5rem;border:none;pointer-events:none;"))))
|
|
|
|
(defcomp ~sx-hero (&key &rest children)
|
|
(div :class "max-w-4xl mx-auto px-6 py-16 text-center"
|
|
(h1 :class "text-5xl font-bold text-stone-900 mb-4"
|
|
(span :class "text-violet-600 font-mono" "(<sx>)"))
|
|
(p :class "text-2xl text-stone-600 mb-4"
|
|
"Framework free reactive hypermedia")
|
|
(p :class "text-sm text-stone-400"
|
|
"© Giles Bradshaw 2026")
|
|
(p :class "text-lg text-stone-500 max-w-2xl mx-auto mb-12"
|
|
"(sx === code === data === protocol === content === behaviour === layout === style === spec === sx)")
|
|
(div :class "bg-stone-100 rounded-lg p-6 text-left font-mono text-sm mx-auto max-w-2xl"
|
|
(pre :class "leading-relaxed whitespace-pre-wrap" children))))
|
|
|
|
(defcomp ~sx-philosophy ()
|
|
(div :class "max-w-4xl mx-auto px-6 py-12"
|
|
(h2 :class "text-3xl font-bold text-stone-900 mb-8" "Design philosophy")
|
|
(div :class "grid md:grid-cols-2 gap-8"
|
|
(div :class "space-y-4"
|
|
(h3 :class "text-xl font-semibold text-violet-700" "From htmx")
|
|
(ul :class "space-y-2 text-stone-600"
|
|
(li "Server-rendered DOM over the wire (no HTML)")
|
|
(li "Hypermedia attributes on any element (sx-get, sx-post, ...)")
|
|
(li "Target/swap model for partial page updates")
|
|
(li "No client-side routing, no virtual DOM")
|
|
(li "Progressive enhancement — works without JS (mostly)")))
|
|
(div :class "space-y-4"
|
|
(h3 :class "text-xl font-semibold text-violet-700" "From React")
|
|
(ul :class "space-y-2 text-stone-600"
|
|
(li "Composable components with defcomp")
|
|
(li "Client-side rendering from s-expression source")
|
|
(li "Component caching via localStorage + hash invalidation")
|
|
(li "On-demand CSS — only ship what's used")
|
|
(li "DOM morphing for smooth history navigation"))))))
|
|
|
|
(defcomp ~sx-how-it-works ()
|
|
(div :class "max-w-4xl mx-auto px-6 py-12"
|
|
(h2 :class "text-3xl font-bold text-stone-900 mb-8" "How it works")
|
|
(div :class "space-y-6"
|
|
(div :class "flex items-start gap-4"
|
|
(div :class "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold" "1")
|
|
(div
|
|
(h3 :class "font-semibold text-stone-900" "Server renders sx")
|
|
(p :class "text-stone-600" "Python builds s-expression trees. Components, elements, data — all in one format.")))
|
|
(div :class "flex items-start gap-4"
|
|
(div :class "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold" "2")
|
|
(div
|
|
(h3 :class "font-semibold text-stone-900" "Wire sends text/sx")
|
|
(p :class "text-stone-600" "Responses are s-expression source code with content type text/sx. Component definitions cached client-side.")))
|
|
(div :class "flex items-start gap-4"
|
|
(div :class "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold" "3")
|
|
(div
|
|
(h3 :class "font-semibold text-stone-900" "Client evaluates + renders")
|
|
(p :class "text-stone-600" "sx.js parses, evaluates, and renders to DOM. Same evaluator runs server-side (Python) and client-side (JS)."))))))
|
|
|
|
(defcomp ~sx-credits ()
|
|
(div :class "max-w-4xl mx-auto px-6 py-12 border-t border-stone-200"
|
|
(p :class "text-stone-500 text-sm"
|
|
"sx is heavily inspired by "
|
|
(a :href "https://htmx.org" :class "text-violet-600 hover:underline" "htmx")
|
|
" by Carson Gross. This documentation site is modelled on "
|
|
(a :href "https://four.htmx.org" :class "text-violet-600 hover:underline" "four.htmx.org")
|
|
". htmx showed that hypermedia belongs on the server. "
|
|
"sx takes that idea and wraps it in parentheses.")))
|