@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/shared.ts

@@ -0,0 +1,44 @@
+// A block's shared texts: the ones every copy of it has ("Læs mere"), in shared.ts in its folder
+// (src/apps/<app>/blocks/<type>/shared.ts), written in the site's language like the rest of the block. They come
+// with the block: its screen under "Blokke" is made of them (site.ts), and until the owner saves their own
+// (in config.blockTexts, under the block's type) the site uses those written here. Their names in the
+// editor's other languages are in the block's texts.ts, like its other texts. The site's build reads
+// them (packages/editor/site/site.ts), so they import nothing that needs a browser.
+// A standard block can have them too (standard/<type>/shared.ts, found by standard/sharedTexts.ts): its
+// fields named in the editor's language (t), its values in the site's (siteT).
+import type { Field, PreviewVariant } from './schema';
+
+export type SharedTexts = {
+  /** The fields of its screen under "Blokke". */
+  fields: Field[];
+  /** The texts before any are saved. */
+  values: Record<string, unknown>;
+  /** Its screen draws the block under the fields (Part.preview), with these props when no page has it. */
+  preview?: { props?: Record<string, unknown>; shared?: boolean; variants?: PreviewVariant[] };
+};
+export const defineShared = (texts: SharedTexts) => texts;
+
+/** The type of a block from the path of a file in its folder (".../blocks/offer/shared.ts": "offer"). */
+export const blockTypeOf = (path: string) => path.split('/').at(-2)!;
+
+/** The shared texts of the blocks as the site shows them, by type: those written in their shared.ts,
+ * with the saved ones over them. `declared`: the shared.ts files by their path. */
+export function sharedTexts(
+  declared: Record<string, SharedTexts>,
+  saved: Record<string, Record<string, unknown> | undefined>,
+): Record<string, Record<string, any>> {
+  return Object.fromEntries(
+    Object.entries(declared).map(([path, texts]) => [blockTypeOf(path), { ...texts.values, ...saved[blockTypeOf(path)] }]),
+  );
+}
+
+/** A block's shared texts in the editor's drawing of it: the site's as the files are now (`blocks` of
+ * the site's data, BlockData.site), else `values` (those in its shared.ts). */
+export const sharedIn = (site: unknown, type: string, values: Record<string, unknown>): Record<string, any> => ({
+  ...values,
+  ...(site as { blocks?: Record<string, Record<string, unknown>> }).blocks?.[type],
+});
+
+/** A shared text with each {name} filled in ("Læs mere om {emne}"); a name without a value stays. */
+export const fill = (text: string, values: Record<string, string | number>) =>
+  text.replace(/\{(\w+)\}/g, (all, name: string) => (name in values ? String(values[name]) : all));

package/src/sidebar.ts

@@ -0,0 +1,31 @@
+// Whether the sidebar is open on a computer (App.tsx), closed and opened with the button at its top
+// or, while it is closed, at the start of the top bar (Screen.tsx). Kept in this browser.
+import { useSyncExternalStore } from 'react';
+
+const KEY = 'editor-sidebar';
+let open = (() => {
+  try {
+    return localStorage.getItem(KEY) !== 'closed';
+  } catch {
+    return true;
+  }
+})();
+const listeners = new Set<() => void>();
+
+export function setSidebar(next: boolean) {
+  open = next;
+  try {
+    localStorage.setItem(KEY, next ? 'open' : 'closed');
+  } catch {}
+  listeners.forEach((l) => l());
+}
+
+export const useSidebar = () =>
+  useSyncExternalStore(
+    (changed) => {
+      listeners.add(changed);
+      return () => listeners.delete(changed);
+    },
+    () => open,
+    () => true,
+  );

package/src/site.ts

