@morphemecms/cms 0.7.0 → 0.8.0

package/site/icons.mjs

@@ -5,7 +5,7 @@
 // PACK_SOURCES, by the maps here: Phosphor's name → the set's icon, chosen for what it means where it is used (by its own
 // name in the set, else by what it shows: Phosphor's `browser`, a window with a bar at the top, is Material Symbols'
 // `web`). An icon a set has none of (a brand's logo; Lucide has none) is Pictogrammers' Material Design Icons'
-// (MATERIAL_DESIGN_ICONS), with its licence beside the pack's own. check:content stops at a pack without an icon the
+// (MATERIAL_DESIGN_ICONS; one neither has, Phosphor's filled icon: PHOSPHOR_FILL_ICONS), with its licence beside the pack's own. check:content stops at a pack without an icon the
 // site or the editor draws (themeProblems and iconPackProblems in packages/editor/site/theme.mjs).
 import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { join, relative } from 'node:path';
@@ -80,18 +80,32 @@ export const MATERIAL_DESIGN_ICONS = {
     'arrows-in-line-horizontal': 'arrow-collapse-horizontal',
     'arrows-out-line-horizontal': 'arrow-expand-horizontal',
     binoculars: 'binoculars',
+    'facebook-logo': 'facebook',
     'github-logo': 'github',
     'google-logo': 'google',
+    'linkedin-logo': 'linkedin',
+    'pinterest-logo': 'pinterest',
     'hard-drives': 'harddisk',
     scan: 'scan-helper',
     swatches: 'palette-swatch',
   },
   lucide: {
+    'facebook-logo': 'facebook',
     'github-logo': 'github',
     'google-logo': 'google',
+    'linkedin-logo': 'linkedin',
+    'pinterest-logo': 'pinterest',
   },
 };
 
