@goodfellow-cms/next 0.3.0 → 0.5.0

package/dist/config.js

@@ -1,10 +1,35 @@
-import { CALENDARS_DIR, allPages, loadSiteContent, normalizeBase, redirectFrom, redirectProblems } from "@goodfellow-cms/core";
-import { DEV_API_PREFIX, fileSystemSource, handleDevApi, isLocalOrigin, localFileStore, localRegistryDir } from "@goodfellow-cms/core/node";
+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, contentRepositoryProblem, fileSystemSource, handleDevApi, isLocalOrigin, localFileStore, localRegistryDir } from "@goodfellow-cms/core/node";
+import { existsSync, readFileSync } from "node:fs";
+import { rm } from "node:fs/promises";
 import { createServer } from "node:http";
-import { resolve } from "node:path";
+import { join, resolve } from "node:path";
 //#region src/config.ts
+const CONFIG_FILES = [
+	"goodfellow.config.tsx",
+	"goodfellow.config.ts",
+	"goodfellow.config.jsx",
+	"goodfellow.config.js"
+];
+/** The config's admin address, from its line of its own, since Next.js's config can't load the site's. */
+function siteAdmin(root) {
+	const file = CONFIG_FILES.map((name) => join(root, name)).find((path) => existsSync(path));
+	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.
+*/
+function adminHeaders(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) : [];
+}
 /** `PHASE_DEVELOPMENT_SERVER` from `next/constants`, which Node can't import by that name. */
 const PHASE_DEVELOPMENT_SERVER = "phase-development-server";
