Add sx documentation app (sx.rose-ash.com)

New public-facing service documenting the s-expression rendering engine.
Modelled on four.htmx.org with violet theme, all content rendered via sx.

Sections: docs, reference, protocols, examples (live demos), essays
(including "sx sucks"). No database — purely static documentation.

Port 8012, Redis DB 10. CI and deploy.sh updated with app_dir() mapping
for sx_docs -> sx/ directory. Caddy reverse proxy entry added separately.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sx/sxc/docs.sx

@@ -0,0 +1,70 @@
+;; SX docs — documentation page components
+
+(defcomp ~doc-page (&key title &rest children)
+  (div :class "max-w-4xl mx-auto px-6 py-8"
+    (h1 :class "text-4xl font-bold text-stone-900 mb-8" title)
+    (div :class "prose prose-stone max-w-none space-y-6" children)))
+
+(defcomp ~doc-section (&key title id &rest children)
+  (section :id id :class "space-y-4"
+    (h2 :class "text-2xl font-semibold text-stone-800" title)
+    children))
+
+(defcomp ~doc-subsection (&key title &rest children)
+  (div :class "space-y-3"
+    (h3 :class "text-xl font-semibold text-stone-700" title)
+    children))
+
+(defcomp ~doc-code (&key language code)
+  (div :class "bg-stone-900 rounded-lg p-4 overflow-x-auto"
+    (pre :class "text-sm"
+      (code :class (str "language-" (or language "lisp")) code))))
+
+(defcomp ~doc-note (&key &rest children)
+  (div :class "border-l-4 border-violet-400 bg-violet-50 p-4 text-stone-700 text-sm"
+    children))
+
+(defcomp ~doc-table (&key headers rows)
+  (div :class "overflow-x-auto rounded border border-stone-200"
+    (table :class "w-full text-left text-sm"
+      (thead
+        (tr :class "border-b border-stone-200 bg-stone-50"
+          (map (fn (h) (th :class "px-3 py-2 font-medium text-stone-600" h)) headers)))
+      (tbody
+        (map (fn (row)
+          (tr :class "border-b border-stone-100"
+            (map (fn (cell) (td :class "px-3 py-2 text-stone-700" cell)) row)))
+          rows)))))
+
+(defcomp ~doc-attr-row (&key attr description exists)
+  (tr :class "border-b border-stone-100"
+    (td :class "px-3 py-2 font-mono text-sm text-violet-700 whitespace-nowrap" attr)
+    (td :class "px-3 py-2 text-stone-700 text-sm" description)
+    (td :class "px-3 py-2 text-center"
+      (if exists
+        (span :class "text-emerald-600 text-sm" "yes")
+        (span :class "text-stone-400 text-sm italic" "not yet")))))
+
+(defcomp ~doc-primitives-table (&key category primitives)
+  (div :class "space-y-2"
+    (h4 :class "text-lg font-semibold text-stone-700" category)
+    (div :class "flex flex-wrap gap-2"
+      (map (fn (p)
+        (span :class "inline-block px-2 py-1 rounded bg-stone-100 font-mono text-sm text-stone-700" p))
+        primitives))))
+
+(defcomp ~doc-nav (&key items current)
+  (nav :class "flex flex-wrap gap-2 mb-8"
+    (map (fn (item)
+      (a :href (nth 1 item)
+         :sx-get (nth 1 item)
+         :sx-target "#main-panel"
+         :sx-select "#main-panel"
+         :sx-swap "outerHTML"
+         :sx-push-url "true"
+         :class (str "px-3 py-1.5 rounded text-sm font-medium no-underline "
+                     (if (= (nth 0 item) current)
+                       "bg-violet-100 text-violet-800"
+                       "bg-stone-100 text-stone-600 hover:bg-stone-200"))
+        (nth 0 item)))
+      items)))

sx/sxc/examples.sx

