@koehler8/cms 1.0.0-beta.8 → 1.0.0

package/README.md

@@ -1,10 +1,16 @@
 # Vertex CMS
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![GitHub Packages](https://img.shields.io/badge/npm-GitHub%20Packages-brightgreen)](https://github.com/koehler8/cms/packages)
+[![npm](https://img.shields.io/badge/npm-registry.npmjs.org-brightgreen)](https://www.npmjs.com/package/@koehler8/cms)
 
 Vertex CMS is a lightweight, config-driven Vue 3 framework with theming, extensions, and SSG support.
 
+## Accessibility
+
+Vertex CMS targets **[WCAG 2.2 Level AA](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_overview&versions=2.2&levels=aaa)** as a hard requirement for the bundled components, the `base` theme, and the page wrapper. Sites that ship on this framework with the bundled pieces inherit a skip link, single `<main>` landmark, real form labels with `aria-live` errors, visible focus rings, modal focus trap+restore, AA-verified palette contrast, and `prefers-reduced-motion` support out of the box.
+
+When extending or theming, **don't regress AA**. See the "Accessibility" section of [CLAUDE.md](CLAUDE.md#accessibility-wcag-22-level-aa--hard-requirement) for the requirements, the token naming conventions for safe colors, and the audit checklist to run when changing palette/markup/CSS.
+
 ## Quick Start
 
 ### 1. Create a site repo
@@ -12,30 +18,33 @@ Vertex CMS is a lightweight, config-driven Vue 3 framework with theming, extensi
 ```
 my-site/
   site/
-    config/
-      site.json        # Site metadata and settings
-      shared.json      # Shared content blocks
-      pages/
-        home.json      # Per-page content
-    assets/            # Images and media
-    style.css          # Site-specific overrides (optional)
+    content/
+      content.config.json    # { "baseLocale": "en" }
+      en/
+        site.json            # Site metadata and settings
+        shared.json          # Shared content blocks
+        pages/
+          home.json          # Per-page content
+    assets/img/              # Images and media
+    components/              # Site-local Vue components (optional)
+    style.css                # Site-specific overrides (optional)
   .env
   package.json
   vite.config.js
 ```
 
-### 2. Install
+Or scaffold all of it in one step:
 
-Configure npm to use GitHub Packages for the `@koehler8` scope:
-
-```
-@koehler8:registry=https://npm.pkg.github.com
+```bash
+npx --package @koehler8/cms@^1.0.0 cms-create-site my-site
 ```
 
-Then install:
+### 2. Install
+
+Vertex CMS is published to the public npm registry (`registry.npmjs.org`) — no scope configuration needed:
 
 ```bash
-npm install @koehler8/cms vue vue-router vite vite-ssg @vitejs/plugin-vue
+npm install @koehler8/cms@^1.0.0 vue vue-router vite vite-ssg @vitejs/plugin-vue
 ```
 
 ### 3. Configure Vite
@@ -58,11 +67,15 @@ export default {
 ### 4. Run
 
 ```bash
-npm run dev       # Development server
-npm run build     # Production build
-vite-ssg build    # Static site generation
+npm run dev        # Development server
+npm run build      # Production build (SPA)
+npx cms-ssg-build  # Static site generation — memory-bounded shards + blank-page gate
 ```
 
+(`vite-ssg build` also works directly, but `cms-ssg-build` wraps it with a
+bounded heap, route sharding for large sites, and a post-render check that
+fails the build if any page comes out blank.)
+
 ## Plugin Options
 
 | Option | Default | Description |
@@ -97,6 +110,20 @@ All files use flat dot-notation keys in alphabetical order. The base locale (spe
 
 **Supported locales:** en, fr, es, de, ja, ko, pt, ru, tr, vi, id, zh, th, hi, fil
 
+### Analytics & consent
+
+Set `"googleId"` in `site.json` to enable Google Analytics. How the
+not-yet-answered consent state is treated is configurable:
+
+```json
+{ "analytics.consentMode": "opt-in" }
+```
+
+- `"opt-out"` (default) — analytics load while consent is pending and stop if
+  the visitor declines. Common US posture.
+- `"opt-in"` — analytics stay off until the visitor explicitly accepts.
+  Use this for sites with EU/EEA audiences (GDPR / ePrivacy).
+
 ## Themes
 
 Themes export a manifest with design tokens (palette, typography, surfaces, CTAs, etc.) that are applied as CSS variables at runtime.
@@ -118,10 +145,10 @@ Each extension has an `extension.config.json` manifest defining:
 - **assets** -- CSS and static file references
 - **dependencies** -- Required npm packages
 
-Validate extension manifests with:
+The manifest JSON Schema ships with the package — point your editor or JSON-schema tooling at it:
 
-```bash
-npx cms-validate-extensions --site-dir ./site
+```json
+{ "$schema": "node_modules/@koehler8/cms/extensions/manifest.schema.json" }
 ```
 
 ## Built-in Components
@@ -163,6 +190,27 @@ npx cms-validate-extensions --site-dir ./site
 | `useLazyImage` | Lazy image loading with IntersectionObserver |
 | `usePromoBackgroundStyles` | Promo section background styling |
 
+## Draft Mode
+
+Pages can be gated behind a site-wide password before launch: `"draft": true`
+on a page, `"draftPaths": [...]` prefixes, or `"draft": true` site-wide in
+`site.json`, with the password in `"draftPassword"`. The build replaces the
+plaintext password with a SHA-256 hash (plaintext never ships), gated pages
+render only the password gate in the SSG HTML, are marked `noindex`, and are
+omitted from `sitemap.xml`.
+
+**Know what the gate is — and isn't.** Draft mode is a pre-launch
+convenience, not access control:
+
+- The password hash ships in the public bundle (unsalted SHA-256 — a weak or
+  guessable password is trivially recoverable).
+- The gated page's `content.*` keys still ship in the page's hydration JSON
+  so Vue can mount after unlock — a determined reader can parse them out of
+  the HTML without the password.
+
+For genuinely confidential content (NDA material, unannounced listings),
+don't put it in the page JSON until launch.
+
 ## Testing
 
 The framework uses [Vitest](https://vitest.dev/) with happy-dom for unit testing.
@@ -178,34 +226,66 @@ Tests live in `tests/` mirroring the source structure (`tests/utils/`, `tests/co
 ## CLI Commands
 
 ```bash
+# Scaffold a new site / theme / extension
+npx cms-create-site my-site
+npx cms-create-theme my-theme
+npx cms-create-extension my-extension
+
+# Static site generation (memory-bounded shards + blank-page gate)
+npx cms-ssg-build
+
 # Generate favicon.ico, logo.png, og-image.jpg from source assets
 npx cms-generate-public-assets --site-dir ./site
 
-# Validate theme manifests
-npx cms-validate-themes
+# Validate theme manifests (bundled + your site-local themes/)
+npx cms-validate-themes --site-dir ./site
 
-# Validate extension manifests
-npx cms-validate-extensions --site-dir ./site
+# Validate extension manifests (site-local extensions/ + named packages)
+npx cms-validate-extensions --site-dir ./site @koehler8/cms-ext-compliance
 ```
 
+(The Vite plugin also runs the same extension-manifest validation on every
+build and fails loudly on an invalid manifest — the CLIs are for checking
+outside a build.)
+
 ## Exports
 
+The supported public API surface — these specifiers are covered by semver:
+
 ```js
-import cmsPlugin from '@koehler8/cms/vite';           // Vite plugin
+// Build integration
+import cmsPlugin from '@koehler8/cms/vite';            // Vite plugin
 import { createCmsApp } from '@koehler8/cms/app';      // App factory
+
+// Utils commonly used by site components and extensions
 import { loadConfigData } from '@koehler8/cms/utils/loadConfig';
 import { resolveAsset, resolveMedia } from '@koehler8/cms/utils/assetResolver';
 import { useResponsiveImage } from '@koehler8/cms/utils/imageSources';
-// ... and all other utils/*, composables/*, components/*, etc.
+import { trackEvent } from '@koehler8/cms/utils/analytics';
+import { hasAcceptedConsent } from '@koehler8/cms/utils/cookieConsent';
+import { formatTokenAmount } from '@koehler8/cms/utils/formatNumber';
+import { resolveThemeColor } from '@koehler8/cms/utils/themeColors';
+
+// Bundled components and composables (by file)
+import Header from '@koehler8/cms/components/Header.vue';
+import { useComingSoonConfig } from '@koehler8/cms/composables/useComingSoonConfig';
 ```
 
+The extension manifest schema is exported at
+`@koehler8/cms/extensions/manifest.schema.json`.
+
+Other `utils/*`, `composables/*`, `components/*`, `themes/*`, and
+`extensions/*` deep imports resolve too, but anything not listed above is
+**internal** — it may move or change between minor versions.
+
 ## Environment Variables
 
 | Variable | Used By | Description |
 |----------|---------|-------------|
 | `VITE_SHOW_COOKIE_BANNER` | cookieConsent | Enable cookie consent banner |
+| `VITE_APP_VERSION` | appInfo | Override the framework version string reported in the bundle |
 | `CMS_SITE_DIR` | generate-public-assets | Site directory path (build scripts) |
-| `FAVICON_BG` / `FAVICON_FG` | generate-public-assets | Favicon background/foreground colors |
+| `FAVICON_BG` / `FAVICON_FG` | generate-public-assets | Fallback favicon/og colors (default: stable per-title pair) |
 
 ## License
 

package/bin/cms-create-extension.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const scriptPath = path.resolve(__dirname, '..', 'scripts', 'create-extension.mjs');
+await import(pathToFileURL(scriptPath).href);

package/bin/cms-create-site.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const scriptPath = path.resolve(__dirname, '..', 'scripts', 'create-site.mjs');
+await import(pathToFileURL(scriptPath).href);

package/bin/cms-create-theme.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const scriptPath = path.resolve(__dirname, '..', 'scripts', 'create-theme.mjs');
+await import(pathToFileURL(scriptPath).href);

package/bin/cms-ssg-build.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+// Thin wrapper that runs the memory-bounded SSG build orchestrator from the
+// consuming site's cwd. The script does its own argument handling, spawns the
+// per-shard `vite-ssg build` processes, and prints its own status.
+// See scripts/ssg-build/index.mjs and SSG-MEMORY-PLAN.md.
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+await import(path.resolve(__dirname, '..', 'scripts', 'ssg-build', 'index.mjs'));

package/bin/cms-validate-extensions.js

@@ -4,14 +4,18 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 
 const args = process.argv.slice(2);
 let siteDir = './site';
+const packages = [];
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--site-dir' && args[i + 1]) {
     siteDir = args[i + 1];
     i++;
+  } else if (!args[i].startsWith('-')) {
+    packages.push(args[i]);
   }
 }
 
 process.env.CMS_SITE_DIR = path.resolve(process.cwd(), siteDir);
+process.env.CMS_VALIDATE_PACKAGES = packages.join(',');
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const scriptPath = path.resolve(__dirname, '..', 'scripts', 'validate-extensions.mjs');

package/bin/cms-validate-themes.js

@@ -2,6 +2,17 @@
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 
+const args = process.argv.slice(2);
+let siteDir = './site';
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === '--site-dir' && args[i + 1]) {
+    siteDir = args[i + 1];
+    i++;
+  }
+}
+
+process.env.CMS_SITE_DIR = path.resolve(process.cwd(), siteDir);
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const scriptPath = path.resolve(__dirname, '..', 'scripts', 'validate-themes.mjs');
 await import(pathToFileURL(scriptPath).href);

package/extensions/manifest.schema.json

@@ -41,7 +41,7 @@
     },
     "components": {
       "type": "array",
-      "minItems": 1,
+      "minItems": 0,
       "items": {
         "type": "object",
         "additionalProperties": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koehler8/cms",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0",
   "description": "Vertex CMS — lightweight, config-driven Vue 3 framework with theming, extensions, and SSG support",
   "license": "MIT",
   "type": "module",
@@ -13,9 +13,16 @@
   "bugs": {
     "url": "https://github.com/koehler8/cms/issues"
   },
-  "keywords": ["vue", "cms", "vite", "ssg", "theming", "extensions", "config-driven"],
+  "keywords": [
+    "vue",
+    "cms",
+    "vite",
+    "ssg",
+    "theming",
+    "extensions",
+    "config-driven"
+  ],
   "scripts": {
-    "postinstall": "node scripts/patch-lru-cache-tla.js",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"
@@ -33,21 +40,21 @@
     "./components/*.vue": "./src/components/*.vue",
     "./components/*.js": "./src/components/*.js",
     "./components/*": "./src/components/*",
-    "./router": "./src/router/index.js",
     "./themes/*.js": "./src/themes/*.js",
     "./themes/*": "./src/themes/*.js",
+    "./extensions/manifest.schema.json": "./extensions/manifest.schema.json",
     "./extensions/*.js": "./src/extensions/*.js",
     "./extensions/*": "./src/extensions/*.js",
-    "./constants/*.js": "./src/constants/*.js",
-    "./constants/*": "./src/constants/*.js",
-    "./plugins/*.js": "./src/plugins/*.js",
-    "./plugins/*": "./src/plugins/*.js",
     "./package.json": "./package.json"
   },
   "bin": {
     "cms-generate-public-assets": "./bin/cms-generate-public-assets.js",
+    "cms-ssg-build": "./bin/cms-ssg-build.js",
     "cms-validate-themes": "./bin/cms-validate-themes.js",
-    "cms-validate-extensions": "./bin/cms-validate-extensions.js"
+    "cms-validate-extensions": "./bin/cms-validate-extensions.js",
+    "cms-create-theme": "./bin/cms-create-theme.js",
+    "cms-create-extension": "./bin/cms-create-extension.js",
+    "cms-create-site": "./bin/cms-create-site.js"
   },
   "files": [
     "src",
@@ -58,7 +65,8 @@
     "templates",
     "bin",
     "vite-plugin.js",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "peerDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
@@ -68,17 +76,29 @@
     "vue-router": "^5.0.0"
   },
   "dependencies": {
-    "@unhead/vue": "^2.0.19",
-    "ajv": "^8.17.1",
+    "@unhead/vue": "^2.1.15",
+    "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
+    "pinia": "^3.0.1",
+    "sharp": "^0.35.3"
+  },
+  "optionalDependencies": {
     "canvas": "^3.2.0",
     "dotenv": "^17.2.3",
-    "pinia": "^3.0.1",
     "png-to-ico": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/test-utils": "^2.4.6",
-    "happy-dom": "^20.8.9",
-    "vitest": "^4.1.4"
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vue/test-utils": "^2.4.10",
+    "happy-dom": "^20.9.0",
+    "vite": "^8.2.1",
+    "vitest": "^4.1.6",
+    "vue": "^3.5.39",
+    "vue-router": "^5.0.7"
+  },
+  "engines": {
+    "node": ">=20.19.0",
+    "npm": ">=10.8.0"
   }
 }

package/scripts/create-extension.mjs

@@ -0,0 +1,11 @@
+import { runScaffold } from './scaffold.mjs';
+
+const result = await runScaffold({
+  kind: 'extension',
+  argv: process.argv.slice(2),
+});
+
+if (result.message) {
+  process[result.ok ? 'stdout' : 'stderr'].write(result.message + '\n');
+}
+process.exit(result.ok ? 0 : 1);

package/scripts/create-site.mjs

@@ -0,0 +1,11 @@
+import { runScaffold } from './scaffold.mjs';
+
+const result = await runScaffold({
+  kind: 'site',
+  argv: process.argv.slice(2),
+});
+
+if (result.message) {
+  process[result.ok ? 'stdout' : 'stderr'].write(result.message + '\n');
+}
+process.exit(result.ok ? 0 : 1);

package/scripts/create-theme.mjs

@@ -0,0 +1,11 @@
+import { runScaffold } from './scaffold.mjs';
+
+const result = await runScaffold({
+  kind: 'theme',
+  argv: process.argv.slice(2),
+});
+
+if (result.message) {
+  process[result.ok ? 'stdout' : 'stderr'].write(result.message + '\n');
+}
+process.exit(result.ok ? 0 : 1);

package/scripts/generate-public-assets.js

@@ -6,13 +6,35 @@
 // {CMS_SITE_DIR}/content/{baseLocale}/site.json, output is written to
 // {dirname(CMS_SITE_DIR)}/public/.
 
-import 'dotenv/config';
-
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { createCanvas, registerFont } from 'canvas';
-import pngToIco from 'png-to-ico';
+
+// dotenv is optional — without it, config comes from the process environment.
+try {
+  await import('dotenv/config');
+} catch {
+  /* optional dependency not installed */
+}
+
+// canvas (native) and png-to-ico are optionalDependencies: npm skips them
+// when their platform build fails, so a consumer that never runs this
+// command still installs cleanly. This command DOES need them — fail loudly
+// with the fix instead of a bare module-not-found stack.
+let createCanvas;
+let registerFont;
+let pngToIco;
+try {
+  ({ createCanvas, registerFont } = await import('canvas'));
+  ({ default: pngToIco } = await import('png-to-ico'));
+} catch (err) {
+  console.error('❌ cms-generate-public-assets requires the optional dependencies `canvas` and `png-to-ico`.');
+  console.error('   They were skipped (or failed to build) during install — canvas is a native module');
+  console.error('   and needs system libraries (cairo, pango) on platforms without prebuilds.');
+  console.error('   Install them explicitly:  npm install canvas png-to-ico');
+  console.error(`   Underlying error: ${err.message}`);
+  process.exit(1);
+}
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -83,6 +105,37 @@ function luminance({ r, g, b }) {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
 
+const FALLBACK_COLOR_PAIRS = [
+  ['#ffffff', '#000000'],
+  ['#000000', '#ffffff'],
+  ['#ff0000', '#ffffff'],
+  ['#0000ff', '#ffffff'],
+  ['#008000', '#ffffff'],
+  ['#ffff00', '#000000'],
+  ['#ff00ff', '#000000'],
+  ['#00ffff', '#000000'],
+  ['#1e90ff', '#ffffff'],
+  ['#ff8c00', '#000000'],
+  ['#4b0082', '#ffffff'],
+  ['#32cd32', '#000000'],
+  ['#8b0000', '#ffffff'],
+  ['#ffd700', '#000000'],
+  ['#ff69b4', '#000000'],
+  ['#2f4f4f', '#ffffff']
+];
+
+// Deterministic per-site pick: the same title always yields the same pair,
+// so generated assets keep their colors across deploys (public/ is rebuilt
+// on every build).
+function getStableColorPair(seed) {
+  const s = String(seed || '');
+  let hash = 5381;
+  for (let i = 0; i < s.length; i++) {
+    hash = ((hash * 33) ^ s.charCodeAt(i)) >>> 0;
+  }
+  return FALLBACK_COLOR_PAIRS[hash % FALLBACK_COLOR_PAIRS.length];
+}
+
 // Try to register a professional-looking font if available
 function tryRegisterFonts() {
   const candidates = [
@@ -336,44 +389,16 @@ async function generateFavicon() {
     shouldGenerateOg = true;
   }
 
-  const providedFavicon = resolveSiteAssetFile(['favicon.ico']);
-  if (providedFavicon) {
-    fs.copyFileSync(providedFavicon, icoPath);
-    console.log(`✅ Found existing favicon; copied from ${providedFavicon}`);
-    return;
-  }
-
-  console.log(`Generating favicon.ico using letter "${letter}" from site "${siteTitle}"`);
-
-  function getRandomColorPair() {
-    const colors = [
-      ['#ffffff', '#000000'],
-      ['#000000', '#ffffff'],
-      ['#ff0000', '#ffffff'],
-      ['#0000ff', '#ffffff'],
-      ['#008000', '#ffffff'],
-      ['#ffff00', '#000000'],
-      ['#ff00ff', '#000000'],
-      ['#00ffff', '#000000'],
-      ['#1e90ff', '#ffffff'],
-      ['#ff8c00', '#000000'],
-      ['#4b0082', '#ffffff'],
-      ['#32cd32', '#000000'],
-      ['#8b0000', '#ffffff'],
-      ['#ffd700', '#000000'],
-      ['#ff69b4', '#000000'],
-      ['#2f4f4f', '#ffffff']
-    ];
-    return colors[Math.floor(Math.random() * colors.length)];
-  }
-
   let bg = process.env.FAVICON_BG;
   let fg = process.env.FAVICON_FG;
 
   if (!bg || !fg) {
-    [bg, fg] = getRandomColorPair();
+    [bg, fg] = getStableColorPair(siteTitle);
   }
 
+  // The fallback og-image must generate before the provided-favicon early
+  // return: socialMeta emits og:image → /og-image.jpg on every page, so a
+  // site that ships its own favicon.ico but no og-image still needs one.
   if (shouldGenerateOg) {
     try {
       const ogBuffer = renderOgImageBuffer(siteTitle, { width: 1200, height: 630, bg, fg });
@@ -384,6 +409,15 @@ async function generateFavicon() {
     }
   }
 
+  const providedFavicon = resolveSiteAssetFile(['favicon.ico']);
+  if (providedFavicon) {
+    fs.copyFileSync(providedFavicon, icoPath);
+    console.log(`✅ Found existing favicon; copied from ${providedFavicon}`);
+    return;
+  }
+
+  console.log(`Generating favicon.ico using letter "${letter}" from site "${siteTitle}"`);
+
   const sizes = [256, 128, 64, 48, 32, 16];
   const pngBuffers = sizes.map((s) => renderLetterPng(letter, s, { bg, fg }));
 

package/scripts/image-variants/cache.js

@@ -0,0 +1,40 @@
+/**
+ * Compute the per-site variant cache directory.
+ *
+ * Layout:
+ *   {siteRoot}/node_modules/.cache/@koehler8/cms/image-variants/{siteKey}/
+ *
+ * where siteKey is the first 8 hex chars of sha1(siteDir). The keying
+ * prevents cache collisions when @koehler8/cms is hoisted in a workspace
+ * (one framework install serves multiple sites — without per-site keys,
+ * concurrent builds would clobber each other).
+ *
+ * The cache lives under the SITE's node_modules (matching Vite's own
+ * node_modules/.vite/ convention) so each site's cache is local to its
+ * own project tree.
+ */
+
+import crypto from 'node:crypto';
+import path from 'node:path';
+
+export function siteKeyFor(siteDir) {
+  return crypto
+    .createHash('sha1')
+    .update(path.resolve(siteDir))
+    .digest('hex')
+    .slice(0, 8);
+}
+
+export function computeVariantCacheDir(siteRoot, siteDir) {
+  const root = path.resolve(siteRoot);
+  const key = siteKeyFor(siteDir || siteRoot);
+  return path.join(
+    root,
+    'node_modules',
+    '.cache',
+    '@koehler8',
+    'cms',
+    'image-variants',
+    key,
+  );
+}