@goodfellow-cms/next 0.7.0 → 0.8.0

package/bin/goodfellow-next.js

@@ -56,8 +56,10 @@ import {
   writeCalendarFiles,
   writeContentApi,
   writeEditorPolicy,
+  writeExportHeaders,
   writeFeedFiles,
   writeFontFiles,
+  writeImageFiles,
   writePageLanguages,
   writePluginFiles,
   writeRedirectFiles,
@@ -339,7 +341,10 @@ if (command === "finish") {
       `Cloudflare Pages reads only the first ${CLOUDFLARE_REDIRECTS_LIMIT.toLocaleString("en")} lines of _redirects, so ${redirects.cloudflareLeft} old address${redirects.cloudflareLeft === 1 ? " is" : "es are"} left to the pages that send visitors on.`,
     );
   }
-  for (const line of buildNotes(await writeFontFiles(dir))) console.log(line);
+  // Cloudflare Pages' header rules, after the site's own public/_headers.
+  await writeExportHeaders(dir);
+  const images = await writeImageFiles(dir);
+  for (const line of buildNotes({ ...(await writeFontFiles(dir)), ...(images && { images }) })) console.log(line);
   // Plugins' admin frames and build steps, once Goodfellow has written the rest, before the index and the guards.
   const plugins = await writePluginFiles(dir);
   if (plugins.frames.length > 0) console.log(`Wrote the admin frames of ${plugins.frames.join(", ")}`);

package/dist/admin.js

@@ -6,7 +6,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Admin, OutdatedAdminPage, reloadFrames } from "@goodfellow-cms/admin";
 import "@goodfellow-cms/admin/styles.css";
 //#region src/generated/theme-css.ts
-var theme_css_default = "/*\n * Maps the site theme (CSS variables written from content/site.json) onto\n * Tailwind, so classes like bg-primary, text-muted-foreground, font-heading and\n * rounded-lg follow the theme. Import after \"tailwindcss\".\n */\n/*\n * Blocks' dark: classes apply only where the site has dark mode\n * (Site Settings), which gives its pages <meta name=\"color-scheme\"\n * content=\"light dark\">: when the visitor's computer is set to dark, or when\n * the admin panel's preview shows the site dark. Light-only sites never\n * use them, even on a computer set to dark.\n */\n@custom-variant dark {\n  @media (prefers-color-scheme: dark) {\n    &:where(\n        :root:has(meta[name=\"color-scheme\"][content~=\"dark\"]):not([data-gf-color-scheme=\"light\"]),\n        :root:has(meta[name=\"color-scheme\"][content~=\"dark\"]):not([data-gf-color-scheme=\"light\"]) *\n      ) {\n      @slot;\n    }\n  }\n  &:where([data-gf-color-scheme=\"dark\"], [data-gf-color-scheme=\"dark\"] *) {\n    @slot;\n  }\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-border: var(--border);\n  /* The rest of shadcn/ui's colors, for blocks built with it, follow the ones above unless custom CSS sets them. */\n  --color-card: var(--card, var(--background));\n  --color-card-foreground: var(--card-foreground, var(--foreground));\n  --color-popover: var(--popover, var(--background));\n  --color-popover-foreground: var(--popover-foreground, var(--foreground));\n  --color-destructive: var(--destructive, #dc2626);\n  --color-input: var(--input, var(--border));\n  --color-ring: var(--ring, var(--primary));\n  --font-sans: var(--gf-font-body);\n  --font-heading: var(--gf-font-heading);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}\n\n@layer base {\n  *,\n  ::before,\n  ::after {\n    border-color: var(--color-border);\n  }\n\n  body {\n    background-color: var(--color-background);\n    color: var(--color-foreground);\n    /* Keeps the footer at the bottom of short pages. */\n    display: flex;\n    flex-direction: column;\n    min-height: 100dvh;\n  }\n\n  .gf-main {\n    flex: 1;\n  }\n\n  /* The credits of the photos on a page, which their licenses ask for. */\n  .gf-credits {\n    max-width: 72rem;\n    margin: 0 auto;\n    padding: 1.5rem 1rem;\n    font-size: 0.75rem;\n    line-height: 1.5;\n    color: var(--color-muted-foreground);\n  }\n\n  .gf-credits a {\n    text-decoration: underline;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: var(--font-heading);\n  }\n}\n";
+var theme_css_default = "/*\n * Maps the site theme (CSS variables written from content/site.json) onto\n * Tailwind, so classes like bg-primary, text-muted-foreground, font-heading and\n * rounded-lg follow the theme. Import after \"tailwindcss\".\n */\n/*\n * Blocks' dark: classes apply only where the site has dark mode\n * (Site Settings), which gives its pages <meta name=\"color-scheme\"\n * content=\"light dark\">: when the visitor's computer is set to dark, or when\n * the admin panel's preview shows the site dark. Light-only sites never\n * use them, even on a computer set to dark.\n */\n@custom-variant dark {\n  @media (prefers-color-scheme: dark) {\n    &:where(\n        :root:has(meta[name=\"color-scheme\"][content~=\"dark\"]):not([data-gf-color-scheme=\"light\"]),\n        :root:has(meta[name=\"color-scheme\"][content~=\"dark\"]):not([data-gf-color-scheme=\"light\"]) *\n      ) {\n      @slot;\n    }\n  }\n  &:where([data-gf-color-scheme=\"dark\"], [data-gf-color-scheme=\"dark\"] *) {\n    @slot;\n  }\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-border: var(--border);\n  /* The rest of shadcn/ui's colors, for blocks built with it, follow the ones above unless custom CSS sets them. */\n  --color-card: var(--card, var(--background));\n  --color-card-foreground: var(--card-foreground, var(--foreground));\n  --color-popover: var(--popover, var(--background));\n  --color-popover-foreground: var(--popover-foreground, var(--foreground));\n  --color-destructive: var(--destructive, #dc2626);\n  --color-input: var(--input, var(--border));\n  --color-ring: var(--ring, var(--primary));\n  --font-sans: var(--gf-font-body);\n  --font-heading: var(--gf-font-heading);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}\n\n@layer base {\n  *,\n  ::before,\n  ::after {\n    border-color: var(--color-border);\n  }\n\n  body {\n    background-color: var(--color-background);\n    color: var(--color-foreground);\n    /* Keeps the footer at the bottom of short pages. */\n    display: flex;\n    flex-direction: column;\n    min-height: 100dvh;\n  }\n\n  .gf-main {\n    flex: 1;\n  }\n\n  /* The credits of the photos on a page, which their licenses ask for. */\n  .gf-credits {\n    max-width: 72rem;\n    margin: 0 auto;\n    padding: 1.5rem 1rem;\n    font-size: 0.75rem;\n    line-height: 1.5;\n    color: var(--color-muted-foreground);\n  }\n\n  .gf-credits a {\n    text-decoration: underline;\n  }\n\n  /*\n   * On a site that asks visitors before loading other sites' content: the\n   * notice, and what's shown in a held-back player's place.\n   */\n  .gf-consent {\n    position: fixed;\n    inset-inline: 1rem;\n    bottom: 1rem;\n    z-index: 50;\n    max-width: 40rem;\n    margin-inline: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    padding: 1rem;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    background-color: var(--color-background);\n    color: var(--color-foreground);\n    box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);\n    font-size: 0.875rem;\n    line-height: 1.5;\n  }\n\n  .gf-consent a {\n    text-decoration: underline;\n  }\n\n  .gf-consent-buttons {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n\n  .gf-consent button,\n  .gf-consent-placeholder button {\n    padding: 0.5rem 1rem;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  .gf-consent [data-gf-consent-accept],\n  .gf-consent-placeholder button {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-primary-foreground);\n  }\n\n  .gf-consent-placeholder {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0.75rem;\n    padding: 1rem;\n    border-radius: inherit;\n    background-color: var(--color-muted);\n    color: var(--color-foreground);\n    font-size: 0.875rem;\n    text-align: center;\n  }\n\n  /* In a form, beside its other fields, rather than over a player. */\n  .gf-consent-placeholder.gf-consent-inline {\n    position: static;\n    align-items: flex-start;\n    text-align: start;\n    border-radius: var(--radius-md);\n  }\n\n  .gf-consent-box {\n    position: relative;\n  }\n\n  /* A choice for each kind of content, which Choose shows. */\n  .gf-consent-choices {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .gf-consent-choices label {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n  }\n\n  .gf-consent-choices input {\n    margin-top: 0.25rem;\n    accent-color: var(--color-primary);\n  }\n\n  /* Hidden until the consent script shows them, whatever else styles them. */\n  .gf-consent[hidden],\n  .gf-consent-placeholder[hidden],\n  .gf-consent-choices[hidden],\n  .gf-consent button[hidden] {\n    display: none;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: var(--font-heading);\n  }\n}\n";
 //#endregion
 //#region src/admin.tsx
 /**

package/dist/components.d.ts

@@ -10,11 +10,21 @@ export declare function NextImage({ src, alt, width, height, loading, ...props }
  * Marks the current page's links in the site's menus (`data-current`, and
  * `aria-current` for the page itself), as Menu does when it knows the page. The
  * layout's header and footer are shared by every page, so they can't know it;
- * this runs in the browser after every navigation instead.
+ * this runs in the browser after every navigation instead, and closes a menu
+ * button's links, which would otherwise stay open on the new page.
  */
 export declare function CurrentMenuLinks({ basePath }: {
   basePath?: string;
 }): null;
