@morphemecms/cms 0.2.0 → 0.3.0

package/site/defineSite.mjs

@@ -21,7 +21,7 @@
  * What a site can say of itself, else the standard: the owner's picture (beside a blog post, and shown when a page with
  * none of its own is shared), the booking page and the pages a booking ends on, the page about the owner, the block
  * drawn after every blog post, the word a page's title can end in, pictures that are the same though their names say
- * otherwise, and the file of its redirects from old addresses.
+ * otherwise, the file of its redirects from old addresses, and the logo in the structured data.
  * @typedef {object} SiteChoices
  * @property {{ src: string; alt: string } | null} picture The owner's picture, or none.
  * @property {{ path: string; thanks: string[] }} booking The booking page, where "Book en tid" goes when no booking sheet
@@ -36,6 +36,8 @@
  * @property {{ rules: string; map: string }} siteRedirects The site's other redirects: rules ("<from> <to> 301", one to a
  *   line) and the Worker's map (`{ ids, paths }`, worker/index.js), shown and changed with the editor's own under
  *   Videresendelser (src/redirectData.ts).
+ * @property {string} logo The address of the site's logo in the structured data (the business's `logo`,
+ *   site/schema.ts), a path on the site ("/logo.svg").
  */
 
 /** @type {SiteChoices} */
@@ -47,6 +49,7 @@ const CHOICES = {
   titleEnd: '',
   samePictures: {},
   siteRedirects: { rules: 'public/_redirects', map: 'src/data/old-addresses.json' },
+  logo: '/logo.svg',
 };
 
 /** The same on every site. */
