@zvndev/darkmown 2.0.1 → 2.2.0

package/site/pages/playground/index.skin

@@ -0,0 +1,128 @@
+tokens
+  pgink #eef2e6
+  pgbg #10160c
+  pgpanel #18210f
+  pgline #2c3a20
+  pgaccent #8fd694
+  pgmuted #9db089
+  pgradius 10px
+
+page
+  margin 0
+  font system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  color $pgink
+  bg $pgbg
+  line-height 1.6
+
+main
+  max-width 1100px
+  margin 0 auto
+  padding 2.5rem 1.5rem 4rem
+
+.pg-intro h1
+  font-size 2.6rem
+  line-height 1.05
+  margin 0 0 .6rem
+  color $pgink
+
+.pg-intro p
+  color $pgmuted
+  max-width 46rem
+
+.pg-intro a
+  color $pgaccent
+
+.pg-picker
+  display flex
+  flex-wrap wrap
+  gap .5rem
+  margin 1.4rem 0 1rem
+
+.pg-picker button
+  font inherit
+  font-size .92rem
+  font-weight 560
+  padding .5rem 1rem
+  color $pgink
+  bg $pgpanel
+  border 1px solid $pgline
+  radius 999px
+  cursor pointer
+  transition background .14s ease, border-color .14s ease, transform .14s ease
+
+.pg-picker button:hover
+  border-color $pgaccent
+  transform translateY(-1px)
+
+.pg-picker button:focus-visible
+  outline 2px solid $pgaccent
+  outline-offset 2px
+
+.pg-workbench
+  display grid
+  grid-template-columns 1fr 1fr
+  gap 1rem
+  margin-top 1.5rem
+  align-items stretch
+
+.pg-pane
+  display flex
+  flex-direction column
+  min-width 0
+
+.pg-label
+  font-size .78rem
+  font-weight 600
+  letter-spacing .04em
+  text-transform uppercase
+  color $pgmuted
+  margin-bottom .5rem
+
+.pg-editor
+  width 100%
+  min-height 30rem
+  flex 1
+  resize vertical
+  padding 1rem 1.1rem
+  color $pgink
+  bg $pgpanel
+  border 1px solid $pgline
+  radius $pgradius
+  font ui-monospace, "SF Mono", Menlo, Consolas, monospace
+  font-size .9rem
+  line-height 1.55
+  tab-size 2
+
+.pg-editor:focus-visible
+  outline none
+  border-color $pgaccent
+  box-shadow 0 0 0 3px rgba(143,214,148,.16)
+
+.pg-preview
+  width 100%
+  min-height 30rem
+  flex 1
+  border 1px solid $pgline
+  radius $pgradius
+  bg #12190f
+
+.pg-error
+  margin .75rem 0 0
+  padding .9rem 1.1rem
+  color #ffd9d0
+  bg #2a1712
+  border 1px solid #6b2c1e
+  radius $pgradius
+  font ui-monospace, "SF Mono", Menlo, Consolas, monospace
+  font-size .82rem
+  line-height 1.5
+  white-space pre-wrap
+  word-break break-word
+
+@media (max-width: 820px)
+  .pg-workbench
+    grid-template-columns 1fr
+  .pg-editor
+    min-height 18rem
+  .pg-preview
+    min-height 22rem

package/site/pages/playground/index.wd

@@ -0,0 +1,51 @@
+---
+title: Playground — run Markdown in your browser
+description: Edit a .wd file and watch it compile and run in your browser — the same compiler the Darkmown CLI uses, no install required.
+html: true
+transitions: true
+---
+
+@include /nav.wd
+
+<main>
+
+:state activeExample = "store"
+
+::: section .pg-intro
+
+# Playground
+
+Edit the Markdown on the left. It compiles **in your browser** — the exact same
+compiler the CLI ships — and runs live on the right. No install, no build step.
+
+::: div .pg-picker
+:button "Store + cart" -> activeExample = "store"
+:button "Counter" -> activeExample = "counter"
+:button "Plain Markdown" -> activeExample = "markdown"
+:::
+
+Now editing the **{ activeExample }** example. Change any text and the preview
+re-renders as you type. Break the syntax on purpose — the real compiler error,
+with `file:line` and a fix hint, shows up in the preview pane.
+
+:::
+
+::: section .pg-workbench
+
+::: div .pg-pane .pg-pane-source
+<label class="pg-label" for="pg-editor">Source</label>
+
+<textarea id="pg-editor" class="pg-editor" spellcheck="false" autocapitalize="off" autocomplete="off" aria-label="Markdown source"></textarea>
+:::
+
+::: div .pg-pane .pg-pane-preview
+<label class="pg-label" for="pg-preview">Preview</label>
+
+<iframe id="pg-preview" class="pg-preview" title="Live preview" sandbox="allow-scripts allow-same-origin"></iframe>
+
+<pre id="pg-error" class="pg-error" role="alert" hidden></pre>
+:::
+
+:::
+
+</main>

