@zvndev/darkmown 1.1.0 → 1.2.0

package/src/templates/blog/site/pages/index.skin

@@ -0,0 +1,51 @@
+tokens
+  ink #1d2530
+  paper #fbfaf7
+  muted #6b7785
+  accent #2f6df0
+
+page
+  margin 0
+  font ui-sans-serif, system-ui, sans-serif
+  color $ink
+  bg $paper
+  line-height 1.6
+
+main
+  max-width 720px
+  margin 0 auto
+  padding 2.5rem 1.5rem
+
+nav
+  display flex
+  align-items center
+  justify-content space-between
+  max-width 720px
+  margin 0 auto
+  padding 1.25rem 1.5rem
+
+nav strong
+  font-size 1.1rem
+
+nav a
+  color $accent
+  text-decoration none
+
+.post-card
+  padding 1.5rem 0
+  border-bottom 1px solid #e7e3da
+
+.post-card h3
+  margin 0 0 .25rem
+
+.post-card a
+  color $ink
+  text-decoration none
+
+.post-card a:hover
+  color $accent
+
+.post-meta
+  margin 0 0 .5rem
+  color $muted
+  font-size .9rem

package/src/templates/blog/site/pages/index.wd

@@ -0,0 +1,24 @@
+---
+title: My Blog
+description: A markdown-native blog built with Darkmown.
+transitions: true
+---
+
+@include /nav.wd
+
+<main>
+
+# My Blog
+
+Posts are plain Markdown files in `site/pages/posts/`. This index is one `.wd`
+loop over a small JSON manifest — sorted newest-first, shipping zero JavaScript.
+
+@loop /posts.json into post sort by post.date desc
+::: post-card
+### [{ post.title }]({ post.url })
+<p class="post-meta">{ post.date }</p>
+{ post.excerpt }
+:::
+@endloop
+
+</main>

package/src/templates/blog/site/pages/posts/hello-darkmown.md

@@ -0,0 +1,16 @@
+---
+title: Hello, Darkmown
+description: Why I rewrote my blog as plain Markdown files.
+transitions: true
+---
+
+# Hello, Darkmown
+
+This post is a plain `.md` file — strict CommonMark, **zero** framework
+JavaScript. It loads instantly and is trivial to edit.
+
+When I want something interactive — a like button, a live filter, a form — I
+rename a file to `.wd` and add a directive. Static stays static; only the pages
+that need it ship the tiny reactive runtime.
+
+[← Back to all posts](/)

package/src/templates/blog/site/pages/posts/markdown-native.md

@@ -0,0 +1,20 @@
+---
+title: Markdown-native, by default
+description: Every post is a .md file; the index is one .wd loop.
+transitions: true
+---
+
+# Markdown-native, by default
+
+To add a post, drop a Markdown file in `site/pages/posts/` and add a line to
+`site/_/posts.json`. The home page loops that manifest:
+
+```wd
+@loop /posts.json into post sort by post.date desc
+### [{ post.title }]({ post.url })
+@endloop
+```
+
+No build config, no plugins, no content layer. The file *is* the page.
+
+[← Back to all posts](/)

package/src/templates/dashboard/README.md

@@ -0,0 +1,25 @@
+# Dashboard — a Darkmown template
+
+A live dashboard. The page is static; the stat cards `:fetch` their data from
+`api/metrics.js` — a plain Web-standard `(request) => Response` function that runs
+in `darkmown dev` and on every host. Loading and error states are handled inline.
+
+- **Data** — `api/metrics.js`. Replace its body with a real query (DB, analytics,
+  billing). Add more endpoints as `api/<name>.js`; each maps to `/api/<name>`.
+- **View** — `site/pages/index.wd` fetches `/api/metrics` and renders stat cards.
+
+## Commands
+
+- `npm run dev` — live compiler + local `/api/*` runner on http://localhost:5173.
+- `npm run build` — compile to `dist/`.
+- `npm run preview` — serve the built `dist/` locally (static only; use `dev` for `/api`).
+
+## Deploy
+
+```sh
+npx darkmown deploy vercel       # or: npx darkmown deploy cloudflare
+```
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=YOUR_REPO_URL)
+&nbsp;
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=YOUR_REPO_URL)

package/src/templates/dashboard/api/metrics.js

@@ -0,0 +1,15 @@
+// Demo metrics endpoint. A plain Web-standard `(request) => Response` handler:
+// it runs in `darkmown dev` and on Vercel Edge / Cloudflare Pages with no extra
+// config. Returns a snapshot of stats — replace the body with a real query
+// (database, analytics API, billing provider, …).
+export const config = { runtime: "edge" };
+
+export default function () {
+  return Response.json({
+    revenue: 48230,
+    orders: 312,
+    visitors: 8940,
+    conversion: 3.5,
+    updatedAt: new Date().toISOString()
+  });
+}