+const PHASE_PRODUCTION_BUILD = "phase-production-build";
 const SERVER_KEY = Symbol.for("goodfellow.next.devApi");
 /**
 * The admin panel's local backend, which reads and writes the site's files on
@@ -16,7 +41,12 @@ function startDevApi(root) {
 	globals[SERVER_KEY] ??= new Promise((resolvePort, reject) => {
 		const store = localFileStore(root);
 		const registryDir = localRegistryDir(root);
+		const editor = import("./dev-editor-DiPKrIAS.js").then(({ startDevEditor }) => startDevEditor(root)).catch((error) => {
+			console.error(`The editor's frames can't be served: ${error.message}`);
+			return { serve: async () => false };
+		});
 		const server = createServer(async (req, res) => {
+			if (await (await editor).serve(req, res)) return;
 			if (!await handleDevApi(store, req, res, {
 				trustOrigin: isLocalOrigin,
 				registryDir
@@ -65,7 +95,7 @@ function redirectSource(path) {
 * Content with a problem gives none, and the build reports the problem.
 */
 async function siteRedirects(root) {
-	const content = await loadSiteContent(fileSystemSource(root)).catch(() => void 0);
+	const content = await loadSiteContent(fileSystemSource(root)).then(shownContent, () => void 0);
 	if (!content?.redirects) return [];
 	const taken = new Set(allPages(content).map((page) => page.path));
 	const problems = redirectProblems(content.redirects);
@@ -91,6 +121,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.
+* - 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
 *   the files on disk. It's never part of a build.
 * - In `next dev`, turns off React's debug channel (`experimental.reactDebugChannel`)
@@ -101,6 +135,8 @@ function withGoodfellow(nextConfig = {}, options = {}) {
 	const root = resolve(options.root ?? process.cwd());
 	const basePath = nextBasePath(nextConfig.basePath ?? process.env.GOODFELLOW_BASE);
 	return async (phase) => {
+		const problem = contentRepositoryProblem(root);
+		if (problem) throw new Error(problem);
 		const config = {
 			trailingSlash: true,
 			...nextConfig,
@@ -111,27 +147,65 @@ function withGoodfellow(nextConfig = {}, options = {}) {
 				GOODFELLOW_BASE_PATH: basePath
 			}
 		};
+		if (phase === PHASE_PRODUCTION_BUILD) {
+			const dates = join(root, nextConfig.distDir ?? ".next", BUILD_DATES_DIR);
+			await rm(dates, {
+				recursive: true,
+				force: true
+			});
+			process.env[BUILD_DATES_ENV] = dates;
+		}
+		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.");
+			return {
+				...config,
+				images: nextConfig.images,
+				outputFileTracingIncludes: {
+					...nextConfig.outputFileTracingIncludes,
+					"/**": [
+						...nextConfig.outputFileTracingIncludes?.["/**"] ?? [],
+						"./content/**/*",
+						"./public/media/**/*"
+					]
+				},
+				redirects: async () => [...await siteRedirects(root), ...await nextConfig.redirects?.() ?? []]
+			};
+		}
 		if (phase !== PHASE_DEVELOPMENT_SERVER) return {
 			output: "export",
 			...config,
-			redirects: async () => [...await siteRedirects(root), ...await nextConfig.redirects?.() ?? []]
+			redirects: async () => [...await siteRedirects(root), ...await nextConfig.redirects?.() ?? []],
+			...siteAdmin(root) && { headers: async () => [...adminHeaders(root), ...await nextConfig.headers?.() ?? []] }
 		};
 		const port = await startDevApi(root);
 		const rewrite = {
 			source: `${DEV_API_PREFIX}/:path*`,
 			destination: `http://127.0.0.1:${port}${DEV_API_PREFIX}/:path*`
 		};
-		const calendars = {
-			source: `/${CALENDARS_DIR}/:file(.+\\.ics)`,
-			destination: `http://127.0.0.1:${port}${DEV_API_PREFIX}/${CALENDARS_DIR}/:file`
-		};
+		const buildFiles = [{
+			dir: CALENDARS_DIR,
+			file: ":file(.+\\.ics)"
+		}, {
+			dir: FEEDS_DIR,
+			file: ":file(.+\\.rss|.+\\.atom)"
+		}].flatMap(({ dir, file }) => [{
+			source: `/${dir}/${file}`,
+			destination: `http://127.0.0.1:${port}${DEV_API_PREFIX}/${dir}/:file`
+		}, {
+			source: `/:language([a-z0-9-]+)/${dir}/${file}`,
+			destination: `http://127.0.0.1:${port}${DEV_API_PREFIX}/:language/${dir}/:file`
+		}]);
 		return {
 			...config,
 			experimental: {
 				reactDebugChannel: false,
 				...nextConfig.experimental
 			},
-			rewrites: async () => withRewrite(withRewrite(await nextConfig.rewrites?.(), calendars), rewrite)
+			rewrites: async () => {
+				let rewrites = await nextConfig.rewrites?.();
+				for (const next of [...buildFiles, rewrite]) rewrites = withRewrite(rewrites, next);
+				return rewrites ?? [];
+			}
 		};
 	};
 }

package/dist/dev-editor-DiPKrIAS.js

