@zvndev/darkmown 1.1.0 → 1.2.0

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>