@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/scripts/compare-html.mjs

@@ -1,81 +1,81 @@
-// Compares the pages of two built sites, so a change in how the blocks are drawn can be shown to give the same site:
-// npx morpheme compare-html <before> [after, else dist]. Build the site before the change into a folder of its own
-// (npx astro build --outDir <before>), make the change, build again, and compare. What only differs in how it is
-// written is the same: whitespace between tags, comments (also those React puts between two pieces of text), the order
-// of a tag's attributes (and one written twice, in capitals, or with an empty value; an empty class; the order of the
-// classes; the spaces in a style; Astro's markers of a component's own <style>, data-astro-cid-…, which a part drawn by
-// React has not: check that the component's <style> styles only what it draws itself), a closing slash in a tag
-// (<img />), the hash in the name of a bundled file (/_astro/…), and the number of an island's prefix, which counts the
-// React components on the page before it. The scripts Astro bundles (type="module") are left out: what they do is
-// checked in a browser. Says the first place each page differs.
-import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
-import { join, relative, resolve } from 'node:path';
-
-const ROOT = `${process.cwd()}/`;
-const [before, after = 'dist'] = process.argv.slice(2).map((d) => resolve(ROOT, d));
-if (!before || !existsSync(before) || !existsSync(after)) {
-  console.error('Brug: npx morpheme compare-html <bygget site før> [bygget site efter, ellers dist]');
-  process.exit(1);
-}
-
-const pages = (dir) =>
-  readdirSync(dir, { recursive: true })
-    .filter((f) => f.endsWith('.html') && !f.startsWith('editor/') && statSync(join(dir, f)).isFile())
-    .sort();
-
-const attributes = (tag) =>
-  tag.replace(/^<([a-zA-Z][\w-]*)(\s[^>]*?)?\s*\/?>$/, (all, name, attrs = '') => {
-    // An attribute written twice is the first (as a browser reads it).
-    const seen = new Set();
-    const list = [...attrs.matchAll(/\s([^\s=]+)(?:="([^"]*)")?/g)]
-      .map(([, n, v]) => [n.toLowerCase(), v])
-      .filter(([n, v]) => !(n === 'class' && !v) && !n.startsWith('data-astro-cid-') && !seen.has(n) && seen.add(n))
-      .map(([n, v]) => [
-        n,
-        n === 'style'
-          ? v?.replace(/([:;])\s+/g, '$1').replace(/;$/, '')
-          : n === 'class'
-            ? v?.split(/\s+/).filter(Boolean).sort().join(' ')
-            : v,
-      ])
-      .map(([n, v]) => (v ? `${n}="${v}"` : n));
-    return `<${name}${list.length ? ` ${list.sort().join(' ')}` : ''}>`;
-  });
-
-const normal = (html) =>
-  html
-    .replace(/<script type="module"[^>]*>[\s\S]*?<\/script>/g, '')
-    .replace(/<!--[\s\S]*?-->/g, '')
-    .replace(/(<astro-island\b[^>]*?\sprefix=")r\d+"/g, '$1r"')
-    .replace(/\/_astro\/([\w.-]+?)\.[\w-]{8}\.(\w+)/g, '/_astro/$1.$2')
-    .replace(/<[a-zA-Z][^<>]*>/g, attributes)
-    .replace(/>\s+/g, '>')
-    .replace(/\s+</g, '<')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-const was = new Set(pages(before));
-const now = pages(after);
-const problems = [];
-for (const page of now) {
-  if (!was.has(page)) {
-    problems.push(`${page}: findes kun efter.`);
-    continue;
-  }
-  was.delete(page);
-  const a = normal(readFileSync(join(before, page), 'utf8'));
-  const b = normal(readFileSync(join(after, page), 'utf8'));
-  if (a === b) continue;
-  let i = 0;
-  while (a[i] === b[i]) i++;
-  const around = (s) => s.slice(Math.max(0, i - 120), i + 200);
-  problems.push(`${page}:\n  før:   …${around(a)}…\n  efter: …${around(b)}…`);
-}
-for (const page of was) problems.push(`${page}: findes kun før.`);
-
-if (problems.length) {
-  console.error(`${problems.length} af ${now.length} sider er ikke de samme (${relative(ROOT, before)} og ${relative(ROOT, after)}):\n`);
-  console.error(problems.join('\n\n'));
-  process.exit(1);
-}
-console.log(`De ${now.length} sider er de samme.`);
+// Compares the pages of two built sites, so a change in how the blocks are drawn can be shown to give the same site:
+// npx morpheme compare-html <before> [after, else dist]. Build the site before the change into a folder of its own
+// (npx astro build --outDir <before>), make the change, build again, and compare. What only differs in how it is
+// written is the same: whitespace between tags, comments (also those React puts between two pieces of text), the order
+// of a tag's attributes (and one written twice, in capitals, or with an empty value; an empty class; the order of the
+// classes; the spaces in a style; Astro's markers of a component's own <style>, data-astro-cid-…, which a part drawn by
+// React has not: check that the component's <style> styles only what it draws itself), a closing slash in a tag
+// (<img />), the hash in the name of a bundled file (/_astro/…), and the number of an island's prefix, which counts the
+// React components on the page before it. The scripts Astro bundles (type="module") are left out: what they do is
+// checked in a browser. Says the first place each page differs.
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
+import { join, relative, resolve } from 'node:path';
+
+const ROOT = `${process.cwd()}/`;
+const [before, after = 'dist'] = process.argv.slice(2).map((d) => resolve(ROOT, d));
+if (!before || !existsSync(before) || !existsSync(after)) {
+  console.error('Brug: npx morpheme compare-html <bygget site før> [bygget site efter, ellers dist]');
+  process.exit(1);
+}
+
+const pages = (dir) =>
+  readdirSync(dir, { recursive: true })
+    .filter((f) => f.endsWith('.html') && !f.startsWith('editor/') && statSync(join(dir, f)).isFile())
+    .sort();
+
+const attributes = (tag) =>
+  tag.replace(/^<([a-zA-Z][\w-]*)(\s[^>]*?)?\s*\/?>$/, (all, name, attrs = '') => {
+    // An attribute written twice is the first (as a browser reads it).
+    const seen = new Set();
+    const list = [...attrs.matchAll(/\s([^\s=]+)(?:="([^"]*)")?/g)]
+      .map(([, n, v]) => [n.toLowerCase(), v])
+      .filter(([n, v]) => !(n === 'class' && !v) && !n.startsWith('data-astro-cid-') && !seen.has(n) && seen.add(n))
+      .map(([n, v]) => [
+        n,
+        n === 'style'
+          ? v?.replace(/([:;])\s+/g, '$1').replace(/;$/, '')
+          : n === 'class'
+            ? v?.split(/\s+/).filter(Boolean).sort().join(' ')
+            : v,
+      ])
+      .map(([n, v]) => (v ? `${n}="${v}"` : n));
+    return `<${name}${list.length ? ` ${list.sort().join(' ')}` : ''}>`;
+  });
+
+const normal = (html) =>
+  html
+    .replace(/<script type="module"[^>]*>[\s\S]*?<\/script>/g, '')
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .replace(/(<astro-island\b[^>]*?\sprefix=")r\d+"/g, '$1r"')
+    .replace(/\/_astro\/([\w.-]+?)\.[\w-]{8}\.(\w+)/g, '/_astro/$1.$2')
+    .replace(/<[a-zA-Z][^<>]*>/g, attributes)
+    .replace(/>\s+/g, '>')
+    .replace(/\s+</g, '<')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const was = new Set(pages(before));
+const now = pages(after);
+const problems = [];
+for (const page of now) {
+  if (!was.has(page)) {
+    problems.push(`${page}: findes kun efter.`);
+    continue;
+  }
+  was.delete(page);
+  const a = normal(readFileSync(join(before, page), 'utf8'));
+  const b = normal(readFileSync(join(after, page), 'utf8'));
+  if (a === b) continue;
+  let i = 0;
+  while (a[i] === b[i]) i++;
+  const around = (s) => s.slice(Math.max(0, i - 120), i + 200);
+  problems.push(`${page}:\n  før:   …${around(a)}…\n  efter: …${around(b)}…`);
+}
+for (const page of was) problems.push(`${page}: findes kun før.`);
+
+if (problems.length) {
+  console.error(`${problems.length} af ${now.length} sider er ikke de samme (${relative(ROOT, before)} og ${relative(ROOT, after)}):\n`);
+  console.error(problems.join('\n\n'));
+  process.exit(1);
+}
+console.log(`De ${now.length} sider er de samme.`);

package/scripts/declarations.mjs

@@ -0,0 +1,10 @@
+// The .d.mts files under a folder, which scripts/types.mjs removes before it writes them and after the package is
+// packed. It never goes into node_modules or a folder whose name starts with a dot (.git, .claude and checkouts there).
+import { readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+export const declarations = (dir) =>
+  readdirSync(dir, { withFileTypes: true }).flatMap((e) => {
+    if (e.isDirectory()) return e.name === 'node_modules' || e.name.startsWith('.') ? [] : declarations(join(dir, e.name));
+    return e.isFile() && e.name.endsWith('.d.mts') ? [join(dir, e.name)] : [];
+  });

package/scripts/declarations.test.mjs

@@ -0,0 +1,32 @@
+// declarations() finds the .d.mts files in a package and never goes into node_modules or a dot-folder, where a nested
+// checkout with its own node_modules would make it slow and lose that checkout's files.
+import assert from 'node:assert/strict';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join } from 'node:path';
+import test from 'node:test';
+import { declarations } from './declarations.mjs';
+
+test('declarations skips node_modules and dot-folders', () => {
+  const root = mkdtempSync(join(tmpdir(), 'declarations-'));
+  try {
+    for (const file of [
+      'a.d.mts',
+      'a.mjs',
+      'lib/b.d.mts',
+      'lib/deep/c.d.mts',
+      'node_modules/x/d.d.mts',
+      '.claude/worktrees/w/e.d.mts',
+      '.claude/worktrees/w/node_modules/y/f.d.mts',
+    ]) {
+      mkdirSync(dirname(join(root, file)), { recursive: true });
+      writeFileSync(join(root, file), '');
+    }
+    assert.deepEqual(
+      declarations(root).sort(),
+      [join(root, 'a.d.mts'), join(root, 'lib', 'b.d.mts'), join(root, 'lib', 'deep', 'c.d.mts')].sort(),
+    );
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});

package/scripts/demo-site.mjs

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

package/scripts/editor-icons.mjs

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