@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/cookieList.ts

@@ -1,70 +1,70 @@
-// The site's cookie list, "Cookies" under "Lister" (the list the standard block "Cookieliste" brings,
-// standard/cookies/list.ts): a file per cookie in config.cookieList, each with its name (`*` for the rest of it), who
-// sets it, what for, how long it lasts and its category (necessary, or one the visitor says yes to in the cookie banner,
-// lib/cookieCategories.mjs). An app's cookies (its
-// cookies.json, those with a name) are added to it in the commit that installs the app, and those it added (`app`, its
-// id, kept in the file but not shown) are taken out in the one that uninstalls it; an update adds its new ones and takes
-// out those it no longer sets. One already in the list by its name and provider is left as it is, so what was written
-// over an app's text stays. The app "Cookiescanner" adds those its scan finds besides (its worker.js), and more can be
-// added by hand.
-import { config } from '@site/config';
-import type { Change, RepoFile } from './github';
-import { slugify } from './schema';
-import { categoryOf, type CookieCategory } from '../lib/cookieCategories.mjs';
-import type { AppCookie } from './store';
-
-/** A cookie in the list, as its file has it; `app`: the app that added it; `new`: added by the app "Cookiescanner" and not
- * yet looked through (first in the list, marked, until it is saved: FolderCollection.fresh); `scanned`: added by it, kept
- * when saved (its tab "Problemer" says when the site no longer sets it). */
-export type CookieEntry = {
-  name: string;
-  provider: string;
-  purpose: string;
-  lasts?: string;
-  category: CookieCategory;
-  app?: string;
-  new?: boolean;
-  scanned?: boolean;
-};
-
-/** Whether a file is one of the list's. */
-export const inCookieList = (path: string) => path.startsWith(`${config.cookieList}/`) && path.endsWith('.json');
-
-function entryOf(file: RepoFile): Partial<CookieEntry> {
-  try {
-    return JSON.parse(file.text) ?? {};
-  } catch {
-    return {};
-  }
-}
-
-const same = (a: { name?: string; provider?: string }, b: { name?: string; provider?: string }) =>
-  a.name === b.name && (a.provider ?? '') === (b.provider ?? '');
-
-/** The changes to the list when an app is installed or updated with `cookies` (its cookies.json, in the site's
- * language), or uninstalled (null), from the site's files now (see above). */
-export function cookieChanges(app: string, cookies: AppCookie[] | null, files: RepoFile[]): Change[] {
-  const list = files.filter((f) => inCookieList(f.path)).map((file) => ({ file, entry: entryOf(file) }));
-  const wanted = (cookies ?? []).filter((c) => c.name?.trim());
-  const changes: Change[] = list
-    .filter(({ entry }) => entry.app === app && !wanted.some((c) => same(c, entry)))
-    .map(({ file }) => ({ path: file.path, content: null, oid: file.oid }));
-  const taken = new Set(list.map(({ file }) => file.path));
-  for (const c of wanted) {
-    if (list.some(({ entry }) => same(c, entry))) continue;
-    const slug = slugify(`${c.name!.replace(/\*/g, ' x ')} ${c.provider ?? ''}`) || 'cookie';
-    let path = `${config.cookieList}/${slug}.json`;
-    for (let n = 2; taken.has(path); n++) path = `${config.cookieList}/${slug}-${n}.json`;
-    taken.add(path);
-    const entry: CookieEntry = {
-      name: c.name!,
-      provider: c.provider ?? '',
-      purpose: c.purpose,
-      ...(c.lasts ? { lasts: c.lasts } : {}),
-      category: categoryOf(c),
-      app,
-    };
-    changes.push({ path, content: `${JSON.stringify(entry, null, 2)}\n`, oid: null });
-  }
-  return changes;
-}
+// The site's cookie list, "Cookies" under "Lister" (the list the standard block "Cookieliste" brings,
+// standard/cookies/list.ts): a file per cookie in config.cookieList, each with its name (`*` for the rest of it), who
+// sets it, what for, how long it lasts and its category (necessary, or one the visitor says yes to in the cookie banner,
+// lib/cookieCategories.mjs). An app's cookies (its
+// cookies.json, those with a name) are added to it in the commit that installs the app, and those it added (`app`, its
+// id, kept in the file but not shown) are taken out in the one that uninstalls it; an update adds its new ones and takes
+// out those it no longer sets. One already in the list by its name and provider is left as it is, so what was written
+// over an app's text stays. The app "Cookiescanner" adds those its scan finds besides (its worker.js), and more can be
+// added by hand.
+import { config } from '@site/config';
+import type { Change, RepoFile } from './github';
+import { slugify } from './schema';
+import { categoryOf, type CookieCategory } from '../lib/cookieCategories.mjs';
+import type { AppCookie } from './store';
+
+/** A cookie in the list, as its file has it; `app`: the app that added it; `new`: added by the app "Cookiescanner" and not
+ * yet looked through (first in the list, marked, until it is saved: FolderCollection.fresh); `scanned`: added by it, kept
+ * when saved (its tab "Problemer" says when the site no longer sets it). */
+export type CookieEntry = {
+  name: string;
+  provider: string;
+  purpose: string;
+  lasts?: string;
+  category: CookieCategory;
+  app?: string;
+  new?: boolean;
+  scanned?: boolean;
+};
+
+/** Whether a file is one of the list's. */
+export const inCookieList = (path: string) => path.startsWith(`${config.cookieList}/`) && path.endsWith('.json');
+
+function entryOf(file: RepoFile): Partial<CookieEntry> {
+  try {
+    return JSON.parse(file.text) ?? {};
+  } catch {
+    return {};
+  }
+}
+
+const same = (a: { name?: string; provider?: string }, b: { name?: string; provider?: string }) =>
+  a.name === b.name && (a.provider ?? '') === (b.provider ?? '');
+
+/** The changes to the list when an app is installed or updated with `cookies` (its cookies.json, in the site's
+ * language), or uninstalled (null), from the site's files now (see above). */
+export function cookieChanges(app: string, cookies: AppCookie[] | null, files: RepoFile[]): Change[] {
+  const list = files.filter((f) => inCookieList(f.path)).map((file) => ({ file, entry: entryOf(file) }));
+  const wanted = (cookies ?? []).filter((c) => c.name?.trim());
+  const changes: Change[] = list
+    .filter(({ entry }) => entry.app === app && !wanted.some((c) => same(c, entry)))
+    .map(({ file }) => ({ path: file.path, content: null, oid: file.oid }));
+  const taken = new Set(list.map(({ file }) => file.path));
+  for (const c of wanted) {
+    if (list.some(({ entry }) => same(c, entry))) continue;
+    const slug = slugify(`${c.name!.replace(/\*/g, ' x ')} ${c.provider ?? ''}`) || 'cookie';
+    let path = `${config.cookieList}/${slug}.json`;
+    for (let n = 2; taken.has(path); n++) path = `${config.cookieList}/${slug}-${n}.json`;
+    taken.add(path);
+    const entry: CookieEntry = {
+      name: c.name!,
+      provider: c.provider ?? '',
+      purpose: c.purpose,
+      ...(c.lasts ? { lasts: c.lasts } : {}),
+      category: categoryOf(c),
+      app,
+    };
+    changes.push({ path, content: `${JSON.stringify(entry, null, 2)}\n`, oid: null });
+  }
+  return changes;
+}