@@ -0,0 +1,317 @@
+// The site as the editor shows it: what src/site/ describes (the collections and their fields, the
+// start screen's groups, the screens under "Virksomheden" and "Blokke") with the site's texts in the
+// editor's language (siteText, @site/texts). The editor takes these from here, not from
+// @site/editor. A commit says what was saved in the site's language: asWritten gives back a
+// collection, a file, a part or a block as the site wrote it.
+import * as site from '@site/editor';
+import type { ColorPair } from '../lib/colors';
+import { appIdOf, installedApps, withKinds, type AppDefinition, type AppList, type SiteApp } from './apps';
+import { appBlocks, appFiles, appFolders, appPictures, appShared, appStores } from './appFiles';
+import type { BlockDefinition, SiteBlock } from './blocks';
+import type { ListRows } from './fields';
+import { siteT, siteText, t, translatingSite } from './i18n';
+import { byText, type Block, type Collection, type DataFile, type Edit, type Field, type OwnedList, type Part } from './schema';
+import { blockTypeOf, type SharedTexts } from './shared';
+import { appFolder, needsOf, SCREENSHOTS, shotFile } from './store';
+
+const written = new WeakMap<object, object>();
+
+/** A collection, a file, a part or a block as the site wrote it, in its language: for the commits. */
+export const asWritten = <T extends object>(shown: T): T => (written.get(shown) as T | undefined) ?? shown;
+
+// Only the keys a thing has, so it is the same as it was but for its texts.
+function shown<T extends object>(from: T, texts: Partial<T>): T {
+  const to = { ...from };
+  for (const key of Object.keys(texts) as (keyof T)[]) if (from[key] !== undefined) to[key] = texts[key]!;
+  written.set(to, from);
+  return to;
+}
+
+/** The site's parts with every text of theirs said by `say`: the label, the hint, the link elsewhere,
+ * the message of a pattern, the options, a switch's two words … of each field, block, file and part. */
+export function translator(say: (text: string) => string) {
+  const maybe = (text?: string) => (text === undefined ? text : say(text));
+  const edit = (e?: Edit) => e && { ...e, text: say(e.text) };
+  const field = (f: Field): Field =>
+    shown(f, {
+      label: say(f.label),
+      hint: maybe(f.hint),
+      edit: edit(f.edit),
+      pattern: f.pattern && [f.pattern[0], say(f.pattern[1])],
+      options: f.options?.map((o) => ({ ...o, label: say(o.label), hint: maybe(o.hint) })),
+      add: maybe(f.add),
+      singular: maybe(f.singular),
+      toggle: f.toggle && [say(f.toggle[0]), say(f.toggle[1])],
+      fields: f.fields?.map(field),
+      field: f.field && field(f.field),
+      blocks: f.blocks?.map(block),
+    });
+  const block = <B extends Block | SiteBlock>(b: B): B =>
+    shown<Block | SiteBlock>(b, { label: say(b.label), hint: maybe(b.hint), edit: edit(b.edit), fields: b.fields.map(field) }) as B;
+  const file = (f: DataFile): DataFile => shown(f, { label: say(f.label), fields: f.fields.map(field), root: f.root && field(f.root) });
+  const collection = (c: Collection): Collection =>
+    c.kind === 'files'
+      ? shown(c, { label: say(c.label), singular: say(c.singular), create: maybe(c.create), files: c.files.map(file) })
+      : shown(c, { label: say(c.label), singular: say(c.singular), create: maybe(c.create), fields: c.fields.map(field) });
+  const part = (p: Part): Part =>
+    shown(p, {
+      label: say(p.label),
+      fields: p.fields?.map(field),
+      back: p.back && { ...p.back, label: say(p.back.label) },
+      parts: p.parts?.map(part),
+    });
+  const group = (g: (typeof site.groups)[number]) => ({ ...g, title: say(g.title) });
+  const color = (c: ColorField): ColorField => ({ ...c, label: say(c.label), hint: say(c.hint) });
+  const pair = (p: ColorPair): ColorPair => ({ ...p, what: say(p.what) });
+  const app = <A extends AppDefinition>(a: A): A =>
+    shown<AppDefinition>(a, {
+      label: say(a.label),
+      hint: say(a.hint),
+      description: maybe(a.description),
+      releaseNotes: a.releaseNotes && Object.fromEntries(Object.entries(a.releaseNotes).map(([v, x]) => [v, say(x)])),
+      screenshots: a.screenshots?.map((x) => ({ ...x, label: say(x.label) })),
+      cookieList: a.cookieList?.map((c) => ({ ...c, purpose: say(c.purpose), lasts: maybe(c.lasts) })),
+      settings: a.settings && { ...a.settings, fields: a.settings.fields.map(field) },
+      kinds:
+        a.kinds &&
+        Object.fromEntries(
+          Object.entries(a.kinds).map(([list, k]) => [
+            list,
+            {
+              ...k,
+              label: say(k.label),
+              hint: maybe(k.hint),
+              fields: k.fields?.map(field),
+              variants: k.variants?.map((v) => ({ ...v, label: say(v.label) })),
+            },
+          ]),
+        ),
+      lists: a.lists?.map((l) => collection(l) as AppList),
+    }) as A;
+  return { block, collection, part, group, color, pair, app };
+}
+
+/** A colour under "Farver" (colorFields in @site/colors): its CSS variable without "--", its name and what it is for. */
+type ColorField = (typeof site.colorFields)[number];
+
+const local = translator(siteText);
+const each = <T>(all: T[], one: (x: T) => T) => (translatingSite ? all.map(one) : all);
+
+// The screens under "Blokke" of the blocks with shared texts (shared.ts in the block's folder), named and
+// drawn like the block: the apps' blocks' (src/apps/<app>/blocks/), as the site wrote them, and the standard blocks' (standard/), in the editor's language, where the site has
+// no block by the same name.
+type Folders<T> = Record<string, { default: T }>;
+function sharedPartsOf(blocks: Folders<BlockDefinition>, shared: Folders<SharedTexts>): Part[] {
+  return Object.entries(shared).flatMap(([path, m]): Part[] => {
+    const block = blocks[path.replace(/shared\.ts$/, 'index.tsx')]?.default;
+    if (!block) return [];
+    const type = blockTypeOf(path);
+    const { fields, values, preview } = m.default;
+    return [
+      {
+        id: type,
+        label: block.label,
+        icon: block.icon,
+        file: site.config.blockTexts,
+        at: type,
+        fields,
+        defaults: values,
+        preview: { type, ...preview },
+        back: { href: '#blokke', label: t.common.parts.blocks },
+      },
+    ];
+  });
+}
+export const sharedParts = sharedPartsOf(appBlocks, appShared);
+const owned = new Set(Object.keys(appBlocks).map(blockTypeOf));
+// Named in the site's language in the commits, as their blocks are (siteT).
+const standardParts = sharedPartsOf(
+  import.meta.glob<{ default: BlockDefinition }>('./standard/*/index.tsx', { eager: true }),
+  import.meta.glob<{ default: SharedTexts }>('./standard/*/shared.ts', { eager: true }),
+)
+  .filter((p) => !owned.has(p.id))
+  .map((p) => {
+    const label = (siteT.blocks as Record<string, { label?: string }>)[p.id]?.label;
+    if (label) written.set(p, { ...p, label });
+    return p;
+  });
+
+/** The screens under "Blokke" as the site wrote them: its own (packages/editor/defaults/blockTexts.ts) and the blocks'. */
+export const writtenBlockParts: Part[] = [...site.blockParts, ...sharedParts, ...standardParts];
+
+/** The parts of "Virksomheden"; one with parts of its own (Part.parts) has them going back to it. */
+export const companyParts = each(
+  site.companyParts.map((p) =>
+    p.parts ? { ...p, parts: p.parts.map((s) => ({ ...s, back: { href: `#virksomheden/${p.id}`, label: p.label } })) } : p,
+  ),
+  local.part,
+);
+/** The site's screens with parts (PartScreen), each part going back to its screen. */
+export const partScreens = site.partScreens.map((s) => ({
+  ...s,
+  label: translatingSite ? siteText(s.label) : s.label,
+  parts: each(
+    s.parts.map((p) => ({ ...p, back: { href: `#${s.id}`, label: s.label } })),
+    local.part,
+  ),
+}));
+/** The site's own parts under "Udseende" (#udseende, Library.tsx Theme), after the logo and icon, each going back to it. */
+export const appearance = each(
+  site.appearance.map((p) => ({ ...p, back: { href: '#udseende', label: t.common.parts.appearance } })),
+  local.part,
+);
+/** The site's own parts under "Søgemaskineoptimering" (#seo, Library.tsx Seo), after the redirects, each going back to it. */
+export const seoParts = each(
+  site.seoParts.map((p) => ({ ...p, back: { href: '#seo', label: t.common.parts.seo } })),
+  local.part,
+);
+/** The site's own first ("Book en tid"), then the blocks' by their names. */
+export const blockParts = [
+  ...each(site.blockParts, local.part),
+  ...[...each(sharedParts, local.part), ...standardParts].sort((a, b) => byText(a.label, b.label)),
+];
+export const groups = each(site.groups, local.group);
+/** The colours under "Farver" (@site/colors), with their names and hints in the editor's language. */
+export const colorFields = each(site.colorFields, local.color);
+/** The pairs that must be readable (@site/colors), with what they are in the editor's language. */
+export const colorPairs = each(site.colorPairs, local.pair);
+/** The settings of the whole site, on "Indstillinger" (#indstillinger) instead of the start screen. */
+export const settings: string[] = site.settings;
+
+/** Where a part of the start screen is, as the way there says it: its group's title, or "Indstillinger" for a setting. */
+export const placeOf = (id: string): string | undefined =>
+  settings.includes(id) ? t.common.parts.settings : groups.find((g) => g.ids.includes(id))?.title;
+
+/** Where a screen goes back to: "Indstillinger" for a setting ("Udseende", "Apps", "Analytics" …), else the start screen. */
+export const backFrom = (id: string) =>
+  settings.includes(id) ? { href: '#indstillinger', label: t.common.parts.settings } : { href: '#', label: site.siteName };
+
+/** Where a standard page (by its key, packages/editor/defaults/standardPages.ts) is chosen, as the way there from the start screen
+ * ("Indstillinger › Udseende › Standardsider"): the part with its field in the file of the standard pages. */
+export function standardPageAt(key: string): string {
+  const chosenIn = (p: Part) => p.file === site.config.standardPages && !!p.fields?.some((f) => f.name === key);
+  const screen = [{ id: 'udseende', label: t.common.parts.appearance, parts: appearance }, ...partScreens].find((s) =>
+    s.parts.some(chosenIn),
+  );
+  if (!screen) return '';
+  return [placeOf(screen.id), screen.label, screen.parts.find(chosenIn)!.label].filter(Boolean).join(' › ');
+}
+
+/** An app's block with its texts in the editor's language; its card says
+ * its lines (detail) in it itself. */
+export const localSiteBlock = (b: SiteBlock): SiteBlock => (translatingSite ? local.block(b) : b);
+
+/** An app (src/apps/, apps.ts) with its texts and its settings' fields in the editor's language. */
+export const localApp = <A extends AppDefinition>(a: A): A => (translatingSite ? local.app(a) : a);
+
+// The apps in the site (src/apps/<app>/index.ts, apps.ts), each with the blocks it adds (its blocks/), what it needs
+// (from its folder), its pictures and, from the app store, where it came from (its store.json), by their names: as the
+// site wrote them, and in the editor's language.
+const appBlockPaths = Object.keys(appBlocks);
+/** The apps as the site wrote them (the commits, the check before the build). */
+export const writtenApps: SiteApp[] = Object.entries(appFiles)
+  .map(([path, m]) => {
+    const id = appIdOf(path);
+    const store = Object.entries(appStores).find(([p]) => appIdOf(p) === id)?.[1].default;
+    return {
+      ...m.default,
+      id,
+      blocks: appBlockPaths.filter((p) => appIdOf(p) === id).map((p) => p.split('/').at(-2)!),
+      needs: needsOf(appFolders[id]?.files ?? [], appFolders[id]?.csp),
+      pictures: [],
+      ...(store ? { store } : {}),
+    };
+  })
+  .map((a) => withPictures(a))
+  .sort((a, b) => byText(a.label, b.label));
+export const apps: SiteApp[] = writtenApps.map((a) => withPictures(localApp(a))).sort((a, b) => byText(a.label, b.label));
+
+/** An app with the addresses of its pictures (its `screenshots`, in their order), each with what it says under it. */
+function withPictures(app: SiteApp): SiteApp {
+  const folder = `/${appFolder(app.id)}/${SCREENSHOTS}/`;
+  const pictures = (app.screenshots ?? []).flatMap((x, i) => {
+    const src = appPictures[folder + shotFile(i, x.shows)];
+    return src ? [{ src, label: x.label }] : [];
+  });
+  return { ...app, pictures };
+}
+
+// Which app a block's screen under "Standardblokke" comes from, by its type: the app with a block of that type
+// (also the site's own, e.g. an app's booking block, "Book en tid").
+const appOfType = new Map(appBlockPaths.map((p) => [blockTypeOf(p), appIdOf(p)]));
+const standardIds = new Set(standardParts.map((p) => p.id));
+/** "Standardblokke" in groups, as under "Blokindstillinger": the standard blocks (and the site's own, if no app has
+ * a block of their type), then each app's under its name; in each, by their names. */
+export const blockGroups: { title: string; parts: Part[] }[] = [
+  { title: t.blockSettings.standard, parts: blockParts.filter((p) => standardIds.has(p.id) || !appOfType.has(p.id)) },
+  ...apps.map((a) => ({ title: a.label, parts: blockParts.filter((p) => !standardIds.has(p.id) && appOfType.get(p.id) === a.id) })),
+]
+  .map((g) => ({ ...g, parts: [...g.parts].sort((a, b) => byText(a.label, b.label)) }))
+  .filter((g) => g.parts.length > 0);
+
+// The lists the standard blocks bring (standard/<type>/list.ts: "Udtalelser"), on every site: in the editor's
+// language, and as the site writes them (siteT), for the commits.
+const standardLists = Object.values(
+  import.meta.glob<{ default: (say: typeof t) => OwnedList }>('./standard/*/list.ts', { eager: true }),
+).map((m) => {
+  const shown = m.default(t);
+  written.set(shown, m.default(siteT));
+  return shown;
+});
+
+// The lists the apps bring (AppDefinition.lists), after the site's own and the standard blocks': all apps', installed
+// or not, so what was made with one can still be edited.
+const listsOf = (all: SiteApp[]) => all.flatMap((a) => a.lists ?? []);
+
+/** The site's lists as it wrote them, the standard blocks' and the apps', with the kinds the apps add to them
+ * (withKinds). */
+export const writtenCollections = [...site.collections, ...standardLists.map(asWritten), ...listsOf(writtenApps)].map((c) =>
+  withKinds(c, writtenApps),
+);
+export const collections = [...each(site.collections, local.collection), ...standardLists, ...listsOf(apps)].map((c) => {
+  const merged = withKinds(c, apps);
+  if (merged !== c) written.set(merged, withKinds(asWritten(c), writtenApps));
+  return merged;
+});
+
+// The lists under "Lister" besides the site's own: the standard blocks', always, and the apps'.
+const ownedLists = [...standardLists, ...listsOf(writtenApps)];
+
+/** The made-up rows of the lists the standard blocks and the apps bring (`examples`), by the list's id, as listRowsOf
+ * gives them: what the made-up site (examples.ts) has in them. */
+export const listExamples: ListRows = Object.fromEntries(
+  ownedLists.flatMap((l) => (l.examples ? [[l.id, l.examples.map((row, i) => ({ ...row, slug: String(i + 1) }))]] : [])),
+);
+
+/** The rows of the lists the standard blocks and the apps bring, by the list's id, in their order (`order`, then the
+ * file's name), each with its `slug`: what the blocks show from them (BlockData.lists). */
+export const listRowsOf = (files: { path: string; text: string }[]): ListRows =>
+  Object.fromEntries(
+    ownedLists.map((l) => [
+      l.id,
+      files
+        .filter((f) => f.path.startsWith(`${l.folder}/`) && f.path.endsWith('.json'))
+        .sort((a, b) => a.path.localeCompare(b.path))
+        .flatMap((f): Record<string, unknown>[] => {
+          try {
+            return [{ ...(JSON.parse(f.text) as Record<string, unknown>), slug: f.path.slice(l.folder.length + 1, -'.json'.length) }];
+          } catch {
+            return [];
+          }
+        })
+        .sort((a, b) => (Number(a.order) || 0) - (Number(b.order) || 0)),
+    ]),
+  );
+
+/** The icon of each part on the start screen, in the sidebar and under "Lister", by its id: the site's, and the
+ * standard blocks' and the apps' lists'. */
+export const icons = { ...site.icons, ...Object.fromEntries(ownedLists.map((l) => [l.id, l.icon])) };
+
+/** The short lists, under "Lister" (#lister): the site's, the standard blocks' and the apps', which go back there too. */
+export const lists = [...site.lists, ...ownedLists.map((l) => l.id)];
+
+/** The lists under "Lister" now: the site's, the standard blocks' and those of the apps installed. */
+export const listsShown = (files: { path: string; text: string }[]) => {
+  const installed = installedApps(files);
+  return [...site.lists, ...[...standardLists, ...listsOf(writtenApps.filter((a) => installed.includes(a.id)))].map((l) => l.id)];
+};