package/src/templates/dashboard/site/_/nav.wd

@@ -0,0 +1,6 @@
+<nav>
+  <strong>Dashboard</strong>
+  <span class="links">
+    <a href="/">Overview</a>
+  </span>
+</nav>

package/src/templates/dashboard/site/pages/index.skin

@@ -0,0 +1,74 @@
+tokens
+  ink #0f1722
+  paper #0b1018
+  panel #131c28
+  line #243245
+  muted #8aa0b8
+  accent #4f9cff
+
+page
+  margin 0
+  font ui-sans-serif, system-ui, sans-serif
+  color #e7eefc
+  bg $paper
+  line-height 1.55
+
+main
+  max-width 880px
+  margin 0 auto
+  padding 2rem 1.5rem
+
+nav
+  display flex
+  align-items center
+  justify-content space-between
+  max-width 880px
+  margin 0 auto
+  padding 1.25rem 1.5rem
+
+nav strong
+  font-size 1.1rem
+
+nav a
+  color $accent
+  text-decoration none
+
+.stat-grid
+  display grid
+  grid-template-columns repeat(auto-fit, minmax(160px, 1fr))
+  gap 1rem
+  margin 1.5rem 0
+
+.stat
+  background $panel
+  border 1px solid $line
+  radius 12px
+  padding 1.1rem 1.25rem
+
+.stat-label
+  color $muted
+  font-size .85rem
+  text-transform uppercase
+  letter-spacing .04em
+
+.stat-num
+  font-size 1.9rem
+  font-weight 700
+  margin-top .35rem
+
+.note
+  background $panel
+  border 1px solid $line
+  radius 10px
+  padding 1rem
+
+.error
+  background #2a1620
+  border 1px solid #5b2738
+  radius 10px
+  padding 1rem
+
+.updated
+  color $muted
+  font-size .85rem
+  margin-top .5rem

package/src/templates/dashboard/site/pages/index.wd

@@ -0,0 +1,75 @@
+---
+title: Dashboard — built with Darkmown
+description: A live dashboard — stat cards fetched from a serverless function, on an otherwise static page.
+transitions: true
+---
+
+@include /nav.wd
+
+<main>
+
+::: section #dash
+
+# Dashboard
+
+:fetch metrics from "/api/metrics"
+
+:if metrics_loading
+::: card .note
+Loading metrics…
+:::
+:endif
+
+:if metrics_error
+::: card .error
+Couldn't load metrics: { metrics_error }
+:::
+:endif
+
+:if metrics
+::: stat-grid
+::: card .stat
+::: stat-label
+Revenue
+:::
+::: stat-num
+{ metrics.revenue | money }
+:::
+:::
+::: card .stat
+::: stat-label
+Orders
+:::
+::: stat-num
+{ metrics.orders }
+:::
+:::
+::: card .stat
+::: stat-label
+Visitors
+:::
+::: stat-num
+{ metrics.visitors }
+:::
+:::
+::: card .stat
+::: stat-label
+Conversion
+:::
+::: stat-num
+{ metrics.conversion }%
+:::
+:::
+:::
+
+::: updated
+Updated { metrics.updatedAt }
+:::
+:endif
+
+The numbers come from `api/metrics.js` — a serverless function that runs in
+`darkmown dev` and on your host. The page itself stays static; only the data fetches.
+
+:::
+
+</main>

package/src/templates/landing/README.md

@@ -0,0 +1,25 @@
+# Landing — a Darkmown template
+
+A marketing one-pager: a hero, a feature grid, and a testimonials **carousel**.
+The static parts ship zero framework JavaScript; only the carousel loads a tiny,
+pay-for-what-you-use behavior module (`/__wd/behaviors/carousel.js`).
+
+- **Carousel** — the `:carousel … :endcarousel` block; native CSS scroll-snap +
+  the behavior add prev/next, dots, and mouse drag. Touch swipe is native.
+- **Everything else** — plain Markdown + `:::` containers, no JavaScript.
+
+## Commands
+
+- `npm run dev` — live compiler on http://localhost:5173.
+- `npm run build` — compile to `dist/`.
+- `npm run preview` — serve the built `dist/` locally.
+
+## Deploy
+
+```sh
+npx darkmown deploy vercel       # or: npx darkmown deploy cloudflare
+```
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=YOUR_REPO_URL)
+ 
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=YOUR_REPO_URL)

