@morphemecms/cms 0.5.0 → 0.7.0

package/scripts/worker-modules.mjs

@@ -1,6 +1,6 @@
 // The site's Worker's modules (packages/editor/worker/) for the checks, built as wrangler builds them: with the
 // aliases in wrangler.jsonc (`@site/config`, `@site/worker`), in one bundle, so they share what they keep, as in the
-// Worker. Used by packages/editor/scripts/check-worker.mjs and packages/editor/scripts/check-consent.mjs.
+// Worker (`cloudflare:workers`, which only the runtime has, is an empty stand-in). Used by packages/editor/scripts/check-worker.mjs and packages/editor/scripts/check-consent.mjs.
 import { mkdtempSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
@@ -27,6 +27,16 @@ export async function workerModules(...names) {
     platform: 'node',
     outfile,
     alias: Object.fromEntries(Object.entries(alias).map(([from, to]) => [from, join(ROOT, to)])),
+    // `cloudflare:workers` only exists in the Worker's runtime (the app Cookiescanner's Playwright asks for its `env`).
+    plugins: [
+      {
+        name: 'cloudflare-workers-stub',
+        setup(b) {
+          b.onResolve({ filter: /^cloudflare:workers$/ }, () => ({ path: 'cloudflare:workers', namespace: 'stub' }));
+          b.onLoad({ filter: /.*/, namespace: 'stub' }, () => ({ contents: 'export const env = {};', loader: 'js' }));
+        },
+      },
+    ],
     logLevel: 'silent',
   });
   const bundle = await import(pathToFileURL(outfile).href);

package/site/breakpoints.d.mts

@@ -0,0 +1,6 @@
+/** The problems on one line: each a hand-written width or an old breakpoint name (empty when the line is fine).
+ * @param {string} line
+ * @returns {string[]} */
+export function lineProblems(line: string): string[];
+/** Every line, in the CMS's code (theme, editor, site, lib) and the site's themes and apps, that has a breakpoint of its own. */
+export function breakpointProblems(root?: string): any[];

package/site/breakpoints.mjs

