@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/notifications.ts

@@ -0,0 +1,223 @@
+// The notifications (#notifikationer, Notifications.tsx): what the editor and the apps have to say that is worth
+// reading again, newest first, with when it came and the link it had. Each has a type: the editor's own (`site`: the
+// site is updated or not, `saved`: something is saved, deleted, restored or installed, `failed`: it could not be,
+// `updates`: an app from the store updated on its own, AppList.tsx autoUpdate), or
+// an app's, which it declares (`notifications` in its index.ts, AppNotifications in apps.ts) as `<app>/<type>`. A
+// message about something going on ("Gemmer…") or about a form that cannot be saved has no type and is only shown at
+// the bottom.
+// Each type can be turned off under "Konto" › "Notifikationer" (Library.tsx Account): then it is not kept here or sent
+// to the phone (the editor's own are still shown at the bottom, as the answer to what was done; an app's not at all).
+// There too "På telefonen": when it is on, a notification comes on the phone or computer as well while the editor is
+// open but not on screen (another app or tab; notifyDevice), and, through the site's Worker (Web Push, packages/editor/worker/push.js),
+// when it is closed: this browser is signed up there with the types turned off and the editor's language (signUp), and
+// after a save the Worker tells it when the site has been built with it (waitOnServer); an app's part of the Worker
+// tells it the app's notifications. The bell in the top bar (Screen.tsx NotificationsLink) has a dot while some are not
+// seen; opening the notifications marks them seen. Kept in this browser: the last 50, the choices and the ids of the
+// apps' notifications already told.
+import { useSyncExternalStore } from 'react';
+import { siteName } from '@site/editor';
+import { locale } from './i18n';
+
+export const EDITOR_TYPES = ['site', 'saved', 'failed', 'updates'] as const;
+export type EditorType = (typeof EDITOR_TYPES)[number];
+
+/** The type of an app's notification, as it is kept and turned off. */
+export const appType = (app: string, type: string) => `${app}/${type}`;
+
+export type Notification = {
+  text: string;
+  type: string;
+  error?: boolean;
+  at: number;
+  link?: { text: string; href: string };
+};
+type Kept = { items: Notification[]; seen: number; told: string[] };
+/** `off`: the types turned off; `device`: "På telefonen" (not chosen yet: on when the browser allows it). */
+type Choices = { off: string[]; device?: boolean };
+
+const KEY = 'editor-notifications';
+const CHOICES = 'editor-notification-settings';
+const MAX = 50;
+const MAX_TOLD = 200;
+
+function read<T>(key: string, fallback: T, ok: (value: T) => boolean): T {
+  try {
+    const saved = JSON.parse(localStorage.getItem(key) ?? 'null') as T | null;
+    if (saved && ok(saved)) return { ...fallback, ...saved };
+  } catch {}
+  return fallback;
+}
+
+let kept = read<Kept>(KEY, { items: [], seen: 0, told: [] }, (k) => Array.isArray(k.items));
+let choices = read<Choices>(CHOICES, { off: [] }, (c) => Array.isArray(c.off));
+const listeners = new Set<() => void>();
+
+function store(key: string, value: unknown) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {}
+  listeners.forEach((l) => l());
+}
+const set = (next: Kept) => store(KEY, (kept = next));
+const choose = (next: Choices) => store(CHOICES, (choices = next));
+
+const subscribe = (changed: () => void) => {
+  listeners.add(changed);
+  return () => listeners.delete(changed);
+};
+
+/** Whether notifications of the type are on. */
+export const isOn = (type: string) => !choices.off.includes(type);
+
+/** Keeps a notification and sends it to the phone, when its type is on (not `device` when the Worker sends it). */
+export function remember(item: Omit<Notification, 'at'>, device = true) {
+  if (!isOn(item.type)) return;
+  set({ ...kept, items: [{ ...item, at: Date.now() }, ...kept.items].slice(0, MAX) });
+  if (device) notifyDevice(item.text);
+}
+
+/** Whether an app's notification (by its own id) has been told before; marks it told. */
+export function told(type: string, id: string) {
+  const key = `${type}:${id}`;
+  if (kept.told.includes(key)) return true;
+  set({ ...kept, told: [key, ...kept.told].slice(0, MAX_TOLD) });
+  return false;
+}
+
+/** Marks them all seen (the notifications are open). */
+export function markSeen() {
+  if (kept.items.some((n) => n.at > kept.seen)) set({ ...kept, seen: Date.now() });
+}
+
+export function clearNotifications() {
+  set({ ...kept, items: [], seen: Date.now() });
+}
+
+/** Turns a type on or off. */
+export function setOn(type: string, on: boolean) {
+  choose({ ...choices, off: on ? choices.off.filter((t) => t !== type) : [...choices.off, type] });
+  if (signedUp) signUp().catch(() => {});
+}
+
+const allowed = () => typeof Notification !== 'undefined' && Notification.permission === 'granted';
+const deviceOn = () => choices.device ?? allowed();
+
+/** Turns "På telefonen" on or off; on asks the browser first. False when the browser does not allow it. */
+export async function setDevice(on: boolean): Promise<boolean> {
+  if (on && typeof Notification === 'undefined') return false;
+  if (on && Notification.permission === 'default') await Notification.requestPermission().catch(() => {});
+  if (on && !allowed()) return false;
+  choose({ ...choices, device: on });
+  await (on ? signUp() : signOff()).catch(() => {});
+  return true;
+}
+
+// The Worker's notifications (packages/editor/worker/push.js), with the GitHub sign-in (the Worker's cookie, sent with the request): only
+// someone who can save the site may.
+const PUSH = '/api/push';
+// The endpoint this browser is signed up with at the Worker, while it is.
+let signedUp: string | null = null;
+
+function api(path: string, method: string, body?: unknown) {
+  return fetch(path, {
+    method,
+    cache: 'no-store',
+    headers: { 'content-type': 'application/json' },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+}
+
+// The service worker (registered when the editor opens, deploy.ts registerWorker), once it is running; none when the
+// browser has no push (an iPhone outside the home screen).
+const pushWorker = async (ready = true) =>
+  typeof PushManager === 'undefined' || !navigator.serviceWorker
+    ? undefined
+    : ready
+      ? await navigator.serviceWorker.ready
+      : await navigator.serviceWorker.getRegistration('/editor/');
+
+const b64url = (key: ArrayBuffer | null | undefined) =>
+  key
+    ? btoa(String.fromCharCode(...new Uint8Array(key)))
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_')
+        .replace(/=+$/, '')
+    : '';
+
+/** Signs this browser up at the Worker, or tells it the choices again: with the browser's push subscription to the
+ * Worker's key (a new one when the key is another), the types turned off and the editor's language. Nothing when the
+ * browser cannot (an iPhone outside the home screen) or the site keeps none (a preview of a branch). */
+async function signUp() {
+  const worker = await pushWorker();
+  if (!worker) return;
+  const res = await api(PUSH, 'GET');
+  if (!res.ok) return;
+  const { key } = (await res.json()) as { key: string };
+  let subscription = await worker.pushManager.getSubscription();
+  if (subscription && b64url(subscription.options.applicationServerKey) !== key) {
+    await subscription.unsubscribe();
+    subscription = null;
+  }
+  subscription ??= await worker.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: key });
+  const signed = await api(PUSH, 'PUT', { subscription: subscription.toJSON(), off: choices.off, locale });
+  signedUp = signed.ok ? subscription.endpoint : null;
+}
+
+/** Signs this browser off at the Worker ("På telefonen" off, "Log ud": before the sign-in goes), and from the push
+ * service. */
+export async function signOff() {
+  signedUp = null;
+  const subscription = await (await pushWorker(false))?.pushManager.getSubscription();
+  if (!subscription) return;
+  await api(PUSH, 'DELETE', { endpoint: subscription.endpoint }).catch(() => {});
+  await subscription.unsubscribe().catch(() => {});
+}
+
+/** When the editor opens: signs up again while "På telefonen" is on (the Worker may have a new key, or have forgotten
+ * a browser not seen for half a year), else signs off. */
+export function syncDevice() {
+  (deviceOn() && allowed() ? signUp() : signOff()).catch(() => {});
+}
+
+/** After a save: asks the Worker to say on the phone when the site has been built with `commit` (`text`), or that it
+ * was not after ten minutes (`failText`). True when it will (this browser is signed up, with the type on). */
+export async function waitOnServer(commit: string, text: string, failText: string): Promise<boolean> {
+  if (!signedUp || !isOn('site')) return false;
+  const res = await api(`${PUSH}/wait`, 'PUT', { endpoint: signedUp, commit, text, failText }).catch(() => null);
+  return !!res?.ok;
+}
+
+/** Takes the wait back: the editor said it itself. */
+export function stopServerWait() {
+  if (signedUp) api(`${PUSH}/wait`, 'DELETE', { endpoint: signedUp }).catch(() => {});
+}
+
+// Asks whether the editor may show notifications on the phone, once, while "På telefonen" is not chosen yet.
+// Browsers only ask after a tap, so this is called from "Gem".
+export function askToNotify() {
+  if (choices.device === undefined && typeof Notification !== 'undefined' && Notification.permission === 'default')
+    setDevice(true).catch(() => {});
+}
+
+// The message as a notification on the phone or computer (through the service worker, packages/editor/pages/editor/sw.js), when
+// "På telefonen" is on and the editor is not on screen.
+async function notifyDevice(text: string) {
+  if (document.visibilityState === 'visible' || !deviceOn() || !allowed()) return;
+  const options = { body: text, icon: '/editor/icon-192.png', tag: 'site' };
+  try {
+    const worker = await navigator.serviceWorker?.getRegistration('/editor/');
+    if (worker) await worker.showNotification(siteName, options);
+    else new Notification(siteName, options);
+  } catch {}
+}
+
+export const useNotifications = () => useSyncExternalStore(subscribe, () => kept);
+
+/** The choices: the types turned off and whether "På telefonen" is on. */
+export const useNotificationChoices = () => {
+  const now = useSyncExternalStore(subscribe, () => choices);
+  return { off: now.off, device: now.device ?? allowed() };
+};
+
+/** How many are not seen yet. */
+export const unseen = ({ items, seen }: Kept) => items.filter((n) => n.at > seen).length;

