@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/lib/crop.mjs

@@ -1,83 +1,83 @@
-// A picture in the text cut to a format (its sides, as 2:3) in the editor (Crop.tsx), written after
-// its address in the Markdown, so the file and the picture stay as they are:
-//   ![Kontoret](/images/uploads/2024/05/kontor.webp#format=2:3&crop=12.5,0,75,100)
-// crop: the part of the picture that is shown, in percent of its width and height: from the left,
-// from the top, its width and its height. Shown so on the site (rehypeResponsiveImages, images.mjs)
-// and on its card in the editor (MarkdownEditor.tsx). Without crop the middle of it is shown.
-// A decorative picture ("Dekorativt billede": screen readers skip it) is marked there too, alone or after
-// the format and crop, and drawn with alt="" on the site:
-//   ![](/images/uploads/2024/05/blomst.webp#decorative)
-// The mark is part of the address, so Milkdown keeps it as it is, and a visitor never sees it.
-
-/** The formats a picture can be cut to, as width:height. */
-export const FORMATS = ['1:1', '4:5', '3:4', '2:3', '3:2', '4:3', '16:9'];
-
-const FORMAT = /^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/;
-
-/** Width divided by height of a format ('2:3'), or 0 when it is none. */
-export function ratioOf(format) {
-  const m = String(format ?? '').match(FORMAT);
-  return m && +m[1] > 0 && +m[2] > 0 ? +m[1] / +m[2] : 0;
-}
-
-const DECORATIVE = 'decorative';
-
-/** Whether a picture's address is marked decorative, and the address without the mark (else as it is). */
-export function decorativeOf(address) {
-  const text = String(address);
-  const at = text.indexOf('#');
-  const params = at < 0 ? [] : text.slice(at + 1).split('&');
-  const rest = params.filter((p) => p !== DECORATIVE);
-  if (rest.length === params.length) return { address: text, decorative: false };
-  return { address: text.slice(0, at) + (rest.length ? `#${rest.join('&')}` : ''), decorative: true };
-}
-
-/** The address marked decorative, or without the mark. */
-export function decorated(address, decorative) {
-  const plain = decorativeOf(address).address;
-  return decorative ? `${plain}${plain.includes('#') ? '&' : '#'}${DECORATIVE}` : plain;
-}
-
-/** The picture's own address, its format and crop ([left, top, width, height]) when it has them (an
- * address without a format is left as it is), and whether it is decorative. */
-export function splitPicture(address) {
-  const { address: own, decorative } = decorativeOf(address);
-  const [src, fragment = ''] = own.split('#');
-  const params = new URLSearchParams(fragment);
-  const format = params.get('format');
-  if (!ratioOf(format)) return { src: own, format: '', crop: null, decorative };
-  const crop = (params.get('crop') ?? '').split(',').map(Number);
-  const fits = crop.length === 4 && crop.every((n) => Number.isFinite(n) && n >= 0 && n <= 100) && crop[2] > 0 && crop[3] > 0;
-  return { src, format, crop: fits ? crop : null, decorative };
-}
-
-const round = (n) => Math.round(n * 10) / 10;
-
-/** The address with the format and crop after it (only the address without a format), marked decorative when it is. */
-export function joinPicture(src, format, crop, decorative = false) {
-  if (!ratioOf(format)) return decorated(src, decorative);
-  return decorated(`${src}#format=${format}${crop ? `&crop=${crop.map(round).join(',')}` : ''}`, decorative);
-}
-
-/** The largest part of a picture (aspect: its width divided by its height) in a format, in the middle. */
-export function middleCrop(aspect, format) {
-  const ratio = ratioOf(format);
-  if (!ratio || !aspect) return null;
-  const [w, h] = aspect > ratio ? [(ratio / aspect) * 100, 100] : [100, (aspect / ratio) * 100];
-  return [(100 - w) / 2, (100 - h) / 2, w, h];
-}
-
-/** The styles of a cut picture: its box (in the format) and the picture in it, as CSS text; how much
- * wider than the box the picture is (for its sizes). Without a crop the picture is its own box. */
-export function cropStyle(format, crop) {
-  const [a, b] = format.split(':');
-  const aspect = `aspect-ratio: ${a} / ${b}`;
-  if (!crop) return { box: null, img: `${aspect}; object-fit: cover`, scale: 1 };
-  const [x, y, w] = crop;
-  return {
-    box: aspect,
-    // The picture's width in percent of the box's, moved by percent of its own size.
-    img: `width: ${Math.round((100 / w) * 100 * 100) / 100}%; transform: translate(${-round(x)}%, ${-round(y)}%)`,
-    scale: 100 / w,
-  };
-}
+// A picture in the text cut to a format (its sides, as 2:3) in the editor (Crop.tsx), written after
+// its address in the Markdown, so the file and the picture stay as they are:
+//   ![Kontoret](/images/uploads/2024/05/kontor.webp#format=2:3&crop=12.5,0,75,100)
+// crop: the part of the picture that is shown, in percent of its width and height: from the left,
+// from the top, its width and its height. Shown so on the site (rehypeResponsiveImages, images.mjs)
+// and on its card in the editor (MarkdownEditor.tsx). Without crop the middle of it is shown.
+// A decorative picture ("Dekorativt billede": screen readers skip it) is marked there too, alone or after
+// the format and crop, and drawn with alt="" on the site:
+//   ![](/images/uploads/2024/05/blomst.webp#decorative)
+// The mark is part of the address, so Milkdown keeps it as it is, and a visitor never sees it.
+
+/** The formats a picture can be cut to, as width:height. */
+export const FORMATS = ['1:1', '4:5', '3:4', '2:3', '3:2', '4:3', '16:9'];
+
+const FORMAT = /^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/;
+
+/** Width divided by height of a format ('2:3'), or 0 when it is none. */
+export function ratioOf(format) {
+  const m = String(format ?? '').match(FORMAT);
+  return m && +m[1] > 0 && +m[2] > 0 ? +m[1] / +m[2] : 0;
+}
+
+const DECORATIVE = 'decorative';
+
+/** Whether a picture's address is marked decorative, and the address without the mark (else as it is). */
+export function decorativeOf(address) {
+  const text = String(address);
+  const at = text.indexOf('#');
+  const params = at < 0 ? [] : text.slice(at + 1).split('&');
+  const rest = params.filter((p) => p !== DECORATIVE);
+  if (rest.length === params.length) return { address: text, decorative: false };
+  return { address: text.slice(0, at) + (rest.length ? `#${rest.join('&')}` : ''), decorative: true };
+}
+
+/** The address marked decorative, or without the mark. */
+export function decorated(address, decorative) {
+  const plain = decorativeOf(address).address;
+  return decorative ? `${plain}${plain.includes('#') ? '&' : '#'}${DECORATIVE}` : plain;
+}
+
+/** The picture's own address, its format and crop ([left, top, width, height]) when it has them (an
+ * address without a format is left as it is), and whether it is decorative. */
+export function splitPicture(address) {
+  const { address: own, decorative } = decorativeOf(address);
+  const [src, fragment = ''] = own.split('#');
+  const params = new URLSearchParams(fragment);
+  const format = params.get('format');
+  if (!ratioOf(format)) return { src: own, format: '', crop: null, decorative };
+  const crop = (params.get('crop') ?? '').split(',').map(Number);
+  const fits = crop.length === 4 && crop.every((n) => Number.isFinite(n) && n >= 0 && n <= 100) && crop[2] > 0 && crop[3] > 0;
+  return { src, format, crop: fits ? crop : null, decorative };
+}
+
+const round = (n) => Math.round(n * 10) / 10;
+
+/** The address with the format and crop after it (only the address without a format), marked decorative when it is. */
+export function joinPicture(src, format, crop, decorative = false) {
+  if (!ratioOf(format)) return decorated(src, decorative);
+  return decorated(`${src}#format=${format}${crop ? `&crop=${crop.map(round).join(',')}` : ''}`, decorative);
+}
+
+/** The largest part of a picture (aspect: its width divided by its height) in a format, in the middle. */
+export function middleCrop(aspect, format) {
+  const ratio = ratioOf(format);
+  if (!ratio || !aspect) return null;
+  const [w, h] = aspect > ratio ? [(ratio / aspect) * 100, 100] : [100, (aspect / ratio) * 100];
+  return [(100 - w) / 2, (100 - h) / 2, w, h];
+}
+
+/** The styles of a cut picture: its box (in the format) and the picture in it, as CSS text; how much
+ * wider than the box the picture is (for its sizes). Without a crop the picture is its own box. */
+export function cropStyle(format, crop) {
+  const [a, b] = format.split(':');
+  const aspect = `aspect-ratio: ${a} / ${b}`;
+  if (!crop) return { box: null, img: `${aspect}; object-fit: cover`, scale: 1 };
+  const [x, y, w] = crop;
+  return {
+    box: aspect,
+    // The picture's width in percent of the box's, moved by percent of its own size.
+    img: `width: ${Math.round((100 / w) * 100 * 100) / 100}%; transform: translate(${-round(x)}%, ${-round(y)}%)`,
+    scale: 100 / w,
+  };
+}

