@zvndev/darkmown 1.0.0 → 1.2.0

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)

package/src/templates/store/api/checkout.js

@@ -0,0 +1,18 @@
+// Demo checkout endpoint. A plain Web-standard `(request) => Response` handler:
+// it runs in `darkmown dev` and on Vercel Edge / Cloudflare Pages with no extra
+// config. Echoes the order back with an id — swap in your real payment and
+// fulfilment logic here (validate input, charge, write to a DB, send email).
+export const config = { runtime: "edge" };
+
+export default async function (request) {
+  if (request.method !== "POST") {
+    return Response.json({ ok: false, error: "POST only" }, { status: 405 });
+  }
+  const order = Object.fromEntries(await request.formData());
+  return Response.json({
+    ok: true,
+    received: order,
+    orderId: `ORD-${Date.now().toString(36).toUpperCase()}`,
+    at: new Date().toISOString()
+  });
+}

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

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

package/src/templates/store/site/_/products.json

@@ -0,0 +1,8 @@
+[
+  { "name": "Ceramic Mug", "emoji": "☕️", "price": 18 },
+  { "name": "Linen Tote", "emoji": "👜", "price": 32 },
+  { "name": "Pocket Notebook", "emoji": "📓", "price": 12 },
+  { "name": "Desk Lamp", "emoji": "💡", "price": 64 },
+  { "name": "Plant Pot", "emoji": "🪴", "price": 24 },
+  { "name": "Wall Clock", "emoji": "🕰️", "price": 48 }
+]

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

@@ -0,0 +1,100 @@
+tokens
+  ink #1a1f2b
+  paper #fbfbf9
+  line #e6e4dd
+  accent #146b54
+
+page
+  margin 0
+  font ui-sans-serif, system-ui, sans-serif
+  color $ink
+  bg $paper
+  line-height 1.55
+
+main
+  max-width 860px
+  margin 0 auto
+  padding 2rem 1.5rem
+
+nav
+  display flex
+  align-items center
+  justify-content space-between
+  max-width 860px
+  margin 0 auto
+  padding 1.25rem 1.5rem
+
+nav strong
+  font-size 1.1rem
+
+nav a
+  color $accent
+  text-decoration none
+
+input
+  font inherit
+  padding .6rem .75rem
+  border 1px solid $line
+  radius 8px
+  width 100%
+  max-width 320px
+
+.catalog
+  display grid
+  grid-template-columns repeat(auto-fill, minmax(160px, 1fr))
+  gap 1rem
+  margin 1.5rem 0
+
+.product
+  border 1px solid $line
+  radius 12px
+  padding 1rem
+  text-align center
+  background white
+
+.emoji
+  font-size 2.25rem
+
+.pname
+  font-weight 600
+  margin .35rem 0 .15rem
+
+.price
+  color $accent
+  font-weight 600
+  margin-bottom .6rem
+
+button
+  font inherit
+  bg $accent
+  color white
+  border 0
+  padding .55rem .9rem
+  radius 8px
+  cursor pointer
+
+.line
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  border 1px solid $line
+  radius 10px
+  padding .6rem .9rem
+  margin .4rem 0
+  background white
+
+.line button
+  bg transparent
+  color $ink
+  border 1px solid $line
+
+.cart-foot
+  font-size 1.1rem
+  margin .75rem 0
+
+.receipt
+  border 1px solid $accent
+  radius 10px
+  padding 1rem
+  background #ecf6f1

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

@@ -0,0 +1,83 @@
+---
+title: Shop — built with Darkmown
+description: A storefront in Markdown — live search, a shared cart, and a checkout that posts to a serverless function.
+transitions: true
+---
+
+@include /nav.wd
+
+<main>
+
+::: section #shop
+
+:store cart = []
+:state q = ""
+:computed itemCount = count(cart)
+:computed subtotal = sum(cart, price)
+
+# Shop
+
+::: shop-search
+:bind q placeholder="Search products…"
+:::
+
+::: catalog
+@loop /products.json into p where p.name contains q
+::: card .product
+::: emoji
+{ p.emoji }
+:::
+::: pname
+{ p.name }
+:::
+::: price
+{ p.price | money }
+:::
+:button "Add to cart" -> cart += p
+:::
+@empty
+::: card .empty
+Nothing matches "**{ q }**".
+:::
+@endloop
+:::
+
+## Your cart ({ itemCount })
+
+@loop cart into item
+::: card .line
+{ item.emoji } **{ item.name }** — { item.price | money }
+:button "Remove" -> cart remove item
+:::
+@empty
+Your cart is empty — add something above.
+@endloop
+
+:if itemCount
+::: cart-foot
+**Subtotal: { subtotal | money }**
+:::
+
+### Checkout
+
+This form posts to `api/checkout.js` — a plain serverless function that runs in
+`darkmown dev` and on Vercel/Cloudflare alike. With JavaScript off it degrades to
+a native POST.
+
+:form action="/api/checkout" into receipt
+:input name placeholder="Full name" required
+:input email type=email placeholder="you@example.com" required
+:submit "Place order"
+:endform
+
+:if receipt
+::: card .receipt
+**Order placed ✓** — thanks { receipt.received.name }. A confirmation is on its way
+to { receipt.received.email }. Order { receipt.orderId }.
+:::
+:endif
+:endif
+
+:::
+
+</main>