@micropage-sh/cli 2.0.2 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micropage-sh/cli",
-  "version": "2.0.2",
+  "version": "2.0.8",
   "description": "CLI for micropage.sh - create, sync, and publish microsites",
   "main": "src/index.js",
   "bin": {

package/src/commands/builds.js

@@ -11,6 +11,7 @@ const {
   getValidAccessToken,
   getMaxDeployEventIdForBuild,
   streamDeployEventsUntilDone,
+  uploadAssetsWithToken,
 } = require('../supabase');
 const { getProjectConfig, setProjectConfig } = require('../auth');
 const { readPageFilesFromDir } = require('../parser');
@@ -139,6 +140,23 @@ async function push(options = {}) {
     process.exit(1);
   }
 
+  // Upload new files in assets/ to project Files before parsing,
+  // so `img: <- name` lookups can resolve against just-uploaded files.
+  try {
+    const accessToken = await getValidAccessToken();
+    const uploaded = await uploadAssetsWithToken(
+      accessToken,
+      config.projectId,
+      cwd,
+      (filename) => console.log(`Uploaded asset: ${filename}`),
+    );
+    if (uploaded > 0) console.log(`Uploaded ${uploaded} asset(s).`);
+  } catch (err) {
+    handleAuthError(err);
+    console.error('Asset upload failed:', err.message);
+    process.exit(1);
+  }
+
   // Parse content via parser API
   console.log('Parsing content…');
   let jsonContent;

package/src/commands/links.js

@@ -3,13 +3,7 @@
 const { execSync } = require('child_process');
 const { db, handleAuthError } = require('../supabase');
 const { getProjectConfig } = require('../auth');
-const { APP_URL } = require('../config');
-
-function projectUrl(domain) {
-  if (!domain) return null;
-  if (domain.startsWith('http')) return domain;
-  return `https://${domain}.pages.dev`;
-}
+const { APP_URL, projectUrl } = require('../config');
 
 function copyToClipboard(text) {
   const cmds = [
@@ -41,7 +35,7 @@ async function getProject(cwd) {
   try {
     const project = await db
       .from('projects')
-      .select('id,name,domain')
+      .select('id,name,domain,custom_domain')
       .eq('id', config.projectId)
       .single();
     return project || config;
@@ -56,7 +50,7 @@ async function getProject(cwd) {
 async function preview() {
   const cwd = process.cwd();
   const project = await getProject(cwd);
-  const url = projectUrl(project.domain);
+  const url = projectUrl(project.domain, project.custom_domain);
 
   if (!url) {
     console.error('No domain set for this project. Publish first.');
@@ -76,7 +70,7 @@ async function preview() {
 async function copyLink() {
   const cwd = process.cwd();
   const project = await getProject(cwd);
-  const url = projectUrl(project.domain);
+  const url = projectUrl(project.domain, project.custom_domain);
 
   if (!url) {
     console.error('No domain set for this project. Publish first.');

package/src/commands/projects.js

@@ -23,11 +23,9 @@ const { syncAssets } = require('./files');
 // Helpers
 // ---------------------------------------------------------------------------
 
-function projectUrl(host) {
-  if (!host) return '-';
-  if (host.startsWith('http://') || host.startsWith('https://')) return host;
-  return `https://${host}`;
-}
+const { projectUrl: buildProjectUrl } = require('../config');
+const projectUrl = (slug, customDomain) =>
+  buildProjectUrl(slug, customDomain) || '-';
 
 function copyIfExists(src, dest) {
   try {
@@ -49,26 +47,69 @@ function copyExamplesAndAssetsIntoProject(dir) {
     fs.mkdirSync(examplesDest, { recursive: true });
   }
 
-  // Copy example .page files
+  // Collect full-page templates (exclude components-* demo files) for the starter pick.
+  // All examples are still copied into examples/ for the user to browse.
+  const allExampleFiles = [];
+  const starterCandidates = [];
   try {
     const files = fs.readdirSync(examplesSrc);
     for (const file of files) {
       if (!file.endsWith('.page')) continue;
-      const src = path.join(examplesSrc, file);
-      const dest = path.join(examplesDest, file);
-      copyIfExists(src, dest);
+      allExampleFiles.push(file);
+      if (!file.startsWith('components-')) {
+        starterCandidates.push(file);
+      }
     }
   } catch {
     // ignore if templates/examples missing in this build
   }
 
-  // Default logo / favicon in assets/ (uploaded on push as logo.svg / favicon.svg; examples use `logo: <- logo.svg`)
+  for (const file of allExampleFiles) {
+    const src = path.join(examplesSrc, file);
+    const dest = path.join(examplesDest, file);
+    copyIfExists(src, dest);
+  }
+
+  // Write a randomized starter landing.page at the project root.
+  if (starterCandidates.length > 0) {
+    const pick = starterCandidates[Math.floor(Math.random() * starterCandidates.length)];
+    copyIfExists(path.join(examplesSrc, pick), path.join(dir, 'landing.page'));
+  }
+
+  // Logo / favicon in assets/ — pick a random variant pair from logos/ and favicons/.
+  // Falls back to the root logo.svg / favicon.svg if the variant directories are absent or empty.
   const destAssets = path.join(dir, 'assets');
   if (!fs.existsSync(destAssets)) {
     fs.mkdirSync(destAssets, { recursive: true });
   }
-  copyIfExists(path.join(assetsSrc, 'logo.svg'), path.join(destAssets, 'logo.svg'));
-  copyIfExists(path.join(assetsSrc, 'favicon.svg'), path.join(destAssets, 'favicon.svg'));
+
+  const logosDir = path.join(assetsSrc, 'logos');
+  const faviconsDir = path.join(assetsSrc, 'favicons');
+  let usedVariant = false;
+
+  try {
+    if (fs.existsSync(logosDir)) {
+      const logoFiles = fs.readdirSync(logosDir).filter((f) => /^logo-[^.]+\.svg$/.test(f));
+      if (logoFiles.length > 0) {
+        const chosen = logoFiles[Math.floor(Math.random() * logoFiles.length)];
+        // logo-x.svg -> favicon-x.svg
+        const variantId = chosen.replace(/^logo-/, '').replace(/\.svg$/, '');
+        const matchingFavicon = path.join(faviconsDir, `favicon-${variantId}.svg`);
+        if (fs.existsSync(matchingFavicon)) {
+          copyIfExists(path.join(logosDir, chosen), path.join(destAssets, 'logo.svg'));
+          copyIfExists(matchingFavicon, path.join(destAssets, 'favicon.svg'));
+          usedVariant = true;
+        }
+      }
+    }
+  } catch {
+    // fall through to default below
+  }
+
+  if (!usedVariant) {
+    copyIfExists(path.join(assetsSrc, 'logo.svg'), path.join(destAssets, 'logo.svg'));
+    copyIfExists(path.join(assetsSrc, 'favicon.svg'), path.join(destAssets, 'favicon.svg'));
+  }
 }
 
 async function getLatestBuild(projectId) {
@@ -145,7 +186,7 @@ async function list(options = {}) {
 
   const rows = projects.map((p) => {
     const build = latestBuild[p.id];
-    const url = projectUrl(p.custom_domain || p.domain);
+    const url = projectUrl(p.domain, p.custom_domain);
     return [
       p.uuid || '-',
       p.name || '-',
@@ -195,7 +236,7 @@ async function show(uuidOrDomain, options = {}) {
     return;
   }
 
-  const url = projectUrl(project.custom_domain || project.domain);
+  const url = projectUrl(project.domain, project.custom_domain);
 
   console.log('UUID:         ', project.uuid || '-');
   console.log('Name:         ', project.name || '-');
@@ -261,9 +302,9 @@ async function create(name, options = {}) {
 
   console.log('Created project:', project.name || name);
   if (project.uuid) console.log('UUID:', project.uuid);
-  console.log('URL:', projectUrl(project.domain));
+  console.log('URL:', projectUrl(project.domain, project.custom_domain));
   console.log('Folder:', dir);
-  console.log(`\nNext: cd ${name} && touch landing.page && micropage push`);
+  console.log(`\nNext: cd ${name} && micropage push`);
 }
 
 // ---------------------------------------------------------------------------

package/src/config.js

@@ -19,4 +19,30 @@ const BUILD_COMPILER_URL =
   process.env.MICROPAGE_PARSER_URL ||
   'https://build-compiler.micropage.sh';
 
-module.exports = { SUPABASE_URL, SUPABASE_ANON_KEY, APP_URL, BUILD_COMPILER_URL };
+const BASE_DOMAIN = process.env.MICROPAGE_BASE_DOMAIN || 'micropage.sh';
+
+// Live URL for a project. Prefers the customer's custom domain (a full FQDN
+// like `www.example.com`) when set; falls back to `https://<slug>.<BASE_DOMAIN>`.
+// Returns null when there's no usable identifier.
+function projectUrl(slug, customDomain) {
+  const cd = customDomain && String(customDomain).trim();
+  if (cd) {
+    return cd.startsWith('http://') || cd.startsWith('https://')
+      ? cd
+      : `https://${cd}`;
+  }
+  if (!slug) return null;
+  const s = String(slug).trim();
+  if (!s) return null;
+  if (s.startsWith('http://') || s.startsWith('https://')) return s;
+  return `https://${s}.${BASE_DOMAIN}`;
+}
+
+module.exports = {
+  SUPABASE_URL,
+  SUPABASE_ANON_KEY,
+  APP_URL,
+  BUILD_COMPILER_URL,
+  BASE_DOMAIN,
+  projectUrl,
+};

package/src/index.js

@@ -2,6 +2,7 @@
 'use strict';
 
 const { Command } = require('commander');
+const { version } = require('../package.json');
 
 const login = require('./commands/login');
 const logout = require('./commands/logout');
@@ -18,7 +19,7 @@ const program = new Command();
 program
   .name('micropage')
   .description('CLI for micropage.sh – create, sync, and publish microsites')
-  .version('2.0.2');
+  .version(version);
 
 // ---------------------------------------------------------------------------
 // Authentication

package/src/parser.js

@@ -48,18 +48,15 @@ function writePageFile(dir, content) {
   return dest;
 }
 
-const ASSET_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.svg'];
-
 function listAssetsFromDir(dir) {
   const assetsDir = path.join(dir, 'assets');
   if (!fs.existsSync(assetsDir)) return [];
   const entries = fs.readdirSync(assetsDir, { withFileTypes: true });
   const files = [];
   for (const e of entries) {
-    if (e.isFile()) {
-      const ext = path.extname(e.name).toLowerCase();
-      if (ASSET_EXTENSIONS.includes(ext)) files.push(e.name);
-    }
+    if (!e.isFile()) continue;
+    if (e.name.startsWith('.')) continue;
+    files.push(e.name);
   }
   return files.sort();
 }
@@ -68,5 +65,4 @@ module.exports = {
   readPageFilesFromDir,
   writePageFile,
   listAssetsFromDir,
-  ASSET_EXTENSIONS,
 };

package/src/supabase.js

@@ -257,13 +257,23 @@ const db = {
 // ---------------------------------------------------------------------------
 
 async function getUserInfo(accessToken) {
-  const res = await fetch(`${SUPABASE_URL}/auth/v1/user`, {
-    headers: {
-      'apikey': SUPABASE_ANON_KEY,
-      'Authorization': `Bearer ${accessToken}`,
-    },
-  });
-  if (!res.ok) return null;
+  let res;
+  try {
+    res = await fetch(`${SUPABASE_URL}/auth/v1/user`, {
+      headers: {
+        'apikey': SUPABASE_ANON_KEY,
+        'Authorization': `Bearer ${accessToken}`,
+      },
+    });
+  } catch (err) {
+    console.error(`[micropage] getUserInfo network error: ${err.message}`);
+    return null;
+  }
+  if (!res.ok) {
+    const body = await res.text().catch(() => '');
+    console.error(`[micropage] getUserInfo failed (HTTP ${res.status} from ${SUPABASE_URL}/auth/v1/user): ${body}`);
+    return null;
+  }
   return res.json();
 }
 
@@ -427,6 +437,12 @@ async function streamDeployEventsUntilDone(bearerToken, projectId, buildId, opti
   return { terminalEvent };
 }
 
+function hashFile(filePath) {
+  const crypto = require('crypto');
+  const fs = require('fs');
+  return crypto.createHash('sha256').update(fs.readFileSync(filePath)).digest('hex');
+}
+
 /**
  * Upload a single asset file to the project via the upload-file Edge function.
  * Uses a pre-obtained Supabase access token.
@@ -437,10 +453,12 @@ async function uploadAssetWithToken(accessToken, projectId, filePath, filename)
 
   const bytes = fs.readFileSync(filePath);
   const mimeType = mime.fromFilename(filename);
+  const sha = hashFile(filePath);
 
   const formData = new FormData();
   formData.append('file', new Blob([bytes], { type: mimeType }), filename);
   formData.append('project_id', String(projectId));
+  formData.append('content_hash', sha);
 
   const res = await fetch(`${SUPABASE_URL}/functions/v1/upload-file`, {
     method: 'POST',
@@ -463,9 +481,33 @@ async function uploadAssetWithToken(accessToken, projectId, filePath, filename)
   return data;
 }
 
+async function deleteFileWithToken(accessToken, fileId) {
+  const res = await fetch(`${SUPABASE_URL}/functions/v1/delete-file`, {
+    method: 'POST',
+    headers: {
+      'apikey': SUPABASE_ANON_KEY,
+      'Authorization': `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ file_id: fileId }),
+  });
+  const text = await res.text();
+  let data = null;
+  try { data = text ? JSON.parse(text) : null; } catch { data = { raw: text }; }
+  if (!res.ok) {
+    const msg = (data && (data.error || data.message)) || `HTTP ${res.status}`;
+    const err = new Error(msg);
+    err.status = res.status;
+    throw err;
+  }
+  return data;
+}
+
 /**
  * Upload all assets from the local `assets/` directory for a project.
- * Skips files that already exist on the server (matched by filename).
+ * Compares each local file's SHA-256 hash against the server's stored hash.
+ * Skips files whose content is unchanged. Deletes and re-uploads files whose
+ * content has changed (or whose server hash is NULL from before hashing was added).
  * Returns the count of files uploaded.
  */
 async function uploadAssetsWithToken(accessToken, projectId, cwd, onProgress) {
@@ -475,7 +517,9 @@ async function uploadAssetsWithToken(accessToken, projectId, cwd, onProgress) {
   const assetFiles = listAssetsFromDir(cwd);
   if (assetFiles.length === 0) return 0;
 
-  // Fetch existing filenames so we can skip unchanged files
+  // Fetch existing files so we can skip unchanged ones. We MUST treat a
+  // non-OK response as fatal: continuing with an empty list would re-upload
+  // every asset and (when filenames collide) leave duplicate user_files rows.
   const listRes = await fetch(
     `${SUPABASE_URL}/functions/v1/list-files?project_id=${encodeURIComponent(projectId)}`,
     {
@@ -485,13 +529,28 @@ async function uploadAssetsWithToken(accessToken, projectId, cwd, onProgress) {
       },
     },
   );
-  const listData = listRes.ok ? await listRes.json() : null;
-  const existing = new Set((listData?.files || []).map((f) => f.filename));
+  if (!listRes.ok) {
+    const text = await listRes.text().catch(() => '');
+    const err = new Error(`Failed to list project files: HTTP ${listRes.status}${text ? ` — ${text}` : ''}`);
+    err.status = listRes.status;
+    throw err;
+  }
+  const listData = await listRes.json();
+  const existingByName = new Map(
+    (listData?.files || []).map((f) => [f.filename, { id: f.id, content_hash: f.content_hash }]),
+  );
 
   let uploaded = 0;
   for (const filename of assetFiles) {
-    if (existing.has(filename)) continue;
     const filePath = path.join(cwd, 'assets', filename);
+    const localHash = hashFile(filePath);
+    const existing = existingByName.get(filename);
+
+    if (existing && existing.content_hash === localHash) continue;
+
+    if (existing) {
+      await deleteFileWithToken(accessToken, existing.id);
+    }
     await uploadAssetWithToken(accessToken, projectId, filePath, filename);
     if (onProgress) onProgress(filename);
     uploaded++;
@@ -634,4 +693,6 @@ module.exports = {
   exchangeDeployTokenForAccessToken,
   pushWithToken,
   invokePublishBuild,
+  uploadAssetsWithToken,
+  hashFile,
 };

package/templates/assets/favicons/favicon-a.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-labelledby="title desc">
+  <title>Micropage favicon — variant A</title>
+  <desc>Minimal stacked bar favicon for starter projects</desc>
+  <rect x="4" y="7" width="24" height="4" rx="2" fill="#4f46e5"/>
+  <rect x="6" y="14" width="20" height="4" rx="2" fill="#0ea5e9"/>
+  <rect x="8" y="21" width="16" height="4" rx="2" fill="#22c55e"/>
+</svg>

package/templates/assets/favicons/favicon-b.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-labelledby="title desc">
+  <title>Micropage favicon — variant B</title>
+  <desc>Minimal sunrise arc favicon</desc>
+  <defs>
+    <linearGradient id="g" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#dc2626"/>
+      <stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <path d="M 4 22 A 12 12 0 0 1 28 22" stroke="url(#g)" stroke-width="5" fill="none" stroke-linecap="round"/>
+  <circle cx="16" cy="22" r="3" fill="#dc2626"/>
+</svg>

package/templates/assets/favicons/favicon-c.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-labelledby="title desc">
+  <title>Micropage favicon — variant C</title>
+  <desc>Minimal concentric circles favicon in forest green</desc>
+  <circle cx="16" cy="14" r="10" fill="#166534"/>
+  <circle cx="16" cy="14" r="5" fill="#14532d"/>
+  <circle cx="16" cy="14" r="2" fill="#bbf7d0"/>
+  <rect x="14" y="24" width="4" height="6" rx="2" fill="#713f12"/>
+</svg>

package/templates/assets/favicons/favicon-d.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-labelledby="title desc">
+  <title>Micropage favicon — variant D</title>
+  <desc>Minimal diamond favicon in charcoal with magenta center</desc>
+  <polygon points="16,4 28,16 16,28 4,16" fill="#1c1c1c"/>
+  <polygon points="16,11 21,16 16,21 11,16" fill="#e91e8c"/>
+</svg>

package/templates/assets/logos/logo-a.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
+  <title>Micropage starter logo — variant A</title>
+  <desc>Abstract stacked rectangles suggesting pages</desc>
+  <defs>
+    <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4f46e5"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+  </defs>
+  <rect x="10" y="14" width="44" height="12" rx="3" fill="url(#g)"/>
+  <rect x="14" y="28" width="36" height="10" rx="3" fill="#111827" opacity="0.9"/>
+  <rect x="18" y="40" width="28" height="8" rx="3" fill="#111827" opacity="0.7"/>
+</svg>

package/templates/assets/logos/logo-b.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
+  <title>Micropage starter logo — variant B</title>
+  <desc>Abstract sunrise arc suggesting warmth and momentum</desc>
+  <defs>
+    <linearGradient id="g" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#dc2626"/>
+      <stop offset="50%" stop-color="#ea580c"/>
+      <stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <path d="M 8 44 A 24 24 0 0 1 56 44" stroke="url(#g)" stroke-width="8" fill="none" stroke-linecap="round"/>
+  <circle cx="32" cy="44" r="5" fill="#dc2626"/>
+  <line x1="32" y1="14" x2="32" y2="22" stroke="#f59e0b" stroke-width="4" stroke-linecap="round"/>
+  <line x1="14" y1="26" x2="20" y2="30" stroke="#ea580c" stroke-width="3" stroke-linecap="round"/>
+  <line x1="50" y1="26" x2="44" y2="30" stroke="#ea580c" stroke-width="3" stroke-linecap="round"/>
+</svg>

package/templates/assets/logos/logo-c.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
+  <title>Micropage starter logo — variant C</title>
+  <desc>Abstract leaf and root mark suggesting growth and earth</desc>
+  <circle cx="32" cy="20" r="14" fill="#166534"/>
+  <circle cx="32" cy="20" r="8" fill="#14532d"/>
+  <circle cx="32" cy="20" r="4" fill="#bbf7d0"/>
+  <rect x="30" y="34" width="4" height="14" rx="2" fill="#713f12"/>
+  <path d="M 20 48 Q 32 38 44 48" stroke="#713f12" stroke-width="3" fill="none" stroke-linecap="round"/>
+</svg>

package/templates/assets/logos/logo-d.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
+  <title>Micropage starter logo — variant D</title>
+  <desc>Bold geometric diamond mark in charcoal with magenta accent</desc>
+  <polygon points="32,8 52,32 32,56 12,32" fill="#1c1c1c"/>
+  <polygon points="32,18 44,32 32,46 20,32" fill="#2e2e2e"/>
+  <polygon points="32,26 38,32 32,38 26,32" fill="#e91e8c"/>
+</svg>

package/templates/examples/agency-portfolio.page

@@ -0,0 +1,130 @@
+[site]
+title: Slab Studio
+description: Brand, digital, and motion design for companies that want to stand out
+logo: <- logo.svg
+favicon: <- favicon.svg
+colors:
+  primary: #111111
+  secondary: #333333
+  danger: #ff6b35
+
+[site.dark]
+colors:
+  primary: #f5f5f5
+  secondary: #cccccc
+
+[nav]
+Work -> /
+Studio -> /studio
+Contact -> /contact
+
+[footer]
+/// section bg:dark text:light
+
+col:
+  h5: SLAB STUDIO
+  p: Brand — Digital — Motion
+  p: Brooklyn, New York
+
+col:
+  link: LinkedIn -> https://linkedin.com
+  link: Dribbble -> https://dribbble.com
+  link: Instagram -> https://instagram.com
+
+col:
+  p: New projects: hello@slabstudio.co
+  p: Press: press@slabstudio.co
+
+
+[Work -> /]
+
+/// section align:center
+h1: We make things look like they mean it.
+p: Slab Studio is a seven-person brand and digital studio. We work with founders and creative directors who know what they want and need a team that can build it.
+
+/// section
+h2: Selected projects
+
+col:
+  h3: Cinder — Brand Identity
+  p: End-to-end identity for a B2B fintech: wordmark, color system, motion guidelines, and a component library used across three product surfaces.
+  small: Fintech · 2024
+
+col:
+  h3: Waypoint — Campaign
+  p: Product launch campaign for a logistics SaaS — visual language, video direction, and a microsite that converted at 4.2%.
+  small: Logistics · 2024
+
+col:
+  h3: Olive & Thread — Packaging
+  p: Rebranded a sustainable fashion label from logo to hangtag to e-commerce photography direction.
+  small: Fashion · 2023
+
+/// section bg:muted
+h2: More work
+
+col:
+  h3: Nova Health — Digital Product
+  p: Design system and patient-facing app UI for a telehealth platform. Accessibility-first, WCAG 2.1 AA.
+  small: Health tech · 2023
+
+col:
+  h3: Paloma Records — Art Direction
+  p: Album artwork, lyric video direction, and social templates for four releases.
+  small: Music · 2023
+
+col:
+  h3: Fieldwork Brewing — Web
+  p: Responsive marketing site with custom animations, tap room finder, and e-commerce integration.
+  small: Food & beverage · 2022
+
+
+[Studio -> /studio]
+
+/// section
+h1: About Slab
+
+col:
+  p: We started Slab in 2018 after leaving larger agencies because we wanted to do fewer projects, better. Seven people, no junior-to-senior ratio games, no account managers between you and the work.
+
+col:
+  p: Everyone at Slab touches client work. Our lead designer also codes. Our strategist also writes. That's on purpose.
+
+/// section align:center
+h2: How we work
+
+col:
+  icon: bi bi-chat-square-text
+  h3: Discovery
+  p: Two-week engagement to align on objectives, audiences, and success criteria before any creative begins.
+
+col:
+  icon: bi bi-easel
+  h3: Creative development
+  p: Three rounds of feedback with clear decision points. No endless-revision contracts.
+
+col:
+  icon: bi bi-box-arrow-up-right
+  h3: Handoff
+  p: Full source files, a brand guidelines document, and a 30-day support window after launch.
+
+/// section bg:dark text:light align:center
+h2: We work with clients who ship.
+p: Not committees. Not approvals-by-committee. Founders, CPOs, and creative directors with the authority to make decisions and the taste to know a good one.
+button: Start a conversation -> /contact
+
+
+[Contact -> /contact]
+
+/// section
+h1: Start a project
+p: Tell us what you're building and why it matters. We'll come back within 48 hours.
+
+form: intake
+input: Name*
+input: Email*
+input: Company
+select: Project type [Brand identity, Web design, Campaign, Motion, Product design, Other]
+select: Approximate budget [$20k–$50k, $50k–$100k, $100k+, Not sure yet]
+text: Tell us about the project*
+submit: Send brief

package/templates/examples/blog-publication.page

@@ -0,0 +1,158 @@
+[site]
+title: The Long Read
+description: Reporting and essays on technology, cities, and the people who build them
+logo: <- logo.svg
+favicon: <- favicon.svg
+colors:
+  primary: #1f2937
+  secondary: #374151
+  danger: #b91c1c
+
+[site.dark]
+colors:
+  primary: #f9fafb
+  secondary: #e5e7eb
+  danger: #ef4444
+
+[nav]
+Latest -> /
+Archive -> /archive
+About -> /about
+Subscribe -> /subscribe
+
+[footer]
+/// section
+
+col:
+  h5: THE LONG READ
+  p: Published weekly. No ads. Reader-supported.
+
+col:
+  link: Twitter -> https://twitter.com
+  link: RSS -> /feed.xml
+  link: Archive -> /archive
+
+col:
+  p: Tips and story ideas: tips@thelongread.io
+  p: Licensing: rights@thelongread.io
+
+
+[Latest -> /]
+
+/// section
+h1: Latest stories
+
+col:
+  h3: The Fiber Wars
+  p: Why three companies are spending $80 billion to wire the same neighborhoods — and who loses when they all pull back.
+  small: Infrastructure · 22 min read
+
+col:
+  h3: What Happened to the Promise of Smart Cities
+  p: A decade ago, Sidewalk Toronto was supposed to prove that data could make urban life better. Here's what we learned from its failure.
+  small: Cities · 18 min read
+
+col:
+  h3: The Engineer Who Said No
+  p: When Priya Nair refused to ship a feature she thought was dangerous, she lost her job. Two years later, she's not sure she'd do it differently.
+  small: Profile · 14 min read
+
+/// section bg:muted
+h2: From the archive
+
+col:
+  h3: The Last Payphone
+  p: New York's final payphone came down in May 2022. We spent a day with the crew that removed it.
+  small: Cities · 8 min read
+
+col:
+  h3: Chasing the Algorithm
+  p: A content moderation contractor describes 18 months of reading the internet's worst content so you don't have to.
+  small: Technology · 26 min read
+
+col:
+  h3: Where Did the Mid-Size City Go?
+  p: Population data tells one story. Walking around Youngstown, Ohio tells another.
+  small: Cities · 15 min read
+
+/// section bg:danger text:light align:center
+h2: Become a supporting reader.
+p: The Long Read is fully reader-supported. No investors, no brand deals, no tracking. A subscription covers our editorial costs and keeps the site ad-free.
+button: Subscribe — $10/month -> /subscribe
+btn-secondary: Gift a subscription -> /gift
+
+
+[Archive -> /archive]
+
+/// section
+h1: All stories
+
+/// section
+h2: Technology
+
+col:
+  link: The Fiber Wars -> /stories/fiber-wars
+  link: Chasing the Algorithm -> /stories/chasing-algorithm
+  link: Who Owns the Sidewalk Data? -> /stories/sidewalk-data
+  link: The Quiet Monopoly -> /stories/quiet-monopoly
+
+/// section
+h2: Cities
+
+col:
+  link: What Happened to the Promise of Smart Cities -> /stories/smart-cities
+  link: The Last Payphone -> /stories/last-payphone
+  link: Where Did the Mid-Size City Go? -> /stories/mid-size-city
+  link: Living on the Heat Map -> /stories/heat-map
+
+
+[About -> /about]
+
+/// section
+h1: About The Long Read
+
+col:
+  p: The Long Read was started in 2021 by two journalists who were tired of writing to SEO briefs. We publish one to two pieces a week — long-form reported stories and essays about technology and the built environment.
+
+col:
+  p: We have no investors, no editorial board, and no algorithmic pressures. If something takes six months to report properly, we take six months.
+
+/// section align:center
+h2: Our editorial standards
+
+col:
+  icon: bi bi-incognito
+  h3: No tracking
+  p: We collect no analytics, no behavioral data, no ad pixels. Your reading is your own.
+
+col:
+  icon: bi bi-journal-check
+  h3: Named sources
+  p: We don't publish anonymously sourced claims without a documented reason. We always try to give subjects the chance to respond.
+
+col:
+  icon: bi bi-archive
+  h3: Everything stays up
+  p: We don't delete stories. If we get something wrong, we publish a correction and leave both up.
+
+
+[Subscribe -> /subscribe]
+
+/// section
+h1: Support independent journalism
+p: Subscribers get all stories in their inbox each week, access to the full archive, and the knowledge that this publication exists because of them.
+
+col:
+  h3: Monthly
+  p: $10 per month. Cancel any time.
+  button: Subscribe monthly -> /checkout/monthly
+
+col:
+  h3: Annual
+  p: $90 per year — save $30.
+  button: Subscribe annually -> /checkout/annual
+
+col:
+  h3: Founding reader
+  p: $200 per year. Your name in our annual supporters list.
+  button: Become a founding reader -> /checkout/founding

package/templates/examples/devtool-docs.page

@@ -0,0 +1,181 @@
+[site]
+title: Fluxline
+description: Open-source event streaming SDK for TypeScript and Go
+logo: <- logo.svg
+favicon: <- favicon.svg
+colors:
+  primary: #0d9488
+  secondary: #0f766e
+  info: #0891b2
+
+[site.dark]
+colors:
+  primary: #2dd4bf
+  secondary: #14b8a6
+
+[nav]
+Home -> /
+Docs -> /docs
+Pricing -> /pricing
+GitHub -> https://github.com
+
+[footer]
+/// section bg:dark text:light
+
+col:
+  h5: FLUXLINE
+  p: Open source under Apache 2.0
+  link: GitHub -> https://github.com
+
+col:
+  link: Documentation -> /docs
+  link: Changelog -> /changelog
+  link: Status -> https://status.fluxline.dev
+
+col:
+  p: Fluxline is maintained by a small team and community contributors.
+  link: Contributing guide -> /contributing
+
+
+[Home -> /]
+
+/// section bg:dark text:light
+h5: OPEN SOURCE · TYPESCRIPT · GO
+h1: Stream events without the boilerplate.
+p: Fluxline is a lightweight SDK for publishing, subscribing to, and replaying ordered event streams. Works with your existing message broker — no new infrastructure required.
+
+////
+  html: <pre><code>import { Fluxline } from 'fluxline'
+
+const client = new Fluxline({ brokerUrl: process.env.BROKER_URL })
+await client.publish('orders', { id: 'ord_01', total: 49.00 })</code></pre>
+
+col:
+  button: Get started -> /docs
+  btn-secondary: View on GitHub -> https://github.com
+
+col:
+  p: v1.4.2 · 2.1 kB gzipped · Zero runtime dependencies
+
+/// section
+h2: Why Fluxline
+
+col:
+  icon: bi bi-lightning-charge
+  h3: Under 3 kB
+  p: The TypeScript client ships at 2.1 kB gzipped. The Go client is a single file you can vendor.
+
+col:
+  icon: bi bi-arrow-repeat
+  h3: Replay from any offset
+  p: Seek back to any sequence number and replay events forward. Works with Kafka, NATS, and Redis Streams.
+
+col:
+  icon: bi bi-shield-check
+  h3: Exactly-once delivery
+  p: Idempotent producer IDs and consumer group offsets give you strong delivery guarantees out of the box.
+
+/// section bg:primary-subtle
+h2: Framework integrations
+
+col:
+  h3: Next.js / Remix
+  p: Server action helpers and route handler bindings. Automatically infer event types from your Zod schemas.
+
+col:
+  h3: Hono & Fastify
+  p: Middleware that turns any route into an event source. Streaming responses with backpressure handling.
+
+col:
+  h3: Go net/http
+  p: Handler adapter for standard Go HTTP servers. No generics gymnastics — just plain functions.
+
+
+[Docs -> /docs]
+
+/// section
+h1: Getting started
+
+/// section bg:muted
+h2: Installation
+
+////
+  html: <pre><code># TypeScript / Node
+npm install fluxline
+
+# Go
+go get github.com/fluxline/fluxline-go</code></pre>
+
+/// section
+h2: Quick start
+
+col:
+  h3: 1. Create a client
+  p: Initialize with your broker URL and an optional namespace prefix. Credentials are read from environment variables by default.
+
+col:
+  h3: 2. Define your events
+  p: Use the TypeScript generic or Go struct tag to attach a schema. Fluxline validates before publishing and narrows the type on receive.
+
+col:
+  h3: 3. Publish and subscribe
+  p: publish() is fire-and-forget with an optional ack callback. subscribe() returns an async iterator or a channel, depending on the language.
+
+/// section
+h2: Configuration reference
+
+col:
+  h3: brokerUrl
+  p: Required. WebSocket or TCP URL for your message broker.
+
+col:
+  h3: namespace
+  p: Optional string prefix applied to all stream names. Useful for multi-tenant deployments.
+
+col:
+  h3: maxRetries
+  p: Default 3. How many times to retry a failed publish before raising an error.
+
+col:
+  h3: ackTimeout
+  p: Default 5000 ms. Time to wait for a broker ack before treating the publish as failed.
+
+
+[Pricing -> /pricing]
+
+/// section align:center
+h1: Free to start. Pay as you grow.
+p: All plans include the full SDK feature set. Pricing is based on monthly event volume.
+
+col:
+  h3: Open Source
+  p: Self-hosted, unlimited events, community support.
+  p: Always free.
+  button: Get started -> /docs
+
+col:
+  h3: Cloud
+  p: Managed broker, 10M events/month included.
+  p: $49 / month
+  button: Start free trial -> /trial
+
+col:
+  h3: Enterprise
+  p: Dedicated cluster, SLA, audit logs, SSO, custom retention.
+  p: Custom pricing
+  button: Talk to us -> /contact
+
+/// section bg:muted
+h2: Frequently asked questions
+
+col:
+  h3: Can I use my own Kafka cluster?
+  p: Yes. The SDK is broker-agnostic. The managed Cloud tier runs NATS JetStream under the hood, but the OSS version works with any NATS, Kafka, or Redis Streams backend.
+
+col:
+  h3: Is there a free trial for Cloud?
+  p: Cloud plans include a 14-day trial with no credit card required. You'll get 10M events to test with before you're charged.
+
+col:
+  h3: What counts as an event?
+  p: Any publish() call that reaches the broker. Failed attempts before retry exhaustion are not counted.

package/templates/examples/event-conference.page

@@ -0,0 +1,171 @@
+[site]
+title: Frontline Summit
+description: The annual conference for product, design, and engineering leaders
+logo: <- logo.svg
+favicon: <- favicon.svg
+colors:
+  primary: #e3236d
+  secondary: #b01a55
+  info: #7c3aed
+
+[site.dark]
+colors:
+  primary: #f0457e
+  secondary: #e3236d
+
+[nav]
+Home -> /
+Schedule -> /schedule
+Speakers -> /speakers
+Register -> /register
+
+[footer]
+/// section bg:dark text:light
+
+col:
+  h5: FRONTLINE SUMMIT 2025
+  p: March 12–14, 2025
+  p: Chicago, IL — The Civic Ballroom
+
+col:
+  link: Code of conduct -> /coc
+  link: Sponsorship -> /sponsors
+  link: Contact -> /contact
+
+col:
+  p: Questions? Email us at hello@frontlinesummit.com
+
+
+[Home -> /]
+
+/// hero bg:primary text:light
+h1: Build what comes next.
+p: Frontline Summit brings together 1,200 product, design, and engineering leaders for three days of talks, workshops, and honest conversations about how software gets made.
+p: March 12–14, 2025 · Chicago
+button: Register now -> /register
+btn-secondary: View schedule -> /schedule
+
+/// section
+h2: This year's tracks
+
+col:
+  icon: bi bi-cpu
+  h3: Platform Engineering
+  p: Developer experience, internal platforms, and the golden path between speed and stability.
+
+col:
+  icon: bi bi-palette
+  h3: Product Design at Scale
+  p: Design systems, accessibility debt, and leading creative work in a fast-moving org.
+
+col:
+  icon: bi bi-people
+  h3: Leadership & Culture
+  p: Hiring, retention, psychological safety, and building teams that survive hypergrowth.
+
+/// section bg:muted
+h2: Formats
+
+col:
+  h3: Keynotes
+  p: Six 45-minute talks from practitioners who've shipped things that mattered.
+
+col:
+  h3: Deep-dive workshops
+  p: Half-day sessions capped at 30 attendees. Hands-on, no slides, all practice.
+
+col:
+  h3: Open hallway track
+  p: Unscheduled space for spontaneous conversations. Some of the best talks happen here.
+
+
+[Schedule -> /schedule]
+
+/// section
+h1: Schedule at a glance
+
+/// section bg:primary-subtle
+h2: Day 1 — March 12
+
+col:
+  h3: 9:00 am — Opening keynote
+  p: "The Decade of the Platform" — keynote by Mira Okonkwo, VP Engineering at Lattice.
+
+col:
+  h3: 11:00 am — Workshop block A
+  p: Choose from: Incident culture, Design sprints for complex features, Staff eng career paths.
+
+col:
+  h3: 2:00 pm — Lightning talks
+  p: Eight 10-minute talks from speakers selected from the open CFP.
+
+/// section
+h2: Day 2 — March 13
+
+col:
+  h3: 9:30 am — Keynote
+  p: "Shipping with Confidence" — how Vercel restructured their deploy pipeline and reduced rollbacks by 60%.
+
+col:
+  h3: 1:00 pm — Panel
+  p: "AI in the dev workflow: what's actually working" — four engineering leaders, unfiltered.
+
+col:
+  h3: 4:00 pm — Unconference
+  p: Participant-led sessions. Vote on topics in the morning, run sessions in the afternoon.
+
+
+[Speakers -> /speakers]
+
+/// section align:center
+h1: Featured speakers
+
+col:
+  h3: Mira Okonkwo
+  p: VP Engineering, Lattice
+  p: Scaling platform teams from 12 to 120 engineers without losing the culture.
+
+col:
+  h3: Dev Patel
+  p: Staff Engineer, Linear
+  p: Real-time sync architecture and the tradeoffs nobody talks about.
+
+col:
+  h3: Carmen Estrada
+  p: Head of Design, Figma
+  p: Building a design system that 4,000 designers actually use.
+
+/// section
+h2: Call for proposals
+
+col:
+  p: We select 30% of our program from open CFP submissions. If you've solved a hard problem and want to share it, we want to hear from you.
+  button: Submit a proposal -> /cfp
+
+col:
+  p: CFP closes January 15, 2025. Decisions sent by February 1. Travel and hotel covered for selected speakers.
+
+
+[Register -> /register]
+
+/// section
+h1: Get your ticket
+p: Early-bird pricing ends December 1. Workshop seats are limited and sell out first.
+
+col:
+  h3: Conference pass
+  p: Full three-day access, all keynotes and lightning talks, hallway track.
+  p: $799 early bird / $999 standard
+  button: Register -> /checkout
+
+col:
+  h3: Conference + Workshop
+  p: Everything in the conference pass plus one half-day workshop of your choice.
+  p: $1,199 early bird / $1,499 standard
+  button: Register -> /checkout
+
+col:
+  h3: Team of 5
+  p: Five conference passes at a 20% discount. Invoice billing available.
+  p: $3,196 (saves $800)
+  button: Contact us -> /contact

package/templates/examples/restaurant-landing.page

@@ -0,0 +1,124 @@
+[site]
+title: Ember & Salt
+description: Wood-fired kitchen and craft cocktail bar in the heart of the city
+logo: <- logo.svg
+favicon: <- favicon.svg
+colors:
+  primary: #c1432d
+  secondary: #8b2c17
+  warning: #e8a02a
+
+[site.dark]
+colors:
+  primary: #e05a40
+  secondary: #c1432d
+
+[nav]
+Menu -> /
+About -> /about
+Reservations -> /reservations
+
+[footer]
+/// section bg:dark text:light
+
+col:
+  h5: EMBER & SALT
+  p: 142 North Market Street
+  p: Open Tuesday–Sunday, 5 pm – 11 pm
+
+col:
+  link: Instagram -> https://instagram.com
+  link: Yelp -> https://yelp.com
+  link: Google Maps -> https://maps.google.com
+
+col:
+  p: Reservations recommended on weekends.
+  link: Book a table -> /reservations
+
+
+[Menu -> /]
+
+/// hero bg:dark text:light
+h1: Fire. Smoke. Salt.
+p: We cook over an open wood hearth. Everything is made in-house — from the pasta to the pickles to the ice cream.
+button: Book a table -> /reservations
+btn-secondary: View full menu -> /menu
+
+/// section
+h2: From the kitchen
+
+col:
+  h3: Burrata & Heirloom Tomato
+  p: Stone-fruit vinaigrette, basil oil, toasted hazelnuts. Seasonal.
+  small: Starter — $18
+
+col:
+  h3: Hand-Rolled Pappardelle
+  p: Braised short rib, rosemary jus, Parmigiano Reggiano.
+  small: Pasta — $32
+
+col:
+  h3: Wood-Fired Half Chicken
+  p: Spatchcocked over oak, herb butter, roasted garlic aioli, market greens.
+  small: Main — $38
+
+/// section bg:primary-subtle
+h2: Signature cocktails
+
+col:
+  h3: Ember Old Fashioned
+  p: Smoked rye, demerara, orange peel, Angostura.
+
+col:
+  h3: Salt & Citrus Sour
+  p: Mezcal, yuzu, egg white, black lava salt rim.
+
+col:
+  h3: Garden Mule
+  p: House ginger beer, cucumber vodka, fresh mint, lime.
+
+
+[About -> /about]
+
+/// section align:center
+h1: A kitchen built on fire
+
+col:
+  p: Ember & Salt started in 2019 as a pop-up at the Fulton Farmers Market. We outgrew our tent. Now we have a wood-burning hearth, a walk-in full of heritage-breed pork and local vegetables, and a bar that takes its bitters seriously.
+
+col:
+  p: Chef Rena Kowalski spent twelve years in Lyon before returning to open the restaurant she always wanted: unpretentious, ingredient-driven, and stubbornly seasonal.
+
+/// section
+h2: Awards & press
+
+col:
+  icon: bi bi-award
+  h3: Best New Restaurant
+  p: City & State Dining Guide, 2022
+
+col:
+  icon: bi bi-newspaper
+  h3: Featured in Eater
+  p: "One of the most exciting wood-fire openings of the year."
+
+col:
+  icon: bi bi-star
+  h3: Michelin Bib Gourmand
+  p: Recognized for exceptional value and quality, 2023 guide.
+
+
+[Reservations -> /reservations]
+
+/// section
+h1: Reserve a table
+p: We hold tables up to 48 hours in advance. Walk-ins welcome at the bar.
+
+form: reservation
+input: Full name*
+input: Email*
+input: Phone
+select: Party size [1, 2, 3–4, 5–6, 7+]
+select: Preferred time [5:00 pm, 6:00 pm, 7:00 pm, 8:00 pm, 9:00 pm]
+text: Special requests or dietary needs
+submit: Request reservation