create-volt 0.38.0 → 0.39.1

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to `create-volt` are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [0.39.1] - 2026-06-30
+
+### Fixed
+- **Scaffolding was broken in 0.37.0–0.39.0.** The bundled `themes/` dir is
+  copied into new apps, but it was never added to the package `files`, so it was
+  missing from the npm tarball and `npm create volt` crashed with
+  `ENOENT … create-volt/themes`. Added `themes` to `files`, and guarded the
+  bundled-dir copy (`addons`/`themes`) so a missing dir is skipped, never fatal.
+  Verified by scaffolding from the packed tarball.
+
+## [0.39.0] - 2026-06-29
+
+### Fixed
+- **Hot reload now reaches content pages.** Pages/posts are server-rendered HTML
+  that dont load `volt.js`, so the 0.38 morph client never ran on them. In dev,
+  the `pages`/`posts` add-ons now inject the hot-reload client (socket.io +
+  `volt.js`) into every served page. Verified with Chromium: editing a post
+  morphs the DOM in place — scroll position and page state preserved, no full
+  reload. Nothing is injected in production.
+
 ## [0.38.0] - 2026-06-29
 
 ### Added
@@ -508,6 +528,8 @@ All notable changes to `create-volt` are documented here. The format follows
   watching and full-page hot reload. Supports `--skip-install` and `--force`,
   and auto-detects npm / pnpm / yarn / bun for the install step.
 
+[0.39.1]: https://github.com/MIR-2025/volt/releases/tag/v0.39.1
+[0.39.0]: https://github.com/MIR-2025/volt/releases/tag/v0.39.0
 [0.38.0]: https://github.com/MIR-2025/volt/releases/tag/v0.38.0
 [0.37.0]: https://github.com/MIR-2025/volt/releases/tag/v0.37.0
 [0.36.0]: https://github.com/MIR-2025/volt/releases/tag/v0.36.0

package/addons/pages/files/lib/pages.js

@@ -128,6 +128,13 @@ const DEV = process.env.NODE_ENV !== "production";
 // a restart (ESM caches a given URL forever); unchanged files keep the same URL.
 const freshUrl = (f) => pathToFileURL(f).href + (DEV ? "?t=" + fs.statSync(f).mtimeMs : "");
 
+// In dev, inject the hot-reload client into served pages — content pages don't
+// otherwise load volt.js, so they'd never receive reload/morph events. socket.io
+// serves its client at /socket.io/socket.io.js; volt.js (a module) runs the
+// hot-reload IIFE. Nothing is injected in production.
+const HOT = DEV ? '\n<script src="/socket.io/socket.io.js"></script><script type="module" src="/volt.js"></script>\n' : "";
+export const injectHot = (html) => (!HOT ? html : html.includes("</body>") ? html.replace("</body>", HOT + "</body>") : html + HOT);
+
 export async function loadTheme(dir, env) {
   const wrap = (m) => {
     const layout = m && (m.layout || m.default);
@@ -182,7 +189,7 @@ export async function pagesRouter({ dir }) {
     const content = meta.format === "html" ? body : marked.parse(body);
     const m = { ...meta, title: meta.title || slug };
     const { layout } = await getTheme();
-    res.type("html").send(layout({ title: m.title, head: metaHead(m), content, meta: m }));
+    res.type("html").send(injectHot(layout({ title: m.title, head: metaHead(m), content, meta: m })));
   });
   return r;
 }

package/addons/posts/files/lib/posts.js

@@ -6,7 +6,7 @@ import fs from "node:fs";
 import path from "node:path";
 // express + marked are imported lazily in postsRouter() so the pure helpers load
 // without those deps. Theme + SEO come from the pages add-on (a dependency).
-import { parseFrontMatter, isSafeSlug, metaHead, themeResolver } from "../../../pages/files/lib/pages.js";
+import { parseFrontMatter, isSafeSlug, metaHead, themeResolver, injectHot } from "../../../pages/files/lib/pages.js";
 
 const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
 const slugify = (s) => String(s).toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
