react-cheminfo 0.4.0 → 0.6.0

package/src/seo/core/pageMeta.ts

@@ -0,0 +1,128 @@
+/**
+ * The head of the page a crawler is handed.
+ *
+ * Googlebot renders JavaScript, but Bing, a Slack unfurl, an LMS preview and
+ * every academic indexer read the HTML that came off the wire — so the title,
+ * the description and the canonical of a page must already be in it. A site
+ * with a server writes them per request; a static one writes one file per
+ * address at build time. Both call this, which is pure string work: no
+ * `window`, no `node:fs`.
+ *
+ * The page it is given is the template, which declares where its head goes and
+ * carries none of its own, so this only ever writes — see `./template.ts`.
+ */
+
+import { siteDisplayName } from '../../ecosystem/core/lookup.ts';
+import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+import { escapeAttribute, escapeText } from '../../share/core/escape.ts';
+
+import type { DocumentMeta } from './documentMeta.ts';
+import type { RouteMeta } from './routes.ts';
+import { pageMetaFor } from './routes.ts';
+import { mountPathOf, originOf, resolveSite } from './siteFiles.ts';
+import { PAGE_HEAD_MARKER, fill } from './template.ts';
+
+/** Which site is being served, and what it answers. */
+export interface PageMetaOptions {
+  /** The site, named or passed. */
+  site: EcosystemSite | SiteId;
+  /** Every address it answers, each with its title and description. */
+  routes: readonly RouteMeta[];
+  /**
+   * The address being written, query string included: a path, or the absolute
+   * address an app reads off the page it is on.
+   */
+  url: string;
+  /**
+   * Where the site is served, mount path included, e.g.
+   * `https://learn.cheminfo.org/surge`. A server passes the one the request
+   * arrived on; a build leaves it out and the site's own host is used. Every
+   * address written here is composed on it, so the mount is carried by the
+   * origin rather than applied a second time. It is an absolute address, or it
+   * is refused.
+   * @default `https://<the site's host>`
+   */
+  origin?: string;
+  /**
+   * The card a link to the page unfurls into, as an absolute address or a path.
+   * @default '/og.png'
+   */
+  image?: string;
+}
+
+/**
+ * Give a page the title, the description and the canonical address of the route
+ * it answers, plus the card a link to it unfurls into.
+ * @param html - The built template.
+ * @param options - Which site, which address, and where it is served from.
+ * @returns The page, with its head written for that route.
+ * @throws {Error} When the page carries no `<!--cheminfo:head-->`, when the
+ * site answers no route, or when it names an origin that is not an absolute
+ * address.
+ */
+export function injectPageMeta(html: string, options: PageMetaOptions): string {
+  return fill(html, PAGE_HEAD_MARKER, pageHeadTags(options));
+}
+
+/**
+ * The head a route is indexed and shared under, for a caller writing more into
+ * the same place — a structured-data block, a tracking snippet.
+ * @param options - Which site, which address, and where it is served from.
+ * @returns The tags, one per line.
+ * @throws {Error} When the site answers no route, or names an origin that is
+ * not an absolute address.
+ */
+export function pageHeadTags(options: PageMetaOptions): string {
+  const name = siteDisplayName(resolveSite(options.site));
+  const description = routeMetaOf(options).description;
+  const origin = originOf(options);
+  const { title, canonical } = pageDocumentMeta(options);
+  const image = absolute(options.image ?? '/og.png', origin);
+
+  return [
+    `<title>${escapeText(title)}</title>`,
+    `<meta name="description" content="${escapeAttribute(description)}" />`,
+    `<link rel="canonical" href="${escapeAttribute(canonical)}" />`,
+    '<meta property="og:type" content="website" />',
+    `<meta property="og:site_name" content="${escapeAttribute(name)}" />`,
+    `<meta property="og:title" content="${escapeAttribute(title)}" />`,
+    `<meta property="og:description" content="${escapeAttribute(description)}" />`,
+    `<meta property="og:url" content="${escapeAttribute(canonical)}" />`,
+    `<meta property="og:image" content="${escapeAttribute(image)}" />`,
+    '<meta name="twitter:card" content="summary_large_image" />',
+  ].join('\n');
+}
+
+/**
+ * What the page on screen is called and where it is indexed, for the app to
+ * write after an in-app move.
+ *
+ * The same title and canonical the build wrote into the file it served, so a
+ * click that changes the page cannot disagree with the page a crawler fetched.
+ * @param options - Which site, which address, and where it is served from.
+ * @returns The title, the description and the canonical of that address.
+ * @throws {Error} When the site answers no route, or names an origin that is
+ * not an absolute address.
+ */
+export function pageDocumentMeta(
+  options: PageMetaOptions,
+): Required<DocumentMeta> {
+  const site = resolveSite(options.site);
+  const meta = routeMetaOf(options);
+  return {
+    title: `${meta.title} — ${siteDisplayName(site)}`,
+    description: meta.description,
+    canonical: `${originOf(options)}${meta.path}`,
+  };
+}
+
+// A server behind a mount is handed the address the browser asked for, and the
+// route table is written from the site's own root, so the mount the origin
+// carries is taken off it before the table is read.
+function routeMetaOf(options: PageMetaOptions): RouteMeta {
+  return pageMetaFor(options.routes, options.url, mountPathOf(options));
+}
+
+function absolute(target: string, origin: string): string {
+  return target.startsWith('/') ? `${origin}${target}` : target;
+}