@@ -0,0 +1,124 @@
+import { DEV_EDITOR_PREFIX, EDITOR_PRELUDE, editorPage } from "@goodfellow-cms/core";
+import { existsSync } from "node:fs";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { join, resolve, sep } from "node:path";
+//#region src/dev-editor.ts
+const CONFIG_FILES = [
+	"goodfellow.config.tsx",
+	"goodfellow.config.ts",
+	"goodfellow.config.jsx",
+	"goodfellow.config.js"
+];
+const ENTRY = "\0goodfellow:next-editor";
+const TAILWIND_BROWSER = "tailwind-browser.js";
+/** How long the editor's frames stay as built before the admin panel reloads them. */
+const REBUILT_DELAY = 300;
+const TYPES = {
+	html: "text/html; charset=utf-8",
+	js: "text/javascript; charset=utf-8",
+	css: "text/css; charset=utf-8",
+	map: "application/json",
+	json: "application/json"
+};
+async function startDevEditor(root) {
+	const configFile = CONFIG_FILES.map((name) => join(root, name)).find((file) => existsSync(file));
+	if (!configFile) throw new Error(`No goodfellow.config.tsx in ${root}.`);
+	const outDir = join(root, "node_modules/.goodfellow/next-editor");
+	await mkdir(outDir, { recursive: true });
+	const [{ watch }, { default: tailwindBrowser }] = await Promise.all([import("rolldown"), import("./tailwind-browser-Ds-ZH7sO.js")]);
+	await writeFile(join(outDir, TAILWIND_BROWSER), tailwindBrowser);
+	const stylesheets = /* @__PURE__ */ new Set();
+	let version = 0;
+	let built = () => {};
+	const ready = new Promise((resolveReady) => {
+		built = resolveReady;
+	});
+	let counting;
+	const writePage = async () => {
+		const css = await Promise.all([...stylesheets].map((file) => readFile(file, "utf8")));
+		await writeFile(join(outDir, "editor.css"), css.join("\n"));
+		await writeFile(join(outDir, "index.html"), editorPage({
+			scripts: ["editor.js"],
+			stylesheets: ["editor.css"]
+		}));
+		counting = setTimeout(() => {
+			version += 1;
+			writeFile(join(outDir, "version.json"), JSON.stringify({ version }));
+		}, version === 0 ? 0 : REBUILT_DELAY);
+	};
+	watch({
+		input: { editor: ENTRY },
+		cwd: root,
+		platform: "browser",
+		tsconfig: existsSync(join(root, "tsconfig.json")) ? join(root, "tsconfig.json") : false,
+		transform: {
+			jsx: { runtime: "automatic" },
+			define: { "process.env.NODE_ENV": JSON.stringify("development") }
+		},
+		plugins: [{
+			name: "goodfellow:next-editor",
+			resolveId: (id) => id === ENTRY ? id : void 0,
+			load(id) {
+				if (id === ENTRY) return [
+					`import config from ${JSON.stringify(configFile)};`,
+					`import { mountEditorFrame } from "@goodfellow-cms/admin/editor";`,
+					`import "@puckeditor/core/puck.css";`,
+					`import "@goodfellow-cms/admin/styles.css";`,
+					`mountEditorFrame(config, undefined, { tailwindBrowserUrl: ${JSON.stringify(TAILWIND_BROWSER)} });`
+				].join("\n");
+				if (id.endsWith(".css")) {
+					stylesheets.add(id);
+					return {
+						code: "",
+						moduleType: "js"
+					};
+				}
+			}
+		}],
+		onLog(level, log, handler) {
+			if (log.code === "MODULE_LEVEL_DIRECTIVE") return;
+			handler(level, log);
+		},
+		output: {
+			dir: outDir,
+			format: "iife",
+			codeSplitting: false,
+			entryFileNames: "editor.js",
+			banner: EDITOR_PRELUDE,
+			sourcemap: true
+		}
+	}).on("event", (event) => {
+		if (event.code === "BUNDLE_START") clearTimeout(counting);
+		else if (event.code === "BUNDLE_END") {
+			event.result.close();
+			writePage().then(built, (error) => {
+				console.error(`The editor's frames couldn't be written: ${error.message}`);
+				built();
+			});
+		} else if (event.code === "ERROR") {
+			event.result?.close();
+			console.error(`The editor's frames couldn't be built: ${event.error.message}`);
+			built();
+		}
+	});
+	return { async serve(req, res) {
+		const pathname = new URL(req.url ?? "/", "http://localhost").pathname;
+		const page = pathname === DEV_EDITOR_PREFIX.slice(0, -1);
+		if (!(page || pathname.startsWith(DEV_EDITOR_PREFIX)) || req.method !== "GET" && req.method !== "HEAD") return false;
+		await ready;
+		const name = page ? "index.html" : pathname.slice(DEV_EDITOR_PREFIX.length) || "index.html";
+		const file = resolve(outDir, name);
+		if (!file.startsWith(`${outDir}${sep}`)) return false;
+		try {
+			const data = await readFile(file);
+			res.setHeader("Content-Type", TYPES[file.slice(file.lastIndexOf(".") + 1)] ?? "application/octet-stream");
+			res.setHeader("Cache-Control", "no-store");
+			res.end(req.method === "HEAD" ? void 0 : data);
+		} catch {
+			res.writeHead(404).end();
+		}
+		return true;
+	} };
+}
+//#endregion
+export { startDevEditor };