+/** For each system pack but Phosphor's: Phosphor's names of the icons that neither the pack's set nor Material Design Icons has
+ * (X's logo: Material Design Icons has only the old Twitter bird, which X's brand rules forbid), drawn from Phosphor's filled
+ * icon (`fill/<name>-fill.svg`). */
+export const PHOSPHOR_FILL_ICONS = {
+  'material-symbols': ['x-logo'],
+  lucide: ['x-logo'],
+};
+
 /** Phosphor's name → Material Symbols' (Outlined, weight 400; `-fill` the filled one), for every icon the site and the
  * editor draw (usedIcons) but those in MATERIAL_DESIGN_ICONS['material-symbols']. */
 export const MATERIAL_SYMBOLS = {
@@ -473,11 +487,19 @@ export const PACK_MAPS = { 'material-symbols': MATERIAL_SYMBOLS, lucide: LUCIDE
  * packs' maps name (an app's icon, which the CMS itself may not draw), sorted. */
 export const phosphorNames = (used) =>
   [
-    ...new Set([...used, ...Object.values(PACK_MAPS).flatMap(Object.keys), ...Object.values(MATERIAL_DESIGN_ICONS).flatMap(Object.keys)]),
+    ...new Set([
+      ...used,
+      ...Object.values(PACK_MAPS).flatMap(Object.keys),
+      ...Object.values(MATERIAL_DESIGN_ICONS).flatMap(Object.keys),
+      ...Object.values(PHOSPHOR_FILL_ICONS).flat(),
+    ]),
   ].sort();
 
 /** The names the system's pack has an icon by in its maps (its set's and Material Design Icons'); all for Phosphor's. */
-const mapped = (pack) => (PACK_MAPS[pack] ? [...Object.keys(PACK_MAPS[pack]), ...Object.keys(MATERIAL_DESIGN_ICONS[pack] ?? {})] : null);
+const mapped = (pack) =>
+  PACK_MAPS[pack]
+    ? [...Object.keys(PACK_MAPS[pack]), ...Object.keys(MATERIAL_DESIGN_ICONS[pack] ?? {}), ...(PHOSPHOR_FILL_ICONS[pack] ?? [])]
+    : null;
 
 /** Whether a name is one the site and the editor draw an icon by: Phosphor's (regular, and the filled ones as
  * `<name>-fill`). A pack's file and a theme's own icon have one of them. */

package/site/materialSymbols.d.mts

@@ -1,5 +1,11 @@
-/** The module's source: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`, the keys as
- * import.meta.glob names them (src/materialIcons.ts). With `ssr` false: an empty object. */
+/** All Outlined files as text, read one at a time: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`,
+ * the keys as import.meta.glob named them. `dir` is the URL or the path of the outlined/ folder. */
+export function materialFiles(dir: any): {};
+/** The module's source: `export default` of all the files (materialFiles). */
+export function materialModule(): string;
+/** The SSR module's source: the same as materialModule. With `ssr` false: an empty object. */
 export function materialSsrModule(ssr: any): string;
+/** The virtual module's id as imported (src/materialIcons.ts). */
+export const MATERIAL_ALL: "virtual:material-symbols";
 /** The virtual module's id as imported (packages/editor/src/icon.tsx). */
 export const MATERIAL_SSR: "virtual:material-symbols-ssr";

package/site/materialSymbols.mjs

@@ -1,19 +1,35 @@
-// The Material Symbols (Outlined) files as the module `virtual:material-symbols-ssr`, answered by themePlugin (theme.mjs):
-// all of them as text on the server render (so a backup icon, icon.tsx, is in the built page's HTML at once), nothing in the browser
-// (where src/materialIcons.ts is the one lazy chunk). Exposes MATERIAL_SSR and materialSsrModule(). Reads @material-symbols/svg-400.
+// The Material Symbols (Outlined) files as two modules answered by themePlugin (theme.mjs): `virtual:material-symbols` (all of them
+// as text, for the one lazy chunk of src/materialIcons.ts) and `virtual:material-symbols-ssr` (all of them on the server render, so
+// a backup icon, icon.tsx, is in the built page's HTML at once; `{}` in the browser). Files are read one at a time, never globbed
+// (7,874 open files at once stops Cloudflare's build with EMFILE). Exposes MATERIAL_ALL, MATERIAL_SSR, materialFiles, materialModule,
+// materialSsrModule. Reads @material-symbols/svg-400.
 import { readdirSync, readFileSync } from 'node:fs';
 import { pathToFileURL } from 'node:url';
 
+/** The virtual module's id as imported (src/materialIcons.ts). */
+export const MATERIAL_ALL = 'virtual:material-symbols';
 /** The virtual module's id as imported (packages/editor/src/icon.tsx). */
 export const MATERIAL_SSR = 'virtual:material-symbols-ssr';
 
-/** The module's source: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`, the keys as
- * import.meta.glob names them (src/materialIcons.ts). With `ssr` false: an empty object. */
-export function materialSsrModule(ssr) {
-  if (!ssr) return 'export default {};';
-  const dir = new URL('node_modules/@material-symbols/svg-400/outlined/', pathToFileURL(`${process.cwd()}/`));
+const PREFIX = '/node_modules/@material-symbols/svg-400/outlined/';
+
+/** All Outlined files as text, read one at a time: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`,
+ * the keys as import.meta.glob named them. `dir` is the URL or the path of the outlined/ folder. */
+export function materialFiles(dir) {
+  const base = dir instanceof URL ? dir : pathToFileURL(`${String(dir).replace(/[\/]+$/, '')}/`);
   const files = {};
-  for (const name of readdirSync(dir))
-    if (name.endsWith('.svg')) files[`/node_modules/@material-symbols/svg-400/outlined/${name}`] = readFileSync(new URL(name, dir), 'utf8');
-  return `export default ${JSON.stringify(files)};`;
+  for (const name of readdirSync(base).sort()) if (name.endsWith('.svg')) files[PREFIX + name] = readFileSync(new URL(name, base), 'utf8');
+  return files;
+}
+
+const outlined = () => new URL(`node_modules/@material-symbols/svg-400/outlined/`, pathToFileURL(`${process.cwd()}/`));
+
+/** The module's source: `export default` of all the files (materialFiles). */
+export function materialModule() {
+  return `export default ${JSON.stringify(materialFiles(outlined()))};`;
+}
+
+/** The SSR module's source: the same as materialModule. With `ssr` false: an empty object. */
+export function materialSsrModule(ssr) {
+  return ssr ? materialModule() : 'export default {};';
 }

package/site/materialSymbols.test.mjs

@@ -0,0 +1,44 @@
+// Tests of materialFiles, materialModule and materialSsrModule (site/materialSymbols.mjs): the Material Symbols files as one module.
+// Run with `node --test site/materialSymbols.test.mjs`.
+import { strict as assert } from 'node:assert';
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test } from 'node:test';
+import { materialFiles, materialModule, materialSsrModule } from './materialSymbols.mjs';
+
+const PREFIX = '/node_modules/@material-symbols/svg-400/outlined/';
+const A = '<svg viewBox="0 0 1 1"><path d="A"/></svg>';
+const B = '<svg viewBox="0 0 2 2"><path d="B"/></svg>';
+
+const folder = mkdtempSync(join(tmpdir(), 'material-'));
+const dir = join(folder, 'node_modules/@material-symbols/svg-400/outlined');
+mkdirSync(dir, { recursive: true });
+writeFileSync(join(dir, 'b.svg'), B);
+writeFileSync(join(dir, 'a.svg'), A);
+writeFileSync(join(dir, 'c.txt'), 'not an icon');
+
+test('one key per svg file, sorted, with the file text', () => {
+  assert.deepEqual(materialFiles(dir), { [`${PREFIX}a.svg`]: A, [`${PREFIX}b.svg`]: B });
+  assert.deepEqual(Object.keys(materialFiles(dir)), [`${PREFIX}a.svg`, `${PREFIX}b.svg`]);
+});
+
+test('a file that is not an svg has no key', () => {
+  assert.ok(!Object.keys(materialFiles(dir)).some((k) => k.endsWith('c.txt')));
+});
+
+test('the module source parses to the same object as materialFiles', () => {
+  const cwd = process.cwd();
+  process.chdir(folder);
+  try {
+    const code = materialModule();
+    assert.ok(code.startsWith('export default '));
+    assert.deepEqual(JSON.parse(code.slice('export default '.length, -1)), materialFiles(dir));
+  } finally {
+    process.chdir(cwd);
+  }
+});
+
+test('without ssr the SSR module is an empty object', () => {
+  assert.equal(materialSsrModule(false), 'export default {};');
+});

package/site/schema.ts

@@ -3,6 +3,7 @@
 // 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 { sameAsOf } from './social.mjs';
 import { schema as facts } from '@site/schema';
 
 /** What a site says of itself in the structured data (@site/schema). */
@@ -61,6 +62,7 @@ export const business = {
   hasMap: site.mapsUrl,
   ...(facts.offers ? { hasOfferCatalog: { '@id': abs(facts.offers) } } : {}),
   ...(facts.person ? { founder: { '@id': ids.person }, employee: { '@id': ids.person } } : {}),
+  ...(site.social.profiles.length ? { sameAs: sameAsOf(site.social.profiles) } : {}),
 };
 
 export const businessRef = { '@type': facts.businessType, '@id': ids.business, name: site.name, url: abs('/') };

package/site/site.ts

@@ -1,5 +1,6 @@
-// Name, title, phone, email, address and CVR number: contact.json; the texts of "Book en tid": booking.json (the calendar
-// is the app Calendly's, src/apps/calendly/); the menus: menu.json and mobile-menu.json; the shared texts of the other blocks: their shared.ts, with those saved in
+// Name, title, phone, email, address and CVR number: contact.json; the profiles and share buttons: social.json (optional, an
+// older site has none); the texts of "Book en tid": booking.json (the calendar is the app Calendly's, src/apps/calendly/);
+// the menus: menu.json and mobile-menu.json; the shared texts of the other blocks: their shared.ts, with those saved in
 // blocks.json over them (`blockTexts`).
 // The site's owner edits them in the editor (/editor/); what the editor does not edit is the site's config
 // (src/site/config.ts).
@@ -10,6 +11,7 @@ import mobileMenu from '@data/mobile-menu.json';
 import blocks from '@data/blocks.json';
 import standardPages from '@data/standard-pages.json';
 import { config } from '@site/config';
+import { socialOf } from './social.mjs';
 import { sharedTexts, type SharedTexts } from '@morphemecms/cms/src/shared';
 import { standardShared } from '@morphemecms/cms/src/standard/sharedTexts';
 
@@ -19,6 +21,9 @@ const phoneIntl = `${contact.phone.trim().startsWith('+') ? '+' : '+45'}${contac
 // The CVR number, when it is filled in ("Virksomheden" › "Kontakt").
 const { cvr = '' } = contact as typeof contact & { cvr?: string };
 
+// Optional file: an older site has no social.json, so it is read with a glob, not an import.
+const socialFile = Object.values(import.meta.glob<Record<string, unknown>>('/src/data/social.json', { eager: true, import: 'default' }))[0];
+
 export const site = {
   name: contact.name,
   role: contact.role,
@@ -52,6 +57,8 @@ export const site = {
   /** The owner's picture (config.ts), or '' when the site has none. */
   portrait: config.picture?.src ?? '',
   portraitAlt: config.picture?.alt ?? '',
+  /** Profiles and share buttons (Company › Social media, social.json); all buttons on without the file. */
+  social: socialOf(socialFile),
   /** The logo in the structured data (config.ts), '/logo.svg' unless the site says otherwise. */
   logo: config.logo || '/logo.svg',
 };

package/site/social.d.mts

@@ -0,0 +1,37 @@
+/** @typedef {(typeof PROFILE_IDS)[number]} ProfileId */
+/** @typedef {(typeof SHARE_IDS)[number]} ShareId */
+/** @typedef {{ profiles: { id: ProfileId, url: string }[], share: ShareId[] }} Social */
+/**
+ * @param {Record<string, unknown> | undefined} raw
+ * @returns {Social}
+ */
+export function socialOf(raw: Record<string, unknown> | undefined): Social;
+/**
+ * @param {{ url: string, title: string, picture?: string }} post
+ * @param {ShareId[]} share
+ * @returns {{ id: ShareId, href?: string }[]}
+ */
+export function shareLinks(post: {
+    url: string;
+    title: string;
+    picture?: string;
+}, share: ShareId[]): {
+    id: ShareId;
+    href?: string;
+}[];
+/**
+ * @param {Social['profiles']} profiles
+ * @returns {string[]}
+ */
+export function sameAsOf(profiles: Social["profiles"]): string[];
+export const PROFILE_IDS: readonly ["facebook", "instagram", "linkedin", "x", "youtube", "tiktok", "pinterest"];
+export const SHARE_IDS: readonly ["facebook", "x", "linkedin", "pinterest", "copy-link"];
+export type ProfileId = (typeof PROFILE_IDS)[number];
+export type ShareId = (typeof SHARE_IDS)[number];
+export type Social = {
+    profiles: {
+        id: ProfileId;
+        url: string;
+    }[];
+    share: ShareId[];
+};

package/site/social.mjs

@@ -0,0 +1,92 @@
+// The site's social settings (src/data/social.json, Company > Social media in the editor): its profiles, for the structured
+// data (sameAs), and the share buttons under a blog post, with their addresses. Exposes socialOf, shareLinks, sameAsOf.
+
+export const PROFILE_IDS = /** @type {const} */ (['facebook', 'instagram', 'linkedin', 'x', 'youtube', 'tiktok', 'pinterest']);
+export const SHARE_IDS = /** @type {const} */ (['facebook', 'x', 'linkedin', 'pinterest', 'copy-link']);
+/** @typedef {(typeof PROFILE_IDS)[number]} ProfileId */
+/** @typedef {(typeof SHARE_IDS)[number]} ShareId */
+/** @typedef {{ profiles: { id: ProfileId, url: string }[], share: ShareId[] }} Social */
+
+/**
+ * @param {Record<string, unknown> | undefined} raw
+ * @returns {Social}
+ */
+export function socialOf(raw) {
+  const data = raw || {};
+
+  // Profiles
+  const profiles = [];
+  for (const id of PROFILE_IDS) {
+    const value = data[id];
+    if (typeof value === 'string') {
+      const trimmed = value.trim();
+      if (trimmed !== '') {
+        profiles.push({ id, url: trimmed });
+      }
+    }
+  }
+
+  // Share switches
+  const switchMap = {
+    facebook: 'shareFacebook',
+    x: 'shareX',
+    linkedin: 'shareLinkedin',
+    pinterest: 'sharePinterest',
+    'copy-link': 'shareCopyLink',
+  };
+
+  const share = [];
+  for (const id of SHARE_IDS) {
+    const key = switchMap[id];
+    const val = data[key];
+    if (val !== false) {
+      share.push(id);
+    }
+  }
+
+  return { profiles, share };
+}
+
+/**
+ * @param {{ url: string, title: string, picture?: string }} post
+ * @param {ShareId[]} share
+ * @returns {{ id: ShareId, href?: string }[]}
+ */
+export function shareLinks(post, share) {
+  const links = [];
+  const url = encodeURIComponent(post.url);
+  const title = encodeURIComponent(post.title);
+  const picture = post.picture ? encodeURIComponent(post.picture) : '';
+
+  for (const id of share) {
+    let item = { id };
+
+    if (id === 'facebook') {
+      item.href = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
+    } else if (id === 'x') {
+      item.href = `https://x.com/intent/post?url=${url}&text=${title}`;
+    } else if (id === 'linkedin') {
+      item.href = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
+    } else if (id === 'pinterest') {
+      if (post.picture && post.picture !== '') {
+        item.href = `https://pinterest.com/pin/create/button/?url=${url}&media=${picture}&description=${title}`;
+      } else {
+        continue;
+      }
+    } else if (id === 'copy-link') {
+      // No href, just { id: 'copy-link' }
+    }
+
+    links.push(item);
+  }
+
+  return links;
+}
+
+/**
+ * @param {Social['profiles']} profiles
+ * @returns {string[]}
+ */
+export function sameAsOf(profiles) {
+  return profiles.map((p) => p.url);
+}