package/src/countries.ts

@@ -1,59 +1,59 @@
-// The countries a phone number can be in, by their code (ISO 3166, "DK") and their country code
-// ("+45"), for the sheet the code is picked in (PhoneField in ui.tsx) and for reading a number typed
-// with its code (phoneParts in check.ts). Their names are the browser's own, in the editor's language
-// (Intl.DisplayNames). Countries that share a code (+1: the USA, Canada and the islands with an area
-// code of their own) have it each; the first with a code is the one shown for it until another is picked.
-import { locale } from './i18n';
-
-const list =
-  'US1 CA1 AG1 AI1 AS1 BB1 BM1 BS1 DM1 DO1 GD1 GU1 JM1 KN1 KY1 LC1 MP1 MS1 PR1 SX1 TC1 TT1 VC1 VG1 VI1 RU7 KZ7 ' +
-  'EG20 ZA27 GR30 NL31 BE32 FR33 ES34 HU36 IT39 VA39 RO40 CH41 AT43 GB44 GG44 IM44 JE44 DK45 SE46 NO47 SJ47 PL48 ' +
-  'DE49 PE51 MX52 CU53 AR54 BR55 CL56 CO57 VE58 MY60 AU61 CX61 CC61 ID62 PH63 NZ64 SG65 TH66 JP81 KR82 VN84 CN86 ' +
-  'TR90 IN91 PK92 AF93 LK94 MM95 IR98 SS211 MA212 EH212 DZ213 TN216 LY218 GM220 SN221 MR222 ML223 GN224 CI225 ' +
-  'BF226 NE227 TG228 BJ229 MU230 LR231 SL232 GH233 NG234 TD235 CF236 CM237 CV238 ST239 GQ240 GA241 CG242 CD243 ' +
-  'AO244 GW245 IO246 SC248 SD249 RW250 ET251 SO252 DJ253 KE254 TZ255 UG256 BI257 MZ258 ZM260 MG261 RE262 YT262 ' +
-  'ZW263 NA264 MW265 LS266 BW267 SZ268 KM269 SH290 ER291 AW297 FO298 GL299 GI350 PT351 LU352 IE353 IS354 AL355 ' +
-  'MT356 CY357 FI358 AX358 BG359 LT370 LV371 EE372 MD373 AM374 BY375 AD376 MC377 SM378 UA380 RS381 ME382 XK383 ' +
-  'HR385 SI386 BA387 MK389 CZ420 SK421 LI423 FK500 BZ501 GT502 SV503 HN504 NI505 CR506 PA507 PM508 HT509 GP590 ' +
-  'BL590 MF590 BO591 GY592 EC593 GF594 PY595 MQ596 SR597 UY598 CW599 BQ599 TL670 NF672 BN673 NR674 PG675 TO676 ' +
-  'SB677 VU678 FJ679 PW680 WF681 CK682 NU683 WS685 KI686 NC687 TV688 PF689 TK690 FM691 MH692 KP850 HK852 MO853 ' +
-  'KH855 LA856 BD880 TW886 MV960 LB961 JO962 SY963 IQ964 KW965 SA966 YE967 OM968 PS970 AE971 IL972 BH973 QA974 ' +
-  'BT975 MN976 NP977 TJ992 TM993 AZ994 GE995 KG996 UZ998';
-
-/** Each country's code and its country code, "+45". */
-export const dialCodes: Record<string, string> = Object.fromEntries(list.split(' ').map((c) => [c.slice(0, 2), `+${c.slice(2)}`]));
-
-/** The country shown for a country code: the first with it, or undefined when no country has it. */
-export const regionOf = (code: string) => Object.keys(dialCodes).find((r) => dialCodes[r] === code);
-
-const codes = new Set(Object.values(dialCodes));
-
-/** The country code at the start of a number's digits, with digits after it (the longest that is one:
- * +358 before +35), or undefined. */
-export const codeAt = (digits: string) =>
-  [3, 2, 1]
-    .filter((n) => digits.length > n)
-    .map((n) => `+${digits.slice(0, n)}`)
-    .find((c) => codes.has(c));
-
-/** A country's flag, of the two letters of its code. */
-export const flagOf = (region: string) => String.fromCodePoint(...[...region].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
-
-const names = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale], { type: 'region' }) : null;
-const english = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames(['en'], { type: 'region' }) : null;
-
-/** A country's name in the editor's language. */
-export const countryName = (region: string) => names?.of(region) ?? region;
-
-/** The countries in the order of their names, each with its name, its code and the words it is also
- * found by in a search (its country code, its code, its name in English). */
-export function countries() {
-  return Object.keys(dialCodes)
-    .map((region) => ({
-      region,
-      name: countryName(region),
-      code: dialCodes[region],
-      words: `${dialCodes[region]} ${region} ${english?.of(region) ?? ''}`,
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name, locale));
-}
+// The countries a phone number can be in, by their code (ISO 3166, "DK") and their country code
+// ("+45"), for the sheet the code is picked in (PhoneField in ui.tsx) and for reading a number typed
+// with its code (phoneParts in check.ts). Their names are the browser's own, in the editor's language
+// (Intl.DisplayNames). Countries that share a code (+1: the USA, Canada and the islands with an area
+// code of their own) have it each; the first with a code is the one shown for it until another is picked.
+import { locale } from './i18n';
+
+const list =
+  'US1 CA1 AG1 AI1 AS1 BB1 BM1 BS1 DM1 DO1 GD1 GU1 JM1 KN1 KY1 LC1 MP1 MS1 PR1 SX1 TC1 TT1 VC1 VG1 VI1 RU7 KZ7 ' +
+  'EG20 ZA27 GR30 NL31 BE32 FR33 ES34 HU36 IT39 VA39 RO40 CH41 AT43 GB44 GG44 IM44 JE44 DK45 SE46 NO47 SJ47 PL48 ' +
+  'DE49 PE51 MX52 CU53 AR54 BR55 CL56 CO57 VE58 MY60 AU61 CX61 CC61 ID62 PH63 NZ64 SG65 TH66 JP81 KR82 VN84 CN86 ' +
+  'TR90 IN91 PK92 AF93 LK94 MM95 IR98 SS211 MA212 EH212 DZ213 TN216 LY218 GM220 SN221 MR222 ML223 GN224 CI225 ' +
+  'BF226 NE227 TG228 BJ229 MU230 LR231 SL232 GH233 NG234 TD235 CF236 CM237 CV238 ST239 GQ240 GA241 CG242 CD243 ' +
+  'AO244 GW245 IO246 SC248 SD249 RW250 ET251 SO252 DJ253 KE254 TZ255 UG256 BI257 MZ258 ZM260 MG261 RE262 YT262 ' +
+  'ZW263 NA264 MW265 LS266 BW267 SZ268 KM269 SH290 ER291 AW297 FO298 GL299 GI350 PT351 LU352 IE353 IS354 AL355 ' +
+  'MT356 CY357 FI358 AX358 BG359 LT370 LV371 EE372 MD373 AM374 BY375 AD376 MC377 SM378 UA380 RS381 ME382 XK383 ' +
+  'HR385 SI386 BA387 MK389 CZ420 SK421 LI423 FK500 BZ501 GT502 SV503 HN504 NI505 CR506 PA507 PM508 HT509 GP590 ' +
+  'BL590 MF590 BO591 GY592 EC593 GF594 PY595 MQ596 SR597 UY598 CW599 BQ599 TL670 NF672 BN673 NR674 PG675 TO676 ' +
+  'SB677 VU678 FJ679 PW680 WF681 CK682 NU683 WS685 KI686 NC687 TV688 PF689 TK690 FM691 MH692 KP850 HK852 MO853 ' +
+  'KH855 LA856 BD880 TW886 MV960 LB961 JO962 SY963 IQ964 KW965 SA966 YE967 OM968 PS970 AE971 IL972 BH973 QA974 ' +
+  'BT975 MN976 NP977 TJ992 TM993 AZ994 GE995 KG996 UZ998';
+
+/** Each country's code and its country code, "+45". */
+export const dialCodes: Record<string, string> = Object.fromEntries(list.split(' ').map((c) => [c.slice(0, 2), `+${c.slice(2)}`]));
+
+/** The country shown for a country code: the first with it, or undefined when no country has it. */
+export const regionOf = (code: string) => Object.keys(dialCodes).find((r) => dialCodes[r] === code);
+
+const codes = new Set(Object.values(dialCodes));
+
+/** The country code at the start of a number's digits, with digits after it (the longest that is one:
+ * +358 before +35), or undefined. */
+export const codeAt = (digits: string) =>
+  [3, 2, 1]
+    .filter((n) => digits.length > n)
+    .map((n) => `+${digits.slice(0, n)}`)
+    .find((c) => codes.has(c));
+
+/** A country's flag, of the two letters of its code. */
+export const flagOf = (region: string) => String.fromCodePoint(...[...region].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
+
+const names = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale], { type: 'region' }) : null;
+const english = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames(['en'], { type: 'region' }) : null;
+
+/** A country's name in the editor's language. */
+export const countryName = (region: string) => names?.of(region) ?? region;
+
+/** The countries in the order of their names, each with its name, its code and the words it is also
+ * found by in a search (its country code, its code, its name in English). */
+export function countries() {
+  return Object.keys(dialCodes)
+    .map((region) => ({
+      region,
+      name: countryName(region),
+      code: dialCodes[region],
+      words: `${dialCodes[region]} ${region} ${english?.of(region) ?? ''}`,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name, locale));
+}

package/src/deploy.ts

@@ -1,155 +1,155 @@
-// After a save: tells when the site has been rebuilt with it. Each build writes the commit it was
-// made from to /editor/version.json (packages/editor/pages/editor/version.json.js), and the editor asks for that
-// until it is the saved commit or a later one. The message is a notification of the type `site` (notifications.ts),
-// which also comes on the phone or computer when the editor is not on screen.
-// Each save says what it changed ("farver ændret", "side “Om” ændret", t.app.changes): right after it (savedText),
-// and, with the other saves since, when the website has been updated with them (changesText, App.tsx save).
-import { graphql, REPO } from './github';
-import { entryName, type Collection } from './schema';
-import { readFields, splitFrontmatter } from './frontmatter.mjs';
-import { locale, t } from './i18n';
-
-const fileName = (path: string) => path.split('/').pop() ?? path;
-
-/** What a file of a list is called: a page's or post's title, an entry's name as its list shows it, else (a picture)
- * its file name. */
-export function nameOf(collection: Collection | undefined, file: { path: string; text: string }): string {
-  try {
-    if (collection?.kind === 'markdown') return String(readFields(splitFrontmatter(file.text).yaml).title ?? fileName(file.path));
-    if (collection?.kind === 'folder') return entryName(collection, JSON.parse(file.text)) || fileName(file.path);
-  } catch {}
-  return fileName(file.path);
-}
-
-/** A kind or a label inside a sentence: "Side" as "side", but "SEO" as it is. */
-export const lower = (s: string) => (/^\p{Lu}\p{Lu}/u.test(s) ? s : s.charAt(0).toLocaleLowerCase(locale) + s.slice(1));
-const capital = (s: string) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
-
-/** A thing by its kind and name, as a change says it: side “Om”. */
-export const kindAndName = (kind: string, name: string) => t.app.changes.named(lower(kind), name);
-
-/** The message right after a save, with what it changed; the site is rebuilt in 1-2 minutes. */
-export const savedText = (change: string) => t.common.saved(capital(change));
-
-/** What the saves since the last update changed, as a list: the first three and how many more. */
-export function changesText(changes: string[]): string {
-  const shown = changes.slice(0, 3);
-  const rest = changes.length - shown.length;
-  return new Intl.ListFormat(locale, { type: 'conjunction' }).format(rest ? [...shown, t.app.changes.more(rest)] : shown);
-}
-
-const EVERY = 10_000;
-const GIVE_UP = 10 * 60_000;
-
-// What the site was last built from: the commit, the fingerprint of the editor's code and when.
-type Version = { commit?: string; editor?: string; builtAt?: string };
-async function version(): Promise<Version> {
-  try {
-    const res = await fetch('/editor/version.json', { cache: 'no-store' });
-    return res.ok ? await res.json() : {};
-  } catch {
-    return {};
-  }
-}
-
-const built = async () => (await version()).commit ?? null;
-
-// Whether `commit` is among the last commits up to `build` (the site may be built from a later one).
-async function includes(build: string, commit: string): Promise<boolean> {
-  const data = await graphql<{ repository: { object: { history?: { nodes: { oid: string }[] } } | null } }>(
-    `
-      query ($owner: String!, $name: String!, $oid: GitObjectID!) {
-        repository(owner: $owner, name: $name) {
-          object(oid: $oid) {
-            ... on Commit {
-              history(first: 50) {
-                nodes {
-                  oid
-                }
-              }
-            }
-          }
-        }
-      }
-    `,
-    { owner: REPO.owner, name: REPO.name, oid: build },
-  );
-  return data.repository.object?.history?.nodes.some((n) => n.oid === commit) ?? false;
-}
-
-// Waits for `commit` to be on the site: done(true) when it is, done(false) when it is not after
-// 10 minutes. Returns a function that stops waiting (a newer save takes over).
-export function waitForSite(commit: string, done: (online: boolean) => void): () => void {
-  const until = Date.now() + GIVE_UP;
-  // The build last looked at, so GitHub is asked about each build once.
-  let seen: string | null = null;
-  let stopped = false;
-  let timer: ReturnType<typeof setTimeout>;
-
-  async function check() {
-    const build = await built();
-    if (stopped) return;
-    if (build && build !== seen) {
-      seen = build;
-      const online = build === commit || (await includes(build, commit).catch(() => false));
-      if (stopped) return;
-      if (online) return done(true);
-    }
-    if (Date.now() > until) {
-      // Without any version file (a build from before it existed) there is nothing to tell.
-      if (seen) done(false);
-      return;
-    }
-    timer = setTimeout(check, EVERY);
-  }
-
-  timer = setTimeout(check, EVERY);
-  return () => {
-    stopped = true;
-    clearTimeout(timer);
-  };
-}
-
-// Whether a form has changes that are not saved (set by FormFrame).
-let unsaved = false;
-export const setUnsaved = (yes: boolean) => void (unsaved = yes);
-export const hasUnsaved = () => unsaved;
-
-// Keeps an open editor up to date. The installed app can stay open for days, and it reads the files
-// straight from GitHub, so after a change to the editor and its files (like the front page becoming
-// sections) an old editor would show them as empty forms. When the site has an editor with other
-// code (the fingerprint in /editor/version.json is not the one in this page,
-// packages/editor/site/editor-version.mjs), the page reloads, as soon as nothing is unsaved: checked when the
-// editor opens, when it comes back on screen, and every minute while it is on screen. onSite: what the
-// site was last built from, at each check (when it was updated, on the start screen).
-export function keepCurrent(onSite?: (v: Version) => void) {
-  const own = document.querySelector<HTMLMetaElement>('meta[name="editor-version"]')?.content;
-  async function check() {
-    if (document.visibilityState !== 'visible') return;
-    const v = await version();
-    onSite?.(v);
-    const { editor } = v;
-    if (!own || unsaved || !editor || editor === own) return;
-    // Once for each newer editor, so a page that comes back old (from a cache) does not reload again
-    // and again.
-    try {
-      if (sessionStorage.getItem('editor-reloaded-for') === editor) return;
-      sessionStorage.setItem('editor-reloaded-for', editor);
-    } catch {
-      return;
-    }
-    location.reload();
-  }
-  check();
-  const timer = setInterval(check, 60_000);
-  document.addEventListener('visibilitychange', check);
-  return () => {
-    clearInterval(timer);
-    document.removeEventListener('visibilitychange', check);
-  };
-}
-
-// Notifications go through the service worker (packages/editor/pages/editor/sw.js); registered when the editor opens.
-export function registerWorker() {
-  navigator.serviceWorker?.register('/editor/sw.js').catch(() => {});
-}
+// After a save: tells when the site has been rebuilt with it. Each build writes the commit it was
+// made from to /editor/version.json (packages/editor/pages/editor/version.json.js), and the editor asks for that
+// until it is the saved commit or a later one. The message is a notification of the type `site` (notificationData.ts),
+// which also comes on the phone or computer when the editor is not on screen.
+// Each save says what it changed ("farver ændret", "side “Om” ændret", t.app.changes): right after it (savedText),
+// and, with the other saves since, when the website has been updated with them (changesText, App.tsx save).
+import { graphql, REPO } from './github';
+import { entryName, type Collection } from './schema';
+import { readFields, splitFrontmatter } from './frontmatter.mjs';
+import { locale, t } from './i18n';
+
+const fileName = (path: string) => path.split('/').pop() ?? path;
+
+/** What a file of a list is called: a page's or post's title, an entry's name as its list shows it, else (a picture)
+ * its file name. */
+export function nameOf(collection: Collection | undefined, file: { path: string; text: string }): string {
+  try {
+    if (collection?.kind === 'markdown') return String(readFields(splitFrontmatter(file.text).yaml).title ?? fileName(file.path));
+    if (collection?.kind === 'folder') return entryName(collection, JSON.parse(file.text)) || fileName(file.path);
+  } catch {}
+  return fileName(file.path);
+}
+
+/** A kind or a label inside a sentence: "Side" as "side", but "SEO" as it is. */
+export const lower = (s: string) => (/^\p{Lu}\p{Lu}/u.test(s) ? s : s.charAt(0).toLocaleLowerCase(locale) + s.slice(1));
+const capital = (s: string) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+
+/** A thing by its kind and name, as a change says it: side “Om”. */
+export const kindAndName = (kind: string, name: string) => t.app.changes.named(lower(kind), name);
+
+/** The message right after a save, with what it changed; the site is rebuilt in 1-2 minutes. */
+export const savedText = (change: string) => t.common.saved(capital(change));
+
+/** What the saves since the last update changed, as a list: the first three and how many more. */
+export function changesText(changes: string[]): string {
+  const shown = changes.slice(0, 3);
+  const rest = changes.length - shown.length;
+  return new Intl.ListFormat(locale, { type: 'conjunction' }).format(rest ? [...shown, t.app.changes.more(rest)] : shown);
+}
+
+const EVERY = 10_000;
+const GIVE_UP = 10 * 60_000;
+
+// What the site was last built from: the commit, the fingerprint of the editor's code and when.
+type Version = { commit?: string; editor?: string; builtAt?: string };
+async function version(): Promise<Version> {
+  try {
+    const res = await fetch('/editor/version.json', { cache: 'no-store' });
+    return res.ok ? await res.json() : {};
+  } catch {
+    return {};
+  }
+}
+
+const built = async () => (await version()).commit ?? null;
+
+// Whether `commit` is among the last commits up to `build` (the site may be built from a later one).
+async function includes(build: string, commit: string): Promise<boolean> {
+  const data = await graphql<{ repository: { object: { history?: { nodes: { oid: string }[] } } | null } }>(
+    `
+      query ($owner: String!, $name: String!, $oid: GitObjectID!) {
+        repository(owner: $owner, name: $name) {
+          object(oid: $oid) {
+            ... on Commit {
+              history(first: 50) {
+                nodes {
+                  oid
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+    { owner: REPO.owner, name: REPO.name, oid: build },
+  );
+  return data.repository.object?.history?.nodes.some((n) => n.oid === commit) ?? false;
+}
+
+// Waits for `commit` to be on the site: done(true) when it is, done(false) when it is not after
+// 10 minutes. Returns a function that stops waiting (a newer save takes over).
+export function waitForSite(commit: string, done: (online: boolean) => void): () => void {
+  const until = Date.now() + GIVE_UP;
+  // The build last looked at, so GitHub is asked about each build once.
+  let seen: string | null = null;
+  let stopped = false;
+  let timer: ReturnType<typeof setTimeout>;
+
+  async function check() {
+    const build = await built();
+    if (stopped) return;
+    if (build && build !== seen) {
+      seen = build;
+      const online = build === commit || (await includes(build, commit).catch(() => false));
+      if (stopped) return;
+      if (online) return done(true);
+    }
+    if (Date.now() > until) {
+      // Without any version file (a build from before it existed) there is nothing to tell.
+      if (seen) done(false);
+      return;
+    }
+    timer = setTimeout(check, EVERY);
+  }
+
+  timer = setTimeout(check, EVERY);
+  return () => {
+    stopped = true;
+    clearTimeout(timer);
+  };
+}
+
+// Whether a form has changes that are not saved (set by FormFrame).
+let unsaved = false;
+export const setUnsaved = (yes: boolean) => void (unsaved = yes);
+export const hasUnsaved = () => unsaved;
+
+// Keeps an open editor up to date. The installed app can stay open for days, and it reads the files
+// straight from GitHub, so after a change to the editor and its files (like the front page becoming
+// sections) an old editor would show them as empty forms. When the site has an editor with other
+// code (the fingerprint in /editor/version.json is not the one in this page,
+// packages/editor/site/editor-version.mjs), the page reloads, as soon as nothing is unsaved: checked when the
+// editor opens, when it comes back on screen, and every minute while it is on screen. onSite: what the
+// site was last built from, at each check (when it was updated, on the start screen).
+export function keepCurrent(onSite?: (v: Version) => void) {
+  const own = document.querySelector<HTMLMetaElement>('meta[name="editor-version"]')?.content;
+  async function check() {
+    if (document.visibilityState !== 'visible') return;
+    const v = await version();
+    onSite?.(v);
+    const { editor } = v;
+    if (!own || unsaved || !editor || editor === own) return;
+    // Once for each newer editor, so a page that comes back old (from a cache) does not reload again
+    // and again.
+    try {
+      if (sessionStorage.getItem('editor-reloaded-for') === editor) return;
+      sessionStorage.setItem('editor-reloaded-for', editor);
+    } catch {
+      return;
+    }
+    location.reload();
+  }
+  check();
+  const timer = setInterval(check, 60_000);
+  document.addEventListener('visibilitychange', check);
+  return () => {
+    clearInterval(timer);
+    document.removeEventListener('visibilitychange', check);
+  };
+}
+
+// Notifications go through the service worker (packages/editor/pages/editor/sw.js); registered when the editor opens.
+export function registerWorker() {
+  navigator.serviceWorker?.register('/editor/sw.js').catch(() => {});
+}