@morphemecms/cms 0.0.0-stage → 0.1.0

package/site/images.mjs

@@ -0,0 +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 };
+}

package/site/motion.ts

@@ -0,0 +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);

package/site/noindex.d.mts

@@ -0,0 +1,6 @@
+export const NOINDEX: string[];
+export const PREVIEW: "/ny/";
+export function isPreview(path: any): any;
+export function livePath(path: any): any;
+export function previewId(path: any): any;
+export function isNoindex(path: any): any;

package/site/noindex.mjs

@@ -0,0 +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);

package/site/pageColors.ts

@@ -0,0 +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]]));

package/site/popups.ts

@@ -0,0 +1,98 @@
+// The site's promotions: one JSON file per promotion in src/data/popups/, edited in the editor (/editor/,
+// "Indhold" › "Promovering"), of a kind: the pop-up, or one an app adds (Mailchimp's pop-up, the bar at
+// the bottom of a phone's screen). Each is shown on every page (`where`: "all") or on those picked for
+// it (`pages`, their addresses), or on the blog posts with one of its tags and those tags' pages (`where`:
+// "tags", `tags`). A pop-up opens `delay` seconds after the page opens, `scroll` % down it
+// or as the visitor is about to leave it (`trigger`), until the visitor closes it
+// (packages/editor/theme/components/Popup.astro); a kind an app adds without a part in the pop-up shows itself
+// (its slots/), with its own fields in `data`.
+import { getPosts, postPath } from './content';
+import standardPages from '@data/standard-pages.json';
+import { fromContactBar } from '../lib/contactBar';
+
+type PopupData = {
+  enabled?: boolean;
+  /** Its kind: the standard one, or an app's (its id, e.g. "mailchimp": src/apps/<app>/popups/). */
+  type?: string;
+  /** On every page ("all"), on those in `pages` ("some", and without one), or on the blog posts with one
+   * of `tags` and the tags' pages ("tags"). */
+  where?: 'all' | 'some' | 'tags';
+  /** The picture at the top (its address on the site). */
+  image?: string;
+  heading?: string;
+  /** Paragraphs separated by a blank line. */
+  text?: string;
+  pages?: string[];
+  /** The tags (their slugs) whose blog posts and pages it is on. */
+  tags?: string[];
+  /** When it opens: after `delay`, at `scroll`, or as the visitor is about to leave (without one, the time). */
+  trigger?: 'time' | 'scroll' | 'exit';
+  /** Seconds, as the editor's select writes them ("0", "5" …). */
+  delay?: string;
+  /** How far down the page, in % ("25" … "100"). */
+  scroll?: string;
+  /** Where its button goes: the booking sheet, the phone, a page (`href`), a PDF to download (`file`,
+   * /filer/<name>.pdf), or no button. */
+  button?: 'booking' | 'phone' | 'page' | 'file' | 'none';
+  /** The button's own text; empty, the target's or the page's name ("Download PDF" for a PDF). */
+  label?: string;
+  href?: string;
+  file?: string;
+};
+
+export type Popup = {
+  /** The file name, e.g. "rabat-i-december": what the visitor's browser remembers it was closed by. */
+  slug: string;
+  /** "standard", or the id of the app whose kind it is (Popup.astro shows its part under the text). */
+  type: string;
+  image?: string;
+  heading: string;
+  /** One string per paragraph. */
+  text: string[];
+  /** On every page, or only on `pages` and the posts and pages of `tags`. */
+  everywhere: boolean;
+  pages: string[];
+  tags: string[];
+  trigger: 'time' | 'scroll' | 'exit';
+  delay: number;
+  scroll: number;
+  button?: { to: 'booking' | 'phone' | 'page' | 'file'; label?: string; href?: string };
+  /** The file as saved: the fields of an app's kind (the bar's button texts). */
+  data: Record<string, unknown>;
+};
+
+const files = import.meta.glob<PopupData>('@data/popups/*.json', { eager: true, import: 'default' });
+
+export const popups: Popup[] = Object.entries(files)
+  .filter(([, p]) => p.enabled !== false)
+  .sort(([a], [b]) => a.localeCompare(b))
+  // A contact bar saved before it became an action bar, as one (lib/contactBar.ts).
+  .map(([file, p]): [string, PopupData] => [file, fromContactBar(p, standardPages.contact) as PopupData])
+  .map(([file, p]) => ({
+    slug: file.replace(/^.*\/|\.json$/g, ''),
+    type: p.type || 'standard',
+    image: p.image || undefined,
+    heading: p.heading ?? '',
+    text: (p.text ?? '')
+      .split(/\n\s*\n/)
+      .map((t) => t.trim())
+      .filter(Boolean),
+    everywhere: p.where === 'all',
+    pages: p.where === 'tags' ? [] : (p.pages ?? []),
+    tags: p.where === 'tags' ? (p.tags ?? []) : [],
+    trigger: p.trigger === 'scroll' || p.trigger === 'exit' ? p.trigger : 'time',
+    delay: Number(p.delay) || 0,
+    scroll: Number(p.scroll) || 25,
+    button: !p.button || p.button === 'none' ? undefined : { to: p.button, label: p.label, href: p.button === 'file' ? p.file : p.href },
+    data: p as Record<string, unknown>,
+  }));
+
+/** The promotions of a page, by its address (with or without the / at the end): those on every page,
+ * those picked for it, and, on a blog post or a tag's page (/blog/kategori/<tag>/), those of its tags. */
+export async function popupsAt(path: string) {
+  const at = path.endsWith('/') ? path : `${path}/`;
+  const tag = at.match(/^\/blog\/kategori\/([^/]+)\/$/)?.[1];
+  const post = !tag && popups.some((p) => p.tags.length) ? (await getPosts({ unlisted: true })).find((p) => postPath(p) === at) : undefined;
+  const tags = tag ? [tag] : (post?.data.categories ?? []);
+  return popups.filter((p) => p.everywhere || p.pages.includes(at) || p.tags.some((t) => tags.includes(t)));
+}