package/site/social.test.mjs

@@ -0,0 +1,80 @@
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { socialOf, shareLinks, sameAsOf } from './social.mjs';
+
+test('no file', () => {
+  assert.deepEqual(socialOf(undefined), { profiles: [], share: ['facebook', 'x', 'linkedin', 'pinterest', 'copy-link'] });
+});
+
+test('empty object', () => {
+  assert.deepEqual(socialOf({}), { profiles: [], share: ['facebook', 'x', 'linkedin', 'pinterest', 'copy-link'] });
+});
+
+test('empty profiles are dropped', () => {
+  assert.deepEqual(socialOf({ facebook: '', x: '  ', linkedin: ' https://linkedin.com/in/a ' }).profiles, [
+    { id: 'linkedin', url: 'https://linkedin.com/in/a' },
+  ]);
+});
+
+test('profiles keep a fixed order', () => {
+  assert.deepEqual(
+    socialOf({ pinterest: 'https://p', facebook: 'https://f' }).profiles.map((p) => p.id),
+    ['facebook', 'pinterest'],
+  );
+});
+
+test('a switch turns a button off', () => {
+  assert.deepEqual(socialOf({ shareX: false }).share, ['facebook', 'linkedin', 'pinterest', 'copy-link']);
+});
+
+test('all switches off', () => {
+  assert.deepEqual(
+    socialOf({ shareFacebook: false, shareX: false, shareLinkedin: false, sharePinterest: false, shareCopyLink: false }).share,
+    [],
+  );
+});
+
+test('x encodes the address and title', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/b c/', title: 'Hi & bye' }, ['x']), [
+    { id: 'x', href: 'https://x.com/intent/post?url=https%3A%2F%2Fa.dk%2Fb%20c%2F&text=Hi%20%26%20bye' },
+  ]);
+});
+
+test('facebook', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T' }, ['facebook']), [
+    { id: 'facebook', href: 'https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fa.dk%2Fp%2F' },
+  ]);
+});
+
+test('linkedin', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T' }, ['linkedin']), [
+    { id: 'linkedin', href: 'https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fa.dk%2Fp%2F' },
+  ]);
+});
+
+test('pinterest with a picture', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T', picture: 'https://a.dk/i.webp' }, ['pinterest']), [
+    {
+      id: 'pinterest',
+      href: 'https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fa.dk%2Fp%2F&media=https%3A%2F%2Fa.dk%2Fi.webp&description=T',
+    },
+  ]);
+});
+
+test('pinterest without a picture is left out', () => {
+  assert.deepEqual(shareLinks({ url: 'https://a.dk/p/', title: 'T' }, ['pinterest', 'copy-link']), [{ id: 'copy-link' }]);
+});
+
+test('sameAs with no profiles', () => {
+  assert.deepEqual(sameAsOf([]), []);
+});
+
+test('sameAs keeps the order', () => {
+  assert.deepEqual(
+    sameAsOf([
+      { id: 'facebook', url: 'https://f' },
+      { id: 'x', url: 'https://x' },
+    ]),
+    ['https://f', 'https://x'],
+  );
+});

