mnfst-render 0.5.24 → 0.5.25

package/README.md

@@ -8,4 +8,4 @@ Static renderer for Manifest projects.
 npx mnfst-render --root .
 ```
 
-The command reads `manifest.json` and writes rendered pages to `manifest.prerender.output` (default `website`).
+The command reads `manifest.json` and writes rendered pages to `manifest.render.output` (default `website`).

package/manifest.render.mjs

@@ -9,6 +9,7 @@ import { createServer } from 'node:http';
 import { cpus } from 'node:os';
 import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
+import { createHash } from 'node:crypto';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
@@ -213,18 +214,102 @@ function parseArgs() {
 function loadConfig(rootDir) {
   const manifestPath = join(rootDir, 'manifest.json');
   if (!existsSync(manifestPath)) {
-    return { prerender: {} };
+    return { render: {} };
   }
   const raw = readFileSync(manifestPath, 'utf8');
   let manifest;
   try {
     manifest = JSON.parse(raw);
   } catch {
-    return { prerender: {} };
+    return { render: {} };
   }
   return manifest;
 }
 
+// Move credential-shaped values out of manifest.json into .env. Anything
+// inlined into manifest.json ships verbatim into dist/ (the file is copied
+// to the output unchanged), so a literal devKey there is a production leak.
+// Rewriting source AND the in-memory object covers both directions: future
+// renders see the placeholder, and the dist copy this run produces does too.
+// Idempotent — values already shaped like ${VAR} are skipped.
+function relocateSecretsToEnv(rootDir, manifest) {
+  const moves = [];
+
+  function maybeMove(obj, key, envVar, displayPath) {
+    if (!obj || typeof obj !== 'object') return;
+    const v = obj[key];
+    if (typeof v !== 'string' || !v) return;
+    if (/^\$\{[^}]+\}$/.test(v)) return; // already a placeholder
+    moves.push({ obj, key, value: v, envVar, displayPath });
+  }
+
+  maybeMove(manifest.appwrite, 'devKey', 'APPWRITE_DEV_KEY', 'appwrite.devKey');
+  if (manifest.data && typeof manifest.data === 'object') {
+    for (const [srcName, src] of Object.entries(manifest.data)) {
+      maybeMove(src, 'appwriteDevKey', 'APPWRITE_DEV_KEY', `data.${srcName}.appwriteDevKey`);
+    }
+  }
+
+  if (moves.length === 0) return manifest;
+
+  for (const m of moves) {
+    m.obj[m.key] = `\${${m.envVar}}`;
+  }
+
+  const manifestPath = join(rootDir, 'manifest.json');
+  try {
+    writeFileSync(manifestPath, JSON.stringify(manifest, null, 4) + '\n');
+  } catch (err) {
+    console.error(`mnfst-render: failed to rewrite ${manifestPath}: ${err.message}`);
+    process.exit(1);
+  }
+
+  const envPath = join(rootDir, '.env');
+  let envText = '';
+  try {
+    if (existsSync(envPath)) envText = readFileSync(envPath, 'utf8');
+  } catch {}
+  if (envText && !envText.endsWith('\n')) envText += '\n';
+
+  const existingVars = new Set();
+  for (const line of envText.split(/\r?\n/)) {
+    const m = line.match(/^([A-Z_][A-Z0-9_]*)\s*=/);
+    if (m) existingVars.add(m[1]);
+  }
+
+  const additions = [];
+  for (const m of moves) {
+    if (!existingVars.has(m.envVar)) {
+      additions.push(`${m.envVar}=${m.value}`);
+      existingVars.add(m.envVar);
+    }
+  }
+
+  if (additions.length) {
+    try {
+      writeFileSync(envPath, envText + additions.join('\n') + '\n');
+    } catch (err) {
+      console.error(`mnfst-render: failed to write ${envPath}: ${err.message}`);
+      process.exit(1);
+    }
+  }
+
+  console.warn('');
+  console.warn('mnfst-render: relocated credentials from manifest.json to .env');
+  for (const m of moves) {
+    console.warn(`  • ${m.displayPath} → \${${m.envVar}}`);
+  }
+  if (additions.length) {
+    console.warn(`  Appended ${additions.length} var(s) to .env (verify .env is in .gitignore).`);
+  } else {
+    console.warn('  .env already had matching vars; manifest.json placeholders now point at them.');
+  }
+  console.warn('  Browser-side dev needs window.env populated separately (e.g. env.local.js).');
+  console.warn('');
+
+  return manifest;
+}
+
 function normalizeLocaleRouteExclude(val) {
   if (val == null) return [];
   if (Array.isArray(val)) return val.map((s) => String(s).trim()).filter(Boolean);
@@ -236,44 +321,44 @@ function resolveConfig() {
   const cli = parseArgs();
   const cwd = process.cwd();
   const root = resolve(cwd, cli.root ?? '.');
-  const manifest = loadConfig(root);
-  const pre = manifest.prerender ?? {};
+  const manifest = relocateSecretsToEnv(root, loadConfig(root));
+  const ren = manifest.render ?? {};
 
-  const localUrl = (cli.localUrl ?? cli.baseUrl ?? process.env.PRERENDER_BASE ?? pre.localUrl ?? pre.baseUrl)?.replace(/\/$/, '');
+  const localUrl = (cli.localUrl ?? cli.baseUrl ?? process.env.PRERENDER_BASE ?? ren.localUrl ?? ren.baseUrl)?.replace(/\/$/, '');
   const serve = cli.localUrl ? false : (cli.serve !== undefined ? !!cli.serve : true);
   if (!serve && !localUrl) {
-    console.error('prerender: localUrl is required when not using built-in server. Set manifest.prerender.localUrl or use --local.');
+    console.error('prerender: localUrl is required when not using built-in server. Set manifest.render.localUrl or use --local.');
     process.exit(1);
   }
-  const liveUrl = (cli.liveUrl ?? process.env.PRERENDER_LIVE ?? manifest.live_url ?? manifest.liveUrl ?? pre.live_url ?? pre.liveUrl ?? localUrl ?? '')?.replace(/\/$/, '');
+  const liveUrl = (cli.liveUrl ?? process.env.PRERENDER_LIVE ?? manifest.live_url ?? manifest.liveUrl ?? ren.live_url ?? ren.liveUrl ?? localUrl ?? '')?.replace(/\/$/, '');
 
   return {
     localUrl: localUrl ?? '',
     liveUrl,
     serve,
-    output: resolve(root, cli.output ?? pre.output ?? 'website'),
+    output: resolve(root, cli.output ?? ren.output ?? 'website'),
     root,
-    routerBase: pre.routerBase ?? null,
+    routerBase: ren.routerBase ?? null,
     /** Logical path prefixes (after locale) that skip sticky locale prefix; see manifest:locale-route-exclude */
     localeRouteExclude: normalizeLocaleRouteExclude(
-      pre.localeRouteExclude ?? pre.localeStickyExclude
+      ren.localeRouteExclude ?? ren.localeStickyExclude
     ),
-    locales: pre.locales,
-    redirects: Array.isArray(pre.redirects) ? pre.redirects : [],
-    wait: cli.wait ?? pre.wait ?? null,
+    locales: ren.locales,
+    redirects: Array.isArray(ren.redirects) ? ren.redirects : [],
+    wait: cli.wait ?? ren.wait ?? null,
     waitAfterIdle: 0,
     // Default concurrency: 2.  Chromium per-page memory overhead is large and
     // our hydration source-attribute map adds more per page.  On big sites
     // (>100 routes) higher concurrency crashes the browser with OOM/target
     // closed errors.  Users can override for small projects with --concurrency.
-    concurrency: Math.max(1, cli.concurrency ?? pre.concurrency ?? 2),
-    retries: Math.max(0, cli.retries ?? pre.retries ?? 2),
+    concurrency: Math.max(1, cli.concurrency ?? ren.concurrency ?? 2),
+    retries: Math.max(0, cli.retries ?? ren.retries ?? 2),
     localeSubstitution: true,
     localeSubstitutionExclude: [],
     /** Explicit locale-neutral paths to render in addition to those discovered automatically.
      *  Each entry is expanded to all locale variants (e.g. "legal/privacy" → "cs/legal/privacy", ...) */
-    paths: Array.isArray(pre.paths)
-      ? pre.paths.map((p) => String(p).replace(/^\/+|\/+$/g, '')).filter(Boolean)
+    paths: Array.isArray(ren.paths)
+      ? ren.paths.map((p) => String(p).replace(/^\/+|\/+$/g, '')).filter(Boolean)
       : [],
     dryRun: !!cli.dryRun,
     debugPrerender: !!cli.debugPrerender,
@@ -282,12 +367,12 @@ function resolveConfig() {
     // fall back to the timeout.  10s gives slow data plugin pipelines a
     // chance while bounding worst-case per-path overhead.
     pipelineTimeout: 10000,
-    // SEO / AEO meta injection — see metaInjection() and the prerender.meta
+    // SEO / AEO meta injection — see metaInjection() and the render.meta
     // section of manifest.json.  Layered precedence (highest first):
     //   1. <template data-head> per-route (already in DOM at snapshot time)
     //   2. <head> in index.html (already in DOM at snapshot time)
-    //   3. prerender.meta.* expressions (Alpine-evaluated per route)
-    //   4. prerender.meta.fallback.* (static strings if expression empty)
+    //   3. render.meta.* expressions (Alpine-evaluated per route)
+    //   4. render.meta.fallback.* (static strings if expression empty)
     //   5. PWA-style manifest.json fields (name, description, author, icons)
     //   6. Smart defaults derived from the rendered DOM (h1, first p, etc.)
     //
@@ -298,10 +383,10 @@ function resolveConfig() {
       siteDescription: manifest.description || null,
       siteAuthor: manifest.author || null,
       icons: Array.isArray(manifest.icons) ? manifest.icons : [],
-      meta: pre.meta || null,
-      structuredData: pre.structuredData || null,
-      imageSnapshots: pre.meta?.imageSnapshots !== false, // default true
-      defaults: pre.meta?.defaults !== false,             // default true
+      meta: ren.meta || null,
+      structuredData: ren.structuredData || null,
+      imageSnapshots: ren.meta?.imageSnapshots !== false, // default true
+      defaults: ren.meta?.defaults !== false,             // default true
     },
   };
 }
@@ -735,7 +820,7 @@ function stripDataTailwindAttr(html) {
  * BEFORE the first paint — based on the user's `localStorage.theme` (their
  * saved preference) or `prefers-color-scheme` (their system preference).
  *
- * The colors plugin (`manifest.colors.js`) still runs later for reactivity
+ * The color plugin (`manifest.color.js`) still runs later for reactivity
  * (Alpine bindings, click handlers, system-preference change listener), but
  * the initial paint already has the correct class so there's no flash.
  */
@@ -841,9 +926,9 @@ function promptContinueWithRuntimeTailwind(rootDir) {
 /**
  * Build a static Tailwind stylesheet via @tailwindcss/cli (v4+), scanning project sources.
  * Only runs when the project uses data-tailwind on the manifest script tag (auto-detected).
- * Set manifest.prerender.tailwindInput to a custom CSS entry file if needed.
+ * Set manifest.render.tailwindInput to a custom CSS entry file if needed.
  */
-function runTailwindCliForPrerender(rootDir, outputDir, pre) {
+function runTailwindCliForPrerender(rootDir, outputDir, ren) {
   if (!indexHtmlUsesTailwind(rootDir)) return false;
 
   const outCss = join(outputDir, 'prerender.tailwind.css');
@@ -859,7 +944,7 @@ function runTailwindCliForPrerender(rootDir, outputDir, pre) {
   }
   let inputPath = null;
   let createdTempInput = false;
-  const userInput = pre?.tailwindInput;
+  const userInput = ren?.tailwindInput;
   if (typeof userInput === 'string' && userInput.trim()) {
     inputPath = resolve(rootDir, userInput.trim());
   }
@@ -890,10 +975,15 @@ function runTailwindCliForPrerender(rootDir, outputDir, pre) {
   }
 
   process.stdout.write('prerender: compiling Tailwind CSS (this may take a minute)...\n');
-  const r = spawnSync('npx', args, {
+  // On Windows, invoke the .cmd shim directly instead of routing through
+  // `shell: true`. With `shell: true`, every argument (including the user-
+  // controlled `tailwindInput` path from manifest.json) gets parsed by cmd.exe
+  // — so a value like `styles.css & evilcmd` would run `evilcmd`. Calling
+  // npx.cmd directly keeps args as a literal argv with no shell interpretation.
+  const command = process.platform === 'win32' ? 'npx.cmd' : 'npx';
+  const r = spawnSync(command, args, {
     cwd: rootDir,
     encoding: 'utf8',
-    shell: process.platform === 'win32',
   });
   if (createdTempInput) {
     try {
@@ -903,7 +993,7 @@ function runTailwindCliForPrerender(rootDir, outputDir, pre) {
     }
   }
   if (r.status !== 0) {
-    console.error('prerender: Tailwind CLI failed; install with `npm i -D tailwindcss @tailwindcss/cli` or check tailwindInput in manifest.prerender.');
+    console.error('prerender: Tailwind CLI failed; install with `npm i -D tailwindcss @tailwindcss/cli` or check tailwindInput in manifest.render.');
     if (r.stderr) console.error(r.stderr);
     if (r.stdout) console.error(r.stdout);
     return false;
@@ -1745,16 +1835,100 @@ function resolveHeadXBindings(html, xData) {
 // .fallback.image), capture a 1200×630 PNG of the rendered page and use that as
 // the og:image / twitter:image.  Saved to <output>/og/<sanitized-path>.png.
 //
-// 1200×630 is the OpenGraph / Twitter / LinkedIn recommended dimension.  We set
-// the viewport before snapshotting so layouts intended for desktop render
-// correctly (mobile-first sites otherwise look misaligned in social previews).
-async function takeOgSnapshot(page, outputDir, pathSeg) {
+// 1200×630 is the OpenGraph / Twitter / LinkedIn recommended dimension.
+
+const sha = (s) => createHash('sha256').update(String(s)).digest('hex').slice(0, 16);
+
+/**
+ * Hash of the project-wide assets that affect every page's visual output
+ * (theme CSS, manifest config, root HTML shell).  Computed once per prerender
+ * run and folded into each route's snapshot-cache key so that touching any of
+ * these invalidates every cached OG image — a more correct behaviour than
+ * per-route source-mtime caching, which would miss shared-chrome changes.
+ *
+ * Files included are conventional Manifest project assets that influence
+ * layout/theme; missing files are recorded as the literal `missing` so the
+ * hash still differs from an installation that has the file present.
+ */
+function computeGlobalAssetSignature(rootDir) {
+  const candidates = [
+    'manifest.json',
+    'manifest.theme.css',
+    'manifest.utilities.css',
+    'index.html',
+  ];
+  const parts = candidates.map((rel) => {
+    const p = join(rootDir, rel);
+    try {
+      return `${rel}:${sha(readFileSync(p, 'utf8'))}`;
+    } catch {
+      return `${rel}:missing`;
+    }
+  });
+  return sha(parts.join('|'));
+}
+
+/**
+ * Snapshot the page at 1200×630 and write to <output>/og/<slug>.png.  Cache
+ * sidecar lives in <root>/.mnfst-cache/og/ — outside the output dir, which is
+ * wiped at the start of every prerender.  On cache hit, the cached PNG is
+ * copied into the output dir and the screenshot is skipped — saves ~0.2–0.5s
+ * per hit, which adds up across hundreds of routes × locales.  Hash inputs:
+ *   - globalAssetSignature (theme CSS / manifest config / root HTML)
+ *   - body outerHTML, normalised to strip non-visual volatile attributes
+ *   - html.className (theme variant: light/dark/etc.)
+ */
+async function takeOgSnapshot(page, outputDir, pathSeg, globalAssetSignature, cacheDir) {
   const fileSeg = pathSeg === '' || pathSeg === '__404__'
     ? 'index'
     : pathSeg.replace(/\//g, '-').replace(/[^a-zA-Z0-9_-]/g, '_');
   const ogDir = join(outputDir, 'og');
   try { mkdirSync(ogDir, { recursive: true }); } catch { /* exists */ }
   const filePath = join(ogDir, `${fileSeg}.png`);
+  // Cache locations — outside the output dir so they survive the per-run
+  // rmSync.  cacheDir is .mnfst-cache/og under the project root.
+  const cachePngPath = cacheDir ? join(cacheDir, `${fileSeg}.png`) : null;
+  const cacheHashPath = cacheDir ? join(cacheDir, `${fileSeg}.hash`) : null;
+
+  // Cache lookup: fingerprint the rendered DOM and check against the stored
+  // hash.  The fingerprint normalises away attribute values assigned in
+  // iteration order (data-hydrate-id, data-component-N) and randomly-generated
+  // CSS anchor-name positioning IDs.  Without normalisation the hash would
+  // never match across runs and the cache would always miss.
+  let contentHash = null;
+  try {
+    const fingerprint = await page.evaluate(() => {
+      const body = document.body?.outerHTML || '';
+      const htmlClass = document.documentElement?.className || '';
+      const normalised = body
+        .replace(/\sdata-hydrate-id="[^"]*"/g, '')
+        .replace(/\sdata-component="[^"]*"/g, '')
+        .replace(/\sdata-pre-rendered="[^"]*"/g, '')
+        .replace(/\sid="(?:tab-|code-)[^"]*"/g, '')
+        .replace(/\saria-controls="(?:code-)[^"]*"/g, '')
+        .replace(/\saria-labelledby="(?:tab-)[^"]*"/g, '')
+        // CSS anchor-positioning IDs (e.g. `--dropdown-zc7nofh3c`) are
+        // regenerated per run by the dropdown/popover system.
+        .replace(/--dropdown-[a-z0-9]+/g, '--dropdown-X')
+        .replace(/--popover-[a-z0-9]+/g, '--popover-X')
+        .replace(/--anchor-[a-z0-9]+/g, '--anchor-X');
+      return normalised + '\n@html:' + htmlClass;
+    });
+    contentHash = sha(`${globalAssetSignature || ''}|${fingerprint}`);
+    if (cachePngPath && existsSync(cachePngPath) && existsSync(cacheHashPath)) {
+      const stored = readFileSync(cacheHashPath, 'utf8').trim();
+      if (stored === contentHash) {
+        // Cache hit — copy the cached PNG into the output dir.  We still need
+        // a copy in /og/ so the served site has it; the cache just lets us
+        // skip the screenshot + PNG-encode work.
+        try {
+          cpSync(cachePngPath, filePath);
+          return `/og/${fileSeg}.png`;
+        } catch { /* copy failure — fall through to fresh snapshot */ }
+      }
+    }
+  } catch { /* hash failure is non-fatal — fall through to fresh snapshot */ }
+
   try {
     // Viewport stays at the page-creation default (1200×800).  Clipping a
     // 1200×630 region from the top gives the OG/Twitter card aspect ratio
@@ -1780,9 +1954,21 @@ async function takeOgSnapshot(page, outputDir, pathSeg) {
       const sz = statSync(filePath).size;
       if (sz < 15 * 1024) {
         unlinkSync(filePath);
+        // Drop the cache too so the next run doesn't trust it.
+        if (cachePngPath) { try { unlinkSync(cachePngPath); } catch { /* missing is fine */ } }
+        if (cacheHashPath) { try { unlinkSync(cacheHashPath); } catch { /* missing is fine */ } }
         return null;
       }
     } catch { /* stat failure is non-fatal */ }
+    // Populate the cache: copy the fresh PNG into the cache dir and write the
+    // content hash sidecar.  Hash failure earlier leaves contentHash null —
+    // in that case we don't cache (correct fallback: prefer to re-snapshot
+    // than to claim a stale cache is valid).
+    if (cacheDir && contentHash) {
+      try { mkdirSync(cacheDir, { recursive: true }); } catch { /* exists */ }
+      try { cpSync(filePath, cachePngPath); } catch { /* ignore */ }
+      try { writeFileSync(cacheHashPath, contentHash, 'utf8'); } catch { /* ignore */ }
+    }
     return `/og/${fileSeg}.png`;
   } catch (e) {
     // Failures here are non-fatal — fall back to whatever other og:image source
@@ -2661,7 +2847,7 @@ async function runPrerender(config) {
 
   const defaultLocale = locales[0] ?? null;
   const routeSegments = discoverRoutes(manifest, config.root);
-  // Merge any explicitly configured paths (manifest.prerender.paths) into the discovered segments.
+  // Merge any explicitly configured paths (manifest.render.paths) into the discovered segments.
   // These are treated as locale-neutral and get full locale-expansion like all other discovered paths.
   if (config.paths && config.paths.length > 0) {
     const segSet = new Set(routeSegments);
@@ -2708,7 +2894,7 @@ async function runPrerender(config) {
   const outputResolved = resolve(config.output);
   const rootResolved = resolve(config.root);
   // Router base = URL pathname to the app root. When dist is deployed as site root (e.g. Appwrite), use "".
-  // Set manifest.prerender.routerBase only when the app is served from a subpath (e.g. /app).
+  // Set manifest.render.routerBase only when the app is served from a subpath (e.g. /app).
   let routerBasePath = null;
   if (config.routerBase != null && String(config.routerBase).trim() !== '') {
     const trimmed = String(config.routerBase).replace(/^\/+|\/+$/g, '').trim();
@@ -2723,9 +2909,9 @@ async function runPrerender(config) {
   mkdirSync(outputResolved, { recursive: true });
   copyProjectIntoDist(rootResolved, outputResolved);
 
-  const pre = manifest.prerender ?? {};
-  const bundleUtilities = pre.utilitiesBundle !== false;
-  const tailwindBuilt = runTailwindCliForPrerender(rootResolved, outputResolved, pre);
+  const ren = manifest.render ?? {};
+  const bundleUtilities = ren.utilitiesBundle !== false;
+  const tailwindBuilt = runTailwindCliForPrerender(rootResolved, outputResolved, ren);
   const utilityBlocks = [];
 
   // Launch a fresh browser instance.  Chromium is known to accumulate memory
@@ -2757,12 +2943,18 @@ async function runPrerender(config) {
         console.error('  npm i -D puppeteer-core @sparticuz/chromium');
         process.exit(1);
       }
+      // Chrome's sandbox is the primary defense against renderer-process
+      // exploits — disabling it means any RCE in a rendered page runs as the
+      // developer's UID with full filesystem access. We render arbitrary CDN
+      // scripts and third-party iframes, so the threat is real. Opt-in only
+      // for CI environments where the sandbox legitimately can't initialize:
+      // set MNFST_RENDER_NO_SANDBOX=1 to add the flags back.
+      const extraArgs = process.env.MNFST_RENDER_NO_SANDBOX === '1'
+        ? ['--no-sandbox', '--disable-setuid-sandbox']
+        : [];
       return await puppeteer.default.launch({
         headless: true,
-        args: [
-          '--no-sandbox',
-          '--disable-setuid-sandbox',
-        ],
+        args: extraArgs,
       });
     }
   }
@@ -2773,12 +2965,12 @@ async function runPrerender(config) {
   // substantial, and we also now maintain a per-page source-attribute Map for
   // the hydration contract.  On large sites (>100 routes) higher concurrency
   // spikes memory and crashes the browser.  Users can still override via
-  // --concurrency or manifest.prerender.concurrency.
+  // --concurrency or manifest.render.concurrency.
   const concurrency = config.concurrency;
   const maxRetries = config.retries ?? 2;
   // Recycle the browser every N processed pages to bound resource growth.
-  // Configurable via manifest.prerender.browserRecycleEvery.
-  const browserRecycleEvery = Math.max(0, pre.browserRecycleEvery ?? 40);
+  // Configurable via manifest.render.browserRecycleEvery.
+  const browserRecycleEvery = Math.max(0, ren.browserRecycleEvery ?? 40);
   let pagesSinceRecycle = 0;
   const recycleLock = { busy: false };
   // Workers block on this promise before touching `browser`.  While a recycle
@@ -2856,6 +3048,19 @@ async function runPrerender(config) {
 
   process.stdout.write(`Prerendering ${pathTotal} path(s) (${puppeteerTotal} via Puppeteer, ${localeVariantPaths.length} via substitution)...\n`);
 
+  // Asset-wide fingerprint used as a cache-invalidator for OG snapshots:
+  // changes to theme CSS, manifest config, or the root index.html mean every
+  // route's visual chrome has changed, so the snapshot cache must drop.  Per-
+  // route content hashes (in takeOgSnapshot) catch route-specific changes.
+  // The cache lives at <root>/.mnfst-cache/og/ — survives the output-dir
+  // rmSync that fires at the start of every prerender.
+  const globalAssetSig = config.seo?.imageSnapshots
+    ? computeGlobalAssetSignature(config.root)
+    : '';
+  const ogCacheDir = config.seo?.imageSnapshots
+    ? join(config.root, '.mnfst-cache', 'og')
+    : null;
+
   function pushDebug(row) {
     if (!config.debugPrerender) return;
     debugRows.push(row);
@@ -3111,7 +3316,7 @@ async function runPrerender(config) {
           || !!config.seo.meta?.fallback?.image
           || await page.evaluate(() => !!document.head.querySelector('meta[property="og:image"]'));
         if (!ogImageHandled) {
-          earlySnapshotUrl = await takeOgSnapshot(page, config.output, is404 ? '__404__' : pathSeg);
+          earlySnapshotUrl = await takeOgSnapshot(page, config.output, is404 ? '__404__' : pathSeg, globalAssetSig, ogCacheDir);
         }
       }
 
@@ -3328,14 +3533,14 @@ async function runPrerender(config) {
         // Interactive Manifest-registered directives that attach click/hover/
         // observer state at runtime and therefore need the live Alpine scope.
         const INTERACTIVE_DIRECTIVES = new Set([
-          'x-colors', 'x-dropdown', 'x-tooltip', 'x-tab', 'x-tabpanel',
+          'x-color', 'x-dropdown', 'x-tooltip', 'x-tab', 'x-tabpanel',
           'x-toast', 'x-carousel', 'x-resize', 'x-anchors', 'x-model',
           'x-files', 'x-data-files',
         ]);
         // Runtime-only Alpine magics whose values change after the prerender
         // snapshot (e.g. via media query, route change, auth state).  Bindings
         // referencing these must re-evaluate in the live page.
-        const RUNTIME_MAGIC_RX = /(?<!['"])\$(colors|locale|url|auth|search|query|toast)\b/;
+        const RUNTIME_MAGIC_RX = /(?<!['"])\$(color|locale|url|auth|search|query|toast)\b/;
 
         const isDiffBindingAttr = (name) =>
           name === ':class' || name === 'x-bind:class' ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnfst-render",
-  "version": "0.5.24",
+  "version": "0.5.25",
   "description": "Render Manifest sites to static HTML for SEO",
   "type": "module",
   "bin": {