Marsh demo: video embed with reactive+hypermedia interplay
- ~video-player defisland persists across SPA navigations (morph-safe) - Clicking "reactive" cycles colour (signal) + fetches random YouTube video (sx-get) - sx-trigger="fetch-video" + dom-first-child check: video keeps playing on repeat clicks - Close button (x) clears video via /api/clear-video hypermedia endpoint - Autoplay+mute removes YouTube's red play button overlay - Header restructured: logo in anchor, tagline outside (no accidental navigation) - Flex centering on video container Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,19 @@
|
||||
;; SX docs — home page components
|
||||
|
||||
;; YouTube embed — rendered client-side from video ID returned by /api/random-video.
|
||||
;; Marsh demo: the server picks the video (hypermedia), the island triggers the fetch (reactive).
|
||||
(defcomp ~video-embed (&key video-id)
|
||||
(<>
|
||||
(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")
|
||||
(iframe :src (str "https://www.youtube.com/embed/" video-id "?autoplay=1&mute=1")
|
||||
:allow "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
:allowfullscreen "true"
|
||||
:style "width:100%;aspect-ratio:16/9;border-radius:0.5rem;border: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"
|
||||
|
||||
Reference in New Issue
Block a user