package/dist/editor.d.ts

@@ -0,0 +1,14 @@
+import { GoodfellowConfig } from "@goodfellow-cms/core";
+import "@goodfellow-cms/admin/styles.css";
+import "@puckeditor/core/puck.css";
+//#region src/editor.d.ts
+/**
+ * The editor's frames, for a Next.js site's `app/admin/editor/page.tsx`,
+ * which must be a Client Component (`"use client"`) that imports the site's
+ * config: Puck, the config and every block, sandboxed away from the admin
+ * panel's page, which signs in and publishes.
+ */
+export declare function GoodfellowEditor({ config }: {
+  config: GoodfellowConfig;
+}): import("react").JSX.Element;
+//#endregion

package/dist/editor.js

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "@goodfellow-cms/admin/styles.css";
+import "@puckeditor/core/puck.css";
+//#region src/editor.tsx
+/** Started once a page: React runs effects twice in development, and a second start would connect again. */
+let started = false;
+/**
+* The editor's frames, for a Next.js site's `app/admin/editor/page.tsx`,
+* which must be a Client Component (`"use client"`) that imports the site's
+* config: Puck, the config and every block, sandboxed away from the admin
+* panel's page, which signs in and publishes.
+*/
+function GoodfellowEditor({ config }) {
+	const element = useRef(null);
+	useEffect(() => {
+		const container = element.current;
+		if (!container || started) return;
+		started = true;
+		Promise.all([import("@goodfellow-cms/admin/editor"), import("./tailwind-browser-Ds-ZH7sO.js").then((module) => module.default)]).then(([{ mountEditorFrame }, tailwindBrowser]) => {
+			const tailwindBrowserUrl = URL.createObjectURL(new Blob([tailwindBrowser], { type: "text/javascript" }));
+			mountEditorFrame(config, container, { tailwindBrowserUrl });
+		});
+	}, [config]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: element,
+		id: "goodfellow-frame"
+	});
+}
+//#endregion
+export { GoodfellowEditor };

package/dist/export.d.ts

@@ -1,3 +1,13 @@
+import { SelfHostedResult, SiteProblem } from "@goodfellow-cms/core";
+import { SiteFile } from "@goodfellow-cms/core/node";
+//#region src/site-files.d.ts
+/**
+ * The Next.js starter's files that `goodfellow-next update` keeps up to date
+ * where nobody has changed them, as the starter now has them. A test checks
+ * they match `templates/next`.
+ */
+export declare const NEXT_SITE_FILES: readonly SiteFile[];
+//#endregion
 //#region src/export.d.ts
 /**
  * Writes the calendar files of the site's collections of events into the
@@ -5,12 +15,59 @@
  * how many it wrote.
  */
 export declare function writeCalendarFiles(outDir: string, root?: string): Promise<number>;
