@zvndev/darkmown 0.20.0 → 1.1.0

package/site/pages/index.wd

@@ -6,18 +6,28 @@ transitions: true
 ---
 
 @include /nav.wd
+@include /base.wd
 
 <main>
 
 <section class="hero">
-  <p class="eyebrow">Darkmown vs. Markdoc</p>
+  <span class="eyebrow">Darkmown vs. Markdoc</span>
 
-# Markdown that runs. Not Markdown that needs React.
+# Markdown that *runs.* Not Markdown that needs React.
 
 The left file is Markdown. It is also a running app — a live search filter, add-to-cart, and a running total. The right file is the closest Markdoc can get on its own: a static list. To make it do what the left one already does, you add a React component, hydration, and a build step.
 
-<a class="btn primary" href="/app/">See a whole app in one file</a>
+<div class="hero-cta">
+<a class="btn primary" href="/showcase/">See the showcase</a>
 <a class="btn" href="/docs/">Read the docs</a>
+</div>
+
+<ul class="hero-stats">
+  <li><strong>0 KB</strong><span>framework JS on static pages</span></li>
+  <li><strong>~7.4 KB</strong><span>one runtime, CI-enforced &lt; 8 KB</span></li>
+  <li><strong>1</strong><span>loop and one binding to learn</span></li>
+  <li><strong>MIT</strong><span>zero runtime dependencies</span></li>
+</ul>
 </section>
 
 <section class="versus">