package/src/seo/core/robots.ts

@@ -0,0 +1,114 @@
+/**
+ * The crawl policy.
+ *
+ * Our tools are meant to be found, so only the endpoints are kept out of the
+ * index — an API prefix and its documentation are not pages — and each one may
+ * say in a comment why, because a policy nobody can read is a policy nobody
+ * maintains.
+ *
+ * Every line of this file is a directive, so nothing an author writes may
+ * become one they did not: a path is a single line that says something, and
+ * carries no fragment, or it is refused; and a comment is folded onto the one
+ * line it is written as.
+ */
+
+import { joinBasePath } from '../../router/core/basePath.ts';
+
+import type { SiteFilesOptions } from './siteFiles.ts';
+import { mountPathOf, originOf } from './siteFiles.ts';
+
+/** One address kept out of the index, and why. */
+export interface RobotsDisallow {
+  /**
+   * The address prefix, from the site's own root, e.g. `/v1/`. It is a path,
+   * on one line, saying something, carrying no `#`, and padded by nothing: a
+   * blank one would read as `Disallow: /` and keep the whole site out of the
+   * index — RFC 9309 eats the trailing whitespace of a line, so `"   "` is read
+   * as nothing at all — one carrying a line break would write whatever follows
+   * it as a directive of its own, everything from a `#` onwards is read as a
+   * comment, which truncates the path silently, and a padded one is not the
+   * address it looks like: `" /v1/"` does not start at the site root, so it is
+   * written `Disallow: / /v1/` and matches no address at all, leaving the
+   * endpoint crawled by the very line meant to keep it out.
+   */
+  path: string;
+  /**
+   * One sentence written as a `#` line above the directive. The `#` is added
+   * when it is not already there, every run of whitespace is folded to a single
+   * space so the sentence stays on its own line, and a blank one is written as
+   * no line at all.
+   * @default undefined — the directive is written on its own
+   */
+  comment?: string;
+}
+
+const NEWLINE = /[\n\r]/;
+
+const WHITESPACE = /\s+/g;
+
+/**
+ * The crawl policy of the address the site is served at.
+ *
+ * Every path is written under the mount, so a build published as one tool among
+ * several on a shared host allows what it actually answers rather than claiming
+ * the whole host. The sitemap is named only because this module also writes it:
+ * a `Sitemap:` line pointing at a 404 is reported as an error on every fetch.
+ * @param options - The site, its routes, and where it is served.
+ * @param disallow - Addresses to keep out of the index, each optionally with
+ * the sentence saying why.
+ * @returns The `robots.txt` document.
+ * @throws {Error} When a disallowed address is blank, spans more than one line,
+ * carries a `#` or is padded with whitespace, or when the deployment named an
+ * origin that is not an absolute address.
+ */
+export function robotsTxt(
+  options: SiteFilesOptions,
+  disallow: ReadonlyArray<string | RobotsDisallow> = [],
+): string {
+  const mount = mountPathOf(options);
+  const lines = ['User-agent: *', `Allow: ${joinBasePath(mount, '/')}`];
+
+  for (const entry of disallow) {
+    const rule = typeof entry === 'string' ? { path: entry } : entry;
+    const comment =
+      rule.comment === undefined ? undefined : commentLine(rule.comment);
+    if (comment !== undefined) lines.push(comment);
+    lines.push(`Disallow: ${joinBasePath(mount, disallowPath(rule.path))}`);
+  }
+
+  lines.push('', `Sitemap: ${originOf(options)}/sitemap.xml`, '');
+  return lines.join('\n');
+}
+
+function disallowPath(path: string): string {
+  if (path === '') {
+    throw new Error('a disallowed address is a path, never the empty string');
+  }
+  if (path.trim() === '') {
+    throw new Error(
+      `a disallowed address is a path, never blank: ${JSON.stringify(path)}`,
+    );
+  }
+  if (NEWLINE.test(path)) {
+    throw new Error(
+      `a disallowed address is written on one line: ${JSON.stringify(path)}`,
+    );
+  }
+  if (path.includes('#')) {
+    throw new Error(
+      `a disallowed address carries no fragment: ${JSON.stringify(path)}`,
+    );
+  }
+  if (path !== path.trim()) {
+    throw new Error(
+      `a disallowed address is written without padding: ${JSON.stringify(path)}`,
+    );
+  }
+  return path;
+}
+
+function commentLine(comment: string): string | undefined {
+  const text = comment.replaceAll(WHITESPACE, ' ').trim();
+  if (text === '') return undefined;
+  return text.startsWith('#') ? text : `# ${text}`;
+}