package/src/standard/Block.astro

@@ -0,0 +1,19 @@
+---
+// One block by its type, outside the text of a page: for a theme that shows a block in a place of its own
+// (a fixed page's section "Book en tid", the one at the end of a page), as RichText.astro shows it in the
+// text. The theme only places it; the block is the standard one's or the app's (sites.ts), so the theme
+// never imports from an app. Nothing is shown for a type no block has.
+import { blockSites } from './sites';
+
+interface Props {
+  type: string;
+  /** The block's fields, as in its line in the text. */
+  props?: Record<string, unknown>;
+  /** Its shared texts, when the block takes them as RichText.astro gives them (blockTexts). */
+  texts?: Record<string, unknown>;
+}
+const { type, props = {}, texts } = Astro.props;
+const Site = blockSites[type];
+---
+
+{Site && <Site type={type} props={props} texts={texts} />}

package/src/standard/BlockSite.astro

@@ -0,0 +1,18 @@
+---
+// A block on the site drawn from its view (view.tsx): the view its contract makes when the site is built (load.ts in
+// its folder: blockLoads in views.ts), drawn by its View.tsx (blockViews) as HTML, without JavaScript; then what the
+// contract puts right after it (`after`: a script that runs as the page is read, structured data). Nothing when there
+// is no view (a notice that is over).
+import type { SiteProps } from '../schema';
+import { blockLoads, blockViews } from './views';
+
+type Props = SiteProps & { type: string };
+const { type, props, index, path, preview, texts } = Astro.props;
+const contract = blockLoads[type];
+const View = blockViews[type];
+const view = contract && View ? await contract.load(props ?? {}, { texts: texts ?? {}, index, path, preview }) : null;
+const after = view === null ? undefined : contract.after?.(view);
+---
+
+{view !== null && <View view={view} />}
+{after && <Fragment set:html={after} />}