+/**
+ * Opens the Search box's results with Next.js's navigation, and loads them
+ * ahead when they're pointed at or reached with the keyboard, as `next/link`
+ * does. The Search box writes its results itself (`searchScript()`), as plain
+ * links, so pages built with `goodfellow build` need no React for them.
+ */
+export declare function SearchResultLinks({ basePath }: {
+  basePath?: string;
+}): null;
 /**
  * On a site in several languages, says the page's language on `<html>`, which
  * the root layout shared by every page can't. `goodfellow-next finish` writes

package/dist/components.js

@@ -1,6 +1,6 @@
 "use client";
 import { CurrentPathProvider } from "@goodfellow-cms/react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -29,7 +29,8 @@ function trimSlash(path) {
 * Marks the current page's links in the site's menus (`data-current`, and
 * `aria-current` for the page itself), as Menu does when it knows the page. The
 * layout's header and footer are shared by every page, so they can't know it;
-* this runs in the browser after every navigation instead.
+* this runs in the browser after every navigation instead, and closes a menu
+* button's links, which would otherwise stay open on the new page.
 */
 function CurrentMenuLinks({ basePath = "" }) {
 	const pathname = usePathname();
@@ -45,10 +46,52 @@ function CurrentMenuLinks({ basePath = "" }) {
 			if (exact) link.setAttribute("aria-current", "page");
 			else link.removeAttribute("aria-current");
 		}
+		for (const panel of document.querySelectorAll("[data-gf-menu] details[open]")) panel.open = false;
 	}, [pathname, basePath]);
 	return null;
 }
 /**
+* Opens the Search box's results with Next.js's navigation, and loads them
+* ahead when they're pointed at or reached with the keyboard, as `next/link`
+* does. The Search box writes its results itself (`searchScript()`), as plain
+* links, so pages built with `goodfellow build` need no React for them.
+*/
+function SearchResultLinks({ basePath = "" }) {
+	const router = useRouter();
+	useEffect(() => {
+		const prefix = trimSlash(basePath) === "/" ? "" : trimSlash(basePath);
+		/** A result's address within the site, without the base path, which Next.js's router adds. */
+		const target = (event) => {
+			const link = event.target?.closest?.("[data-gf-search-box] a[href]");
+			if (!(link instanceof HTMLAnchorElement) || link.target && link.target !== "_self") return void 0;
+			const url = new URL(link.href, location.href);
+			if (url.origin !== location.origin) return void 0;
+			if (prefix && url.pathname !== prefix && !url.pathname.startsWith(`${prefix}/`)) return void 0;
+			return `${url.pathname.slice(prefix.length) || "/"}${url.search}${url.hash}`;
+		};
+		const open = (event) => {
+			if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+			const to = target(event);
+			if (!to) return;
+			event.preventDefault();
+			router.push(to);
+		};
+		const prefetch = (event) => {
+			const to = target(event);
+			if (to) router.prefetch(to);
+		};
+		document.addEventListener("click", open);
+		document.addEventListener("pointerover", prefetch);
+		document.addEventListener("focusin", prefetch);
+		return () => {
+			document.removeEventListener("click", open);
+			document.removeEventListener("pointerover", prefetch);
+			document.removeEventListener("focusin", prefetch);
+		};
+	}, [router, basePath]);
+	return null;
+}
+/**
 * On a site in several languages, says the page's language on `<html>`, which
 * the root layout shared by every page can't. `goodfellow-next finish` writes
 * it into exported pages; this keeps it right as visitors move between pages.
@@ -74,4 +117,4 @@ function ByLanguage({ variants }) {
 	});
 }
 //#endregion
-export { ByLanguage, CurrentMenuLinks, NextImage, NextLink, PageLanguage };
+export { ByLanguage, CurrentMenuLinks, NextImage, NextLink, PageLanguage, SearchResultLinks };

package/dist/config.d.ts

@@ -23,8 +23,10 @@ export interface GoodfellowNextOptions {
  * - Serves images as they are unless the site sets an image loader, since static files can't be optimized on request.
  * - Adds the site's redirects (Site Settings → Redirects) ahead of the site's own, for hosts that
  *   send them, such as Vercel. Others get the pages `goodfellow-next finish` writes at old addresses.
- * - For a site with an admin address, adds header rules that sandbox every page there but the
- *   admin panel's own, for hosts that send headers, such as Vercel.
+ * - Adds header rules for hosts that send them, such as Vercel: the media library's SVGs
+ *   sandboxed, the admin panel unframed, and, for a site with an admin address, every page
+ *   there sandboxed but the admin panel's own, with redirects sending pages opened at the
+ *   wrong one of the two addresses to the right one.
  * - With `{ server: true }`, builds a full-stack site for a server instead of as static
  *   files: see `goodfellowApi()` in `@goodfellow-cms/next/server`.
  * - In `next dev`, runs the admin panel's local backend, so publishing saves to

package/dist/config.js

@@ -1,9 +1,10 @@
-import { CALENDARS_DIR, FEEDS_DIR, allPages, brokerOrigin, configAdmin, configBroker, loadSiteContent, normalizeBase, redirectFrom, redirectProblems, shownContent, vercelAdminHeaders } from "@goodfellow-cms/core";
-import { BUILD_DATES_DIR, BUILD_DATES_ENV, DEV_API_PREFIX, builtSiteSource, contentRepositoryProblem, handleDevApi, isLocalOrigin, localFileStore, localRegistryDir } from "@goodfellow-cms/core/node";
+import { n as IMAGE_SIZES_MARK, t as IMAGE_SIZES_ENV } from "./image-sizes-mark-Ctz9p44g.js";
+import { CALENDARS_DIR, FEEDS_DIR, allPages, brokerOrigin, buildNotes, configAdmin, configBroker, loadSiteContent, normalizeBase, redirectFrom, redirectProblems, shownContent, vercelAdminRedirects, vercelHeaders } from "@goodfellow-cms/core";
+import { BUILD_DATES_DIR, BUILD_DATES_ENV, DEV_API_PREFIX, builtSiteSource, contentRepositoryProblem, handleDevApi, hostFonts, isLocalOrigin, localFileStore, localRegistryDir } from "@goodfellow-cms/core/node";
 import { existsSync, readFileSync } from "node:fs";
-import { rm } from "node:fs/promises";
+import { mkdir, rm, writeFile } from "node:fs/promises";
 import { createServer } from "node:http";
-import { join, resolve } from "node:path";
+import { dirname, join, resolve } from "node:path";
 //#region src/config.ts
 const CONFIG_FILES = [
 	"goodfellow.config.tsx",
@@ -17,15 +18,34 @@ function siteAdmin(root) {
 	return file ? configAdmin(readFileSync(file, "utf8")) : void 0;
 }
 /**
-* The admin address's header rules, for hosts that read them from the build,
-* such as Vercel: every page there sandboxed but the admin panel's own, as
-* `goodfellow build`'s `_headers` does on Cloudflare Pages. Next.js adds the base path itself.
+* The site's header rules, for hosts that read them from the build, such as
+* Vercel, as `goodfellow build`'s `_headers` does on Cloudflare Pages: the
+* media library's SVGs sandboxed, the admin panel unframed, and with an admin
+* address every page there sandboxed but the admin panel's own. Next.js adds the base path itself.
 */