package/site/pages/showcase/index.wd

@@ -96,7 +96,7 @@ Darkmown's whole pitch is weight. A static page ships **zero** framework JavaScr
 
 ::: card .sc-scale
 - **Static Darkmown page** — `0 KB` framework JS. Forever.
-- **Reactive Darkmown page** — one shared `~7.5 KB` gzipped runtime, no per-component bundles.
+- **Reactive Darkmown page** — one shared `~7.7 KB` gzipped runtime, no per-component bundles.
 - **A typical SPA** — ships a framework runtime in the **~15–60 KB** gzipped range *before* your app code, on every page (Alpine ~15 KB, Vue ~18 KB runtime, React 19 ~59 KB).
 :::
 

package/src/builder.js

@@ -2,6 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { discoverApiRoutes } from "./api-runner.js";
+import { llmsText } from "./catalog.js";
 import { buildCollections } from "./compiler/collections.js";
 import { compilePage, parseFrontmatter } from "./compiler.js";
 import { createPaths, routesDir, shelfDir } from "./config.js";
@@ -352,9 +353,11 @@ function buildRoute(route, cwd, paths, collections, feedLink, warned) {
  * incremental builds keeps them consistent by construction.
  *
  * Cloudflare Pages reads dist/_headers for security headers (Vercel reads
- * vercel.json; the local server adds them in src/statics.js). Static routes get
- * the stricter CSP (no 'unsafe-eval'); reactive routes get the relaxed one. A
- * catch-all keeps assets and any future path covered.
+ * vercel.json; the local server adds them in src/statics.js). Since 2.1 both CSP
+ * variants are eval-free (the reactive runtime walks a validated AST, not
+ * `new Function`), so static and reactive routes resolve to the same policy; the
+ * per-route static override is kept as defense-in-depth. A catch-all keeps assets
+ * and any future path covered.
  * @param {RouteManifestEntry[]} manifest
  * @param {Paths} paths
  * @returns {void}
@@ -362,6 +365,10 @@ function buildRoute(route, cwd, paths, collections, feedLink, warned) {
 function emitGlobalFiles(manifest, paths) {
   fs.writeFileSync(path.join(paths.distRoot, "routes.json"), JSON.stringify(manifest, null, 2));
   fs.writeFileSync(path.join(paths.distRoot, "_headers"), renderCloudflareHeaders(manifest));
+  // `llms.txt` is the compact `.wd` cheatsheet an AI authoring tool fetches to
+  // prime a small model. It depends only on the framework version, so it re-emits
+  // identically on every build — cheap, and always present next to the site.
+  fs.writeFileSync(path.join(paths.distRoot, "llms.txt"), llmsText());
 }
 
 /**
@@ -924,10 +931,10 @@ export function stripRuntimeComments(source) {
  *
  * Cloudflare applies every matching block in order; when blocks set the same
  * header, the later block wins. So we emit the catch-all `/*` first (baseline
- * security headers + the relaxed reactive CSP that satisfies every page), then
- * one block per static route that overrides `Content-Security-Policy` with the
- * stricter, eval-free CSP. Reactive routes need no override — the catch-all
- * already carries the relaxed CSP.
+ * security headers + the reactive CSP, which since 2.1 is eval-free and satisfies
+ * every page), then one block per static route that re-states the same eval-free
+ * CSP as defense-in-depth. Reactive routes need no override — the catch-all
+ * already carries the eval-free CSP.
  *
  * Clean URLs mean a route like `/docs/` is served at both `/docs` and `/docs/`,
  * so each static route emits a path glob (`/docs`, `/docs/*`) that covers both.
@@ -941,7 +948,7 @@ export function renderCloudflareHeaders(manifest) {
   const blocks = [["/*", [...baseLines, `  Content-Security-Policy: ${REACTIVE_CSP}`]]];
 
   for (const entry of manifest) {
-    if (entry.assets.runtime) continue; // reactive routes keep the catch-all (relaxed) CSP
+    if (entry.assets.runtime) continue; // reactive routes keep the catch-all (eval-free) CSP
     for (const pattern of cloudflarePathPatterns(entry.route)) {
       blocks.push([pattern, [`  Content-Security-Policy: ${STATIC_CSP}`]]);
     }