create-volt 0.31.0 → 0.33.0

package/templates/blog/setup/setup.js

@@ -0,0 +1,200 @@
+// setup.js — first-run / --edit wizard, built with Volt. Tick add-ons + fill
+// settings → writes .env (a VOLT_ADDONS list + settings), adds any needed
+// packages, installs, and starts the app. Add-on code is bundled; enabling is
+// just config.
+import { signal, computed, html, mount } from "/volt.js";
+
+const { available, current, defaultPort } = await (await fetch("/setup/state")).json();
+const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
+const order = available.map((a) => a.name);
+const enabledNow = new Set(String(current.VOLT_ADDONS || "").split(",").map((s) => s.trim()).filter(Boolean));
+
+const state = signal({
+  addons: Object.fromEntries(available.map((a) => [a.name, enabledNow.has(a.name)])),
+  dbDriver: current.DB_DRIVER || "memory",
+  mongoUri: current.MONGODB_URI || "",
+  mongoDb: current.MONGODB_DATABASE || "",
+  dbUrl: current.DATABASE_URL || "",
+  smtpUrl: current.SMTP_URL || "",
+  mailFrom: current.MAIL_FROM || "",
+  mediaDriver: current.MEDIA_DRIVER || "local",
+  s3Endpoint: current.S3_ENDPOINT || "",
+  s3Region: current.S3_REGION || "",
+  s3Bucket: current.S3_BUCKET || "",
+  s3Key: current.S3_KEY || "",
+  s3Secret: current.S3_SECRET || "",
+  s3PublicBase: current.S3_PUBLIC_BASE || "",
+  port: current.PORT || String(defaultPort),
+});
+const set = (patch) => state({ ...state(), ...patch });
+const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
+const status = signal("");
+
+// selected add-ons, dependencies expanded, in display order
+function effective(s) {
+  const want = new Set();
+  const visit = (n) => {
+    if (want.has(n)) return;
+    want.add(n);
+    (depsOf[n] || []).forEach(visit);
+  };
+  for (const n of order) if (s.addons[n]) visit(n);
+  return order.filter((n) => want.has(n));
+}
+
+const clean = (v) => String(v).replace(/[\r\n]/g, "").trim(); // one value per line; no injection
+function genEnv(s) {
+  const eff = effective(s);
+  const out = [`VOLT_ADDONS=${eff.join(",")}`, `PORT=${clean(s.port)}`];
+  if (eff.includes("db")) {
+    out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
+    if (s.dbDriver === "mongodb") {
+      out.push(`MONGODB_URI=${clean(s.mongoUri)}`);
+      if (s.mongoDb) out.push(`MONGODB_DATABASE=${clean(s.mongoDb)}`);
+    } else if (s.dbDriver === "mysql" || s.dbDriver === "postgres") {
+      out.push(`DATABASE_URL=${clean(s.dbUrl)}`);
+    }
+  }
+  if (eff.includes("mailer")) {
+    if (s.smtpUrl) out.push(`SMTP_URL=${clean(s.smtpUrl)}`);
+    else out.push("# SMTP_URL=        # unset → emails print to the console");
+    if (s.mailFrom) out.push(`MAIL_FROM=${clean(s.mailFrom)}`);
+  }
+  if (eff.includes("media")) {
+    out.push(`MEDIA_DRIVER=${clean(s.mediaDriver)}`);
+    if (s.mediaDriver === "s3") {
+      out.push(`S3_ENDPOINT=${clean(s.s3Endpoint)}`);
+      out.push(`S3_REGION=${clean(s.s3Region)}`);
+      out.push(`S3_BUCKET=${clean(s.s3Bucket)}`);
+      out.push(`S3_KEY=${clean(s.s3Key)}`);
+      out.push(`S3_SECRET=${clean(s.s3Secret)}`);
+      if (s.s3PublicBase) out.push(`S3_PUBLIC_BASE=${clean(s.s3PublicBase)}`);
+    }
+  }
+  return out.join("\n") + "\n";
+}
+const env = computed(() => genEnv(state()));
+const eff = computed(() => effective(state()));
+// Memoized, primitive-valued derivations: a conditional section keyed on these
+// only re-renders when the *discriminant* changes — not on every keystroke in a
+// field it contains (which would recreate the input and drop focus).
+const dbDriver = computed(() => state().dbDriver);
+const mediaDriver = computed(() => state().mediaDriver);
+const hasDb = computed(() => eff().includes("db"));
+const hasMailer = computed(() => eff().includes("mailer"));
+const hasMedia = computed(() => eff().includes("media"));
+
+async function testDb() {
+  const s = state();
+  const e = { DB_DRIVER: s.dbDriver };
+  if (s.dbDriver === "mongodb") {
+    e.MONGODB_URI = s.mongoUri;
+    e.MONGODB_DATABASE = s.mongoDb;
+  } else if (s.dbDriver === "mysql" || s.dbDriver === "postgres") {
+    e.DATABASE_URL = s.dbUrl;
+  }
+  status("Testing connection…");
+  try {
+    const r = await (await fetch("/setup/test-db", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ env: e }) })).json();
+    status(r.ok ? `✓ Connected (${r.driver}).` : `✗ ${r.error}`);
+  } catch {
+    status("Network error testing connection.");
+  }
+}
+
+async function apply() {
+  status("Saving…");
+  let d;
+  try {
+    d = await (await fetch("/setup/apply", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ addons: eff(), env: env() }) })).json();
+  } catch {
+    return status("Network error.");
+  }
+  if (!d.ok) return status("Error: " + d.error);
+  status(d.installing?.length ? `Installing ${d.installing.join(", ")}, then starting…` : "Starting the app…");
+  const target = `http://localhost:${d.port}/`;
+  const tries = d.installing?.length ? 90 : 20; // npm install can take a while
+  const go = async (n) => {
+    try {
+      await fetch(target, { mode: "no-cors" });
+      location.href = target;
+    } catch {
+      if (n > 0) setTimeout(() => go(n - 1), 500);
+      else location.href = target;
+    }
+  };
+  setTimeout(() => go(tries), 600);
+}
+
+// --- views ---
+const field = (label, key, placeholder = "") =>
+  html`<div class="mb-2">
+    <label class="form-label small mb-1">${label}</label>
+    <input class="form-control" placeholder=${placeholder} value=${() => state()[key]} oninput=${(e) => set({ [key]: e.target.value })} />
+  </div>`;
+
+const addonRow = (a) =>
+  html`<div class="form-check mb-2">
+    <input class="form-check-input" type="checkbox" id=${"x-" + a.name} checked=${() => state().addons[a.name]} onchange=${() => toggle(a.name)} />
+    <label class="form-check-label" for=${"x-" + a.name}>
+      <span class="accent">${a.name}</span>${a.dependsOn?.length ? html` <span class="text-muted small">(needs ${a.dependsOn.join(", ")})</span>` : ""}
+      <div class="small text-muted">${a.description}</div>
+    </label>
+  </div>`;
+
+const dbSettings = () =>
+  html`<div class="mb-2">
+      <label class="form-label small mb-1">Database (DB_DRIVER)</label>
+      <select class="form-select" value=${() => dbDriver()} onchange=${(e) => set({ dbDriver: e.target.value })}>
+        <option value="memory">memory (no setup)</option>
+        <option value="mongodb">mongodb</option>
+        <option value="mysql">mysql</option>
+        <option value="postgres">postgres</option>
+      </select>
+    </div>
+    ${() =>
+      dbDriver() === "mongodb"
+        ? html`${field("MONGODB_URI", "mongoUri", "mongodb://user:pass@host:27017/db")}${field("MONGODB_DATABASE", "mongoDb", "db")}`
+        : dbDriver() === "mysql" || dbDriver() === "postgres"
+          ? field("DATABASE_URL", "dbUrl", dbDriver() + "://user:pass@host/db")
+          : null}
+    ${() => (dbDriver() !== "memory" ? html`<button class="btn btn-sm btn-outline-secondary mb-2" onclick=${testDb}>Test connection</button>` : null)}`;
+
+const mediaSettings = () =>
+  html`<div class="mb-2">
+      <label class="form-label small mb-1">Media storage (MEDIA_DRIVER)</label>
+      <select class="form-select" value=${() => mediaDriver()} onchange=${(e) => set({ mediaDriver: e.target.value })}>
+        <option value="local">local (disk)</option>
+        <option value="s3">s3 — AWS S3 / DigitalOcean Spaces</option>
+      </select>
+    </div>
+    ${() =>
+      mediaDriver() === "s3"
+        ? html`${field("S3_ENDPOINT", "s3Endpoint", "https://nyc3.digitaloceanspaces.com")}${field("S3_REGION", "s3Region", "us-east-1")}${field("S3_BUCKET", "s3Bucket", "my-space")}${field("S3_KEY", "s3Key", "access key")}${field("S3_SECRET", "s3Secret", "secret key")}${field("S3_PUBLIC_BASE (optional CDN base)", "s3PublicBase", "https://cdn.example.com")}`
+        : null}`;
+
+mount(
+  "#app",
+  available.length
+    ? html`<div class="card-x p-4 mb-3">
+        <h2 class="h6 mb-3">Features</h2>
+        ${available.map(addonRow)}
+        <p class="small text-muted mb-0">Enabling a feature wires its backend automatically. Frontend UI (login form, chat) is yours to build — or start from <code>--template guestbook</code>.</p>
+      </div>`
+    : null,
+  html`<div class="card-x p-4 mb-3">
+    <h2 class="h6 mb-3">Settings</h2>
+    ${field("PORT", "port", String(defaultPort))}
+    ${() => (hasDb() ? dbSettings() : null)}
+    ${() => (hasMailer() ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
+    ${() => (hasMedia() ? mediaSettings() : null)}
+  </div>`,
+  html`<div class="card-x p-4 mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-2">
+      <h2 class="h6 mb-0">.env</h2>
+      <button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button>
+    </div>
+    <pre class="mb-0" style="background:#0b0d11;border:1px solid #232a36;border-radius:10px;padding:12px;color:#cfe3ff;white-space:pre-wrap">${env}</pre>
+  </div>`,
+  () => (status() ? html`<p class="small accent">${status}</p>` : null),
+);