-function adminHeaders(root) {
+function siteHeaders(root) {
 	const admin = siteAdmin(root);
 	const file = CONFIG_FILES.map((name) => join(root, name)).find((path) => existsSync(path));
 	const broker = brokerOrigin(file ? configBroker(readFileSync(file, "utf8")) : void 0);
-	return admin ? vercelAdminHeaders(admin, "/", broker) : [];
+	return vercelHeaders({
+		...admin && { admin },
+		...broker && { broker }
+	});
+}
+/**
+* A full-stack site's Google Fonts, copied into its `public/` folder
+* (`hostFonts()`), or `undefined` where it has none or Google can't be
+* reached, which the build says, as `goodfellow build` does.
+*/
+async function hostSiteFonts(root) {
+	const { settings } = await loadSiteContent(builtSiteSource(root));
+	const fonts = await hostFonts(join(root, "public"), settings.theme);
+	if (!fonts) return void 0;
+	if ("unavailable" in fonts) {
+		for (const line of buildNotes({ fonts })) console.warn(line);
+		return;
+	}
+	return fonts;
 }
 /** `PHASE_DEVELOPMENT_SERVER` from `next/constants`, which Node can't import by that name. */
 const PHASE_DEVELOPMENT_SERVER = "phase-development-server";
@@ -41,13 +61,13 @@ function startDevApi(root) {
 	globals[SERVER_KEY] ??= new Promise((resolvePort, reject) => {
 		const store = localFileStore(root);
 		const registryDir = localRegistryDir(root);
-		const editor = import("./dev-editor-CzE9HofK.js").then(({ startDevEditor }) => startDevEditor(root)).catch((error) => {
+		const editor = import("./dev-editor-BYUVUdPI.js").then(({ startDevEditor }) => startDevEditor(root)).catch((error) => {
 			console.error(`The editor's frames can't be served: ${error.message}`);
 			return { serve: async () => false };
 		});
 		const tasks = {
 			root,
-			plugins: async () => (await (await import("./plugins-K5i8XztM.js").then((n) => n.o)).loadSiteConfig(root)).plugins ?? [],
+			plugins: async () => (await (await import("./plugins-UKkfu0Uj.js").then((n) => n.o)).loadSiteConfig(root)).plugins ?? [],
 			server: "next-dev"
 		};
 		const server = createServer(async (req, res) => {
@@ -116,6 +136,27 @@ async function siteRedirects(root) {
 	});
 }
 /**
+* Pages opened at the wrong one of the Site address and the admin address,
+* sent to the right one before anything loads, for hosts that send redirects,
+* such as Vercel (`vercelAdminRedirects()`). The Site address is
+* `content/site.json`'s own, never a copy's, which leaves the admin address
+* out. Their addresses already have the base path, so Next.js adds none.
+*/
+function adminRedirects(root, basePath) {
+	const admin = siteAdmin(root);
+	if (!admin) return [];
+	let siteUrl;
+	try {
+		siteUrl = JSON.parse(readFileSync(join(root, "content/site.json"), "utf8")).url;
+	} catch {
+		return [];
+	}
+	return vercelAdminRedirects(admin, typeof siteUrl === "string" ? siteUrl : void 0, `${basePath}/`).map((rule) => ({
+		...rule,
+		basePath: false
+	}));
+}
+/**
 * Sets up Next.js for a Goodfellow site, in `next.config.ts`:
 * `export default withGoodfellow({ ... })`.
 *
@@ -127,8 +168,10 @@ async function siteRedirects(root) {
 * - Serves images as they are unless the site sets an image loader, since static files can't be optimized on request.
 * - Adds the site's redirects (Site Settings → Redirects) ahead of the site's own, for hosts that
 *   send them, such as Vercel. Others get the pages `goodfellow-next finish` writes at old addresses.
-* - For a site with an admin address, adds header rules that sandbox every page there but the
-*   admin panel's own, for hosts that send headers, such as Vercel.
+* - Adds header rules for hosts that send them, such as Vercel: the media library's SVGs
+*   sandboxed, the admin panel unframed, and, for a site with an admin address, every page
+*   there sandboxed but the admin panel's own, with redirects sending pages opened at the
+*   wrong one of the two addresses to the right one.
 * - With `{ server: true }`, builds a full-stack site for a server instead of as static
 *   files: see `goodfellowApi()` in `@goodfellow-cms/next/server`.
 * - In `next dev`, runs the admin panel's local backend, so publishing saves to
@@ -160,11 +203,23 @@ function withGoodfellow(nextConfig = {}, options = {}) {
 				force: true
 			});
 			process.env[BUILD_DATES_ENV] = dates;
+			const mark = join(root, nextConfig.distDir ?? ".next", IMAGE_SIZES_MARK);
+			await rm(mark, { force: true });
+			if (!options.server && config.images?.unoptimized) {
+				process.env[IMAGE_SIZES_ENV] = "1";
+				await mkdir(dirname(mark), { recursive: true });
+				await writeFile(mark, "");
+			} else delete process.env[IMAGE_SIZES_ENV];
 		}
 		if (phase !== PHASE_DEVELOPMENT_SERVER && options.server) {
 			if (siteAdmin(root)) throw new Error("A full-stack site can't have an admin address: its admin panel signs in with the site's own sign-in.");
+			const fonts = phase === PHASE_PRODUCTION_BUILD ? await hostSiteFonts(root) : void 0;
 			return {
 				...config,
+				...fonts && { env: {
+					...config.env,
+					GOODFELLOW_FONTS: JSON.stringify(fonts)
+				} },
 				images: nextConfig.images,
 				outputFileTracingIncludes: {
 					...nextConfig.outputFileTracingIncludes,
@@ -174,14 +229,19 @@ function withGoodfellow(nextConfig = {}, options = {}) {
 						"./public/media/**/*"
 					]
 				},
-				redirects: async () => [...await siteRedirects(root), ...await nextConfig.redirects?.() ?? []]
+				redirects: async () => [...await siteRedirects(root), ...await nextConfig.redirects?.() ?? []],
+				headers: async () => [...siteHeaders(root), ...await nextConfig.headers?.() ?? []]
 			};
 		}
 		if (phase !== PHASE_DEVELOPMENT_SERVER) return {
 			output: "export",
 			...config,
-			redirects: async () => [...await siteRedirects(root), ...await nextConfig.redirects?.() ?? []],
-			...siteAdmin(root) && { headers: async () => [...adminHeaders(root), ...await nextConfig.headers?.() ?? []] }
+			redirects: async () => [
+				...adminRedirects(root, basePath),
+				...await siteRedirects(root),
+				...await nextConfig.redirects?.() ?? []
+			],
+			...(siteAdmin(root) || process.env.VERCEL) && { headers: async () => [...siteHeaders(root), ...await nextConfig.headers?.() ?? []] }
 		};
 		const port = await startDevApi(root);
 		const rewrite = {

package/dist/{dev-editor-CzE9HofK.js → dev-editor-BYUVUdPI.js}

@@ -1,4 +1,4 @@
-import { i as loadSiteConfig, t as buildPluginFrame } from "./plugins-K5i8XztM.js";
+import { i as loadSiteConfig, t as buildPluginFrame } from "./plugins-UKkfu0Uj.js";
 import { DEV_EDITOR_PREFIX, EDITOR_PRELUDE, editorPage, pluginId } from "@goodfellow-cms/core";
 import { existsSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";

package/dist/export.d.ts

@@ -1,5 +1,5 @@
-import { PluginTaskRequest, SelfHostedResult, SiteProblem, TaskResultFile } from "@goodfellow-cms/core";
-import { SiteFile } from "@goodfellow-cms/core/node";
+import { GoodfellowConfig, PluginTaskRequest, SelfHostedResult, SiteProblem, TaskResultFile } from "@goodfellow-cms/core";
+import { ImageSizesResult, SiteFile } from "@goodfellow-cms/core/node";
 import { PageRender } from "@goodfellow-cms/core/shadcn";
 //#region src/site-files.d.ts
 /**
@@ -84,6 +84,19 @@ export interface RedirectsWritten {
  * has a page at keeps it.
  */
 export declare function writeRedirectFiles(outDir: string, root?: string): Promise<RedirectsWritten>;
+/**
+ * Writes the smaller copies of the media library's photos that the export's
+ * pages list in their `srcset` (`writeImageSizes()`), with sharp, where
+ * `next build` said they list them (`IMAGE_SIZES_MARK`): a static export
+ * whose images Next.js doesn't optimize. `undefined` where they don't.
+ */
+export declare function writeImageFiles(outDir: string, root?: string): Promise<ImageSizesResult | undefined>;
+/**
+ * Adds Cloudflare Pages' header rules for every site to the export's
+ * `_headers`, as `goodfellow build` does (`writeSiteHeaders()`), from the
+ * admin address and broker the exported `goodfellow-site.json` names.
+ */
+export declare function writeExportHeaders(outDir: string, root?: string): Promise<void>;
 /**
  * For a site with an admin address (its config's `admin`, which the exported
  * `goodfellow-site.json` carries), puts the guard first in every page of the
@@ -145,10 +158,12 @@ export declare function checkPages(pages: readonly BuiltPage[], root?: string):
 /**
  * Runs one of a plugin's tasks for the admin panel, as `goodfellow task`
  * does for other sites, with the site's config loaded in Node, and writes its
- * answer sealed to the request's key, even when the task fails. Secrets are
- * taken out of the environment before the config loads.
+ * answer sealed to the request's key, even when the task fails. The config
+ * loads in a process of its own, with none of the job's secrets.
  */
 export declare function writeTaskResult(root: string, request: PluginTaskRequest, out?: string): Promise<TaskResultFile>;
+/** The site's config, loaded in Node, for `writeTaskResult()`'s process that loads it apart from the job's secrets. */
+export declare function loadTaskConfig(root: string): Promise<GoodfellowConfig>;
 /**
  * Renders a page with a block from its own file as well as the site's config's,
  * for `goodfellow-next blocks add`'s check that a block it made renders: both

package/dist/export.js

@@ -1,7 +1,8 @@
-import { a as loadSiteModule, i as loadSiteConfig, n as buildPluginFrames, r as configHasPlugins } from "./plugins-K5i8XztM.js";
+import { a as loadSiteModule, i as loadSiteConfig, n as buildPluginFrames, r as configHasPlugins } from "./plugins-UKkfu0Uj.js";
+import "./image-sizes-mark-Ctz9p44g.js";
 import { r as NEXT_SITE_FILES } from "./site-files-BeLnLxCl.js";
 import { CALENDARS_DIR, CLOUDFLARE_REDIRECTS_PATH, EDITOR_PRELUDE, FEEDS_DIR, SITE_DESCRIPTION_PATH, TASK_RESULT_FILE, absoluteUrl, allPages, calendarFiles, cloudflareRedirects, editorPolicy, feedFiles, hasLanguages, loadSiteContent, parseSiteDescription, pathLanguage, pluginId, redirectFiles, rootRobotsUrl, sealTaskAnswer, shownContent, siteLanguages, sitePages, taskRequestProblem, todayIn } from "@goodfellow-cms/core";
-import { BUILD_DATES_DIR, builtSiteSource, guardBuiltSite, reportedDate, runPluginBuildSteps, runPluginTask, selfHostFonts, taskSecretsFrom, writeBuildRecord } from "@goodfellow-cms/core/node";
+import { BUILD_DATES_DIR, builtSiteSource, guardBuiltSite, reportedDate, runPluginBuildSteps, runPluginTask, selfHostFonts, sitePluginsApart, taskSecretsFrom, writeBuildRecord, writeImageSizes, writeSiteHeaders } from "@goodfellow-cms/core/node";
 import { access, mkdir, readFile, readdir, rename, rm, writeFile } from "node:fs/promises";
 import { dirname, join, relative, resolve } from "node:path";
 import { createHash } from "node:crypto";
@@ -177,6 +178,41 @@ async function writeRedirectFiles(outDir, root = process.cwd()) {
 	};
 }
 /**
+* Writes the smaller copies of the media library's photos that the export's
+* pages list in their `srcset` (`writeImageSizes()`), with sharp, where
+* `next build` said they list them (`IMAGE_SIZES_MARK`): a static export
+* whose images Next.js doesn't optimize. `undefined` where they don't.
+*/
+async function writeImageFiles(outDir, root = process.cwd()) {
+	const dir = resolve(root);
+	if (!await exists(join(dir, ".next", "goodfellow-image-sizes"))) return void 0;
+	return writeImageSizes(dir, outDir, { resize: await sharpResizer() });
+}
+/** Makes the copies with sharp, turned as each photo's details say and without them, unless it can't load here. */
+async function sharpResizer() {
+	try {
+		const { default: sharp } = await import("sharp");
+		return async (image, width) => new Uint8Array(await sharp(image).rotate().resize({ width }).toBuffer());
+	} catch {
+		return;
+	}
+}
+/**
+* Adds Cloudflare Pages' header rules for every site to the export's
+* `_headers`, as `goodfellow build` does (`writeSiteHeaders()`), from the
+* admin address and broker the exported `goodfellow-site.json` names.
+*/
+async function writeExportHeaders(outDir, root = process.cwd()) {
+	const text = await readFile(join(outDir, SITE_DESCRIPTION_PATH), "utf8").catch(() => void 0);
+	const parsed = text === void 0 ? void 0 : parseSiteDescription(text);
+	const description = parsed?.ok ? parsed.description : void 0;
+	await writeSiteHeaders(outDir, {
+		base: `${await exportBasePath(resolve(root))}/`,
+		...description?.admin && { admin: description.admin },
+		...description?.broker && { broker: description.broker }
+	});
+}
+/**
 * For a site with an admin address (its config's `admin`, which the exported
 * `goodfellow-site.json` carries), puts the guard first in every page of the
 * export and adds Cloudflare Pages' header rules, as `goodfellow build` does.
@@ -355,8 +391,8 @@ async function checkPages(pages, root = process.cwd()) {
 /**
 * Runs one of a plugin's tasks for the admin panel, as `goodfellow task`
 * does for other sites, with the site's config loaded in Node, and writes its
-* answer sealed to the request's key, even when the task fails. Secrets are
-* taken out of the environment before the config loads.
+* answer sealed to the request's key, even when the task fails. The config
+* loads in a process of its own, with none of the job's secrets.
 */
 async function writeTaskResult(root, request, out = TASK_RESULT_FILE) {
 	const secrets = taskSecretsFrom(process.env);
@@ -364,7 +400,10 @@ async function writeTaskResult(root, request, out = TASK_RESULT_FILE) {
 	if (problem) throw new Error(problem);
 	let answer;
 	try {
-		const plugin = ((await loadSiteConfig(resolve(root))).plugins ?? []).find((candidate) => pluginId(candidate.name) === request.plugin);
+		const plugin = (await sitePluginsApart(resolve(root), {
+			module: import.meta.url,
+			export: "loadTaskConfig"
+		})).find((candidate) => pluginId(candidate.name) === request.plugin);
 		answer = plugin ? await runPluginTask({
 			root: resolve(root),
 			plugin,
@@ -385,6 +424,10 @@ async function writeTaskResult(root, request, out = TASK_RESULT_FILE) {
 	await writeFile(resolve(root, out), `${JSON.stringify(sealed)}\n`);
 	return sealed;
 }
+/** The site's config, loaded in Node, for `writeTaskResult()`'s process that loads it apart from the job's secrets. */
+function loadTaskConfig(root) {
+	return loadSiteConfig(root);
+}
 /**
 * Renders a page with a block from its own file as well as the site's config's,
 * for `goodfellow-next blocks add`'s check that a block it made renders: both
@@ -410,4 +453,4 @@ function blockPageRender(root) {
 	};
 }
 //#endregion
-export { EDITOR_PAGES, NEXT_SITE_FILES, blockPageRender, buildFileFolders, builtPages, checkPages, exportedPages, fixSegmentFiles, guardExport, writeBuildRecordFile, writeCalendarFiles, writeContentApi, writeEditorPolicy, writeFeedFiles, writeFontFiles, writePageLanguages, writePluginFiles, writeRedirectFiles, writeTaskResult };
+export { EDITOR_PAGES, NEXT_SITE_FILES, blockPageRender, buildFileFolders, builtPages, checkPages, exportedPages, fixSegmentFiles, guardExport, loadTaskConfig, writeBuildRecordFile, writeCalendarFiles, writeContentApi, writeEditorPolicy, writeExportHeaders, writeFeedFiles, writeFontFiles, writeImageFiles, writePageLanguages, writePluginFiles, writeRedirectFiles, writeTaskResult };

package/dist/image-sizes-mark-Ctz9p44g.js

@@ -0,0 +1,11 @@
+//#region src/image-sizes-mark.ts
+/**
+* Set while `next build` renders a static export whose images Next.js doesn't
+* optimize, so pages list the smaller copies of the media library's photos
+* (`imageWidths`) that `goodfellow-next finish` writes.
+*/
+const IMAGE_SIZES_ENV = "GOODFELLOW_IMAGE_SIZES";
+/** The file in `.next/` that tells `goodfellow-next finish` the pages list them. */
+const IMAGE_SIZES_MARK = "goodfellow-image-sizes";
+//#endregion
+export { IMAGE_SIZES_MARK as n, IMAGE_SIZES_ENV as t };

package/dist/index.js

@@ -1,5 +1,6 @@
-import { ByLanguage, CurrentMenuLinks, NextImage, NextLink, PageLanguage } from "./components.js";
-import { absoluteUrl, adminSiteForCopy, colorSchemeMeta, colorSchemeScript, contentForPage, demoContent, describedForCopy, feedLinks, findRedirect, fontPreloads, googleFontsUrl, hasLanguages, languageMap, loadSiteContent, normalizePagePath, pageHead, shownContent, siteCopyFrom, siteLanguages, sitePages, sitemapPages, storedMediaSizes, themeToCss, todayIn, withBase } from "@goodfellow-cms/core";
+import { ByLanguage, CurrentMenuLinks, NextImage, NextLink, PageLanguage, SearchResultLinks } from "./components.js";
+import "./image-sizes-mark-Ctz9p44g.js";
+import { BLOCK_SCRIPTS, DARK_MODE_ATTRIBUTE, IMAGE_WIDTHS, absoluteUrl, adminSiteForCopy, colorSchemeMeta, colorSchemeScript, consentScript, contentForPage, demoContent, describedForCopy, feedLinks, findRedirect, fontPreloads, googleFontsUrl, hasLanguages, heldCode, languageMap, loadSiteContent, normalizePagePath, pageHead, shownContent, siteCopyFrom, siteLanguages, sitePages, sitemapPages, storedMediaSizes, themeToCss, todayIn, withBase, withSelfHostedFonts } from "@goodfellow-cms/core";
 import { BUILD_DATES_ENV, builtSiteSource, fileSystemSource, fontStandIns, readMediaSizes, readStylesheet, reportDatesTo } from "@goodfellow-cms/core/node";
 import { BodyCode, HeadCode, PageBody, PageContent, PageFooter, PageHeader, adminSite, applyPageEntry, createPuckConfigs, describeSite, prepareLayout, preparePage } from "@goodfellow-cms/react";
 import { notFound, redirect } from "next/navigation";
@@ -19,6 +20,22 @@ function configuredBasePath() {
 	return process.env.GOODFELLOW_BASE_PATH ?? "";
 }
 /**
+* Where a full-stack site's build copied its Google Fonts (`hostFonts()`), for
+* the stylesheet at `source`. `withGoodfellow()` puts them in the env, which
+* Next.js writes into this code by its name, so pages it renders later have
+* them too. Static exports have none: `goodfellow-next finish` copies theirs.
+*/
+function hostedFonts(source) {
+	const value = process.env.GOODFELLOW_FONTS;
+	if (!value) return void 0;
+	try {
+		const fonts = JSON.parse(value);
+		return fonts.source === source ? fonts : void 0;
+	} catch {
+		return;
+	}
+}
+/**
 * Reads the site's content from disk, as visitors see it now: without pages
 * and items scheduled for later, or hidden again (`shownContent()`). Cached
 * for the length of one request, so a page and its metadata read it once, and
@@ -39,6 +56,26 @@ function exportedPages(content, blocks) {
 function findPage(content, blocks, path) {
 	return exportedPages(content, blocks).find((page) => page.path === path);
 }
+/** Whether the site asks visitors before loading other sites' content. */
+function asks(content) {
+	return content.settings.consent !== void 0;
+}
+/** The consent script, after the footer's notice, on a site that asks. */
+function ConsentAsk({ content }) {
+	if (!asks(content)) return null;
+	return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: consentScript() } });
+}
+/**
+* What the built-in blocks need in the browser (copying code, the Dark mode
+* switch, search), each a small script that works on what navigations add.
+* `goodfellow build` adds each only to pages that use it; a layout can't know
+* the page, so it has them all, but the Dark mode switch's only where the
+* site has dark mode, since it shows nothing otherwise.
+*/
+function BlockScripts({ content }) {
+	const scripts = BLOCK_SCRIPTS.filter(({ attribute }) => attribute !== DARK_MODE_ATTRIBUTE || content.settings.theme.darkMode);
+	return /* @__PURE__ */ jsx(Fragment, { children: scripts.map(({ attribute, script }) => /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: script() } }, attribute)) });
+}
 function toAbsolute(siteUrl, url) {
 	if (!url || !siteUrl || !url.startsWith("/") || url.startsWith("//")) return url;
 	return absoluteUrl(siteUrl, url);
@@ -90,17 +127,24 @@ function goodfellowPages(config, options = {}) {
 		media: {
 			...await readMediaSizes(root),
 			...storedMediaSizes((await site()).mediaStorage)
-		}
+		},
+		...process.env["GOODFELLOW_IMAGE_SIZES"] && { imageWidths: IMAGE_WIDTHS }
 	});
 	/** The site's theme and fonts, which React moves into the document's head. themeToCss escapes its output. */
 	async function Theme({ content }) {
-		const fontsUrl = googleFontsUrl(content.settings.theme);
+		const googleUrl = googleFontsUrl(content.settings.theme);
+		const hosted = googleUrl ? hostedFonts(googleUrl) : void 0;
+		const fontsUrl = googleUrl && hosted ? withSelfHostedFonts(googleUrl, hosted, basePath()) : googleUrl;
 		const [fontFiles, standIns] = await Promise.all([fontPreloads(content.settings.theme, readStylesheet), fontStandIns(content.settings.theme)]);
-		for (const href of fontFiles) preload(href, {
-			as: "font",
-			type: "font/woff2",
-			crossOrigin: ""
-		});
+		for (const file of fontFiles) {
+			const href = hosted ? withSelfHostedFonts(file, hosted, basePath()) : file;
+			if (hosted && href === file) continue;
+			preload(href, {
+				as: "font",
+				type: "font/woff2",
+				crossOrigin: ""
+			});
+		}
 		const colorScheme = colorSchemeMeta(content.settings.theme);
 		const schemeScript = colorSchemeScript(content.settings.theme);
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -197,12 +241,22 @@ function goodfellowPages(config, options = {}) {
 			}
 			return /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(Theme, { content }),
-				/* @__PURE__ */ jsx(HeadCode, { code: content.code?.head }),
+				/* @__PURE__ */ jsx(HeadCode, {
+					code: content.code?.head,
+					held: heldCode(content.settings.consent, "head"),
+					siteUrl: content.settings.url
+				}),
 				header,
 				children,
 				footer,
 				/* @__PURE__ */ jsx(CurrentMenuLinks, { basePath: basePath() }),
-				/* @__PURE__ */ jsx(BodyCode, { code: content.code?.body })
+				/* @__PURE__ */ jsx(SearchResultLinks, { basePath: basePath() }),
+				/* @__PURE__ */ jsx(BodyCode, {
+					code: content.code?.body,
+					held: heldCode(content.settings.consent, "body")
+				}),
+				/* @__PURE__ */ jsx(ConsentAsk, { content }),
+				/* @__PURE__ */ jsx(BlockScripts, { content })
 			] });
 		},
 		/** The page at the route's address, inside `Layout`'s header and footer. */