package/src/standard/accordion/index.tsx

@@ -0,0 +1,47 @@
+// "Foldeliste", a standard block: rows that fold out, one open at a time, each with a text (its own, or
+// the opening of the page it links to) and a link to its page with the shared text "Læs mere om {emne}"
+// (shared.ts), and links to more pages under it (`more`, as pills); with a head (../head.ts). The same
+// rows as "Spørgsmål og svar". How it looks is the theme's
+// (packages/editor/theme/blocks/accordion/View.tsx, with ../faq/Accordion.tsx and PageRow.tsx); what it shows: view.ts, and
+// load.ts on the site.
+import { Rows } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { t } from '../../i18n';
+import { headFields } from '../head';
+import { example } from './shared';
+
+export default defineBlock({
+  label: t.blocks.accordion.label,
+  icon: Rows,
+  hint: t.blocks.accordion.hint,
+  edit: { to: 'blokke/accordion', text: t.blocks.accordion.edit },
+  fields: [
+    ...headFields,
+    {
+      name: 'items',
+      label: t.blocks.accordion.items,
+      singular: t.blocks.accordion.item,
+      type: 'list',
+      summary: 'label',
+      required: true,
+      fields: [
+        { name: 'label', label: t.blocks.accordion.title, type: 'string', required: true },
+        { name: 'href', label: t.blocks.accordion.href, type: 'relation', to: 'pages', required: true },
+        { name: 'text', label: t.blocks.accordion.text, type: 'text', hint: t.blocks.accordion.textHint },
+        {
+          name: 'more',
+          label: t.blocks.accordion.moreItems,
+          singular: t.blocks.accordion.moreItem,
+          type: 'list',
+          summary: 'label',
+          fields: [
+            { name: 'label', label: t.blocks.accordion.moreLabel, type: 'string', required: true },
+            { name: 'href', label: t.blocks.accordion.href, type: 'relation', to: 'pages', required: true },
+          ],
+        },
+      ],
+    },
+  ],
+  example,
+  detail: (p) => [((p.items ?? []) as { label?: string }[]).map((row) => row.label).join(' · ')],
+});

