@getvitops/astro 8.2.0 → 8.3.0-alpha.1

package/dist/index.mjs

@@ -1,14 +1,17 @@
 import { t as resolveOrganizationName } from "./config-adapters-CbTywgEY.mjs";
 import { n as TRACKING_ENDPOINT, r as resolveTracking, t as TRACKING_COOKIE } from "./tracking-Cb3A0BrC.mjs";
+import { createRequire } from "node:module";
 import { cpSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { isConfig, renderRobotsTxt, resolveConfig } from "@getvitops/generator";
 import { collectIconRefs, faviconLinks, generateFavicons, generateIconInclude, resolveIcon, scanFiles, writeFaviconManifest } from "@getvitops/utils";
 import vitopsPlugin from "@getvitops/vite";
+import { REVIEWS_CACHE_PATH, readCache } from "@getvitops/utils/reviews";
 import { AD_PLATFORMS, AD_PROVIDER_KEYS, normalizeConversionLabels } from "@getvitops/utils/ads";
 import { fontProviders } from "astro/config";
 import { t } from "@getvitops/utils/content";
+import { createHash } from "node:crypto";
 import { execFile } from "node:child_process";
 import { promisify } from "node:util";
 
@@ -383,6 +386,40 @@ function localeConsistencyWarnings(site, i18n) {
 	return warnings;
 }
 
+// src/tailwind-sources.ts
+/**
+* The `@source` paths a site's Tailwind needs so classes used only by installed packages'
+* renderers are generated. Tailwind v4 does not scan `node_modules`, so `font-display` (used by
+* `vitops.stats`) or a class in an `@getvitops/astro` component produced no rule and the page
+* rendered at body size with no error anywhere.
+*
+* Resolution is injected so the choice is testable; an absent package is skipped, not an error —
+* a site without `@getvitops/emdash` has nothing of its to scan.
+*/
+/** Package → directory (relative to the package root) holding the markup that uses classes. */
+const RENDERER_DIRS = {
+	"@getvitops/astro": "src/components",
+	"@getvitops/emdash": "src/astro"
+};
+/**
+* @param cssDir directory of the emitted `tailwind.css`; `@source` paths are relative to it.
+* @param resolvePackageJson returns the absolute path of a package's `package.json`, or throws.
+*/
+function tailwindSources(cssDir, resolvePackageJson) {
+	const out = [];
+	for (const [pkg, dir] of Object.entries(RENDERER_DIRS)) {
+		let manifest;
+		try {
+			manifest = resolvePackageJson(pkg);
+		} catch {
+			continue;
+		}
+		const rel = relative(cssDir, join(dirname(manifest), dir)).split("\\").join("/");
+		out.push(rel.startsWith(".") ? rel : `./${rel}`);
+	}
+	return out;
+}
+
 // src/seo-defaults.ts
 /** Drop `undefined`/empty-string keys so the result carries only what the config actually states. */
 function compact(value) {
@@ -545,6 +582,14 @@ function readSiteAds(configPath, siteEnv) {
 		return null;
 	}
 }
+/** Read `site.security.turnstile.siteKey`. Best-effort, like `readSiteAds`. */
+function readSiteTurnstileKey(configPath, siteEnv) {
+	try {
+		return resolveConfig(JSON.parse(readFileSync(configPath, "utf8")), siteEnv).site.security?.turnstile?.siteKey || null;
+	} catch {
+		return null;
+	}
+}
 /**
 * Read `site.experiments` + `site.analytics.matomo.abVariantDimensions` out of
 * the site config, resolving each experiment's cookie name (default
@@ -687,6 +732,40 @@ function virtualIconsPlugin(data) {
 		}
 	};
 }
+const REVIEWS_ID = "virtual:getvitops/reviews";
+const RESOLVED_REVIEWS_ID = `\0${REVIEWS_ID}`;
+/**
+* The committed `.vitops/reviews.json` cache as a build-time import, for server-rendered
+* components that cannot read the filesystem (the EmDash `vitops.reviews` block runs in a
+* Worker — and, with pages prerendered, inside the Cloudflare adapter's local workerd).
+*
+* **An absent or unusable file serves an EMPTY cache, never an error.** A fresh scaffold has
+* no `.vitops/reviews.json` (nothing has run `vitops reviews` yet) and a build must not fail
+* for it; the block renders an editor placeholder instead. `readCache` already treats a
+* corrupt or wrong-version file as absent, which is the same rule — the failure is silent
+* here only because the consumer of this module reports it.
+*
+* Read in `load`, not at plugin construction, and the file is registered as a watch file, so
+* a dev server picks up a re-run of `vitops reviews` without a restart.
+*/
+function virtualReviewsPlugin(root) {
+	const path = resolve(root, REVIEWS_CACHE_PATH);
+	return {
+		name: "@getvitops/astro:virtual-reviews",
+		resolveId(id) {
+			return id === REVIEWS_ID ? RESOLVED_REVIEWS_ID : null;
+		},
+		load(id) {
+			if (id !== RESOLVED_REVIEWS_ID) return null;
+			this?.addWatchFile?.(path);
+			const cache = readCache(path) ?? {
+				version: 1,
+				locations: {}
+			};
+			return `export default ${JSON.stringify(cache)};`;
+		}
+	};
+}
 /** Defaults live here so the component and the integration can't drift. */
 const ICON_DEFAULTS = {
 	ui: "fa7-solid",
@@ -731,6 +810,46 @@ function readsAsConfig(path) {
 		return false;
 	}
 }
+/** Whether the site config sets `site.icons.sprite` — the fact that makes the generator emit icons.svg. */
+function siteWantsSprite(root, siteInput, siteEnv) {
+	if (!siteInput) return false;
+	try {
+		const cfg = resolveConfig(JSON.parse(readFileSync(resolve(root, siteInput), "utf8")), siteEnv ?? "production");
+		return Boolean(cfg.site.icons?.sprite);
+	} catch {
+		return false;
+	}
+}
+/**
+* A standalone page hosting `<wc-theme-editor>`, for a host that cannot load the
+* framework CSS itself (the EmDash admin embeds this in an iframe, so the design
+* system never touches the admin's own styles). `?save=<url>` supplies the save
+* endpoint, which is the host's to name, not this integration's.
+*/
+function writeEditorHost(dest) {
+	mkdirSync(dest, { recursive: true });
+	writeFileSync(join(dest, "design-system-editor.html"), `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>Design system editor</title>
+<link rel="stylesheet" href="/vitops/editor.css">
+</head>
+<body>
+<script type="module">
+  await import('/vitops/editor.js');
+  const el = document.createElement('wc-theme-editor');
+  el.setAttribute('manifest', '/vitops/design-manifest.json');
+  const save = new URLSearchParams(location.search).get('save');
+  if (save && save.startsWith('/')) el.setAttribute('save-endpoint', save);
+  document.body.append(el);
+<\/script>
+</body>
+</html>
+`);
+}
 function vitops(opts = {}) {
 	return {
 		name: "@getvitops/astro",
@@ -739,7 +858,7 @@ function vitops(opts = {}) {
 			const publicDir = fileURLToPath(config.publicDir);
 			const webComponents = opts.webComponents !== false;
 			const editor = opts.editor === true;
-			if (editor && !opts.css) logger.warn("editor: true needs a `css` config — it reads design-manifest.json.");
+			if ((editor || opts.editorManifest) && !opts.css) logger.warn("editor/editorManifest needs a `css` config — it reads design-manifest.json.");
 			if (opts.legal && !opts.css) logger.warn("legal: needs a `css` config — the generation runs in the Vite plugin that `css` registers. Run `npx vitops legal` instead if you do not use `css`.");
 			if (opts.media && !opts.css) logger.warn("media: needs a `css` config — the encoding runs in the Vite plugin that `css` registers. Run `npx vitops media` instead if you do not use `css`.");
 			const cssInput = opts.css ? opts.css.input ?? "design-system.json" : void 0;
@@ -766,6 +885,7 @@ function vitops(opts = {}) {
 			const analytics = resolveAnalytics(opts.analytics, { consent: consentEnabled });
 			const trackingOpts = opts.tracking === true ? { enabled: true } : opts.tracking || (siteConsent?.tracking?.enabled ? siteConsent.tracking : void 0);
 			const adsConfig = siteInput ? readSiteAds(resolve(root, siteInput), opts.site?.siteEnv ?? "production") : null;
+			const turnstileSiteKey = siteInput ? readSiteTurnstileKey(resolve(root, siteInput), opts.site?.siteEnv ?? "production") : null;
 			const experimentsConfig = siteInput ? readSiteExperiments(resolve(root, siteInput), opts.site?.siteEnv ?? "production") : null;
 			const detectedCategories = consentCategories([...analytics.tags, ...resolveAds(adsConfig?.properties, {
 				consent: consentEnabled,
@@ -812,8 +932,15 @@ function vitops(opts = {}) {
 				logger.info("generated favicons + manifest → public/");
 			}
 			let headFonts = [];
-			if (opts.fonts) {
-				const given = Array.isArray(opts.fonts) ? { families: opts.fonts } : typeof opts.fonts === "string" ? { input: opts.fonts } : opts.fonts === true ? {} : opts.fonts;
+			let fontsOpt = opts.fonts;
+			if (fontsOpt === void 0 && siteInput) try {
+				if ((resolveConfig(JSON.parse(readFileSync(resolve(root, siteInput), "utf8")), opts.site?.siteEnv ?? "production").site.fonts ?? []).length > 0) {
+					fontsOpt = true;
+					logger.info(`fonts: ${siteInput} declares site.fonts, so webfonts are on (pass fonts: false to opt out)`);
+				}
+			} catch {}
+			if (fontsOpt) {
+				const given = Array.isArray(fontsOpt) ? { families: fontsOpt } : typeof fontsOpt === "string" ? { input: fontsOpt } : fontsOpt === true ? {} : fontsOpt;
 				const o = {
 					...given,
 					...given.input == null && given.families == null && siteInput ? {
@@ -851,11 +978,12 @@ function vitops(opts = {}) {
 						"polyfills"
 					] : [];
 					if (consentRuntime) bundles.push("consent.js");
-					if (editor) bundles.push("editor.js");
+					if (editor || opts.editorManifest) bundles.push("editor.js");
 					for (const f of bundles) {
 						const src = join(coreDist, f);
 						if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });
 					}
+					if (opts.editorManifest) writeEditorHost(dest);
 					logger.info("copied web-component bundles → public/vitops/");
 				} else logger.warn(`@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`);
 			}
@@ -968,43 +1096,51 @@ function vitops(opts = {}) {
 					sprite: engine === "sprite" || o.sprite ? spriteHref : null
 				};
 			}
-			updateConfig({ vite: { plugins: [virtualIconsPlugin(iconsData ?? {
-				engine: "none",
-				root,
-				ui: ICON_DEFAULTS.ui,
-				brand: ICON_DEFAULTS.brand,
-				weight: null,
-				overrides: {},
-				sprite: null
-			}), virtualHeadPlugin({
-				favicons: !!opts.favicon,
-				faviconLinks: opts.favicon ? faviconLinks({
-					hasSvg,
-					manifest: hasManifest
-				}) : [],
-				themeColor: opts.favicon?.themeColor ?? null,
-				webComponents,
-				wcBase: "/vitops",
-				editor,
-				sitemap: sitemapHref,
-				fonts: headFonts,
-				site: config.site ?? null,
-				seo: seoDefaults,
-				analytics: opts.analytics ?? {},
-				consent: consentEnabled,
-				consentCategories: offeredCategories,
-				consentPolicyUrl: consentOpts.policyUrl ?? null,
-				consentRuntime,
-				tracking: tracking.enabled ? {
-					enabled: true,
-					category: tracking.category,
-					cookies: tracking.cookies,
-					abVariantCookie: experimentsConfig?.primaryCookie ?? null
-				} : null,
-				experiments: experimentsConfig?.experiments ?? {},
-				matomoAbVariantDimensions: experimentsConfig?.matomoAbVariantDimensions ?? {},
-				ads: adsConfig
-			})] } });
+			updateConfig({ vite: {
+				ssr: { optimizeDeps: { include: ["@getvitops/astro > @getvitops/generator/icons-sprite"] } },
+				plugins: [
+					virtualReviewsPlugin(root),
+					virtualIconsPlugin(iconsData ?? {
+						engine: "none",
+						root,
+						ui: ICON_DEFAULTS.ui,
+						brand: ICON_DEFAULTS.brand,
+						weight: null,
+						overrides: {},
+						sprite: null
+					}),
+					virtualHeadPlugin({
+						favicons: !!opts.favicon,
+						faviconLinks: opts.favicon ? faviconLinks({
+							hasSvg,
+							manifest: hasManifest
+						}) : [],
+						themeColor: opts.favicon?.themeColor ?? null,
+						webComponents,
+						wcBase: "/vitops",
+						editor,
+						sitemap: sitemapHref,
+						fonts: headFonts,
+						site: config.site ?? null,
+						seo: seoDefaults,
+						analytics: opts.analytics ?? {},
+						consent: consentEnabled,
+						consentCategories: offeredCategories,
+						consentPolicyUrl: consentOpts.policyUrl ?? null,
+						consentRuntime,
+						tracking: tracking.enabled ? {
+							enabled: true,
+							category: tracking.category,
+							cookies: tracking.cookies,
+							abVariantCookie: experimentsConfig?.primaryCookie ?? null
+						} : null,
+						experiments: experimentsConfig?.experiments ?? {},
+						matomoAbVariantDimensions: experimentsConfig?.matomoAbVariantDimensions ?? {},
+						ads: adsConfig,
+						turnstileSiteKey
+					})
+				]
+			} });
 			if (opts.css) {
 				const format = opts.css.format ?? "tailwind";
 				if (format === "design") throw new Error("[vitops] css.format: 'design' emits only DESIGN.md, not a stylesheet. Run `npx vitops generate --format design --out .` for that file, and set css.format to 'tailwind' | 'css' | 'bricks' here.");
@@ -1014,15 +1150,16 @@ function vitops(opts = {}) {
 					...opts.css.theme != null ? { theme: opts.css.theme } : {},
 					format,
 					out,
-					...editor ? { editorManifestDir: publicDir } : {},
-					...iconsData?.sprite ? { spriteDir: publicDir } : {},
+					...editor || opts.editorManifest ? { editorManifestDir: publicDir } : {},
+					...iconsData?.sprite || siteWantsSprite(root, siteInput, opts.site?.siteEnv) ? { spriteDir: publicDir } : {},
 					...opts.legal ? { legal: {
 						...opts.legal,
 						input: legalInput
 					} } : {},
 					...opts.media ? { media: opts.media } : {},
 					...opts.site ? { site: opts.site } : {},
-					...opts.css.systemColorScheme != null ? { systemColorScheme: opts.css.systemColorScheme } : {}
+					...opts.css.systemColorScheme != null ? { systemColorScheme: opts.css.systemColorScheme } : {},
+					...format === "tailwind" ? { sources: tailwindSources(resolve(root, out), (pkg) => createRequire(resolve(root, "package.json")).resolve(`${pkg}/package.json`)) } : {}
 				})];
 				if (format === "tailwind") {
 					let tailwindcss;
@@ -1048,6 +1185,124 @@ function vitops(opts = {}) {
 	};
 }
 
+// src/inline-scripts.ts
+/**
+* The inline scripts `<Head />` emits, as plain strings.
+*
+* They live here rather than in `Head.astro`'s frontmatter for one reason: a
+* Content-Security-Policy that doesn't allow `'unsafe-inline'` has to name each
+* inline script by SHA-256, and the hash is of the exact emitted bytes. One
+* constant imported by both the component (which emits it) and `csp.ts` (which
+* hashes it) makes "the hash matches what the page serves" true by construction
+* rather than by a test remembering to compare two copies. `csp.test.ts` and the
+* container render test still assert it against real rendered HTML.
+*
+* No imports and no Node builtins: `Head.astro` runs in a Worker for any page
+* that is rendered on demand.
+*/
+/**
+* Applies the remembered colour scheme before first paint.
+*
+* The key MUST match `WCColorSchemeToggle.STORAGE_KEY` in @getvitops/core;
+* `head.test.ts` asserts they stay in step. try/catch because localStorage
+* throws in private/partitioned contexts.
+*/
+const THEME_SCRIPT = "try{var s=localStorage.getItem('vitops-color-scheme');if(s==='light'||s==='dark'){document.documentElement.dataset.theme=s;document.documentElement.style.colorScheme=s+' only'}}catch(e){}";
+/**
+* The consent gate's build-time signal: "something on this page may need
+* permission, and the real gate hasn't loaded yet."
+*
+* `consent.js` and `elements.js` are both deferred modules with no ordering
+* guarantee between them, so `<wc-color-scheme-toggle>` can upgrade and be clicked
+* before the gate exists. Without this, a caller probing for
+* `window.vitopsConsent` in that window would see nothing, correctly conclude
+* that sites without the gate should just store — and store. The stub closes the
+* window by making the gate's *existence* known synchronously in `<head>`, which
+* is the only place that beats every deferred bundle.
+*
+* It answers `false` to everything, because nothing is granted until the store
+* has been read, and queues what it was asked so `consent/runtime.ts` can replay
+* it on evaluation. `q` entries are `[category]` for `require()` and
+* `[category, resolve]` for `request()`. Same shape as the `dataLayer`/`gtag`
+* stub in `analytics.ts` and for the same reason.
+*
+* Emitted only when the gate is on: its absence is what tells a caller the site
+* has no gate at all.
+*/
+const CONSENT_STUB = "window.vitopsConsent=window.vitopsConsent||{q:[],require:function(c){this.q.push([c]);return false},request:function(c){var s=this;return new Promise(function(r){s.q.push([c,r])})},granted:function(){return false},needed:function(){return false}};";
+
+// src/csp.ts
+/**
+* Content-Security-Policy helpers for the inline scripts `<Head />` emits.
+*
+* `<Head />` writes up to two inline `<script>`s into every page: the pre-paint
+* colour-scheme bootstrap and the consent-gate stub. A policy without
+* `'unsafe-inline'` blocks both unless each is named by hash, and both are
+* constants (`inline-scripts.ts`), so their hashes are fixed per package version
+* and can sit in a static `_headers` file — which is exactly what the scaffolded
+* templates do, in `Content-Security-Policy-Report-Only` mode.
+*
+* Why hashes and not nonces: a nonce is per response, so it needs the page to be
+* rendered by a Worker on every request. The templates' pages are prerendered
+* static assets, which have no request to attach a nonce to. Hashes also survive
+* being cached.
+*
+* What this does NOT cover, and the policy says so rather than hiding it: scripts
+* the page gets from elsewhere (EmDash's own head tags, a server-island loader,
+* an editor's HTML block, the consent gate activating a third-party tag). Those
+* are what Report-Only is for — see the template's AGENTS.md.
+*
+* Node-only (`node:crypto`), so it is exported from the package root — a build
+* time import — and never from a Worker entry.
+*/
+/** The CSP source expression for one inline script: `'sha256-<base64>'`. */
+function cspScriptHash(script) {
+	return `'sha256-${createHash("sha256").update(script, "utf8").digest("base64")}'`;
+}
+/**
+* CSP hash sources for every inline script `<Head />` can emit.
+*
+* Defaults to ALL of them: listing a hash for a script the page doesn't emit is
+* harmless, while omitting one a page does emit is a violation.
+*/
+function inlineScriptHashes(opts = {}) {
+	const out = [];
+	if (opts.webComponents !== false) out.push(cspScriptHash(THEME_SCRIPT));
+	if (opts.consent !== false) out.push(cspScriptHash(CONSENT_STUB));
+	return out;
+}
+/**
+* A strict starting policy for a prerendered site.
+*
+* `script-src` is `'self'` plus the `<Head />` hashes — no `'unsafe-inline'`.
+* `style-src` keeps `'unsafe-inline'` because Astro inlines scoped `<style>` and
+* components set `style=""` attributes; a style injection is far less dangerous
+* than a script one, and hashing every stylesheet would break on any edit.
+* `img-src` allows `https:` because editors paste images from anywhere.
+*/
+function contentSecurityPolicy(opts = {}) {
+	const list = (name, ...sources) => `${name} ${sources.flatMap((s) => s ?? []).join(" ")}`.trim();
+	const directives = [
+		"default-src 'self'",
+		list("script-src", ["'self'"], inlineScriptHashes(opts.inline), opts.scriptSrc),
+		"style-src 'self' 'unsafe-inline'",
+		list("img-src", [
+			"'self'",
+			"data:",
+			"https:"
+		], opts.imgSrc),
+		"font-src 'self'",
+		list("connect-src", ["'self'"], opts.connectSrc),
+		list("frame-src", opts.frameSrc?.length ? opts.frameSrc : ["'none'"]),
+		"object-src 'none'",
+		"base-uri 'self'",
+		"form-action 'self'",
+		"frame-ancestors 'self'"
+	];
+	if (opts.reportUri) directives.push(`report-uri ${opts.reportUri}`);
+	return directives.join("; ");
+}
+
 // src/lastmod.ts
 /**
 * Real per-page `<lastmod>` for the sitemap, derived from git.
@@ -1328,5 +1583,5 @@ function resolveSeo(defaults, props, ctx) {
 	};
 }
 
-export { TRACKING_COOKIE, consentCategories, vitops as default, gitLastmod, mergeSeoDefaults, resolveAds, resolveAnalytics, resolveSeo, resolveSeoDefaults, resolveTracking, routeFromPage, slugFromContent };
+export { TRACKING_COOKIE, consentCategories, contentSecurityPolicy, cspScriptHash, vitops as default, gitLastmod, inlineScriptHashes, mergeSeoDefaults, resolveAds, resolveAnalytics, resolveSeo, resolveSeoDefaults, resolveTracking, routeFromPage, slugFromContent };
 //# sourceMappingURL=index.mjs.map