@morphemecms/cms 0.12.0 → 0.13.0-next-20261106203613

package/scripts/editor-screens.mjs

@@ -4,7 +4,7 @@
 // packages/editor/src/icon.tsx), there or on one of the built site's pages. An icon drawn from Material Symbols instead
 // of the icon pack (data-icon-fallback) is only listed, with where it is: it does not fail.
 // The screens are found as the editor's own links: from the start screen (the drawer's links are in the page also while it is
-// closed) and "Dele", #udseende/dele, "Temaer", #udseende/temaer, "Søgemaskineoptimering", #seo, "Appstore", #indstillinger/appstore, and "Apps", #apps, which the menu no longer links to), and
+// closed) and "Dele", #appearance/parts, "Temaer", #appearance/themes, "Søgemaskineoptimering", #seo, "Appstore", #settings/appstore, and "Apps", #apps, which the menu no longer links to), and
 // from each screen it opens, two steps down. GitHub is answered from the files in this repository, so it needs no login
 // and changes nothing. It runs on the built site: npm run build && npm run check:screens (or on another
 // folder with a built site, its path after the command: packages/editor/scripts/check-themes.mjs).
@@ -71,7 +71,7 @@ for (const [width, height] of [
   // From the start screen (the drawer's links), and from "Dele", "Temaer", "Søgemaskineoptimering" and "Appstore"
   // (the apps' pages and their developers'), whose screens are a step further down than the others. "Apps" (the list of
   // the apps installed) has no row in the menu, so it is a start of its own.
-  const starts = ['', 'udseende/dele', 'udseende/temaer', 'seo', 'indstillinger/appstore', 'apps'];
+  const starts = ['', 'appearance/parts', 'appearance/themes', 'seo', 'settings/appstore', 'apps'];
   const seen = new Set(starts);
   let next = starts;
   for (let depth = 0; depth <= 2 && next.length; depth++) {
@@ -117,7 +117,7 @@ for (const [state, { shows, hides }] of Object.entries(keyStates)) {
   const page = await browser.newPage({ viewport: { width: 390, height: 844 }, locale: 'da-DK' });
   page.on('pageerror', (e) => problems.push(`Appstore (${state}): ${e.message}`));
   await openEditor(page, site, {}, state);
-  await page.evaluate(() => (location.hash = 'indstillinger/appstore'));
+  await page.evaluate(() => (location.hash = 'settings/appstore'));
   await page.waitForTimeout(500);
   const text = await page.evaluate(() => document.body.innerText);
   for (const x of shows) if (!text.includes(x)) problems.push(`Appstore (${state}): "${x}" mangler`);

package/site/defineSite.mjs

@@ -99,10 +99,10 @@ const STANDARD = {
   menu: 'src/data/menu.json',
   /** Addresses of the site that are not pages, which a new page or post cannot have. */
   reserved: ['/editor/', '/admin/', '/oauth/', '/images/', '/filer/', '/ny/', '/404/'],
-  /** The lists the standard blocks use, by what they hold, and their ids (their addresses, #liste/<id>): the
+  /** The lists the standard blocks use, by what they hold, and their ids (their addresses, #list/<id>): the
    * testimonials, the list the block "Udtalelser" brings (src/standard/testimonials/list.ts), the tags, which a
    * testimonial's "Opret et tag" makes a new one of, and the cookies, the list the block "Cookieliste" brings. */
-  lists: { testimonials: 'udtalelser', tags: 'kategorier', cookies: 'cookies' },
+  lists: { testimonials: 'testimonials', tags: 'tags', cookies: 'cookies' },
   /** The folder of the site's cookie list, "Cookies" under "Lister" (the standard block "Cookieliste",
    * src/standard/cookies/list.ts): a file per cookie, those an app sets added when it is installed and taken out when it
    * is uninstalled (src/cookieList.ts). */

package/site/schema.ts

@@ -131,7 +131,7 @@ export function webPage({
       isPartOf: { '@id': ids.website },
       about: { '@id': ids.business },
       ...(image ? { primaryImageOfPage: abs(image) } : {}),
-      ...(trail.length ? { breadcrumb: { '@id': `${url}#broedkrummer` } } : {}),
+      ...(trail.length ? { breadcrumb: { '@id': `${url}#breadcrumbs` } } : {}),
       ...(questions.length
         ? {
             mainEntity: questions.map((q) => ({
@@ -146,7 +146,7 @@ export function webPage({
       ? [
           {
             '@type': 'BreadcrumbList',
-            '@id': `${url}#broedkrummer`,
+            '@id': `${url}#breadcrumbs`,
             itemListElement: trail.map((c, i) => ({ '@type': 'ListItem', position: i + 1, name: c.name, item: abs(c.href) })),
           },
         ]
@@ -175,7 +175,7 @@ export function blogPosting({
   const url = abs(path);
   return {
     '@type': 'BlogPosting',
-    '@id': `${url}#indlaeg`,
+    '@id': `${url}#post`,
     headline: title,
     description,
     datePublished: date.toISOString(),

package/src/Advanced.tsx

@@ -1,4 +1,4 @@
-// "Avanceret" (#avanceret), under "Indstillinger": R2 caching, the copy of the site's files in Cloudflare R2 the Worker
+// "Avanceret" (#advanced), under "Indstillinger": R2 caching, the copy of the site's files in Cloudflare R2 the Worker
 // answers the editor from (packages/editor/worker/files.js), turned on and off with "Aktiveret" in the Worker's settings (r2Caching.ts),
 // saved at once in its own commit. Off, the Worker asks GitHub for everything. It can only be turned on when Cloudflare
 // has the bucket (the Worker asks, /api/r2), else a deploy would fail; under the switch, why not, and, until the site is
@@ -32,7 +32,7 @@ import { buildSettingsOf, withBuildSetting, type BuildSetting } from './buildSet
 import { BUILD_SETTINGS_PATH } from '../lib/build-settings.mjs';
 import { siteT, t } from './i18n';
 
-export const ADVANCED_ROUTE = 'avanceret';
+export const ADVANCED_ROUTE = 'advanced';
 
 // "Placering" when Cloudflare places the bucket (no jurisdiction).
 const AUTO = 'auto';

package/src/App.tsx

@@ -1,50 +1,50 @@
 // The editor at /editor/ (docs/editor.md): sign in with GitHub, pick a part of the site, edit and
 // save. The layout: the full-height navigation rail or drawer (MainMenu.tsx) with, beside it, the top bar (topBarSlot.tsx) over the screen. The address after # says what is open, so reloading keeps it:
 //   (empty)          the start page
-//   liste/<id>       the list of a part, e.g. liste/priser, and liste/<id>/<app> a tab an installed app adds to it
-//                    (AppDefinition.tabs): liste/cookies/cookiescanner
-//   lister           the short lists (the testimonials, the apps' lists)
-//   indstillinger/appstore   the app store, its apps, and indstillinger/appstore/temaer its themes (AppList.tsx StorePage); the
+//   list/<id>       the list of a part, e.g. list/priser, and list/<id>/<app> a tab an installed app adds to it
+//                    (AppDefinition.tabs): list/cookies/cookiescanner
+//   lists           the short lists (the testimonials, the apps' lists)
+//   settings/appstore   the app store, its apps, and settings/appstore/themes its themes (AppList.tsx StorePage); the
 //                    other settings are screens of their own, in the drawer's last section (MainMenu.tsx)
-//   ny/<id>          a new entry, ny/<id>/<kind> one of a kind (a pop-up: standard, or an app's)
-//   virksomheden     the business, and virksomheden/<part> its parts: kontakt, betaling; and
-//                    virksomheden/betaling/<part> its own parts: mobilepay, bank
+//   new/<id>         a new entry, new/<id>/<kind> one of a kind (a pop-up: standard, or an app's)
+//   company     the business, and company/<part> its parts: contact, payment; and
+//                    company/payment/<part> its own parts: mobilepay, bank
 //   <screen>         a screen with parts of the site's own (partScreens), and <screen>/<part> its parts:
-//                    privatliv/cookiebanner, privatliv/privatlivssider, or one of the editor's own screens (Part.opens):
-//                    privatliv/samtykker the visitors' answers in the cookie banner (Consents.tsx); and the settings of the apps installed with
-//                    its category: maaling/google-analytics
-//   filer            the uploaded pictures, PDFs, videos and zip files (Media.tsx)
-//   seo              "Søgemaskineoptimering" (Library.tsx Seo): seo/videresendelser the redirects' two lists
-//                    (Redirects.tsx): seo/videresendelser/alle the redirects, and seo/videresendelser/ikke-fundet
-//                    the addresses visitors came to that do not exist; seo/vurdering the SEO rating of every page and
+//                    privacy/cookie-banner, privacy/privacy-pages, or one of the editor's own screens (Part.opens):
+//                    privacy/consents the visitors' answers in the cookie banner (Consents.tsx); and the settings of the apps installed with
+//                    its category: analytics/google-analytics
+//   files            the uploaded pictures, PDFs, videos and zip files (Media.tsx)
+//   seo              "Søgemaskineoptimering" (Library.tsx Seo): seo/redirects the redirects' two lists
+//                    (Redirects.tsx): seo/redirects/all the redirects, and seo/redirects/not-found
+//                    the addresses visitors came to that do not exist; seo/rating the SEO rating of every page and
 //                    post (SeoScores.tsx); and seo/<part> the site's own (seoParts)
-//   udseende         how the site looks (Library.tsx Theme): udseende/temaer the themes installed (Themes) and udseende/temaer/<theme>
-//                    a theme's page, with the button that swaps to it (ThemePage), udseende/ikonpakker the icon packs (IconPacks),
-//                    udseende/bevaegelse how it moves (MotionSchemes), udseende/sidekolonne the block beside the pages' text (SideColumn),
-//                    udseende/header the header's menus and settings with its preview (HeaderSettings.tsx; once at header),
-//                    udseende/footer the footer's texts and links with its preview (FooterSettings.tsx; once at src/data/footer.json),
-//                    udseende/farver the colours (Colors.tsx;
-//                    udseende/farver/reservefarver the site's own while an app changes the pages'), udseende/logo the logo
-//                    and icon (BrandForm.tsx), udseende/dele the parts (Library.tsx PartsHome): udseende/dele/editor the editor's, every
-//                    one in every state (Parts.tsx), udseende/dele/ui the theme's UI components, udseende/dele/blokke the
-//                    blocks, the standard ones and the apps', and udseende/dele/liste/<list> each kind of a list of kinds
-//                    ("Promovering"), its own and the apps' (BlockParts.tsx), and udseende/dele/vaerdier the
+//   appearance         how the site looks (Library.tsx Theme): appearance/themes the themes installed (Themes) and appearance/themes/<theme>
+//                    a theme's page, with the button that swaps to it (ThemePage), appearance/icon-packs the icon packs (IconPacks),
+//                    appearance/motion how it moves (MotionSchemes), appearance/side-column the block beside the pages' text (SideColumn),
+//                    appearance/header the header's menus and settings with its preview (HeaderSettings.tsx; once at header),
+//                    appearance/footer the footer's texts and links with its preview (FooterSettings.tsx; once at src/data/footer.json),
+//                    appearance/colors the colours (Colors.tsx;
+//                    appearance/colors/fallback-colors the site's own while an app changes the pages'), appearance/logo the logo
+//                    and icon (BrandForm.tsx), appearance/parts the parts (Library.tsx PartsHome): appearance/parts/editor the editor's, every
+//                    one in every state (Parts.tsx), appearance/parts/ui the theme's UI components, appearance/parts/blocks the
+//                    blocks, the standard ones and the apps', and appearance/parts/list/<list> each kind of a list of kinds
+//                    ("Promovering"), its own and the apps' (BlockParts.tsx), and appearance/parts/values the
 //                    theme's design tokens, "Værdier" (Tokens.tsx)
-//   blokvalg         the blocks that can be put in, "Blokindstillinger" (BlockSettings.tsx)
-//   avanceret        "Avanceret", under "Indstillinger": the copy of the site's files in R2 (Advanced.tsx)
+//   block-settings         the blocks that can be put in, "Blokindstillinger" (BlockSettings.tsx)
+//   advanced        "Avanceret", under "Indstillinger": the copy of the site's files in R2 (Advanced.tsx)
 //   morpheme         "Morpheme", under "Indstillinger": the CMS's version, a newer one and its notes, an update's progress (CmsPage.tsx)
-//   licenser         "Licenser", under "Indstillinger": the licences of what the site and the editor are made with, and
-//                    licenser/<id> one with its text (Licenses.tsx)
+//   licenses         "Licenser", under "Indstillinger": the licences of what the site and the editor are made with, and
+//                    licenses/<id> one with its text (Licenses.tsx)
 //   apps             the apps that come with the site, apps/<app> one with its button to install it and, while it
 //                    is installed, the tabs of its page (AppList.tsx AppPage): Settings at apps/<app>, with its settings
-//                    form (also on the screen with its category, maaling/<app>, AppList.tsx settingsRoute), and
-//                    Information at apps/<app>/om (before an app's own screens, AppDefinition.screens)
-//   apps/<app>/indstillinger/<field>  the page of a field of its settings with its choices on a page of their own
-//                    (Field.page), over its Settings tab, which keeps what is in it: apps/content-colors/indstillinger/variant
+//                    form (also on the screen with its category, analytics/<app>, AppList.tsx settingsRoute), and
+//                    Information at apps/<app>/about (before an app's own screens, AppDefinition.screens)
+//   apps/<app>/settings/<field>  the page of a field of its settings with its choices on a page of their own
+//                    (Field.page), over its Settings tab, which keeps what is in it: apps/content-colors/settings/variant
 //   <form>/<field>   the page of a field of a part's form with its choices on a page of their own (Field.page), over the
 //                    form, which keeps what is in it (formAt)
-//   blokke           the blocks, and blokke/<block> the texts all its copies have (blockTexts.ts)
-//   slettet/<id>     what was deleted from a list, or slettet/filer the files (Deleted.tsx)
+//   blocks           the blocks, and blocks/<block> the texts all its copies have (blockTexts.ts)
+//   deleted/<id>     what was deleted from a list, or deleted/files the files (Deleted.tsx)
 //   <file path>      a file being edited, e.g. src/content/blog/mit-foerste-indlaeg.md
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -276,9 +276,9 @@ function routeOf(hash: string) {
   const route = movedRoute(screenOf(hash), STORE_MOVED);
   // An app's settings: on the screen with its category, when it has one ("Analytics", AppList.tsx settingsRoute), and so
   // the pages of their fields (Field.page) after them. Otherwise they are on the Settings tab of its page: apps/<id>
-  // (a field's page, apps/<id>/indstillinger/<field>, stays, drawn by the same page).
-  const app = apps.find((a) => route === `apps/${a.id}/indstillinger` || route.startsWith(`apps/${a.id}/indstillinger/`));
-  const rest = app ? route.slice(`apps/${app.id}/indstillinger`.length) : '';
+  // (a field's page, apps/<id>/settings/<field>, stays, drawn by the same page).
+  const app = apps.find((a) => route === `apps/${a.id}/settings` || route.startsWith(`apps/${a.id}/settings/`));
+  const rest = app ? route.slice(`apps/${app.id}/settings`.length) : '';
   const kindScreen = app && settingsHome(app) && settingsRoute(app);
   const moved = !app ? route : kindScreen ? `${kindScreen}${rest}` : rest ? route : `apps/${app.id}`;
   if (moved !== screenOf(hash)) history.replaceState(history.state, '', `#${moved}`);
@@ -557,7 +557,7 @@ function Editor() {
       replace([file, ...(more?.files ?? [])], more?.removed);
       // A new entry, or a post that got a new address: from now on it is edited as the file it
       // became. A form that saves another file than the one at its address (Virksomheden) stays where it is.
-      if (route.startsWith('ny/') || more?.removed.includes(route)) {
+      if (route.startsWith('new/') || more?.removed.includes(route)) {
         history.replaceState(history.state, '', `#${file.path}`);
         setRoute(file.path);
       }
@@ -578,7 +578,7 @@ function Editor() {
         replace([], [file.path]);
         // Back to the list, as with the back arrow: the deleted entry is not left behind it in the history.
         setUnsaved(false);
-        up(`#liste/${collection.id}`);
+        up(`#list/${collection.id}`);
         notify({ text: savedText(change), kind: 'saved' });
       } catch (e) {
         notify({ text: t.app.notDeleted((e as Error).message), error: true, kind: 'failed' });
@@ -689,15 +689,15 @@ function Editor() {
 /** The part whose form is at an address (CompanyForm.tsx): one of "Virksomheden"'s (or of its parts', with the settings of the apps of their kinds), "Søgemaskineoptimering"'s, "Udseende"'s, or one on a screen of parts with
  * the settings of the apps of its kinds ("Analytics"). */
 function partAt(route: string, files: RepoFile[]): Part | null {
-  // virksomheden/<part>, or virksomheden/<part>/<its part> (Part.parts).
+  // company/<part>, or company/<part>/<its part> (Part.parts).
   const [, companyId, ownId, ...more] = route.split('/');
-  const company = route.startsWith('virksomheden/') && !more.length && companyParts.find((p) => p.id === companyId);
+  const company = route.startsWith('company/') && !more.length && companyParts.find((p) => p.id === companyId);
   return (
     (company &&
       (ownId ? [...(company.parts ?? []), ...appPartsIn(company, files)].find((p) => p.id === ownId) : company.file && company)) ||
-    (route.startsWith('blokke/') && blockParts.find((p) => p.id === route.slice(7))) ||
+    (route.startsWith('blocks/') && blockParts.find((p) => p.id === route.slice(7))) ||
     (route.startsWith('seo/') && seoParts.find((p) => p.id === route.slice(4))) ||
-    (route.startsWith('udseende/') && appearance.find((p) => p.id === route.slice(9))) ||
+    (route.startsWith('appearance/') && appearance.find((p) => p.id === route.slice('appearance/'.length))) ||
     partScreens.flatMap((s) => [...s.parts, ...appPartsIn(s, files)].filter((p) => route === `${s.id}/${p.id}`))[0] ||
     null
   );
@@ -718,13 +718,13 @@ type PageProps = { route: string; files: RepoFile[]; env: Env; user: Viewer | nu
 
 function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   if (!route) return <Start builtAt={builtAt} />;
-  if (route === 'konto') return <Account user={user} files={files} onLogout={onLogout} />;
-  if (route === 'notifikationer') return <Notifications />;
-  if (route === 'lister') return <Lists files={files} />;
-  if (route === 'virksomheden') return <Company files={files} />;
-  if (route === 'blokke') return <Blocks files={files} />;
-  if (route === 'filer' || route.startsWith('filer/'))
-    return <Media key={route} files={files} env={env} open={route === 'filer' ? undefined : '/' + route.slice('filer/'.length)} />;
+  if (route === 'account') return <Account user={user} files={files} onLogout={onLogout} />;
+  if (route === 'notifications') return <Notifications />;
+  if (route === 'lists') return <Lists files={files} />;
+  if (route === 'company') return <Company files={files} />;
+  if (route === 'blocks') return <Blocks files={files} />;
+  if (route === 'files' || route.startsWith('files/'))
+    return <Media key={route} files={files} env={env} open={route === 'files' ? undefined : '/' + route.slice('files/'.length)} />;
   if (route === 'seo') return <Seo />;
   if (route === REDIRECTS_ROUTE) return <Redirects env={env} />;
   if (route === SEO_SCORES_ROUTE) return <SeoScores files={files} env={env} />;
@@ -735,22 +735,23 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   // A part of a screen of parts that is one of the editor's own screens (Part.opens), going back to that screen.
   const opening = partScreens.flatMap((s) => s.parts.filter((p) => p.opens && route === `${s.id}/${p.id}`).map((p) => ({ s, p })))[0];
   if (opening?.p.opens === 'consents') return <Consents env={env} back={{ href: `#${opening.s.id}`, label: opening.s.label }} />;
-  if (route === 'udseende') return <Theme files={files} />;
-  if (route === 'udseende/temaer') return <Themes env={env} files={files} />;
-  if (route === 'udseende/ikonpakker') return <IconPacks env={env} files={files} />;
-  if (route === 'udseende/bevaegelse') return <MotionSchemes env={env} files={files} />;
-  if (route === 'udseende/sidekolonne') return <SideColumn env={env} files={files} />;
-  if (route === 'udseende/header') return <HeaderSettings env={env} />;
-  if (route === 'udseende/footer') return <FooterSettings env={env} />;
+  if (route === 'appearance') return <Theme files={files} />;
+  if (route === 'appearance/themes') return <Themes env={env} files={files} />;
+  if (route === 'appearance/icon-packs') return <IconPacks env={env} files={files} />;
+  if (route === 'appearance/motion') return <MotionSchemes env={env} files={files} />;
+  if (route === 'appearance/side-column') return <SideColumn env={env} files={files} />;
+  if (route === 'appearance/header') return <HeaderSettings env={env} />;
+  if (route === 'appearance/footer') return <FooterSettings env={env} />;
   // A theme installed has its page; one from the store that is not (or not yet built), its page in the store.
-  const themeShown = route.startsWith('udseende/temaer/') && themes.find((x) => x.id === route.slice(16));
+  const themeShown = route.startsWith('appearance/themes/') && themes.find((x) => x.id === route.slice('appearance/themes/'.length));
   if (themeShown) return <ThemePage key={themeShown.id} of={themeShown} env={env} files={files} />;
-  if (/^udseende\/temaer\/[^/]+$/.test(route)) return <StoreThemePage key={route} id={route.slice(16)} env={env} />;
+  if (/^appearance\/themes\/[^/]+$/.test(route))
+    return <StoreThemePage key={route} id={route.slice('appearance/themes/'.length)} env={env} />;
   // The colours, or the site's own on a page of the same form while an app changes the pages' (FALLBACK_ROUTE).
-  if (route === 'udseende/farver' || route === FALLBACK_ROUTE)
+  if (route === 'appearance/colors' || route === FALLBACK_ROUTE)
     return <Colors env={env} files={files} fallback={route === FALLBACK_ROUTE} />;
-  if (route === 'udseende/logo') return <BrandForm env={env} />;
-  if (route === 'blokvalg') return <BlockSettings env={env} files={files} />;
+  if (route === 'appearance/logo') return <BrandForm env={env} />;
+  if (route === 'block-settings') return <BlockSettings env={env} files={files} />;
   if (route === ADVANCED_ROUTE) return <Advanced env={env} />;
   if (route === CMS_ROUTE) return <CmsPage />;
   if (route === LICENSES_ROUTE) return <Licenses />;
@@ -761,7 +762,7 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   if (route.startsWith(`${DEVELOPER_ROUTE}/`))
     return <DeveloperPage key={route} slug={route.slice(DEVELOPER_ROUTE.length + 1)} env={env} files={files} />;
   // An app in the site (its own, or one from the store while it is installed) has its page, with the tabs Settings
-  // (apps/<id>, and a settings field's page, apps/<id>/indstillinger/<field>) and Information (apps/<id>/om, matched
+  // (apps/<id>, and a settings field's page, apps/<id>/settings/<field>) and Information (apps/<id>/about, matched
   // before an app's own screens); one from the store that is not (or no longer) installed, its page in the store.
   const shownApp = route.startsWith('apps/') ? apps.find((a) => appRouteOf(route, a.id)) : undefined;
   const shown = shownApp && appRouteOf(route, shownApp.id);
@@ -776,29 +777,29 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
     route.startsWith('apps/') && !deeper.length && apps.find((a) => a.id === screenApp && screenId && a.screens?.[screenId]);
   if (ownScreen && installedApps(files).includes(ownScreen.id))
     return <AppScreenPage key={route} app={ownScreen} id={screenId} env={env} />;
-  if (route === 'udseende/dele') return <PartsHome />;
-  if (route === 'udseende/dele/editor') return <Parts env={env} />;
-  if (route === 'udseende/dele/ui') return <ComponentParts />;
-  if (route === 'udseende/dele/blokke') return <BlocksParts />;
-  if (route.startsWith('udseende/dele/liste/')) return <KindParts key={route} id={route.slice(20)} />;
-  if (route === 'udseende/dele/vaerdier') return <Tokens />;
-  if (route.startsWith('slettet/')) return <Deleted id={route.slice(8)} files={files} env={env} />;
-  // virksomheden/<part>, or virksomheden/<part>/<its part> (Part.parts).
+  if (route === 'appearance/parts') return <PartsHome />;
+  if (route === 'appearance/parts/editor') return <Parts env={env} />;
+  if (route === 'appearance/parts/ui') return <ComponentParts />;
+  if (route === 'appearance/parts/blocks') return <BlocksParts />;
+  if (route.startsWith('appearance/parts/list/')) return <KindParts key={route} id={route.slice('appearance/parts/list/'.length)} />;
+  if (route === 'appearance/parts/values') return <Tokens />;
+  if (route.startsWith('deleted/')) return <Deleted id={route.slice('deleted/'.length)} files={files} env={env} />;
+  // company/<part>, or company/<part>/<its part> (Part.parts).
   const [, companyId, ownId, ...more] = route.split('/');
-  const company = route.startsWith('virksomheden/') && !more.length && companyParts.find((p) => p.id === companyId);
+  const company = route.startsWith('company/') && !more.length && companyParts.find((p) => p.id === companyId);
   if (company && company.parts && !ownId) return <Company part={company} files={files} />;
   // A part's form, or the page of one of its fields (Field.page) with the form under it: the same form, so it keeps what
   // is in it while the editor goes between them (useFormPages, inForm).
   const form = formAt(route, files);
   if (form) return <CompanyForm part={form.part} at={form.at} page={form.page} env={env} files={files} />;
-  // A list, or a tab an installed app adds to it (liste/<id>/<app>).
+  // A list, or a tab an installed app adds to it (list/<id>/<app>).
   const [, listId, listTab, ...below] = route.split('/');
-  const listed = route.startsWith('liste/') && !below.length && collections.find((c) => c.id === listId);
+  const listed = route.startsWith('list/') && !below.length && collections.find((c) => c.id === listId);
   if (listed) return <List key={listed.id} collection={listed} tab={listTab} files={files} env={env} />;
 
-  // ny/<list>, or ny/<list>/<kind> for one of its kinds (a pop-up: standard, mailchimp).
+  // new/<list>, or new/<list>/<kind> for one of its kinds (a pop-up: standard, mailchimp).
   const [, newIn, newKind] = route.split('/');
-  const creating = route.startsWith('ny/') && collections.find((c) => c.id === newIn && c.create);
+  const creating = route.startsWith('new/') && collections.find((c) => c.id === newIn && c.create);
   if (creating) {
     if (creating.kind === 'markdown') return <EntryForm collection={creating} file={newMarkdown(creating, notOffered(files))} env={env} />;
     if (creating.kind === 'folder')

package/src/AppAdds.tsx

@@ -29,7 +29,7 @@ function addsOf(app: SiteApp, files: RepoFile[]) {
     ...kindsOf(app).map((k) => ({
       ...k,
       block: undefined,
-      create: k.create ? { href: `#ny/${k.key}/${app.id}`, label: k.create } : undefined,
+      create: k.create ? { href: `#new/${k.key}/${app.id}`, label: k.create } : undefined,
       uses: entriesOf(app, k.key, files),
     })),
   ];

package/src/AppList.tsx

@@ -2,7 +2,7 @@
 // with one from the store not yet built as "Installeres…"), each with who made it under its name and, from the store,
 // that it has a newer version, with search (by name, who made it and what it does), the order (A–Å, Å–A, kept in this
 // browser) and headings by the first letter, as the lists under "Indhold" have. "Indstillinger" › "Appstore"
-// (#indstillinger/appstore): all apps, those in the app store (store.ts) and the site's own, installed or not, with search (by name, what they
+// (#settings/appstore): all apps, those in the app store (store.ts) and the site's own, installed or not, with search (by name, what they
 // do, who made them and the words they are found by), the same order and a funnel by category. An app's page
 // (#apps/<app>) is the same for every app and without examples: its name, who made it, whether it is installed, its
 // version (from the store) and what it does, "Installer" (or "Opdater til …"); installed, it has two tabs: "Indstillinger"
@@ -11,10 +11,10 @@
 // adds (AppAdds.tsx: its blocks, the lists it brings: "Priser", each opening its list, and its kinds of the site's lists:
 // a Mailchimp popup; each with its switch at the end of its row and opening a sheet with where it is used and the same
 // switch, as under "Blokindstillinger", and a kind's button to a new one, while it is on), its notifications with their
-// switches, and "Afinstaller", AppSettingsTab.tsx) and "Information" (#apps/<app>/om, AppInfoTab.tsx: its pictures, what
+// switches, and "Afinstaller", AppSettingsTab.tsx) and "Information" (#apps/<app>/about, AppInfoTab.tsx: its pictures, what
 // it does more fully ("Om appen"), what it needs of the site ("Rettigheder", needsOf in store.ts: its code on every page,
 // the addresses it loads from and sends forms to, its part of the Worker, a step in the build), the cookies it sets (and
-// whether the cookie banner asks first), who made it (a row to their page, #apps/udvikler/<name>, with all their apps),
+// whether the cookie banner asks first), who made it (a row to their page, #apps/developer/<name>, with all their apps),
 // and where it is used); one not installed has no tabs; installing, updating and uninstalling are each saved at once in its own commit,
 // as a block turned on or off under "Blokindstillinger". The button pressed shows the loading indicator while it runs (busyAction.mjs). One of the site's own is installed or uninstalled in the site's
 // file of apps; one from the store is copied into the site, or deleted from it, with it (appChanges in store.ts), and
@@ -99,10 +99,10 @@ export function settingsHome(app: SiteApp): { route: string; label: string } | u
   const screen = partScreens.find((s) => s.apps?.includes(kind));
   if (screen) return { route: screen.id, label: screen.label };
   const company = companyParts.find((p) => p.parts && p.apps?.includes(kind));
-  return company && { route: `virksomheden/${company.id}`, label: company.label };
+  return company && { route: `company/${company.id}`, label: company.label };
 }
 
-/** Where an app's settings are: on the screen with its kind (#maaling/google-analytics, #virksomheden/betaling/mobilepay),
+/** Where an app's settings are: on the screen with its kind (#analytics/google-analytics, #company/payment/mobilepay),
  * else on the Settings tab of its page (#apps/<id>); null without settings. */
 export function settingsRoute(app: SiteApp): string | null {
   if (!app.settings) return null;
@@ -161,7 +161,7 @@ export const listsOf = (app: SiteApp, files: RepoFile[]) =>
     key: l.id,
     icon: l.icon,
     label: l.label,
-    href: `#liste/${l.id}`,
+    href: `#list/${l.id}`,
     count: files.filter((f) => f.path.startsWith(`${l.folder}/`) && f.path.endsWith('.json')).length,
   }));
 
@@ -191,7 +191,7 @@ export function kindsOf(app: SiteApp) {
             icon: kind.icon,
             label: kind.label,
             hint: kind.hint,
-            href: `#liste/${c.id}`,
+            href: `#list/${c.id}`,
             one: c.singular,
             more: c.label,
             create: c.create,
@@ -289,7 +289,7 @@ export function Apps({ env, files }: { env: Env; files: RepoFile[] }) {
   const installed = installedApps(files);
   const catalog = useCatalog(env);
   const store = Array.isArray(catalog) ? catalog : [];
-  const [query, setQuery] = useKept('apps-soeg', '');
+  const [query, setQuery] = useKept('apps-search', '');
   const [sort, pickSort] = useSort();
 
   // The apps installed: the site's own and those from the store; and one from the store in the file of apps that the
@@ -401,7 +401,7 @@ function AppRow({ app, installed }: { app: ReturnType<typeof allApps>[number]; i
   );
 }
 
-/** A developer's page (#apps/udvikler/<name>): their name, and all their apps and themes (in the store and the site's
+/** A developer's page (#apps/developer/<name>): their name, and all their apps and themes (in the store and the site's
  * own), each opening its page. */
 export function DeveloperPage({ slug, env, files }: { slug: string; env: Env; files: RepoFile[] }) {
   const installed = installedApps(files);
@@ -462,9 +462,9 @@ export function DeveloperRow({ name }: { name: string }) {
   );
 }
 
-/** "Appstore" (#indstillinger/appstore, under "Indstillinger"): in a tab of its own each in the top app bar, all apps,
+/** "Appstore" (#settings/appstore, under "Indstillinger"): in a tab of its own each in the top app bar, all apps,
  * those in the app store and the site's own, each with what it does and whether it is installed, and all themes
- * (#indstillinger/appstore/temaer, ThemeStore.tsx), those in the store
+ * (#settings/appstore/themes, ThemeStore.tsx), those in the store
  * and those installed, each with its version and who made it; each opening its page. With search (by name, what it
  * does, who made it and the words it is found by, in both languages), the order and the filters by category (apps)
  * and by whether it is installed, each picked one as a chip. */
@@ -483,10 +483,10 @@ function StoreScreen({ env, files, tab, again }: { env: Env; files: RepoFile[];
   const catalog = useCatalog(env);
   const themeCatalog = useThemeCatalog(env);
   const connected = useStoreConnected(env);
-  const [query, setQuery] = useKept('butik-soeg', '');
+  const [query, setQuery] = useKept('store-search', '');
   const [sort, pickSort] = useSort();
-  const [category, setCategory] = useKept<AppCategory | ''>('butik-kategori', '');
-  const [state, setState] = useKept<'' | 'installed' | 'notInstalled'>('butik-status', '');
+  const [category, setCategory] = useKept<AppCategory | ''>('store-category', '');
+  const [state, setState] = useKept<'' | 'installed' | 'notInstalled'>('store-status', '');
   const apps = tab === 'apps';
   const read = apps ? catalog : themeCatalog;
 
@@ -948,7 +948,7 @@ type AppProps = { app: SiteApp; env: Env; files: RepoFile[] };
 
 type AppTab = 'settings' | 'information';
 
-/** The tabs of an installed app's page, in the top bar: Settings (#apps/<id>) and Information (#apps/<id>/om). A form
+/** The tabs of an installed app's page, in the top bar: Settings (#apps/<id>) and Information (#apps/<id>/about). A form
  * with unsaved changes asks first, as for every address (App.tsx). */
 const tabsOf = (app: SiteApp, tab: AppTab): TabChoice<AppTab> => ({
   label: t.apps.tabs,

package/src/BlockDialog.tsx

@@ -116,7 +116,7 @@ const plain = (s: string) =>
 
 type InsertSort = 'az' | 'za' | 'group';
 const INSERT_SORTS: InsertSort[] = ['az', 'za', 'group'];
-const INSERT_SORT_KEY = 'editor-sort-indsaet';
+const INSERT_SORT_KEY = 'editor-sort-insert';
 
 // A block's group: the app's name for an app's block, otherwise the standard blocks (also the picture and HTML).
 const groupOf = (b: SiteBlock) => (b.app ? (apps.find((a) => a.id === b.app)?.label ?? b.app) : t.blockSettings.standard);

package/src/BlockParts.tsx

@@ -1,5 +1,5 @@
-// "Dele" › "UI-komponenter" (#udseende/dele/ui), "Dele" › "Blokke" (#udseende/dele/blokke) and "Dele" › a list of kinds
-// ("Promovering", #udseende/dele/liste/<id>): how the site looks, every part in every version, to see and agree on it.
+// "Dele" › "UI-komponenter" (#appearance/parts/ui), "Dele" › "Blokke" (#appearance/parts/blocks) and "Dele" › a list of kinds
+// ("Promovering", #appearance/parts/list/<id>): how the site looks, every part in every version, to see and agree on it.
 // "UI-komponenter" also has the active theme's coverage (summary, mark on each part, filter by style) and the site frame's parts.
 // "UI-komponenter" has the theme's UI components (its buttons and icon buttons, text fields and checkboxes …,
 // packages/editor/theme/ui/, through @site/editor) in every kind, size and state; "Blokke" every block, the standard
@@ -52,7 +52,7 @@ import { t } from './i18n';
 import { Svg } from './icon';
 
 const { screens } = t.parts;
-const back = { href: '#udseende/dele', label: t.common.parts.editorParts };
+const back = { href: '#appearance/parts', label: t.common.parts.editorParts };
 
 // The fields filled in with the plain picture where they have none (a card's, a list's items').
 function pictured(fields: Field[], props: BlockProps): BlockProps {
@@ -520,7 +520,7 @@ function CardParts() {
   );
 }
 
-/** "Dele" › "UI-komponenter" (#udseende/dele/ui): the theme's UI components in every kind, size and state. */
+/** "Dele" › "UI-komponenter" (#appearance/parts/ui): the theme's UI components in every kind, size and state. */
 export function ComponentParts() {
   const groups = [
     { id: 'ui', title: screens.ui },
@@ -587,7 +587,7 @@ export function ComponentParts() {
   );
 }
 
-/** "Dele" › "Blokke" (#udseende/dele/blokke): every block, the standard ones and then the apps', each a group of its
+/** "Dele" › "Blokke" (#appearance/parts/blocks): every block, the standard ones and then the apps', each a group of its
  * own, in all its versions. */
 export function BlocksParts() {
   const data = useMemo(exampleData, []);
@@ -616,7 +616,7 @@ export function BlocksParts() {
 /** The lists of kinds ("Promovering"), each a screen of "Dele". */
 export const kindLists = () => collections.filter((c): c is FolderCollection => c.kind === 'folder' && !!c.kinds && !!c.fields?.length);
 
-/** "Dele" › a list of kinds ("Promovering", #udseende/dele/liste/<id>): each of its kinds as the site draws it, its own
+/** "Dele" › a list of kinds ("Promovering", #appearance/parts/list/<id>): each of its kinds as the site draws it, its own
  * (FolderCollection.draws: the pop-up, the bars) and the apps' (AppKind: Mailchimp's signup, once for each of its
  * states), each a group of its own, as a new one of the kind with the made-up texts (kindExample). */
 export function KindParts({ id }: { id: string }) {

package/src/BlockSettings.tsx

@@ -1,4 +1,4 @@
-// "Blokke" › "Blokindstillinger" (#blokvalg): the blocks that can be put in the text of a page, in
+// "Blokke" › "Blokindstillinger" (#block-settings): the blocks that can be put in the text of a page, in
 // groups, the editor's standard blocks (packages/editor/src/standard/) and those of each app installed under "Apps",
 // under the app's name (e.g. "Mailchimp",
 // src/apps/, AppList.tsx; an app not installed has none here), each with how many pages it is on at its right
@@ -243,7 +243,7 @@ export function KindSwitch({ app, list, env, files }: { app: SiteApp; list: stri
 type Sort = 'group' | 'az' | 'za';
 const SORTS: Sort[] = ['group', 'az', 'za'];
 // The order picked last time, in this browser.
-const SORT_KEY = 'editor-sort-blokvalg';
+const SORT_KEY = 'editor-sort-block-settings';
 type OnOff = '' | 'on' | 'off';
 type Use = '' | 'used' | 'unused';
 

package/src/BrandForm.tsx

@@ -1,4 +1,4 @@
-// "Udseende" › "Logo og ikon" (#udseende/logo): a new logo (the mark by the site's name) and a new icon (the browser
+// "Udseende" › "Logo og ikon" (#appearance/logo): a new logo (the mark by the site's name) and a new icon (the browser
 // tab, Google and the editor's app icon), made from a picture the owner picks (brand.ts), in the site's colours
 // ("Farver"). Both are saved together in one commit with "Gem ændringer".
 import { useEffect, useState } from 'react';
@@ -120,7 +120,7 @@ export default function BrandForm({ env }: { env: Env }) {
   return (
     <FormFrame
       title={t.common.parts.brand}
-      back={{ href: '#udseende', label: t.common.parts.appearance }}
+      back={{ href: '#appearance', label: t.common.parts.appearance }}
       dirty={dirty}
       saving={saving || drawing}
       onSave={save}

package/src/Colors.tsx

@@ -1,4 +1,4 @@
-// "Udseende" › "Farver" (#udseende/farver): the site's colours, for light and dark mode, in the site's file of
+// "Udseende" › "Farver" (#appearance/colors): the site's colours, for light and dark mode, in the site's file of
 // colours (config.colors, packages/editor/lib/colors.ts). The first tab, "Generator", where the screen starts, or one
 // mode at a time, picked with the tabs after it, and the editor is shown in the mode while the screen is open
 // (theme.ts holdTheme). Each mode has a little page drawn in its colours, the pairs that are too hard to
@@ -15,7 +15,7 @@
 // farver", src/apps/content-colors/: pageColors in packages/editor/site/pageColors.ts). While an app installed changes the pages'
 // colours (hooks/page-colors.ts), each mode shows the pages' colours instead (PageColors), as the site was last built
 // (/editor/page-colors.json, packages/editor/scripts/page-colors.mjs): first a notice that the apps give them, with a button to the
-// site's own, which are only the fallback ("Reservefarver", #udseende/farver/reservefarver, a page of the same form, so
+// site's own, which are only the fallback ("Reservefarver", #appearance/colors/fallback-colors, a page of the same form, so
 // what is unsaved stays), then the apps, each to its settings, the pages with colours from a picture (the picture, the
 // page and its colours in the mode open), and those with the site's own. Saved with "Gem ændringer" in one commit; the
 // editor shows the new colours at once (theme.ts applyColors), the site when it is built again.
@@ -112,7 +112,7 @@ const CHANGE = t.app.changes.edited(t.app.changes.colors);
 type Tab = Mode | 'generator';
 
 /** The page with the site's own colours, while an app changes the pages' colours: the fallback. */
-export const FALLBACK_ROUTE = 'udseende/farver/reservefarver';
+export const FALLBACK_ROUTE = 'appearance/colors/fallback-colors';
 
 /** The apps installed that change the pages' colours (hooks/page-colors.ts). */
 const colorApps = (files: RepoFile[]) => {
@@ -139,7 +139,7 @@ export default function Colors({ env, files, fallback }: { env: Env; files: Repo
   const changing = useMemo(() => colorApps(files), [files]);
   useEffect(() => () => holdTheme(null), []);
   // While an app changes the pages' colours, the modes show the pages', and the site's own are on a page of the form.
-  useFormPages(changing.length ? ['udseende/farver', FALLBACK_ROUTE] : []);
+  useFormPages(changing.length ? ['appearance/colors', FALLBACK_ROUTE] : []);
   const ownShown = fallback || !changing.length;
   const appNames = new Intl.ListFormat(locale).format(changing.map((a) => a.label));
   const file = files.find((f) => f.path === config.colors);
@@ -207,8 +207,8 @@ export default function Colors({ env, files, fallback }: { env: Env; files: Repo
       title={changing.length && fallback ? t.colors.pages.fallback : t.common.parts.colors}
       back={
         changing.length && fallback
-          ? { href: '#udseende/farver', label: t.common.parts.colors, guard: (go) => go() }
-          : { href: '#udseende', label: t.common.parts.appearance }
+          ? { href: '#appearance/colors', label: t.common.parts.colors, guard: (go) => go() }
+          : { href: '#appearance', label: t.common.parts.appearance }
       }
       dirty={dirty}
       saving={saving}

package/src/CompanyForm.tsx

@@ -113,7 +113,7 @@ export default function CompanyForm({ part, env, files, at: route, page }: Props
       ) : (
         <FormFrame
           title={part.label}
-          back={part.back ?? { href: '#virksomheden', label: t.common.parts.company }}
+          back={part.back ?? { href: '#company', label: t.common.parts.company }}
           dirty={dirty}
           saving={saving}
           onSave={save}