@zvndev/darkmown 0.19.0 → 1.0.0

package/site/pages/showcase/index.skin

@@ -0,0 +1,130 @@
+/* Showcase hub — layers on /base.wd. Gallery of the flagship apps. */
+
+main.showcase
+  max-width 1080px
+
+.sc-hero
+  padding 3.5rem 0 2.5rem
+  border-bottom 1px solid $line
+  margin-bottom 2.5rem
+
+.sc-hero h1
+  max-width 18ch
+
+.sc-hero > p
+  max-width 64ch
+  font-size 1.18rem
+  color $ink-soft
+  margin 1rem 0 1.75rem
+
+.sc-cta
+  display flex
+  flex-wrap wrap
+
+/* ── App gallery ────────────────────────────────────────────────── */
+
+.sc-apps
+  display grid
+  grid-template-columns 1fr 1fr
+  gap 1.25rem
+  margin 1rem 0 3rem
+
+@media (max-width: 760px)
+  .sc-apps
+    grid-template-columns 1fr
+
+.sc-app
+  position relative
+  padding 1.6rem 1.6rem 1.4rem
+  border 1px solid $line
+  radius $radius-lg
+  overflow hidden
+  transition transform .14s ease, box-shadow .14s ease
+
+.sc-app:hover
+  transform translateY(-3px)
+  box-shadow 0 18px 40px -22px rgba(28,24,20,.45)
+
+/* A soft accent wash per app — its identity color. */
+.sc-app::before
+  content ""
+  position absolute
+  inset 0 0 auto 0
+  height 4px
+
+.sc-folio::before
+  background #b8462e
+
+.sc-pulse::before
+  background #18b89a
+
+.sc-forge::before
+  background #6d5ae6
+
+.sc-compass::before
+  background #e0894a
+
+.sc-ledger::before
+  background #c79a3a
+
+.sc-emoji
+  font-size 2rem
+  line-height 1
+
+.sc-app h3
+  margin .6rem 0 .5rem
+  font-size 1.45rem
+
+.sc-app p
+  color $ink-soft
+  margin .4rem 0 1rem
+
+.sc-open
+  display inline-block
+  margin-top .4rem
+  font-weight 600
+  text-decoration none
+  color $accent-deep
+
+.sc-open:hover
+  text-decoration underline
+
+/* ── Weight section ─────────────────────────────────────────────── */
+
+.sc-weight
+  margin 1rem 0 3rem
+
+.sc-scale
+  list-style none
+  padding 1.25rem 1.5rem
+  margin 1.25rem 0
+
+.sc-scale li
+  padding .55rem 0
+  border-bottom 1px solid $line-soft
+  color $ink-soft
+
+.sc-scale li:last-child
+  border-bottom 0
+
+.sc-scale strong
+  color $ink
+
+.sc-scale code
+  font-size 1em
+  font-weight 700
+  color $accent-deep
+  background $accent-soft
+
+/* ── Mini demos ─────────────────────────────────────────────────── */
+
+.sc-mini
+  padding 1.1rem 1.25rem
+
+.sc-mini p
+  margin 0 0 .6rem
+  color $ink-soft
+
+.sc-mini a
+  font-weight 600
+  text-decoration none

package/site/pages/showcase/index.wd

