@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/site/images.mjs

@@ -1,157 +1,157 @@
-// Responsive image helpers shared by Img.astro and the Markdown rehype plugin.
-// The manifest is generated by packages/editor/scripts/responsive-images.mjs before every build.
-import fs from 'node:fs';
-import path from 'node:path';
-import { cropStyle, splitPicture } from '@morphemecms/cms/lib/crop.mjs';
-import { config } from './siteConfig.mjs';
-
-let manifest;
-function load() {
-  if (!manifest) {
-    const file = path.resolve('src/data/image-manifest.json');
-    manifest = fs.existsSync(file) ? JSON.parse(fs.readFileSync(file, 'utf8')) : {};
-  }
-  return manifest;
-}
-
-/** srcset, width and height for an image under /images/uploads/, or {} if unknown. */
-export function responsive(src) {
-  const info = load()[src];
-  if (!info) return {};
-  const srcset = [...info.variants.map((v) => `${v.src} ${v.w}w`), `${src} ${info.width}w`].join(', ');
-  return { srcset, width: info.width, height: info.height };
-}
-
-// The sizes of a picture shown `scale` times wider than its box (cut to a format, crop.mjs), e.g.
-// "(min-width: 800px) 720px, calc(100vw - 40px)" twice as wide.
-const scaled = (sizes, scale) =>
-  scale === 1
-    ? sizes
-    : sizes
-        .split(',')
-        .map((part) =>
-          part.trim().replace(/^(\(.*\)\s+)?(.+)$/, (_, when = '', size) => `${when}calc(${size} * ${Math.round(scale * 1000) / 1000})`),
-        )
-        .join(', ');
-
-/** Rehype plugin: adds srcset, sizes, width/height and lazy loading to content images, cuts a picture to
- * its format (crop.mjs): in a box of that format, or itself of it without a crop, and draws a decorative
- * one with alt="". */
-export function rehypeResponsiveImages({ sizes }) {
-  return (tree, file) => {
-    // A blog post's layout shows its featured image above the text unless the text has the same picture
-    // (heroImage). Then that one is the first image on screen, and every image in the text can wait.
-    const featured = file?.data?.astro?.frontmatter?.image;
-    const sources = [];
-    const collect = (node) => {
-      if (node.type === 'element' && node.tagName === 'img' && typeof node.properties?.src === 'string') sources.push(node.properties.src);
-      node.children?.forEach(collect);
-    };
-    collect(tree);
-    let first = !(featured && !sources.some((src) => samePicture(src, featured)));
-    const visit = (node, parent, index) => {
-      if (node.type === 'element' && node.tagName === 'img' && typeof node.properties?.src === 'string') {
-        const { src, format, crop, decorative } = splitPicture(node.properties.src);
-        const cut = format ? cropStyle(format, crop) : null;
-        node.properties.src = src;
-        // A decorative picture (crop.mjs): alt="" and nothing else for screen readers.
-        if (decorative) {
-          node.properties.alt = '';
-          delete node.properties.title;
-        }
-        const { srcset, width, height } = responsive(src);
-        if (srcset) {
-          node.properties.srcset = srcset;
-          node.properties.sizes = scaled(sizes, cut?.scale ?? 1);
-          node.properties.width = width;
-          node.properties.height = height;
-        }
-        if (first) {
-          // Without a featured image the first image in the text is often the largest element on screen: load it now.
-          node.properties.loading = 'eager';
-          node.properties.fetchpriority = 'high';
-          first = false;
-        } else node.properties.loading ??= 'lazy';
-        node.properties.decoding ??= 'async';
-        if (cut) node.properties.style = cut.img;
-        if (cut?.box && parent)
-          parent.children[index] = {
-            type: 'element',
-            tagName: 'span',
-            properties: { className: ['picture-crop'], style: cut.box },
-            children: [node],
-          };
-      }
-      node.children?.forEach((child, i) => visit(child, node, i));
-    };
-    visit(tree);
-  };
-}
-
-// WordPress keeps several versions of one picture: "cropped-x-scaled-1", "x-edited", "x-e1640002824221".
-// The picture's own name is what is left when those additions are removed.
-const pictureName = (src) =>
-  src
-    .split('#')[0]
-    .split('/')
-    .pop()
-    .replace(/\.\w+$/, '')
-    .replace(/^cropped-/, '')
-    .replace(/([-_](edited|scaled|e\d{9,}|\d))+$/g, '')
-    .replace(/([-_](edited|scaled|e\d{9,}|\d))+$/g, '');
-// Crops saved under a new name, so the name does not show they are the same picture (the site's config).
-const sameAs = config.samePictures;
-
-/** True when two image paths show the same picture. */
-export function samePicture(a, b) {
-  const [x, y] = [a, b].map((s) => sameAs[pictureName(s)] ?? pictureName(s));
-  return x === y;
-}
-
-const IMAGE = /!\[[^\]]*\]\(([^)\s]+)\)/g;
-
-// The pictures in the text itself, not those in the text of a block in it (a "Banner"'s, on its line of HTML).
-const picturesIn = (body) => [...body.replace(/^<div data-block=.*$/gm, '').matchAll(IMAGE)].map((m) => m[1]);
-
-/** The featured image, unless the text already shows the same picture (then undefined). */
-export function heroImage(image, body = '') {
-  if (!image) return undefined;
-  return picturesIn(body).some((src) => samePicture(src, image)) ? undefined : image;
-}
-
-/** The first picture in the text, for a post without a featured image (og:image). */
-export const firstImage = (body = '') => picturesIn(body)[0];
-
-// A picture's address in the text or in a block's data (its props are HTML-escaped JSON, with Markdown in
-// them): a photo under /images/uploads/, without its format, crop and mark.
-const PHOTO = /\/images\/uploads\/[^\s"'()\\#&;]+\.(?:webp|jpe?g|png|avif)/gi;
-// Smaller than this on both sides, a picture is an icon or a logo, not a picture of the page.
-const SMALL = 300;
-
-/** The page's real pictures, in the order they are on it: in its text and in its blocks (a "Hero"'s, a
- * "Kort"'s …); photos only (no SVG or GIF), and none smaller than an icon. Each picture once. */
-export function picturesOf(body = '') {
-  const text = body.replace(/&quot;/g, '"').replace(/&amp;/g, '&');
-  const found = [...new Set(text.match(PHOTO) ?? [])];
-  return found.filter((src) => {
-    const { width, height } = load()[src] ?? {};
-    return !(width && height && Math.max(width, height) < SMALL);
-  });
-}
-
-/** The first picture in a page's text, its picture when it is shared (og:image, Base.astro): its address without its
- * format, crop and the mark of a decorative one, and what it shows (none for a decorative one). */
-export function firstPicture(body = '') {
-  const m = body.replace(/^<div data-block=.*$/gm, '').match(/!\[([^\]]*)\]\(([^)\s]+)\)/);
-  if (!m) return undefined;
-  const { src, decorative } = splitPicture(m[2]);
-  return { src, alt: (!decorative && m[1]) || undefined };
-}
-
-/** The picture shown when a page is shared (og:image): its 1200 × 630 JPEG from
- * packages/editor/scripts/responsive-images.mjs, else the picture itself (without a format and crop) and no size. */
-export function shareImage(address) {
-  const { src } = splitPicture(address);
-  const share = load()[src]?.share;
-  return share ? { src: share, width: 1200, height: 630, type: 'image/jpeg' } : { src };
-}
+// Responsive image helpers shared by Img.astro and the Markdown rehype plugin.
+// The manifest is generated by packages/editor/scripts/responsive-images.mjs before every build.
+import fs from 'node:fs';
+import path from 'node:path';
+import { cropStyle, splitPicture } from '@morphemecms/cms/lib/crop.mjs';
+import { config } from './siteConfig.mjs';
+
+let manifest;
+function load() {
+  if (!manifest) {
+    const file = path.resolve('src/data/image-manifest.json');
+    manifest = fs.existsSync(file) ? JSON.parse(fs.readFileSync(file, 'utf8')) : {};
+  }
+  return manifest;
+}
+
+/** srcset, width and height for an image under /images/uploads/, or {} if unknown. */
+export function responsive(src) {
+  const info = load()[src];
+  if (!info) return {};
+  const srcset = [...info.variants.map((v) => `${v.src} ${v.w}w`), `${src} ${info.width}w`].join(', ');
+  return { srcset, width: info.width, height: info.height };
+}
+
+// The sizes of a picture shown `scale` times wider than its box (cut to a format, crop.mjs), e.g.
+// "(min-width: 800px) 720px, calc(100vw - 40px)" twice as wide.
+const scaled = (sizes, scale) =>
+  scale === 1
+    ? sizes
+    : sizes
+        .split(',')
+        .map((part) =>
+          part.trim().replace(/^(\(.*\)\s+)?(.+)$/, (_, when = '', size) => `${when}calc(${size} * ${Math.round(scale * 1000) / 1000})`),
+        )
+        .join(', ');
+
+/** Rehype plugin: adds srcset, sizes, width/height and lazy loading to content images, cuts a picture to
+ * its format (crop.mjs): in a box of that format, or itself of it without a crop, and draws a decorative
+ * one with alt="". */
+export function rehypeResponsiveImages({ sizes }) {
+  return (tree, file) => {
+    // A blog post's layout shows its featured image above the text unless the text has the same picture
+    // (heroImage). Then that one is the first image on screen, and every image in the text can wait.
+    const featured = file?.data?.astro?.frontmatter?.image;
+    const sources = [];
+    const collect = (node) => {
+      if (node.type === 'element' && node.tagName === 'img' && typeof node.properties?.src === 'string') sources.push(node.properties.src);
+      node.children?.forEach(collect);
+    };
+    collect(tree);
+    let first = !(featured && !sources.some((src) => samePicture(src, featured)));
+    const visit = (node, parent, index) => {
+      if (node.type === 'element' && node.tagName === 'img' && typeof node.properties?.src === 'string') {
+        const { src, format, crop, decorative } = splitPicture(node.properties.src);
+        const cut = format ? cropStyle(format, crop) : null;
+        node.properties.src = src;
+        // A decorative picture (crop.mjs): alt="" and nothing else for screen readers.
+        if (decorative) {
+          node.properties.alt = '';
+          delete node.properties.title;
+        }
+        const { srcset, width, height } = responsive(src);
+        if (srcset) {
+          node.properties.srcset = srcset;
+          node.properties.sizes = scaled(sizes, cut?.scale ?? 1);
+          node.properties.width = width;
+          node.properties.height = height;
+        }
+        if (first) {
+          // Without a featured image the first image in the text is often the largest element on screen: load it now.
+          node.properties.loading = 'eager';
+          node.properties.fetchpriority = 'high';
+          first = false;
+        } else node.properties.loading ??= 'lazy';
+        node.properties.decoding ??= 'async';
+        if (cut) node.properties.style = cut.img;
+        if (cut?.box && parent)
+          parent.children[index] = {
+            type: 'element',
+            tagName: 'span',
+            properties: { className: ['picture-crop'], style: cut.box },
+            children: [node],
+          };
+      }
+      node.children?.forEach((child, i) => visit(child, node, i));
+    };
+    visit(tree);
+  };
+}
+
+// WordPress keeps several versions of one picture: "cropped-x-scaled-1", "x-edited", "x-e1640002824221".
+// The picture's own name is what is left when those additions are removed.
+const pictureName = (src) =>
+  src
+    .split('#')[0]
+    .split('/')
+    .pop()
+    .replace(/\.\w+$/, '')
+    .replace(/^cropped-/, '')
+    .replace(/([-_](edited|scaled|e\d{9,}|\d))+$/g, '')
+    .replace(/([-_](edited|scaled|e\d{9,}|\d))+$/g, '');
+// Crops saved under a new name, so the name does not show they are the same picture (the site's config).
+const sameAs = config.samePictures;
+
+/** True when two image paths show the same picture. */
+export function samePicture(a, b) {
+  const [x, y] = [a, b].map((s) => sameAs[pictureName(s)] ?? pictureName(s));
+  return x === y;
+}
+
+const IMAGE = /!\[[^\]]*\]\(([^)\s]+)\)/g;
+
+// The pictures in the text itself, not those in the text of a block in it (a "Banner"'s, on its line of HTML).
+const picturesIn = (body) => [...body.replace(/^<div data-block=.*$/gm, '').matchAll(IMAGE)].map((m) => m[1]);
+
+/** The featured image, unless the text already shows the same picture (then undefined). */
+export function heroImage(image, body = '') {
+  if (!image) return undefined;
+  return picturesIn(body).some((src) => samePicture(src, image)) ? undefined : image;
+}
+
+/** The first picture in the text, for a post without a featured image (og:image). */
+export const firstImage = (body = '') => picturesIn(body)[0];
+
+// A picture's address in the text or in a block's data (its props are HTML-escaped JSON, with Markdown in
+// them): a photo under /images/uploads/, without its format, crop and mark.
+const PHOTO = /\/images\/uploads\/[^\s"'()\\#&;]+\.(?:webp|jpe?g|png|avif)/gi;
+// Smaller than this on both sides, a picture is an icon or a logo, not a picture of the page.
+const SMALL = 300;
+
+/** The page's real pictures, in the order they are on it: in its text and in its blocks (a "Hero"'s, a
+ * "Kort"'s …); photos only (no SVG or GIF), and none smaller than an icon. Each picture once. */
+export function picturesOf(body = '') {
+  const text = body.replace(/&quot;/g, '"').replace(/&amp;/g, '&');
+  const found = [...new Set(text.match(PHOTO) ?? [])];
+  return found.filter((src) => {
+    const { width, height } = load()[src] ?? {};
+    return !(width && height && Math.max(width, height) < SMALL);
+  });
+}
+
+/** The first picture in a page's text, its picture when it is shared (og:image, Base.astro): its address without its
+ * format, crop and the mark of a decorative one, and what it shows (none for a decorative one). */
+export function firstPicture(body = '') {
+  const m = body.replace(/^<div data-block=.*$/gm, '').match(/!\[([^\]]*)\]\(([^)\s]+)\)/);
+  if (!m) return undefined;
+  const { src, decorative } = splitPicture(m[2]);
+  return { src, alt: (!decorative && m[1]) || undefined };
+}
+
+/** The picture shown when a page is shared (og:image): its 1200 × 630 JPEG from
+ * packages/editor/scripts/responsive-images.mjs, else the picture itself (without a format and crop) and no size. */
+export function shareImage(address) {
+  const { src } = splitPicture(address);
+  const share = load()[src]?.share;
+  return share ? { src: share, width: 1200, height: 630, type: 'image/jpeg' } : { src };
+}