@@ -0,0 +1,52 @@
+// The site keeps to Material 3's breakpoints (lib/breakpoints.mjs, --breakpoint-* in theme/styles/base.css): a width in a
+// media query (@media, matchMedia, useMedia, sizes), a variant with a width of its own or Tailwind's old breakpoint names is a problem
+// (lineProblems for one line, breakpointProblems for the tree, in check:content), in the CMS's code (also its defaults)
+// and in the site's themes, apps and own files.
+import { readFileSync, readdirSync, existsSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const own = fileURLToPath(new URL('..', import.meta.url));
+const CODE = /\.(css|astro|tsx|ts|js|mjs)$/;
+const RULES = [
+  [
+    /\(\s*(min|max)-width\s*:\s*\d|\(\s*width\s*(>=|<=|>|<)\s*\d|\d[\w.]*\s*(<=|<)\s*width\b/,
+    'en bredde i en medieforespørgsel (@media, matchMedia, useMedia, sizes); brug theme(--breakpoint-medium), -expanded, -large eller -extra-large i CSS og atLeast() fra lib/breakpoints.mjs i scripts',
+  ],
+  [
+    /(^|[\s"'`{:])(min|max)-\[/,
+    'et brudpunkt skrevet som en vilkårlig variant (min eller max med en bredde i klammer); brug medium:, expanded:, large: eller extra-large:',
+  ],
+  [/(^|[\s"'`{])(max-)?(sm|md|lg|xl|2xl):[\w[-]/, 'Tailwinds gamle brudpunkt; brug medium:, expanded:, large: eller extra-large:'],
+];
+
+function files(dir) {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir, { recursive: true, withFileTypes: true })
+    .filter((e) => e.isFile() && CODE.test(e.name) && !e.parentPath.includes('node_modules') && !/\.test\.mjs$/.test(e.name))
+    .map((e) => join(e.parentPath, e.name));
+}
+
+/** The problems on one line: each a hand-written width or an old breakpoint name (empty when the line is fine).
+ * @param {string} line
+ * @returns {string[]} */
+export function lineProblems(line) {
+  // A container query is about the box it sits in, not the window.
+  if (line.includes('@container')) return [];
+  return RULES.filter(([re]) => re.test(line)).map(([, what]) => what);
+}
+
+/** Every line, in the CMS's code (theme, editor, site, lib) and the site's themes and apps, that has a breakpoint of its own. */
+export function breakpointProblems(root = process.cwd()) {
+  const dirs = ['theme', 'src', 'site', 'lib', 'pages', 'defaults']
+    .map((d) => join(own, d))
+    .concat(['src/themes', 'src/apps', 'src/site'].map((d) => join(root, d)));
+  const problems = [];
+  for (const file of dirs.flatMap(files))
+    readFileSync(file, 'utf8')
+      .split('\n')
+      .forEach((line, i) => {
+        for (const what of lineProblems(line)) problems.push(`${relative(root, file)}:${i + 1}: ${what} (Material 3's brudpunkter).`);
+      });
+  return problems;
+}

package/site/breakpoints.test.mjs

@@ -0,0 +1,36 @@
+// Tests of the breakpoint check (breakpoints.mjs): which hand-written widths lineProblems flags and which lines it lets be.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { lineProblems } from './breakpoints.mjs';
+
+const flagged = [
+  '@media (min-width: 48rem) {',
+  '@media (max-width:640px) and (hover: hover) {',
+  "const wide = matchMedia('(min-width: 48rem)').matches;",
+  "useMedia('(min-width: 80rem)')",
+  'sizes="(min-width: 640px) 50vw, 100vw"',
+  "matchMedia('(width >= 48rem)')",
+  '@media (width < 600px) {',
+  '@media (width <= 40rem) {',
+  '@media (width > 40rem) {',
+  '@media (40rem <= width) {',
+  '<div class="min-[700px]:flex">',
+  '<div class="max-[700px]:hidden">',
+  '<div class="md:flex">',
+  '<div class="max-lg:hidden">',
+];
+const fine = [
+  '@container (width >= 34rem) {',
+  '@container navigation-bar (min-width: 37.5rem) {',
+  '@media (max-height: 30rem) {',
+  '@media (prefers-reduced-motion: reduce) {',
+  '@media print {',
+  '@media (hover: hover) {',
+  'sizes={`(min-width: ${BREAKPOINTS.expanded}px) 50vw, 100vw`}',
+  "matchMedia(atLeast('medium'))",
+  '<div class="min-h-[10rem] min-w-0 medium:flex">',
+  '<div class="max-w-[20rem] expanded:grid">',
+];
+
+for (const line of flagged) test(`flags ${line}`, () => assert.ok(lineProblems(line).length > 0));
+for (const line of fine) test(`lets ${line} be`, () => assert.deepEqual(lineProblems(line), []));

package/site/casing.d.mts

@@ -0,0 +1,3 @@
+/** Each folder whose files (by their name without the last extension) or folders have the same name but for case:
+ * Redirects.tsx beside redirects.ts, View.tsx beside view.ts. Img.astro beside Img.tsx is the same name, so not one. */
+export function casingProblems(paths: any): string[];

package/site/casing.mjs

@@ -0,0 +1,26 @@
+// Names in one folder that differ only in case (`npm run check:content`): Windows and macOS do not tell them apart, so
+// './Redirects' would open redirects.ts there (a .ts is tried before a .tsx) and the check and the build break, though
+// Linux finds the right file. Exposes casingProblems, given the repository's files (git ls-files).
+
+/** Each folder whose files (by their name without the last extension) or folders have the same name but for case:
+ * Redirects.tsx beside redirects.ts, View.tsx beside view.ts. Img.astro beside Img.tsx is the same name, so not one. */
+export function casingProblems(paths) {
+  const names = new Map();
+  for (const path of paths) {
+    const parts = path.split('/');
+    parts.forEach((part, i) => {
+      const folder = parts.slice(0, i).join('/');
+      const name = i === parts.length - 1 ? part.replace(/(.)\.[^.]+$/, '$1') : part;
+      const key = `${folder}/${name.toLowerCase()}`;
+      if (!names.has(key)) names.set(key, { folder, spellings: new Map() });
+      const spellings = names.get(key).spellings;
+      if (!spellings.has(name)) spellings.set(name, i === parts.length - 1 ? part : `${part}/`);
+    });
+  }
+  return [...names.values()]
+    .filter(({ spellings }) => spellings.size > 1)
+    .map(
+      ({ folder, spellings }) =>
+        `${folder || '.'}/: ${[...spellings.values()].join(' og ')} har samme navn, når store og små bogstaver ses som ens (Windows og macOS gør det). Lad komponenten beholde sit navn, og giv filen ved siden af sin rolle i navnet, fx redirectData.ts (se CLAUDE.md).`,
+    );
+}

package/site/content.config.ts

@@ -56,6 +56,8 @@ const pages = defineCollection({
       .regex(/^\/.*\/$/, 'path skal starte og slutte med /')
       .optional(),
     description: z.string().optional().default(''),
+    // Tags chosen in the editor, not shown on the page.
+    categories: z.array(z.string()).optional().default([]),
     order: z.number().optional().default(0),
     ...status,
     // Google title and description (the <title> and meta description). Empty: built from the title.

package/site/content.ts

@@ -4,10 +4,11 @@ import { displayTitle } from './text';
 import { isPreview } from './noindex.mjs';
 import { stateOf } from '@morphemecms/cms/lib/status.mjs';
 import { pageH1 } from '@morphemecms/cms/src/sections.mjs';
+import { withoutH1 } from '@morphemecms/cms/lib/without-h1.mjs';
 
 // From text.ts, which the editor uses too (it has no content collections).
 export { displayTitle, openingText } from './text';
-export { stateOf };
+export { stateOf, withoutH1 };
 
 export type Post = CollectionEntry<'blog'>;
 // Every page has a path: its own, or /<file name>/ for pages created in the editor.
@@ -89,9 +90,6 @@ export const pageHeading = (page: Page) => pageH1(page.body ?? '').heading ?? di
  * for the layout to draw in its place; else undefined, and the layout draws pageHeading. */
 export const pageHeadingHtml = (page: Page): string | undefined => pageH1(page.body ?? '').html;
 
-/** A page's text as HTML without its H1 at the top, which the layout draws in its own place (above the picture). */
-export const withoutH1 = (html: string) => html.replace(/^\s*<h1\b[^>]*>[\s\S]*?<\/h1>\s*/, '');
-
 /** Anchor for a testimonial on the testimonials page, e.g. "marie-louise-eriksen". */
 export const testimonialId = (t: { name: string }) =>
   t.name

package/site/defineSite.d.mts

@@ -132,5 +132,6 @@ declare namespace STANDARD {
     let cookieList: string;
     let buttonTargets: ButtonTarget[];
     let standardPages: string;
+    let fileRecords: string;
 }
 export {};

package/site/defineSite.mjs

@@ -125,6 +125,9 @@ const STANDARD = {
   /** Which pages are the front page, the blog page and the 404 page: `{ "front": "<its address>", "blog": …, "notFound": … }`
    * ("Indstillinger" › "Udseende" › "Standardsider", defaults/standardPages.ts). */
   standardPages: 'src/data/standard-pages.json',
+  /** The folder of the file records, one `<id>.json` per file in Filer that has tags (`{ src, categories, removed }`,
+   * src/fileRecords.mjs): what a file is tagged with and which tags were removed from it. */
+  fileRecords: 'src/data/files',
 };
 
 /** @typedef {SiteOwn & SiteChoices & typeof STANDARD} SiteConfig */

package/site/home.ts

@@ -4,6 +4,7 @@
 // e.g. a theme's components/home/), with the text above it that is its own (its lead), and the rest of the text
 // as sections of text ("text": a heading and Markdown). The types below are the standard blocks'; an app's block is a
 // section too, by its own type, which the theme that draws it types itself (e.g. its components/home/sections.ts).
+// A section under a coloured heading has its colour as `sectionColor` (src/sections.mjs).
 import setting from '@data/standard-pages.json';
 import { getPages, type Page, type PostChoice } from './content';
 import { isBlogCategory } from './categories';
@@ -44,7 +45,7 @@ export const allPostsLink = (choice: { show?: string; categories?: string[]; lin
 };
 
 export type SectionType = keyof Sections;
-export type HomeSection = { [T in SectionType]: { type: T; hidden?: boolean } & Sections[T] }[SectionType];
+export type HomeSection = { [T in SectionType]: { type: T; hidden?: boolean; sectionColor?: string } & Sections[T] }[SectionType];
 
 /** The address of the page that is the front page; its own address sends on to / (packages/editor/worker/index.js). */
 export const frontPath = setting.front;
@@ -56,7 +57,7 @@ export type FrontPage = { page: Page; heading: string; headingHtml?: string; sec
 export async function frontPage(): Promise<FrontPage> {
   const page = (await getPages({ previews: false })).find((p) => p.data.path === frontPath);
   if (!page) throw new Error(`src/data/standard-pages.json: forsiden, ${frontPath}, findes ikke, eller den er en kladde.`);
-  const sections = sectionsFromParts(partsOfMarkdown(page.body ?? ''), frontLeads) as HomeSection[];
+  const sections = sectionsFromParts(partsOfMarkdown(page.body ?? ''), frontLeads, { colors: true }) as HomeSection[];
   const h1 = pageH1(page.body);
   return { page, heading: h1.heading || page.data.title, headingHtml: h1.html, sections: sections.filter((s) => !s.hidden) };
 }