package/templates/blog/setup/studio.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="/favicon.webp" />
+  <title>Volt Studio</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <style>
+    body { background: #0f1115; color: #e7e9ee; }
+    .accent { color: #ffd24a; }
+    .card-x { background: #161a22; border: 1px solid #232a36; border-radius: 14px; }
+  </style>
+</head>
+<body>
+  <main class="container py-5" style="max-width: 820px;">
+    <header class="mb-4">
+      <h1 class="h3"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Volt Studio</span> <small class="text-muted">data browser</small></h1>
+      <p class="text-muted mb-0">Browse the database in your <code>.env</code>. Disposable &amp; localhost-only — close the terminal when done.</p>
+    </header>
+    <div id="app"></div>
+  </main>
+  <script type="module">
+    import { mount } from "/volt.js";
+    import { dbAdminPanel } from "/db-admin-ui.js";
+    mount("#app", dbAdminPanel());
+  </script>
+</body>
+</html>

package/templates/blog/views/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>My Volt Blog</title>
+  <meta name="description" content="A blog built with Volt — markdown posts, a theme, and real SEO." />
+  <link rel="icon" href="/favicon.webp" />
+  <!-- the same stylesheet the posts/pages use, so the home matches the theme -->
+  <link rel="stylesheet" href="/_theme.css" />
+</head>
+<body>
+  <header class="site"><div class="wrap"><a class="brand" href="/"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> My Volt Blog</a>
+    <nav><a href="/blog">Blog</a><a href="/about">About</a><a href="/feed.xml">RSS</a></nav></div></header>
+  <main><div class="wrap">
+    <h1>A blog built with Volt</h1>
+    <p>Markdown posts in <code>posts/</code>, pages in <code>pages/</code>, one theme in
+    <code>pages/_theme.js</code>. No build step, no database, no admin to attack.</p>
+    <p><a href="/blog">Read the blog →</a></p>
+    <p style="opacity:.7;font-size:.95rem">Edit any <code>.md</code> file and refresh. Add posts, change the theme,
+    or run <code>npm run dev -- --edit</code> to add features (auth, a database, the WYSIWYG editor).</p>
+  </div></main>
+  <footer class="site"><div class="wrap">My Volt Blog — built with Volt</div></footer>
+</body>
+</html>

package/templates/default/server.js

@@ -225,6 +225,8 @@ function startSetup() {
   const assets = {
     "/setup.js": ["text/javascript; charset=utf-8", fs.readFileSync(path.join(__dirname, "setup", "setup.js"))],
     "/volt.js": ["text/javascript; charset=utf-8", fs.readFileSync(path.join(__dirname, "public", "volt.js"))],
+    "/logo.webp": ["image/webp", fs.readFileSync(path.join(__dirname, "public", "logo.webp"))],
+    "/favicon.webp": ["image/webp", fs.readFileSync(path.join(__dirname, "public", "favicon.webp"))],
   };
   const indexHtml = fs.readFileSync(path.join(__dirname, "setup", "index.html"));
 
@@ -381,6 +383,8 @@ async function startStudio() {
   const visible = (n) => n && !HIDDEN_COLLECTIONS.has(n);
   const assets = {
     "/volt.js": ["text/javascript; charset=utf-8", fs.readFileSync(path.join(__dirname, "public", "volt.js"))],
+    "/logo.webp": ["image/webp", fs.readFileSync(path.join(__dirname, "public", "logo.webp"))],
+    "/favicon.webp": ["image/webp", fs.readFileSync(path.join(__dirname, "public", "favicon.webp"))],
     "/db-admin-ui.js": ["text/javascript; charset=utf-8", fs.readFileSync(path.join(ADDONS_DIR, "db", "files", "public", "db-admin-ui.js"))],
   };
   const studioHtml = fs.readFileSync(path.join(__dirname, "setup", "studio.html"));

package/templates/default/setup/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="/favicon.webp" />
   <title>Set up your Volt app</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
   <style>
@@ -17,7 +18,7 @@
 <body>
   <main class="container py-5" style="max-width: 640px;">
     <header class="mb-4">
-      <h1 class="h3"><span class="accent">⚡ Set up your Volt app</span></h1>
+      <h1 class="h3"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Set up your Volt app</span></h1>
       <p class="text-muted mb-0">Fill these in and the app starts. This page is disposable — it disappears once you click Apply. Re-open it anytime with <code>npm run dev -- --edit</code>.</p>
     </header>
     <div id="app"></div>

package/templates/default/setup/studio.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="/favicon.webp" />
   <title>Volt Studio</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
   <style>
@@ -14,7 +15,7 @@
 <body>
   <main class="container py-5" style="max-width: 820px;">
     <header class="mb-4">
-      <h1 class="h3"><span class="accent">⚡ Volt Studio</span> <small class="text-muted">data browser</small></h1>
+      <h1 class="h3"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Volt Studio</span> <small class="text-muted">data browser</small></h1>
       <p class="text-muted mb-0">Browse the database in your <code>.env</code>. Disposable &amp; localhost-only — close the terminal when done.</p>
     </header>
     <div id="app"></div>

package/templates/default/views/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="/favicon.webp" />
   <title>Volt — signals, no build, hot reload</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
   <style>
@@ -14,12 +15,13 @@
     .form-control:focus { background: #0f1115; color: #e7e9ee; border-color: #ffd24a; box-shadow: none; }
     .list-group-item { background: #0f1115; color: #e7e9ee; border-color: #232a36; }
     a { color: #ffd24a; }
+    .text-muted { color: #9aa4b2 !important; } /* readable muted on the dark bg */
   </style>
 </head>
 <body>
   <main class="container py-5" style="max-width: 720px;">
     <header class="text-center mb-5">
-      <h1 class="brand display-5"><span class="accent">⚡ Volt</span></h1>
+      <h1 class="brand display-5"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Volt</span></h1>
       <p class="text-muted mb-0">
         Fine-grained signals · no JSX · no virtual DOM · live hot reload.
         Edit <code>public/app.js</code> and save — this page reloads itself.
@@ -29,10 +31,7 @@
     <div id="app"></div>
 
     <footer class="text-center text-muted mt-5">
-      <small>Both cards run on the same signal engine — one uses <code>el()</code>, the other <code>html``</code>.</small>
-      <div class="mt-2">
-        <small><a href="https://github.com/MIR-2025/volt#readme" target="_blank" rel="noopener">📖 How to build a Volt app →</a></small>
-      </div>
+      <small><a href="https://github.com/MIR-2025/volt#readme" target="_blank" rel="noopener">📖 How to build a Volt app →</a></small>
     </footer>
   </main>
 

package/templates/docs/Dockerfile

@@ -0,0 +1,20 @@
+# Volt app — production container. Runs on Render, Fly.io, Railway, DO App
+# Platform, and any container host. They handle the server, DNS, and TLS; you
+# just set config as env vars.
+#
+# Configure via the platform's env vars (NOT a committed .env):
+#   VOLT_ADDONS=db,auth,...      DB_DRIVER=...   MONGODB_URI / DATABASE_URL
+#   MEDIA_DRIVER=s3   S3_ENDPOINT/S3_REGION/S3_BUCKET/S3_KEY/S3_SECRET   etc.
+#
+# Tip: run the local wizard first (`npm run dev`) so the add-on packages are
+# saved into package.json; commit package.json, then deploy and set the same
+# config as env vars here. NODE_ENV=production makes the app boot straight up
+# (no setup wizard).
+FROM node:22-alpine
+WORKDIR /app
+ENV NODE_ENV=production
+COPY package*.json ./
+RUN npm install --omit=dev
+COPY . .
+EXPOSE 8080
+CMD ["node", "server.js"]

package/templates/docs/Procfile

@@ -0,0 +1 @@
+web: node server.js

package/templates/docs/README.md

@@ -0,0 +1,24 @@
+# Volt docs
+
+A documentation site built with [Volt](https://voltjs.com) — markdown pages in a sidebar layout. No build step, no database.
+
+```
+npm install
+npm run dev        # → http://localhost:26629  (redirects to /getting-started)
+```
+
+## Where things live
+
+| Path | What |
+|---|---|
+| `pages/*.md` | Each becomes a doc page at `/<slug>` |
+| `pages/_theme.js` | The sidebar layout + CSS. Add pages to the `NAV` list here |
+| `views/index.html` | Redirects `/` to the first page |
+| `.env` | `VOLT_ADDONS=pages`, `SITE_NAME` |
+
+## Add a page
+
+1. Create `pages/my-topic.md` with front-matter (`title`, `description`).
+2. Add `["/my-topic", "My topic"]` to `NAV` in `pages/_theme.js`.
+
+Run `npm run dev -- --edit` to add features (auth, a database, the WYSIWYG editor), or set `THEME=<name>` to use a published `volt-theme-*`.

package/templates/docs/dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.git
+.env
+*.log
+npm-debug.log*
+.DS_Store

package/templates/docs/env

@@ -0,0 +1,2 @@
+VOLT_ADDONS=pages
+SITE_NAME=Docs

package/templates/docs/fly.toml

@@ -0,0 +1,15 @@
+# Fly.io — run `fly launch` (it uses the Dockerfile), then set config:
+#   fly secrets set VOLT_ADDONS=db,auth DB_DRIVER=mongodb MONGODB_URI=...
+app = "volt-app"
+
+[build]
+
+[http_service]
+  internal_port = 8080
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+
+[env]
+  PORT = "8080"
+  NODE_ENV = "production"

package/templates/docs/gitignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log*
+.DS_Store
+.env
+*.local

package/templates/docs/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "volt-docs",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A Volt app — no-build, signals-based UI with Socket.io hot reload.",
+  "type": "module",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.22.2",
+    "socket.io": "^4.8.3",
+    "marked": "^18.0.5"
+  }
+}

package/templates/docs/pages/_theme.js

@@ -0,0 +1,32 @@
+// _theme.js — the docs theme: a fixed sidebar + a content column. Add a page in
+// pages/ and link it in NAV below. `css` is served at /_theme.css.
+const NAME = process.env.SITE_NAME || "Docs";
+const NAV = [
+  ["/getting-started", "Getting started"],
+  ["/configuration", "Configuration"],
+  ["/deployment", "Deployment"],
+];
+
+export const css = `:root{--ink:#1f2329;--bg:#fff;--accent:#2557d6;--muted:#5b6573;--line:#e7eaef;--side:#f7f8fa}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 system-ui,-apple-system,sans-serif;display:flex;min-height:100vh}
+aside{width:240px;flex:0 0 240px;background:var(--side);border-right:1px solid var(--line);padding:1.5rem}
+aside .brand{display:flex;align-items:center;gap:.4rem;font-weight:800;color:var(--ink);text-decoration:none;margin-bottom:1rem}
+aside nav a{display:block;color:var(--muted);text-decoration:none;padding:.3rem 0}
+aside nav a:hover{color:var(--accent)}
+main{flex:1;min-width:0;padding:2.5rem;max-width:780px}
+h1,h2,h3{line-height:1.25}
+a{color:var(--accent)}
+pre{background:#0b0d11;color:#cfe3ff;padding:1rem;border-radius:8px;overflow:auto}
+:not(pre)>code{background:#eef1f5;padding:.1em .35em;border-radius:5px}
+img{max-width:100%}
+@media(max-width:700px){body{flex-direction:column}aside{width:auto;flex:none;border-right:none;border-bottom:1px solid var(--line)}}`;
+
+export function layout({ title, head, content }) {
+  const nav = NAV.map(([href, label]) => `<a href="${href}">${label}</a>`).join("");
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${title}</title>${head}<link rel="icon" href="/favicon.webp" /><link rel="stylesheet" href="/_theme.css" /></head><body>
+<aside><a class="brand" href="/getting-started"><img src="/logo.webp" alt="" style="height:1.1em" /> ${NAME}</a><nav>${nav}</nav></aside>
+<main>${content}</main>
+</body></html>`;
+}

package/templates/docs/pages/configuration.md

@@ -0,0 +1,13 @@
+---
+title: Configuration
+description: Everything is environment variables.
+---
+# Configuration
+
+Volt is configured entirely with environment variables (no config-in-database):
+
+- `SITE_NAME` — shown in the sidebar.
+- `VOLT_ADDONS` — which features are on (here: `pages`).
+- `THEME` — a published `volt-theme-*`, or use the local `pages/_theme.js`.
+
+In dev these live in `.env`; in production set them as platform env vars.

package/templates/docs/pages/deployment.md

@@ -0,0 +1,9 @@
+---
+title: Deployment
+description: Ship it anywhere Node runs.
+---
+# Deployment
+
+This template ships a `Dockerfile`, `render.yaml`, `fly.toml`, and a `Procfile`.
+Set `NODE_ENV=production` (and your env vars) and it boots straight into the app
+— no wizard, no `.env` needed.

package/templates/docs/pages/getting-started.md

@@ -0,0 +1,14 @@
+---
+title: Getting started
+description: Your first five minutes with this docs site.
+---
+# Getting started
+
+Every page here is a markdown file in `pages/`, served at `/<slug>` inside the
+docs theme (`pages/_theme.js`). To add a page, drop a `.md` file and link it in
+the sidebar (`NAV` in the theme).
+
+```
+npm run dev        # start
+npm run dev -- --edit   # wizard: add auth, a database, the editor…
+```

package/templates/docs/public/volt-ssr.js

@@ -0,0 +1,63 @@
+// volt-ssr.js — server-side rendering for Volt. Renders the same html`` markup,
+// h() elements, and signal values to an HTML string in Node (no DOM), so a Volt
+// app can be fully server-rendered for SEO and hydrate interactive islands with
+// volt.js on the client.
+//
+//   import { html, h, raw, renderToString } from "./volt-ssr.js";
+//   renderToString(html`<p>${name}</p>`)   // → "<p>Ada</p>" (name is escaped)
+//
+// Authoring matches the client: html`` interpolations render as escaped text;
+// nest html``/h() nodes for structure; use raw() for trusted pre-built HTML.
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+// trusted, pre-rendered HTML — emitted verbatim. Use only for content you control.
+export const raw = (s) => ({ __raw: String(s) });
+
+// tagged-template markup; the literal chunks are trusted, ${values} are escaped.
+export const html = (strings, ...values) => ({ __tpl: true, strings, values });
+
+const isNode = (x) => x && typeof x === "object" && (x.__tpl || x.__raw || x.__el);
+
+// hyperscript element: h(tag, props?, ...children)
+export function h(tag, props, ...children) {
+  if (props === undefined || props === null || isNode(props) || Array.isArray(props) || typeof props !== "object") {
+    if (props !== undefined && props !== null) children.unshift(props);
+    props = {};
+  }
+  return { __el: true, tag, props, children };
+}
+
+const read = (v) => (typeof v === "function" ? v() : v); // resolve signals/thunks (once)
+
+function attrs(props) {
+  let out = "";
+  for (const [k, rawVal] of Object.entries(props)) {
+    if (k === "children" || k.startsWith("on")) continue; // event handlers don't SSR
+    const v = read(rawVal);
+    if (v == null || v === false) continue;
+    const name = k === "className" ? "class" : k;
+    out += v === true ? ` ${name}` : ` ${name}="${esc(v)}"`;
+  }
+  return out;
+}
+
+export function renderToString(node) {
+  const v = read(node);
+  if (v == null || v === false || v === true) return "";
+  if (typeof v === "string" || typeof v === "number") return esc(v);
+  if (v.__raw != null) return v.__raw;
+  if (Array.isArray(v)) return v.map(renderToString).join("");
+  if (v.__tpl) {
+    let out = v.strings[0];
+    for (let i = 0; i < v.values.length; i++) out += renderToString(v.values[i]) + v.strings[i + 1];
+    return out;
+  }
+  if (v.__el) {
+    if (typeof v.tag === "function") return renderToString(v.tag({ ...v.props, children: v.children }));
+    const open = `<${v.tag}${attrs(v.props)}>`;
+    return VOID.has(v.tag) ? open : `${open}${v.children.map(renderToString).join("")}</${v.tag}>`;
+  }
+  return esc(String(v));
+}