@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/sections.mjs

@@ -0,0 +1,303 @@
+// The sections of a fixed page (packages/editor/site/sections.ts) as one text in the editor (Milkdown, like the
+// pages), and back. A section of text ("text": a heading and Markdown) is written as text: its heading
+// as an "Overskrift" (H2), then its text. Every other section is a block in the text, a card with the
+// fields that are not text (blocks.ts), as is a text section that is hidden. Back from the editor,
+// each heading starts a section of text, and text before the first heading after a block is a
+// section without a heading.
+//
+// What of a section is only text and pictures is written as text above its card (its `lead`,
+// collections.ts): a picture, its heading (H2) and its text; back from the editor, the last heading
+// before the card and the text after it, and a picture just before that heading, are the section's.
+// The front page's top (a "Banner", type "hero") is text too: its text (`text`, Markdown) up to its "Knapper" block
+// (the lead's `upTo`), with its heading, subtitle, introduction and picture, is the text at the very top, before its
+// card; the block and the text after it stay in the card's `text`, with the quote. On the other pages the text at the
+// very top, before the first heading or card, is the page's introduction.
+// The front page is an ordinary page (packages/editor/defaults/standardPages.ts): its text is read into sections the same way, by the editor
+// and by the site (partsOfMarkdown, packages/editor/site/home.ts).
+// Shared by the editor and packages/editor/scripts/editor-roundtrip.mjs, which checks that every page comes back the same.
+import { blockHtml, cutAtBlock, parseBlock } from '../lib/blocks.mjs';
+import { decorated, decorativeOf } from '../lib/crop.mjs';
+import { coloredHtml, withoutColors } from '../lib/text-colors.mjs';
+
+// Text that is plain in the file (a heading, a picture's description); in Markdown every sign that
+// could mean something is escaped, and back from Markdown the escapes go again. The page's
+// introduction and the text a section takes as its own are Markdown in the file too (bold, italic and
+// links, shown so on the site: packages/editor/lib/inline.ts), and are kept as they are.
+const escape = (s) =>
+  String(s)
+    .replace(/[\\`*_[\]<>#&!~|]/g, '\\$&')
+    .replace(/^(\s*)([-+]|\d+(?=\.))/gm, '$1\\$2');
+const unescape = (s) => s.replace(/\\([!-/:-@[-`{-~])/g, '$1');
+
+const PICTURE = /!\[((?:\\.|[^\]])*)\]\(([^)\s]+)\)/;
+// A section's picture (`image`, `imageAlt`, and `imageDecorative`: "Dekorativt billede", marked in its address as a
+// picture in the text is, crop.mjs) as a picture in the text, and back.
+const picture = (image, alt, decorative) => `![${String(alt ?? '').replace(/[[\]]/g, '\\$&')}](${decorated(image, decorative === true)})`;
+const pictureOf = (m) => {
+  const { address, decorative } = decorativeOf(m[2]);
+  return { image: address, imageAlt: unescape(m[1]), ...(decorative ? { imageDecorative: true } : {}) };
+};
+
+/** The text of the editor for a list of sections; leads: the lead of each type of section; intro: the
+ * page's introduction, above the sections. */
+export function sectionsToMarkdown(sections, leads = {}, intro) {
+  // The page's top: a "Banner" before any other card, with its lead (as sectionsFromParts reads it back).
+  const top = leads.hero ? sections.findIndex((s) => s.type !== 'text' || s.hidden) : -1;
+  const text = sections
+    .map(({ type, ...props }, i) => {
+      if (type === 'text' && !props.hidden)
+        return [props.heading && `## ${escape(props.heading)}`, props.body].filter(Boolean).join('\n\n');
+      if (type === 'hero' && i === top) {
+        const { text, ...rest } = props;
+        const [lead, own] = leads.hero.upTo ? cutAtBlock(text, leads.hero.upTo) : [String(text ?? '').trim(), ''];
+        return [lead, blockHtml(type, own ? { ...rest, text: own } : rest)].filter(Boolean).join('\n\n');
+      }
+      // A "Banner" further down is a card with all of its fields.
+      const lead = type === 'hero' ? undefined : leads[type];
+      if (!lead) return blockHtml(type, props);
+      const rest = { ...props };
+      const take = (name) => {
+        const v = rest[name];
+        delete rest[name];
+        return v;
+      };
+      const image = lead.image ? take('image') : undefined;
+      const imageAlt = lead.image ? take('imageAlt') : undefined;
+      const imageDecorative = lead.image ? take('imageDecorative') : undefined;
+      const heading = lead.heading ? take(lead.heading) : undefined;
+      const body = lead.body ? take(lead.body) : undefined;
+      const paragraphs = Array.isArray(body) ? body : body ? String(body).split(/\n\s*\n/) : [];
+      return [image && picture(image, imageAlt, imageDecorative), heading && `## ${escape(heading)}`, ...paragraphs, blockHtml(type, rest)]
+        .filter(Boolean)
+        .join('\n\n');
+    })
+    .join('\n\n');
+  return [intro && String(intro), text].filter(Boolean).join('\n\n');
+}
+
+/** The page's introduction (the text before the first heading or card) and the parts after it. */
+export function introOf(parts) {
+  if (!parts[0]?.markdown) return ['', parts];
+  const paragraphs = parts[0].markdown
+    .split(/\n\s*\n/)
+    .map((p) => p.trim())
+    .filter(Boolean);
+  return [paragraphs.join('\n\n'), parts.slice(1)];
+}
+
+// The front page's top from the text before its card: that text, its heading and its picture in it (heroParts in
+// standard/hero/fields.ts finds them), then the card's own text (its "Knapper" block and the text after it).
+function hero(lead, props) {
+  const markdown = lead.map((p) => ('heading' in p ? `## ${p.heading}` : p.markdown)).join('\n\n');
+  const section = { type: 'hero', text: '', ...props };
+  section.text = [markdown, props.text].filter(Boolean).join('\n\n');
+  return section;
+}
+
+// A section with a lead from the text before its card (`run`): what is left of the run first, as
+// sections of text, then the section with its picture, heading and text.
+function withLead(run, block, lead) {
+  let rest = [...run];
+  let heading;
+  let body = '';
+  if (lead.heading) {
+    const at = rest.findLastIndex((p) => 'heading' in p);
+    // A section with only a heading has no place for text: with text after it, the heading and the
+    // text stay a section of text (as they look in the editor), and the section has no heading.
+    if (at >= 0 && (lead.body || at === rest.length - 1)) {
+      heading = rest[at].heading;
+      body = rest
+        .slice(at + 1)
+        .map((p) => p.markdown)
+        .join('\n\n');
+      rest = rest.slice(0, at);
+    }
+  } else if (lead.body && rest.length && !('heading' in rest[rest.length - 1])) {
+    body = rest.pop().markdown;
+  }
+  // The picture: at the end of the text just before the heading (or the card).
+  let image;
+  const last = rest[rest.length - 1];
+  if (lead.image && last?.markdown) {
+    const m = last.markdown.match(new RegExp(`${PICTURE.source}\\s*$`));
+    if (m) {
+      image = pictureOf(m);
+      const before = last.markdown.slice(0, m.index).trim();
+      rest = before ? [...rest.slice(0, -1), { markdown: before }] : rest.slice(0, -1);
+    }
+  }
+  const paragraphs = body
+    .split(/\n\s*\n/)
+    .map((p) => p.trim())
+    .filter(Boolean);
+  const own = {
+    ...image,
+    ...(lead.heading ? { [lead.heading]: heading ?? '' } : {}),
+    ...(lead.body && paragraphs.length ? { [lead.body]: lead.list ? paragraphs : paragraphs.join('\n\n') } : {}),
+  };
+  return [...textSections(rest), { type: block.type, ...own, ...block.props }];
+}
+
+/** The sections for the parts of the text (partsOf in markdown.mjs); leads as for sectionsToMarkdown. */
+export function sectionsFromParts(parts, leads = {}) {
+  const first = parts.findIndex((p) => p.block);
+  if (first >= 0 && parts[first].block.type === 'hero' && leads.hero)
+    return [hero(parts.slice(0, first), parts[first].block.props), ...sectionsFromParts(parts.slice(first + 1), leads)];
+  const sections = [];
+  // The text since the last card, for the next card (its lead) or as sections of text.
+  let run = [];
+  for (const part of parts) {
+    if (!part.block) {
+      run.push(part);
+      continue;
+    }
+    // A "Hero" further down is a card with all of its fields (only the top's are written above it).
+    const lead = part.block.type === 'hero' ? undefined : leads[part.block.type];
+    if (lead) sections.push(...withLead(run, part.block, lead));
+    else sections.push(...textSections(run), { type: part.block.type, ...part.block.props });
+    run = [];
+  }
+  return [...sections, ...textSections(run)];
+}
+
+// Sections of text from text: each heading starts one, and text before the first heading is one
+// without a heading. An empty heading with no text after it is nothing.
+function textSections(parts) {
+  const sections = [];
+  let text = null;
+  for (const part of parts) {
+    if ('heading' in part) {
+      text = part.heading ? { type: 'text', heading: part.heading, body: '' } : { type: 'text', body: '' };
+      sections.push(text);
+    } else if (text) {
+      text.body = part.markdown;
+      text = null;
+    } else sections.push({ type: 'text', body: part.markdown });
+  }
+  return sections.filter((s) => s.heading || s.body);
+}
+
+/** The leads of the types of sections in a list of blocks (collections.ts). */
+export const leadsOf = (blocks) => Object.fromEntries(blocks.filter((b) => b.lead).map((b) => [b.type, b.lead]));
+
+/** The leads of a field with sections: those of the blocks a page can have on it (its `leads`), and its own blocks'. */
+export const leadsOfField = (field) => ({ ...(field?.leads ?? {}), ...leadsOf(field?.blocks ?? []) });
+
+// How the text of a fixed page looks on the site, part by part, so the editor shows it so too
+// (editor.css): the headings of the sections as their components draw them, the text under a
+// heading that belongs to a section (its lead) as that section's text, the front page's top as its
+// subtitle and introduction, and a page's introduction. The looks of each fixed page's sections are
+// the site's (`sectionLooks` and `headingLooks`, LOOKS and HEADINGS in a theme's editor/looks.mjs).
+/** The look of each part of the text (null: as text), from its parts in order: { kind: 'block', type }
+ * for a card, 'heading' (H2), 'p' (with image: a picture), 'gap' (a free line) or 'other'. The text a
+ * section takes as its own is found as in sectionsFromParts. A text after the first is marked "rest". */
+export function looksOf(items, { file, leads = {}, intro = false, sectionLooks = {}, headingLooks = {} }) {
+  const looks = items.map(() => null);
+  const isText = (i) => items[i].kind === 'p' && !items[i].image;
+  const heading = headingLooks[file] ?? 'page-section';
+  let start = 0;
+  const first = items.findIndex((x) => x.kind === 'block');
+  if (first >= 0 && items[first].type === 'hero' && leads.hero) {
+    let n = 0;
+    for (let i = 0; i < first; i++) if (isText(i)) looks[i] = n++ === 0 ? 'hero-subtitle' : 'hero-intro';
+    start = first + 1;
+  } else if (intro) {
+    for (let i = 0; i < items.length && items[i].kind !== 'heading' && items[i].kind !== 'block'; i++)
+      if (isText(i)) looks[i] = 'page-intro';
+  }
+  let run = start;
+  for (let i = start; i <= items.length; i++) {
+    const block = i < items.length && items[i].kind === 'block' ? items[i] : null;
+    if (i < items.length && !block) continue;
+    const look = block && sectionLooks[`${file}:${block.type}`];
+    let own = -1;
+    if (block && leads[block.type]?.heading) for (let k = i - 1; k >= run && own < 0; k--) if (items[k].kind === 'heading') own = k;
+    // As in withLead: a section with only a heading does not take one with text after it.
+    if (own >= 0 && !leads[block.type].body && items.slice(own + 1, i).some((x) => x.kind !== 'gap')) own = -1;
+    for (let k = run; k < i; k++) if (items[k].kind === 'heading') looks[k] = k === own ? (look?.heading ?? heading) : heading;
+    if (own >= 0 && look?.body) {
+      let n = 0;
+      for (let k = own + 1; k < i; k++) if (isText(k)) looks[k] = n++ === 0 ? look.body : `${look.body} rest`;
+    }
+    run = i + 1;
+  }
+  return looks;
+}
+
+// A heading as the editor reads it (its text): without escapes, links as their text, without bold, italic, code and
+// colours (packages/editor/lib/text-colors.mjs).
+export const plainHeading = (s) =>
+  unescape(
+    withoutColors(s)
+      .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+      .replace(/(\*\*|__|\*|_|`)(.+?)\1/g, '$2')
+      .trim(),
+  );
+
+// A heading of a level (1: "# …", the page's H1; 2: "## …", a section's) on a line of Markdown: its text, as written.
+const atx = (level) => new RegExp(`^ {0,3}#{${level}}(?!#)(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$`);
+const h1Line = atx(1);
+
+/** A page's H1: the heading "# …" on the first line of its text that is not empty (the page's own heading, written
+ * at the top of its text), as text, and the text without it. Without one: no heading, and the text as it is. With a
+ * word or more in colour, `html` is the heading as HTML with its colours (coloredHtml), for the layout to draw. */
+export function pageH1(markdown) {
+  const text = String(markdown ?? '');
+  const match = text.match(/^(?:[ \t]*\r?\n)*([^\r\n]*)(?:\r?\n|$)/);
+  const line = match?.[1] ?? '';
+  const h1 = line.match(h1Line);
+  if (!h1) return { heading: undefined, rest: text };
+  const heading = plainHeading(h1[1] ?? '') || undefined;
+  return {
+    heading,
+    html: heading && coloredHtml(h1[1] ?? '', plainHeading),
+    rest: text.slice(match[0].length).replace(/^(?:[ \t]*\r?\n)+/, ''),
+  };
+}
+
+/** The parts of a page's Markdown as the editor reads them (partsOf in markdown.mjs), without the editor: each block,
+ * each heading at the top level (H2), and the Markdown between them; for the site, which reads the front page into
+ * sections (packages/editor/site/home.ts). The page's H1 ("# …") is no section's and is left out. `npm run check:editor` checks
+ * that it gives the editor's sections for every page. */
+export function partsOfMarkdown(markdown) {
+  const parts = [];
+  let run = [];
+  let fence = null;
+  const flush = () => {
+    const text = run.join('\n').trim();
+    if (text) parts.push({ markdown: text });
+    run = [];
+  };
+  for (const line of String(markdown).split(/\r?\n/)) {
+    const mark = line.match(/^ {0,3}(`{3,}|~{3,})/)?.[1];
+    if (fence) {
+      if (mark && mark[0] === fence[0] && mark.length >= fence.length) fence = null;
+      run.push(line);
+      continue;
+    }
+    if (mark) {
+      fence = mark;
+      run.push(line);
+      continue;
+    }
+    const block = parseBlock(line);
+    if (block) {
+      flush();
+      parts.push({ block });
+      continue;
+    }
+    if (h1Line.test(line)) {
+      flush();
+      continue;
+    }
+    const heading = line.match(atx(2));
+    if (heading) {
+      flush();
+      parts.push({ heading: plainHeading(heading[1] ?? '') });
+      continue;
+    }
+    run.push(line);
+  }
+  flush();
+  return parts;
+}

package/src/seo.ts

@@ -0,0 +1,333 @@
+// The SEO rating at the top of "Søgemaskiner" on a page and a blog post (EntryForm.tsx): a few
+// checks of the text and the Google fields, each fine or not, with what is fine or wrong in one sentence
+// (CheckList in ui.tsx), like the SEO audits of Google Lighthouse that can be judged from the page's own
+// content. It never keeps the form from being saved. Pure functions of the form's values and the Markdown
+// of its text, so they are easy to try on their own. What is used when a Google field is empty is what
+// Base.astro does: the title, else the "Kort beskrivelse", else the site's own.
+import { t } from './i18n';
+import { decorativeOf } from '../lib/crop.mjs';
+import { readFields, splitFrontmatter } from './frontmatter.mjs';
+
+/** What the rating looks at: a blog post (whose title is its H1) or a page (whose H1 is in its text). */
+export type SeoInput = {
+  post: boolean;
+  title: string;
+  /** The text, as Markdown (without the front matter). */
+  body: string;
+  seoTitle?: string;
+  seoDescription?: string;
+  /** "Kort beskrivelse", used when there is no Google description. */
+  description?: string;
+  /** What is used instead of an empty Google description on a page without a "Kort beskrivelse" (a fixed page's
+   * introduction), in a few words; without it, the site's own description. */
+  descriptionFrom?: string;
+  /** The H1 of a page that has it in a field of its own (a fixed page: "Overskrift (H1)"), not in its text. */
+  h1?: string;
+  /** "Primært søgeord". */
+  keyword?: string;
+  /** "Skjul for søgemaskiner (noindex)". */
+  noindex?: boolean;
+  /** "Canonical URL": the address of the page Google should count as the original. */
+  canonical?: string;
+  /** What the editor knows (env.relations): the pages and fixed pages by their address, the blog posts by their
+   * name, to see if the canonical page is among them. */
+  relations?: { pages?: { value: string }[]; fixed?: { value: string }[]; blog?: { value: string }[] };
+};
+
+export type SeoCheck = { ok: boolean; text: string; fix?: string };
+
+/** The input of a page's or a post's rating from its fields (as in its form or its file) and its text: the same in its
+ * form (EntryForm.tsx) and in the list of them all ("SEO-vurdering", SeoScores.tsx). */
+export function seoInputOf(values: Record<string, unknown>, body: string, post: boolean, relations: SeoInput['relations']): SeoInput {
+  const text = (name: string) => String(values[name] ?? '');
+  return {
+    post,
+    body,
+    title: text('title'),
+    seoTitle: text('seoTitle'),
+    seoDescription: text('seoDescription'),
+    description: text('description'),
+    keyword: text('keyword'),
+    noindex: values.noindex === true,
+    canonical: text('canonical'),
+    relations,
+  };
+}
+
+/** The rating of a page or a post as it is saved, from its file (front matter and text): the lists of them (SeoScores.tsx,
+ * and the pages and posts with "Vis SEO-vurdering", Library.tsx). */
+export function fileRating(text: string, post: boolean, relations: SeoInput['relations']): SeoCheck[] {
+  const { yaml, body } = splitFrontmatter(text);
+  return seoRating(seoInputOf(readFields(yaml), body, post, relations));
+}
+
+/** The fields under "Søgemaskiner", in every form that has them (EntryForm.tsx, DataForm.tsx): the Google texts, the
+ * keywords, the canonical address and noindex. */
+export const SEO_FIELDS = ['seoTitle', 'seoDescription', 'keyword', 'keywords', 'canonical', 'noindex'];
+
+/** The fields under "Sociale medier", after them: the picture, the title and the description when the page is shared
+ * (a fixed page and a tag have only the picture). */
+export const SHARE_FIELDS = ['shareImage', 'shareTitle', 'shareDescription'];
+
+/** What a page shows when a link to it is shared (Facebook, LinkedIn, a message), worked out as Base.astro writes its
+ * og: tags: the title when shared, else the Google title, else the page's own with the site's name after it (the front
+ * page's without); the description when shared, else the Google description, else the page's own (`description`: its
+ * "Kort beskrivelse", a fixed page's introduction), else the site's; the picture when shared, else the page's own
+ * (`image`: "Billede øverst", else the first picture in the text), else the site's. */
+export type ShareInput = {
+  /** The page's own title as the site has it: a page's H1, a post's title, a fixed page's heading, a tag's name. */
+  title: string;
+  front?: boolean;
+  seoTitle?: string;
+  seoDescription?: string;
+  shareTitle?: string;
+  shareDescription?: string;
+  shareImage?: string;
+  description?: string;
+  image?: string;
+  /** The site's name, description and picture (`sharing` in @site/editor). */
+  site: { name: string; description: string; picture: string };
+};
+
+export const sharedAs = (input: ShareInput) => ({
+  title: input.shareTitle?.trim() || input.seoTitle?.trim() || (input.front ? input.title : `${input.title} | ${input.site.name}`),
+  description: input.shareDescription?.trim() || input.seoDescription?.trim() || input.description?.trim() || input.site.description,
+  image: input.shareImage || input.image || input.site.picture,
+});
+
+/** The first picture in a text (its address), not one in the text of a block in it (a "Banner"'s, on its line of HTML),
+ * as the site picks it (firstImage in packages/editor/site/images.mjs). */
+export const firstPicture = (body: string): string | undefined =>
+  body.replace(/^<div data-block=.*$/gm, '').match(/!\[[^\]]*\]\(([^)\s]+)\)/)?.[1];
+
+/** The longest a Google title is shown, and the length a Google description is best between. */
+export const TITLE_MAX = 60;
+export const DESCRIPTION_MIN = 120;
+export const DESCRIPTION_MAX = 160;
+
+const H1 = /^ {0,3}#(?!#)[ \t]+\S/;
+const HEADING = /^ {0,3}#{1,6}([ \t]|$)/;
+const FENCE = /^ {0,3}(`{3,}|~{3,})/;
+
+/** The lines of a text outside fenced code, with their numbers. */
+function outsideCode(body: string): { line: string; at: number }[] {
+  const lines = body.split(/\r?\n/);
+  const out: { line: string; at: number }[] = [];
+  let fence: string | null = null;
+  lines.forEach((line, at) => {
+    const opens = FENCE.exec(line)?.[1];
+    if (fence) {
+      if (opens && opens[0] === fence[0] && opens.length >= fence.length) fence = null;
+    } else if (opens) fence = opens;
+    else out.push({ line, at });
+  });
+  return out;
+}
+
+/** The H1 headings of a text (ATX lines "# …", not in fenced code), as plain text, with their line numbers. */
+export function h1s(body: string): { text: string; at: number }[] {
+  return outsideCode(body)
+    .filter(({ line }) => H1.test(line))
+    .map(({ line, at }) => ({ text: plain(line.replace(/^ {0,3}#[ \t]+/, '').replace(/[ \t]+#+[ \t]*$/, '')), at }));
+}
+
+/** Whether the first line of a text that is not blank is an H1. */
+export function h1First(body: string): boolean {
+  const first = body.split(/\r?\n/).find((line) => line.trim());
+  return !!first && H1.test(first);
+}
+
+/** The first paragraph of a text, as plain text: the first lines together that are not a heading, a block
+ * (HTML), a picture alone, a line across or fenced code. Empty when there is none. */
+export function firstParagraph(body: string): string {
+  const lines = outsideCode(body);
+  const text = (line: string) =>
+    line.trim() &&
+    !HEADING.test(line) &&
+    !/^\s*</.test(line) &&
+    !/^\s*!\[[^\]]*\]\([^)]*\)\s*$/.test(line) &&
+    !/^ {0,3}([-*_])( *\1){2,} *$/.test(line);
+  const start = lines.findIndex(({ line }) => text(line));
+  if (start < 0) return '';
+  const paragraph: string[] = [];
+  for (let i = start; i < lines.length && lines[i].line.trim() && (i === start || lines[i].at === lines[i - 1].at + 1); i++)
+    paragraph.push(lines[i].line);
+  return plain(paragraph.join(' '));
+}
+
+/** Markdown as plain text: without links' addresses, pictures and the marks for bold, italic and code. */
+export function plain(markdown: string): string {
+  return markdown
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/<[^>]+>/g, '')
+    .replace(/[*_`~]+/g, '')
+    .replace(/\\(.)/g, '$1')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/** The number of characters in a text, as Google counts them (an emoji is one). */
+export const lengthOf = (text: string) => [...text.trim()].length;
+
+/** Whether a word or words are in a text, whatever the case. */
+export const hasWord = (text: string, word: string) =>
+  !!word.trim() && plain(text).toLocaleLowerCase().includes(word.trim().replace(/\s+/g, ' ').toLocaleLowerCase());
+
+/** The text of a body outside fenced code, code spans and HTML comments, in paragraphs, so a link or a picture
+ * is never read across two of them. */
+function paragraphs(body: string): string[] {
+  const kept = new Set(outsideCode(body).map(({ at }) => at));
+  return body
+    .split(/\r?\n/)
+    .map((line, at) => (kept.has(at) ? line : ''))
+    .join('\n')
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .split(/\n[ \t]*\n/)
+    .map((p) => p.replace(/(?<!`)(`+)(?!`)[\s\S]*?(?<!`)\1(?!`)/g, ''));
+}
+
+// A link's or a picture's text in brackets (with escapes and one level of brackets in it, as a picture in a link),
+// and its address in parentheses (maybe in <>, with a title after it), as Milkdown writes them: the text the first
+// group, the address the second.
+const LABEL = String.raw`((?:\\.|[^\\\[\]]|\[(?:\\.|[^\\\[\]])*\])*)`;
+const DEST = String.raw`\(\s*(<[^>\n]*>|(?:\\.|[^\\()\s]|\((?:\\.|[^\\()\s])*\))*)(?:\s+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^()\\])*\)))?\s*\)`;
+const PICTURE = new RegExp(String.raw`(?<!\\)!\[${LABEL}\]${DEST}`, 'g');
+const LINK = new RegExp(String.raw`(?<![\\!])\[${LABEL}\]${DEST}`, 'g');
+const IMG = /(?<!\\)<img\b[^>]*>/gi;
+const ALT = /\salt\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+))/i;
+const A = /(?<!\\)<a\b[^>]*>([\s\S]*?)<\/a\s*>/gi;
+
+/** The pictures in a text (`![…](…)`, and `<img>` in its HTML), each by its alternative text, as plain text (empty
+ * when it has none), and whether it is decorative: marked so in its address ("Dekorativt billede", crop.mjs), or in
+ * HTML with alt="". The blocks (`<div data-block=…>`) are not pictures of the text. */
+export function pictures(body: string): { alt: string; decorative: boolean }[] {
+  return paragraphs(body).flatMap((p) => [
+    ...[...p.matchAll(PICTURE)].map((m) => ({
+      alt: plain(m[1]),
+      decorative: decorativeOf(m[2].replace(/^<(.*)>$/, '$1')).decorative,
+    })),
+    ...[...p.matchAll(IMG)].map((m) => {
+      const attribute = ALT.exec(m[0]);
+      const alt = (attribute?.[1] ?? attribute?.[2] ?? attribute?.[3] ?? '').trim();
+      return { alt, decorative: !!attribute && !alt };
+    }),
+  ]);
+}
+
+/** The links in a text (`[…](…)`, and `<a>` in its HTML), each by its text, as plain text. */
+export function links(body: string): string[] {
+  return paragraphs(body).flatMap((p) => [...[...p.matchAll(LINK)].map((m) => plain(m[1])), ...[...p.matchAll(A)].map((m) => plain(m[1]))]);
+}
+
+// Link texts that say nothing about where the link goes (Lighthouse's "Links do not have descriptive text").
+const VAGUE = new Set([
+  'her',
+  'klik her',
+  'tryk her',
+  'læs her',
+  'læs mere',
+  'se mere',
+  'mere',
+  'link',
+  'here',
+  'click here',
+  'read more',
+  'see more',
+  'learn more',
+  'more',
+]);
+
+/** Whether a link's text is only a vague phrase ("klik her", "Læs mere →"), whatever the case and punctuation. */
+export const vague = (text: string) =>
+  VAGUE.has(
+    text
+      .replace(/^[\s\p{P}\p{S}]+|[\s\p{P}\p{S}]+$/gu, '')
+      .replace(/\s+/g, ' ')
+      .toLocaleLowerCase(),
+  );
+
+/** An address as the editor keeps a page's: from / to /, without what is after # or ?. */
+const pathOf = (address: string) => {
+  const path = address.trim().replace(/[?#].*$/, '');
+  return path ? `/${path}/`.replace(/\/{2,}/g, '/') : '';
+};
+
+/** Whether the canonical address is a page, a fixed page or a blog post the editor knows; null when it cannot
+ * say: no address, nothing known, or an address on another site (https://…). */
+export function canonicalFound(canonical: string, relations: SeoInput['relations']): boolean | null {
+  const path = pathOf(canonical);
+  if (!path || !relations || /^([a-z][a-z\d+.-]*:|\/\/)/i.test(canonical.trim())) return null;
+  return [...(relations.pages ?? []), ...(relations.fixed ?? []), ...(relations.blog ?? [])].some((o) => pathOf(o.value) === path);
+}
+
+/** The checks, in the order they are shown: at most ten. First whether Google may show the page at all (noindex and
+ * Canonical URL, only when they are set), then its H1, its Google title and description and its keyword, and last
+ * the pictures and links of its text (only when it has some). */
+export function seoRating(input: SeoInput): SeoCheck[] {
+  const r = t.forms.seoRating;
+  const { post } = input;
+  const checks: SeoCheck[] = [];
+  // Hidden from search engines: only said when it is so, as most pages are not.
+  if (input.noindex) checks.push({ ok: false, text: r.noindex(post), fix: r.fixNoindex(post) });
+  const canonical = canonicalFound(input.canonical ?? '', input.relations);
+  if (canonical === false) checks.push({ ok: false, text: r.noCanonical, fix: r.fixCanonical });
+  // A page's H1 is in its text, just one and at the top; a post's is its title, a fixed page's its own field.
+  const ownH1 = input.h1 !== undefined;
+  const headings = post || ownH1 ? [] : h1s(input.body);
+  if (!post && !ownH1) {
+    const n = headings.length;
+    checks.push(
+      n === 1
+        ? { ok: true, text: r.oneH1 }
+        : n === 0
+          ? { ok: false, text: r.noH1, fix: r.fixNoH1 }
+          : { ok: false, text: r.manyH1(n), fix: r.fixManyH1 },
+    );
+    if (n) checks.push(h1First(input.body) ? { ok: true, text: r.h1First } : { ok: false, text: r.h1NotFirst, fix: r.fixH1First });
+  }
+  const title = lengthOf(input.seoTitle ?? '');
+  checks.push(
+    !title
+      ? { ok: false, text: r.noTitle(post), fix: r.fixTitle }
+      : title > TITLE_MAX
+        ? { ok: false, text: r.longTitle(title), fix: r.fixTitle }
+        : { ok: true, text: r.goodTitle(title) },
+  );
+  const description = lengthOf(input.seoDescription ?? '');
+  checks.push(
+    !description
+      ? {
+          ok: false,
+          text: input.descriptionFrom ? r.noDescriptionFrom(input.descriptionFrom) : r.noDescription(!!input.description?.trim()),
+          fix: r.fixDescription,
+        }
+      : description < DESCRIPTION_MIN
+        ? { ok: false, text: r.shortDescription(description), fix: r.fixDescription }
+        : description > DESCRIPTION_MAX
+          ? { ok: false, text: r.longDescription(description), fix: r.fixDescription }
+          : { ok: true, text: r.goodDescription(description) },
+  );
+  const keyword = input.keyword?.trim();
+  if (keyword) {
+    // In the H1 (not asked of a page without one, which is said above), and in the first paragraph.
+    const h1 = post ? input.title : ownH1 ? input.h1 : headings[0]?.text;
+    if (h1 != null) {
+      const inH1 = hasWord(h1, keyword);
+      checks.push({ ok: inH1, text: r.keywordInH1(keyword, post, inH1), fix: inH1 ? undefined : r.fixKeywordInH1(post) });
+    }
+    const inText = hasWord(firstParagraph(input.body), keyword);
+    checks.push({ ok: inText, text: r.keywordInText(keyword, inText), fix: inText ? undefined : r.fixKeywordInText });
+  }
+  const shown = pictures(input.body);
+  if (shown.length) {
+    const without = shown.filter((picture) => !picture.alt && !picture.decorative).length;
+    checks.push(without ? { ok: false, text: r.noAlt(without), fix: r.fixAlt } : { ok: true, text: r.allAlt });
+  }
+  const texts = links(input.body);
+  if (texts.length) {
+    const first = texts.find(vague);
+    checks.push(first ? { ok: false, text: r.vagueLink(first), fix: r.fixLink } : { ok: true, text: r.goodLinks(texts.length) });
+  }
+  return checks;
+}