From 1b13872369e50d44bdd27233708f57886a0ffa08 Mon Sep 17 00:00:00 2001 From: giles Date: Tue, 31 Mar 2026 10:12:45 +0000 Subject: [PATCH] Add Examples section to reactive islands page with highlighted source Each demo island now has a live rendering and its highlighted SX source code via (component-source), matching the geography/cek.sx pattern. 14 subsections covering all 15 demo islands. Co-Authored-By: Claude Opus 4.6 (1M context) --- sx/sx/reactive-islands/index.sx | 162 ++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) diff --git a/sx/sx/reactive-islands/index.sx b/sx/sx/reactive-islands/index.sx index 0c483504..acd6133c 100644 --- a/sx/sx/reactive-islands/index.sx +++ b/sx/sx/reactive-islands/index.sx @@ -233,6 +233,168 @@ " retrieves, " (code "clear-stores") " wipes all on full page navigation.")) + (~docs/section + :title "Examples" + :id "examples" + (p + "Each example below shows a live island and its source. Every island hydrates from server-rendered HTML — the reactive behaviour activates on the client.") + (~docs/section + :title "Counter" + :id "demo-counter" + (p "Signals, computed, and " (code "swap!") " in a minimal example.") + (~reactive-islands/index/demo-counter :initial 0) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-counter") + "lisp"))) + (~docs/section + :title "Temperature Converter" + :id "demo-temperature" + (p + "Two signals, each derived from the other via " + (code "effect") + ".") + (~reactive-islands/index/demo-temperature) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-temperature") + "lisp"))) + (~docs/section + :title "Imperative Handlers" + :id "demo-imperative" + (p "Multi-statement " (code "(do ...)") " bodies in event handlers.") + (~reactive-islands/index/demo-imperative) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-imperative") + "lisp"))) + (~docs/section + :title "Stopwatch" + :id "demo-stopwatch" + (p + (code "set-interval") + " and " + (code "clear-interval") + " with signal-driven UI.") + (~reactive-islands/index/demo-stopwatch) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-stopwatch") + "lisp"))) + (~docs/section + :title "Reactive List" + :id "demo-reactive-list" + (p "Dynamic list with keyed reconciliation — add and remove items.") + (~reactive-islands/index/demo-reactive-list) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-reactive-list") + "lisp"))) + (~docs/section + :title "Input Binding" + :id "demo-input-binding" + (p "Two-way binding via " (code ":bind") " attribute.") + (~reactive-islands/index/demo-input-binding) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-input-binding") + "lisp"))) + (~docs/section + :title "Dynamic Classes" + :id "demo-dynamic-class" + (p + "Reactive class toggling with " + (code "deref") + " in attribute expressions.") + (~reactive-islands/index/demo-dynamic-class) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-dynamic-class") + "lisp"))) + (~docs/section + :title "Portal" + :id "demo-portal" + (p "Render content outside the island's DOM subtree.") + (~reactive-islands/index/demo-portal) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-portal") + "lisp"))) + (~docs/section + :title "Error Boundary" + :id "demo-error-boundary" + (p "Catch rendering errors without crashing the page.") + (~reactive-islands/index/demo-error-boundary) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-error-boundary") + "lisp"))) + (~docs/section + :title "DOM Refs" + :id "demo-refs" + (p "Access raw DOM elements via " (code ":ref") " signal.") + (~reactive-islands/index/demo-refs) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-refs") + "lisp"))) + (~docs/section + :title "Resource" + :id "demo-resource" + (p + "Async data fetching with " + (code "promise-then") + " and loading state.") + (~reactive-islands/index/demo-resource) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-resource") + "lisp"))) + (~docs/section + :title "Transition" + :id "demo-transition" + (p + "Debounced search with " + (code "schedule-idle") + " and " + (code "batch") + ".") + (~reactive-islands/index/demo-transition) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-transition") + "lisp"))) + (~docs/section + :title "Named Stores" + :id "demo-stores" + (p + "Two islands sharing state via " + (code "def-store") + " / " + (code "use-store") + ". Change the colour in the writer — the reader updates.") + (~reactive-islands/index/demo-store-writer) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-store-writer") + "lisp")) + (~reactive-islands/index/demo-store-reader) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-store-reader") + "lisp"))) + (~docs/section + :title "Event Bridge" + :id "demo-event-bridge" + (p + "Server-rendered content communicating with an island via " + (code "bridge-event") + ".") + (~reactive-islands/index/demo-event-bridge) + (~docs/code + :src (highlight + (component-source "~reactive-islands/index/demo-event-bridge") + "lisp")))) (~docs/section :title "Design Principles" :id "principles"