package/site/schema.ts

@@ -0,0 +1,189 @@
+// Structured data (schema.org JSON-LD) for search engines. Base.astro puts one @graph on every page:
+// the business, the person behind it, the website and the page itself, plus what the page adds (a blog post, prices).
+// What is said of the business and the person beyond the contact details is the site's (@site/schema).
+// Only facts that are on the site; no ratings or reviews.
+import { site } from './site';
+import { schema as facts } from '@site/schema';
+
+/** What a site says of itself in the structured data (@site/schema). */
+export type SiteSchema = {
+  /** The end of the business's and the person's @id (https://<domain>/#<id>). */
+  ids: { business: string; person: string };
+  /** The schema.org type of the business, e.g. LocalBusiness or ProfessionalService. */
+  businessType: string;
+  /** The country of the address (ISO 3166, "DK"). */
+  country: string;
+  /** What the business has besides its contact details (priceRange, currenciesAccepted, paymentAccepted …). */
+  terms: Record<string, unknown>;
+  areaServed: unknown[];
+  /** The @id of the business's offer catalog, as an address on the site ("/priser/#priser"), or null. */
+  offers: string | null;
+  /** The person behind the business (name, title and contact details are the site's), or null. */
+  person: Record<string, unknown> | null;
+  /** The page about the business or the person (an AboutPage), or null. */
+  aboutPath: string | null;
+};
+
+const origin = site.url;
+export const abs = (path: string) => new URL(path, origin).href;
+
+export const ids = {
+  business: `${origin}/#${facts.ids.business}`,
+  person: `${origin}/#${facts.ids.person}`,
+  website: `${origin}/#website`,
+};
+
+// Postcode and town from the address's second line ("1000 København", contact.json).
+const [, postalCode, town] = site.address.city.match(/^(\d{4})\s+(.+)$/) ?? [, undefined, site.address.city];
+
+// The business in full: on the front page and the contact page (Base.astro). Other pages only refer to it by @id
+// (businessRef), so the details live in one place.
+export const business = {
+  '@type': facts.businessType,
+  '@id': ids.business,
+  name: site.name,
+  description: site.description,
+  url: abs('/'),
+  ...(site.portrait ? { image: abs(site.portrait) } : {}),
+  logo: abs('/logo.svg'),
+  telephone: site.phoneIntl,
+  email: site.email,
+  ...(site.cvr ? { taxID: site.cvr } : {}),
+  ...facts.terms,
+  address: {
+    '@type': 'PostalAddress',
+    streetAddress: site.address.street,
+    ...(postalCode ? { postalCode } : {}),
+    addressLocality: town,
+    addressCountry: facts.country,
+  },
+  ...(facts.areaServed.length ? { areaServed: facts.areaServed } : {}),
+  hasMap: site.mapsUrl,
+  ...(facts.offers ? { hasOfferCatalog: { '@id': abs(facts.offers) } } : {}),
+  ...(facts.person ? { founder: { '@id': ids.person }, employee: { '@id': ids.person } } : {}),
+};
+
+export const businessRef = { '@type': facts.businessType, '@id': ids.business, name: site.name, url: abs('/') };
+
+/** The person behind the business, or null. */
+export const person = facts.person && {
+  '@type': 'Person',
+  '@id': ids.person,
+  name: site.name,
+  jobTitle: site.role,
+  ...(site.portrait ? { image: abs(site.portrait) } : {}),
+  ...(typeof facts.person.url === 'string' ? { url: abs(facts.person.url) } : {}),
+  email: site.email,
+  telephone: site.phoneIntl,
+  worksFor: { '@id': ids.business },
+  ...Object.fromEntries(Object.entries(facts.person).filter(([key]) => key !== 'url')),
+};
+
+export const website = {
+  '@type': 'WebSite',
+  '@id': ids.website,
+  name: site.name,
+  url: abs('/'),
+  inLanguage: site.locale,
+  publisher: { '@id': ids.business },
+};
+
+export type Crumb = { name: string; href: string };
+
+/** A question with its answer as HTML (a "Spørgsmål og svar" block on the page). */
+export type Question = { question: string; answer: string };
+
+/** The page itself, with breadcrumbs when the page is not the front page, and as an FAQPage too when it
+ * has questions and answers. */
+export function webPage({
+  path,
+  title,
+  name,
+  description,
+  image,
+  crumbs = [],
+  questions = [],
+}: {
+  path: string;
+  title: string;
+  /** Short name of the page in the breadcrumbs (its heading). */
+  name: string;
+  description?: string;
+  image?: string;
+  crumbs?: Crumb[];
+  /** The questions in the page's "Spørgsmål og svar" blocks, all of them in one FAQPage. */
+  questions?: Question[];
+}) {
+  const url = abs(path);
+  const kind = path === facts.aboutPath ? 'AboutPage' : path === site.contactPath ? 'ContactPage' : 'WebPage';
+  const type = questions.length ? [kind, 'FAQPage'] : kind;
+  const trail = path === '/' ? [] : [{ name: 'Forside', href: '/' }, ...crumbs, { name, href: path }];
+  return [
+    {
+      '@type': type,
+      '@id': `${url}#webside`,
+      url,
+      name: title,
+      description,
+      inLanguage: site.locale,
+      isPartOf: { '@id': ids.website },
+      about: { '@id': ids.business },
+      ...(image ? { primaryImageOfPage: abs(image) } : {}),
+      ...(trail.length ? { breadcrumb: { '@id': `${url}#broedkrummer` } } : {}),
+      ...(questions.length
+        ? {
+            mainEntity: questions.map((q) => ({
+              '@type': 'Question',
+              name: q.question,
+              acceptedAnswer: { '@type': 'Answer', text: q.answer },
+            })),
+          }
+        : {}),
+    },
+    ...(trail.length
+      ? [
+          {
+            '@type': 'BreadcrumbList',
+            '@id': `${url}#broedkrummer`,
+            itemListElement: trail.map((c, i) => ({ '@type': 'ListItem', position: i + 1, name: c.name, item: abs(c.href) })),
+          },
+        ]
+      : []),
+  ];
+}
+
+/** A blog post (BlogPosting is a kind of Article). */
+export function blogPosting({
+  path,
+  title,
+  description,
+  date,
+  updated,
+  image,
+  categories,
+}: {
+  path: string;
+  title: string;
+  description?: string;
+  date: Date;
+  updated?: Date;
+  image?: string;
+  categories: string[];
+}) {
+  const url = abs(path);
+  return {
+    '@type': 'BlogPosting',
+    '@id': `${url}#indlaeg`,
+    headline: title,
+    description,
+    datePublished: date.toISOString(),
+    dateModified: (updated ?? date).toISOString(),
+    url,
+    mainEntityOfPage: { '@id': `${url}#webside` },
+    ...(image ? { image: abs(image) } : {}),
+    author: { '@id': facts.person ? ids.person : ids.business },
+    publisher: { '@id': ids.business },
+    articleSection: categories,
+    inLanguage: site.locale,
+  };
+}