@@ -98,14 +108,14 @@ Markdoc.renderers.react(content, React, {
 
 </section>
 
-:note "Static pages ship zero JavaScript. The moment a page asks for reactivity — like this very homepage — one ~5.7 KB gzipped runtime loads (CI-enforced under 6 KB), never before. JS optional, CSS optional, always."
+:note "Static pages ship zero JavaScript. The moment a page asks for reactivity — like this very homepage — one ~7.4 KB gzipped runtime loads (CI-enforced under 8 KB), never before. JS optional, CSS optional, always."
 
 <section class="props">
 
 ## Three rules, no escape hatch
 
 - **Zero-JS static.** A page with no state ships no framework JavaScript. `/markdown/` and `/docs/` prove it — open them and check the network tab.
-- **One runtime.** Every reactive page shares the same ~5.7 KB gzipped runtime, CI-enforced under 6 KB. No per-component bundles, no hydration tax that scales with your UI.
+- **One runtime.** Every reactive page shares the same ~7.4 KB gzipped runtime, CI-enforced under 8 KB. No per-component bundles, no hydration tax that scales with your UI.
 - **One loop, one binding.** `@loop … into …` is the only loop; `{ name }` is the only interpolation. Nothing else to learn, nothing else to misuse.
 
 </section>
@@ -160,3 +170,5 @@ This button is powered by `site/pages/index.js`, discovered by matching the page
 <a class="btn" href="https://github.com/ZVN-DEV/darkmown">Star on GitHub</a>
 
 </main>
+
+@include /footer.wd

package/site/pages/ledger/index.skin

@@ -0,0 +1,257 @@
+/* ── Ledger — a sortable expense table. Reuses base tokens ($ink/$paper/…), so
+   the :theme toggle re-themes it through base.skin's `tokens dark` (now wired to
+   [data-theme] as well as the OS media query). ───────────────────────────── */
+
+.app-ledger
+  max-width 60rem
+  margin 0 auto
+  padding 2.5rem 1.25rem 4rem
+
+/* Header: title + theme switch */
+.app-ledger .ledger-head
+  display flex
+  align-items flex-end
+  justify-content space-between
+  flex-wrap wrap
+  gap 1.25rem
+  margin-bottom 1.75rem
+
+.app-ledger .ledger-eyebrow
+  font-size .72rem
+  font-weight 700
+  letter-spacing .14em
+  text-transform uppercase
+  color $accent
+
+.app-ledger h1
+  margin .35rem 0 0
+  font-size 2.4rem
+  letter-spacing -.02em
+  color $ink
+
+.app-ledger .ledger-tagline
+  margin .6rem 0 0
+  max-width 34rem
+  color $muted
+  font-size .95rem
+  line-height 1.5
+
+.app-ledger .ledger-tagline code
+  bg $code-bg
+  color $code-ink
+  padding .05rem .3rem
+  radius 5px
+  font-size .85em
+
+/* Theme switch */
+.app-ledger .theme-switch
+  display inline-flex
+  align-items center
+  gap .4rem
+  font-size .75rem
+  font-weight 600
+  letter-spacing .04em
+  text-transform uppercase
+  color $muted
+
+.app-ledger .theme-switch button[data-wd-action]
+  border 1px solid $line
+  bg $panel
+  color $ink-soft
+  font-size .8rem
+  font-weight 600
+  padding .4rem .8rem
+  radius 999px
+  cursor pointer
+  transition color .14s ease, border-color .14s ease, background .14s ease
+
+.app-ledger .theme-switch button[data-wd-action]:hover
+  color $ink
+  border-color $accent
+
+/* Stat cards */
+.app-ledger .stat-grid
+  display grid
+  grid-template-columns repeat(4, 1fr)
+  gap .85rem
+  margin-bottom 1.5rem
+
+.app-ledger .stat
+  padding 1rem 1.15rem
+  border 1px solid $line-soft
+  radius 14px
+  bg $panel
+
+.app-ledger .stat-label
+  font-size .72rem
+  font-weight 600
+  letter-spacing .06em
+  text-transform uppercase
+  color $muted
+
+.app-ledger .stat-num
+  margin-top .3rem
+  font-size 1.5rem
+  font-weight 700
+  letter-spacing -.01em
+  color $ink
+  font-variant-numeric tabular-nums
+
+.app-ledger .stat p, .app-ledger .stat-num p, .app-ledger .stat-label p
+  margin 0
+
+/* Controls: filter + live ticker */
+.app-ledger .ledger-controls
+  display flex
+  align-items center
+  justify-content space-between
+  flex-wrap wrap
+  gap 1rem
+  margin-bottom 1rem
+
+.app-ledger .ledger-controls input[data-wd-bind-input]
+  flex 1 1 16rem
+  border 1px solid $line
+  bg $paper-2
+  color $ink
+  font-size .95rem
+  padding .6rem .9rem
+  radius 10px
+
+.app-ledger .synced
+  font-size .8rem
+  color $muted
+  white-space nowrap
+
+.app-ledger .synced p
+  margin 0
+
+/* The table (CSS grid rows so it stays one readable Markdown file) */
+.app-ledger .ledger-table
+  padding 0
+  border 1px solid $line-soft
+  radius 16px
+  overflow hidden
+  bg $panel
+
+.app-ledger .thead, .app-ledger .trow
+  display grid
+  grid-template-columns 9rem 1fr 9rem 7rem 4.5rem
+  align-items center
+
+.app-ledger .thead
+  border-bottom 1px solid $line-soft
+  bg $paper-2
+
+.app-ledger .th
+  padding 0
+
+.app-ledger .th button[data-wd-action]
+  width 100%
+  text-align left
+  border 0
+  bg transparent
+  color $muted
+  font-size .72rem
+  font-weight 700
+  letter-spacing .06em
+  text-transform uppercase
+  padding .8rem .9rem
+  cursor pointer
+  transition color .14s ease
+
+.app-ledger .th button[data-wd-action]:hover
+  color $ink
+
+.app-ledger .th.active button[data-wd-action]
+  color $accent
+
+.app-ledger .th.num button[data-wd-action]
+  text-align right
+
+.app-ledger .th.dir
+  display flex
+  gap .15rem
+  justify-content center
+
+.app-ledger .th.dir button[data-wd-action]
+  width auto
+  padding .8rem .35rem
+  font-size .7rem
+
+.app-ledger .trow
+  border-top 1px solid $line-soft
+  font-size .92rem
+
+.app-ledger .trow:first-of-type
+  border-top 0
+
+.app-ledger .td
+  padding .7rem .9rem
+  color $ink-soft
+
+.app-ledger .td p
+  margin 0
+
+.app-ledger .td.muted
+  color $muted
+  font-variant-numeric tabular-nums
+
+.app-ledger .td.strong
+  color $ink
+  font-weight 600
+
+.app-ledger .td.num
+  text-align right
+  font-weight 600
+  color $ink
+  font-variant-numeric tabular-nums
+
+.app-ledger .pill
+  display inline-block
+  font-size .72rem
+  font-weight 600
+  padding .15rem .55rem
+  radius 999px
+  bg $accent-soft
+  color $accent-deep
+
+.app-ledger .td.dir
+  text-align center
+
+.app-ledger .td.dir button[data-wd-action]
+  border 1px solid transparent
+  bg transparent
+  color $muted
+  font-size .8rem
+  padding .25rem .5rem
+  radius 8px
+  cursor pointer
+  transition color .14s ease, border-color .14s ease
+
+.app-ledger .td.dir button[data-wd-action]:hover
+  color $warm
+  border-color $line
+
+.app-ledger .trow.blank
+  display block
+  padding 1.4rem .9rem
+  color $muted
+  text-align center
+
+.app-ledger .ledger-foot
+  margin-top 1.1rem
+  font-size .85rem
+  color $muted
+  text-align center
+
+.app-ledger .ledger-foot strong
+  color $ink-soft
+
+@media (max-width: 640px)
+  .app-ledger .stat-grid
+    grid-template-columns repeat(2, 1fr)
+  .app-ledger .thead, .app-ledger .trow
+    grid-template-columns 1fr 5.5rem 3.5rem
+  .app-ledger .th.cat, .app-ledger .td.cat
+    display none

package/site/pages/ledger/index.wd

@@ -0,0 +1,183 @@
+---
+title: Ledger — a sortable expense table in Markdown
+description: A real data table written as one Markdown file — clickable-header sorting, a live filter, running totals, and a light/dark toggle. Format pipes (| money, | date), aggregates (sum, avg, max), reactive sort, and :theme — all declarative, no hand-written JavaScript.
+image: https://darkmown.com/__wd/media/og-showcase.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-ledger">
+
+::: section #ledger
+
+:theme
+:store expenses = [
+  {"id":1,"date":"2026-06-22","merchant":"Aurora Studio","category":"Software","amount":149},
+  {"id":2,"date":"2026-06-20","merchant":"Briza Coffee","category":"Meals","amount":18.4},
+  {"id":3,"date":"2026-06-19","merchant":"Cobalt Cloud","category":"Hosting","amount":312.5},
+  {"id":4,"date":"2026-06-18","merchant":"Dune Print Co","category":"Office","amount":64},
+  {"id":5,"date":"2026-06-16","merchant":"Aurora Studio","category":"Software","amount":29},
+  {"id":6,"date":"2026-06-15","merchant":"Ember Transit","category":"Travel","amount":212.75},
+  {"id":7,"date":"2026-06-13","merchant":"Briza Coffee","category":"Meals","amount":11.2},
+  {"id":8,"date":"2026-06-11","merchant":"Cobalt Cloud","category":"Hosting","amount":312.5}
+]
+:state q = ""
+:state sortKey = "amount"
+:state sortDir = "desc"
+:state secs = 0
+:every 1s -> secs++
+
+:computed total = sum(expenses, amount)
+:computed average = avg(expenses, amount)
+:computed largest = max(expenses, amount)
+
+::: ledger-head
+::: ledger-mark
+::: eyebrow .ledger-eyebrow
+A real data table
+:::
+
+# *Ledger*
+
+::: ledger-tagline
+Clickable-header sorting, a live filter, and running totals — a spreadsheet-grade table written as one Markdown file. The numbers below are `{ … | money }`; the dates are `{ … | date }`; the totals are `sum()` / `avg()` / `max()`.
+:::
+:::
+
+::: theme-switch
+Theme
+:button "Auto" -> theme = "auto"
+:button "Light" -> theme = "light"
+:button "Dark" -> theme = "dark"
+:::
+:::
+
+::: stat-grid
+::: card .stat
+::: stat-label
+Total spend
+:::
+::: stat-num
+{ total | money }
+:::
+:::
+::: card .stat
+::: stat-label
+Average
+:::
+::: stat-num
+{ average | money }
+:::
+:::
+::: card .stat
+::: stat-label
+Largest
+:::
+::: stat-num
+{ largest | money }
+:::
+:::
+::: card .stat
+::: stat-label
+Entries
+:::
+::: stat-num
+{ expenses | count }
+:::
+:::
+:::
+
+::: ledger-controls
+:bind q placeholder="Filter by merchant…"
+::: synced
+↻ live · { secs | pluralize:"second" } on this page
+:::
+:::
+
+::: card .ledger-table
+
+::: thead
+::: th .active when sortKey == "date"
+:button "Date" -> sortKey = "date" ; sortDir = "asc"
+:::
+::: th .active when sortKey == "merchant"
+:button "Merchant" -> sortKey = "merchant" ; sortDir = "asc"
+:::
+::: th .active when sortKey == "category"
+:button "Category" -> sortKey = "category" ; sortDir = "asc"
+:::
+::: th .num .active when sortKey == "amount"
+:button "Amount" -> sortKey = "amount" ; sortDir = "desc"
+:::
+::: th .dir
+:button "▲" -> sortDir = "asc"
+:button "▼" -> sortDir = "desc"
+:::
+:::
+
+@loop expenses into e where e.merchant contains q sort by { sortKey } { sortDir }
+::: trow
+::: td .muted
+{ e.date | date:"medium" }
+:::
+::: td .strong
+{ e.merchant }
+:::
+::: td
+::: pill
+{ e.category }
+:::
+:::
+::: td .num
+{ e.amount | money }
+:::
+::: td .dir
+:button "✕" -> expenses remove e
+:::
+:::
+@empty
+::: trow .blank
+No expenses match "**{ q }**".
+:::
+@endloop
+
+:::
+
+::: ledger-foot
+{ expenses | count } entries · totalling **{ total | money }** · sorted by **{ sortKey }** ({ sortDir })
+:::
+
+<details class="source-reveal">
+<summary>View source — it's Markdown</summary>
+
+```wd
+:store expenses = [ … ]
+:state sortKey = "amount"
+:state sortDir = "desc"
+:state q = ""
+
+:computed total = sum(expenses, amount)
+
+# clickable headers set the sort column + direction
+:button "Amount" -> sortKey = "amount" ; sortDir = "desc"
+:button "▲" -> sortDir = "asc"
+
+:bind q placeholder="Filter by merchant…"
+
+@loop expenses into e where e.merchant contains q sort by { sortKey } { sortDir }
+| { e.date | date:"medium" } | { e.merchant } | { e.amount | money } |
+:button "✕" -> expenses remove e
+@endloop
+
+Total: { total | money }
+```
+
+</details>
+
+:::
+
+</main>
+
+@include /footer.wd

package/site/pages/media/index.skin

@@ -0,0 +1,82 @@
+/* ── Media demo — layers on /base.wd. Pure presentation; the page itself ships
+   no framework JS, so nothing here is reactive. Reuses base tokens. ───────── */
+
+.app-media
+  max-width 52rem
+  margin 0 auto
+  padding 2.5rem 1.25rem 4rem
+
+.app-media .media-head
+  margin-bottom 2rem
+
+.app-media .media-head .eyebrow
+  color $accent
+
+.app-media h1
+  margin .5rem 0 0
+  font-size 2.5rem
+  letter-spacing -.02em
+  color $ink
+
+.app-media .media-head p
+  margin 1rem 0 0
+  max-width 42rem
+  color $ink-soft
+  font-size 1.02rem
+  line-height 1.6
+
+.app-media .media-head code, .app-media .media-label code, .app-media .media-note code
+  bg $code-bg
+  color $code-ink
+  padding .08rem .35rem
+  radius 6px
+  font-size .85em
+
+/* Each player sits in its own labelled card */
+.app-media .media-panel
+  padding 1.25rem 1.25rem 1.1rem
+  margin 1.25rem 0
+  border 1px solid $line-soft
+  radius 16px
+  bg $panel
+
+.app-media .media-label
+  font-size .8rem
+  font-weight 600
+  letter-spacing .02em
+  color $muted
+  margin-bottom .85rem
+
+.app-media .media-label p
+  margin 0
+
+/* The compiled <video>/<audio>/<iframe> wrapper */
+.app-media video
+  width 100%
+  height auto
+  display block
+  border 1px solid $line-soft
+  radius 12px
+  background $sunk
+
+.app-media audio
+  width 100%
+  display block
+
+.app-media .wd-embed
+  border 1px solid $line-soft
+  radius 12px
+  overflow hidden
+  background $sunk
+
+.app-media .media-note
+  margin .9rem 0 0
+  font-size .88rem
+  line-height 1.55
+  color $muted
+
+.app-media .media-note p
+  margin 0
+
+.app-media .source-reveal
+  margin-top 2rem

package/site/pages/media/index.wd

@@ -0,0 +1,84 @@
+---
+title: Media — video, audio, and embeds in Markdown
+description: Three one-line directives — :video, :audio, :embed — compile to hardened, accessible, privacy-friendly players. No framework JavaScript ships: a media page stays zero-JS, just like static Markdown.
+image: https://darkmown.com/__wd/media/og-showcase.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-media">
+
+<header class="media-head">
+<span class="eyebrow">New in 1.0</span>
+
+# *Media*, the Markdown way
+
+Video, audio, and third-party embeds used to be the one place a Markdown page fell
+back to raw HTML — `<video>` tags, `<iframe>` soup, privacy footguns, and
+copy-pasted attributes. Darkmown gives you three one-line directives instead.
+Each compiles to a **hardened, accessible, lazy** player, and — because they emit
+no `data-wd-*` — *this entire page ships zero framework JavaScript.*
+
+</header>
+
+::: card .media-panel
+::: media-label
+`:video` — a hardened HTML5 player
+:::
+
+:video /media/clip.mp4 poster=/media/clip-poster.jpg controls
+
+::: media-note
+`preload="metadata"` and `controls` are added for you; an `autoplay` clip silently
+implies `muted`, because browsers block sound-on autoplay. The source URL runs
+through the same scheme guard as `:fetch` — only relative paths and `http(s)` get
+through.
+:::
+:::
+
+::: card .media-panel
+::: media-label
+`:audio` — same guarantees, for sound
+:::
+
+:audio /media/tone.mp3 controls
+
+::: media-note
+A 440 Hz reference tone. `:audio` shares the `:video` defaults and validation; flags
+you don't set never appear in the markup, so there are no surprise behaviors.
+:::
+:::
+
+::: card .media-panel
+::: media-label
+`:embed` — privacy-friendly, responsive iframes
+:::
+
+:embed https://youtu.be/aqz-KE-bpKQ title="Big Buck Bunny (open movie)"
+
+::: media-note
+A YouTube or Vimeo URL is rewritten to its **no-cookie / player** form, wrapped in a
+`16/9` box, and marked `loading="lazy"` with a locked-down `referrerpolicy`. Paste a
+share link; get a responsive, tracking-light embed.
+:::
+:::
+
+<details class="source-reveal">
+<summary>View source — three lines</summary>
+
+```wd
+:video /media/clip.mp4 poster=/media/clip-poster.jpg controls
+:audio /media/tone.mp3 controls
+:embed https://youtu.be/aqz-KE-bpKQ title="Big Buck Bunny (open movie)"
+```
+
+That's the whole page's interactivity. No `<script>`, no runtime — open DevTools and
+watch the Network tab stay empty of framework JS.
+
+</details>
+
+</main>
+
+@include /footer.wd