package/src/templates/landing/site/_/nav.wd

@@ -0,0 +1,6 @@
+<nav>
+  <strong>Acme</strong>
+  <span class="links">
+    <a href="#start">Get started</a>
+  </span>
+</nav>

package/src/templates/landing/site/pages/index.skin

@@ -0,0 +1,140 @@
+tokens
+  ink #14161c
+  paper #ffffff
+  soft #f4f5f8
+  line #e6e8ee
+  accent #5b4bf5
+
+page
+  margin 0
+  font ui-sans-serif, system-ui, sans-serif
+  color $ink
+  bg $paper
+  line-height 1.6
+
+main
+  max-width 900px
+  margin 0 auto
+  padding 1rem 1.5rem 4rem
+
+nav
+  display flex
+  align-items center
+  justify-content space-between
+  max-width 900px
+  margin 0 auto
+  padding 1.25rem 1.5rem
+
+nav strong
+  font-size 1.15rem
+
+nav a
+  color $accent
+  text-decoration none
+
+.hero
+  text-align center
+  padding 3rem 1rem 2rem
+
+.hero h1
+  font-size 2.75rem
+  margin 0 0 .5rem
+
+.lede
+  font-size 1.2rem
+  color #555c6b
+  margin 0 0 1.5rem
+
+.cta
+  display inline-block
+  bg $accent
+  color white
+  text-decoration none
+  padding .8rem 1.4rem
+  radius 10px
+  font-weight 600
+
+.features
+  display grid
+  grid-template-columns repeat(auto-fit, minmax(220px, 1fr))
+  gap 1rem
+  margin 2rem 0
+
+.feature
+  background $soft
+  border 1px solid $line
+  radius 12px
+  padding 1.25rem
+
+.feature h3
+  margin .25rem 0 .5rem
+
+.wd-carousel
+  position relative
+  margin 1rem 0 2rem
+
+.wd-carousel-track
+  display flex
+  overflow-x auto
+  scroll-snap-type x mandatory
+  scroll-behavior smooth
+  gap 1rem
+
+.wd-carousel-track .quote
+  flex 0 0 100%
+  scroll-snap-align start
+  background $soft
+  border 1px solid $line
+  radius 12px
+  padding 1.75rem
+  font-size 1.2rem
+
+.quote .who
+  margin .5rem 0 0
+  color #555c6b
+  font-size .95rem
+
+.wd-carousel-prev
+  position absolute
+  left -.5rem
+  top 40%
+
+.wd-carousel-next
+  position absolute
+  right -.5rem
+  top 40%
+
+.wd-carousel-prev, .wd-carousel-next
+  bg white
+  color $ink
+  border 1px solid $line
+  radius 999px
+  width 2.25rem
+  height 2.25rem
+  cursor pointer
+
+.wd-carousel-dots
+  display flex
+  justify-content center
+  gap .5rem
+  margin-top .75rem
+
+.wd-carousel-dot
+  width .6rem
+  height .6rem
+  padding 0
+  border 0
+  radius 999px
+  bg $line
+  cursor pointer
+
+.wd-carousel-dot[aria-current="true"]
+  bg $accent
+
+.cta-band
+  text-align center
+  background $soft
+  border 1px solid $line
+  radius 16px
+  padding 2.5rem
+  margin-top 2rem

package/src/templates/landing/site/pages/index.wd

@@ -0,0 +1,54 @@
+---
+title: Acme — ship faster
+description: A marketing one-pager built with Darkmown. Zero framework JS on the static parts, with a testimonials carousel.
+transitions: true
+---
+
+@include /nav.wd
+
+<main>
+
+::: hero
+# Ship faster with *Acme*
+<p class="lede">The all-in-one toolkit your team actually enjoys using.</p>
+<a class="cta" href="#start">Get started</a>
+:::
+
+::: features
+::: feature
+### ⚡ Fast
+Static pages, zero framework JavaScript. Instant loads, perfect Lighthouse.
+:::
+::: feature
+### 🧩 Simple
+Write Markdown. Add a directive only on the pages that need interactivity.
+:::
+::: feature
+### 🚀 Deploy anywhere
+One command to Vercel or Cloudflare — your API comes along for free.
+:::
+:::
+
+## What teams say
+
+:carousel
+::: quote
+> "Acme cut our launch time in half."
+<p class="who">— Riley, Head of Product</p>
+:::
+::: quote
+> "The simplest stack we've ever shipped on."
+<p class="who">— Sam, CTO</p>
+:::
+::: quote
+> "Our marketing pages load instantly now."
+<p class="who">— Jordan, Growth</p>
+:::
+:endcarousel
+
+::: cta-band #start
+## Ready to build?
+<a class="cta" href="/">Start now</a>
+:::
+
+</main>

