@morphemecms/cms 0.0.0-stage → 0.1.0

package/pages/[...slug].astro

@@ -0,0 +1,51 @@
+---
+// Every blog post and imported page lives at a root URL, as on the site it was imported from:
+//   blog post  src/content/blog/mit-foerste-indlaeg.md     -> /mit-foerste-indlaeg/
+//   page       src/content/pages/ydelser/...               -> path from its front matter
+import { render } from 'astro:content';
+import PageLayout from '@theme/layouts/PageLayout.astro';
+import PostLayout from '@theme/layouts/PostLayout.astro';
+import { getPages, getPosts, type Page, type Post } from '@morphemecms/cms/site/content';
+import { standardPaths } from '@morphemecms/cms/site/standardPages';
+
+export async function getStaticPaths() {
+  const [posts, pages] = await Promise.all([getPosts({ unlisted: true }), getPages()]);
+  const seen = new Map<string, string>();
+  const claim = (slug: string, source: string) => {
+    if (seen.has(slug)) throw new Error(`URL /${slug}/ is used by both ${seen.get(slug)} and ${source}`);
+    seen.set(slug, source);
+  };
+  // The addresses of the pages in packages/editor/pages/ and of the editor, so a page cannot take them.
+  for (const slug of ['blog', 'editor', 'ny', '404']) claim(slug, `packages/editor/pages/${slug}`);
+
+  // The front page is at / (index.astro) and the blog page at /blog/ (blog/index.astro); their own addresses send on there
+  // (packages/editor/worker/index.js). The 404 page is the page for an address that does not exist (404.astro), so not at its own.
+  const standard = [standardPaths.front, standardPaths.blog, standardPaths.notFound];
+  const pageRoutes = pages
+    .filter((page) => !standard.includes(page.data.path))
+    .map((page) => {
+      const slug = page.data.path.replace(/^\/|\/$/g, '');
+      claim(slug, `pages/${page.id}`);
+      return { params: { slug }, props: { kind: 'page' as const, entry: page } };
+    });
+  const postRoutes = posts.map((post) => {
+    claim(post.id, `blog/${post.id}`);
+    return { params: { slug: post.id }, props: { kind: 'post' as const, entry: post } };
+  });
+  return [...pageRoutes, ...postRoutes];
+}
+
+type Props = { kind: 'page'; entry: Page } | { kind: 'post'; entry: Post };
+const props = Astro.props as Props;
+const { Content } = await render(props.entry);
+---
+
+{props.kind === 'post' ? (
+  <PostLayout post={props.entry}>
+    <Content />
+  </PostLayout>
+) : (
+  <PageLayout page={props.entry}>
+    <Content />
+  </PageLayout>
+)}

package/pages/_headers.txt

