@morphemecms/cms 0.0.0-stage → 0.1.0

package/scripts/demo-site.mjs

@@ -0,0 +1,42 @@
+// The CMS's demo site: a made-up site about Morpheme itself, with pages, blog posts, pictures and settings of its
+// own, and nothing of any real site's. It is the starter (starter/, the site a new site begins with) with demo/ laid on
+// top: demo/ holds only what differs (its pages and posts, the data files it changes, its src/site/ parts, its logo,
+// icons and pictures), so the two cannot drift apart. demoSite() puts it in a folder of its own with one of the site's
+// themes, ready to build: the pictures of the themes are taken of it (theme-screenshots.mjs), so a theme is never shown
+// with a site's own content. `morpheme check:demo` builds it with the standard theme and checks its content
+// (check-demo.mjs), so it keeps up with the CMS.
+import { cpSync, mkdirSync, mkdtempSync, symlinkSync, writeFileSync } from 'node:fs';
+import { join, relative, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { execFileSync } from 'node:child_process';
+import { STANDARD_THEME, themeFolder } from '@morphemecms/cms/site/theme.mjs';
+
+const STARTER = fileURLToPath(new URL('../starter/', import.meta.url));
+const DEMO = fileURLToPath(new URL('../demo/', import.meta.url));
+
+/** The demo site in a new folder, with the theme (a folder in the site's src/themes/, or the standard theme) as its theme,
+ * the site's packages and its pictures' smaller sizes (`morpheme images`), from the site at `root`. Its folder;
+ * the caller deletes it. */
+export function demoSite(theme = STANDARD_THEME, root = process.cwd()) {
+  // In the site's .morpheme/ (git-ignored), not the system's temporary folder: Astro takes a file in a folder that has
+  // no folder in common with the site's root (the CMS's theme) as one in the root. Not in node_modules/ either, where Node
+  // runs no TypeScript.
+  const cache = join(root, '.morpheme/demo');
+  mkdirSync(cache, { recursive: true });
+  const dir = mkdtempSync(join(cache, `${theme}-`));
+  // The starter's site without its pages (the demo has its own, at other addresses), then the demo over it.
+  const content = join(STARTER, 'src/content');
+  cpSync(STARTER, dir, {
+    recursive: true,
+    filter: (from) => !(from + sep).startsWith(content + sep) && !relative(STARTER, from).startsWith('node_modules'),
+  });
+  cpSync(DEMO, dir, { recursive: true });
+  if (theme !== STANDARD_THEME) cpSync(join(root, themeFolder(theme)), join(dir, 'src/themes', theme), { recursive: true });
+  writeFileSync(join(dir, 'src/data/theme.json'), `${JSON.stringify({ theme }, null, 2)}\n`);
+  // The site's packages: its node_modules/ (a junction, which Windows makes without the rights a symbolic link needs). The
+  // starter's package.json names them, as a site's does, which Astro reads to know which packages to build with the site.
+  symlinkSync(join(root, 'node_modules'), join(dir, 'node_modules'), 'junction');
+  for (const script of ['responsive-images', 'video-thumbnails'])
+    execFileSync(process.execPath, [fileURLToPath(new URL(`${script}.mjs`, import.meta.url))], { cwd: dir, stdio: 'inherit' });
+  return dir;
+}

package/scripts/editor-icons.mjs

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+// The PNG icons (the editor's app icons in public/editor/, the site's public/apple-touch-icon.png and
+// public/favicon.ico), made from the mark in public/favicon.svg on the site's background colour
+// (light mode, src/data/colors.json). Run again only if the favicon changes:
+// npx morpheme editor-icons
+//   icon-192/512: the icon on Android and in the browser; maskable: Android may crop it to a circle,
+//   so the mark keeps inside the middle 60 %; apple-touch-icon: the iPhone home screen (the editor's
+//   and the site's); favicon.ico: for browsers and programs that ask for /favicon.ico, not the SVG.
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import sharp from 'sharp';
+
+const ROOT = process.cwd();
+const OUT = path.join(ROOT, 'public');
+const favicon = await fs.readFile(path.join(ROOT, 'public/favicon.svg'), 'utf8');
+const mark = favicon.match(/<svg x="[^>]*viewBox="([^"]+)">([\s\S]*?)<\/svg>/);
+const BG = JSON.parse(await fs.readFile(path.join(ROOT, 'src/data/colors.json'), 'utf8')).light.bg;
+
+// size: the mark's share of the icon's width.
+const icon = (size) => {
+  const [, , vw, vh] = mark[1].split(/[\s,]+/).map(Number);
+  const w = 64 * size;
+  const h = w * (vh / vw);
+  return Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="${BG}"/>` +
+      `<svg x="${(64 - w) / 2}" y="${(64 - h) / 2}" width="${w}" height="${h}" viewBox="${mark[1]}">${mark[2]}</svg></svg>`,
+  );
+};
+
+const png = (px, size) =>
+  sharp(icon(size), { density: 72 * (px / 64) * 2 })
+    .resize(px, px)
+    .png()
+    .toBuffer();
+
+for (const [name, px, size] of [
+  ['editor/icon-192.png', 192, 0.7],
+  ['editor/icon-512.png', 512, 0.7],
+  ['editor/icon-maskable-512.png', 512, 0.5],
+  ['editor/apple-touch-icon.png', 180, 0.66],
+  ['apple-touch-icon.png', 180, 0.66],
+]) {
+  await fs.writeFile(path.join(OUT, name), await png(px, size));
+}
+
+// An ICO file with one 32 px PNG in it (as packages/editor/src/brand.ts makes it).
+const image = await png(32, 0.75);
+const head = Buffer.alloc(22);
+head.writeUInt16LE(1, 2); // an icon
+head.writeUInt16LE(1, 4); // one picture
+head[6] = head[7] = 32; // width and height
+head.writeUInt16LE(1, 10); // colour planes
+head.writeUInt16LE(32, 12); // bits per pixel
+head.writeUInt32LE(image.length, 14);
+head.writeUInt32LE(22, 18); // where the picture starts
+await fs.writeFile(path.join(OUT, 'favicon.ico'), Buffer.concat([head, image]));

package/scripts/editor-roundtrip.mjs

@@ -0,0 +1,134 @@
+// Checks that the editor (/editor/) can save every page and blog post without changing the site:
+// each body is loaded into Milkdown and written back, and both versions are rendered with Astro's
+// Markdown pipeline. The HTML must be the same. The front matter, written back without changes, must
+// be the same text. The fixed pages (src/data/*.json with sections) are loaded as their text with the
+// sections as blocks (packages/editor/src/sections.mjs) and read back: the sections must be the same, a section
+// of text with the same heading and the same HTML. Every page is also read into sections as the front page (as the
+// site reads the page that is the front page without the editor, partsOfMarkdown in sections.mjs, packages/editor/site/home.ts):
+// they must be those the editor reads. Run: npm run check:editor [files...]
+// Milkdown needs a DOM; jsdom stands in for the browser.
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { JSDOM } from 'jsdom';
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>', { pretendToBeVisual: true });
+globalThis.window = dom.window;
+for (const key of [
+  'document',
+  'Node',
+  'Element',
+  'HTMLElement',
+  'MutationObserver',
+  'getComputedStyle',
+  'requestAnimationFrame',
+  'DOMParser',
+  'Event',
+  'CustomEvent',
+])
+  globalThis[key] = dom.window[key];
+for (const key of ['addEventListener', 'removeEventListener', 'dispatchEvent']) globalThis[key] = dom.window[key].bind(dom.window);
+
+const { editorViewCtx } = await import('@milkdown/kit/core');
+const { createMarkdownProcessor } = await import('@astrojs/markdown-remark');
+const { makeEditor, markdownOf, partsOf, spacing } = await import('@morphemecms/cms/src/markdown.mjs');
+const { introOf, partsOfMarkdown, sectionsFromParts, sectionsToMarkdown } = await import('@morphemecms/cms/src/sections.mjs');
+const { withSiteModules } = await import('../site/siteModules.mjs');
+// The field of the sections of each fixed page (@site/collections): the sections whose text is written
+// above their card (their lead), and the page's introduction above them (intro).
+const [{ frontLeads }, { collections }] = await withSiteModules((load) =>
+  Promise.all([load('@site/standardPages'), load('@site/collections')]),
+);
+const { leadsOfField } = await import('@morphemecms/cms/src/sections.mjs');
+const textOf = Object.fromEntries(
+  collections
+    .filter((c) => c.kind === 'files')
+    .flatMap((c) => c.files)
+    .map((f) => [f.file, f.fields.find((x) => x.type === 'blocks')]),
+);
+const { splitFrontmatter, writeFields } = await import('@morphemecms/cms/src/frontmatter.mjs');
+
+const walk = (dir) =>
+  (existsSync(dir) ? readdirSync(dir, { withFileTypes: true }) : []).flatMap((e) =>
+    e.isDirectory() ? walk(join(dir, e.name)) : e.name.endsWith('.md') ? [join(dir, e.name)] : [],
+  );
+const fixed = readdirSync('src/data')
+  .filter((f) => f.endsWith('.json') && JSON.parse(readFileSync(join('src/data', f), 'utf8')).sections)
+  .map((f) => join('src/data', f));
+const files = process.argv.length > 2 ? process.argv.slice(2) : [...walk('src/content/blog'), ...walk('src/content/pages'), ...fixed];
+
+const processor = await createMarkdownProcessor();
+const render = async (md) => (await processor.render(md)).code.replace(/\s+/g, ' ').trim();
+
+let failed = 0;
+// A fixed page's introduction and sections, as the editor reads them back.
+async function sectionsBack(sections, intro, field) {
+  const leads = leadsOfField(field);
+  const editor = await makeEditor(
+    document.createElement('div'),
+    sectionsToMarkdown(sections, leads, field?.intro ? intro : undefined),
+  ).create();
+  let parts = editor.action(partsOf);
+  let back = '';
+  if (field?.intro) [back, parts] = introOf(parts);
+  await editor.destroy();
+  return [back, sectionsFromParts(parts, leads)];
+}
+// The text of a section of text, and of the front page's top, as HTML.
+const comparable = async (intro, sections) =>
+  JSON.stringify([
+    intro ?? '',
+    ...(await Promise.all(
+      sections.map(async (s) =>
+        s.type === 'text' ? { ...s, body: await render(s.body) } : s.type === 'hero' ? { ...s, text: await render(s.text) } : s,
+      ),
+    )),
+  ]);
+
+for (const file of files) {
+  if (file.endsWith('.json')) {
+    const { sections, intro } = JSON.parse(readFileSync(file, 'utf8'));
+    const field = textOf[file];
+    const [before, after] = [
+      await comparable(field?.intro ? intro : '', sections),
+      await comparable(...(await sectionsBack(sections, intro, field))),
+    ];
+    if (before === after) continue;
+    failed++;
+    console.log(`\n✗ ${file}\n  før:    ${before.slice(0, 300)}\n  efter:  ${after.slice(0, 300)}`);
+    continue;
+  }
+  const { yaml, body } = splitFrontmatter(readFileSync(file, 'utf8'));
+  if (writeFields(yaml, {}) !== yaml) {
+    failed++;
+    console.log(`\n✗ ${file}\n  front matter skrives ikke tilbage uændret`);
+    continue;
+  }
+  const root = document.createElement('div');
+  // As in the editor: with the free lines between the blocks, written without them.
+  const editor = await makeEditor(root, body).use(spacing).create();
+  editor.action((ctx) => ctx.get(editorViewCtx).dispatch(ctx.get(editorViewCtx).state.tr));
+  const saved = editor.action(markdownOf);
+  const parts = editor.action(partsOf);
+  await editor.destroy();
+  if (file.includes('src/content/pages/')) {
+    const [editors, site] = [
+      await comparable('', sectionsFromParts(parts, frontLeads)),
+      await comparable('', sectionsFromParts(partsOfMarkdown(body), frontLeads)),
+    ];
+    if (editors !== site) {
+      failed++;
+      console.log(`\n✗ ${file} som forside\n  editoren: ${editors.slice(0, 300)}\n  sitet:    ${site.slice(0, 300)}`);
+      continue;
+    }
+  }
+  const [before, after] = [await render(body), await render(saved)];
+  if (before === after) continue;
+  failed++;
+  let i = 0;
+  while (before[i] === after[i]) i++;
+  console.log(
+    `\n✗ ${file}\n  før:    …${before.slice(Math.max(0, i - 80), i + 120)}\n  efter:  …${after.slice(Math.max(0, i - 80), i + 120)}`,
+  );
+}
+console.log(`\n${files.length - failed} af ${files.length} filer giver samme side efter en gem i editoren.`);
+process.exit(failed ? 1 : 0);

package/scripts/editor-screens.mjs

@@ -0,0 +1,101 @@
+// Opens every screen of the editor (/editor/) in a browser, on a phone and on a computer, and fails
+// when one breaks: an error on the page, something its Content-Security-Policy stopped, an empty app, or a link to an
+// address with nothing on it, or an icon that is not found (drawn as the question mark, data-icon-missing: Svg in
+// packages/editor/src/icon.tsx), there or on one of the built site's pages.
+// The screens are found as the editor's own links: from the start screen (and "Indstillinger", #indstillinger, "Dele", #udseende/dele, "Temaer",
+// #udseende/temaer, "Søgemaskineoptimering", #seo, and "Appstore", #indstillinger/appstore), and
+// from each screen it opens, two steps down. GitHub is answered from the files in this repository, so it needs no login
+// and changes nothing. It runs on the built site: npm run build && npm run check:screens (or on another
+// folder with a built site, its path after the command: packages/editor/scripts/check-themes.mjs).
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { join, relative, resolve } from 'node:path';
+import { chromium } from 'playwright';
+import { openEditor, serveBuilt } from './built-site.mjs';
+
+const ROOT = `${process.cwd()}/`;
+const DIST = resolve(ROOT, process.argv[2] ?? 'dist');
+if (!existsSync(join(DIST, 'editor/index.html'))) {
+  console.error(`Der er intet bygget site i ${DIST}. Kør npm run build først.`);
+  process.exit(1);
+}
+
+const missingIcon = (name) =>
+  name
+    ? `ikonet "${name}" findes ikke (et spørgsmålstegn i stedet): skriv det i packages/editor/src/icon.tsx`
+    : 'et ikon er ikke en SVG-fil (et spørgsmålstegn i stedet)';
+
+// The icons not found on the built site's pages: each one once, with the pages it is on.
+const problems = [];
+const missingOn = new Map();
+for (const entry of readdirSync(DIST, { recursive: true, withFileTypes: true })) {
+  if (!entry.isFile() || !entry.name.endsWith('.html')) continue;
+  const file = join(entry.parentPath, entry.name);
+  for (const [, name] of readFileSync(file, 'utf8').matchAll(/data-icon-missing="([^"]*)"/g))
+    missingOn.set(name, new Set([...(missingOn.get(name) ?? []), `/${relative(DIST, file)}`]));
+}
+for (const [name, pages] of missingOn) {
+  const shown = [...pages].slice(0, 3).join(', ');
+  problems.push(`${shown}${pages.size > 3 ? ` og ${pages.size - 3} sider til` : ''}: ${missingIcon(name)}`);
+}
+
+const { server, site } = await serveBuilt(DIST);
+
+// CHROMIUM_PATH: another Chromium than Playwright's own (one installed for another version of Playwright).
+const browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || undefined });
+// The screens opened (each on both).
+const opened = new Set();
+
+for (const [width, height] of [
+  [390, 844],
+  [1280, 900],
+]) {
+  const page = await browser.newPage({ viewport: { width, height }, locale: 'da-DK' });
+  let route = '';
+  page.on('pageerror', (e) => problems.push(`${width}px #${route}: ${e.message}`));
+  // Something the page's Content-Security-Policy stopped (packages/editor/lib/csp.mjs).
+  page.on('console', (m) => {
+    if (m.type() === 'error' && /Content Security Policy/i.test(m.text())) problems.push(`${width}px #${route}: ${m.text()}`);
+  });
+  await openEditor(page, site);
+
+  // From the start screen, and from "Indstillinger" (the gear in the top bar), "Dele", "Temaer",
+  // "Søgemaskineoptimering" and "Appstore" (the apps' pages and their developers'), whose screens are a step further
+  // down than the others.
+  const starts = ['', 'indstillinger', 'udseende/dele', 'udseende/temaer', 'seo', 'indstillinger/appstore'];
+  const seen = new Set(starts);
+  let next = starts;
+  for (let depth = 0; depth <= 2 && next.length; depth++) {
+    const found = [];
+    for (const hash of next) {
+      route = hash;
+      await page.evaluate((h) => (location.hash = h), hash);
+      await page.waitForTimeout(150);
+      opened.add(hash);
+      const state = await page.evaluate(() => ({
+        empty: !document.querySelector('astro-island')?.textContent?.trim(),
+        text: document.body.innerText,
+        links: [...document.querySelectorAll('a[href^="#"]')].map((a) => a.getAttribute('href').slice(1)),
+        missing: [...document.querySelectorAll('[data-icon-missing]')].map((e) => e.getAttribute('data-icon-missing')),
+      }));
+      for (const name of new Set(state.missing)) problems.push(`${width}px #${hash}: ${missingIcon(name)}`);
+      if (state.empty) problems.push(`${width}px #${hash}: skærmen er tom`);
+      if (state.text.includes(`Der er ikke noget på adressen ${hash}.`))
+        problems.push(`${width}px #${hash}: der er ikke noget på adressen`);
+      for (const link of state.links) {
+        if (seen.has(link)) continue;
+        seen.add(link);
+        found.push(link);
+      }
+    }
+    next = found;
+  }
+  await page.close();
+}
+
+await browser.close();
+server.close();
+if (problems.length) {
+  console.error(`${problems.length} fejl i editoren eller på sitet:\n${[...new Set(problems)].join('\n')}`);
+  process.exit(1);
+}
+console.log(`${opened.size} skærme i editoren åbner uden fejl, på en telefon og på en computer, og alle ikoner findes.`);

package/scripts/git-env.mjs

@@ -0,0 +1,9 @@
+// The environment for git in a repository a script makes for itself. Git gives its hooks the variables that point a
+// command at a repository (GIT_DIR, GIT_INDEX_FILE, GIT_WORK_TREE …; in a worktree always), so a check run from the
+// pre-push hook would otherwise init, add and commit in the repository being pushed instead of its own.
+import { execFileSync } from 'node:child_process';
+
+// The variables, as this git names them.
+const local = execFileSync('git', ['rev-parse', '--local-env-vars'], { encoding: 'utf8' }).split('\n').filter(Boolean);
+
+export const ownRepoEnv = (env = process.env) => Object.fromEntries(Object.entries(env).filter(([name]) => !local.includes(name)));

package/scripts/icon-packs.mjs

@@ -0,0 +1,151 @@
+// Writes the system's own icon packs (packages/editor/icons/<pack>/: Material Symbols, Phosphor and Lucide; SYSTEM_PACKS in
+// packages/editor/site/iconPacks.mjs) from their sets' packages at the versions in PACK_SOURCES (packages/editor/site/icons.mjs): for each icon the
+// site and the editor draw, by its Phosphor name (usedIcons: the site's in packages/editor/src/icon.tsx, which the
+// content stores; the editor's as it imports them from @phosphor-icons/react and @phosphor-icons/core, found in the
+// code; the app store's), the set's icon its map names (MATERIAL_SYMBOLS, LUCIDE; one the set has none of from
+// Pictogrammers' Material Design Icons, MATERIAL_DESIGN_ICONS), as one <svg> with its viewBox, without a size or a colour
+// of its own: Svg and the theme's Vite plugin (themePlugin in packages/editor/site/theme.mjs) give it those. Phosphor's are its files
+// as they are (so a site with Phosphor's pack draws Phosphor's own icons, unchanged); Lucide's lines in a <g> with
+// Lucide's stroke (`-fill`: filled in). Beside them the pack's manifest (pack.json: name, author, licence, and the icons
+// from Material Design Icons under `includes`) and the licences (LICENSE, LICENSE-material-design-icons), from the
+// packages. The files are committed, so neither an install nor the site's build needs the sets' packages.
+//
+//   npm run icons   (npm run icons)
+//
+// Run it after a new icon on the site or in the editor (check:content says which a pack has none for) or a new version
+// of a set (PACK_SOURCES). It fetches the sets' packages at those versions itself, once, into node_modules/.cache/ (they
+// are not in package.json, and large); Phosphor's is the site's own dependency.
+import { execFileSync } from 'node:child_process';
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
+import { ICON_PACK_FILE, ICON_PACK_LICENSE, SYSTEM_PACKS } from '@morphemecms/cms/site/iconPacks.mjs';
+import { packFolder } from '@morphemecms/cms/site/icons.mjs';
+import { MATERIAL_DESIGN_ICONS, PACK_MAPS, PACK_SOURCES, phosphorFile, usedIcons } from '@morphemecms/cms/site/icons.mjs';
+
+const MDI = 'material-design-icons';
+const version = (spec) => spec.replace(/^.*@/, '');
+
+// A set's package at its version, in a folder of its own, so the site's node_modules stays as package.json has it.
+function fetched(spec) {
+  const cache = `node_modules/.cache/${spec.replace(/[/@]/g, '_')}`;
+  const pkg = `${cache}/node_modules/${spec.replace(/@[^@]*$/, '')}/`;
+  if (!existsSync(`${pkg}package.json`)) {
+    console.log(`Henter ${spec} til ${cache} …`);
+    mkdirSync(cache, { recursive: true });
+    // npm is npm.cmd on Windows, which execFileSync cannot start without a shell: npm's own script with Node, when npm
+    // runs this.
+    const npm = process.env.npm_execpath ? [process.execPath, process.env.npm_execpath] : ['npm'];
+    execFileSync(
+      npm[0],
+      [...npm.slice(1), 'install', '--prefix', cache, '--no-save', '--no-package-lock', '--no-audit', '--no-fund', spec],
+      {
+        stdio: 'inherit',
+      },
+    );
+  }
+  return pkg;
+}
+
+const used = [...usedIcons()].sort();
+const phosphorPkg = 'node_modules/@phosphor-icons/core/';
+const phosphorVersion = JSON.parse(readFileSync(`${phosphorPkg}package.json`, 'utf8')).version;
+if (`@phosphor-icons/core@${phosphorVersion}` !== PACK_SOURCES.phosphor.package) {
+  console.error(
+    `@phosphor-icons/core er ${phosphorVersion}, ikke ${PACK_SOURCES.phosphor.package}: ret versionen i PACK_SOURCES (packages/editor/site/icons.mjs), eller installer den.`,
+  );
+  process.exit(1);
+}
+const pkgs = { phosphor: phosphorPkg };
+for (const id of [...SYSTEM_PACKS, MDI]) pkgs[id] ??= fetched(PACK_SOURCES[id].package);
+
+// An icon's file of a set by the set's own name.
+const sourceFile = {
+  'material-symbols': (icon) => `${pkgs['material-symbols']}outlined/${icon}.svg`,
+  lucide: (icon) => `${pkgs.lucide}icons/${icon.replace(/-fill$/, '')}.svg`,
+  [MDI]: (icon) => `${pkgs[MDI]}svg/${icon}.svg`,
+};
+
+// One <svg> with the file's viewBox and what is in it, without comments, a size or a class of its own.
+function bare(file, wrap = (inner) => inner) {
+  const svg = readFileSync(file, 'utf8').replace(/<!--[\s\S]*?-->/g, '');
+  const viewBox = svg.match(/\bviewBox="([^"]*)"/)?.[1];
+  const inner = svg.match(/^\s*<svg\b[^>]*>([\s\S]*)<\/svg>\s*$/)?.[1];
+  if (!viewBox || !inner) throw new Error(`${file} er ikke ét <svg> med en viewBox.`);
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${wrap(inner)}</svg>\n`;
+}
+// Lucide's lines, in the text's colour as lines (its own <svg> has the stroke); `-fill` filled in.
+const lines = (fill) => (inner) =>
+  `<g fill="${fill ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${inner.replace(/\s+/g, ' ').trim()}</g>`;
+
+// What each pack's files are, by Phosphor's name: its set's, and those from Material Design Icons.
+function sourcesOf(id) {
+  if (id === 'phosphor') return used.map((name) => ({ name, text: () => phosphorFile(name) }));
+  const map = PACK_MAPS[id];
+  const mdi = MATERIAL_DESIGN_ICONS[id] ?? {};
+  return [
+    ...Object.entries(map).map(([name, icon]) => {
+      const file = sourceFile[id](icon);
+      return { name, icon, file, text: () => bare(file, id === 'lucide' ? lines(icon.endsWith('-fill')) : undefined) };
+    }),
+    ...Object.entries(mdi).map(([name, icon]) => {
+      const file = sourceFile[MDI](icon);
+      return { name, icon, file, text: () => bare(file) };
+    }),
+  ];
+}
+
+const problems = [];
+for (const id of SYSTEM_PACKS) {
+  const sources = sourcesOf(id);
+  const names = sources.map((s) => s.name);
+  const missing = used.filter((name) => !names.includes(name));
+  if (missing.length)
+    problems.push(
+      `${PACK_SOURCES[id].name} har intet ikon for ${missing.join(', ')} i packages/editor/site/icons.mjs: skriv det, der passer (et, sættet intet har af, i MATERIAL_DESIGN_ICONS).`,
+    );
+  for (const { name, icon, file } of sources)
+    if (file && !existsSync(file)) problems.push(`${PACK_SOURCES[id].name} har intet "${icon}" (for ${name}).`);
+  if (id === 'phosphor') for (const name of used) if (!phosphorFile(name)) problems.push(`Phosphor har intet "${name}".`);
+}
+if (problems.length) {
+  for (const p of problems) console.error(p);
+  process.exit(1);
+}
+
+for (const id of SYSTEM_PACKS) {
+  const dir = `${packFolder(id)}/`;
+  rmSync(dir, { recursive: true, force: true });
+  mkdirSync(dir, { recursive: true });
+  for (const { name, text } of sourcesOf(id)) writeFileSync(`${dir}${name}.svg`, text());
+  const { name, author, license, url, package: spec } = PACK_SOURCES[id];
+  const mdi = Object.keys(MATERIAL_DESIGN_ICONS[id] ?? {}).sort();
+  const manifest = {
+    name,
+    author,
+    license,
+    url,
+    version: version(spec),
+    source: spec,
+    ...(mdi.length
+      ? {
+          includes: [
+            {
+              name: PACK_SOURCES[MDI].name,
+              author: PACK_SOURCES[MDI].author,
+              license: PACK_SOURCES[MDI].license,
+              url: PACK_SOURCES[MDI].url,
+              version: version(PACK_SOURCES[MDI].package),
+              source: PACK_SOURCES[MDI].package,
+              licenseFile: `${ICON_PACK_LICENSE}-${MDI}`,
+              icons: mdi,
+            },
+          ],
+        }
+      : {}),
+  };
+  writeFileSync(`${dir}${ICON_PACK_FILE}`, `${JSON.stringify(manifest, null, 2)}\n`);
+  writeFileSync(`${dir}${ICON_PACK_LICENSE}`, `${readFileSync(`${pkgs[id]}LICENSE`, 'utf8').trim()}\n`);
+  if (mdi.length) writeFileSync(`${dir}${ICON_PACK_LICENSE}-${MDI}`, `${readFileSync(`${pkgs[MDI]}LICENSE`, 'utf8').trim()}\n`);
+  console.log(
+    `${readdirSync(dir).filter((f) => f.endsWith('.svg')).length} ikoner fra ${spec}${mdi.length ? ` og ${PACK_SOURCES[MDI].package}` : ''} i ${dir}.`,
+  );
+}

package/scripts/link-counts.mjs

@@ -0,0 +1,22 @@
+// After the build: how many pages and posts each keyword links from (packages/editor/site/autolinks.mjs gives its links
+// data-link="auto"), in dist/editor/links.json, for "Søgeord" under "Interne links" in the editor (Keywords.tsx):
+// { words: { "<word in lower case>": { href, pages } } }, counted in the built pages, without the new versions under
+// /ny/ and the editor. A keyword without links is not in it.
+import { readFileSync, readdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { isPreview } from '@morphemecms/cms/site/noindex.mjs';
+
+const ROOT = `${process.cwd()}/`;
+const DIST = join(ROOT, process.argv[2] ?? 'dist');
+const LINK = /<a href="([^"]+)" data-link="auto">([^<]+)<\/a>/g;
+const words = {};
+for (const file of readdirSync(DIST, { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('index.html'))) {
+  const path = `/${file.replace(/index\.html$/, '')}`;
+  if (path.startsWith('/editor/') || isPreview(path)) continue;
+  for (const [, href, text] of readFileSync(join(DIST, file), 'utf8').matchAll(LINK)) {
+    const word = text.toLowerCase();
+    words[word] ??= { href, pages: 0 };
+    words[word].pages++;
+  }
+}
+writeFileSync(join(DIST, 'editor', 'links.json'), `${JSON.stringify({ words })}\n`);

package/scripts/page-colors.mjs

@@ -0,0 +1,42 @@
+// After the build: each page's colours as it was built, in dist/editor/page-colors.json, for "Farver" › "Sider" in the
+// editor (Colors.tsx), while an app changes the pages' colours (hooks/page-colors.ts):
+// { pages: [{ path, light: { bg, … }, dark: { … }, app?, picture? }] }, by address, read from the <style> Base.astro
+// writes them in (data-page-colors, colorsCss in packages/editor/lib/colors.ts: light mode on :root, dark mode on
+// :root[data-theme='dark']), with the app that changed them and the picture they came from (data-app, data-picture;
+// packages/editor/site/pageColors.ts), without them for a page with the site's own. Without the new versions under /ny/ and the editor.
+import { readFileSync, readdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { isPreview } from '@morphemecms/cms/site/noindex.mjs';
+
+const ROOT = `${process.cwd()}/`;
+const DIST = join(ROOT, process.argv[2] ?? 'dist');
+const STYLE = /<style\b([^>]*\bdata-page-colors\b[^>]*)>([^<]*)<\/style>/;
+const LIGHT = /:root\{([^}]*)\}/;
+const DARK = /:root\[data-theme='dark'\]\{([^}]*)\}/;
+
+const attribute = (attributes, name) => {
+  const value = new RegExp(`\\b${name}="([^"]*)"`).exec(attributes)?.[1];
+  return value && value.replaceAll('&amp;', '&').replaceAll('&quot;', '"').replaceAll('&#39;', "'");
+};
+const declarations = (css) =>
+  Object.fromEntries([...(css ?? '').matchAll(/--([a-z][a-z0-9-]*):(#[0-9a-f]{6});/gi)].map(([, name, value]) => [name, value]));
+
+const pages = [];
+for (const file of readdirSync(DIST, { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('index.html'))) {
+  const path = `/${file.replace(/index\.html$/, '')}`;
+  if (path.startsWith('/editor/') || isPreview(path)) continue;
+  const style = STYLE.exec(readFileSync(join(DIST, file), 'utf8'));
+  if (!style) continue;
+  const [, attributes, css] = style;
+  const app = attribute(attributes, 'data-app');
+  const picture = attribute(attributes, 'data-picture');
+  pages.push({
+    path,
+    light: declarations(LIGHT.exec(css)?.[1]),
+    dark: declarations(DARK.exec(css)?.[1]),
+    ...(app && { app }),
+    ...(picture && { picture }),
+  });
+}
+pages.sort((a, b) => a.path.localeCompare(b.path));
+writeFileSync(join(DIST, 'editor', 'page-colors.json'), `${JSON.stringify({ pages })}\n`);

package/scripts/releases.d.mts

@@ -0,0 +1,10 @@
+/** The versions that can follow one: its next patch, minor and major release ("1.2.1": 1.2.2, 1.3.0, 2.0.0). */
+export function nextVersions(version: any): string[];
+/** Whether a folder is not as its entry in the catalog has it (another file, one more or one less). */
+export function changedSince(folder: any, entry: any): any;
+/** What is wrong with the version of an app or a theme of the store against what the catalog has released of it.
+ * `item`: `kind` ('apps' or 'themes'), `id`, `folder`, `version`, `notes` (its release notes by version, one object
+ * for each language it writes them in, by the language: [[null, notes]] for an app) and `where` (the file with its
+ * version). One never released can have any version. */
+export function releaseProblems(catalog: any, item: any): string[];
+export function notesOf(releaseNotes: any, byLanguage: any): any[][];