package/site/theme.d.mts

@@ -1,3 +1,5 @@
+/** What is wrong with a theme's styles/global.css import (`css` is the file's text): null when it is right. */
+export function importProblem(theme: any, css: any): string | null;
 /** The choice of icon pack made under "Indstillinger" › "Udseende" › "Ikonpakker" (src/data/icons.json, `{ "pack": "<id>"
  * }`), or undefined while none is made (then the theme's is used). */
 export function chosenPack(): any;

package/site/theme.mjs

@@ -11,7 +11,7 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 import { svgParts } from '@morphemecms/cms/lib/svg.mjs';
 import { declarationProblems, ownerId } from '@morphemecms/cms/lib/licenses.mjs';
 import { installedPacks, isIconName, packFolder, packProblems, phosphorFile, svgProblems, usedIcons } from './icons.mjs';
-import { MATERIAL_SSR, materialSsrModule } from './materialSymbols.mjs';
+import { MATERIAL_ALL, MATERIAL_SSR, materialModule, materialSsrModule } from './materialSymbols.mjs';
 import { ICON_PACK_FILE, ICON_PACK_LICENSE, SYSTEM_PACKS, THEME_PACKS_FOLDER, packInUse, packTheme, themePackId } from './iconPacks.mjs';
 import { MOTION_SCHEMES } from '@morphemecms/cms/lib/motion-schemes.mjs';
 import { storeImportProblems } from './storeTheme.mjs';