@@ -81,6 +84,9 @@ const STANDARD = {
   /** How the site moves, `{ "scheme": "expressive" | "standard" | "calm" }`, under "Udseende" › "Bevægelse" (Motion in
    * src/Motion.tsx; lib/motion.ts, site/motion.ts). Without it, the theme's ("motion" in its theme.json). */
   motion: 'src/data/motion.json',
+  /** The block drawn in a column beside the text of ordinary pages, `{ "block": "<type>" | null }`, under "Udseende" ›
+   * "Sidekolonne" (SideColumn in src/SideColumn.tsx; site/side.ts). Without it, no page has a column. */
+  side: 'src/data/side.json',
   /** The folder of the themes installed, one for each (<folder>/) (site/theme.mjs); one from the store (src/store.ts) is
    * copied into it and deleted from it. */
   themes: 'src/themes',

package/site/icons.d.mts

@@ -105,6 +105,7 @@ export const MATERIAL_SYMBOLS: {
     bus: string;
     'calendar-blank': string;
     'calendar-check': string;
+    'calendar-x': string;
     car: string;
     cards: string;
     'caret-down': string;
@@ -152,6 +153,7 @@ export const MATERIAL_SYMBOLS: {
     handshake: string;
     heart: string;
     house: string;
+    'identification-card': string;
     image: string;
     'image-square': string;
     info: string;
@@ -173,6 +175,7 @@ export const MATERIAL_SYMBOLS: {
     medal: string;
     megaphone: string;
     minus: string;
+    money: string;
     moon: string;
     newspaper: string;
     'paint-brush-broad': string;
@@ -186,6 +189,7 @@ export const MATERIAL_SYMBOLS: {
     'puzzle-piece': string;
     question: string;
     quotes: string;
+    receipt: string;
     rows: string;
     ruler: string;
     shapes: string;
@@ -222,6 +226,7 @@ export const MATERIAL_SYMBOLS: {
     users: string;
     'users-three': string;
     'video-camera': string;
+    wallet: string;
     warning: string;
     'warning-circle': string;
     'wave-sine': string;
@@ -258,6 +263,7 @@ export const LUCIDE: {
     bus: string;
     'calendar-blank': string;
     'calendar-check': string;
+    'calendar-x': string;
     car: string;
     cards: string;
     'caret-down': string;
@@ -306,6 +312,7 @@ export const LUCIDE: {
     'hard-drives': string;
     heart: string;
     house: string;
+    'identification-card': string;
     image: string;
     'image-square': string;
     info: string;
@@ -327,6 +334,7 @@ export const LUCIDE: {
     medal: string;
     megaphone: string;
     minus: string;
+    money: string;
     moon: string;
     newspaper: string;
     'paint-brush-broad': string;
@@ -340,6 +348,7 @@ export const LUCIDE: {
     'puzzle-piece': string;
     question: string;
     quotes: string;
+    receipt: string;
     rows: string;
     ruler: string;
     scan: string;
@@ -378,6 +387,7 @@ export const LUCIDE: {
     users: string;
     'users-three': string;
     'video-camera': string;
+    wallet: string;
     warning: string;
     'warning-circle': string;
     'wave-sine': string;
@@ -411,6 +421,7 @@ export const PACK_MAPS: {
         bus: string;
         'calendar-blank': string;
         'calendar-check': string;
+        'calendar-x': string;
         car: string;
         cards: string;
         'caret-down': string;
@@ -458,6 +469,7 @@ export const PACK_MAPS: {
         handshake: string;
         heart: string;
         house: string;
+        'identification-card': string;
         image: string;
         'image-square': string;
         info: string;
@@ -479,6 +491,7 @@ export const PACK_MAPS: {
         medal: string;
         megaphone: string;
         minus: string;
+        money: string;
         moon: string;
         newspaper: string;
         'paint-brush-broad': string;
@@ -492,6 +505,7 @@ export const PACK_MAPS: {
         'puzzle-piece': string;
         question: string;
         quotes: string;
+        receipt: string;
         rows: string;
         ruler: string;
         shapes: string;
@@ -528,6 +542,7 @@ export const PACK_MAPS: {
         users: string;
         'users-three': string;
         'video-camera': string;
+        wallet: string;
         warning: string;
         'warning-circle': string;
         'wave-sine': string;
@@ -562,6 +577,7 @@ export const PACK_MAPS: {
         bus: string;
         'calendar-blank': string;
         'calendar-check': string;
+        'calendar-x': string;
         car: string;
         cards: string;
         'caret-down': string;
@@ -610,6 +626,7 @@ export const PACK_MAPS: {
         'hard-drives': string;
         heart: string;
         house: string;
+        'identification-card': string;
         image: string;
         'image-square': string;
         info: string;
@@ -631,6 +648,7 @@ export const PACK_MAPS: {
         medal: string;
         megaphone: string;
         minus: string;
+        money: string;
         moon: string;
         newspaper: string;
         'paint-brush-broad': string;
@@ -644,6 +662,7 @@ export const PACK_MAPS: {
         'puzzle-piece': string;
         question: string;
         quotes: string;
+        receipt: string;
         rows: string;
         ruler: string;
         scan: string;
@@ -682,6 +701,7 @@ export const PACK_MAPS: {
         users: string;
         'users-three': string;
         'video-camera': string;
+        wallet: string;
         warning: string;
         'warning-circle': string;
         'wave-sine': string;
@@ -690,4 +710,5 @@ export const PACK_MAPS: {
         x: string;
     };
 };
+export function phosphorNames(used: any): any[];
 export function isIconName(name: any): any;

package/site/icons.mjs

@@ -118,6 +118,7 @@ export const MATERIAL_SYMBOLS = {
   bus: 'directions_bus',
   'calendar-blank': 'calendar_today',
   'calendar-check': 'event_available',
+  'calendar-x': 'event_busy',
   car: 'directions_car',
   cards: 'cards_stack',
   'caret-down': 'keyboard_arrow_down',
@@ -165,6 +166,7 @@ export const MATERIAL_SYMBOLS = {
   handshake: 'handshake',
   heart: 'favorite',
   house: 'home',
+  'identification-card': 'id_card',
   image: 'image',
   'image-square': 'image',
   info: 'info',
@@ -186,6 +188,7 @@ export const MATERIAL_SYMBOLS = {
   medal: 'military_tech',
   megaphone: 'campaign',
   minus: 'remove',
+  money: 'payments',
   moon: 'dark_mode',
   newspaper: 'newspaper',
   'paint-brush-broad': 'brush',
@@ -199,6 +202,7 @@ export const MATERIAL_SYMBOLS = {
   'puzzle-piece': 'extension',
   question: 'help',
   quotes: 'format_quote',
+  receipt: 'receipt',
   rows: 'view_agenda',
   ruler: 'straighten',
   shapes: 'shapes',
@@ -235,6 +239,7 @@ export const MATERIAL_SYMBOLS = {
   users: 'group',
   'users-three': 'groups',
   'video-camera': 'videocam',
+  wallet: 'wallet',
   warning: 'warning',
   'warning-circle': 'error',
   'wave-sine': 'animation',
@@ -272,6 +277,7 @@ export const LUCIDE = {
   bus: 'bus',
   'calendar-blank': 'calendar',
   'calendar-check': 'calendar-check',
+  'calendar-x': 'calendar-x',
   car: 'car',
   cards: 'gallery-vertical-end',
   'caret-down': 'chevron-down',
@@ -320,6 +326,7 @@ export const LUCIDE = {
   'hard-drives': 'server',
   heart: 'heart',
   house: 'house',
+  'identification-card': 'id-card',
   image: 'image',
   'image-square': 'image',
   info: 'info',
@@ -341,6 +348,7 @@ export const LUCIDE = {
   medal: 'medal',
   megaphone: 'megaphone',
   minus: 'minus',
+  money: 'banknote',
   moon: 'moon',
   newspaper: 'newspaper',
   'paint-brush-broad': 'paintbrush',
@@ -354,6 +362,7 @@ export const LUCIDE = {
   'puzzle-piece': 'puzzle',
   question: 'circle-question-mark',
   quotes: 'quote',
+  receipt: 'receipt',
   rows: 'rows-2',
   ruler: 'ruler',
   scan: 'scan',
@@ -392,6 +401,7 @@ export const LUCIDE = {
   users: 'users',
   'users-three': 'users-round',
   'video-camera': 'video',
+  wallet: 'wallet',
   warning: 'triangle-alert',
   'warning-circle': 'circle-alert',
   'wave-sine': 'spline',
@@ -403,6 +413,11 @@ export const LUCIDE = {
 /** Each system pack's map: Phosphor's name → its set's icon (Phosphor's: its own names, no map). */
 export const PACK_MAPS = { 'material-symbols': MATERIAL_SYMBOLS, lucide: LUCIDE };
 
+/** The names of Phosphor's pack: the icons the site and the editor draw (`used`), and every name the other system
+ * packs' maps name (an app's icon, which the CMS itself may not draw), sorted. */
+export const phosphorNames = (used) =>
+  [...new Set([...used, ...Object.values(PACK_MAPS).flatMap(Object.keys), ...Object.values(MATERIAL_DESIGN_ICONS).flatMap(Object.keys)])].sort();
+
 /** The names the system's pack has an icon by in its maps (its set's and Material Design Icons'); all for Phosphor's. */
 const mapped = (pack) => (PACK_MAPS[pack] ? [...Object.keys(PACK_MAPS[pack]), ...Object.keys(MATERIAL_DESIGN_ICONS[pack] ?? {})] : null);
 
@@ -553,7 +568,7 @@ function systemPackProblems(id, used) {
       );
   }
   const written = Object.keys(packIcons(id));
-  const wanted = names ?? [...used];
+  const wanted = names ?? phosphorNames(used);
   const unwritten = wanted.filter((name) => !written.includes(name)).sort();
   const stray = written.filter((name) => !wanted.includes(name)).sort();
   if (unwritten.length) problems.push(`${dir}/ mangler ${unwritten.join(', ')}: kør npm run icons.`);

package/site/schema.ts

@@ -45,7 +45,7 @@ export const business = {
   description: site.description,
   url: abs('/'),
   ...(site.portrait ? { image: abs(site.portrait) } : {}),
-  logo: abs('/logo.svg'),
+  logo: abs(site.logo),
   telephone: site.phoneIntl,
   email: site.email,
   ...(site.cvr ? { taxID: site.cvr } : {}),

package/site/side.ts

@@ -0,0 +1,10 @@
+// The site's choice of the block drawn beside the text of its pages: src/data/side.json, `{ "block": "<type>" | null }`.
+// Optional: a site without the file has no column. Exposes sideSetting; read by sideBlock in src/standard/views.ts.
+const found = import.meta.glob<{ block?: unknown }>('/src/data/side.json', { eager: true, import: 'default' });
+
+/** The contents of src/data/side.json, or null when the site has none. */
+export const sideSetting: { block: string | null } | null = (() => {
+  const file = found['/src/data/side.json'];
+  if (!file) return null;
+  return { block: typeof file.block === 'string' && file.block ? file.block : null };
+})();

package/site/site.ts

@@ -52,6 +52,8 @@ export const site = {
   /** The owner's picture (config.ts), or '' when the site has none. */
   portrait: config.picture?.src ?? '',
   portraitAlt: config.picture?.alt ?? '',
+  /** The logo in the structured data (config.ts), '/logo.svg' unless the site says otherwise. */
+  logo: config.logo || '/logo.svg',
 };
 
 // Primary navigation (menu.json, "Hovedmenu"). Labels, URLs and sub-items started out as the old site's menu.

package/src/App.tsx

@@ -21,7 +21,7 @@
 //                    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/bevaegelse how it moves (MotionSchemes), udseende/sidekolonne the block beside the pages' text (SideColumn),
 //                    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
@@ -126,6 +126,7 @@ import {
 } from './store';
 import Colors, { colorsOf, FALLBACK_ROUTE } from './Colors';
 import { applyColors, applyMotion } from './theme';
+import SideColumn from './SideColumn';
 import { apps, notOffered } from './registry';
 import {
   Account,
@@ -829,6 +830,7 @@ function Page({ route, files, env, user, builtAt, onLogout }: PageProps) {
   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} />;
   // 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));
   if (themeShown) return <ThemePage key={themeShown.id} of={themeShown} env={env} files={files} />;

package/src/EntryForm.tsx

@@ -14,7 +14,9 @@ import { addressOf, moveRedirects, REDIRECTS, retarget } from './addresses';
 import { changesOf, flatten, readAll, REDIRECT_FILES, setRedirect } from './redirectData';
 import { TAB_ROUTES } from './Redirects';
 import { choose } from './ask';
-import { readFields, splitFrontmatter, writeFields } from './frontmatter.mjs';
+import { sideSettingOf } from './SideColumn';
+import { sideSwitchShown } from '../lib/side-block.mjs';
+import { booleanRead, booleanWrite, readFields, splitFrontmatter, writeFields } from './frontmatter.mjs';
 import MarkdownEditor, { type MarkdownHandle } from './MarkdownEditor';
 import { useBlockDialog } from './BlockDialog';
 import { blockHtml } from '../lib/blocks.mjs';
@@ -115,7 +117,7 @@ function valuesOf(collection: MarkdownCollection, file: RepoFile): Record<string
     collection.fields.map((f) => {
       const v = data[f.name];
       if (f.name === 'path') return [f.name, addressNow(collection, file, data)];
-      if (f.type === 'boolean') return [f.name, v === true];
+      if (f.type === 'boolean') return [f.name, booleanRead(v, f.missing)];
       if (f.multiple) return [f.name, Array.isArray(v) ? v.map(String) : []];
       return [f.name, v == null ? '' : String(v)];
     }),
@@ -128,9 +130,12 @@ const scrolling = (): ScrollBehavior => (matchMedia('(prefers-reduced-motion: re
 const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b);
 
 // The values as they are saved: a field only in use with another's value (Field.only: "Tidspunkt" with
-// "Planlagt") is empty without it, so it leaves the file.
+// "Planlagt") is empty without it, so it leaves the file; a switch that is on when its key is missing (Field.missing,
+// "Sidekolonne") leaves the file when it is on (booleanWrite).
 const inForm = (fields: Field[], values: Record<string, unknown>) =>
-  Object.fromEntries(fields.map((f) => [f.name, inUse(f, fields, values) ? values[f.name] : '']));
+  Object.fromEntries(
+    fields.map((f) => [f.name, inUse(f, fields, values) ? (f.type === 'boolean' ? booleanWrite(values[f.name], f.missing) : values[f.name]) : '']),
+  );
 
 type Props = { collection: MarkdownCollection; file: RepoFile; env: Env };
 
@@ -593,7 +598,11 @@ function Form({
       const layout = collection.fields.filter((f) => f.layout);
       const relaid = !isNew && changed.some((f) => f.layout);
       const sameLayout = (data: Record<string, unknown>) =>
-        layout.every((f) => String(data[f.name] || '') === String(values[f.name] || ''));
+        layout.every((f) =>
+          f.type === 'boolean'
+            ? booleanRead(data[f.name], f.missing) === (values[f.name] === true)
+            : String(data[f.name] || '') === String(values[f.name] || ''),
+        );
       const changes = (...names: string[]) => isNew || relaid || changed.some((f) => names.includes(f.name));
       const others =
         isNew || relaid
@@ -630,8 +639,10 @@ function Form({
       set('date', String(v).slice(0, 10));
   };
   // The fields in use (Field.only).
+  // "Sidekolonne" only while src/data/side.json chooses a block and the page is not "Hele bredden" (sideSwitchShown).
+  const sideShown = sideSwitchShown({ block: sideSettingOf(env.files) }, values);
   const field = (f: Field) =>
-    inUse(f, collection.fields, values) && <FieldInput key={f.name} field={f} value={values[f.name]} onChange={(v) => onChange(f, v)} />;
+    inUse(f, collection.fields, values) && (f.name !== 'side' || sideShown) && <FieldInput key={f.name} field={f} value={values[f.name]} onChange={(v) => onChange(f, v)} />;
 
   return (
     <Fields.Provider value={fields}>

package/src/Library.tsx

@@ -113,6 +113,7 @@ import { colorsOf } from './Colors';
 import { OwnerLicenses } from './Licenses';
 import { apps } from './site';
 import { offBlocks } from './registry';
+import { sideChoicesOf, sideSettingOf } from './SideColumn';
 
 // Where a part opens: its list, or the file itself when it is one file (the menu).
 const hrefOf = (c: Collection) => (c.kind === 'files' && c.files.length === 1 ? `#${c.files[0].file}` : `#liste/${c.id}`);
@@ -208,8 +209,8 @@ export function Company({ part, files }: { part?: Part; files: RepoFile[] }) {
 }
 
 // "Udseende": first "Temaer" (Themes), with the theme the site is built with at the end of its row (or, after a swap,
-// until the site is built with the new one, that one), "Ikonpakker" (IconPacks), with the pack chosen, and "Bevægelse"
-// (MotionSchemes), with the scheme chosen; then how the
+// until the site is built with the new one, that one), "Ikonpakker" (IconPacks), with the pack chosen, "Bevægelse"
+// (MotionSchemes), with the scheme chosen, and "Sidekolonne" (SideColumn.tsx), with the block chosen; then how the
 // site looks, the colours (Colors.tsx), the logo and
 // icon (BrandForm.tsx) and the site's own parts there (appearance in packages/editor/defaults/editor.ts: "Standardsider", a screen of its
 // own, CompanyForm.tsx, going back here), and how the editor and the blocks look, their parts ("Dele", PartsHome), each on a
@@ -226,6 +227,12 @@ export function Theme({ files }: { files: RepoFile[] }) {
       detail: iconPacks.find((x) => x.id === chosenPack(files))?.name,
     },
     { id: 'bevaegelse', label: t.common.parts.motion, icon: icons.bevaegelse, detail: t.library.motionSchemes[motionOf(files)] },
+    {
+      id: 'sidekolonne',
+      label: t.common.parts.sideColumn,
+      icon: icons.sidekolonne,
+      detail: sideChoicesOf(files).find((x) => x.type === sideSettingOf(files))?.label ?? t.library.sideNone,
+    },
     { id: 'farver', label: t.common.parts.colors, icon: icons.farver, trailing: <ThemeColors files={files} /> },
     { id: 'logo', label: t.common.parts.brand, icon: icons.logo },
     ...appearance,

package/src/SideColumn.tsx

@@ -0,0 +1,83 @@
+// "Udseende" › "Sidekolonne" (#udseende/sidekolonne): the block drawn in a column beside the text of the pages, chosen
+// among "Ingen" and the installed blocks that can be (`beside` in their load.ts), saved in the site's file (config.side)
+// in its own commit. Exposes SideColumn, sideSettingOf and sideChoicesOf (also used by the page form and by Library.tsx).
+// Uses ui.tsx (ChoiceRow, Group), registry.tsx (siteBlocks) and lib/side-block.mjs.
+import { useState } from 'react';
+import { config } from '@site/editor';
+import { ConflictError, type RepoFile } from './github';
+import Screen from './Screen';
+import { ChoiceRow, EmptyNote, Group } from './ui';
+import type { Env } from './App';
+import { kindAndName } from './deploy';
+import { ask } from './ask';
+import { installedApps } from './apps';
+import { siteBlocks } from './registry';
+import { locale, siteT, t } from './i18n';
+import { sideChoices } from '../lib/side-block.mjs';
+
+// The text of each block's load.ts (the editor never imports it: it runs on the site), by the block's type.
+const sources: Record<string, string> = Object.fromEntries(
+  Object.entries({
+    ...import.meta.glob<string>('./standard/*/load.ts', { eager: true, query: '?raw', import: 'default' }),
+    ...import.meta.glob<string>('/src/apps/*/blocks/*/load.ts', { eager: true, query: '?raw', import: 'default' }),
+  }).map(([path, text]) => [path.split('/').at(-2)!, text]),
+);
+
+const capital = (s: string) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+const back = { href: '#udseende', label: t.common.parts.appearance };
+
+/** The block type the site's file (config.side) chooses, or null. */
+export function sideSettingOf(files: { path: string; text: string }[]): string | null {
+  try {
+    const block = JSON.parse(files.find((f) => f.path === config.side)?.text ?? '{}').block;
+    return typeof block === 'string' && block ? block : null;
+  } catch {
+    return null;
+  }
+}
+
+/** The installed blocks that can be drawn beside a page's text, with their names in the editor's language. */
+export const sideChoicesOf = (files: { path: string; text: string }[]) =>
+  sideChoices(siteBlocks, sources, installedApps(files)) as { type: string; label: string }[];
+
+/** "Sidekolonne": "Ingen" and each block that can be drawn beside the text, the one chosen ticked. A tap on another asks
+ * first and then saves it (`{ "block": "<type>" }`, or `{ "block": null }`) at once, in its own commit, as an icon pack is. */
+export default function SideColumn({ env, files }: { env: Env; files: RepoFile[] }) {
+  const [saving, setSaving] = useState(false);
+  const chosen = sideSettingOf(files);
+  const choices = sideChoicesOf(files);
+
+  async function choose(type: string | null, name: string) {
+    if (saving || type === chosen) return;
+    if (!(await ask(type ? t.library.changeSideAsk(name) : t.library.changeSideNoneAsk, t.library.changeSide))) return;
+    const path = config.side;
+    const file = files.find((f) => f.path === path);
+    const text = `${JSON.stringify({ block: type }, null, 2)}\n`;
+    setSaving(true);
+    env.notify({ text: t.common.saving });
+    try {
+      const change = t.app.changes.chosen(kindAndName(t.app.changes.sideColumn, name));
+      const siteName = choices.find((x) => x.type === type)?.label ?? name;
+      const message = type ? siteT.library.sideCommit(siteName) : siteT.library.sideCommitNone;
+      const oids = await env.commit(message, [{ path, content: text, oid: file?.oid || null }], change);
+      env.onSaved({ path, oid: oids[path], text });
+      env.notify({ text: t.library.sideSaved(capital(change)), kind: 'saved' });
+    } catch (e) {
+      env.notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Screen title={t.common.parts.sideColumn} wide back={back}>
+      <Group>
+        <ChoiceRow selected={!chosen} onClick={() => choose(null, t.library.sideNone)} headline={t.library.sideNone} supporting={t.library.sideNoneHint} />
+        {choices.map((x) => (
+          <ChoiceRow key={x.type} selected={x.type === chosen} onClick={() => choose(x.type, x.label)} headline={x.label} />
+        ))}
+      </Group>
+      {!choices.length && <EmptyNote>{t.library.sideEmpty}</EmptyNote>}
+    </Screen>
+  );
+}

package/src/frontmatter.d.mts

@@ -4,3 +4,5 @@ export function splitFrontmatter(text: any): {
 };
 export function readFields(yaml: any): any;
 export function writeFields(yaml: any, changes: any): string;
+export function booleanRead(value: any, missing: any): boolean;
+export function booleanWrite(value: any, missing: any): any;

package/src/frontmatter.mjs

@@ -40,3 +40,9 @@ function toNode(doc, key, value) {
   }
   return node;
 }
+
+// A true/false field that is true when it is missing from the file (Field.missing, "Sidekolonne": `side`): booleanRead
+// gives the form's value for what is in the file; booleanWrite what is written for the form's value (nothing, '', when
+// it is the missing one, so the key leaves the file).
+export const booleanRead = (value, missing) => (value === undefined ? missing === true : value === true);
+export const booleanWrite = (value, missing) => (missing !== undefined && value === missing ? '' : value);

package/src/frontmatter.test.d.mts

@@ -0,0 +1 @@
+export {};

package/src/frontmatter.test.mjs

@@ -0,0 +1,27 @@
+// Tests booleanRead and booleanWrite (frontmatter.mjs): the page switch "Sidekolonne" is `side: false` when off and the
+// key is missing when on. Run: node --test src/frontmatter.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { booleanRead, booleanWrite, writeFields } from './frontmatter.mjs';
+
+const yaml = 'title: "Om os"\nwide: false';
+
+test('a missing key reads as on, side: false as off', () => {
+  assert.equal(booleanRead(undefined, true), true);
+  assert.equal(booleanRead(false, true), false);
+  assert.equal(booleanRead(true, true), true);
+  assert.equal(booleanRead(undefined, undefined), false);
+  assert.equal(booleanRead(true, undefined), true);
+});
+
+test('off writes side: false, on removes the key and leaves the rest as it was', () => {
+  const off = writeFields(yaml, { side: booleanWrite(false, true) });
+  assert.equal(off, `${yaml}\nside: false`);
+  assert.equal(writeFields(off, { side: booleanWrite(true, true) }), yaml);
+  assert.equal(writeFields(yaml, { side: booleanWrite(true, true) }), yaml);
+});
+
+test('a switch without a missing value is written as it is', () => {
+  assert.equal(booleanWrite(true, undefined), true);
+  assert.equal(booleanWrite(false, undefined), false);
+});

package/src/i18n/da-DK/app.ts

@@ -30,6 +30,7 @@ export const app: Messages['app'] = {
     theme: 'tema',
     iconPack: 'ikonpakke',
     motion: 'bevægelse',
+    sideColumn: 'sidekolonne',
     colors: 'farver',
     redirect: (from) => `videresendelse fra ${from}`,
     logo: 'logo',

package/src/i18n/da-DK/common.ts

@@ -97,6 +97,7 @@ export const common: Messages['common'] = {
     themes: 'Temaer',
     iconPacks: 'Ikonpakker',
     motion: 'Bevægelse',
+    sideColumn: 'Sidekolonne',
     colors: 'Farver',
     brand: 'Logo og ikon',
     blockSettings: 'Blokindstillinger',

package/src/i18n/da-DK/library.ts

@@ -64,6 +64,15 @@ export const library: Messages['library'] = {
   changeMotion: 'Skift bevægelse',
   motionSaved: (change) => `${change}. Hjemmesiden får den nye bevægelse, når den er bygget.`,
   motionCommit: (name) => `Editor: skift bevægelse til ${name}`,
+  sideNone: 'Ingen',
+  sideNoneHint: 'Siderne har ingen kolonne ved siden af teksten',
+  sideEmpty: 'Ingen installeret blok kan tegnes ved siden af en sides tekst.',
+  changeSideAsk: (name) => `Siderne får kolonnen ${name}, når hjemmesiden er bygget om et par minutter.`,
+  changeSideNoneAsk: 'Siderne mister kolonnen ved siden af teksten, når hjemmesiden er bygget om et par minutter.',
+  changeSide: 'Skift sidekolonne',
+  sideSaved: (change) => `${change}. Hjemmesiden får ændringen, når den er bygget.`,
+  sideCommit: (name) => `Editor: skift sidekolonne til ${name}`,
+  sideCommitNone: 'Editor: slå sidekolonnen fra',
   themeIconPackStuck: 'Temaets ikonpakke er i brug, så temaet kan ikke afinstalleres. Vælg en anden ikonpakke først.',
   themeDropsIconPack: (name, pack) =>
     `Den nye version af ${name} har ikke ikonpakken ${pack}, som er i brug. Vælg en anden ikonpakke først.`,

package/src/i18n/en-US/app.ts

@@ -35,6 +35,7 @@ export const app = {
     theme: 'theme',
     iconPack: 'icon pack',
     motion: 'motion',
+    sideColumn: 'side column',
     colors: 'colors',
     redirect: (from: string) => `redirect from ${from}`,
     logo: 'logo',

package/src/i18n/en-US/common.ts

@@ -115,6 +115,8 @@ export const common = {
     iconPacks: 'Icon packs',
     /** How the site moves, Material 3's motion schemes (#udseende/bevaegelse, MotionSchemes in Library.tsx). */
     motion: 'Motion',
+    /** The block drawn in a column beside the text of the pages (#udseende/sidekolonne, SideColumn.tsx). */
+    sideColumn: 'Side column',
     colors: 'Colors',
     brand: 'Logo and icon',
     blockSettings: 'Block settings',

package/src/i18n/en-US/library.ts

@@ -94,6 +94,18 @@ export const library = {
   changeMotion: 'Change motion',
   motionSaved: (change: string) => `${change}. The website gets the new motion once it’s built.`,
   motionCommit: (name: string) => `Editor: change motion to ${name}`,
+  /** Under "Sidekolonne" (SideColumn.tsx): the choice of no block and what is under it, what is said when no block can be
+   * drawn there, asked before one is chosen, the question's button, what is said after it is saved, and the commit, in
+   * the site's language (siteT). */
+  sideNone: 'None',
+  sideNoneHint: 'The pages have no column beside their text',
+  sideEmpty: 'No installed block can be drawn beside the text of a page.',
+  changeSideAsk: (name: string) => `The pages get the column ${name} once the website is built in a few minutes.`,
+  changeSideNoneAsk: 'The pages lose the column beside their text once the website is built in a few minutes.',
+  changeSide: 'Change side column',
+  sideSaved: (change: string) => `${change}. The website gets the change once it’s built.`,
+  sideCommit: (name: string) => `Editor: change side column to ${name}`,
+  sideCommitNone: 'Editor: turn off the side column',
   /** A theme whose icon pack is chosen cannot be uninstalled, nor updated to a version without it (ThemeStore.tsx). */
   themeIconPackStuck: "The theme's icon pack is in use, so the theme can’t be uninstalled. Choose another icon pack first.",
   themeDropsIconPack: (name: string, pack: string) =>

package/src/schema.ts

@@ -414,4 +414,6 @@ export type SiteProps<P = Record<string, any>> = {
   path?: string;
   preview?: boolean;
   texts?: Record<string, any>;
+  /** The page's text, for a block drawn beside it (`beside` in its load.ts). */
+  html?: string;
 };