@@ -120,7 +120,7 @@ export async function postsRouter({ dir, themeDir }) {
   const render = async ({ title, content, meta = {} }) => {
     const m = { ...meta, title };
     const { layout } = await getTheme();
-    return layout({ title, head: metaHead(m), content, meta: m });
+    return injectHot(layout({ title, head: metaHead(m), content, meta: m }));
   };
   const r = express.Router();
 

package/index.js

@@ -465,8 +465,12 @@ if (fs.existsSync(shippedDockerignore)) {
 // Bundle the add-on sources so the app's setup wizard can enable them later
 // (only for templates that ship the wizard, i.e. have a setup/ dir).
 if (fs.existsSync(path.join(targetDir, "setup"))) {
-  fs.cpSync(path.join(__dirname, "addons"), path.join(targetDir, ".volt", "addons"), { recursive: true });
-  fs.cpSync(path.join(__dirname, "themes"), path.join(targetDir, ".volt", "themes"), { recursive: true }); // bundled themes the wizard can pick
+  // copy each bundled dir into .volt/ — guard existsSync so a missing dir (e.g.
+  // an incomplete install) is skipped rather than crashing the scaffold.
+  for (const name of ["addons", "themes"]) {
+    const src = path.join(__dirname, name);
+    if (fs.existsSync(src)) fs.cpSync(src, path.join(targetDir, ".volt", name), { recursive: true });
+  }
 }
 
 // --- stamp the project name into package.json ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.38.0",
+  "version": "0.39.1",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {
@@ -11,6 +11,7 @@
     "lib",
     "templates",
     "addons",
+    "themes",
     "CHANGELOG.md"
   ],
   "engines": {

package/themes/classic/index.js

@@ -0,0 +1,28 @@
+// volt-theme-classic — a structured site theme: top nav bar + card content.
+const NAME = process.env.SITE_NAME || "Home";
+
+export const css = `:root{--ink:#1f2329;--bg:#f4f5f7;--card:#fff;--accent:#2557d6;--muted:#5b6573;--line:#e2e5ea}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 system-ui,sans-serif}
+header.site{background:var(--card);border-bottom:1px solid var(--line)}
+header.site .bar{display:flex;align-items:center;gap:1rem;max-width:840px;margin:0 auto;padding:.9rem 1.2rem}
+header.site a.brand{font-weight:800;color:var(--ink);text-decoration:none;font-size:1.15rem}
+header.site nav{margin-left:auto}
+header.site nav a{color:var(--muted);text-decoration:none;margin-left:1rem}
+header.site nav a:hover{color:var(--accent)}
+main .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2rem;max-width:840px;margin:2rem auto}
+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%}
+footer.site{text-align:center;color:var(--muted);font-size:.9rem;padding:2rem 1rem}`;
+
+export function layout({ title, head, content }) {
+  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="stylesheet" href="/_theme.css" /></head><body>
+<header class="site"><div class="bar"><a class="brand" href="/">${NAME}</a><nav><a href="/">Home</a></nav></div></header>
+<main><div class="card">${content}</div></main>
+<footer class="site">${NAME} — built with Volt</footer>
+</body></html>`;
+}

package/themes/classic/meta.json

@@ -0,0 +1,3 @@
+{
+  "description": "Volt theme: Classic — a structured site with a top nav bar and card content."
+}

package/themes/midnight/index.js

@@ -0,0 +1,27 @@
+// volt-theme-midnight — a dark, modern, sans-serif theme.
+const NAME = process.env.SITE_NAME || "Home";
+
+export const css = `:root{--ink:#e6e8ee;--bg:#0e1116;--accent:#7c9cff;--muted:#9aa4b2;--line:#222831}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 system-ui,-apple-system,sans-serif}
+.wrap{max-width:760px;margin:0 auto;padding:0 1.2rem}
+header.site{position:sticky;top:0;background:rgba(14,17,22,.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:.9rem 0}
+header.site a{color:var(--accent);font-weight:800;text-decoration:none;letter-spacing:-.02em}
+main{padding:2rem 0 3rem}
+h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
+a{color:var(--accent)}
+pre{background:#0a0d12;border:1px solid var(--line);padding:1rem;border-radius:10px;overflow:auto;color:#cfe3ff}
+:not(pre)>code{background:rgba(124,156,255,.15);padding:.1em .35em;border-radius:5px;color:var(--accent)}
+blockquote{border-left:3px solid var(--accent);margin:1.2rem 0;padding:.2rem 1rem;color:var(--muted)}
+img{max-width:100%;border-radius:10px}
+table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--line);padding:.5rem .7rem}
+footer.site{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0;color:var(--muted);font-size:.9rem}`;
+
+export function layout({ title, head, content }) {
+  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="stylesheet" href="/_theme.css" /></head><body>
+<header class="site"><div class="wrap"><a href="/">${NAME}</a></div></header>
+<main><div class="wrap">${content}</div></main>
+<footer class="site"><div class="wrap">${NAME} — built with Volt</div></footer>
+</body></html>`;
+}

package/themes/midnight/meta.json

@@ -0,0 +1,3 @@
+{
+  "description": "Volt theme: Midnight — dark, modern, sans-serif with a sticky header."
+}

package/themes/paper/index.js

@@ -0,0 +1,26 @@
+// volt-theme-paper — a light, serif, reading-focused theme.
+const NAME = process.env.SITE_NAME || "Home";
+
+export const css = `:root{--ink:#222;--bg:#fbfaf7;--accent:#9a3b2e;--muted:#6b6b6b}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.75 Georgia,"Times New Roman",serif}
+.wrap{max-width:680px;margin:0 auto;padding:0 1.2rem}
+header.site{padding:2rem 0 1rem;border-bottom:1px solid #e7e3da}
+header.site a{color:var(--ink);text-decoration:none;font-weight:700;font-size:1.3rem}
+main{padding:2rem 0 3rem}
+h1,h2,h3{font-weight:700;line-height:1.2}
+a{color:var(--accent)}
+pre{background:#f1ede4;padding:1rem;border-radius:6px;overflow:auto;font:14px/1.5 ui-monospace,monospace}
+:not(pre)>code{background:#f1ede4;padding:.1em .35em;border-radius:4px;font-size:.9em}
+blockquote{border-left:3px solid var(--accent);margin:1.5rem 0;padding:.2rem 1.2rem;color:var(--muted);font-style:italic}
+img{max-width:100%;border-radius:6px}
+footer.site{border-top:1px solid #e7e3da;margin-top:3rem;padding:1.5rem 0;color:var(--muted);font-size:.9rem}`;
+
+export function layout({ title, head, content }) {
+  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="stylesheet" href="/_theme.css" /></head><body>
+<header class="site"><div class="wrap"><a href="/">${NAME}</a></div></header>
+<main><div class="wrap">${content}</div></main>
+<footer class="site"><div class="wrap">${NAME} — built with Volt</div></footer>
+</body></html>`;
+}

package/themes/paper/meta.json

@@ -0,0 +1,3 @@
+{
+  "description": "Volt theme: Paper — light, serif, reading-focused (blogs, essays, docs)."
+}