@@ -237,7 +291,11 @@ function goodfellowPages(config, options = {}) {
 			return /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("title", { children: pageHead(content, page).title }),
 				/* @__PURE__ */ jsx(Theme, { content }),
-				/* @__PURE__ */ jsx(HeadCode, { code: content.code?.head }),
+				/* @__PURE__ */ jsx(HeadCode, {
+					code: content.code?.head,
+					held: heldCode(content.settings.consent, "head"),
+					siteUrl: content.settings.url
+				}),
 				/* @__PURE__ */ jsx(PageBody, {
 					site: prepared.site,
 					pageConfig: prepared.pageConfig,
@@ -246,7 +304,13 @@ function goodfellowPages(config, options = {}) {
 					header: prepared.header,
 					footer: prepared.footer
 				}),
-				/* @__PURE__ */ jsx(BodyCode, { code: content.code?.body })
+				/* @__PURE__ */ jsx(BodyCode, {
+					code: content.code?.body,
+					held: heldCode(content.settings.consent, "body")
+				}),
+				/* @__PURE__ */ jsx(ConsentAsk, { content }),
+				/* @__PURE__ */ jsx(BlockScripts, { content }),
+				/* @__PURE__ */ jsx(SearchResultLinks, { basePath: basePath() })
 			] });
 		},
 		/** For `app/sitemap.ts`: every page but "Page not found" and pages hidden from search engines, once the site's address is set. */

