create-volt 0.32.0 → 0.33.0

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.33.0] - 2026-06-29
+
+### Added
+- **Two content templates** showcasing the pages/posts/theme system:
+  `--template blog` (markdown posts → /blog, categories, tags, RSS, an /about
+  page, per-post SEO, a serif theme) and `--template docs` (markdown pages in a
+  sidebar layout). Both ship a pre-configured `.env` and boot straight into the
+  app — no wizard.
+
+### Fixed
+- Dark-on-dark text in the default + starter apps: `.text-muted` is overridden to
+  a readable color on the dark background (the demo footer caption was dropped).
+- `posts`: `YYYY-MM-DD` dates render on the correct day (parsed as local, not UTC).
+
 ## [0.32.0] - 2026-06-29
 
 ### Changed
@@ -432,6 +446,7 @@ 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.33.0]: https://github.com/MIR-2025/volt/releases/tag/v0.33.0
 [0.32.0]: https://github.com/MIR-2025/volt/releases/tag/v0.32.0
 [0.31.0]: https://github.com/MIR-2025/volt/releases/tag/v0.31.0
 [0.30.0]: https://github.com/MIR-2025/volt/releases/tag/v0.30.0

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

@@ -17,7 +17,10 @@ const tagsOf = (meta) => String(meta.tags || "").split(",").map((s) => s.trim())
 
 function fmtDate(d) {
   if (!d) return "";
-  const t = new Date(d);
+  // parse YYYY-MM-DD as *local* midnight (new Date("2026-06-28") is UTC → off by a
+  // day in negative-offset zones); fall back to Date() for full timestamps.
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(d).trim());
+  const t = m ? new Date(+m[1], +m[2] - 1, +m[3]) : new Date(d);
   return isNaN(t.getTime()) ? esc(d) : t.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
 }
 

package/index.js

@@ -40,7 +40,7 @@ ${bold("Usage")}
   npx create-volt@latest studio              # browse your data — ephemeral, localhost (like Prisma Studio)
 
 ${bold("Options")}
