@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

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

@@ -1,51 +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>
-)}
+---
+// 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

@@ -1,31 +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
+# 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

@@ -1,10 +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} />
+---
+// 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

@@ -1,18 +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} />
+---
+// 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

@@ -1,25 +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()));
-}
+// /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

@@ -1,75 +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>
+---
+// 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

@@ -1,23 +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" }
-  ]
-}
-`);
-}
+// /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

@@ -1,33 +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();
-    }),
-  );
-});
+// The editor's service worker, only for its notifications on the phone or computer (packages/editor/src/notificationData.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

@@ -1,4 +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' } });
+// /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

@@ -1,21 +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));
-}
+// /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));
+}