@goodfellow-cms/next 0.4.0 → 0.6.0

package/README.md

@@ -4,7 +4,7 @@ Goodfellow pages and the admin panel in a Next.js App Router site, exported as s
 
 Start from the Next.js starter: `npm create goodfellow@latest my-site -- --template next`.
 
-[Goodfellow](https://github.com/goodfellow-cms/goodfellow-cms) is a website builder for people who aren't developers, with no server or database: pages are files in your own GitHub or GitLab repository, edited in a visual editor built on [Puck](https://puckeditor.com). To start a new site, run `npm create goodfellow@latest my-site`. See the [documentation](https://goodfellow-cms.github.io/goodfellow-cms/) for everything else.
+[Goodfellow](https://github.com/goodfellow-cms/goodfellow-cms) is a website builder for people who aren't developers, with no server or database: pages are files in your own GitHub, GitLab or Bitbucket repository, edited in a visual editor built on [Puck](https://puckeditor.com). To start a new site, run `npm create goodfellow@latest my-site`. See the [documentation](https://goodfellow-cms.github.io/goodfellow-cms/) for everything else.
 
 More in the docs: [Next.js](https://goodfellow-cms.github.io/goodfellow-cms/docs/nextjs) and [Full-stack Next.js sites](https://goodfellow-cms.github.io/goodfellow-cms/docs/full-stack-nextjs).
 

package/bin/goodfellow-next.js

@@ -1,43 +1,150 @@
 #!/usr/bin/env node
 // After `next build`: `goodfellow-next finish out` fixes the export's prefetch files on Windows,
-// writes the calendar files of collections of events and the pages at redirects' old addresses, and the search index for sites with a search block. `index` only writes the index.
+// writes the calendar files of collections of events, collections' feeds, the pages at redirects' old addresses and Cloudflare Pages' _redirects, and the search index for sites with a search block,
+// copies the site's Google Fonts into the export, builds plugins' admin frames and runs their build steps, starts every page with the admin address's guard for a site with one, and reports what automated checks find on the exported pages. `index` only writes the index.
 // `goodfellow-next update` updates Goodfellow, as `goodfellow update` does for other sites.
+// `goodfellow-next task [--out <file>]` runs one of a plugin's tasks for the admin panel, as `goodfellow task` does.
+// `goodfellow-next due [--since <time>] [--output <file>]` says whether a scheduled change has come due, as `goodfellow due` does.
+// `goodfellow-next nightly [--mode <mode>]` says whether tonight's build is needed, as `goodfellow nightly` does.
 // `goodfellow-next content link|copy [folder]` puts a content repository's files in place, for a site whose
 // content is kept in a repository of its own.
+// `goodfellow-next import wordpress <file or address> [--dry-run]` imports a WordPress site, as `goodfellow import` does.
+// `goodfellow-next export wordpress [file]` writes the site as a WordPress export file, as `goodfellow export` does.
+// `goodfellow-next admin add <address>|check|remove` sets the admin address, and `goodfellow-next broker use <address>|remove`
+// the token broker, in goodfellow.config.tsx, as `goodfellow admin` and `goodfellow broker` do.
+import { existsSync, readFileSync } from "node:fs";
 import { rm } from "node:fs/promises";
 import { relative } from "node:path";
 import { parseArgs } from "node:util";
-import { formatUpdateResult } from "@goodfellow-cms/core";
-import { ContentRepositoryError, setUpContentRepository, update } from "@goodfellow-cms/core/node";
+import { buildNotes, CLOUDFLARE_REDIRECTS_LIMIT, configAdmin, formatUpdateResult } from "@goodfellow-cms/core";
+import { reportSiteProblems } from "@goodfellow-cms/core/accessibility";
+import {
+  AdminSetupError,
+  BrokerSetupError,
+  ContentRepositoryError,
+  checkSiteAdminAddress,
+  contentRepositoryProblem,
+  exportWordPress,
+  formatAdminResult,
+  formatWordPressExport,
+  formatWordPressImport,
+  importWordPress,
+  nightlyCheck,
+  reportDue,
+  reportNightly,
+  scheduleDue,
+  setAdminAddress,
+  setBrokerAddress,
+  setUpContentRepository,
+  update,
+} from "@goodfellow-cms/core/node";
 import { writePagesSearchIndex, writeSearchIndex } from "@goodfellow-cms/core/search-index";
-import { builtPages, fixSegmentFiles, writeCalendarFiles, writeRedirectFiles } from "@goodfellow-cms/next/export";
+import { WordPressReadError } from "@goodfellow-cms/core/wordpress";
+import {
+  buildFileFolders,
+  builtPages,
+  checkPages,
+  exportedPages,
+  fixSegmentFiles,
+  guardExport,
+  NEXT_SITE_FILES,
+  writeBuildRecordFile,
+  writeCalendarFiles,
+  writeEditorPolicy,
+  writeFeedFiles,
+  writeFontFiles,
+  writePageLanguages,
+  writePluginFiles,
+  writeRedirectFiles,
+  writeTaskResult,
+} from "@goodfellow-cms/next/export";
 
 const [command, dir = "out"] = process.argv.slice(2);
+const CONFIG_FILES = ["goodfellow.config.tsx", "goodfellow.config.ts", "goodfellow.config.jsx", "goodfellow.config.js"];
 // A full-stack site (withGoodfellow(config, { server: true })): Next.js serves its pages and sends redirects
-// itself, so the calendar files and the search index are written into public/, which `next start` and hosts
+// itself, so the calendar files, feeds and the search index are written into public/, which `next start` and hosts
 // serve as static files, as they are for an export.
 if (command === "finish" && dir === "--server") {
-  await rm("public/calendars", { recursive: true, force: true });
+  // Next.js renders a full-stack site's pages as it serves them, so nothing can put a guard first in each.
+  const config = CONFIG_FILES.find((file) => existsSync(file));
+  if (config && configAdmin(readFileSync(config, "utf8"))) {
+    console.error(
+      "A full-stack site can't have an admin address: its admin panel signs in with the site's own sign-in.",
+    );
+    process.exit(1);
+  }
+  for (const folder of await buildFileFolders()) await rm(`public/${folder}`, { recursive: true, force: true });
+  // The editor's frames' page, which next start serves as it was rendered.
+  await writeEditorPolicy(".next/server/app");
   const calendars = await writeCalendarFiles("public");
   if (calendars > 0) console.log(`Wrote ${calendars} calendar files, in public/calendars`);
-  const indexed = await writePagesSearchIndex(await builtPages(), "public/pagefind");
+  const feeds = await writeFeedFiles("public");
+  if (feeds > 0) console.log(`Wrote ${feeds} feeds, in public/feeds`);
+  // Before the pages are read, so the search index and the checks see each page's language.
+  const languages = await writePageLanguages(undefined);
+  if (languages > 0) console.log(`Marked ${languages} pages with their language`);
+  // Plugins' admin frames and build steps, into public/, which next start serves.
+  const plugins = await writePluginFiles("public");
+  if (plugins.frames.length > 0)
+    console.log(`Wrote the admin frames of ${plugins.frames.join(", ")}, in public/admin/plugins`);
+  const pages = await builtPages();
+  const indexed = await writePagesSearchIndex(pages, "public/pagefind");
   console.log(
     indexed === undefined
       ? "No page has a search block, so there's nothing to index"
       : `Indexed ${indexed} pages for search, in public/pagefind`,
   );
+  for (const line of reportSiteProblems(await checkPages(pages))) console.log(line);
   process.exit(0);
 }
 if (command === "update") {
   const { values } = parseArgs({
     args: process.argv.slice(3),
-    options: { to: { type: "string" }, publish: { type: "boolean" } },
+    options: { to: { type: "string" }, publish: { type: "boolean" }, commit: { type: "boolean" } },
   });
-  const result = await update({ to: values.to, publish: values.publish });
+  // The starter's admin pages, kept up to date where nobody has changed them, on sites with an admin panel.
+  const siteFiles = existsSync("app/admin/page.tsx") ? NEXT_SITE_FILES : [];
+  const result = await update({ to: values.to, publish: values.publish, commit: values.commit, siteFiles });
   // For the admin panel, which reads it in the host's log.
   console.log(formatUpdateResult(result));
   process.exit(result.state === "failed" ? 1 : 0);
 }
+if (command === "task") {
+  const { values } = parseArgs({ args: process.argv.slice(3), options: { out: { type: "string" } } });
+  const env = process.env;
+  await writeTaskResult(
+    ".",
+    {
+      id: env.GOODFELLOW_TASK_REQUEST ?? "",
+      plugin: env.GOODFELLOW_TASK_PLUGIN ?? "",
+      task: env.GOODFELLOW_TASK_NAME ?? "",
+      input: env.GOODFELLOW_TASK_INPUT ?? "",
+      key: env.GOODFELLOW_TASK_KEY ?? "",
+    },
+    values.out,
+  );
+  process.exit(0);
+}
+if (command === "due") {
+  const { values } = parseArgs({
+    args: process.argv.slice(3),
+    options: { since: { type: "string" }, output: { type: "string" } },
+  });
+  const result = await scheduleDue({ since: values.since });
+  for (const line of await reportDue(result, process.env, values.output ?? process.env.GITHUB_OUTPUT))
+    console.log(line);
+  process.exit(0);
+}
+if (command === "nightly") {
+  const { values } = parseArgs({
+    args: process.argv.slice(3),
+    options: { mode: { type: "string" }, output: { type: "string" } },
+  });
+  const siteFiles = existsSync("app/admin/page.tsx") ? NEXT_SITE_FILES : [];
+  const result = await nightlyCheck({ siteFiles, ...(values.mode && { mode: values.mode }) });
+  for (const line of await reportNightly(result, values.output ?? process.env.GITHUB_OUTPUT)) console.log(line);
+  process.exit(0);
+}
 if (command === "content") {
   const [action, from] = process.argv.slice(3);
   if (action === "link" || action === "copy") {
@@ -57,37 +164,150 @@ if (command === "content") {
     }
   }
 }
+if (command === "admin" || command === "broker") {
+  const [action, argument] = process.argv.slice(3);
+  try {
+    if (command === "admin" && ((action === "add" && argument) || action === "check" || action === "remove")) {
+      const result =
+        action === "check"
+          ? await checkSiteAdminAddress(".")
+          : await setAdminAddress(".", action === "add" ? argument : undefined);
+      const { lines, ok } = formatAdminResult(action, result, "goodfellow-next");
+      for (const line of lines) (ok ? console.log : console.error)(line);
+      process.exit(ok ? 0 : 1);
+    }
+    if (command === "broker" && ((action === "use" && argument) || action === "remove")) {
+      const address = await setBrokerAddress(".", action === "use" ? argument : undefined);
+      console.log(
+        address
+          ? `Editors sign in at ${address} once the site has rebuilt with goodfellow.config.tsx.`
+          : "Editors sign in in the admin panel itself once the site has rebuilt with goodfellow.config.tsx.",
+      );
+      process.exit(0);
+    }
+  } catch (error) {
+    if (!(error instanceof AdminSetupError || error instanceof BrokerSetupError)) throw error;
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+if (command === "import") {
+  const { positionals, values } = parseArgs({
+    args: process.argv.slice(3),
+    allowPositionals: true,
+    options: { "dry-run": { type: "boolean" } },
+  });
+  const [kind, from] = positionals;
+  const problem = contentRepositoryProblem(".");
+  if (kind === "wordpress" && from && !problem) {
+    try {
+      const result = await importWordPress(".", from, { dryRun: values["dry-run"], log: (line) => console.log(line) });
+      console.log(formatWordPressImport(result));
+      process.exit(0);
+    } catch (error) {
+      if (!(error instanceof WordPressReadError)) throw error;
+      console.error(error.message);
+      process.exit(1);
+    }
+  }
+  if (problem) {
+    console.error(problem);
+    process.exit(1);
+  }
+}
+if (command === "export") {
+  const [kind, file] = process.argv.slice(3);
+  const problem = contentRepositoryProblem(".");
+  if (problem) {
+    console.error(problem);
+    process.exit(1);
+  }
+  if (kind === "wordpress") {
+    console.log(formatWordPressExport(await exportWordPress(".", file)));
+    process.exit(0);
+  }
+}
 if (command !== "finish" && command !== "index") {
   console.error(
     [
       "Usage: goodfellow-next finish [folder]",
       "       goodfellow-next finish --server",
       "       goodfellow-next index [folder]",
-      "       goodfellow-next update [--to fixes|automatic|latest|<release>] [--publish]",
+      "       goodfellow-next update [--to fixes|automatic|latest|<release>] [--publish | --commit]",
+      "       goodfellow-next due [--since <time>] [--output <file>]",
+      "       goodfellow-next nightly [--mode changed|always|off] [--output <file>]",
       "       goodfellow-next content link|copy [folder]",
+      "       goodfellow-next import wordpress <file or address> [--dry-run]",
+      "       goodfellow-next export wordpress [file]",
+      "       goodfellow-next admin add <address> | check | remove",
+      "       goodfellow-next broker use <address> | remove",
       "",
       "finish  Gets the exported site in folder (default: out) ready to publish: puts the files",
       "        Next.js uses to load pages ahead where browsers look for them, writes calendar files",
-      "        for collections of events and pages that send visitors on from old addresses, and",
-      "        indexes it for search. With --server, for a full-stack site, writes the calendar",
-      "        files into public/calendars and indexes the pages next build rendered into",
-      "        public/pagefind instead.",
+      "        for collections of events, collections' feeds and pages that send visitors on from",
+      "        old addresses, builds plugins' admin frames and runs their build steps, indexes it",
+      "        for search, and lists what automated accessibility checks",
+      "        find on its pages. With --server, for a full-stack site, writes the calendar files",
+      "        and feeds into public/calendars and public/feeds and indexes and checks the pages",
+      "        next build rendered, with the index in public/pagefind, instead.",
       "index   Only indexes the exported site for its search block.",
       "update  Updates Goodfellow, and blocks from its registry, if the site still builds.",
+      "        --publish pushes it to the main branch; --commit only commits it, for a job",
+      "        that runs none of the site's code to publish.",
+      "due     Says whether a scheduled change has come due since --since (default: the last",
+      "        hour), so the site needs building again, and sets the step's due output on",
+      "        GitHub Actions, or adds it to --output.",
+      "nightly Says whether tonight's build is needed: when the site has changed since the live",
+      "        site was built, what it shows by today's date has, or an update is available",
+      "        (--mode, or GOODFELLOW_NIGHTLY: changed, the default, always or off), and sets the",
+      "        step's build and update outputs on GitHub Actions, or adds them to --output.",
       "content For a site whose content is kept in a repository of its own: links content/ and",
       "        public/media/ to the content repository in folder (default: content-repository),",
       "        or copies them from it, as builds do.",
+      "import  Brings a WordPress site's pages, posts, categories, tags, menus and media into",
+      "        this site, from its export file (Tools → Export) or its address. With --dry-run,",
+      "        says what it would bring across and changes nothing.",
+      "export  Writes this site as a WordPress export file (default: named after the site),",
+      "        which WordPress imports with Tools → Import → WordPress.",
+      "admin   The admin panel's address of its own, such as admin.example.org, in",
+      "        goodfellow.config.tsx: add names it; check checks it once the site has rebuilt with",
+      "        it, then starts the admin panel only there; remove stops using it.",
+      "broker  The site's token broker in goodfellow.config.tsx: use signs editors in there once",
+      "        it's online; remove stops using it.",
     ].join("\n"),
   );
   process.exit(1);
 }
+/** What checking the exported pages found, reported once the export is ready. */
+let problems = [];
 if (command === "finish") {
   const moved = await fixSegmentFiles(dir);
+  await writeEditorPolicy(dir);
   if (moved > 0) console.log(`Moved ${moved} of Next.js's prefetch files to where browsers look for them`);
   const calendars = await writeCalendarFiles(dir);
   if (calendars > 0) console.log(`Wrote ${calendars} calendar files`);
+  const feeds = await writeFeedFiles(dir);
+  if (feeds > 0) console.log(`Wrote ${feeds} feeds`);
+  const languages = await writePageLanguages(dir);
+  if (languages > 0) console.log(`Marked ${languages} pages with their language`);
+  // Before the redirects' pages, which aren't the site's.
+  problems = await checkPages(await exportedPages(dir));
   const redirects = await writeRedirectFiles(dir);
-  if (redirects > 0) console.log(`Wrote ${redirects} redirects`);
+  if (redirects.pages > 0) console.log(`Wrote ${redirects.pages} redirects`);
+  if (redirects.cloudflareLeft > 0) {
+    console.log(
+      `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);
+  // 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(", ")}`);
+  // What the site was built from, and when it stops being current, for the nightly check.
+  const currentUntil = await writeBuildRecordFile(dir);
+  if (currentUntil) {
+    console.log(`What the site shows by today's date changes at ${currentUntil}, when it needs building again`);
+  }
 }
 const indexed = await writeSearchIndex(dir);
 console.log(
@@ -95,3 +315,8 @@ console.log(
     ? `No page in ${dir} has a search block, so there's nothing to index`
     : `Indexed ${indexed} pages for search`,
 );
+if (command === "finish") {
+  const guarded = await guardExport(dir);
+  if (guarded !== undefined) console.log(`Started ${guarded} pages with the admin address's guard`);
+}
+for (const line of reportSiteProblems(problems)) console.log(line);

package/dist/admin.d.ts

@@ -1,11 +1,21 @@
-import { GoodfellowConfig } from "@goodfellow-cms/core";
+import { AdminSite, GoodfellowConfig } from "@goodfellow-cms/core";
 import { Strings } from "@goodfellow-cms/admin";
-import "@puckeditor/core/puck.css";
 import "@goodfellow-cms/admin/styles.css";
 //#region src/admin.d.ts
 export interface GoodfellowAdminProps {
-  /** The site's `goodfellow.config.tsx`. */
-  config: GoodfellowConfig;
+  /**
+   * What the admin panel knows about the site, from `site.admin()` in the
+   * server component `app/admin/page.tsx`. The admin panel's page then never
+   * loads the site's config: its blocks run in the editor's frames, at `app/admin/editor/`.
+   */
+  site?: AdminSite;
+  /**
+   * The site's `goodfellow.config.tsx`, which an `app/admin/page.tsx` from
+   * before the editor's frames passes. That page loads every block's code
+   * itself, so the admin panel only says how to update it, and never signs in
+   * there: `goodfellow-next update` replaces it where it's still the starter's.
+   */
+  config?: GoodfellowConfig;
   /** The live site's address, for "View" links. Defaults to the site's base path, such as `/` or `/my-site/`. */
   siteUrl?: string;
   /** Replaces any of the admin panel's text, for rewording or translation. */
@@ -19,10 +29,10 @@ export interface GoodfellowAdminProps {
   server?: string;
 }
 /**
- * The admin panel, for a Next.js site's `app/admin/page.tsx`, which must be a
- * Client Component (`"use client"`) that imports the site's config.
- * In `next dev` it saves to the files on disk; on the live site, editors sign
- * in to the config's git backend, or on a full-stack site (`server`), with the site's own sign-in.
+ * The admin panel, for a Next.js site's `app/admin/page.tsx`, given
+ * `site.admin()` there. In `next dev` it saves to the files on disk; on the
+ * live site, editors sign in to the config's git backend, or on a full-stack
+ * site (`server`), with the site's own sign-in.
  */
-export declare function GoodfellowAdmin({ config, siteUrl, strings, server }: GoodfellowAdminProps): import("react").JSX.Element | null;
+export declare function GoodfellowAdmin({ site, config, strings, ...props }: GoodfellowAdminProps): import("react").JSX.Element;
 //#endregion

package/dist/admin.js

@@ -1,7 +1,9 @@
+"use client";
+import { n as EDITOR_PAGE, t as ADMIN_PAGE } from "./site-files-BeLnLxCl.js";
+import { ADMIN_POLICY, DEV_EDITOR_PREFIX } from "@goodfellow-cms/core";
 import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Admin } from "@goodfellow-cms/admin";
-import "@puckeditor/core/puck.css";
+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";
@@ -24,30 +26,93 @@ async function siteStylesheets(siteUrl) {
 }
 /** Set by `withGoodfellow()` from Next.js's `basePath`, such as `/my-site`, or empty. */
 const BASE_PATH = process.env.GOODFELLOW_BASE_PATH ?? "";
-async function setUp(siteUrl) {
-	const [stylesheets, tailwindBrowser, store] = await Promise.all([
+/**
+* Where the editor's frames are: `app/admin/editor/`, or in `next dev` the
+* bundle the local backend serves, since Next.js refuses its development
+* files to sandboxed frames.
+*/
+const EDITOR_URL = process.env.NODE_ENV === "development" ? `${BASE_PATH}${DEV_EDITOR_PREFIX}` : `${BASE_PATH}/admin/editor/`;
+/**
+* In `next dev`, reloads the editor's frames once they're rebuilt, so they
+* show the site's new code, leaving whatever is open on the admin panel's page as it is.
+*/
+function useEditorRebuilds() {
+	useEffect(() => {
+		if (process.env.NODE_ENV !== "development") return;
+		let shown;
+		const check = async () => {
+			try {
+				const { version } = await (await fetch(`${EDITOR_URL}version.json`, { cache: "no-store" })).json();
+				if (shown !== void 0 && version !== shown) reloadFrames();
+				shown = version;
+			} catch {}
+		};
+		check();
+		const timer = setInterval(check, 1500);
+		return () => clearInterval(timer);
+	}, []);
+}
+/**
+* Goodfellow's git hosts, which a site's config names as `site.backend`. A
+* bundler needs every package it may load named here, as the starter's
+* dependencies are.
+*/
+const HOSTS = {
+	"@goodfellow-cms/bitbucket": () => import("@goodfellow-cms/bitbucket"),
+	"@goodfellow-cms/github": () => import("@goodfellow-cms/github"),
+	"@goodfellow-cms/gitlab": () => import("@goodfellow-cms/gitlab")
+};
+async function hostFrom(source) {
+	const load = Object.hasOwn(HOSTS, source.package) ? HOSTS[source.package] : void 0;
+	const make = load && (await load())[source.export];
+	if (typeof make !== "function") throw new Error(`The admin panel can't sign in to ${source.package} yet.`);
+	return make(source.options);
+}
+async function setUp(siteUrl, backend) {
+	const [stylesheets, tailwindBrowser, store, host] = await Promise.all([
 		siteStylesheets(siteUrl),
 		import("./tailwind-browser-Ds-ZH7sO.js").then((module) => module.default),
-		process.env.NODE_ENV === "development" ? import("@goodfellow-cms/admin/dev").then((module) => module.localStore(`${BASE_PATH}/__goodfellow/api`)) : void 0
+		process.env.NODE_ENV === "development" ? import("@goodfellow-cms/admin/dev").then((module) => module.localStore(`${BASE_PATH}/__goodfellow/api`)) : void 0,
+		backend ? hostFrom(backend) : void 0
 	]);
 	return {
 		stylesheets,
 		tailwindBrowserUrl: URL.createObjectURL(new Blob([tailwindBrowser], { type: "text/javascript" })),
-		...store && { store }
+		...store && { store },
+		...host && { host }
 	};
 }
 /**
-* The admin panel, for a Next.js site's `app/admin/page.tsx`, which must be a
-* Client Component (`"use client"`) that imports the site's config.
-* In `next dev` it saves to the files on disk; on the live site, editors sign
-* in to the config's git backend, or on a full-stack site (`server`), with the site's own sign-in.
+* The admin panel, for a Next.js site's `app/admin/page.tsx`, given
+* `site.admin()` there. In `next dev` it saves to the files on disk; on the
+* live site, editors sign in to the config's git backend, or on a full-stack
+* site (`server`), with the site's own sign-in.
 */
-function GoodfellowAdmin({ config, siteUrl = `${BASE_PATH}/`, strings, server }) {
+function GoodfellowAdmin({ site, config, strings, ...props }) {
+	if (site) return /* @__PURE__ */ jsx(SiteAdmin, {
+		site,
+		...strings && { strings },
+		...props
+	});
+	if (config) return /* @__PURE__ */ jsx(OutdatedAdminPage, {
+		files: [{
+			path: "app/admin/page.tsx",
+			content: ADMIN_PAGE
+		}, {
+			path: "app/admin/editor/page.tsx",
+			content: EDITOR_PAGE
+		}],
+		...strings && { strings }
+	});
+	throw new Error("GoodfellowAdmin needs `site`, from `site.admin()` in app/admin/page.tsx.");
+}
+function SiteAdmin({ site, siteUrl = `${BASE_PATH}/`, strings, server }) {
 	const [setup, setSetup] = useState(null);
+	useEditorRebuilds();
 	useEffect(() => {
 		let current = true;
 		let url;
-		setUp(siteUrl).then((result) => {
+		setUp(siteUrl, site.backend).then((result) => {
 			url = result.tailwindBrowserUrl;
 			if (current) setSetup(result);
 			else URL.revokeObjectURL(url);
@@ -56,10 +121,16 @@ function GoodfellowAdmin({ config, siteUrl = `${BASE_PATH}/`, strings, server })
 			current = false;
 			if (url) URL.revokeObjectURL(url);
 		};
-	}, [siteUrl]);
-	if (!setup) return null;
-	return /* @__PURE__ */ jsx(Admin, {
-		config,
+	}, [siteUrl, site]);
+	const policy = /* @__PURE__ */ jsx("meta", {
+		httpEquiv: "Content-Security-Policy",
+		content: ADMIN_POLICY
+	});
+	if (!setup) return policy;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [policy, /* @__PURE__ */ jsx(Admin, {
+		site,
+		frames: { url: EDITOR_URL },
+		...setup.host && { host: setup.host },
 		...setup.store && {
 			store: setup.store,
 			registry: `${BASE_PATH}/__goodfellow/api/registry/{name}.json`
@@ -72,7 +143,7 @@ function GoodfellowAdmin({ config, siteUrl = `${BASE_PATH}/`, strings, server })
 		},
 		siteUrl,
 		...strings && { strings }
-	});
+	})] });
 }
 //#endregion
 export { GoodfellowAdmin };

package/dist/components.d.ts

@@ -1,5 +1,6 @@
 import { ImageSize } from "@goodfellow-cms/core";
 import { SiteImageProps, SiteLinkProps } from "@goodfellow-cms/react";
+import { ReactNode } from "react";
 //#region src/components.d.ts
 /** A link to one of the site's pages, with Next.js's client-side navigation. Next.js adds the base path. */
 export declare function NextLink(props: SiteLinkProps): import("react").JSX.Element;
@@ -14,4 +15,24 @@ export declare function NextImage({ src, alt, width, height, loading, ...props }
 export declare function CurrentMenuLinks({ 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
+ * it into exported pages; this keeps it right as visitors move between pages.
+ */
+export declare function PageLanguage({ language }: {
+  language: string;
+}): null;
+/**
+ * On a site in several languages, shows the layout's header or footer in the
+ * language of the page at the current address: the layout has one of each,
+ * already rendered, for every language. Blocks inside it learn the address
+ * from `useCurrentPath()`, such as the Language switch, whose links follow it.
+ */
+export declare function ByLanguage({ variants }: {
+  variants: Array<{
+    prefix: string;
+    children: ReactNode;
+  }>;
+}): import("react").JSX.Element;
 //#endregion

package/dist/components.js

@@ -1,4 +1,5 @@
 "use client";
+import { CurrentPathProvider } from "@goodfellow-cms/react";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 import Image from "next/image";
@@ -47,5 +48,30 @@ function CurrentMenuLinks({ basePath = "" }) {
 	}, [pathname, 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.
+*/
+function PageLanguage({ language }) {
+	useEffect(() => {
+		document.documentElement.lang = language;
+	}, [language]);
+	return null;
+}
+/**
+* On a site in several languages, shows the layout's header or footer in the
+* language of the page at the current address: the layout has one of each,
+* already rendered, for every language. Blocks inside it learn the address
+* from `useCurrentPath()`, such as the Language switch, whose links follow it.
+*/
+function ByLanguage({ variants }) {
+	const pathname = usePathname();
+	const shown = variants.find((variant) => variant.prefix && (pathname === variant.prefix || pathname.startsWith(`${variant.prefix}/`))) ?? variants.find((variant) => !variant.prefix);
+	return /* @__PURE__ */ jsx(CurrentPathProvider, {
+		path: pathname,
+		children: shown?.children
+	});
+}
 //#endregion
-export { CurrentMenuLinks, NextImage, NextLink };
+export { ByLanguage, CurrentMenuLinks, NextImage, NextLink, PageLanguage };

package/dist/config.d.ts

@@ -23,6 +23,8 @@ 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.
  * - 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