-  --template <name>  Template: default | starter | guestbook  (default: default)
+  --template <name>  Template: default | blog | docs | starter | guestbook  (default: default)
   --port <number>    Dev port for the app (default: derived from today's date)
   --skip-install   Don't run the package manager install step
   --no-git         Don't initialize a git repository

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {

package/templates/blog/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/blog/Procfile

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

package/templates/blog/README.md

@@ -0,0 +1,38 @@
+# Volt blog
+
+A blog built with [Volt](https://voltjs.com) — markdown posts, one theme, real SEO. No build step, no database, no admin to attack.
+
+```
+npm install
+npm run dev        # → http://localhost:26629
+```
+
+## Where things live
+
+| Path | What |
+|---|---|
+| `posts/*.md` | Blog posts → `/blog`, `/blog/<slug>`, `/category/<name>`, `/tag/<name>`, `/feed.xml` |
+| `pages/*.md` | Standalone pages (e.g. `pages/about.md` → `/about`) |
+| `pages/_theme.js` | The site theme (layout + CSS served at `/_theme.css`) |
+| `views/index.html` | The home page |
+| `.env` | `VOLT_ADDONS=pages,posts`, `SITE_NAME`, optional `SITE_URL` (absolute RSS/canonical) |
+
+## Write a post
+
+Drop a file in `posts/`:
+
+```
+---
+title: My Post
+date: 2026-07-01          # or a 2026-07-01-my-post.md filename prefix
+author: You
+category: Guides
+tags: volt, markdown
+description: A short excerpt + og:description.
+---
+# My Post
+
+Markdown body. Single posts get Open Graph + an Article JSON-LD automatically.
+```
+
+Set `draft: true` to hide a post. Run `npm run dev -- --edit` to add features (auth, a database, the WYSIWYG editor).

package/templates/blog/dockerignore

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

package/templates/blog/env

@@ -0,0 +1,3 @@
+VOLT_ADDONS=pages,posts
+SITE_NAME=My Volt Blog
+# SITE_URL=https://example.com   # set for absolute RSS/canonical links

package/templates/blog/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/blog/gitignore

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

package/templates/blog/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "volt-blog",
+  "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/blog/pages/_theme.js

@@ -0,0 +1,35 @@
+// _theme.js — the blog theme. layout() wraps every page + post; `css` is served
+// at /_theme.css and shared with the WYSIWYG editor preview. Edit freely.
+const NAME = process.env.SITE_NAME || "My Volt Blog";
+
+export const css = `:root{--ink:#1f2329;--bg:#fbfaf8;--accent:#2557d6;--muted:#6b7280;--line:#e7e3da}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 Georgia,"Times New Roman",serif}
+.wrap{max-width:720px;margin:0 auto;padding:0 1.2rem}
+header.site{border-bottom:1px solid var(--line);padding:1.2rem 0;margin-bottom:2rem}
+header.site .wrap{display:flex;align-items:baseline;gap:1.2rem;font-family:system-ui,sans-serif}
+header.site a.brand{font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none}
+header.site nav{margin-left:auto;display:flex;gap:1.2rem}
+header.site nav a{color:var(--muted);text-decoration:none}
+header.site nav a:hover{color:var(--accent)}
+main{padding-bottom:3rem}
+h1,h2,h3{line-height:1.2}
+a{color:var(--accent)}
+.post-meta{font-family:system-ui,sans-serif}
+.post-tag{font-family:system-ui,sans-serif;font-size:.85rem;background:#eef1f5;color:var(--accent);padding:.1em .5em;border-radius:6px;text-decoration:none}
+pre{background:#f1ede4;padding:1rem;border-radius:8px;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.2rem 0;padding:.2rem 1rem;color:var(--muted);font-style:italic}
+img{max-width:100%;border-radius:8px}
+footer.site{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0;color:var(--muted);font-size:.9rem;font-family:system-ui,sans-serif}`;
+
+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="icon" href="/favicon.webp" /><link rel="stylesheet" href="/_theme.css" />
+<link rel="alternate" type="application/rss+xml" title="${NAME}" href="/feed.xml" /></head><body>
+<header class="site"><div class="wrap"><a class="brand" href="/"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> ${NAME}</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">${content}</div></main>
+<footer class="site"><div class="wrap">${NAME} — built with Volt</div></footer>
+</body></html>`;
+}

package/templates/blog/pages/about.md

@@ -0,0 +1,8 @@
+---
+title: About
+description: About this Volt blog.
+---
+# About
+
+This is a plain **page** (`pages/about.md`), served at `/about`. Pages and posts
+share the same theme and SEO. No database, no admin — just markdown on disk.

package/templates/blog/posts/2026-06-10-themes.md

@@ -0,0 +1,11 @@
+---
+title: Theming your blog
+author: You
+category: Guides
+tags: themes, css
+description: One stylesheet powers the whole site — and the editor preview.
+---
+# Theming your blog
+
+The look lives in `pages/_theme.js` (layout) and is served at `/_theme.css`.
+Change it once and every page, post, and the editor preview update together.

package/templates/blog/posts/2026-06-20-markdown-and-seo.md

@@ -0,0 +1,14 @@
+---
+title: Markdown, with real SEO
+author: You
+category: Guides
+tags: seo, markdown
+description: Per-post Open Graph + an auto Article JSON-LD, from front-matter.
+---
+# Markdown, with real SEO
+
+Every post gets Open Graph + Twitter tags and an **Article JSON-LD** block
+automatically — the SEO a WordPress site needs a plugin for.
+
+Set `image:` in front-matter for a social card, or `SITE_URL` in `.env` for
+absolute links. Categories and tags become `/category/<name>` and `/tag/<name>`.

package/templates/blog/posts/2026-06-28-hello-volt.md

@@ -0,0 +1,17 @@
+---
+title: Hello, Volt
+author: You
+category: Announcements
+tags: volt, getting-started
+description: The first post on a Volt blog — markdown in, themed HTML out.
+---
+# Hello, Volt
+
+This post is a plain markdown file in `posts/`. The **posts** add-on renders it
+at `/blog/hello-volt`, lists it on `/blog`, and adds it to `/feed.xml`.
+
+- Front-matter sets the title, author, category, and tags.
+- The date came from the `2026-06-28-` filename prefix.
+- It renders inside your site **theme** (see `pages/_theme.js`).
+
+Edit this file, save, refresh. That's the whole workflow.

package/templates/blog/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));
+}

package/templates/blog/public/volt.js

@@ -0,0 +1,273 @@
+// volt.js — a tiny, no-build, signals-based UI library.
+//
+// Not React: there is no JSX, no virtual DOM, and no "re-render the whole
+// component" step. State lives in *signals*; reading a signal inside a piece of
+// UI subscribes that exact piece; writing the signal re-runs only those
+// subscribers and touches only the precise text node / attribute that changed.
+//
+// Two ways to author UI, same engine underneath:
+//   1. html``  — tagged-template markup with ${signal} holes
+//   2. el(...)  — imperative DOM helpers with function-children
+// They interoperate freely (drop an el() node into an html`` template, etc.).
+//
+// Public API: signal, computed, effect, el, html, mount.
+
+// ---------------------------------------------------------------------------
+// Reactive core (signals + effects with ownership-based disposal)
+// ---------------------------------------------------------------------------
+
+let activeEffect = null;
+
+// A signal is a function: call with no args to read, one arg to write.
+//   const n = signal(0);  n();      // read  → 0
+//                         n(n()+1); // write → notifies subscribers
+export function signal(value) {
+  const subs = new Set();
+  return function sig(...args) {
+    if (args.length) {
+      const next = args[0];
+      if (next === value) return value; // no-op on identical value
+      value = next;
+      for (const eff of [...subs]) eff.run(); // copy: run() mutates subs
+      return value;
+    }
+    if (activeEffect) {
+      subs.add(activeEffect);
+      activeEffect.deps.add(subs);
+    }
+    return value;
+  };
+}
+
+// effect(fn) runs fn now, tracks every signal it reads, and re-runs it whenever
+// any of those change. Effects created *inside* another effect are owned by it
+// and disposed before each re-run — so dynamic regions clean up after themselves.
+export function effect(fn) {
+  const eff = {
+    deps: new Set(),
+    children: new Set(),
+    parent: activeEffect,
+    disposed: false,
+    run() {
+      // A signal write notifies a *snapshot* of subscribers; a parent re-render
+      // can dispose this effect before its turn in that snapshot — so skip if so.
+      if (eff.disposed) return;
+      disposeChildren(eff);
+      cleanupDeps(eff);
+      const prev = activeEffect;
+      activeEffect = eff;
+      try {
+        fn();
+      } finally {
+        activeEffect = prev;
+      }
+    },
+    dispose() {
+      eff.disposed = true;
+      disposeChildren(eff);
+      cleanupDeps(eff);
+      if (eff.parent) eff.parent.children.delete(eff);
+    },
+  };
+  if (activeEffect) activeEffect.children.add(eff);
+  eff.run();
+  return () => eff.dispose();
+}
+
+// computed(fn) is a read-only derived signal: () => value, auto-updating.
+export function computed(fn) {
+  const s = signal(undefined);
+  effect(() => s(fn()));
+  return () => s();
+}
+
+function cleanupDeps(eff) {
+  for (const subs of eff.deps) subs.delete(eff);
+  eff.deps.clear();
+}
+
+function disposeChildren(eff) {
+  for (const child of [...eff.children]) child.dispose();
+  eff.children.clear();
+}
+
+// ---------------------------------------------------------------------------
+// DOM helpers
+// ---------------------------------------------------------------------------
+
+// el(tag, props?, ...children) → a real DOM element.
+//   props: { onClick: fn }        → event listener
+//          { class: () => ... }   → reactive attribute (function = live)
+//          { id: 'x' }            → static attribute
+//   children: strings, numbers, nodes, arrays, or functions (functions = live)
+export function el(tag, props, ...children) {
+  const node = document.createElement(tag);
+  if (props) {
+    for (const [key, val] of Object.entries(props)) {
+      if (key.startsWith("on") && typeof val === "function") {
+        node.addEventListener(key.slice(2).toLowerCase(), val);
+      } else if (typeof val === "function") {
+        effect(() => setAttr(node, key, val()));
+      } else {
+        setAttr(node, key, val);
+      }
+    }
+  }
+  for (const child of children) appendChild(node, child);
+  return node;
+}
+
+// mount(target, ...children) appends children into target (selector or element).
+// Top-level function-children are reactive too.
+export function mount(target, ...children) {
+  const parent = typeof target === "string" ? document.querySelector(target) : target;
+  for (const child of children) appendChild(parent, child);
+  return parent;
+}
+
+function setAttr(node, name, value) {
+  if (name === "value") {
+    const v = value ?? "";
+    if (node.value !== v) node.value = v; // skip redundant writes — they reset the caret while typing
+    return;
+  }
+  if (name === "checked" || name === "disabled" || name === "selected") {
+    node[name] = !!value && value !== "false";
+    return;
+  }
+  if (value === false || value == null) {
+    node.removeAttribute(name);
+    return;
+  }
+  node.setAttribute(name, value);
+}
+
+// Append a child, making function-children into self-updating dynamic regions
+// bounded by two comment anchors (so they can render text, nodes, or lists).
+function appendChild(parent, child) {
+  if (typeof child === "function") {
+    const start = document.createComment("");
+    const end = document.createComment("");
+    parent.appendChild(start);
+    parent.appendChild(end);
+    effect(() => renderRange(start, end, child()));
+    return;
+  }
+  for (const node of toNodes(child)) parent.appendChild(node);
+}
+
+// Replace everything between the start/end anchors with `value`'s nodes.
+function renderRange(start, end, value) {
+  if (!end.parentNode) return; // range detached (parent re-rendered) — nothing to do
+  let n = start.nextSibling;
+  while (n && n !== end) {
+    const t = n.nextSibling;
+    n.remove();
+    n = t;
+  }
+  for (const node of toNodes(value)) end.parentNode.insertBefore(node, end);
+}
+
+// Normalize any child value into an array of DOM nodes.
+function toNodes(value) {
+  if (value == null || value === false || value === true) return [];
+  if (Array.isArray(value)) return value.flatMap(toNodes);
+  if (value instanceof Node) return [value];
+  return [document.createTextNode(String(value))];
+}
+
+// ---------------------------------------------------------------------------
+// html`` template layer (parses once, wires holes to the same primitives)
+// ---------------------------------------------------------------------------
+
+const PH = (i) => `__voltph${i}__`;
+const PH_RE = /__voltph(\d+)__/g;
+
+// We're inside an open tag (attribute context) if the last '<' comes after the
+// last '>' in the accumulated string.
+function isAttrContext(str) {
+  return str.lastIndexOf("<") > str.lastIndexOf(">");
+}
+
+export function html(strings, ...values) {
+  let acc = "";
+  strings.forEach((str, i) => {
+    acc += str;
+    if (i < values.length) {
+      acc += isAttrContext(acc) ? PH(i) : `<!--${PH(i)}-->`;
+    }
+  });
+
+  const tpl = document.createElement("template");
+  tpl.innerHTML = acc.trim();
+
+  // Bind attribute holes.
+  for (const node of tpl.content.querySelectorAll("*")) {
+    for (const attr of [...node.attributes]) {
+      PH_RE.lastIndex = 0;
+      if (PH_RE.test(attr.value)) bindAttr(node, attr, values);
+    }
+  }
+
+  // Bind node holes (comment placeholders).
+  const walker = document.createTreeWalker(tpl.content, NodeFilter.SHOW_COMMENT);
+  const holes = [];
+  let c;
+  while ((c = walker.nextNode())) {
+    const m = c.data.match(/^__voltph(\d+)__$/);
+    if (m) holes.push([c, Number(m[1])]);
+  }
+  for (const [comment, i] of holes) bindNodeHole(comment, values[i]);
+
+  const nodes = [...tpl.content.childNodes];
+  return nodes.length === 1 ? nodes[0] : nodes;
+}
+
+function bindAttr(node, attr, values) {
+  const name = attr.name;
+  const raw = attr.value;
+  const single = raw.match(/^__voltph(\d+)__$/);
+  node.removeAttribute(name);
+
+  // onX=${fn} → event listener
+  if (name.startsWith("on") && single) {
+    node.addEventListener(name.slice(2).toLowerCase(), values[Number(single[1])]);
+    return;
+  }
+
+  // Otherwise a (possibly mixed) attribute value. If any hole is a function it
+  // is read inside the effect, so the attribute stays live.
+  effect(() => {
+    const text = raw.replace(PH_RE, (_, j) => {
+      const v = values[Number(j)];
+      return String(typeof v === "function" ? v() : v ?? "");
+    });
+    setAttr(node, name, text);
+  });
+}
+
+function bindNodeHole(comment, value) {
+  const start = document.createComment("");
+  comment.parentNode.insertBefore(start, comment); // `comment` becomes the end anchor
+  if (typeof value === "function") {
+    effect(() => renderRange(start, comment, value()));
+  } else {
+    renderRange(start, comment, value);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Hot reload client — listens for the dev server's reload event over Socket.io
+// ---------------------------------------------------------------------------
+
+(function startHotReload() {
+  if (typeof window === "undefined") return; // not a browser (SSR / Node imports / tests)
+  const connect = () => {
+    if (!window.io) return false;
+    const socket = window.io();
+    socket.on("volt:reload", () => location.reload());
+    console.log("[volt] hot reload connected");
+    return true;
+  };
+  if (!connect()) window.addEventListener("load", connect);
+})();

package/templates/blog/render.yaml

@@ -0,0 +1,15 @@
+# Render blueprint — https://render.com/docs/blueprint-spec
+# Push this repo to GitHub, then in Render: New → Blueprint → pick the repo.
+# Render builds the Dockerfile, gives you HTTPS + a domain, and runs it.
+services:
+  - type: web
+    name: volt-app
+    runtime: docker
+    plan: starter
+    envVars:
+      - key: VOLT_ADDONS
+        sync: false # set your add-ons (e.g. "db,auth") in the dashboard
+      # Add the rest in the dashboard as needed:
+      #   DB_DRIVER, MONGODB_URI / DATABASE_URL,
+      #   MEDIA_DRIVER, S3_ENDPOINT/S3_REGION/S3_BUCKET/S3_KEY/S3_SECRET,
+      #   SMTP_URL, MAIL_FROM