@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/src/ThemeStore.tsx

@@ -5,11 +5,13 @@
 // it); and on the page of one installed from the store (ThemePage in Library.tsx) "Opdater til …" and "Afinstaller"
 // (ThemeStoreButtons). Installing copies its folder into the site's themes (config.themes/<id>/, with its store.json),
 // updating copies the newer version over it and uninstalling deletes it, each saved at once in its own commit
-// (themeChanges); the site's next build has it, and only then can it be chosen ("Brug temaet"). The theme in use, the one
-// the site is changing to and the standard theme cannot be uninstalled.
+// (themeChanges), the button pressed showing the loading indicator while it runs; the site's next build has it, and
+// only then can it be chosen ("Brug temaet"). The theme in use, the one the site is changing to and the standard theme
+// cannot be uninstalled.
 import { useEffect, useState } from 'react';
 import { Check, Smiley } from '@phosphor-icons/react';
 import Screen from './Screen';
+import { busyFor } from './busyAction.mjs';
 import { Button, EmptyNote, Group, GroupTitle, ImageCarousel, SupportingText, ListItem } from './ui';
 import { ConflictError, type RepoFile } from './github';
 import type { Env } from './App';
@@ -106,19 +108,24 @@ const themeOfPack = (files: RepoFile[]) => iconPacks.find((x) => x.id === chosen
 const canUninstall = (id: string, files: RepoFile[]) =>
   id !== STANDARD_THEME && id !== theme.id && id !== chosenTheme(files) && id !== themeOfPack(files);
 
+type ThemeAction = 'install' | 'update' | 'uninstall';
+
 /** Installing, updating and uninstalling a theme from the store, each saved at once in its own commit (themeChanges).
  * Each says true when it was saved. */
 function useThemeActions(env: Env) {
-  const [saving, setSaving] = useState(false);
+  // Which action runs, on which theme (busyAction.mjs shows only the pressed button).
+  const [running, setRunning] = useState<{ id: string; action: ThemeAction; asking: boolean } | null>(null);
+  const saving = !!running;
   const recordOf = (x: ShownTheme): StoreRecord => ({ version: x.version, ref: x.version, files: x.files });
 
   async function change(
     id: string,
+    action: ThemeAction,
     text: { busy: string; done: string; commit: string; change: string },
     next: () => Promise<Parameters<typeof themeChanges>[2]>,
     go: (current: RepoFile[]) => Promise<boolean> = async () => true,
   ): Promise<boolean> {
-    setSaving(true);
+    setRunning({ id, action, asking: false });
     env.notify({ text: text.busy });
     try {
       const [current, wanted] = await Promise.all([env.folder(themeFolder(id)), next()]);
@@ -126,6 +133,9 @@ function useThemeActions(env: Env) {
         env.notify(null);
         return false;
       }
+      // `go` cleared the message (and its dialog stopped the button being busy): saving goes on.
+      setRunning({ id, action, asking: false });
+      env.notify({ text: text.busy });
       await env.commit(text.commit, themeChanges(id, current, wanted), text.change);
       env.notify({ text: text.done, kind: 'saved' });
       return true;
@@ -133,15 +143,17 @@ function useThemeActions(env: Env) {
       env.notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
       return false;
     } finally {
-      setSaving(false);
+      setRunning(null);
     }
   }
 
   return {
     saving,
+    busy: (id: string, action: ThemeAction) => busyFor(running, id, action),
     async install(x: ShownTheme) {
       const done = await change(
         x.id,
+        'install',
         {
           busy: t.apps.installing,
           done: t.library.themeInstalled(x.name),
@@ -156,6 +168,7 @@ function useThemeActions(env: Env) {
     async update(x: ShownTheme, record: StoreRecord) {
       const done = await change(
         x.id,
+        'update',
         {
           busy: t.apps.updating,
           done: t.library.themeUpdated(x.name, x.version),
@@ -171,6 +184,7 @@ function useThemeActions(env: Env) {
             env.notify({ text: t.library.themeDropsIconPack(x.name, pack.name), error: true });
             return false;
           }
+          setRunning({ id: x.id, action: 'update', asking: true });
           return askUpdate(
             x.name,
             record.version,
@@ -187,6 +201,7 @@ function useThemeActions(env: Env) {
       if (!(await ask(t.library.askUninstallTheme(name), t.apps.uninstall))) return false;
       const done = await change(
         id,
+        'uninstall',
         {
           busy: t.apps.uninstalling,
           done: t.library.themeUninstalled(name),
@@ -277,7 +292,11 @@ export function StoreThemePage({ id, env }: { id: string; env: Env }) {
           </div>
           {!pending && (
             <div className="mb-8">
-              <Button disabled={actions.saving} onClick={async () => (await actions.install(of)) && redraw((n) => n + 1)}>
+              <Button
+                disabled={actions.saving}
+                busy={actions.busy(of.id, 'install')}
+                onClick={async () => (await actions.install(of)) && redraw((n) => n + 1)}
+              >
                 {t.apps.install}
               </Button>
             </div>
@@ -314,8 +333,8 @@ export function StoreThemePage({ id, env }: { id: string; env: Env }) {
             <div>
               <Button
                 kind="outlined"
-
                 disabled={actions.saving}
+                busy={actions.busy(of.id, 'uninstall')}
                 onClick={async () => (await actions.uninstall(of.id, of.name)) && redraw((n) => n + 1)}
               >
                 {t.apps.uninstall}
@@ -344,7 +363,7 @@ export function ThemeStoreButtons({ of, env, files, top }: { of: ThemeInfo; env:
   if (top)
     return update ? (
       <div className="mb-8">
-        <Button disabled={actions.saving} onClick={() => actions.update(update, of.store!)}>
+        <Button disabled={actions.saving} busy={actions.busy(of.id, 'update')} onClick={() => actions.update(update, of.store!)}>
           {t.apps.update(update.version)}
         </Button>
       </div>
@@ -354,8 +373,8 @@ export function ThemeStoreButtons({ of, env, files, top }: { of: ThemeInfo; env:
     <div>
       <Button
         kind="outlined"
-
         disabled={actions.saving || !free}
+        busy={actions.busy(of.id, 'uninstall')}
         onClick={async () => (await actions.uninstall(of.id, of.name)) && redraw((n) => n + 1)}
       >
         {t.apps.uninstall}

package/src/Versions.tsx

@@ -6,19 +6,7 @@
 // version, in a new commit, so nothing is lost and every version can always be found here again.
 import { Component, Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
 import { ClockCounterClockwise } from '@phosphor-icons/react';
-import {
-  Button,
-  EmptyNote,
-  IconButton,
-  listClass,
-  Notice,
-  LoadingIndicator,
-  BottomSheet,
-  SheetTitle,
-  SheetBody,
-  ProblemNote,
-  ListItem,
-} from './ui';
+import { Button, EmptyNote, IconButton, listClass, Notice, BottomSheet, SheetTitle, SheetBody, ProblemNote, ListItem } from './ui';
 import { mayLeave } from './FormFrame';
 import { when } from './when';
 import type { Env } from './App';
@@ -138,8 +126,8 @@ function VersionRows({ list, onPick }: { list: ReturnType<typeof useVersionList>
         </ul>
       )}
       {more && (
-        <Button kind="outlined" disabled={loading} onClick={() => load(more)}>
-          {loading ? <LoadingIndicator>{t.history.loading}</LoadingIndicator> : t.history.more}
+        <Button kind="outlined" busy={loading} onClick={() => load(more)}>
+          {t.history.more}
         </Button>
       )}
     </>

package/src/busyAction.d.mts

@@ -0,0 +1,3 @@
+/** Whether the button of `action` ("install", "update" or "uninstall") on `id` shows the loading indicator: only the
+ * one pressed, and not while a dialog waits for the user. */
+export function busyFor(running: any, id: any, action: any): boolean;

package/src/busyAction.mjs

@@ -0,0 +1,8 @@
+// Which store action runs, for the buttons that show it: `running` is { id, action, asking } or null; `asking` is true
+// while a dialog waits for the user. Exposes busyFor. No dependencies, so node can import it.
+
+/** Whether the button of `action` ("install", "update" or "uninstall") on `id` shows the loading indicator: only the
+ * one pressed, and not while a dialog waits for the user. */
+export function busyFor(running, id, action) {
+  return !!running && !running.asking && running.id === id && running.action === action;
+}

package/src/busyAction.test.mjs

@@ -0,0 +1,16 @@
+// Tests for src/busyAction.mjs: only the pressed button is busy, and not while a dialog waits. Run: node --test
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { busyFor } from './busyAction.mjs';
+
+test('busyFor is true for the running action on its id only', () => {
+  const running = { id: 'a', action: 'install', asking: false };
+  assert.equal(busyFor(running, 'a', 'install'), true);
+  assert.equal(busyFor(running, 'a', 'update'), false);
+  assert.equal(busyFor(running, 'b', 'install'), false);
+});
+
+test('busyFor is false when nothing runs or a dialog waits', () => {
+  assert.equal(busyFor(null, 'a', 'install'), false);
+  assert.equal(busyFor({ id: 'a', action: 'update', asking: true }, 'a', 'update'), false);
+});

package/src/dataFileValues.ts

@@ -0,0 +1,30 @@
+// A JSON file in a form: its fields, its values in the form (from its text) and its data again (to save), the same for one
+// file on its own screen (DataForm.tsx) and several on one (useDataFiles.ts, Appearance › Header). Exposes fieldsOf,
+// listOnly, valuesOf, dataOf and dataFileIn. Uses check.ts (withDefaults, clean) and schema.ts.
+import { entryData, type Collection, type DataFile, type Field } from './schema';
+import { clean, withDefaults } from './check';
+import type { RepoFile } from './github';
+
+/** A single file's fields: its own ("Aktiveret") and, when it is a list (the menus), the list's field after them. */
+export const fieldsOf = (dataFile: DataFile): Field[] => (dataFile.root ? [...dataFile.fields, dataFile.root] : dataFile.fields);
+
+/** A file that is only a list, without fields of its own beside it (a menu with "Aktiveret" is not). */
+export const listOnly = (dataFile?: DataFile) => !!dataFile?.root && !dataFile.fields.length;
+
+/** A file's values in the form: its data (with the defaults of fields it has none for; an entry of a list as the list has
+ * it now, entryData), or a list under the field's name. */
+export function valuesOf(text: string, fields: Field[], dataFile: DataFile | undefined, collection: Collection, files: RepoFile[]) {
+  if (listOnly(dataFile)) return { [dataFile!.root!.name]: JSON.parse(text) } as Record<string, unknown>;
+  return withDefaults(fields, collection.kind === 'folder' && !dataFile ? entryData(collection, text, files) : JSON.parse(text));
+}
+
+/** The values as they are saved (clean): a file that is only a list as the list itself. */
+export function dataOf(fields: Field[], values: Record<string, unknown>, dataFile?: DataFile): unknown {
+  const data = clean(fields, values);
+  return listOnly(dataFile) ? data[dataFile!.root!.name] : data;
+}
+
+/** A single file as the site has it; an optional one (the header's) that the site has not got yet as an empty one, which
+ * the first save makes. */
+export const dataFileIn = (files: RepoFile[], dataFile: DataFile): RepoFile | undefined =>
+  files.find((f) => f.path === dataFile.file) ?? (dataFile.optional ? { path: dataFile.file, oid: '', text: '{}\n' } : undefined);

package/src/editor.css

@@ -24,10 +24,14 @@
   --editor-section-gap: 2rem;
   --editor-section-rhythm: 0.625em;
 
-  /* A form's "on this page" area (SectionPane in ui.tsx) against the window's end edge: its width, the card in it
+  /* A form's "on this page" area (SectionPane in ui.tsx) against the window's end edge: its width (the card is as wide as the navigation drawer), the card in it
      stands --section-pane-gap in from the end edge and from under the top bar. */
-  --section-pane-width: 16rem;
+  --section-pane-width: calc(var(--navigation-drawer-width, 22.5rem) + var(--section-pane-gap));
   --section-pane-gap: 2rem;
+
+  /* The side panel of a block's fields and the section settings (BottomSheet `panel` in ui.tsx) on large and wider: half the
+     space beside the start panel, the content column taking the other half (see below). */
+  --side-panel-width: calc((100vw - var(--column-start)) / 2);
 }
 
 /* In dark mode the score's number in the light colours, which are read on the dark. */
@@ -438,7 +442,9 @@
    far as it must to stay clear of the panels: its start margin is the middle of the window less the start panel, but
    not less than nothing and not more than the space left between the panels less the column. Only when that space is
    smaller than the column does it get narrower. (Measured against the window's width, 100vw, scrollbar and all.) Below
-   medium nothing stands beside the content and the column is centred by auto margins. */
+   medium nothing stands beside the content and the column is centred by auto margins. While the side panel is open (see
+   the end of this block) the panel takes the end half of the space beside the start panel and the column the other half:
+   --column-width stays the column's most, so on a very wide window it is narrower than its half. */
 :root {
   --column-start: 0px;
   --column-end: 0px;
@@ -479,6 +485,34 @@
   :root:has(.editor-section-pane) .editor-save-bar {
     right: var(--section-pane-width);
   }
+
+  /* The side panel (.editor-side-panel: BottomSheet `panel`; BlockDialog.tsx sets [data-side-panel] on the root while it is
+     open) stands at the window's end edge under the top bar, the full remaining height. It takes the "on this page" area's
+     place (that is hidden), and the content, which stays in view, inert behind the modal <dialog>, keeps clear of it. Its
+     backdrop is clear: the page is not dimmed. */
+  :root[data-side-panel] {
+    --column-end: var(--side-panel-width);
+  }
+  :root[data-side-panel] .editor-section-pane {
+    display: none;
+  }
+  :root[data-side-panel] .editor-content {
+    padding-inline-end: var(--side-panel-width);
+  }
+  :root[data-side-panel] .editor-save-bar {
+    right: var(--side-panel-width);
+  }
+  .editor-side-panel {
+    inset: var(--top-bar-height) 0 0 auto;
+    width: var(--side-panel-width);
+    height: calc(100dvh - var(--top-bar-height));
+  }
+  .editor-side-panel:dir(rtl) {
+    inset: var(--top-bar-height) auto 0 0;
+  }
+  .editor-side-panel::backdrop {
+    background: transparent;
+  }
 }
 
 /* Like an app: no grey flash when tapping links and buttons on a phone, and no zoom on a double tap.

package/src/fields.tsx

@@ -509,6 +509,16 @@ function FieldControl({ field, value, onChange }: Props) {
 // that depends on one there (inUse).
 const AroundHere = createContext<Around | undefined>(undefined);
 
+/** An object field's own fields without its group, whose heading is elsewhere (a section of Appearance › Header: "Action
+ * button"), at the object's path, so a wrong one is marked as it is in the group (WrongField). */
+export function ObjectFields({ field, value, onChange }: Props) {
+  return (
+    <PathHere.Provider value={joined(useContext(PathHere), field.name)}>
+      <FieldList fields={field.fields!} value={(value ?? {}) as Record<string, unknown>} onChange={onChange} />
+    </PathHere.Provider>
+  );
+}
+
 // The fields of an object, in order.
 export function FieldList({
   fields,
@@ -762,18 +772,21 @@ const capitalFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 // ListItem), and the items under one (its list field, the submenu) indented along a line, shown with
 // the arrow at the right. An item's text and page are changed in a sheet from the bottom,
 // opened with a tap on it or the pencil, and saved with "Gem"; the sheet also removes it. A new item
-// (+ in the top bar, "Tilføj punkt" under a submenu) opens its sheet at once; "Annuller" there takes it
-// away again. The arrows move an item up and down.
+// (+ in the top bar, "Tilføj punkt" under a submenu, and under the menu with `add`) opens its sheet at once; "Annuller"
+// there takes it away again. The arrows move an item up and down.
 export function MenuList({
   field,
   value,
   onChange,
   depth = 0,
+  add = false,
 }: {
   field: Field;
   value: unknown[];
   onChange: (v: unknown) => void;
   depth?: number;
+  /** "Tilføj …" under the list too, where the top bar has no "+" for it (two menus on one screen: Appearance › Header). */
+  add?: boolean;
 }) {
   const [open, setOpen] = useState<number | null>(null);
   // The item whose sheet is open, its fields as they are being changed (and as they were, written as
@@ -884,23 +897,20 @@ export function MenuList({
                     onChange={(v) => onChange(value.map((x, j) => (j === i ? { ...(x as Item), [sub.name]: v } : x)))}
                     depth={depth + 1}
                   />
-                  <Button
-                    kind="text"
-                    size="small"
-                    icon={Plus}
-                    className="mt-1 ml-5"
+                  <AddItem
+                    field={sub}
+                    sub
                     onClick={() =>
                       onChange(value.map((x, j) => (j === i ? { ...(x as Item), [sub.name]: [...children, newItem(sub)] } : x)))
                     }
-                  >
-                    {t.forms.addOne(sub.singular ?? t.forms.item)}
-                  </Button>
+                  />
                 </div>
               )}
             </ListItem>
           );
         })}
       </ul>
+      {add && <AddItem field={field} onClick={() => onChange([...value, newItem(field)])} />}
       <BottomSheet
         ref={sheetRef}
         aria-label={editing ? nameOf(editing.value) || capitalFirst(singular) : undefined}
@@ -940,3 +950,12 @@ export function MenuList({
     </div>
   );
 }
+
+// "Tilføj …" (an item to a list of the menu): under a submenu (`sub`, indented as its items), or under the menu.
+function AddItem({ field, sub = false, onClick }: { field: Field; sub?: boolean; onClick: () => void }) {
+  return (
+    <Button kind="text" size="small" icon={Plus} className={sub ? 'mt-1 ml-5' : 'mt-1'} onClick={onClick}>
+      {t.forms.addOne(field.singular ?? t.forms.item)}
+    </Button>
+  );
+}

package/src/footerPreview.d.mts

@@ -0,0 +1,46 @@
+/**
+ * What the form (`now`) changes from footer.json as it was saved (`saved`): only what differs is in it, so the rest of the
+ * page stays exactly as on the site.
+ * @param {FooterValues} saved
+ * @param {FooterValues} now
+ * @returns {FooterDraft}
+ */
+export function footerDraft(saved: FooterValues, now: FooterValues): FooterDraft;
+/**
+ * Puts what the form changes (footerDraft) into the site's page: the texts as they are, and the links as copies of the
+ * page's own first link (or, when it has none, drawn with `theme`).
+ * @param {Document} doc
+ * @param {FooterDraft} draft
+ * @param {FooterTheme} theme
+ */
+export function swapFooter(doc: Document, draft: FooterDraft, theme: FooterTheme): void;
+/**
+ * footer.json as the form has it.
+ */
+export type FooterValues = {
+    text?: string;
+    contactHeading?: string;
+    linksHeading?: string;
+    links?: {
+        label?: string;
+        href?: string;
+    }[];
+};
+/**
+ * What the form changes in the footer; undefined leaves it as it is on the site.
+ */
+export type FooterDraft = {
+    text?: string;
+    contactHeading?: string;
+    linksHeading?: string;
+    links?: {
+        label: string;
+        href: string;
+    }[];
+};
+/**
+ * How the theme draws what the page may not have: the class of a link, for the list of a page whose footer has none.
+ */
+export type FooterTheme = {
+    linkClass: string;
+};

package/src/footerPreview.mjs

@@ -0,0 +1,84 @@
+// The editor's preview of the footer (FooterSettings.tsx): what the footer's form changes (footerDraft), and those changes
+// put into the site's page (swapFooter), in the parts Footer.astro marks with data-editor: the text under the name
+// (footer-text), the two headings (footer-contact-heading, footer-links-heading) and the links (footer-links).
+// Exposes footerDraft and swapFooter. A DOM (the browser's, jsdom in the tests), no React.
+
+/**
+ * footer.json as the form has it.
+ * @typedef {{ text?: string, contactHeading?: string, linksHeading?: string, links?: { label?: string, href?: string }[] }} FooterValues
+ */
+
+/**
+ * What the form changes in the footer; undefined leaves it as it is on the site.
+ * @typedef {{ text?: string, contactHeading?: string, linksHeading?: string, links?: { label: string, href: string }[] }} FooterDraft
+ */
+
+// A link with only what the footer shows of it.
+/** @param {{ label?: string, href?: string }} link */
+const linkOf = ({ label = '', href = '' }) => ({ label, href });
+
+const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+/**
+ * What the form (`now`) changes from footer.json as it was saved (`saved`): only what differs is in it, so the rest of the
+ * page stays exactly as on the site.
+ * @param {FooterValues} saved
+ * @param {FooterValues} now
+ * @returns {FooterDraft}
+ */
+export function footerDraft(saved, now) {
+  /** @type {FooterDraft} */
+  const draft = {};
+  for (const name of /** @type {const} */ (['text', 'contactHeading', 'linksHeading'])) {
+    if ((now[name] ?? '') !== (saved[name] ?? '')) draft[name] = now[name] ?? '';
+  }
+  const [links, before] = [(now.links ?? []).map(linkOf), (saved.links ?? []).map(linkOf)];
+  if (!same(links, before)) draft.links = links;
+  return draft;
+}
+
+/**
+ * How the theme draws what the page may not have: the class of a link, for the list of a page whose footer has none.
+ * @typedef {{ linkClass: string }} FooterTheme
+ */
+
+/** @param {ParentNode} doc @param {string} name @returns {HTMLElement | null} */
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+
+/**
+ * Puts what the form changes (footerDraft) into the site's page: the texts as they are, and the links as copies of the
+ * page's own first link (or, when it has none, drawn with `theme`).
+ * @param {Document} doc
+ * @param {FooterDraft} draft
+ * @param {FooterTheme} theme
+ */
+export function swapFooter(doc, draft, theme) {
+  for (const [name, key] of /** @type {const} */ ([
+    ['footer-text', 'text'],
+    ['footer-contact-heading', 'contactHeading'],
+    ['footer-links-heading', 'linksHeading'],
+  ])) {
+    const el = part(doc, name);
+    if (el && draft[key] !== undefined) el.textContent = draft[key];
+  }
+  const list = part(doc, 'footer-links');
+  if (!list || !draft.links) return;
+  const one = list.firstElementChild ?? null;
+  list.replaceChildren(
+    ...draft.links.map((link) => {
+      let row = /** @type {HTMLElement | null} */ (one?.cloneNode(true) ?? null);
+      if (!row) {
+        row = doc.createElement('li');
+        const a = doc.createElement('a');
+        a.className = theme.linkClass;
+        row.append(a);
+      }
+      const a = row.querySelector('a');
+      if (a) {
+        a.textContent = link.label;
+        a.setAttribute('href', link.href);
+      }
+      return row;
+    }),
+  );
+}

package/src/footerPreview.test.mjs

@@ -0,0 +1,100 @@
+// Tests footerPreview.mjs: what the footer's form changes (footerDraft), and those changes put into a page drawn as
+// Footer.astro draws it (swapFooter). jsdom stands in for the browser's DOM.
+// Run: node --test src/footerPreview.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { JSDOM } from 'jsdom';
+import { footerDraft, swapFooter } from './footerPreview.mjs';
+
+const PAGE = `<!doctype html><html><body>
+<footer data-editor="footer"><p class="name">Navn</p><p data-editor="footer-text">Gammel tekst</p>
+<p data-editor="footer-contact-heading">Kontakt</p>
+<p data-editor="footer-links-heading">Links</p>
+<ul data-editor="footer-links"><li class="row"><a href="/a/" class="item">A</a></li><li class="row"><a href="/b/" class="item">B</a></li></ul>
+</footer></body></html>`;
+
+const THEME = { linkClass: 'item' };
+const page = () => new JSDOM(PAGE).window.document;
+const part = (doc, name) => doc.querySelector(`[data-editor="${name}"]`);
+
+const SAVED = {
+  text: 'Gammel tekst',
+  contactHeading: 'Kontakt',
+  linksHeading: 'Links',
+  links: [
+    { label: 'A', href: '/a/' },
+    { label: 'B', href: '/b/' },
+  ],
+};
+
+test('footerDraft: nothing changed is an empty draft', () => {
+  assert.deepEqual(footerDraft(SAVED, structuredClone(SAVED)), {});
+});
+
+test('footerDraft: only the texts that differ', () => {
+  assert.deepEqual(footerDraft(SAVED, { ...SAVED, text: 'Ny', linksHeading: 'Praktisk' }), { text: 'Ny', linksHeading: 'Praktisk' });
+});
+
+test('footerDraft: the links with only label and href', () => {
+  const now = { ...SAVED, links: [{ label: 'C', href: '/c/', extra: 1 }] };
+  assert.deepEqual(footerDraft(SAVED, now), { links: [{ label: 'C', href: '/c/' }] });
+});
+
+test('footerDraft: a file the site has not got is empty', () => {
+  assert.deepEqual(footerDraft({}, {}), {});
+  assert.deepEqual(footerDraft({}, { text: 'Hej' }), { text: 'Hej' });
+});
+
+test('swapFooter: an empty draft leaves the page as it is', () => {
+  const doc = page();
+  const before = doc.body.innerHTML;
+  swapFooter(doc, {}, THEME);
+  assert.equal(doc.body.innerHTML, before);
+});
+
+test('swapFooter: the text and the two headings are redrawn', () => {
+  const doc = page();
+  swapFooter(doc, { text: 'Ny tekst', contactHeading: 'Ring', linksHeading: 'Praktisk' }, THEME);
+  assert.equal(part(doc, 'footer-text').textContent, 'Ny tekst');
+  assert.equal(part(doc, 'footer-contact-heading').textContent, 'Ring');
+  assert.equal(part(doc, 'footer-links-heading').textContent, 'Praktisk');
+});
+
+test('swapFooter: the links are copies of the page own', () => {
+  const doc = page();
+  const links = [
+    { label: 'X', href: '/x/' },
+    { label: 'Y', href: '/y/' },
+    { label: 'Z', href: '/z/' },
+  ];
+  swapFooter(doc, { links }, THEME);
+  const rows = [...part(doc, 'footer-links').children];
+  assert.deepEqual(
+    rows.map((li) => [li.className, li.querySelector('a').textContent, li.querySelector('a').getAttribute('href')]),
+    [
+      ['row', 'X', '/x/'],
+      ['row', 'Y', '/y/'],
+      ['row', 'Z', '/z/'],
+    ],
+  );
+});
+
+test('swapFooter: links with none on the page are drawn with the theme class', () => {
+  const doc = page();
+  part(doc, 'footer-links').replaceChildren();
+  swapFooter(doc, { links: [{ label: 'X', href: '/x/' }] }, THEME);
+  assert.equal(part(doc, 'footer-links').innerHTML, '<li><a class="item" href="/x/">X</a></li>');
+});
+
+test('swapFooter: no links leaves an empty list', () => {
+  const doc = page();
+  swapFooter(doc, { links: [] }, THEME);
+  assert.equal(part(doc, 'footer-links').children.length, 0);
+});
+
+test('swapFooter: a page without the marked parts is left alone', () => {
+  const doc = new JSDOM('<body><footer data-editor="footer"><slot></slot></footer></body>').window.document;
+  const before = doc.body.innerHTML;
+  swapFooter(doc, { text: 'x', links: [{ label: 'a', href: '/' }] }, THEME);
+  assert.equal(doc.body.innerHTML, before);
+});