package/src/standard/accordion/load.ts

@@ -0,0 +1,23 @@
+// "Foldeliste" on the site (view.ts): a row without a text of its own has the opening of its page (pageOpening, from
+// the site: @site/standard; on a new version of a page, /ny/, the opening of the new versions), and a row whose page
+// is missing is left out. One open at a time in each list (its own group, by its place in the text).
+import { standard } from '@site/standard';
+import type { Load } from '../view';
+import { headOf } from '../head';
+import shared from './shared';
+import { pageRow, type AccordionView, type PageRowProps } from './view';
+
+export const load: Load<AccordionView> = async (props, { texts, index, preview }) => {
+  const link: string = texts.more ?? shared.values.more;
+  const rows = await Promise.all(
+    ((props.items ?? []) as PageRowProps[]).map(async (row) => {
+      const opening = await standard.pageOpening(row.href, preview);
+      return opening === undefined ? null : pageRow(row, row.text?.trim() || opening, link);
+    }),
+  );
+  return {
+    ...headOf(props),
+    group: `accordion-${index}`,
+    rows: rows.filter((row) => row !== null),
+  };
+};

package/src/standard/accordion/shared.ts

@@ -0,0 +1,15 @@
+// The shared text of "Foldeliste" ("Blokke"): the link under a row's text, with {emne} for the row's
+// heading, to begin with in the site's language (siteT). Also on a site's own rows drawn with
+// PageRow.tsx (this site's front page).
+import { siteT, t } from '../../i18n';
+import { defineShared } from '../../shared';
+
+/** The rows it is shown with where no page has it: its screen under "Blokke" and "Tilgængelige
+ * blokke" (index.tsx). In the site's language, like the drawing. */
+export const example = { items: siteT.blocks.accordion.example.map((label) => ({ label, href: '' })) };
+
+export default defineShared({
+  fields: [{ name: 'more', label: t.blocks.accordion.more, type: 'string', required: true, max: 40, hint: t.blocks.accordion.moreHint }],
+  values: { more: siteT.blocks.accordion.moreText },
+  preview: { props: example },
+});