package/site/sections.ts

@@ -0,0 +1,3 @@
+// The space above a section of the blog page and the 404 page (packages/editor/site/standardPages.ts): less above the first, right
+// under the page's header.
+export const space = (i: number) => (i === 0 ? 'mt-10 md:mt-14' : 'mt-16 md:mt-24');

package/site/seo.ts

@@ -0,0 +1,28 @@
+// Titles and meta descriptions for the pages that are built in code (packages/editor/pages/*.astro): the tags' pages (the front
+// page and the blog page are pages, with theirs in their front matter, packages/editor/site/standardPages.ts). Each value lives
+// with the rest of the tag's texts (categories/*.json), so the owner finds them at the bottom of the tag in the editor.
+// Pages and blog posts in src/content/ have theirs in their own frontmatter (seoTitle, seoDescription, heading).
+// - title: the whole <title> (also og:title). At most about 60 characters.
+// - description: the meta description, hand-written, 140-155 characters, ending with a call to action.
+// - image: the picture shown when the page is shared (og:image); empty: the site's portrait.
+// - canonical, noindex: as a page's ("Canonical URL", "Skjul for søgemaskiner").
+// Pages missing here, or with empty fields, fall back to their own title and description (Base.astro).
+import { categories } from './categories';
+
+export type Seo = { title?: string; description?: string; image?: string; canonical?: string; noindex?: boolean };
+
+type Texts = { seoTitle?: string; seoDescription?: string; shareImage?: string; canonical?: string; noindex?: boolean };
+const pages: [string, Texts][] = categories.map((c): [string, Texts] => [`/blog/kategori/${c.slug}/`, c]);
+
+export const seo: Record<string, Seo> = Object.fromEntries(
+  pages.map(([path, t]) => [
+    path,
+    {
+      title: t.seoTitle || undefined,
+      description: t.seoDescription || undefined,
+      image: t.shareImage || undefined,
+      canonical: t.canonical || undefined,
+      noindex: t.noindex === true || undefined,
+    },
+  ]),
+);