+/**
+ * Writes the feeds of the site's collections into the export, as `goodfellow
+ * build` does. Returns how many it wrote: none without the site's address.
+ */
+export declare function writeFeedFiles(outDir: string, root?: string): Promise<number>;
+/**
+ * The folders the calendar files and feeds go in: `calendars/` and `feeds/`,
+ * and on a site in several languages, the same under each other language's
+ * code, such as `es/feeds/`.
+ */
+export declare function buildFileFolders(root?: string): Promise<string[]>;
+/** What `writeFontFiles()` did, for `buildNotes()`. */
+export interface FontsWritten {
+  fonts?: SelfHostedResult;
+  robotsElsewhere?: string;
+  sitemap?: string;
+}
+/**
+ * Copies the site's Google Fonts into the export and points its pages at
+ * them, as `goodfellow build` does (`selfHostFonts()`), with the export's base
+ * path, and says where search engines read `robots.txt` for a site in a
+ * subfolder (`rootRobotsUrl()`).
+ */
+export declare function writeFontFiles(outDir: string, root?: string): Promise<FontsWritten>;
+/**
+ * Writes the build record (`goodfellow-build.json`) into the export, as
+ * `goodfellow build` does, from the dates the processes that rendered its
+ * pages wrote into `.next/` (see `withGoodfellow()`). Returns when the site
+ * stops being current, if it does.
+ */
+export declare function writeBuildRecordFile(outDir: string, root?: string): Promise<string | undefined>;
+/** What `writeRedirectFiles()` wrote. */
+export interface RedirectsWritten {
+  /** How many pages at old addresses. */
+  pages: number;
+  /** How many redirects didn't fit in Cloudflare Pages' `_redirects`, and are left to their pages. */
+  cloudflareLeft: number;
+}
 /**
  * Writes a page at each of the site's old addresses that sends visitors on, as
- * `goodfellow build` does. Pages win: an address the export has a page at keeps
- * it. Returns how many it wrote.
+ * `goodfellow build` does, and the same redirects in `_redirects` for
+ * Cloudflare Pages, which sends them itself. Pages win: an address the export
+ * has a page at keeps it.
+ */
+export declare function writeRedirectFiles(outDir: string, root?: string): Promise<RedirectsWritten>;
+/**
+ * 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.
+ * Run it last, once every page is written. Returns how many pages it guarded,
+ * or `undefined` for a site without an admin address.
  */
-export declare function writeRedirectFiles(outDir: string, root?: string): Promise<number>;
+export declare function guardExport(outDir: string, root?: string): Promise<number | undefined>;
 /**
  * Puts a static export's prefetch files where the browser asks for them.
  * Next.js names each after its segment path with `/` turned into `.`
@@ -19,4 +76,46 @@ export declare function writeRedirectFiles(outDir: string, root?: string): Promi
  * prefetch is "not found". Returns how many files it moved; none elsewhere.
  */
 export declare function fixSegmentFiles(outDir: string): Promise<number>;
+/** Where the editor's frames' page is in an export, and in a full-stack site's build. */
+export declare const EDITOR_PAGES: string[];
+/**
+ * Gives the editor's frames' page (`app/admin/editor/`) its Content Security
+ * Policy and first script, which removes WebRTC, as the first things in its
+ * head, so they apply before anything Next.js put there. The policy runs only
+ * the site's own scripts, Next.js's inline ones by their hashes, and fetches
+ * nothing (`editorPolicy()`). Returns whether it found the page.
+ */
+export declare function writeEditorPolicy(dir: string): Promise<boolean>;
+/**
+ * On a site in several languages, puts each page's language on its `<html>`,
+ * which Next.js's root layout, shared by every page, says is the main one:
+ * in a static export's pages (`outDir`), or, without one, in the pages a
+ * full-stack site's `next build` rendered ahead. Returns how many it changed.
+ */
+export declare function writePageLanguages(outDir: string | undefined, root?: string): Promise<number>;
+/** A page `next build` rendered ahead: its address on the site, and its HTML. */
+export interface BuiltPage {
+  url: string;
+  html: string;
+}
+/**
+ * The pages `next build` rendered ahead for a full-stack site (`withGoodfellow(config,
+ * { server: true })`), at their addresses on the site, without its base path, as the
+ * Search block looks them up. Next.js lists them in `.next/prerender-manifest.json`
+ * and keeps their HTML in `.next/server/app/`. The admin panel and Next.js's own pages are left out.
+ */
+export declare function builtPages(root?: string): Promise<BuiltPage[]>;
+/**
+ * The pages a static export has, at their addresses on the site, without its
+ * base path: `about.html` and `about/index.html` are `/about`. The admin panel
+ * and Next.js's own files are left out.
+ */
+export declare function exportedPages(outDir: string): Promise<BuiltPage[]>;
+/**
+ * What automated checks find on the pages Next.js built, as `goodfellow build`
+ * reports them: images without alt text, headings that skip a level, links
+ * that don't say where they go, and axe-core's checks (`checkBuiltPages()`).
+ * Pages that aren't the site's, such as Next.js's own, are left out.
+ */
+export declare function checkPages(pages: readonly BuiltPage[], root?: string): Promise<SiteProblem[]>;
 //#endregion