@@ -34,12 +34,16 @@ export const themeFolder = (theme) =>
 // What the standard theme has, as its folder in src/themes/: what the site's pages (packages/editor/pages/) and the editor
 // (src/site/) take from it as @theme. Besides these, the look of its blocks (blocks/<type>/) and what they import.
 // Another theme needs only theme.json and styles/global.css (OWN_FILES); the rest it may have, else it is the
-// standard theme's.
+// standard theme's. A theme may replace each part of the post page (components/Post*, ShareRow, RelatedPosts) by a file
+// of the same name.
 export const THEME_FILES = [
   'theme.json',
   'styles/global.css',
   'layouts/PageLayout.astro',
   'layouts/PostLayout.astro',
+  ...['PostHeader.astro', 'PostAuthor.astro', 'PostMeta.tsx', 'ShareRow.astro', 'PostCard.tsx', 'RelatedPosts.astro'].map(
+    (f) => `components/${f}`,
+  ),
   ...['Home', 'Blog', 'Category', 'New', 'NotFound'].map((t) => `templates/${t}.astro`),
   'editor/previews.tsx',
   'editor/looks.mjs',
@@ -63,9 +67,19 @@ const CONTRACT_FILES = ['index.tsx', 'shared.ts', 'texts.ts', 'list.ts', 'fields
 // How a block looked before it was drawn from its view, once on the site and once in the editor: now View.tsx.
 const OLD_LOOK = ['Site.astro', 'draw.tsx'];
 
-// An import of the UI components (ui.css) or of the standard theme's CSS that has them (base.css, global.css); the
-// standard theme's own global.css imports ./base.css.
-const UI_IMPORT = /@import\s+['"](?:@morphemecms\/cms\/theme\/styles\/|\.\/)(?:ui|base|global)\.css['"]/;
+// The standard theme's own global.css imports ./base.css.
+const STANDARD_IMPORT = /@import\s+['"]\.\/base\.css['"]/;
+// Every other theme imports the standard theme's global.css, so Material is its fallback.
+const FALLBACK_IMPORT = /@import\s+['"]@morphemecms\/cms\/theme\/styles\/global\.css['"]/;
+
+/** What is wrong with a theme's styles/global.css import (`css` is the file's text): null when it is right. */
+export function importProblem(theme, css) {
+  if (theme === STANDARD_THEME)
+    return STANDARD_IMPORT.test(css) ? null : `${themeFolder(theme)}/styles/global.css: importerer ikke ./base.css.`;
+  return FALLBACK_IMPORT.test(css)
+    ? null
+    : `${themeFolder(theme)}/styles/global.css: importerer ikke standardtemaet, som er temaets fallback: @import '@morphemecms/cms/theme/styles/global.css' øverst.`;
+}
 
 const folders = (url) =>
   existsSync(url)
@@ -227,6 +241,7 @@ const PHOSPHOR_REACT = '@phosphor-icons/react';
 const PHOSPHOR_FILE = /@phosphor-icons\/core\/assets\/(?:regular|fill)\/([a-z0-9-]+)\.svg\?raw$/;
 const REACT_ICONS = '\0site-theme-icons';
 const FILE_ICON = '\0site-theme-icon:';
+const MATERIAL_ALL_ID = `\0${MATERIAL_ALL}`;
 const MATERIAL_SSR_ID = `\0${MATERIAL_SSR}`;
 
 /** The React component's name of a Phosphor icon by its file's name (`caret-right` → CaretRight), when Phosphor has it. */
@@ -311,13 +326,13 @@ export function themeProblems(theme) {
   if (theme === STANDARD_THEME)
     for (const type of standard)
       if (!has(`${themeFolder(theme)}/blocks/${type}/View.tsx`)) problems.push(`${themeFolder(theme)}/blocks/${type}/View.tsx mangler.`);
-  // Every theme draws the UI components (styles/ui.css: the buttons and icon buttons): it imports them, itself or
-  // through the standard theme's base.css or global.css.
+  // Every theme builds on the standard theme. Another theme imports the standard theme's global.css, so a style it does
+  // not write is Material's; the standard theme's own imports ./base.css.
   const css = `${themeFolder(theme)}/styles/global.css`;
-  if (has(css) && !UI_IMPORT.test(readFileSync(new URL(css, root), 'utf8')))
-    problems.push(
-      `${css}: importerer ikke temaets UI-dele (knapperne): @import '@morphemecms/cms/theme/styles/ui.css', eller standardtemaets base.css eller global.css, der gør det.`,
-    );
+  if (has(css)) {
+    const problem = importProblem(theme, readFileSync(new URL(css, root), 'utf8'));
+    if (problem !== null) problems.push(problem);
+  }
   for (const type of folders(new URL(`${themeFolder(theme)}/blocks/`, root))) {
     const dir = `${themeFolder(theme)}/blocks/${type}`;
     if (!standard.has(type)) problems.push(`${dir}: et tema kan kun have udseendet af en standardblok, og "${type}" er ikke en.`);
@@ -471,6 +486,7 @@ export function themePlugin() {
       // The theme's icons import Phosphor's own.
       if (source === PHOSPHOR_REACT) return own && importer !== REACT_ICONS ? REACT_ICONS : null;
       if (source === ALL_ICONS) return '\0' + ALL_ICONS;
+      if (source === MATERIAL_ALL) return MATERIAL_ALL_ID;
       if (source === MATERIAL_SSR) return MATERIAL_SSR_ID;
       const icon = source.match(PHOSPHOR_FILE)?.[1];
       if (icon) return svgParts(icons[icon]) ? FILE_ICON + icon : null;
@@ -485,6 +501,7 @@ export function themePlugin() {
       return null;
     },
     load(id, options) {
+      if (id === MATERIAL_ALL_ID) return materialModule();
       if (id === MATERIAL_SSR_ID) return materialSsrModule(options?.ssr);
       if (id === REACT_ICONS) return reactIcons(icons);
       if (id === '\0' + ALL_ICONS)

package/site/themeImport.test.mjs

@@ -0,0 +1,40 @@
+// Tests of importProblem (site/theme.mjs): every theme imports Material's global.css as its fallback.
+// Run with `node --test site/themeImport.test.mjs`.
+import { strict as assert } from 'node:assert';
+import { registerHooks } from 'node:module';
+import { test } from 'node:test';
+
+// theme.mjs imports this package by its name, which only works from an installed copy: point the name at this folder.
+const PACKAGE = '@morphemecms/cms/';
+const pkg = new URL('../', import.meta.url);
+registerHooks({
+  resolve: (specifier, context, next) =>
+    specifier.startsWith(PACKAGE) ? next(new URL(specifier.slice(PACKAGE.length), pkg).href, context) : next(specifier, context),
+});
+const { importProblem } = await import('./theme.mjs');
+
+const GLOBAL = '@morphemecms/cms/theme/styles/global.css';
+
+test('another theme that imports the standard theme is right', () => {
+  assert.equal(importProblem('venus', `@import '${GLOBAL}';`), null);
+  assert.equal(importProblem('venus', `@import "${GLOBAL}";`), null);
+});
+
+test('another theme that imports base.css is told to import global.css', () => {
+  const problem = importProblem('venus', `@import '@morphemecms/cms/theme/styles/base.css';`);
+  assert.ok(problem.includes(GLOBAL));
+});
+
+test('another theme that imports ui.css is told where', () => {
+  const problem = importProblem('venus', `@import '@morphemecms/cms/theme/styles/ui.css';`);
+  assert.ok(problem.includes('src/themes/venus/styles/global.css'));
+});
+
+test('another theme with no import has a problem', () => {
+  assert.equal(typeof importProblem('venus', ':root { --radius: 1rem; }'), 'string');
+});
+
+test('the standard theme imports ./base.css', () => {
+  assert.equal(importProblem('saturn', `@import './base.css';`), null);
+  assert.ok(importProblem('saturn', ':root {}').includes('./base.css'));
+});