Add Bootstrappers section, essays index, specs prose, layout fixes
- New Bootstrappers top-level section with overview index and JS bootstrapper page that runs bootstrap_js.py and displays both source and generated output with live script injection (full page load, not SX navigation) - Essays section: index page with linked cards and summaries, sx-sucks moved to end of nav, removed "grand tradition" line - Specs: English prose descriptions alongside all canonical .sx specs, added Boot/CSSX/Browser spec files to architecture page - Layout: menu bar nav items wrap instead of overflow, baseline alignment between label and nav options - Homepage: added copyright line Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
131
sx/sx/specs.sx
131
sx/sx/specs.sx
@@ -122,6 +122,35 @@
|
||||
"orchestration.sx"))
|
||||
(td :class "px-3 py-2 text-stone-700" "Browser wiring — binds engine to DOM events, fetch, request lifecycle"))))))
|
||||
|
||||
(div :class "space-y-3"
|
||||
(h2 :class "text-2xl font-semibold text-stone-800" "Browser")
|
||||
(p :class "text-stone-600"
|
||||
"Browser-level support: startup lifecycle and on-demand CSS. "
|
||||
(code :class "text-violet-700 text-sm" "boot.sx")
|
||||
" handles page load — processing scripts, mounting content, and hydrating elements. "
|
||||
(code :class "text-violet-700 text-sm" "cssx.sx")
|
||||
" provides the on-demand CSS system that resolves keyword atoms into class names and injects rules as needed.")
|
||||
(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-100"
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "File")
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "Role")))
|
||||
(tbody
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 font-mono text-sm text-violet-700"
|
||||
(a :href "/specs/boot" :class "hover:underline"
|
||||
:sx-get "/specs/boot" :sx-target "#main-panel" :sx-select "#main-panel"
|
||||
:sx-swap "outerHTML" :sx-push-url "true"
|
||||
"boot.sx"))
|
||||
(td :class "px-3 py-2 text-stone-700" "Browser startup lifecycle — mount, hydrate, script processing, head hoisting"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 font-mono text-sm text-violet-700"
|
||||
(a :href "/specs/cssx" :class "hover:underline"
|
||||
:sx-get "/specs/cssx" :sx-target "#main-panel" :sx-select "#main-panel"
|
||||
:sx-swap "outerHTML" :sx-push-url "true"
|
||||
"cssx.sx"))
|
||||
(td :class "px-3 py-2 text-stone-700" "On-demand CSS — style dictionary, keyword resolution, rule injection"))))))
|
||||
|
||||
(div :class "space-y-3"
|
||||
(h2 :class "text-2xl font-semibold text-stone-800" "Dependency graph")
|
||||
(div :class "bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl"
|
||||
@@ -136,7 +165,9 @@ adapter-html.sx depends on: render, eval
|
||||
adapter-sx.sx depends on: render, eval
|
||||
|
||||
engine.sx depends on: eval, adapter-dom
|
||||
orchestration.sx depends on: engine, adapter-dom")))
|
||||
orchestration.sx depends on: engine, adapter-dom
|
||||
cssx.sx depends on: render
|
||||
boot.sx depends on: cssx, orchestration, adapter-dom, render")))
|
||||
|
||||
(div :class "space-y-3"
|
||||
(h2 :class "text-2xl font-semibold text-stone-800" "Self-hosting")
|
||||
@@ -163,6 +194,8 @@ orchestration.sx depends on: engine, adapter-dom")))
|
||||
"The core specification defines the language itself — parsing, evaluation, primitives, and shared rendering definitions. These four files are platform-independent and sufficient to implement SX on any target."
|
||||
"Adapters & Engine"
|
||||
"Adapters connect the core language to specific environments. Each adapter takes evaluated expression trees and produces output for its target. The engine adds browser-side fetch/swap behaviour, split into pure logic and browser orchestration."
|
||||
"Browser"
|
||||
"Browser-level support: the startup lifecycle that boots SX in the browser, and the on-demand CSS system that resolves keyword atoms into Tailwind-compatible class names."
|
||||
:else ""))
|
||||
(div :class "space-y-8"
|
||||
(map (fn (spec)
|
||||
@@ -176,6 +209,8 @@ orchestration.sx depends on: engine, adapter-dom")))
|
||||
(get spec "title")))
|
||||
(span :class "text-sm text-stone-400 font-mono" (get spec "filename")))
|
||||
(p :class "text-stone-600" (get spec "desc"))
|
||||
(when (get spec "prose")
|
||||
(p :class "text-sm text-stone-500 leading-relaxed" (get spec "prose")))
|
||||
(div :class "bg-stone-100 rounded-lg p-5 max-h-72 overflow-y-auto"
|
||||
(pre :class "text-xs leading-relaxed whitespace-pre-wrap break-words"
|
||||
(code (highlight (get spec "source") "sx"))))))
|
||||
@@ -185,15 +220,107 @@ orchestration.sx depends on: engine, adapter-dom")))
|
||||
;; Detail page — full source of a single spec file
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defcomp ~spec-detail-content (&key spec-title spec-desc spec-filename spec-source)
|
||||
(defcomp ~spec-detail-content (&key spec-title spec-desc spec-filename spec-source spec-prose)
|
||||
(~doc-page :title spec-title
|
||||
(div :class "flex items-baseline gap-3 mb-4"
|
||||
(span :class "text-sm text-stone-400 font-mono" spec-filename)
|
||||
(span :class "text-sm text-stone-500" spec-desc))
|
||||
(when spec-prose
|
||||
(div :class "mb-6 space-y-3"
|
||||
(p :class "text-stone-600 leading-relaxed" spec-prose)
|
||||
(p :class "text-xs text-stone-400 italic"
|
||||
"The s-expression source below is the canonical specification. "
|
||||
"The English description above is a summary.")))
|
||||
(div :class "bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl"
|
||||
(pre :class "text-sm leading-relaxed whitespace-pre-wrap break-words"
|
||||
(code (highlight spec-source "sx"))))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Bootstrappers — summary index
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defcomp ~bootstrappers-index-content ()
|
||||
(~doc-page :title "Bootstrappers"
|
||||
(div :class "space-y-6"
|
||||
(p :class "text-lg text-stone-600"
|
||||
"A bootstrapper reads the canonical " (code :class "text-violet-700 text-sm" ".sx")
|
||||
" specification files and emits a native implementation for a specific target. "
|
||||
"The spec files are the single source of truth — bootstrappers are the bridge from specification to runnable code.")
|
||||
(p :class "text-stone-600"
|
||||
"Each bootstrapper is a compiler that understands the restricted SX subset used in the spec files "
|
||||
"(roughly 20 special forms and 80 primitives) and translates it into idiomatic target code. "
|
||||
"Platform-specific operations (DOM access, HTTP, timers) are emitted as native implementations "
|
||||
"rather than translated from SX.")
|
||||
(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-100"
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "Target")
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "Bootstrapper")
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "Output")
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "Status")))
|
||||
(tbody
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "JavaScript")
|
||||
(td :class "px-3 py-2 font-mono text-sm text-violet-700"
|
||||
(a :href "/bootstrappers/javascript" :class "hover:underline"
|
||||
"bootstrap_js.py"))
|
||||
(td :class "px-3 py-2 font-mono text-sm text-stone-500" "sx-browser.js")
|
||||
(td :class "px-3 py-2 text-green-600" "Live"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Python")
|
||||
(td :class "px-3 py-2 font-mono text-sm text-stone-400" "bootstrap_py.py")
|
||||
(td :class "px-3 py-2 font-mono text-sm text-stone-400" "shared/sx/")
|
||||
(td :class "px-3 py-2 text-stone-400" "Planned"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Rust")
|
||||
(td :class "px-3 py-2 font-mono text-sm text-stone-400" "bootstrap_rs.py")
|
||||
(td :class "px-3 py-2 font-mono text-sm text-stone-400" "sx-native")
|
||||
(td :class "px-3 py-2 text-stone-400" "Planned")))))
|
||||
)))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Bootstrapper detail — shows bootstrapper source + generated output
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; @css border-violet-300 animate-pulse
|
||||
|
||||
(defcomp ~bootstrapper-js-content (&key bootstrapper-source bootstrapped-output)
|
||||
(~doc-page :title "JavaScript Bootstrapper"
|
||||
(div :class "space-y-8"
|
||||
|
||||
(div :class "space-y-3"
|
||||
(p :class "text-stone-600"
|
||||
"This page reads the canonical " (code :class "text-violet-700 text-sm" ".sx")
|
||||
" spec files, runs the Python bootstrapper, and displays both the compiler source and its generated JavaScript output. "
|
||||
"The generated code below is live — it was produced by the bootstrapper at page load time, not served from a static file.")
|
||||
(p :class "text-xs text-stone-400 italic"
|
||||
"The bootstrapped JavaScript is also injected as a script tag on this page. "
|
||||
"Open the browser console to verify it loaded."))
|
||||
|
||||
(div :class "space-y-3"
|
||||
(div :class "flex items-baseline gap-3"
|
||||
(h2 :class "text-2xl font-semibold text-stone-800" "Bootstrapper")
|
||||
(span :class "text-sm text-stone-400 font-mono" "bootstrap_js.py"))
|
||||
(p :class "text-sm text-stone-500"
|
||||
"The compiler reads " (code :class "text-violet-700 text-sm" ".sx")
|
||||
" spec files (parser, eval, primitives, render, adapters, engine, orchestration, boot, cssx) "
|
||||
"and emits a standalone JavaScript file. Platform bridge functions (DOM operations, fetch, timers) "
|
||||
"are emitted as native JS implementations.")
|
||||
(div :class "bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200"
|
||||
(pre :class "text-xs leading-relaxed whitespace-pre-wrap break-words"
|
||||
(code (highlight bootstrapper-source "python")))))
|
||||
|
||||
(div :class "space-y-3"
|
||||
(div :class "flex items-baseline gap-3"
|
||||
(h2 :class "text-2xl font-semibold text-stone-800" "Generated Output")
|
||||
(span :class "text-sm text-stone-400 font-mono" "sx-browser.js"))
|
||||
(p :class "text-sm text-stone-500"
|
||||
"The JavaScript below was generated by running the bootstrapper against the current spec files. "
|
||||
"It is a complete, self-contained SX runtime — parser, evaluator, DOM adapter, engine, and CSS system.")
|
||||
(div :class "bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-violet-300"
|
||||
(pre :class "text-xs leading-relaxed whitespace-pre-wrap break-words"
|
||||
(code (highlight bootstrapped-output "javascript"))))
|
||||
(script :type "text/javascript" bootstrapped-output)))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Not found
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user