package/src/pagePreview.tsx

@@ -0,0 +1,204 @@
+// "Forhåndsvis" (FormFrame.tsx): a page or a blog post as it looks on the site with what is in its form
+// now, at once and without saving, in a sheet, as wide as a phone or a computer.
+//
+// The page as it is on the site gives everything around what the form changes: the header, the footer,
+// the layout and the site's CSS. The site's layouts mark what the form changes (data-editor): the
+// heading, the picture at the top (a blog post's), the text, and the place at the end of the page where the layout
+// puts a block that ends the text (data-editor="end", with its type in data-editor-block). Only what
+// was changed is put in, so the rest is exactly as on the site. The text is the site's Markdown
+// (Astro's pipeline, with the HTML written in it), and its blocks are drawn as in the editor
+// (registry.tsx preview), with the site's classes.
+//
+// The page is shown in a frame without scripts (sandbox), so nothing of the site runs on the editor's
+// address, where its login is kept, and its links lead nowhere. A new page or post is shown in the
+// page of another one. As on the site but for this: a changed text has the pictures themselves (not
+// the sizes the build makes), its words are not yet links to other pages (packages/editor/site/autolinks.mjs), and
+// a video written in it as HTML is the video.
+import { useRef, useState, type ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { DeviceMobile, Desktop } from '@phosphor-icons/react';
+import { parseBlock, splitBlocks } from '../lib/blocks.mjs';
+import { processor } from '../lib/markdown';
+import { splitPicture } from '../lib/crop.mjs';
+import { preview as drawBlock, siteBlocks } from './registry';
+import { shownAt } from './images';
+import { pageH1 } from './sections.mjs';
+import type { BlockData } from './blocks';
+import { PageFrame, BottomSheet, SegmentedButton, SheetTitle } from './ui';
+import { t } from './i18n';
+
+/** What a form puts in the page: undefined leaves it as it is on the site. */
+export type PageDraft = {
+  /** The page on the site to show it in (its address); for a new one, others like it, the first
+   * that can be. */
+  shell: string | string[];
+  heading?: string;
+  /** The heading as HTML with its colours, when a word in it has one (pageH1 in sections.mjs). */
+  headingHtml?: string;
+  /** The picture at the top (a blog post's); null: none. */
+  image?: { src: string; alt: string } | null;
+  /** The text, in Markdown with its blocks. */
+  body?: string;
+  /** What the blocks are drawn with. */
+  data: BlockData;
+};
+
+// The text as the site makes it (Astro's Markdown, ../lib/markdown.ts), with the site's plugins (packages/editor/astro.mjs)
+// but those that read the site's files.
+const markdownHtml = async (markdown: string) => String(await processor.process(markdown));
+
+// A block drawn as in the editor, as HTML.
+function blockHtml(type: string, props: Record<string, unknown>, data: BlockData) {
+  const drawn: ReactNode = drawBlock(type, props, data);
+  if (!drawn) return '';
+  const box = document.createElement('div');
+  const root = createRoot(box);
+  flushSync(() => root.render(drawn));
+  const html = box.innerHTML;
+  root.unmount();
+  return html;
+}
+
+// A picture made ready in this visit, which the site does not have yet (images.ts shownAt), in the
+// page itself.
+async function inline(src: string) {
+  const here = shownAt(src);
+  if (here === src) return src;
+  const blob = await (await fetch(here)).blob();
+  return new Promise<string>((done) => {
+    const reader = new FileReader();
+    reader.onload = () => done(String(reader.result));
+    reader.readAsDataURL(blob);
+  });
+}
+
+// The page on the site, as a document. From the editor's own address too (EDITOR_HOST), which serves
+// it with this header (packages/editor/worker/editor-host.js).
+async function sitePage(address: string) {
+  const res = await fetch(address, { headers: { 'x-editor-preview': '1' } });
+  if (!res.ok) throw new Error(t.preview.pageNotLoaded(res.status));
+  return new DOMParser().parseFromString(await res.text(), 'text/html');
+}
+
+/** The page with the draft in it, as HTML for a frame (PageFrame). */
+export async function pageDocument(draft: PageDraft): Promise<string> {
+  let doc: Document | null = null;
+  let shell = '';
+  for (const address of [draft.shell].flat()) {
+    const page = await sitePage(address);
+    if (page.querySelector('[data-editor="text"]')) {
+      doc = page;
+      shell = address;
+      break;
+    }
+  }
+  if (!doc) throw new Error(t.preview.notHere);
+  doc.querySelectorAll('script').forEach((s) => s.remove());
+  // Its own addresses as on the site; a link opens nothing (target, and no popups in the frame).
+  const base = doc.createElement('base');
+  base.href = new URL(shell, location.href).href;
+  base.target = '_blank';
+  doc.head.prepend(base);
+
+  const heading = doc.querySelector('[data-editor="heading"]');
+  if (heading && draft.headingHtml) heading.innerHTML = draft.headingHtml;
+  else if (heading && draft.heading !== undefined) heading.textContent = draft.heading;
+
+  const top = doc.querySelector('[data-editor="image"]');
+  if (top && draft.image !== undefined) {
+    const { src } = splitPicture(draft.image?.src ?? '');
+    // The layout leaves out a picture that is also in the text (heroImage in packages/editor/site/images.mjs).
+    if (!src || (draft.body ?? '').includes(src)) top.remove();
+    else {
+      top.querySelectorAll('source').forEach((s) => s.remove());
+      const img = top.querySelector('img');
+      if (img) {
+        for (const a of ['srcset', 'sizes', 'width', 'height']) img.removeAttribute(a);
+        img.src = src;
+        img.alt = draft.image!.alt;
+      }
+    }
+  }
+
+  if (draft.body !== undefined) {
+    // A page's H1 at the top of its text is drawn in its own place above (draft.heading), as on the site.
+    let html = await markdownHtml(pageH1(draft.body).rest);
+    // A block that ends the text, where the layout puts it.
+    const end = doc.querySelector('[data-editor="end"]');
+    const type = end?.getAttribute('data-editor-block');
+    const last = type ? html.match(new RegExp(`<div data-block="${type}"(?: data-props="[^"]*")?\\s*></div>\\s*$`)) : null;
+    const block = last && parseBlock(last[0]);
+    if (end && block && !block.props.hidden) {
+      html = html.slice(0, last!.index);
+      end.innerHTML = blockHtml(block.type, block.props, draft.data);
+    } else end?.remove();
+    const text = doc.querySelector('[data-editor="text"]')!;
+    text.innerHTML = splitBlocks(
+      html,
+      siteBlocks.map((b) => b.type),
+    )
+      .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))
+      .join('');
+  }
+
+  await Promise.all(
+    [...doc.querySelectorAll('img')].map(async (img) => img.setAttribute('src', await inline(img.getAttribute('src') ?? ''))),
+  );
+  return `<!doctype html>\n${doc.documentElement.outerHTML}`;
+}
+
+type Device = 'phone' | 'computer';
+const WIDTH: Record<Device, number> = { phone: 390, computer: 1280 };
+
+/** The sheet with the preview, and how to open it with a draft (made when it opens). */
+export function usePagePreview(): [(draft: () => PageDraft | null) => void, ReactNode] {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [html, setHtml] = useState<string | null>(null);
+  const [problem, setProblem] = useState('');
+  const [device, setDevice] = useState<Device>(() => (matchMedia('(min-width: 48rem)').matches ? 'computer' : 'phone'));
+  const run = useRef(0);
+
+  function open(make: () => PageDraft | null) {
+    const draft = make();
+    if (!draft) return;
+    const n = ++run.current;
+    setHtml(null);
+    setProblem('');
+    dialog.current?.showModal();
+    pageDocument(draft).then(
+      (page) => n === run.current && setHtml(page),
+      (e) => n === run.current && setProblem(t.preview.failed((e as Error).message)),
+    );
+  }
+
+  const close = () => dialog.current?.close();
+  const sheet = (
+    <BottomSheet
+      full
+      ref={dialog}
+      aria-label={t.preview.title}
+      onClick={(e) => e.target === dialog.current && close()}
+      onClose={() => run.current++}
+    >
+      <SheetTitle title={t.preview.title} onClose={close} />
+      <div className="px-5 pb-3">
+        <SegmentedButton
+          label={t.preview.device}
+          value={device}
+          options={[
+            { value: 'phone', label: t.preview.phone, icon: DeviceMobile },
+            { value: 'computer', label: t.preview.computer, icon: Desktop },
+          ]}
+          onChange={setDevice}
+        />
+      </div>
+      {html ? (
+        <PageFrame html={html} width={WIDTH[device]} title={t.preview.title} />
+      ) : (
+        <p className="px-5 text-muted">{problem || t.preview.making}</p>
+      )}
+    </BottomSheet>
+  );
+  return [open, sheet];
+}

