Add Specs section, Reflexive Web essay, fix highlight and dev caching
- Fix highlight() returning SxExpr so syntax-highlighted code renders as DOM elements instead of leaking SX source text into the page - Add Specs section that reads and displays canonical SX spec files from shared/sx/ref/ with syntax highlighting - Add "The Reflexive Web" essay on SX becoming a complete LISP with AI as native participant - Change logo from (<x>) to (<sx>) everywhere - Unify all backgrounds to bg-stone-100, center code blocks - Skip component/style cookie cache in dev mode so .sx edits are visible immediately on refresh without clearing localStorage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Load server time")
|
||||
(div :id "ref-get-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click to load.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -36,7 +36,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Greet"))
|
||||
(div :id "ref-post-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Submit to see greeting.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
(defcomp ~ref-put-demo ()
|
||||
(div :id "ref-put-view"
|
||||
(div :class "flex items-center justify-between p-3 bg-stone-50 rounded"
|
||||
(div :class "flex items-center justify-between p-3 bg-stone-100 rounded"
|
||||
(span :class "text-stone-700 text-sm" "Status: " (strong "draft"))
|
||||
(button
|
||||
:sx-put "/reference/api/status"
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
(defcomp ~ref-patch-demo ()
|
||||
(div :id "ref-patch-view" :class "space-y-2"
|
||||
(div :class "p-3 bg-stone-50 rounded"
|
||||
(div :class "p-3 bg-stone-100 rounded"
|
||||
(span :class "text-stone-700 text-sm" "Theme: " (strong :id "ref-patch-val" "light")))
|
||||
(div :class "flex gap-2"
|
||||
(button :sx-patch "/reference/api/theme"
|
||||
@@ -93,7 +93,7 @@
|
||||
(button :sx-patch "/reference/api/theme"
|
||||
:sx-vals "{\"theme\": \"light\"}"
|
||||
:sx-target "#ref-patch-val" :sx-swap "innerHTML"
|
||||
:class "px-3 py-1 bg-white border border-stone-300 text-stone-700 rounded text-sm" "Light"))))
|
||||
:class "px-3 py-1 bg-stone-100 border border-stone-300 text-stone-700 rounded text-sm" "Light"))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; sx-trigger
|
||||
@@ -108,7 +108,7 @@
|
||||
:sx-swap "innerHTML"
|
||||
:class "w-full px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
|
||||
(div :id "ref-trigger-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Start typing to trigger a search.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -186,7 +186,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
||||
"Load (selecting #the-content)")
|
||||
(div :id "ref-select-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Only the selected fragment will appear here.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -242,7 +242,7 @@
|
||||
(p :class "text-xs text-stone-400"
|
||||
"With sync:replace, each new keystroke aborts the in-flight request.")
|
||||
(div :id "ref-sync-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Type to see only the latest result.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -262,7 +262,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
||||
"Upload"))
|
||||
(div :id "ref-encoding-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Select a file and submit.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -278,7 +278,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
||||
"Send with custom headers")
|
||||
(div :id "ref-headers-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click to see echoed headers.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -302,7 +302,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
||||
"Filter"))
|
||||
(div :id "ref-include-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click Filter — the select value is included in the request.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -318,7 +318,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
||||
"Send with extra values")
|
||||
(div :id "ref-vals-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click to see echoed values.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -369,7 +369,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
||||
"Click me")
|
||||
(div :id "ref-on-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click the button — runs JavaScript, no server request.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -385,7 +385,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
||||
"Call flaky endpoint")
|
||||
(div :id "ref-retry-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"This endpoint fails 2 out of 3 times. sx-retry retries automatically.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -440,7 +440,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Hover then click (preloaded)")
|
||||
(div :id "ref-preload-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Hover over the button first, then click — the response is instant.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -461,7 +461,7 @@
|
||||
(input :id "ref-preserved-input" :sx-preserve "true"
|
||||
:type "text" :placeholder "Type here — preserved across swaps"
|
||||
:class "w-full px-3 py-2 border border-stone-300 rounded text-sm")
|
||||
(div :class "p-2 bg-stone-50 rounded text-sm text-stone-600"
|
||||
(div :class "p-2 bg-stone-100 rounded text-sm text-stone-600"
|
||||
"This text will be replaced on swap."))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -484,7 +484,7 @@
|
||||
:style "display: none"
|
||||
"Loading..."))
|
||||
(div :id "ref-indicator-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click to load (indicator shows during request).")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -506,7 +506,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Submit"))
|
||||
(div :id "ref-validate-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Submit with invalid/empty email to see validation.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -526,7 +526,7 @@
|
||||
(p :class "text-sm text-amber-800" "This subtree has sx-ignore — it won't change.")
|
||||
(input :type "text" :placeholder "Type here — ignored during swap"
|
||||
:class "mt-1 w-full px-2 py-1 border border-amber-300 rounded text-sm"))
|
||||
(div :class "p-2 bg-stone-50 rounded text-sm text-stone-600"
|
||||
(div :class "p-2 bg-stone-100 rounded text-sm text-stone-600"
|
||||
"This text WILL be replaced on swap."))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -566,7 +566,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Load (replaces URL)")
|
||||
(div :id "ref-replurl-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click to load — URL changes but no new history entry.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -586,7 +586,7 @@
|
||||
"Click (disables during request)")
|
||||
(span :class "text-xs text-stone-400" "Button is disabled while request is in-flight."))
|
||||
(div :id "ref-diselt-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click the button to see it disable during the request.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -603,7 +603,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Prompt & send")
|
||||
(div :id "ref-prompt-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Click to enter a name via prompt — it is sent as the SX-Prompt header.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -626,7 +626,7 @@
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Submit"))
|
||||
(div :id "ref-params-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-400 text-sm"
|
||||
"Only 'name' will be sent — 'secret' is filtered by sx-params.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -639,7 +639,7 @@
|
||||
:sx-sse-swap "time"
|
||||
:sx-swap "innerHTML"
|
||||
(div :id "ref-sse-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-600 text-sm font-mono"
|
||||
:class "p-3 rounded bg-stone-100 text-stone-600 text-sm font-mono"
|
||||
"Connecting to SSE stream..."))
|
||||
(p :class "text-xs text-stone-400"
|
||||
"Server pushes time updates every 2 seconds via Server-Sent Events.")))
|
||||
|
||||
Reference in New Issue
Block a user