@@ -0,0 +1,31 @@
+# Response headers (Cloudflare reads this file from the assets; on Apache this would be .htaccess).
+# Format: an address (with * for the rest), then its headers, indented, one to a line.
+# They are added to the files and pages from dist/, not to the Worker's own answers (its redirects, /oauth/).
+#
+# Every page and file:
+# - Strict-Transport-Security: always HTTPS, the browser does not try http:// for a year. Not for the
+#   subdomains (no includeSubDomains), so another service on a subdomain is not affected.
+# - X-Content-Type-Options: a file is what its content-type says, nothing else.
+# - Referrer-Policy: other sites see only the domain a visitor came from, not the address of the page.
+# - X-Frame-Options: no other site can show the pages in a frame (Calendly and YouTube are shown in the
+#   site, not the other way round).
+# - Permissions-Policy: camera, microphone and location are never used, also not by Calendly or YouTube.
+# The Content-Security-Policy is in each page itself (a <meta> the build writes: packages/editor/lib/csp.mjs),
+# since it names the page's own scripts by their hashes.
+/*
+  Strict-Transport-Security: max-age=31536000
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+  X-Frame-Options: SAMEORIGIN
+  Permissions-Policy: camera=(), microphone=(), geolocation=()
+
+# An SVG file opened on its own (the logo, the favicon) is a page on the site's address, without the <meta> CSP the
+# pages have. Its own CSP lets it draw (its own CSS, a picture inside it as data:) and nothing else: no script runs,
+# nothing is loaded from elsewhere, and it is sandboxed, so it is never the site's address. The logo is also cleaned
+# when it is picked (cleanSvg in packages/editor/lib/svg.mjs); this holds for any SVG in the build.
+/*.svg
+  Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; img-src data:; sandbox
+
+# Scripts and fonts from the build get a new name whenever they change, so they can be kept for a year.
+/_astro/*
+  Cache-Control: public, max-age=31536000, immutable

package/pages/blog/index.astro

@@ -0,0 +1,10 @@
+---
+// The blog: the page chosen as the blog page (packages/editor/site/standardPages.ts), drawn by the theme
+// (src/themes/<theme>/templates/Blog.astro).
+import Blog from '@theme/templates/Blog.astro';
+import { blogPage } from '@morphemecms/cms/site/standardPages';
+
+const page = await blogPage();
+---
+
+<Blog {...page} />

package/pages/blog/kategori/[category].astro

@@ -0,0 +1,18 @@
+---
+// A tag's page on the blog, drawn by the theme (src/themes/<theme>/templates/Category.astro).
+import Category from '@theme/templates/Category.astro';
+import { getCategories, getPosts } from '@morphemecms/cms/site/content';
+
+export async function getStaticPaths() {
+  const [categories, posts] = await Promise.all([getCategories(), getPosts()]);
+  return categories.map((c) => ({
+    params: { category: c.slug },
+    props: { name: c.name, posts: posts.filter((p) => p.data.categories.includes(c.slug)) },
+  }));
+}
+
+const { category } = Astro.params;
+const { name, posts } = Astro.props;
+---
+
+<Category category={category} name={name} posts={posts} />

package/pages/editor/code-images.json.js

@@ -0,0 +1,25 @@
+// /editor/code-images.json: the uploaded pictures (/images/uploads/…) the site's own code uses (src/: its themes, apps
+// and config, e.g. the portrait in src/site/config.ts), not in the texts the editor has. "Filer" counts them as in use
+// and does not offer to delete them (packages/editor/src/Media.tsx).
+import fs from 'node:fs';
+import path from 'node:path';
+
+// The site's own code, from its root (the working directory).
+const SRC = `${path.resolve('src')}/`;
+// The texts are not the site's code; the editor reads them itself (and is not in src/).
+const SKIP = ['content', 'data/image-manifest.json'];
+const CODE = /\.(astro|ts|tsx|js|mjs|css)$/;
+const ADDRESS = /\/images\/uploads\/[^\s'"`)<>,]+\.(?:webp|jpe?g|png|gif|svg|avif)/gi;
+
+function walk(dir) {
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((e) => {
+    const file = path.join(dir, e.name);
+    if (SKIP.includes(path.relative(SRC, file))) return [];
+    return e.isDirectory() ? walk(file) : CODE.test(e.name) ? [file] : [];
+  });
+}
+
+export function GET() {
+  const used = new Set(walk(SRC).flatMap((file) => fs.readFileSync(file, 'utf8').match(ADDRESS) ?? []));
+  return new Response(JSON.stringify([...used].sort()));
+}

package/pages/editor/index.astro

@@ -0,0 +1,75 @@
+---
+// The editor (packages/editor/src/, docs/editor.md). A bare page in the site's style: no menu, footer,
+// cookie banner or tracking, and not in the sitemap or in search engines. It can be installed as an
+// app (/editor/manifest.webmanifest, packages/editor/pages/editor/manifest.webmanifest.js; icons from
+// packages/editor/scripts/editor-icons.mjs) and then opens
+// without the browser's bars. viewport-fit=cover: the app keeps clear of a phone's notch and home bar
+// itself (safe-area padding). interactive-widget=resizes-content: on Android the page gets shorter when
+// the keyboard opens, so the top bar and the text toolbar stay in view while typing. maximum-scale=1
+// (and touch-action in editor.css): no zooming in by a pinch or a double tap, which in Chrome on
+// Android pushes the bar with "Gem ændringer" out of sight below the screen.
+// The manifest has no colours on purpose: Chrome on Android paints the installed app's navigation bar
+// (the strip at the bottom of the screen) in them, and one colour cannot fit both light and dark mode.
+// Without them the bar follows the phone's own light or dark mode; the top bar follows the
+// theme-color tags below.
+// editor-version: the fingerprint of this editor's code, also in /editor/version.json; an editor
+// left open reloads itself when the two differ (packages/editor/src/deploy.ts).
+import '@theme/styles/global.css';
+import App from '@morphemecms/cms/src/App.tsx';
+import { editorVersion } from '@morphemecms/cms/site/editor-version.mjs';
+import { config } from '@site/config';
+// The site's colours (the theme's styles/global.css); the editor puts the ones it has loaded in their place, so
+// a change under "Farver" shows at once (packages/editor/src/theme.ts).
+// With those a file written before them does not have made (completeColors).
+import colors from '@data/colors.json';
+import { colorsCss } from '@morphemecms/cms/lib/colors';
+import { completeColors } from '@morphemecms/cms/lib/dynamic-colors';
+import { colorRoles } from '@site/colors';
+// How the site moves, which the editor moves by too (packages/editor/lib/motion.ts); the editor puts a new choice under
+// "Bevægelse" in its place at once (packages/editor/src/theme.ts).
+import { motionCss } from '@morphemecms/cms/lib/motion';
+import { motionScheme } from '@morphemecms/cms/site/motion';
+---
+
+<!doctype html>
+<html lang={config.locale} data-motion-scheme={motionScheme}>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content"
+    />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="editor-version" content={editorVersion()} />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="manifest" href="/editor/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/editor/apple-touch-icon.png" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content={config.name} />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <!-- The top bar in the background's colour, the screens' own and the app bar's at the top; data-color: that of its
+         own mode, for a picked one. -->
+    <meta name="theme-color" content={colors.light.bg} data-color={colors.light.bg} media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content={colors.dark.bg} data-color={colors.dark.bg} media="(prefers-color-scheme: dark)" />
+    <style id="site-colors" is:inline set:html={colorsCss(completeColors(colors, colorRoles))}></style>
+    <style id="site-motion" is:inline set:html={motionCss(motionScheme)}></style>
+    <!-- Light or dark as picked on "Konto" (packages/editor/src/theme.ts), before the page is drawn. The
+         language (lang) is the site's until the editor has picked its own (packages/editor/src/i18n/). -->
+    <script is:inline>
+      try {
+        const theme = localStorage.getItem('editor-theme');
+        if (theme === 'light' || theme === 'dark') {
+          document.documentElement.dataset.theme = theme;
+          const metas = [...document.querySelectorAll('meta[name="theme-color"]')];
+          const own = metas.find((m) => m.media.includes('dark') === (theme === 'dark'));
+          for (const m of metas) m.content = own.dataset.color;
+        }
+      } catch {}
+    </script>
+    <title>{config.name}</title>
+  </head>
+  <body>
+    <App client:only="react" />
+  </body>
+</html>

package/pages/editor/manifest.webmanifest.js

@@ -0,0 +1,23 @@
+// /editor/manifest.webmanifest: the editor as an app on a phone's home screen or a computer, with the
+// site's name, description and language for it (src/site/config.ts) and the icons from
+// packages/editor/scripts/editor-icons.mjs. No colours, on purpose (packages/editor/pages/editor/index.astro).
+import { config } from '@site/config';
+
+export function GET() {
+  return new Response(`{
+  "name": ${JSON.stringify(config.name)},
+  "short_name": ${JSON.stringify(config.name)},
+  "description": ${JSON.stringify(config.description)},
+  "lang": ${JSON.stringify(config.locale)},
+  "id": "/editor/",
+  "start_url": "/editor/",
+  "scope": "/editor/",
+  "display": "standalone",
+  "icons": [
+    { "src": "/editor/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/editor/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/editor/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}
+`);
+}

package/pages/editor/sw.js

@@ -0,0 +1,33 @@
+// The editor's service worker, only for its notifications on the phone or computer (packages/editor/src/notifications.ts):
+// while the editor is open but not on screen, it shows them (on Android that works only through a service worker), and
+// when the site's Worker sends one (Web Push, packages/editor/worker/push.js: the site is updated after a save, an app's notification),
+// the browser wakes it, also when the editor is closed, and it shows that. It does not cache or touch any request.
+// Tapping a notification brings the editor to the front, on the screen it is about.
+self.addEventListener('push', (event) => {
+  let data = {};
+  try {
+    data = event.data?.json() ?? {};
+  } catch {}
+  event.waitUntil(
+    self.registration.showNotification(data.title || 'Editor', {
+      body: data.body ?? '',
+      icon: '/editor/icon-192.png',
+      tag: data.tag || 'site',
+      data: { to: data.to },
+    }),
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const to = event.notification.data?.to;
+  const url = `/editor/${to ? `#${to}` : ''}`;
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window' }).then((open) => {
+      if (!open.length) return self.clients.openWindow(url);
+      // The open editor goes there itself (App.tsx), so a form with changes asks first.
+      if (to) open[0].postMessage({ to });
+      return open[0].focus();
+    }),
+  );
+});

package/pages/editor/sw.js.js

@@ -0,0 +1,4 @@
+// /editor/sw.js: the editor's service worker (sw.js), for its notifications.
+import code from './sw.js?raw';
+
+export const GET = () => new Response(code, { headers: { 'content-type': 'text/javascript' } });

package/pages/editor/thumbnails.json.js

@@ -0,0 +1,21 @@
+// /editor/thumbnails.json: for each uploaded picture (/images/uploads/…), its 480 px wide copy
+// (/images/_r/…, made by packages/editor/scripts/responsive-images.mjs before the build), which the grid in "Filer"
+// shows instead of the picture itself (packages/editor/src/Media.tsx). A picture without one (it is
+// smaller) is not in it, and the grid shows the picture.
+import fs from 'node:fs';
+import path from 'node:path';
+
+// From where the build runs, as packages/editor/site/images.mjs (this file is bundled elsewhere first).
+const MANIFEST = path.resolve('src/data/image-manifest.json');
+const WIDTH = 480;
+
+export function GET() {
+  const manifest = fs.existsSync(MANIFEST) ? JSON.parse(fs.readFileSync(MANIFEST, 'utf8')) : {};
+  const thumbnails = Object.fromEntries(
+    Object.entries(manifest).flatMap(([src, { variants }]) => {
+      const small = variants.find((v) => v.w === WIDTH);
+      return small ? [[src, small.src]] : [];
+    }),
+  );
+  return new Response(JSON.stringify(thumbnails));
+}

package/pages/editor/version.json.js

@@ -0,0 +1,22 @@
+// /editor/version.json: the commit the site was built from, and when (builtAt; the site is online a
+// moment after, shown on the editor's start screen). After a save, the editor asks for this
+// until it is the saved commit (or a later one), and then says that the site has been updated.
+// Cloudflare's builds set WORKERS_CI_COMMIT_SHA; a build elsewhere asks git. `editor` is the
+// fingerprint of the editor's code (packages/editor/site/editor-version.mjs): an open editor with another one
+// reloads itself.
+import { execSync } from 'node:child_process';
+import { editorVersion } from '@morphemecms/cms/site/editor-version.mjs';
+
+function head() {
+  try {
+    return execSync('git rev-parse HEAD', { encoding: 'utf8' }).trim();
+  } catch {
+    return null;
+  }
+}
+
+export function GET() {
+  return new Response(
+    JSON.stringify({ commit: process.env.WORKERS_CI_COMMIT_SHA || head(), editor: editorVersion(), builtAt: new Date().toISOString() }),
+  );
+}

package/pages/headers.js

@@ -0,0 +1,4 @@
+// /_headers: the response headers Cloudflare adds to the files and pages from dist/ (_headers.txt, the same on every site).
+import headers from './_headers.txt?raw';
+
+export const GET = () => new Response(headers);

package/pages/index.astro

@@ -0,0 +1,10 @@
+---
+// The front page: the page chosen under "Indstillinger" › "Udseende" › "Standardsider" (packages/editor/site/home.ts), drawn by the theme
+// (src/themes/<theme>/templates/Home.astro).
+import Home from '@theme/templates/Home.astro';
+import { frontPage } from '@morphemecms/cms/site/home';
+
+const front = await frontPage();
+---
+
+<Home {...front} />

package/pages/ny.astro

@@ -0,0 +1,6 @@
+---
+// The new versions of the pages under /ny/, drawn by the theme (src/themes/<theme>/templates/New.astro).
+import New from '@theme/templates/New.astro';
+---
+
+<New />

package/pages/robots.txt.js

@@ -0,0 +1,3 @@
+// /robots.txt: every page for search engines, not the editor or its login, and where the sitemap is.
+export const GET = ({ site }) =>
+  new Response(`User-agent: *\nAllow: /\nDisallow: /editor/\nDisallow: /oauth/\n\nSitemap: ${new URL('sitemap-index.xml', site)}\n`);

package/pages/rss.xml.js

@@ -0,0 +1,20 @@
+import rss from '@astrojs/rss';
+import { getPosts } from '@morphemecms/cms/site/content';
+import { site } from '@morphemecms/cms/site/site';
+
+export async function GET(context) {
+  const posts = await getPosts();
+  return rss({
+    title: `${site.name} | Blog`,
+    description: site.description,
+    site: context.site,
+    customData: `<language>${site.locale.toLowerCase()}</language>`,
+    items: posts.map((post) => ({
+      title: post.data.title,
+      pubDate: post.data.date,
+      description: post.data.description,
+      link: `/${post.id}/`,
+      categories: post.data.categories,
+    })),
+  });
+}

package/scripts/app-screenshots.mjs

@@ -0,0 +1,164 @@
+// Takes the pictures each app is shown with on its page and in the app store (AppAbout in
+// packages/editor/src/AppList.tsx): the few its index.ts picks to give an idea of it (`screenshots`, AppShot in
+// packages/editor/src/store.ts), as a theme's are, on a phone, in the standard theme with blue colours and with made-up
+// content only, never the site's: its blocks and kinds as "Udseende" › "Dele" › "Apps" draws them with the examples,
+// its lists, its settings (with the made-up `values` of the picture) and its own page in the editor, into
+// src/apps/<app>/screenshots/<n>-<what>.jpg (shotFile). The site is built in a folder of its own with the theme and the
+// colours (src/data/theme.json and colors.json as they were after), and the editor has every app installed, with GitHub
+// answered from the files in this repository (built-site.mjs) but the apps' settings, so nothing is saved. Run it when
+// an app's pictures, or how what they show looks, have changed: npx morpheme app-screenshots (or with the apps to
+// take, by their folders: … calendly mailchimp). Then, for an app from the app store, raise its version, commit and run
+// npm run store:release.
+import { execFileSync } from 'node:child_process';
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { chromium } from 'playwright';
+import { createServer } from 'vite';
+import { aliases, themePlugin } from '@morphemecms/cms/site/theme.mjs';
+import { appFoldersPlugin } from '@morphemecms/cms/lib/apps.mjs';
+import { binOf } from './bin.mjs';
+import { openEditor, serveBuilt } from './built-site.mjs';
+
+const ROOT = `${process.cwd()}/`;
+const APPS = join(ROOT, 'src/apps');
+const THEME = join(ROOT, 'src/data/theme.json');
+const COLORS = join(ROOT, 'src/data/colors.json');
+/** The colours the pictures are taken with: Material's dynamic colour from a blue. */
+const BLUE = { source: '#1a73e8', variant: 'tonalSpot', contrast: 'standard' };
+
+const ids = process.argv.length > 2 ? process.argv.slice(2) : readdirSync(APPS).filter((id) => existsSync(join(APPS, id, 'index.ts')));
+
+// The pictures each app picks, read as store-release.mjs does, in their order. `part`: its drawing under "Dele" ›
+// "Blokke" or the list's screen (`parts`: #udseende/dele/blokke, #udseende/dele/liste/<list>) by the part's name; `editor`: a screen of the editor (`at`: from the top of what is
+// there). And each app's settings as the pictures show them: those it starts with, and the made-up ones of its picture.
+const vite = await createServer({
+  configFile: false,
+  logLevel: 'error',
+  appType: 'custom',
+  plugins: [themePlugin(), appFoldersPlugin(ROOT)],
+  resolve: { alias: aliases() },
+  server: { middlewareMode: true, hmr: false, ws: false },
+});
+const shots = {};
+const settings = {};
+let blue;
+try {
+  const load = (path) => vite.ssrLoadModule(path);
+  const { partScreens } = await load('@site/editor');
+  const { companyParts } = await load('@site/company');
+  const { colorRoles } = await load('@site/colors');
+  const { dynamicColors } = await load('@morphemecms/cms/lib/dynamic-colors.ts');
+  const { shotFile } = await load('@morphemecms/cms/src/store.ts');
+  blue = { ...dynamicColors(BLUE, colorRoles), dynamic: BLUE };
+  for (const id of ids) {
+    const app = (await load(`/src/apps/${id}/index.ts`)).default;
+    settings[id] = { ...app.settings?.values };
+    shots[id] = [];
+    for (const [i, shot] of (app.screenshots ?? []).entries()) {
+      const [what, key, n] = shot.shows.split(':');
+      const name = shotFile(i, shot.shows);
+      if (what === 'blok')
+        shots[id].push({
+          name,
+          parts: 'blokke',
+          part: (await load(`/src/apps/${id}/blocks/${key}/index.tsx`)).default.label,
+        });
+      else if (what === 'slags') {
+        const kind = app.kinds[key];
+        const variant = kind.variants?.[Number(n)];
+        shots[id].push({ name, parts: `liste/${key}`, part: variant ? `${kind.label} · ${variant.label}` : kind.label });
+      } else if (what === 'liste') shots[id].push({ name, editor: `liste/${key}` });
+      else if (what === 'indstillinger') {
+        // Where they are, as settingsRoute in AppList.tsx: on the screen or the part of "Virksomheden" with its kind.
+        const home = app.category && partScreens.find((s) => s.apps?.includes(app.category));
+        const company = app.category && companyParts.find((p) => p.parts && p.apps?.includes(app.category));
+        const at = home ? home.id : company ? `virksomheden/${company.id}` : `apps/${id}`;
+        shots[id].push({ name, editor: `${at}/${home || company ? id : 'indstillinger'}` });
+        Object.assign(settings[id], shot.values);
+      } else shots[id].push({ name, editor: `apps/${id}`, at: `[data-app-page="${id}"]` });
+    }
+  }
+} finally {
+  await vite.close();
+}
+
+// A made-up scan of a made-up site for Cookiescanner's page (its part of the Worker is not here).
+const day = 24 * 60 * 60 * 1000;
+const seen = (visitor) => ({ visitor, step: 'answer' });
+const SCAN = {
+  scan: {
+    at: new Date(Date.now() - day).toISOString(),
+    origin: 'https://eksempel.dk',
+    cookies: [
+      { name: '_ga', domain: '.eksempel.dk', days: 400, seen: seen('statistics') },
+      { name: '_ga_ABC1234567', domain: '.eksempel.dk', days: 400, seen: seen('statistics') },
+      { name: '_gcl_au', domain: '.eksempel.dk', days: 90, seen: seen('marketing') },
+    ],
+    storage: [],
+  },
+  begun: null,
+  problems: [],
+};
+
+const before = { theme: readFileSync(THEME, 'utf8'), colors: readFileSync(COLORS, 'utf8') };
+const out = mkdtempSync(join(tmpdir(), 'app-screenshots-'));
+let browser;
+try {
+  writeFileSync(THEME, `${JSON.stringify({ theme: 'saturn' }, null, 2)}\n`);
+  writeFileSync(COLORS, `${JSON.stringify(blue, null, 2)}\n`);
+  execFileSync(process.execPath, [binOf('astro'), 'build', '--outDir', out], { cwd: ROOT, stdio: 'inherit' });
+  const { server, site } = await serveBuilt(out);
+  // CHROMIUM_PATH: another Chromium than Playwright's own (one installed for another version of Playwright).
+  browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || undefined });
+  const phone = { width: 390, height: 520 };
+  const editor = await browser.newPage({ viewport: phone, deviceScaleFactor: 2, locale: 'da-DK' });
+  await editor.route(/\/api\/cookiescanner\//, (r) => r.fulfill({ contentType: 'application/json', body: JSON.stringify(SCAN) }));
+  // Every app installed, so each has its settings, its lists and its page; and its settings made up.
+  const installed = readdirSync(APPS).sort();
+  await openEditor(editor, site, {
+    'src/data/apps.json': `${JSON.stringify({ installed }, null, 2)}\n`,
+    ...Object.fromEntries(Object.entries(settings).map(([id, values]) => [`src/data/apps/${id}.json`, JSON.stringify(values)])),
+  });
+  // Without the animations, so each picture is taken as it ends.
+  await editor.addStyleTag({ content: '*, *::before, *::after { transition: none !important; animation: none !important; }' });
+  const go = async (hash) => {
+    await editor.evaluate((h) => (location.hash = h), hash);
+    await editor.waitForTimeout(1500);
+  };
+
+  for (const id of ids) {
+    const folder = join(APPS, id, 'screenshots');
+    rmSync(folder, { recursive: true, force: true });
+    if (!shots[id].length) continue;
+    mkdirSync(folder, { recursive: true });
+    for (const [i, shot] of shots[id].entries()) {
+      const options = { path: join(folder, shot.name), type: 'jpeg', quality: 80 };
+      if (shot.part) {
+        await go(`udseende/dele/${shot.parts}`);
+        // Tall enough for the whole drawing, under the screen's top bar.
+        await editor.setViewportSize({ width: phone.width, height: 1600 });
+        const drawing = editor.locator(`section[data-part="${shot.part}"] > :last-child`).first();
+        await drawing.evaluate((el) => el.scrollIntoView({ block: 'center' }));
+        await editor.waitForTimeout(500);
+        await drawing.screenshot(options);
+        await editor.setViewportSize(phone);
+      } else {
+        await go(shot.editor);
+        await editor.evaluate((at) => {
+          const el = at && document.querySelector(at);
+          window.scrollTo(0, el ? el.getBoundingClientRect().top + window.scrollY - 80 : 0);
+        }, shot.at);
+        await editor.waitForTimeout(300);
+        await editor.screenshot(options);
+      }
+    }
+    console.log(`${shots[id].length} billeder i src/apps/${id}/screenshots/.`);
+  }
+  server.close();
+} finally {
+  await browser?.close();
+  writeFileSync(THEME, before.theme);
+  writeFileSync(COLORS, before.colors);
+  rmSync(out, { recursive: true, force: true });
+}

package/scripts/app-workers.mjs

@@ -0,0 +1,6 @@
+// Writes worker/apps.js: an import of each app's part of the Worker (src/apps/<app>/worker.js,
+// packages/editor/lib/apps.mjs). Run it after adding or removing an app's worker.js; npm run check:content says when.
+import { writeAppWorkers } from '../lib/apps.mjs';
+
+const root = `${process.cwd()}/`;
+if (writeAppWorkers(root)) console.log('worker/apps.js er skrevet igen.');

package/scripts/bin.mjs

@@ -0,0 +1,12 @@
+// A package's command (its package.json's `bin`), found from `from` (the site's root, or this package's), to run with
+// Node: npx is npx.cmd on Windows, which execFileSync cannot start without a shell.
+import { createRequire } from 'node:module';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+
+/** @param {string} pkg @param {string} [name] @param {string} [from] */
+export const binOf = (pkg, name = pkg, from = process.cwd()) => {
+  const manifest = createRequire(join(from, 'package.json')).resolve(`${pkg}/package.json`);
+  const { bin } = JSON.parse(readFileSync(manifest, 'utf8'));
+  return join(dirname(manifest), typeof bin === 'string' ? bin : bin[name]);
+};