package/site/motion.ts

@@ -1,13 +1,13 @@
-// The motion scheme the site and the editor are built with (packages/editor/lib/motion.ts: schemeInUse): the one chosen
-// under "Udseende" › "Bevægelse" (src/data/motion.json, `{ "scheme": "<scheme>" }`), else the theme in use's ("motion" in
-// its theme.json), else the standard theme's. Base.astro and the editor's page write it into the <head> (motionCss, and
-// data-motion-scheme on <html>); the editor shows a new choice at once (applyMotion in packages/editor/src/theme.ts).
-import { schemeInUse } from '../lib/motion';
-import theme from '@theme/theme.json';
-import standard from '@saturn/theme.json';
-
-type Manifest = { motion?: unknown };
-const chosen = import.meta.glob<{ scheme?: unknown }>('/src/data/motion.json', { eager: true, import: 'default' })['/src/data/motion.json'];
-
-/** The scheme the site moves by. */
-export const motionScheme = schemeInUse(chosen?.scheme, (theme as Manifest).motion, (standard as Manifest).motion);
+// The motion scheme the site and the editor are built with (packages/editor/lib/motion.ts: schemeInUse): the one chosen
+// under "Udseende" › "Bevægelse" (src/data/motion.json, `{ "scheme": "<scheme>" }`), else the theme in use's ("motion" in
+// its theme.json), else the standard theme's. Base.astro and the editor's page write it into the <head> (motionCss, and
+// data-motion-scheme on <html>); the editor shows a new choice at once (applyMotion in packages/editor/src/theme.ts).
+import { schemeInUse } from '../lib/motion';
+import theme from '@theme/theme.json';
+import standard from '@saturn/theme.json';
+
+type Manifest = { motion?: unknown };
+const chosen = import.meta.glob<{ scheme?: unknown }>('/src/data/motion.json', { eager: true, import: 'default' })['/src/data/motion.json'];
+
+/** The scheme the site moves by. */
+export const motionScheme = schemeInUse(chosen?.scheme, (theme as Manifest).motion, (standard as Manifest).motion);

