@zvndev/darkmown 1.5.0 → 2.0.1

package/site/pages/index.skin

@@ -29,7 +29,52 @@
 .hero-cta
   display flex
   flex-wrap wrap
-  margin-bottom 2rem
+  margin-bottom 1.5rem
+
+.hero-install
+  display inline-flex
+  align-items center
+  gap .55rem
+  max-width 100%
+  margin 0 0 2rem
+  padding .7rem 1rem
+  border 1px solid $line
+  radius 10px
+  bg $sunk
+  font-family ui-monospace, SFMono-Regular, Menlo, monospace
+  overflow-x auto
+
+.hero-install::before
+  content "$"
+  color $accent
+  font-weight 700
+  flex-shrink 0
+
+.hero-install code
+  font-family inherit
+  font-size .95rem
+  color $ink
+  white-space nowrap
+
+.hero-install .copy-cmd
+  flex-shrink 0
+  margin-left .35rem
+  padding .25rem .65rem
+  border 1px solid $line
+  radius 7px
+  bg transparent
+  color $ink-soft
+  font-family inherit
+  font-size .8rem
+  cursor pointer
+
+.hero-install .copy-cmd:hover
+  color $ink
+  border-color $accent
+
+.hero-install .copy-cmd.is-copied
+  color $accent
+  border-color $accent
 
 .hero-stats
   display grid

package/site/pages/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Darkmown — Markdown that runs, not Markdown that needs React
 description: A live store widget — search filter, add-to-cart, running total — written as one Markdown file that runs. The same outcome in Markdoc needs a React component, hydration, and a build step. Compare them side by side.
 image: https://darkmown.com/__wd/media/og.png
@@ -23,9 +24,11 @@ The left file is Markdown. It is also a running app — a live search filter, ad
 <a class="btn" href="/docs/">Read the docs</a>
 </div>
 
+<div class="hero-install"><code>npx @zvndev/darkmown init my-site</code><button type="button" class="copy-cmd" data-copy-cmd aria-label="Copy install command">Copy</button></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>~7.5 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>
@@ -109,14 +112,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 ~7.4 KB gzipped runtime loads (CI-enforced under 8 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.5 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 ~7.4 KB gzipped runtime, CI-enforced under 8 KB. No per-component bundles, no hydration tax that scales with your UI.
+- **One runtime.** Every reactive page shares the same ~7.5 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>

package/site/pages/interactions/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Interactions — sliders, drag & carousels in Markdown
 description: :slider, :sortable, and :carousel — rich interactions that compile to tiny pay-for-what-you-use modules, declared in plain Markdown. Sliders ship zero JS; sortable and carousel each load one small module, only on the pages that use them.
 image: https://darkmown.com/__wd/media/og-showcase.png

package/site/pages/ledger/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 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

package/site/pages/loops.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Loop ergonomics
 transitions: true
 ---

package/site/pages/media/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 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

package/site/pages/pulse/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Pulse — service status
 description: A calm, dark observability panel built in one Markdown file — a live :fetch board, build-time rollups, and a keyed services table, all with zero hand-written JavaScript.
 image: https://darkmown.com/__wd/media/og-pulse.png

package/site/pages/reactive.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Reactive Markdown
 transitions: true
 ---

package/site/pages/scoped/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Scoped styles — same class name, zero collision
 description: Two components reuse the class name .card and never clash. Compile-time scoped styles stamp each component's subtree with a path-derived id and rewrite its skin's selectors to match only there. Zero runtime JS — a static page stays static.
 transitions: true

package/site/pages/showcase/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 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
@@ -95,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.4 KB` gzipped runtime, no per-component bundles.
+- **Reactive Darkmown page** — one shared `~7.5 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/site/pages/store.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Global store
 transitions: true
 ---

package/site/pages/theme.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Dark-mode tokens
 transitions: true
 ---