package/src/standard/accordion/view.ts

@@ -0,0 +1,32 @@
+// What "Foldeliste" shows (its view, drawn by the theme's View.tsx, Accordion.tsx and PageRow.tsx): its head (../head.ts),
+// and its rows in their order: each with its own text, or else the opening of the page it links
+// to, the link to the page (the shared text, with the row's name in it) and links to more pages under it (`more`). In
+// the editor (viewOf) a row without a text of its own says so; on the site (load.ts) a row whose page is missing is
+// left out.
+import { siteT } from '../../i18n';
+import { fill, sharedIn } from '../../shared';
+import type { ViewOf } from '../view';
+import { headOf, type HeadView } from '../head';
+import shared from './shared';
+
+/** A row of a page: its name, its text, its page, the link's text and links to more pages. */
+export type PageRowView = { label: string; text: string; href: string; link: string; more?: { label: string; href: string }[] };
+
+export type AccordionView = HeadView & { group?: string; rows: PageRowView[] };
+
+/** A row as its field writes it. */
+export type PageRowProps = { label: string; href: string; text?: string; more?: { label: string; href: string }[] };
+
+/** A row with its text and the link's text (`link`, the shared text: "Læs mere om {emne}"). */
+export const pageRow = ({ label, href, more }: PageRowProps, text: string, link: string): PageRowView => {
+  const row = { label, href, text, link: fill(link, { emne: label.toLowerCase() }) };
+  return more?.length ? { ...row, more } : row;
+};
+
+export const viewOf: ViewOf<AccordionView> = (props, data) => {
+  const link: string = sharedIn(data.site, 'accordion', shared.values).more;
+  return {
+    ...headOf(props),
+    rows: ((props.items ?? []) as PageRowProps[]).map((row) => pageRow(row, row.text?.trim() || siteT.blocks.accordion.opening, link)),
+  };
+};