@@ -0,0 +1,159 @@
+;; SX docs — example and demo components
+
+(defcomp ~example-card (&key title description &rest children)
+  (div :class "border border-stone-200 rounded-lg overflow-hidden"
+    (div :class "bg-stone-50 px-4 py-3 border-b border-stone-200"
+      (h3 :class "font-semibold text-stone-800" title)
+      (when description
+        (p :class "text-sm text-stone-500 mt-1" description)))
+    (div :class "p-4" children)))
+
+(defcomp ~example-demo (&key &rest children)
+  (div :class "border border-dashed border-stone-300 rounded p-4 bg-white" children))
+
+(defcomp ~example-source (&key code)
+  (div :class "bg-stone-900 rounded p-4 mt-3 overflow-x-auto"
+    (pre :class "text-sm"
+      (code :class "language-lisp" code))))
+
+;; --- Click to load demo ---
+
+(defcomp ~click-to-load-demo ()
+  (div :class "space-y-4"
+    (div :id "click-result" :class "p-4 rounded bg-stone-50 text-stone-500 text-center"
+      "Click the button to load content.")
+    (button
+      :sx-get "/examples/api/click"
+      :sx-target "#click-result"
+      :sx-swap "innerHTML"
+      :class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors"
+      "Load content")))
+
+(defcomp ~click-result ()
+  (div :class "space-y-2"
+    (p :class "text-stone-800 font-medium" "Content loaded!")
+    (p :class "text-stone-500 text-sm" "This was fetched from the server via sx-get and swapped into the target div.")))
+
+;; --- Form submission demo ---
+
+(defcomp ~form-demo ()
+  (div :class "space-y-4"
+    (form
+      :sx-post "/examples/api/form"
+      :sx-target "#form-result"
+      :sx-swap "innerHTML"
+      :class "space-y-3"
+      (div
+        (label :class "block text-sm font-medium text-stone-700 mb-1" "Name")
+        (input :type "text" :name "name" :placeholder "Enter a name"
+          :class "w-full px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"))
+      (button :type "submit"
+        :class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
+        "Submit"))
+    (div :id "form-result" :class "p-3 rounded bg-stone-50 text-stone-500 text-sm text-center"
+      "Submit the form to see the result.")))
+
+(defcomp ~form-result (&key name)
+  (div :class "text-stone-800"
+    (p (str "Hello, " (if (empty? name) "stranger" name) "!"))
+    (p :class "text-sm text-stone-500 mt-1" "Submitted via sx-post. The form data was sent as a POST request.")))
+
+;; --- Polling demo ---
+
+(defcomp ~polling-demo ()
+  (div :class "space-y-4"
+    (div :id "poll-target"
+         :sx-get "/examples/api/poll"
+         :sx-trigger "load, every 2s"
+         :sx-swap "innerHTML"
+         :class "p-4 rounded border border-stone-200 bg-white text-center font-mono"
+      "Loading...")))
+
+(defcomp ~poll-result (&key time count)
+  (div
+    (p :class "text-stone-800 font-medium" (str "Server time: " time))
+    (p :class "text-stone-500 text-sm mt-1" (str "Poll count: " count))
+    (div :class "mt-2 flex justify-center"
+      (div :class "flex gap-1"
+        (map (fn (i)
+          (div :class (str "w-2 h-2 rounded-full "
+                       (if (<= i count) "bg-violet-500" "bg-stone-200"))))
+          (list 1 2 3 4 5 6 7 8 9 10))))))
+
+;; --- Delete row demo ---
+
+(defcomp ~delete-demo (&key items)
+  (div
+    (table :class "w-full text-left text-sm"
+      (thead
+        (tr :class "border-b border-stone-200"
+          (th :class "px-3 py-2 font-medium text-stone-600" "Item")
+          (th :class "px-3 py-2 font-medium text-stone-600 w-20" "")))
+      (tbody :id "delete-rows"
+        (map (fn (item)
+          (~delete-row :id (nth 0 item) :name (nth 1 item)))
+          items)))))
+
+(defcomp ~delete-row (&key id name)
+  (tr :id (str "row-" id) :class "border-b border-stone-100 transition-all"
+    (td :class "px-3 py-2 text-stone-700" name)
+    (td :class "px-3 py-2"
+      (button
+        :sx-delete (str "/examples/api/delete/" id)
+        :sx-target (str "#row-" id)
+        :sx-swap "outerHTML"
+        :sx-confirm "Delete this item?"
+        :class "text-rose-500 hover:text-rose-700 text-sm"
+        "delete"))))
+
+;; --- Inline edit demo ---
+
+(defcomp ~inline-edit-demo ()
+  (div :id "edit-target" :class "space-y-3"
+    (~inline-view :value "Click edit to change this text")))
+
+(defcomp ~inline-view (&key value)
+  (div :class "flex items-center justify-between p-3 rounded border border-stone-200"
+    (span :class "text-stone-800" value)
+    (button
+      :sx-get (str "/examples/api/edit?value=" value)
+      :sx-target "#edit-target"
+      :sx-swap "innerHTML"
+      :class "text-sm text-violet-600 hover:text-violet-800"
+      "edit")))
+
+(defcomp ~inline-edit-form (&key value)
+  (form
+    :sx-post "/examples/api/edit"
+    :sx-target "#edit-target"
+    :sx-swap "innerHTML"
+    :class "flex items-center gap-2 p-3 rounded border border-violet-300 bg-violet-50"
+    (input :type "text" :name "value" :value value
+      :class "flex-1 px-3 py-1.5 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
+    (button :type "submit"
+      :class "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
+      "save")
+    (button :type "button"
+      :sx-get (str "/examples/api/edit/cancel?value=" value)
+      :sx-target "#edit-target"
+      :sx-swap "innerHTML"
+      :class "px-3 py-1.5 bg-stone-200 text-stone-700 rounded text-sm hover:bg-stone-300"
+      "cancel")))
+
+;; --- OOB swap demo ---
+
+(defcomp ~oob-demo ()
+  (div :class "space-y-4"
+    (div :class "grid grid-cols-2 gap-4"
+      (div :id "oob-box-a" :class "p-4 rounded border border-stone-200 bg-white text-center"
+        (p :class "text-stone-500" "Box A")
+        (p :class "text-sm text-stone-400" "Waiting..."))
+      (div :id "oob-box-b" :class "p-4 rounded border border-stone-200 bg-white text-center"
+        (p :class "text-stone-500" "Box B")
+        (p :class "text-sm text-stone-400" "Waiting...")))
+    (button
+      :sx-get "/examples/api/oob"
+      :sx-target "#oob-box-a"
+      :sx-swap "innerHTML"
+      :class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
+      "Update both boxes")))

sx/sxc/home.sx

@@ -0,0 +1,66 @@
+;; SX docs — home page components
+
+(defcomp ~sx-hero ()
+  (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" "sx"))
+    (p :class "text-2xl text-stone-600 mb-8"
+      "High power tools for HTML — with s-expressions")
+    (p :class "text-lg text-stone-500 max-w-2xl mx-auto mb-12"
+      "A hypermedia-driven UI engine that combines htmx's server-first philosophy "
+      "with React's component model. All rendered via s-expressions over the wire.")
+    (div :class "bg-stone-900 rounded-lg p-6 text-left font-mono text-sm overflow-x-auto"
+      (pre :class "text-stone-300"
+        (code :class "language-lisp"
+          "(defcomp ~greeting (&key name)\n  (div :class \"p-4 rounded bg-violet-50\"\n    (h2 :class \"text-lg font-bold\"\n      (str \"Hello, \" name \"!\"))\n    (button\n      :sx-get \"/api/greet\"\n      :sx-target \"closest div\"\n      :sx-swap \"outerHTML\"\n      :class \"mt-2 px-4 py-2 bg-violet-600 text-white rounded\"\n      \"Refresh\")))")))))
+
+(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 HTML over the wire")
+          (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, HTML 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 HTML is the right hypermedia format. "
+      "sx takes that idea and wraps it in parentheses.")))