package/src/seo/core/routes.ts

@@ -0,0 +1,246 @@
+/**
+ * The addresses a site answers, each with the name and the sentence it is
+ * indexed under.
+ *
+ * One table per site, read by three things: the build, which writes an HTML
+ * file per entry and the sitemap listing them; the head injector; and the
+ * running app, which retitles the tab after an in-app move. A page missing from
+ * the table is a page a search engine only ever sees as the home page.
+ */
+
+import { stripBasePath } from '../../router/core/basePath.ts';
+
+const QUERY_OR_FRAGMENT = /[?#]/;
+
+const TRAILING_SLASHES = /\/+$/;
+
+// A scheme and an authority: what `location.href` hands out, and the one shape
+// that cannot be confused with a path. `//host/path` is left as a path, because
+// a route table is free to name one.
+const ABSOLUTE_URL = /^[a-z][\d+.a-z-]*:\/\//i;
+
+/** A page, as a crawler and a shared card see it. */
+export interface RouteMeta {
+  /** Absolute path, without a trailing slash and without a query string. */
+  path: string;
+  /** Under ~60 characters: the site name is appended to it. */
+  title: string;
+  /** One sentence, in the words someone would search for. */
+  description: string;
+  /**
+   * The label the page is linked under where a title written for a search
+   * result is too long to read as a menu entry — the `noscript` index.
+   * @default the route's own title
+   */
+  short?: string;
+  /**
+   * What the page is for, written after an em dash next to its link in the
+   * `noscript` index.
+   * @default undefined — the link stands on its own
+   */
+  note?: string;
+  /**
+   * Whether the route also answers every address beneath it, so a section
+   * carrying more pages than a table can hold — an entry per structure, per
+   * ligand, per identifier — is indexed under the section rather than under the
+   * home page. Those addresses are canonical to the section itself.
+   * @default false
+   */
+  prefix?: boolean;
+}
+
+/**
+ * The route an address names.
+ *
+ * An address a route claims exactly always wins over one that claims it as a
+ * subtree, and between two subtrees the longer claim wins, so `/molecules/HEM`
+ * is a molecule rather than whatever `/` answers.
+ * @param routes - Every address the site answers.
+ * @param path - Absolute path, without a query string.
+ * @returns Its entry, or `undefined` when the site does not know the address.
+ */
+export function routeFor(
+  routes: readonly RouteMeta[],
+  path: string,
+): RouteMeta | undefined {
+  return exactRoute(routes, path) ?? prefixRoute(routes, path);
+}
+
+/**
+ * The page an address opens.
+ *
+ * An address the site does not know is described as the home page rather than
+ * invented on the fly, which is what the router does with it too. The query
+ * string never reaches the answer: the structure being drawn and the
+ * configuration a shared link carries are not pages of their own. An absolute
+ * address is read for its path, so an app handing over `location.href` after an
+ * in-app move is answered rather than silently described as the home page.
+ *
+ * The route table is written from the site's own root, and a server behind a
+ * mount is handed the address the browser asked for — `/surge/exercises` for a
+ * table that names `/exercises`. So the address is read at the site's own root
+ * first, and the four lookups run in this order:
+ *
+ * 1. the mount taken off, claimed exactly;
+ * 2. the address as written, claimed exactly;
+ * 3. the mount taken off, claimed as a subtree;
+ * 4. the address as written, claimed as a subtree.
+ *
+ * Exact before subtree, or a `prefix` route — a home page answering everything
+ * beneath it above all — would claim every mounted address and the mount would
+ * never come off. Stripped before as-written, or the mount itself would open
+ * whichever page happens to carry the mount's own name rather than the site's
+ * front page. Taking the address as written second is what leaves an unmounted
+ * caller answering exactly as before, and lets a table whose own paths start
+ * with the mount's name still be read.
+ * @param routes - Every address the site answers.
+ * @param url - The address, query string and fragment included, either as a
+ * path or as an absolute `scheme://host/path` address.
+ * @param basePath - The path the site is mounted at, when the address carries
+ * it, written `surge`, `/surge` or `/surge/`.
+ * @default '' — the address is already written from the site's own root
+ * @returns The route it is indexed as.
+ * @throws {Error} When the table is empty, so there is no page to fall back to.
+ */
+export function pageMetaFor(
+  routes: readonly RouteMeta[],
+  url: string,
+  basePath = '',
+): RouteMeta {
+  const home = homeRoute(routes);
+  const path = pathOf(url);
+  const own = stripBasePath(basePath, path);
+  return (
+    exactRoute(routes, own) ??
+    exactRoute(routes, path) ??
+    prefixRoute(routes, own) ??
+    prefixRoute(routes, path) ??
+    home
+  );
+}
+
+/**
+ * The page an unknown address falls back to.
+ * @param routes - Every address the site answers.
+ * @returns The `/` entry, or the first one when the table names no root.
+ * @throws {Error} When the table is empty.
+ */
+export function homeRoute(routes: readonly RouteMeta[]): RouteMeta {
+  const first = routes[0];
+  if (first === undefined) throw new Error('a site answers at least one route');
+  return exactRoute(routes, '/') ?? first;
+}
+
+/**
+ * Check a route table before a build reads it as a set of file names.
+ *
+ * An address written twice ships two sitemap entries and two links to a page
+ * only the first entry describes, and one carrying a `..` segment writes its
+ * file outside the build output — a real build asked for `/../escaped` and got
+ * a sibling of `dist`. Two addresses that differ only in an empty segment or in
+ * case are the same defect wearing a disguise: `//x` and `/x` both write
+ * `dist/x/index.html`, and so do `/About` and `/about` on the case-insensitive
+ * filesystem macOS and Windows ship by default — one file, two sitemap entries,
+ * and only one of the two descriptions survives. All of it is author
+ * configuration read at build time, so it is refused where it is written rather
+ * than repaired where it lands.
+ * @param routes - Every address the site answers.
+ * @throws {Error} When the table is empty, names one address twice — under any
+ * of those spellings — or carries a path that is not one.
+ */
+export function assertRoutes(routes: readonly RouteMeta[]): void {
+  if (routes.length === 0) throw new Error('a site answers at least one route');
+
+  const claimed = new Set<string>();
+  const folded = new Map<string, string>();
+  for (const route of routes) {
+    const written = JSON.stringify(route.path);
+    assertPath(route.path, written);
+    const address = trimTrailingSlash(route.path) || '/';
+    if (address.includes('//')) {
+      throw new Error(`a route path names no empty segment: ${written}`);
+    }
+    if (claimed.has(address)) {
+      throw new Error(`a route path is written once: ${written}`);
+    }
+    const first = folded.get(address.toLowerCase());
+    if (first !== undefined) {
+      throw new Error(
+        `two route paths name one file on a case-insensitive disk: ${first} and ${written}`,
+      );
+    }
+    claimed.add(address);
+    folded.set(address.toLowerCase(), written);
+  }
+}
+
+/**
+ * Drop the trailing slashes, so `/about/` and `/about` are one page and an
+ * origin written `https://host/surge//` composes one address rather than one
+ * with an empty segment in it.
+ * @param value - A path or an origin.
+ * @returns It, without the trailing slashes `/` itself keeps.
+ */
+export function trimTrailingSlash(value: string): string {
+  const trimmed = value.replace(TRAILING_SLASHES, '');
+  return trimmed === '' && value !== '' ? '/' : trimmed;
+}
+
+function assertPath(path: string, written: string): void {
+  if (!path.startsWith('/')) {
+    throw new Error(`a route path starts at the site root: ${written}`);
+  }
+  if (QUERY_OR_FRAGMENT.test(path)) {
+    throw new Error(
+      `a route path carries no query string and no fragment: ${written}`,
+    );
+  }
+  if (path.split('/').includes('..')) {
+    throw new Error(`a route path stays inside the site: ${written}`);
+  }
+}
+
+// The path half of whatever the caller had at hand: an absolute address, or a
+// path already, with the query string and the fragment cut off either way.
+function pathOf(url: string): string {
+  if (ABSOLUTE_URL.test(url) && URL.canParse(url)) return new URL(url).pathname;
+  const cut = url.search(QUERY_OR_FRAGMENT);
+  return cut === -1 ? url : url.slice(0, cut);
+}
+
+function exactRoute(
+  routes: readonly RouteMeta[],
+  path: string,
+): RouteMeta | undefined {
+  const wanted = trimTrailingSlash(path) || '/';
+  for (const route of routes) {
+    if ((trimTrailingSlash(route.path) || '/') === wanted) return route;
+  }
+  return undefined;
+}
+
+function prefixRoute(
+  routes: readonly RouteMeta[],
+  path: string,
+): RouteMeta | undefined {
+  const wanted = trimTrailingSlash(path) || '/';
+  let claimed: RouteMeta | undefined;
+  let claimedLength = -1;
+
+  for (const route of routes) {
+    if (route.prefix !== true) continue;
+    const routePath = trimTrailingSlash(route.path) || '/';
+    if (!isUnder(routePath, wanted)) continue;
+    if (routePath.length > claimedLength) {
+      claimed = route;
+      claimedLength = routePath.length;
+    }
+  }
+  return claimed;
+}
+
+function isUnder(routePath: string, path: string): boolean {
+  // `/surgeon` is not a page of `/surge`, so a claim only holds when what
+  // follows it is a path of its own.
+  return routePath === '/' || path.startsWith(`${routePath}/`);
+}

package/src/seo/core/siteFiles.ts

@@ -0,0 +1,112 @@
+/**
+ * The sitemap, and what every other file a crawler fetches on its own is
+ * derived from: which site is being written, where it is served, and the path
+ * it is mounted at.
+ *
+ * A deployment names where it serves the site in full — origin and mount path
+ * in one value — because the origin is what a canonical link and a sitemap
+ * entry need. The mount is read back out of it here, so the addresses these
+ * files hand out start where the site actually answers.
+ */
+
+import { siteById } from '../../ecosystem/core/lookup.ts';
+import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+import { basePathOf } from '../../router/core/basePath.ts';
+import { escapeText } from '../../share/core/escape.ts';
+
+import type { RouteMeta } from './routes.ts';
+import { trimTrailingSlash } from './routes.ts';
+
+// A crawler fetches what it is given over HTTP, so an origin is written in one
+// of the two schemes it speaks. Parsing alone does not say that: `localhost:3000`
+// parses, with `localhost:` as its scheme and `3000` as its path.
+const HTTP_ORIGIN = /^https?:\/\//i;
+
+/** What a crawler is told about the site as a whole. */
+export interface SiteFilesOptions {
+  /** The site, named or passed. */
+  site: EcosystemSite | SiteId;
+  /** Every address it answers. */
+  routes: readonly RouteMeta[];
+  /**
+   * Where the site is served, mount path included, e.g.
+   * `https://learn.cheminfo.org/surge`. Every absolute address is built on it,
+   * and every path one of these files writes starts at its mount.
+   * @default `https://<the site's host>`
+   */
+  origin?: string;
+}
+
+/**
+ * Every routed address, as the sitemap lists them.
+ *
+ * A sitemap names at least one address: `<url>` is required by the sitemaps.org
+ * schema, and `robots.txt` advertises the file, so an empty one is reported as
+ * an error on every fetch rather than read as a site with nothing to index.
+ * @param options - The site and its routes.
+ * @returns The `sitemap.xml` document.
+ * @throws {Error} When the site answers no route, or names an origin that is
+ * not an absolute address.
+ */
+export function sitemapXml(options: SiteFilesOptions): string {
+  const origin = originOf(options);
+  if (options.routes.length === 0) {
+    throw new Error('a sitemap lists at least one address');
+  }
+  const entries = options.routes
+    .map(
+      (route) =>
+        `  <url><loc>${escapeText(`${origin}${route.path}`)}</loc></url>`,
+    )
+    .join('\n');
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${entries}
+</urlset>
+`;
+}
+
+/**
+ * The site these files are being written for.
+ * @param site - The site, named or passed.
+ * @returns Its record.
+ */
+export function resolveSite(site: EcosystemSite | SiteId): EcosystemSite {
+  return typeof site === 'string' ? siteById(site) : site;
+}
+
+/**
+ * Where the site is served, as an absolute address without a trailing slash.
+ *
+ * It is an absolute `http` or `https` address or it is refused: a canonical
+ * link, an `og:url` and a sitemap entry are addresses a crawler resolves on its
+ * own, and one written from an origin missing its scheme is resolved against
+ * whatever directory the page was fetched from — pointing every page of the
+ * site at a sibling of itself. A dev or staging origin written `localhost:3000`
+ * is refused for the same reason: it parses, but as a path under a `localhost:`
+ * scheme, so the mount read back off it would be `/3000`.
+ * @param options - The site and where it is served.
+ * @returns The origin, mount path included when the deployment named one.
+ * @throws {Error} When the deployment named something that is not an absolute
+ * `http` or `https` address.
+ */
+export function originOf(options: SiteFilesOptions): string {
+  const origin = options.origin ?? `https://${resolveSite(options.site).host}`;
+  if (!HTTP_ORIGIN.test(origin) || !URL.canParse(origin)) {
+    throw new Error(
+      `an origin is an absolute address, e.g. https://surge.cheminfo.org: ${JSON.stringify(origin)}`,
+    );
+  }
+  return trimTrailingSlash(origin);
+}
+
+/**
+ * The path the deployment is mounted at, read off the address it named.
+ * @param options - The site and where it is served.
+ * @returns `''` for a site owning its host, `/surge` for one mounted under it.
+ * @throws {Error} When the deployment named something that is not an absolute
+ * address, so there is no path to read off it.
+ */
+export function mountPathOf(options: SiteFilesOptions): string {
+  return basePathOf(originOf(options));
+}

package/src/seo/core/startDocumentMeta.ts

@@ -0,0 +1,77 @@
+/**
+ * Keep the tab and the canonical link in step with the page on screen.
+ *
+ * The server, or the build that wrote one file per address, already titled the
+ * page it handed out; this is what a move inside the app changes, and what a
+ * crawler that renders the page reads afterwards. Every site did the same three
+ * things around it — read the address it is on, look it up in its route table,
+ * write the head — so all three live here, and a site says only where its
+ * address is read and how a change to it is noticed.
+ */
+
+import { writeDocumentMeta } from './documentMeta.ts';
+import type { PageMetaOptions } from './pageMeta.ts';
+import { pageDocumentMeta } from './pageMeta.ts';
+
+/** Where a site's address is read, and how a change to it is noticed. */
+export interface StartDocumentMetaOptions extends Omit<
+  PageMetaOptions,
+  'url' | 'image'
+> {
+  /**
+   * The address on screen, query string included: a path, or the absolute
+   * address read off the page. It is read again on every write, so a `follow`
+   * that tracks what it reads — a signals `effect` — notices the next page.
+   */
+  url: () => string;
+  /**
+   * How a change of page is noticed: `effect` from `@preact/signals-react`
+   * follows whichever signals `url` reads and hands back the function that
+   * stops it. Left out, the head is written once, which is what a site calling
+   * this from its own `popstate` handler wants.
+   * @default undefined — the head is written once
+   */
+  follow?: (write: () => void) => () => void;
+}
+
+/**
+ * Write the head of the page on screen, and keep it in step as the page
+ * changes.
+ *
+ * Nothing happens where there is no document — a prerender script, a unit test
+ * of the route table — so this is safe to call from a module either of them
+ * imports.
+ * @param options - The site, its routes, where its address is read and how a
+ * change to it is noticed.
+ * @returns The function that stops following, which does nothing when nothing
+ * was followed.
+ * @throws {Error} When the site answers no route, or names an origin that is
+ * not an absolute address.
+ */
+export function startDocumentMeta(
+  options: StartDocumentMetaOptions,
+): () => void {
+  if (typeof document === 'undefined') return stopNothing;
+
+  const write = (): void => {
+    writeDocumentMeta(
+      pageDocumentMeta({
+        site: options.site,
+        routes: options.routes,
+        url: options.url(),
+        origin: options.origin,
+      }),
+    );
+  };
+
+  return (options.follow ?? writeOnce)(write);
+}
+
+function writeOnce(write: () => void): () => void {
+  write();
+  return stopNothing;
+}
+
+function stopNothing(): void {
+  // Nothing was followed, so there is nothing to stop.
+}