@@ -0,0 +1,168 @@
+---
+title: Showcase — real apps built in Markdown
+description: Five complete, beautiful apps — a storefront, a live dashboard, a pricing configurator, a product-finder quiz, and a sortable expense ledger — each one a readable Markdown file. See the app, then view its source.
+image: https://darkmown.com/__wd/media/og-showcase.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide showcase">
+
+<header class="sc-hero">
+<span class="eyebrow">Built with Darkmown</span>
+
+# Real apps. Written in Markdown.
+
+Each of these is a complete, working app — a storefront with a cart, a live status dashboard, an interactive pricing builder, a guided quiz. Open one, use it, then **view its source**. It's a Markdown file you can read top to bottom.
+
+<div class="sc-cta">
+<a class="btn primary" href="/folio/">Open the storefront</a>
+<a class="btn" href="/docs/">Read the docs</a>
+</div>
+</header>
+
+<section class="sc-apps">
+
+::: card .sc-app .sc-folio
+<span class="sc-emoji">🛍️</span>
+
+### Folio — boutique storefront
+
+A multi-page shop where the cart **persists across pages, reloads, and browser tabs**, and navigation is instant. Live search, add-to-cart, checkout.
+
+<span class="tag">static → reactive</span> <span class="tag">:store</span> <span class="tag">keyed @loop</span> <span class="tag">:form</span>
+
+[Open Folio →](/folio/){.sc-open}
+:::
+
+::: card .sc-app .sc-pulse
+<span class="sc-emoji">📈</span>
+
+### Pulse — status dashboard
+
+A service dashboard driven by `:fetch` — loading, error, and empty states, live refresh, sortable metrics, status badges. No hand-written JavaScript.
+
+<span class="tag">:fetch lifecycle</span> <span class="tag">:computed</span> <span class="tag">.class when</span> <span class="tag">sort / where</span>
+
+[Open Pulse →](/pulse/){.sc-open}
+:::
+
+::: card .sc-app .sc-forge
+<span class="sc-emoji">🧩</span>
+
+### Forge — plan configurator
+
+Build your plan: toggle features, adjust seats, watch the price recompute instantly, get smart upsell hints, then check out — the classic "this needs React" interaction.
+
+<span class="tag">:computed pricing</span> <span class="tag">:if logic</span> <span class="tag">toggles</span> <span class="tag">:form</span>
+
+[Open Forge →](/forge/){.sc-open}
+:::
+
+::: card .sc-app .sc-compass
+<span class="sc-emoji">🧭</span>
+
+### Compass — product finder
+
+A guided quiz that asks a few questions, scores your answers, and recommends a match — a branching state machine expressed entirely as `:if` steps.
+
+<span class="tag">:if state machine</span> <span class="tag">:computed</span> <span class="tag">scored flow</span>
+
+[Open Compass →](/compass/){.sc-open}
+:::
+
+::: card .sc-app .sc-ledger
+<span class="sc-emoji">📒</span>
+
+### Ledger — sortable expense table
+
+A spreadsheet-grade data table: click a header to re-sort live, filter by merchant, watch running totals recompute, flip light/dark — formatted with `| money` and `| date`, totalled with `sum()`.
+
+<span class="tag">format pipes</span> <span class="tag">aggregates</span> <span class="tag">reactive sort</span> <span class="tag">:theme</span>
+
+[Open Ledger →](/ledger/){.sc-open}
+:::
+
+</section>
+
+<section class="sc-weight">
+
+## What it costs
+
+Darkmown's whole pitch is weight. A static page ships **zero** framework JavaScript — not "a little," none. The runtime loads only when a page actually declares reactivity, and it's one shared file, CI-enforced under 8 KB gzipped.
+
+::: card .sc-scale
+- **Static Darkmown page** — `0 KB` framework JS. Forever.
+- **Reactive Darkmown page** — one shared `~7.4 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).
+:::
+
+The two Darkmown numbers above are measured on every commit; the runtime budget fails CI if it crosses 8 KB. The comparison figures are representative min+gzip runtime sizes (June 2026) — the point isn't "smallest" (Preact is smaller), it's **nothing at all until you ask for it.**
+
+</section>
+
+<section class="sc-more">
+
+## The directive demos
+
+Prefer to see each feature in isolation? These pages tour the building blocks the apps are made of:
+
+<div class="grid auto">
+
+::: card .sc-mini
+**Reactive** — state, keyed loops, scoped sections.
+
+[Open →](/reactive/)
+:::
+
+::: card .sc-mini
+**Loops** — sort, paging, `@empty`, nesting.
+
+[Open →](/loops/)
+:::
+
+::: card .sc-mini
+**Store** — durable, cross-tab global state.
+
+[Open →](/store/)
+:::
+
+::: card .sc-mini
+**Theme** — zero-JS OS dark mode from a skin.
+
+[Open →](/theme/)
+:::
+
+::: card .sc-mini
+**Swiper** — a draggable carousel via the escape hatch.
+
+[Open →](/carousel/)
+:::
+
+::: card .sc-mini
+**Media** — `:video`, `:audio`, `:embed`, zero JS.
+
+[Open →](/media/)
+:::
+
+::: card .sc-mini
+**Data & Forms** — fetch lifecycle, server round-trips.
+
+[Open →](/data/)
+:::
+
+::: card .sc-mini
+**Plain Markdown** — a `.md` page, directives inert.
+
+[Open →](/markdown/)
+:::
+
+</div>
+
+</section>
+
+</main>
+
+@include /footer.wd

package/src/builder.js

@@ -60,7 +60,9 @@ export function buildSite(cwd = process.cwd()) {
       file: path.relative(cwd, route.file).replaceAll(path.sep, "/"),
       assets: {
         skins: [...page.assets.skins],
-        scripts: page.assets.runtime ? ["/__wd/runtime.js", ...page.assets.scripts] : [...page.assets.scripts],
+        scripts: page.assets.runtime
+          ? ["/__wd/runtime.js", ...page.assets.scripts]
+          : [...page.assets.scripts],
         runtime: page.assets.runtime
       }
     });
@@ -101,13 +103,15 @@ export function buildSite(cwd = process.cwd()) {
  * @returns {string}
  */
 export function stripRuntimeComments(source) {
-  return source
-    // JSDoc blocks — type annotations the browser never needs.
-    .replace(/\/\*\*[\s\S]*?\*\//g, "")
-    // Whole-line `//` comments — developer notes that don't belong in the download.
-    .replace(/^[ \t]*\/\/.*$/gm, "")
-    // Drop the now blank/whitespace-only lines the removals leave behind.
-    .replace(/^[ \t]*\n/gm, "");
+  return (
+    source
+      // JSDoc blocks — type annotations the browser never needs.
+      .replace(/\/\*\*[\s\S]*?\*\//g, "")
+      // Whole-line `//` comments — developer notes that don't belong in the download.
+      .replace(/^[ \t]*\/\/.*$/gm, "")
+      // Drop the now blank/whitespace-only lines the removals leave behind.
+      .replace(/^[ \t]*\n/gm, "")
+  );
 }
 
 /**
@@ -126,10 +130,10 @@ export function stripRuntimeComments(source) {
  * @returns {string}
  */
 export function renderCloudflareHeaders(manifest) {
-  const baseLines = Object.entries(BASE_SECURITY_HEADERS).map(([name, value]) => `  ${name}: ${value}`);
-  const blocks = [
-    ["/*", [...baseLines, `  Content-Security-Policy: ${REACTIVE_CSP}`]]
-  ];
+  const baseLines = Object.entries(BASE_SECURITY_HEADERS).map(
+    ([name, value]) => `  ${name}: ${value}`
+  );
+  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
@@ -169,7 +173,7 @@ function defaultNotFoundHtml() {
     "<body>",
     "<main>",
     "<h1>Page not found</h1>",
-    "<p>That route does not exist. <a href=\"/\">Back to home</a>.</p>",
+    '<p>That route does not exist. <a href="/">Back to home</a>.</p>',
     "</main>",
     "</body>",
     "</html>",
@@ -243,7 +247,9 @@ function emitPageAssets(paths) {
     if (hasHiddenPathSegment(rel) || fs.lstatSync(file).isSymbolicLink()) continue;
     const out = path.join(paths.distRoot, rel);
     if (fs.existsSync(out)) {
-      console.warn(`hint: page asset "${rel}" skipped — a built route already emits /${rel.replaceAll(path.sep, "/")}`);
+      console.warn(
+        `hint: page asset "${rel}" skipped — a built route already emits /${rel.replaceAll(path.sep, "/")}`
+      );
       continue;
     }
     fs.mkdirSync(path.dirname(out), { recursive: true });