package/dist/{plugins-K5i8XztM.js → plugins-UKkfu0Uj.js}

@@ -1,5 +1,5 @@
 import { EDITOR_PRELUDE, INSTALLED_PLUGINS_INDEX, PLUGINS_PATH, framedPlugins, pluginFrameEntry, pluginFramePage, pluginId } from "@goodfellow-cms/core";
-import { LICENSES_FILE, licensesPlugin } from "@goodfellow-cms/core/node";
+import { LICENSES_FILE, licensesPlugin, mediaStorageOrigins } from "@goodfellow-cms/core/node";
 import { existsSync } from "node:fs";
 import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { isAbsolute, join, resolve } from "node:path";
@@ -125,7 +125,8 @@ async function buildPluginFrame(plugin, { root, dir, watch }) {
 			scripts: ["plugin.js"],
 			stylesheets: ["plugin.css"],
 			licenses: LICENSES_FILE,
-			editor: Boolean(plugin.editor)
+			editor: Boolean(plugin.editor),
+			...plugin.editor && { media: await mediaStorageOrigins(root) }
 		}));
 	};
 	const options = {

package/dist/server.d.ts

@@ -38,6 +38,13 @@ export interface GoodfellowApiOptions {
    * `plugins/<id>/…`, and runs with everything the server has.
    */
   plugins?: AppApiOptions["plugins"];
+  /**
+   * Whether owners' changes to the site's code, such as adding blocks on the
+   * Blocks screen, go to a developer for review (`"review"`, the default),
+   * since this server runs that code with its token and keys, or are published
+   * (`"publish"`).
+   */
+  codeChanges?: AppApiOptions["codeChanges"];
 }
 /** The route parameters of a catch-all route named `[...path]`. */
 interface RouteContext {

package/dist/server.js

@@ -1,3 +1,4 @@
+import { ownersOnlyFields } from "@goodfellow-cms/core";
 import { appApi } from "@goodfellow-cms/core/node";
 import { aiServer } from "@goodfellow-cms/ai";
 //#region src/server.ts
@@ -32,7 +33,9 @@ function goodfellowApi(options) {
 			...options.signOut && { signOut: options.signOut },
 			...ai && ai.services.length > 0 && { ai },
 			...options.onError && { onError: options.onError },
-			...options.plugins && { plugins: options.plugins }
+			...options.plugins && { plugins: options.plugins },
+			...options.codeChanges && { codeChanges: options.codeChanges },
+			ownersOnly: ownersOnlyFields(options.config.blocks ?? {})
 		});
 		return api;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodfellow-cms/next",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Goodfellow pages and the admin panel in a Next.js site.",
   "keywords": [
     "goodfellow",
@@ -63,23 +63,24 @@
     "dist"
   ],
   "dependencies": {
-    "@goodfellow-cms/ai": "0.7.0",
-    "@goodfellow-cms/core": "0.7.0",
-    "@goodfellow-cms/react": "0.7.0",
-    "rolldown": "1.2.12"
+    "@goodfellow-cms/ai": "0.8.0",
+    "@goodfellow-cms/core": "0.8.0",
+    "@goodfellow-cms/react": "0.8.0",
+    "rolldown": "1.2.12",
+    "sharp": "0.35.5"
   },
   "peerDependencies": {
-    "@goodfellow-cms/admin": "0.7.0",
+    "@goodfellow-cms/admin": "0.8.0",
     "@puckeditor/core": "0.23.0",
     "next": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@goodfellow-cms/admin": "0.7.0",
-    "@goodfellow-cms/bitbucket": "0.7.0",
-    "@goodfellow-cms/github": "0.7.0",
-    "@goodfellow-cms/gitlab": "0.7.0",
+    "@goodfellow-cms/admin": "0.8.0",
+    "@goodfellow-cms/bitbucket": "0.8.0",
+    "@goodfellow-cms/github": "0.8.0",
+    "@goodfellow-cms/gitlab": "0.8.0",
     "@puckeditor/core": "0.23.0",
     "@tailwindcss/browser": "4.3.3",
     "@types/react": "^19.2.0",