package/lib/csp.mjs

@@ -1,130 +1,130 @@
-// The Content Security Policy of every page the site builds, as a <meta http-equiv> at the top of its <head>: the
-// browser runs only the scripts the build put in the page (each inline one by its hash) and those from the site's own
-// address, and loads from elsewhere only what is allowed below. So HTML that gets into a page after the build (in the
-// editor's preview, by a fault in a script) can run nothing. What the build wrote is trusted: the addresses of the
-// scripts, frames and pictures in a page (HTML written in a page's text, an embed) are allowed on that page.
-// Allowed everywhere besides: the videos (video.mjs plays them from YouTube's and Vimeo's players), what the site gives
-// (`site`: its measuring, packages/editor/site/siteCsp.mjs) and what each app installed gives (`src/apps/<app>/csp.json`, in
-// packages/editor/site/siteCsp.mjs too), with the addresses allowed in the editor (the site's own, config.csp). The editor's page (/editor/) has its own, stricter policy: GitHub, the stills of the videos,
-// and nothing of the site's or the apps'. Styles may be inline (the pages have style="…" and React sets them).
-// A meta tag cannot say who may frame a page; X-Frame-Options in packages/editor/pages/_headers.txt does.
-import { createHash } from 'node:crypto';
-import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { joined } from './cspSources.mjs';
-
-// What a site or an app may add to the policy, and the checks of it, without Node, so the site's Worker can use them too.
-export { allows, isSource, joined, KINDS, kindOf, sourcesProblems } from './cspSources.mjs';
-
-/** @typedef {import('./cspSources.mjs').Sources} Sources */
-
-/** What the videos need on the site: their players, put in place when a video is played (video.mjs). */
-const VIDEOS = { frame: ['https://www.youtube-nocookie.com', 'https://player.vimeo.com'] };
-
-/** What the editor needs (GitHub it asks through the site's Worker, on its own address: github.ts): Vimeo's details of a video and the stills of the videos
- * (standard/video/view.ts), and what it makes in the browser (pictures, files) as blob: and data:. */
-const EDITOR = {
-  img: ['blob:', 'https://i.ytimg.com', 'https://i.vimeocdn.com'],
-  connect: ['blob:', 'data:', 'https://vimeo.com'],
-};
-
-// An inline script that runs (not JSON, JSON-LD or a template).
-const RUNS = /^(module|text\/javascript|application\/javascript)?$/i;
-const SCRIPT = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
-const attr = (attrs, name) => new RegExp(`\\s${name}\\s*=\\s*"([^"]*)"`, 'i').exec(attrs)?.[1];
-
-/** The hash of each inline script that runs in a page, as CSP writes it. @param {string} html */
-export function scriptHashes(html) {
-  const hashes = new Set();
-  for (const [, attrs, code] of html.matchAll(SCRIPT))
-    if (attr(attrs, 'src') === undefined && RUNS.test(attr(attrs, 'type') ?? ''))
-      hashes.add(`'sha256-${createHash('sha256').update(code, 'utf8').digest('base64')}'`);
-  return [...hashes];
-}
-
-/** The other addresses (origins) a page's HTML loads its scripts, frames and pictures from.
- * @param {string} html @returns {Required<Pick<Sources, 'script' | 'frame' | 'img'>>} */
-export function pageOrigins(html) {
-  const found = { script: new Set(), frame: new Set(), img: new Set() };
-  const add = (set, url) => {
-    try {
-      const { protocol, origin } = new URL(url.replace(/&amp;/g, '&'));
-      if (protocol === 'https:' || protocol === 'http:') set.add(origin);
-    } catch {}
-  };
-  for (const [, attrs] of html.matchAll(/<script\b([^>]*)>/gi)) add(found.script, attr(attrs, 'src') ?? '');
-  for (const [, attrs] of html.matchAll(/<iframe\b([^>]*)>/gi)) add(found.frame, attr(attrs, 'src') ?? attr(attrs, 'data-src') ?? '');
-  for (const [, attrs] of html.matchAll(/<(?:img|source)\b([^>]*)>/gi)) {
-    add(found.img, attr(attrs, 'src') ?? '');
-    for (const part of (attr(attrs, 'srcset') ?? '').split(',')) add(found.img, part.trim().split(/\s+/)[0]);
-  }
-  return { script: [...found.script], frame: [...found.frame], img: [...found.img] };
-}
-
-/** The policy, from its directives (an empty one is left out, `none` when it must say so).
- * @param {Record<string, (string | undefined)[]>} directives */
-function policy(directives) {
-  return Object.entries(directives)
-    .map(([name, values]) => [name, [...new Set(values.filter(Boolean))]])
-    .map(([name, values]) => `${name} ${values.length ? values.join(' ') : "'none'"}`)
-    .join('; ');
-}
-
-/** A page's policy: on the site, or the editor's (`editor`). @param {string} html
- * @param {{ editor?: boolean, site?: Sources, images?: string[] }} options */
-export function pagePolicy(html, { editor = false, site = {}, images = [] }) {
-  const page = pageOrigins(html);
-  const s = editor ? joined(EDITOR, { img: images }) : joined(VIDEOS, site, page);
-  return policy({
-    'default-src': ["'self'"],
-    'script-src': ["'self'", ...scriptHashes(html), ...s.script],
-    'style-src': ["'self'", "'unsafe-inline'", ...s.style],
-    'img-src': ["'self'", 'data:', ...s.img],
-    'font-src': ["'self'", 'data:'],
-    'connect-src': ["'self'", ...s.connect],
-    'media-src': ["'self'", ...(editor ? ['blob:', 'data:'] : [])],
-    // The editor shows a page in a frame of its own (srcdoc, PageFrame in ui.tsx).
-    'frame-src': editor ? ["'self'", 'blob:', 'data:'] : s.frame,
-    'worker-src': ["'self'"],
-    'form-action': ["'self'", ...s.form],
-    'object-src': [],
-    'base-uri': ["'self'"],
-  });
-}
-
-/** The policy as the first thing in a page's <head> (after its charset, which must stay in its first bytes).
- * @param {string} html @param {string} value */
-export function withPolicy(html, value) {
-  const meta = `<meta http-equiv="Content-Security-Policy" content="${value.replace(/&/g, '&amp;').replace(/"/g, '&quot;')}">`;
-  const at = /<meta\s+charset\s*=\s*"?[\w-]+"?\s*\/?>/i.exec(html) ?? /<head\b[^>]*>/i.exec(html);
-  if (!at) return undefined;
-  const end = at.index + at[0].length;
-  return html.slice(0, end) + meta + html.slice(end);
-}
-
-/** The Astro integration that writes the policy into every page built (packages/editor/astro.mjs).
- * @param {{ site?: Sources }} [options] @returns {import('astro').AstroIntegration} */
-export function csp({ site = {} } = {}) {
-  return {
-    name: 'content-security-policy',
-    hooks: {
-      'astro:build:done': ({ dir, logger }) => {
-        const root = fileURLToPath(dir);
-        const files = readdirSync(root, { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('.html'));
-        const pages = files.map((file) => ({ file, html: readFileSync(join(root, file), 'utf8') }));
-        // The editor shows the site's pages in its preview, with their pictures.
-        const images = [...new Set(pages.flatMap((p) => pageOrigins(p.html).img))];
-        const missing = [];
-        for (const { file, html } of pages) {
-          const editor = file.split(/[\\/]/)[0] === 'editor';
-          const out = withPolicy(html, pagePolicy(html, { editor, site, images }));
-          if (out) writeFileSync(join(root, file), out);
-          else missing.push(file);
-        }
-        if (missing.length) throw new Error(`Content-Security-Policy: ingen <head> i ${missing.join(', ')}`);
-        logger.info(`${pages.length} sider har en Content-Security-Policy.`);
-      },
-    },
-  };
-}
+// The Content Security Policy of every page the site builds, as a <meta http-equiv> at the top of its <head>: the
+// browser runs only the scripts the build put in the page (each inline one by its hash) and those from the site's own
+// address, and loads from elsewhere only what is allowed below. So HTML that gets into a page after the build (in the
+// editor's preview, by a fault in a script) can run nothing. What the build wrote is trusted: the addresses of the
+// scripts, frames and pictures in a page (HTML written in a page's text, an embed) are allowed on that page.
+// Allowed everywhere besides: the videos (video.mjs plays them from YouTube's and Vimeo's players), what the site gives
+// (`site`: its measuring, packages/editor/site/siteCsp.mjs) and what each app installed gives (`src/apps/<app>/csp.json`, in
+// packages/editor/site/siteCsp.mjs too), with the addresses allowed in the editor (the site's own, config.csp). The editor's page (/editor/) has its own, stricter policy: GitHub, the stills of the videos,
+// and nothing of the site's or the apps'. Styles may be inline (the pages have style="…" and React sets them).
+// A meta tag cannot say who may frame a page; X-Frame-Options in packages/editor/pages/_headers.txt does.
+import { createHash } from 'node:crypto';
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { joined } from './cspSources.mjs';
+
+// What a site or an app may add to the policy, and the checks of it, without Node, so the site's Worker can use them too.
+export { allows, isSource, joined, KINDS, kindOf, sourcesProblems } from './cspSources.mjs';
+
+/** @typedef {import('./cspSources.mjs').Sources} Sources */
+
+/** What the videos need on the site: their players, put in place when a video is played (video.mjs). */
+const VIDEOS = { frame: ['https://www.youtube-nocookie.com', 'https://player.vimeo.com'] };
+
+/** What the editor needs (GitHub it asks through the site's Worker, on its own address: github.ts): Vimeo's details of a video and the stills of the videos
+ * (standard/video/view.ts), and what it makes in the browser (pictures, files) as blob: and data:. */
+const EDITOR = {
+  img: ['blob:', 'https://i.ytimg.com', 'https://i.vimeocdn.com'],
+  connect: ['blob:', 'data:', 'https://vimeo.com'],
+};
+
+// An inline script that runs (not JSON, JSON-LD or a template).
+const RUNS = /^(module|text\/javascript|application\/javascript)?$/i;
+const SCRIPT = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+const attr = (attrs, name) => new RegExp(`\\s${name}\\s*=\\s*"([^"]*)"`, 'i').exec(attrs)?.[1];
+
+/** The hash of each inline script that runs in a page, as CSP writes it. @param {string} html */
+export function scriptHashes(html) {
+  const hashes = new Set();
+  for (const [, attrs, code] of html.matchAll(SCRIPT))
+    if (attr(attrs, 'src') === undefined && RUNS.test(attr(attrs, 'type') ?? ''))
+      hashes.add(`'sha256-${createHash('sha256').update(code, 'utf8').digest('base64')}'`);
+  return [...hashes];
+}
+
+/** The other addresses (origins) a page's HTML loads its scripts, frames and pictures from.
+ * @param {string} html @returns {Required<Pick<Sources, 'script' | 'frame' | 'img'>>} */
+export function pageOrigins(html) {
+  const found = { script: new Set(), frame: new Set(), img: new Set() };
+  const add = (set, url) => {
+    try {
+      const { protocol, origin } = new URL(url.replace(/&amp;/g, '&'));
+      if (protocol === 'https:' || protocol === 'http:') set.add(origin);
+    } catch {}
+  };
+  for (const [, attrs] of html.matchAll(/<script\b([^>]*)>/gi)) add(found.script, attr(attrs, 'src') ?? '');
+  for (const [, attrs] of html.matchAll(/<iframe\b([^>]*)>/gi)) add(found.frame, attr(attrs, 'src') ?? attr(attrs, 'data-src') ?? '');
+  for (const [, attrs] of html.matchAll(/<(?:img|source)\b([^>]*)>/gi)) {
+    add(found.img, attr(attrs, 'src') ?? '');
+    for (const part of (attr(attrs, 'srcset') ?? '').split(',')) add(found.img, part.trim().split(/\s+/)[0]);
+  }
+  return { script: [...found.script], frame: [...found.frame], img: [...found.img] };
+}
+
+/** The policy, from its directives (an empty one is left out, `none` when it must say so).
+ * @param {Record<string, (string | undefined)[]>} directives */
+function policy(directives) {
+  return Object.entries(directives)
+    .map(([name, values]) => [name, [...new Set(values.filter(Boolean))]])
+    .map(([name, values]) => `${name} ${values.length ? values.join(' ') : "'none'"}`)
+    .join('; ');
+}
+
+/** A page's policy: on the site, or the editor's (`editor`). @param {string} html
+ * @param {{ editor?: boolean, site?: Sources, images?: string[] }} options */
+export function pagePolicy(html, { editor = false, site = {}, images = [] }) {
+  const page = pageOrigins(html);
+  const s = editor ? joined(EDITOR, { img: images }) : joined(VIDEOS, site, page);
+  return policy({
+    'default-src': ["'self'"],
+    'script-src': ["'self'", ...scriptHashes(html), ...s.script],
+    'style-src': ["'self'", "'unsafe-inline'", ...s.style],
+    'img-src': ["'self'", 'data:', ...s.img],
+    'font-src': ["'self'", 'data:'],
+    'connect-src': ["'self'", ...s.connect],
+    'media-src': ["'self'", ...(editor ? ['blob:', 'data:'] : [])],
+    // The editor shows a page in a frame of its own (srcdoc, PageFrame in ui.tsx).
+    'frame-src': editor ? ["'self'", 'blob:', 'data:'] : s.frame,
+    'worker-src': ["'self'"],
+    'form-action': ["'self'", ...s.form],
+    'object-src': [],
+    'base-uri': ["'self'"],
+  });
+}
+
+/** The policy as the first thing in a page's <head> (after its charset, which must stay in its first bytes).
+ * @param {string} html @param {string} value */
+export function withPolicy(html, value) {
+  const meta = `<meta http-equiv="Content-Security-Policy" content="${value.replace(/&/g, '&amp;').replace(/"/g, '&quot;')}">`;
+  const at = /<meta\s+charset\s*=\s*"?[\w-]+"?\s*\/?>/i.exec(html) ?? /<head\b[^>]*>/i.exec(html);
+  if (!at) return undefined;
+  const end = at.index + at[0].length;
+  return html.slice(0, end) + meta + html.slice(end);
+}
+
+/** The Astro integration that writes the policy into every page built (packages/editor/astro.mjs).
+ * @param {{ site?: Sources }} [options] @returns {import('astro').AstroIntegration} */
+export function csp({ site = {} } = {}) {
+  return {
+    name: 'content-security-policy',
+    hooks: {
+      'astro:build:done': ({ dir, logger }) => {
+        const root = fileURLToPath(dir);
+        const files = readdirSync(root, { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('.html'));
+        const pages = files.map((file) => ({ file, html: readFileSync(join(root, file), 'utf8') }));
+        // The editor shows the site's pages in its preview, with their pictures.
+        const images = [...new Set(pages.flatMap((p) => pageOrigins(p.html).img))];
+        const missing = [];
+        for (const { file, html } of pages) {
+          const editor = file.split(/[\\/]/)[0] === 'editor';
+          const out = withPolicy(html, pagePolicy(html, { editor, site, images }));
+          if (out) writeFileSync(join(root, file), out);
+          else missing.push(file);
+        }
+        if (missing.length) throw new Error(`Content-Security-Policy: ingen <head> i ${missing.join(', ')}`);
+        logger.info(`${pages.length} sider har en Content-Security-Policy.`);
+      },
+    },
+  };
+}

package/lib/cspSources.mjs

@@ -1,60 +1,60 @@
-// What a site or an app may add to the pages' Content Security Policy (csp.mjs), by kind (an app's csp.json, the
-// site's own addresses), and the checks of it. No dependencies, so the site's Worker can use it too (the app
-// "Cookiescanner" allows an address the policy stopped).
-
-/** @typedef {{ script?: string[], style?: string[], img?: string[], connect?: string[], frame?: string[], form?: string[] }} Sources */
-
-/** The kinds of sources a site or an app can add (a Sources' keys, csp.json's). */
-export const KINDS = ['script', 'style', 'img', 'connect', 'frame', 'form'];
-
-// A source as a site or an app gives it: an address (origin) on https, with `*.` for all under a domain. Nothing that
-// lets everything through (`*`, `https:`, 'unsafe-inline', 'unsafe-eval').
-const SOURCE = /^https:\/\/(\*\.)?[a-z0-9-]+(\.[a-z0-9-]+)+(:\d+)?$/;
-
-/** Whether a source is one a site or an app may give (see SOURCE). @param {unknown} source */
-export const isSource = (source) => typeof source === 'string' && SOURCE.test(source);
-
-/** The kind of sources a directive of the policy takes, as a browser names it when it stops something
- * (securitypolicyviolation's violatedDirective: img-src, script-src-elem …); undefined for one a site or an app cannot
- * add to (font-src, media-src …). @param {string} directive */
-export function kindOf(directive) {
-  if (directive === 'form-action') return 'form';
-  if (directive === 'child-src') return 'frame';
-  const kind = /^(script|style|img|connect|frame)-src(-elem|-attr)?$/.exec(directive)?.[1];
-  return kind;
-}
-
-/** What is wrong with sources written in a file (an app's csp.json), each as a sentence; none when they are right.
- * @param {unknown} sources @param {string} file */
-export function sourcesProblems(sources, file) {
-  if (!sources || typeof sources !== 'object' || Array.isArray(sources)) return [`${file}: skal være et objekt med ${KINDS.join(', ')}.`];
-  return Object.entries(sources).flatMap(([kind, values]) =>
-    !KINDS.includes(kind)
-      ? [`${file}: "${kind}" er ikke en af ${KINDS.join(', ')}.`]
-      : !Array.isArray(values)
-        ? [`${file}: "${kind}" skal være en liste af adresser.`]
-        : values
-            .filter((v) => !isSource(v))
-            .map(
-              (v) =>
-                `${file}: ${JSON.stringify(v)} under "${kind}" er ikke en adresse som https://eksempel.dk eller https://*.eksempel.dk.`,
-            ),
-  );
-}
-
-/** Whether the sources allow an address (its origin, or one under a `*.` domain), as any kind or as `kind`.
- * @param {Sources} sources @param {string} url @param {string} [kind] */
-export function allows(sources, url, kind) {
-  const { origin, host } = new URL(url);
-  return (kind ? (sources[kind] ?? []) : Object.values(sources).flat()).some(
-    (s) => s === origin || (s.startsWith('https://*.') && host.endsWith(s.slice('https://*'.length))),
-  );
-}
-
-/** The sources together. @param {Sources[]} all @returns {Required<Sources>} */
-export function joined(...all) {
-  /** @type {Required<Sources>} */
-  const sum = Object.fromEntries(KINDS.map((kind) => [kind, []]));
-  for (const sources of all) for (const kind of KINDS) sum[kind].push(...(sources[kind] ?? []));
-  return sum;
-}
+// What a site or an app may add to the pages' Content Security Policy (csp.mjs), by kind (an app's csp.json, the
+// site's own addresses), and the checks of it. No dependencies, so the site's Worker can use it too (the app
+// "Cookiescanner" allows an address the policy stopped).
+
+/** @typedef {{ script?: string[], style?: string[], img?: string[], connect?: string[], frame?: string[], form?: string[] }} Sources */
+
+/** The kinds of sources a site or an app can add (a Sources' keys, csp.json's). */
+export const KINDS = ['script', 'style', 'img', 'connect', 'frame', 'form'];
+
+// A source as a site or an app gives it: an address (origin) on https, with `*.` for all under a domain. Nothing that
+// lets everything through (`*`, `https:`, 'unsafe-inline', 'unsafe-eval').
+const SOURCE = /^https:\/\/(\*\.)?[a-z0-9-]+(\.[a-z0-9-]+)+(:\d+)?$/;
+
+/** Whether a source is one a site or an app may give (see SOURCE). @param {unknown} source */
+export const isSource = (source) => typeof source === 'string' && SOURCE.test(source);
+
+/** The kind of sources a directive of the policy takes, as a browser names it when it stops something
+ * (securitypolicyviolation's violatedDirective: img-src, script-src-elem …); undefined for one a site or an app cannot
+ * add to (font-src, media-src …). @param {string} directive */
+export function kindOf(directive) {
+  if (directive === 'form-action') return 'form';
+  if (directive === 'child-src') return 'frame';
+  const kind = /^(script|style|img|connect|frame)-src(-elem|-attr)?$/.exec(directive)?.[1];
+  return kind;
+}
+
+/** What is wrong with sources written in a file (an app's csp.json), each as a sentence; none when they are right.
+ * @param {unknown} sources @param {string} file */
+export function sourcesProblems(sources, file) {
+  if (!sources || typeof sources !== 'object' || Array.isArray(sources)) return [`${file}: skal være et objekt med ${KINDS.join(', ')}.`];
+  return Object.entries(sources).flatMap(([kind, values]) =>
+    !KINDS.includes(kind)
+      ? [`${file}: "${kind}" er ikke en af ${KINDS.join(', ')}.`]
+      : !Array.isArray(values)
+        ? [`${file}: "${kind}" skal være en liste af adresser.`]
+        : values
+            .filter((v) => !isSource(v))
+            .map(
+              (v) =>
+                `${file}: ${JSON.stringify(v)} under "${kind}" er ikke en adresse som https://eksempel.dk eller https://*.eksempel.dk.`,
+            ),
+  );
+}
+
+/** Whether the sources allow an address (its origin, or one under a `*.` domain), as any kind or as `kind`.
+ * @param {Sources} sources @param {string} url @param {string} [kind] */
+export function allows(sources, url, kind) {
+  const { origin, host } = new URL(url);
+  return (kind ? (sources[kind] ?? []) : Object.values(sources).flat()).some(
+    (s) => s === origin || (s.startsWith('https://*.') && host.endsWith(s.slice('https://*'.length))),
+  );
+}
+
+/** The sources together. @param {Sources[]} all @returns {Required<Sources>} */
+export function joined(...all) {
+  /** @type {Required<Sources>} */
+  const sum = Object.fromEntries(KINDS.map((kind) => [kind, []]));
+  for (const sources of all) for (const kind of KINDS) sum[kind].push(...(sources[kind] ?? []));
+  return sum;
+}