package/site/noindex.mjs

@@ -1,21 +1,21 @@
-// Pages that are not for search engines: the pages a booking or an order ends on (`booking.thanks` in the site's
-// config; someone arriving there from Google would also count as a booking in Google Ads) and the editor. Left out
-// of the sitemap (packages/editor/astro.mjs) and marked noindex (Base.astro).
-import { config } from './siteConfig.mjs';
-
-export const NOINDEX = [...config.booking.thanks, '/editor/'];
-
-// New versions of the service pages, for the owner to compare with the current ones before they replace
-// them: /ny/<the current page's address>, e.g. /ny/ydelser/raadgivning/. The overview is
-// /ny/ itself (packages/editor/theme/templates/New.astro). Not for search engines either, and not in the lists of pages.
-export const PREVIEW = '/ny/';
-export const isPreview = (path) => path.startsWith(PREVIEW) && path !== PREVIEW;
-/** The address of the current page a new version is for: /ny/vrede/ -> /vrede/. */
-export const livePath = (path) => (isPreview(path) ? path.slice(PREVIEW.length - 1) : path);
-/** A new version's place on the overview (/ny/#vrede), where what the owner should look at stands. */
-export const previewId = (path) =>
-  livePath(path)
-    .replace(/^\/|\/$/g, '')
-    .replace(/\//g, '-');
-
-export const isNoindex = (path) => NOINDEX.includes(path) || path.startsWith(PREVIEW);
+// Pages that are not for search engines: the pages a booking or an order ends on (`booking.thanks` in the site's
+// config; someone arriving there from Google would also count as a booking in Google Ads) and the editor. Left out
+// of the sitemap (packages/editor/astro.mjs) and marked noindex (Base.astro).
+import { config } from './siteConfig.mjs';
+
+export const NOINDEX = [...config.booking.thanks, '/editor/'];
+
+// New versions of the service pages, for the owner to compare with the current ones before they replace
+// them: /ny/<the current page's address>, e.g. /ny/ydelser/raadgivning/. The overview is
+// /ny/ itself (packages/editor/theme/templates/New.astro). Not for search engines either, and not in the lists of pages.
+export const PREVIEW = '/ny/';
+export const isPreview = (path) => path.startsWith(PREVIEW) && path !== PREVIEW;
+/** The address of the current page a new version is for: /ny/vrede/ -> /vrede/. */
+export const livePath = (path) => (isPreview(path) ? path.slice(PREVIEW.length - 1) : path);
+/** A new version's place on the overview (/ny/#vrede), where what the owner should look at stands. */
+export const previewId = (path) =>
+  livePath(path)
+    .replace(/^\/|\/$/g, '')
+    .replace(/\//g, '-');
+
+export const isNoindex = (path) => NOINDEX.includes(path) || path.startsWith(PREVIEW);

package/site/pageColors.ts

@@ -1,110 +1,110 @@
-// The colours of one page, for the theme (Base.astro, which knows no app by name): the site's own (src/data/colors.json,
-// "Farver"), changed by the apps installed that change a page's colours (hooks/page-colors.ts, PageColorsHook in
-// @morphemecms/cms/lib/hooks.ts), in the order of their ids, each given the colours the one before left. An app gets the
-// page's address, its pictures, its own settings, the colours' roles, and the pixels of a picture read small, so it
-// never reads the site's files itself; what it gives is kept only when it is the site's colours, by their names, and
-// readable in both modes (colorPairs); else, and when it fails, the page keeps the colours it had, and the build says so.
-// Made while the site is built, so the page needs no script. With them, the app whose colours the page has and the
-// picture they came from (the last it read before it gave them), which the page keeps beside its colours (Base.astro)
-// for "Farver" › "Sider" in the editor (packages/editor/scripts/page-colors.mjs).
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import sharp from 'sharp';
-import colors from '@data/colors.json';
-import { colorFields, colorPairs, colorRoles } from '@site/colors';
-import { installed, settingsOf } from './apps';
-import { appIdOf, type AppDefinition } from '@morphemecms/cms/src/apps';
-import { colorProblems, lowContrast, MODES, type Colors } from '@morphemecms/cms/lib/colors';
-import { completeColors } from '@morphemecms/cms/lib/dynamic-colors';
-import type { PageColorsHook } from '@morphemecms/cms/lib/hooks';
-import { splitPicture } from '@morphemecms/cms/lib/crop.mjs';
-
-// With those a file written before them does not have made (completeColors).
-const site = completeColors(colors as Colors, colorRoles);
-const PUBLIC = path.resolve('public');
-const names = colorFields.map((f) => f.name);
-// Small is enough to find a picture's colours, and quick.
-const SIZE = 128;
-
-// Only the apps' index.ts (for their settings) and their hooks for a page's colours, of the apps installed.
-const appFiles = import.meta.glob<{ default: AppDefinition }>('/src/apps/*/index.ts', { eager: true });
-const hookFiles = import.meta.glob<{ default: PageColorsHook }>('/src/apps/*/hooks/page-colors.ts', { eager: true });
-const hooks = Object.entries(hookFiles)
-  .map(([file, { default: hook }]) => ({ id: appIdOf(file), hook }))
-  .filter(({ id }) => installed.includes(id))
-  .sort((a, b) => a.id.localeCompare(b.id))
-  .map(({ id, hook }) => ({
-    id,
-    hook,
-    settings: settingsOf(id, Object.entries(appFiles).find(([f]) => appIdOf(f) === id)?.[1].default.settings?.values),
-  }));
-
-// A picture's pixels, by its address; the same picture is read once in a build.
-const read = new Map<string, Promise<Uint8ClampedArray | undefined>>();
-
-/** A picture on the site made small, as RGBA bytes; undefined for one outside public/ or one that cannot be read. */
-function pixels(address: string): Promise<Uint8ClampedArray | undefined> {
-  if (!read.has(address))
-    read.set(
-      address,
-      (async () => {
-        const file = path.join(PUBLIC, decodeURI(splitPicture(address).src));
-        if (!file.startsWith(PUBLIC + path.sep)) return undefined;
-        try {
-          const { data } = await sharp(await fs.readFile(file))
-            .resize(SIZE, SIZE, { fit: 'inside' })
-            .ensureAlpha()
-            .raw()
-            .toBuffer({ resolveWithObject: true });
-          return new Uint8ClampedArray(data.buffer, data.byteOffset, data.length);
-        } catch {
-          return undefined;
-        }
-      })(),
-    );
-  return read.get(address)!;
-}
-
-const readable = (c: Colors) => MODES.every((mode) => !lowContrast(c[mode], colorPairs).length);
-
-// An app's colours that cannot be used are said once a build, by the app.
-const said = new Set<string>();
-const say = (id: string, why: string) => {
-  if (!said.has(id)) console.warn(`[${id}] hooks/page-colors.ts: ${why}; siderne beholder deres farver.`);
-  said.add(id);
-};
-
-/** The page's colours, and where they came from when an app changed them: the app (its id) and the picture they were
- * made from (the last it read before it gave them). */
-export type PageColors = { colors: Colors; app?: string; picture?: string };
-
-/** The page's colours: the site's, as the apps installed change them for the page at `path` with `pictures` (their
- * addresses on the site, in the order they are on it, then the one it is shared with). */
-export async function pageColors(page: { path: string; pictures: (string | undefined)[] }): Promise<PageColors> {
-  const pictures = page.pictures.filter((p): p is string => !!p);
-  let found: PageColors = { colors: site };
-  for (const { id, hook, settings } of hooks) {
-    let made: Colors | undefined;
-    // The last picture the app read, the one its colours are from.
-    let last: string | undefined;
-    const reading = (picture: string) => {
-      last = picture;
-      return pixels(picture);
-    };
-    try {
-      made = await hook({ path: page.path, colors: found.colors, pictures, settings, roles: colorRoles, pixels: reading, readable });
-    } catch (e) {
-      say(id, `fejl (${(e as Error).message})`);
-      continue;
-    }
-    if (!made) continue;
-    // Only the site's colours, by their names, and readable; nothing else of what it gave.
-    const kept = { light: made.light, dark: made.dark };
-    if (colorProblems(kept, names).length) say(id, 'farverne er ikke sitets');
-    else if (!readable(kept)) say(id, 'farverne er svære at læse');
-    else found = { colors: { light: pick(kept.light), dark: pick(kept.dark) }, app: id, picture: last };
-  }
-  return found;
-}
-
-const pick = (set: Record<string, string>) => Object.fromEntries(names.map((n) => [n, set[n]]));
+// The colours of one page, for the theme (Base.astro, which knows no app by name): the site's own (src/data/colors.json,
+// "Farver"), changed by the apps installed that change a page's colours (hooks/page-colors.ts, PageColorsHook in
+// @morphemecms/cms/lib/hooks.ts), in the order of their ids, each given the colours the one before left. An app gets the
+// page's address, its pictures, its own settings, the colours' roles, and the pixels of a picture read small, so it
+// never reads the site's files itself; what it gives is kept only when it is the site's colours, by their names, and
+// readable in both modes (colorPairs); else, and when it fails, the page keeps the colours it had, and the build says so.
+// Made while the site is built, so the page needs no script. With them, the app whose colours the page has and the
+// picture they came from (the last it read before it gave them), which the page keeps beside its colours (Base.astro)
+// for "Farver" › "Sider" in the editor (packages/editor/scripts/page-colors.mjs).
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import sharp from 'sharp';
+import colors from '@data/colors.json';
+import { colorFields, colorPairs, colorRoles } from '@site/colors';
+import { installed, settingsOf } from './apps';
+import { appIdOf, type AppDefinition } from '@morphemecms/cms/src/apps';
+import { colorProblems, lowContrast, MODES, type Colors } from '@morphemecms/cms/lib/colors';
+import { completeColors } from '@morphemecms/cms/lib/dynamic-colors';
+import type { PageColorsHook } from '@morphemecms/cms/lib/hooks';
+import { splitPicture } from '@morphemecms/cms/lib/crop.mjs';
+
+// With those a file written before them does not have made (completeColors).
+const site = completeColors(colors as Colors, colorRoles);
+const PUBLIC = path.resolve('public');
+const names = colorFields.map((f) => f.name);
+// Small is enough to find a picture's colours, and quick.
+const SIZE = 128;
+
+// Only the apps' index.ts (for their settings) and their hooks for a page's colours, of the apps installed.
+const appFiles = import.meta.glob<{ default: AppDefinition }>('/src/apps/*/index.ts', { eager: true });
+const hookFiles = import.meta.glob<{ default: PageColorsHook }>('/src/apps/*/hooks/page-colors.ts', { eager: true });
+const hooks = Object.entries(hookFiles)
+  .map(([file, { default: hook }]) => ({ id: appIdOf(file), hook }))
+  .filter(({ id }) => installed.includes(id))
+  .sort((a, b) => a.id.localeCompare(b.id))
+  .map(({ id, hook }) => ({
+    id,
+    hook,
+    settings: settingsOf(id, Object.entries(appFiles).find(([f]) => appIdOf(f) === id)?.[1].default.settings?.values),
+  }));
+
+// A picture's pixels, by its address; the same picture is read once in a build.
+const read = new Map<string, Promise<Uint8ClampedArray | undefined>>();
+
+/** A picture on the site made small, as RGBA bytes; undefined for one outside public/ or one that cannot be read. */
+function pixels(address: string): Promise<Uint8ClampedArray | undefined> {
+  if (!read.has(address))
+    read.set(
+      address,
+      (async () => {
+        const file = path.join(PUBLIC, decodeURI(splitPicture(address).src));
+        if (!file.startsWith(PUBLIC + path.sep)) return undefined;
+        try {
+          const { data } = await sharp(await fs.readFile(file))
+            .resize(SIZE, SIZE, { fit: 'inside' })
+            .ensureAlpha()
+            .raw()
+            .toBuffer({ resolveWithObject: true });
+          return new Uint8ClampedArray(data.buffer, data.byteOffset, data.length);
+        } catch {
+          return undefined;
+        }
+      })(),
+    );
+  return read.get(address)!;
+}
+
+const readable = (c: Colors) => MODES.every((mode) => !lowContrast(c[mode], colorPairs).length);
+
+// An app's colours that cannot be used are said once a build, by the app.
+const said = new Set<string>();
+const say = (id: string, why: string) => {
+  if (!said.has(id)) console.warn(`[${id}] hooks/page-colors.ts: ${why}; siderne beholder deres farver.`);
+  said.add(id);
+};
+
+/** The page's colours, and where they came from when an app changed them: the app (its id) and the picture they were
+ * made from (the last it read before it gave them). */
+export type PageColors = { colors: Colors; app?: string; picture?: string };
+
+/** The page's colours: the site's, as the apps installed change them for the page at `path` with `pictures` (their
+ * addresses on the site, in the order they are on it, then the one it is shared with). */
+export async function pageColors(page: { path: string; pictures: (string | undefined)[] }): Promise<PageColors> {
+  const pictures = page.pictures.filter((p): p is string => !!p);
+  let found: PageColors = { colors: site };
+  for (const { id, hook, settings } of hooks) {
+    let made: Colors | undefined;
+    // The last picture the app read, the one its colours are from.
+    let last: string | undefined;
+    const reading = (picture: string) => {
+      last = picture;
+      return pixels(picture);
+    };
+    try {
+      made = await hook({ path: page.path, colors: found.colors, pictures, settings, roles: colorRoles, pixels: reading, readable });
+    } catch (e) {
+      say(id, `fejl (${(e as Error).message})`);
+      continue;
+    }
+    if (!made) continue;
+    // Only the site's colours, by their names, and readable; nothing else of what it gave.
+    const kept = { light: made.light, dark: made.dark };
+    if (colorProblems(kept, names).length) say(id, 'farverne er ikke sitets');
+    else if (!readable(kept)) say(id, 'farverne er svære at læse');
+    else found = { colors: { light: pick(kept.light), dark: pick(kept.dark) }, app: id, picture: last };
+  }
+  return found;
+}
+
+const pick = (set: Record<string, string>) => Object.fromEntries(names.map((n) => [n, set[n]]));