package/src/templates/starter/README.md

@@ -0,0 +1,32 @@
+# My Darkmown site
+
+Run `npm install` and `npm run dev` to start the live compiler.
+
+## Commands
+
+- `npm run dev` — live compiler on http://localhost:5173 with hot reload.
+- `npm run build` — compile the site to `dist/`.
+- `npm run preview` — serve the built `dist/` locally.
+
+## Deploy
+
+One command (it builds, then prints your live URL — log in if prompted):
+
+```sh
+npx darkmown deploy vercel       # or: npx darkmown deploy cloudflare
+```
+
+Or one-click, after pushing this repo to GitHub (replace `YOUR_REPO_URL`):
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=YOUR_REPO_URL)
+ 
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=YOUR_REPO_URL)
+
+## Layout
+
+- Pages live in `site/pages` — `.md` stays plain Markdown, `.wd` adds directives.
+- Shared includes live in `site/_`.
+- Backend functions live in `api/` — plain Web-standard `(request) => Response`.
+  They run in `darkmown dev` and on Vercel/Cloudflare with no extra config.
+- Hidden route files start with `.` or `-`.
+- Colocated `index.skin` and `index.js` attach to a page automatically.

package/src/templates/starter/site/_/nav.wd

@@ -0,0 +1,7 @@
+<nav>
+  <strong>My site</strong>
+  <span class="links">
+    <a href="/">Home</a>
+    <a href="/about/">About</a>
+  </span>
+</nav>

package/src/templates/starter/site/pages/about.md

@@ -0,0 +1,10 @@
+---
+title: About
+---
+
+# About
+
+This page is plain Markdown (`.md`) — strict CommonMark, zero framework JavaScript.
+Rename it to `.wd` when you want directives like state, loops, or forms.
+
+[Back home](/)

package/src/templates/starter/site/pages/index.skin

@@ -0,0 +1,47 @@
+tokens
+  ink #172026
+  paper #f7f2e8
+  accent #0f8b8d
+
+page
+  margin 0
+  font ui-sans-serif, system-ui, sans-serif
+  color $ink
+  bg $paper
+
+main
+  max-width 760px
+  margin 0 auto
+  padding 3rem 1.5rem
+
+nav
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  max-width 760px
+  margin 0 auto
+  padding 1.25rem 1.5rem
+
+nav strong
+  font-size 1.1rem
+
+nav .links
+  display flex
+  gap 1.25rem
+
+nav a
+  color $ink
+  text-decoration none
+  opacity .8
+
+nav a:hover
+  opacity 1
+  color $accent
+
+button
+  bg $accent
+  color white
+  border 0
+  padding .75rem 1rem
+  radius 8px

package/src/templates/starter/site/pages/index.wd

@@ -0,0 +1,27 @@
+---
+title: My Darkmown site
+---
+
+@include /nav.wd
+
+<main>
+
+# My Darkmown site
+
+Plain Markdown works. Rename to `.wd` when you want directives.
+
+:state count = 0
+
+Count: { count }
+
+:button "Increment" -> count++
+
+:state todos = ["Write a page"]
+
+@loop todos into todo
+- { todo }
+@endloop
+
+:button "Add" -> todos += "Add a loop"
+
+</main>

package/src/templates/store/README.md

@@ -0,0 +1,28 @@
+# Store — a Darkmown template
+
+A storefront in Markdown: a product grid with live search, a shared `:store` cart,
+and a checkout that POSTs to a serverless function.
+
+- **Static catalog** — `site/pages/index.wd` loops `site/_/products.json`.
+- **Cart** — a `:store` shared across the page; add/remove with `:button`.
+- **Checkout** — `:form action="/api/checkout"` posts to `api/checkout.js`, a plain
+  Web-standard `(request) => Response` function that runs in `darkmown dev` and on
+  every host. Replace its body with your real payment + fulfilment logic.
+
+## Commands
+
+- `npm run dev` — live compiler + the local `/api/*` runner on http://localhost:5173.
+- `npm run build` — compile to `dist/`.
+- `npm run preview` — serve the built `dist/` locally (static only; use `dev` for `/api`).
+
+## Deploy
+
+```sh
+npx darkmown deploy vercel       # or: npx darkmown deploy cloudflare
+```
+
+Your `api/checkout.js` deploys automatically alongside the static site.
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=YOUR_REPO_URL)
+ 
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=YOUR_REPO_URL)