package/src/r2Caching.ts

@@ -0,0 +1,55 @@
+// R2 caching: the Worker's copy of the site's files in R2 (packages/editor/worker/files.js), turned on and off under "Indstillinger" ›
+// "Avanceret" (Advanced.tsx). It is the line of its bucket (`"r2_buckets": …`, the binding FILES) in the Worker's settings
+// (config.wrangler): there when it is on, there as a comment ("// …") when it is off, so a deploy never asks for a bucket
+// Cloudflare does not have. Changed as text, so the file's comments stay. It can only be turned on when the Worker says
+// Cloudflare has the bucket (/api/r2, packages/editor/worker/r2-status.js). Where the bucket is kept ("Placering"): placed by Cloudflare,
+// or within a jurisdiction (`"jurisdiction": "eu"` in the line), where it is asked for: Cloudflare has no bucket of that
+// name outside it. It can only be changed while R2 caching is off, since it names another bucket.
+
+const LINE = /^([ \t]*)(\/\/[ \t]*)?("r2_buckets"[ \t]*:.*)$/m;
+
+/** Whether R2 caching is on in the Worker's settings; null when they have no line for it. */
+export function r2CachingOn(text: string): boolean | null {
+  const line = LINE.exec(text);
+  return line ? !line[2] : null;
+}
+
+/** The Worker's settings with R2 caching on or off. */
+export const withR2Caching = (text: string, on: boolean): string =>
+  text.replace(LINE, (_, indent: string, _comment: string | undefined, line: string) => `${indent}${on ? '' : '// '}${line}`);
+
+/** The name of the bucket in the line, or null. */
+export const bucketOf = (text: string): string | null => /"bucket_name"\s*:\s*"([^"]+)"/.exec(LINE.exec(text)?.[3] ?? '')?.[1] ?? null;
+
+/** The jurisdiction the bucket is kept within (`eu`, `fedramp`), or null when the line names none. */
+export const jurisdictionOf = (text: string): string | null =>
+  /"jurisdiction"\s*:\s*"([^"]+)"/.exec(LINE.exec(text)?.[3] ?? '')?.[1] ?? null;
+
+/** The jurisdictions the bucket can be kept within, in the editor (Cloudflare also has `fedramp`, for the US government). */
+export const JURISDICTIONS = ['eu'] as const;
+
+/** The Worker's settings with the bucket kept within `jurisdiction`, or placed by Cloudflare (null). */
+export const withJurisdiction = (text: string, jurisdiction: string | null): string =>
+  text.replace(LINE, (_, indent: string, comment: string | undefined, line: string) => {
+    const without = line.replace(/,\s*"jurisdiction"\s*:\s*"[^"]*"/, '');
+    const changed = jurisdiction ? without.replace(/("bucket_name"\s*:\s*"[^"]+")/, `$1, "jurisdiction": "${jurisdiction}"`) : without;
+    return `${indent}${comment ?? ''}${changed}`;
+  });
+
+/** A jurisdiction's name, as Cloudflare writes it. */
+export const jurisdictionName = (jurisdiction: string): string => ({ eu: 'EU', fedramp: 'FedRAMP' })[jurisdiction] ?? jurisdiction;
+
+/** The bucket at Cloudflare, as the Worker says (packages/editor/worker/r2-status.js). */
+export type BucketState = 'ready' | 'no-bucket' | 'no-r2' | 'no-key' | 'refused' | 'failed';
+
+/** Whether the Worker has the bucket now (the site is built with R2 caching on), and the bucket at Cloudflare. */
+export async function r2Status(bucket: string, jurisdiction: string | null): Promise<{ bound: boolean; bucket: BucketState }> {
+  const query = new URLSearchParams({ bucket, ...(jurisdiction ? { jurisdiction } : {}) });
+  try {
+    const res = await fetch(`/api/r2?${query}`, { cache: 'no-store' });
+    if (!res.ok || !res.headers.get('content-type')?.includes('application/json')) return { bound: false, bucket: 'failed' };
+    return await res.json();
+  } catch {
+    return { bound: false, bucket: 'failed' };
+  }
+}

package/src/redirects.ts

@@ -0,0 +1,149 @@
+// All the site's redirects as one: the editor's own (src/data/redirects.json, written when a page
+// moves, addresses.ts), the rules (public/_redirects, "<from> <to> 301", one to a line) and the
+// Worker's map ({ paths, ids }, written with one space of indentation, e.g. by a migration);
+// their files are in config.ts. The Worker sends on by the editor's own first, then by its map, and
+// then the rules are read (packages/editor/worker/index.js); so does lookup here. "Videresendelser" under
+// Indstillinger (Redirects.tsx) shows and changes them, and a page that takes the address of one
+// removes it (EntryForm.tsx). Every change ends with flatten: each redirect sends straight to where
+// it ends, never on through another (no chain, one redirect for the visitor and for Google).
+import { escape, readRedirects, REDIRECTS, writeRedirects, type Redirects } from './addresses';
+import type { Change, RepoFile } from './github';
+import { config } from '@site/config';
+import { locale, t } from './i18n';
+
+export const RULES = config.siteRedirects.rules;
+export const MAP = config.siteRedirects.map;
+/** The files of the redirects, loaded when they are needed (Env.load): they change rarely. */
+export const REDIRECT_FILES = [REDIRECTS, RULES, MAP];
+
+type WorkerMap = { paths: Redirects; ids: Redirects };
+/** The redirects of the three files; rules: the lines of the rules' file, as they are. */
+export type AllRedirects = { own: Redirects; rules: string[]; map: WorkerMap };
+
+// A line of the rules as its addresses; null for a comment or an empty line.
+function ruleOf(line: string): { from: string; to: string } | null {
+  const [from, to] = line.trim().split(/\s+/);
+  return !from || from.startsWith('#') || !to ? null : { from, to };
+}
+// The line with another target.
+const withTarget = (line: string, to: string, next: string) => line.replace(new RegExp(`(\\s)${escape(to)}(?=\\s|$)`), `$1${next}`);
+
+export function readAll(files: RepoFile[]): AllRedirects {
+  const text = (path: string) => files.find((f) => f.path === path)?.text;
+  const map = text(MAP);
+  return {
+    own: readRedirects(text(REDIRECTS)),
+    rules: (text(RULES) ?? '').split('\n'),
+    map: map ? (JSON.parse(map) as WorkerMap) : { paths: {}, ids: {} },
+  };
+}
+
+/** The files that changed, as they are written, to save. */
+export function changesOf(all: AllRedirects, files: RepoFile[]): Change[] {
+  const written: [string, string][] = [
+    [REDIRECTS, writeRedirects(all.own)],
+    [RULES, all.rules.join('\n')],
+    [MAP, `${JSON.stringify(all.map, null, 1)}\n`],
+  ];
+  return written.flatMap(([path, content]) => {
+    const file = files.find((f) => f.path === path);
+    // A file that is not there is written only for the editor's own (a new site has none of the others).
+    if (!file && path !== REDIRECTS) return [];
+    const was = file?.text ?? writeRedirects({});
+    return content === was ? [] : [{ path, content, oid: file?.oid ?? null }];
+  });
+}
+
+/** Where an address is sent on to first, as the Worker does it, or undefined. */
+export function lookup(all: AllRedirects): (address: string) => string | undefined {
+  const rules = new Map<string, string>();
+  for (const line of all.rules) {
+    const r = ruleOf(line);
+    if (r && !r.from.includes('*') && !rules.has(r.from)) rules.set(r.from, r.to);
+  }
+  return (address) => all.own[address] ?? all.map.paths[address] ?? rules.get(address);
+}
+
+/** Where a target ends after every redirect (keeping its #part when the last has none), and the
+ * addresses when they come back to one (a loop). */
+export function endOf(target: string, look: (address: string) => string | undefined): { end: string; loop: string[] | null } {
+  const seen: string[] = [];
+  let at = target;
+  for (;;) {
+    const [base, part] = at.split('#');
+    const next = look(base);
+    if (next === undefined) return { end: at, loop: null };
+    if (seen.includes(base)) return { end: at, loop: [...seen, base] };
+    seen.push(base);
+    at = part !== undefined && !next.includes('#') ? `${next}#${part}` : next;
+  }
+}
+
+/** Every redirect straight to where it ends; a message when they would send in a loop. */
+export function flatten(all: AllRedirects): AllRedirects | string {
+  const look = lookup(all);
+  let loop: string[] | null = null;
+  const end = (target: string) => {
+    if (!target.startsWith('/') || loop) return target;
+    const r = endOf(target, look);
+    loop = r.loop;
+    return r.end;
+  };
+  const each = (redirects: Redirects) => Object.fromEntries(Object.entries(redirects).map(([from, to]) => [from, end(to)]));
+  const next: AllRedirects = {
+    own: each(all.own),
+    map: { ...all.map, paths: each(all.map.paths), ids: each(all.map.ids) },
+    rules: all.rules.map((line) => {
+      const r = ruleOf(line);
+      const to = r && end(r.to);
+      return r && to !== r.to ? withTarget(line, r.to, to!) : line;
+    }),
+  };
+  return loop ? t.redirects.loop((loop as string[]).join(' → ')) : next;
+}
+
+/** The redirects with the one from an address sending to `to` instead, or removed (null), in every
+ * file it is in; a new one goes in the editor's own. */
+export function setRedirect(all: AllRedirects, from: string, to: string | null): AllRedirects {
+  const own = { ...all.own };
+  const paths = { ...all.map.paths };
+  let found = false;
+  for (const redirects of [own, paths])
+    if (from in redirects) {
+      found = true;
+      if (to === null) delete redirects[from];
+      else redirects[from] = to;
+    }
+  const rules = all.rules.flatMap((line) => {
+    const r = ruleOf(line);
+    if (r?.from !== from) return [line];
+    found = true;
+    return to === null ? [] : [withTarget(line, r.to, to)];
+  });
+  if (!found && to !== null) own[from] = to;
+  return { own, rules, map: { ...all.map, paths } };
+}
+
+/** A redirect from the address of a page (not a picture or another file, not a rule with a *),
+ * where to, and the files it is in. */
+export type Entry = { from: string; to: string; files: string[] };
+
+const isPage = (address: string) => /^\/([^/.*]+\/)*$/.test(address);
+
+/** The redirects from addresses of pages, by address; `to` as the Worker sends on (the first file). */
+export function entriesOf(all: AllRedirects): Entry[] {
+  const entries = new Map<string, Entry>();
+  const add = (from: string, to: string, file: string) => {
+    if (!isPage(from)) return;
+    const entry = entries.get(from);
+    if (entry) entry.files.push(file);
+    else entries.set(from, { from, to, files: [file] });
+  };
+  for (const [from, to] of Object.entries(all.own)) add(from, to, REDIRECTS);
+  for (const [from, to] of Object.entries(all.map.paths)) add(from, to, MAP);
+  for (const line of all.rules) {
+    const r = ruleOf(line);
+    if (r) add(r.from, r.to, RULES);
+  }
+  return [...entries.values()].sort((a, b) => a.from.localeCompare(b.from, locale));
+}