package/src/standard/buttons/fields.ts

@@ -0,0 +1,98 @@
+// The buttons of a "Knapper" block, and the shared ones (shared.ts): where each goes (a page, or where
+// the site's config says, `buttonTargets`, named in the site's language), its text, kind and icon. A target that
+// picks something (`pick`: a promotion to open) has a field for it, offering what is shown on the page being edited,
+// and is offered only while there is something to pick there.
+import { config } from '@site/config';
+import { siteText, t } from '../../i18n';
+import { iconOptions } from '../../icon';
+import type { Field } from '../../schema';
+import type { BlockData } from '../../blocks';
+import type { ButtonTargetName } from '../site';
+import { buttonKinds } from '../view';
+
+/** A button as the field writes it; `open`: what a target that picks something has picked (a promotion's file name). */
+export type Button = { label?: string; to?: string; href?: string; open?: string; kind?: string; icon?: string };
+
+/** Where the buttons can go besides a page (the site's config). */
+export const targets: ButtonTargetName[] = config.buttonTargets ?? [];
+
+export const buttonList: Field = {
+  name: 'items',
+  label: t.blocks.buttons.items,
+  singular: t.blocks.buttons.item,
+  type: 'list',
+  summary: 'label',
+  fields: [
+    {
+      name: 'label',
+      label: t.blocks.buttons.text,
+      type: 'string',
+      max: 30,
+      hint: [
+        t.blocks.buttons.textHint(targets.filter((o) => !o.pick).map((o) => siteText(o.label))),
+        ...targets.flatMap((o) => (o.note ? [siteText(o.note)] : [])),
+      ].join(' '),
+    },
+    {
+      name: 'to',
+      label: t.blocks.buttons.to,
+      type: 'select',
+      required: true,
+      default: targets[0]?.value ?? 'page',
+      options: [
+        ...targets.map((o) => ({ label: siteText(o.label), value: o.value, onPage: o.pick })),
+        { label: t.blocks.buttons.page, value: 'page' },
+      ],
+    },
+    ...targets.flatMap((o): Field[] =>
+      o.pick
+        ? [
+            {
+              name: 'open',
+              label: siteText(o.pickLabel ?? o.label),
+              type: 'relation',
+              to: o.pick,
+              onPage: true,
+              required: true,
+              only: { field: 'to', is: [o.value] },
+            },
+          ]
+        : [],
+    ),
+    { name: 'href', label: t.blocks.buttons.href, type: 'relation', to: 'pages', fixed: true, hint: t.blocks.buttons.hrefHint },
+    {
+      name: 'kind',
+      label: t.blocks.buttons.kind,
+      type: 'select',
+      required: true,
+      default: 'filled',
+      options: buttonKinds.map((k) => ({ label: t.blocks.buttons.kinds[k], value: k })),
+    },
+    {
+      name: 'icon',
+      label: t.blocks.buttons.icon,
+      type: 'select',
+      icons: true,
+      hint: t.blocks.buttons.iconHint,
+      options: [
+        { label: t.blocks.buttons.arrow, value: 'arrow-right' },
+        { label: t.blocks.buttons.calendar, value: 'calendar-blank' },
+        ...iconOptions(t.blocks.icons),
+      ],
+    },
+  ],
+};
+
+/** A button's text: its own, or its target's (the site's data: BlockData.site.buttons), what it opens (the choice
+ * picked, Option.text: a promotion's) or its page's name, with what comes after it (the phone number). */
+export const textOf = (b: Button, data: BlockData) => {
+  const own = b.label?.trim();
+  if (b.to === 'page') return own || data.site.pages.find((p) => p.path === b.href)?.title || b.href || '';
+  const pick = targets.find((o) => o.value === b.to)?.pick;
+  if (pick) {
+    const picked = data.relations[pick]?.find((o) => o.value === b.open);
+    return own || picked?.text || data.site.buttons[picked?.as ?? '']?.text || '';
+  }
+  const target = data.site.buttons[b.to ?? ''];
+  return [own || target?.text, target?.after].filter(Boolean).join(' ');
+};