Add admin preview views + fix markdown converter

- Fix _markdown() in lexical_to_sx.py: render markdown to HTML with
  mistune.html() before storing in ~kg-html
- Add shared/sx/prettify.py: sx_to_pretty_sx and json_to_pretty_sx
  produce sx AST for syntax-highlighted DOM (uses canonical serialize())
- Add preview tab to admin header nav
- Add GET /preview/ route with 4 views: prettified sx, prettified
  lexical JSON, sx rendered HTML, lexical rendered HTML
- Add ~blog-preview-panel and ~blog-preview-section components
- Add syntax highlight CSS for sx/JSON tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-02 00:50:57 +00:00
parent a8e06e87fb
commit 4ede0368dc
6 changed files with 300 additions and 1 deletions

View File

@@ -142,3 +142,30 @@
(defcomp ~blog-tag-group-edit-main (&key edit-form delete-form)
(div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"
edit-form delete-form))
;; Preview panel components
(defcomp ~blog-preview-panel (&key sections)
(div :class "max-w-4xl mx-auto px-4 py-6 space-y-4"
(style "
.sx-pretty, .json-pretty { font-family: monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.sx-list, .json-obj, .json-arr { display: block; }
.sx-paren { color: #64748b; }
.sx-sym { color: #0369a1; }
.sx-kw { color: #7c3aed; }
.sx-str { color: #15803d; }
.sx-num { color: #c2410c; }
.sx-bool { color: #b91c1c; font-weight: 600; }
.json-brace, .json-bracket { color: #64748b; }
.json-key { color: #7c3aed; }
.json-str { color: #15803d; }
.json-num { color: #c2410c; }
.json-lit { color: #b91c1c; font-weight: 600; }
.json-field { display: block; }
")
sections))
(defcomp ~blog-preview-section (&key title content)
(details :class "border rounded bg-white"
(summary :class "cursor-pointer px-4 py-3 font-medium text-sm bg-stone-100 hover:bg-stone-200 select-none" title)
(div :class "p-4 overflow-x-auto text-xs" content)))