@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/standard/buttons/index.tsx

@@ -0,0 +1,23 @@
+// "Knapper", a standard block: buttons in a row, each to a page or where the site's config says
+// (`buttonTargets`: here the booking sheet and the phone), with a text and an icon: its own, or the
+// shared ones ("Blokke" › "Knapper", shared.ts) while it has none. How it looks is the theme's
+// (packages/editor/theme/blocks/buttons/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { CursorClick } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { t } from '../../i18n';
+import { buttonList } from './fields';
+
+export default defineBlock({
+  label: t.blocks.buttons.label,
+  icon: CursorClick,
+  hint: t.blocks.buttons.hint,
+  edit: { to: 'blokke/buttons', text: t.blocks.buttons.edit },
+  fields: [{ ...buttonList, hint: t.blocks.buttons.itemsHint }],
+  preview: true,
+  detail: (p) => [
+    ((p.items ?? []) as { label?: string }[])
+      .map((b) => b.label)
+      .filter(Boolean)
+      .join(' · ') || t.blocks.buttons.shared,
+  ],
+});

package/src/standard/buttons/load.ts

@@ -0,0 +1,34 @@
+// Buttons on the site (view.ts). A button goes to a page or where the site's config says (`buttonTargets`, e.g. the
+// booking sheet or the phone: their address and text from the site, @site/standard), or opens what it picked (a
+// promotion on the page: `picked`); without a text of its own it has the target's, the promotion's or the page's name.
+// What it opens on the page is its `data-open` (ButtonText.open), the address is where it goes without one there or
+// without JavaScript. `bar`: the buttons of a bar at the bottom of a phone's screen (the site's action bar): the text
+// without what comes after it (the phone number, said to screen readers instead), and without an icon of their own the
+// one of what they do: the calendar to book, the phone, the arrow after a page or a pop-up.
+import { standard } from '@site/standard';
+import type { Load } from '../view';
+import { targets, type Button } from './fields';
+import { kindOf, type ButtonsView, type ButtonView } from './view';
+
+/** Buttons on the site: their own, else `shared` (the shared ones, "Blokke" › "Knapper"). */
+export async function loadButtons(items: Button[] | undefined, shared?: Button[], { bar = false } = {}): Promise<ButtonView[]> {
+  const list = items?.length ? items : (shared ?? []);
+  const buttons = await Promise.all(
+    list.map(async (b): Promise<ButtonView | null> => {
+      const picks = targets.some((o) => o.value === b.to && o.pick);
+      const target = b.to && b.to !== 'page' ? (picks ? standard.picked(b.to, b.open ?? '') : standard.buttons[b.to]) : undefined;
+      // What it picked is gone (the build stops before, checkSite.ts): no button rather than a wrong one.
+      if (picks && !target) return null;
+      const own = b.label?.trim();
+      const full = target && [own || target.text, target.after].filter(Boolean).join(' ');
+      const [href, text] = target
+        ? [target.href, bar ? own || target.text : full!]
+        : [b.href || '/', own || (await standard.pageName(b.href ?? ''))];
+      const icon = b.icon || (bar ? (target?.open === 'booking' ? 'calendar-blank' : b.to === 'phone' ? 'phone' : 'arrow-right') : '');
+      return { href, text, label: bar && full !== text ? full : undefined, open: target?.open, kind: kindOf(b), icon };
+    }),
+  );
+  return buttons.flatMap((b) => (b ? [b] : []));
+}
+
+export const load: Load<ButtonsView> = async (props, { texts }) => ({ buttons: await loadButtons(props.items, texts.items) });

package/src/standard/buttons/shared.ts

@@ -0,0 +1,12 @@
+// The shared buttons of "Knapper" ("Blokke"): in a "Knapper" block that has none of its own, and where
+// a site shows them itself (this site's front page). None to begin with.
+import { t } from '../../i18n';
+import { defineShared } from '../../shared';
+import { buttonList } from './fields';
+
+export default defineShared({
+  fields: [{ ...buttonList, hint: t.blocks.buttons.sharedHint }],
+  values: { items: [] },
+  // Always the shared ones, not a copy on a page.
+  preview: { shared: true },
+});

package/src/standard/buttons/view.ts

@@ -0,0 +1,30 @@
+// What buttons show (their view, drawn by the theme's Buttons.tsx, also where a site or an app shows buttons of its
+// own): each one's address, text, what it opens on the page, kind and icon. In the editor: buttonsOf; on the site:
+// loadButtons (load.ts), which knows the site's pages and targets.
+import type { BlockData } from '../../blocks';
+import { sharedIn } from '../../shared';
+import { buttonKinds, type ButtonKind, type ViewOf } from '../view';
+import { textOf, type Button } from './fields';
+import shared from './shared';
+
+/** A button as it is drawn: where it goes, its text, what it is called for a screen reader when that is more than its
+ * text (`label`), what it opens on the page (`open`: its data-open), its kind (Material's: filled, tonal, elevated,
+ * outlined or text) and its icon (the arrow goes after the text, the others before it). */
+export type ButtonView = { href: string; text: string; label?: string; open?: string; kind: ButtonKind; icon?: string };
+
+/** "Knapper": its buttons. */
+export type ButtonsView = { buttons: ButtonView[] };
+
+/** A button's kind: its own, else filled. */
+export const kindOf = (b: Button): ButtonKind => buttonKinds.find((k) => k === b.kind) ?? 'filled';
+
+/** Buttons in the editor: their own, else the shared ones ("Blokke" › "Knapper"). */
+export const buttonsOf = (items: Button[] | undefined, data: BlockData): ButtonView[] =>
+  (items?.length ? items : ((sharedIn(data.site, 'buttons', shared.values).items ?? []) as Button[])).map((b) => ({
+    href: b.href ?? '',
+    text: textOf(b, data),
+    kind: kindOf(b),
+    icon: b.icon,
+  }));
+
+export const viewOf: ViewOf<ButtonsView> = (props, data) => ({ buttons: buttonsOf(props.items, data) });

package/src/standard/cards/index.tsx

@@ -0,0 +1,71 @@
+// "Kort", a standard block: a heading and cards with only text, or an icon or a picture at the top (`design`, for
+// all the cards), on the theme's surface or the accent (`background`, for all of them), a heading, a text and a link to another page, with the shared text of the link at the bottom
+// ("Blokke" › "Kort", shared.ts). How it looks is the theme's (packages/editor/theme/blocks/cards/View.tsx with
+// LinkCards.tsx); what it shows: view.ts, and load.ts on the site.
+import { Cards, Circle, Image as Picture, Shapes, Square, TextAa } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { iconOptions } from '../../icon';
+import { t } from '../../i18n';
+import { headFields } from '../head';
+import { example } from './shared';
+
+export default defineBlock({
+  label: t.blocks.cards.label,
+  icon: Cards,
+  hint: t.blocks.cards.hint,
+  edit: { to: 'blokke/cards', text: t.blocks.cards.edit },
+  fields: [
+    ...headFields,
+    // An icon is the empty choice: so are the cards from before there was a choice.
+    {
+      name: 'design',
+      label: t.blocks.cards.design,
+      type: 'select',
+      segments: true,
+      options: [
+        { label: t.blocks.cards.designText, value: 'text', icon: TextAa },
+        { label: t.blocks.cards.designIcon, value: '', icon: Shapes },
+        { label: t.blocks.cards.designImage, value: 'image', icon: Picture },
+      ],
+    },
+    // The cards' background, for all of them: the theme's surface (empty, as the cards from before there was a choice)
+    // or the site's accent.
+    {
+      name: 'background',
+      label: t.blocks.cards.background,
+      type: 'select',
+      segments: true,
+      options: [
+        { label: t.blocks.cards.backgroundStandard, value: '', icon: Square },
+        { label: t.blocks.cards.backgroundAccent, value: 'accent', icon: Circle },
+      ],
+    },
+    {
+      name: 'items',
+      label: t.blocks.cards.items,
+      singular: t.blocks.cards.item,
+      type: 'list',
+      summary: 'title',
+      required: true,
+      fields: [
+        // At the top, as on the card; by the block's design (inUse in check.ts looks next to the list).
+        {
+          name: 'icon',
+          label: t.blocks.cards.icon,
+          type: 'select',
+          icons: true,
+          options: iconOptions(t.blocks.icons),
+          required: true,
+          only: { field: 'design', is: [''] },
+        },
+        { name: 'image', label: t.blocks.cards.image, type: 'image', required: true, only: { field: 'design', is: ['image'] } },
+        { name: 'title', label: t.blocks.cards.title, type: 'string', required: true },
+        { name: 'text', label: t.blocks.cards.text, type: 'text', required: true },
+        // Without one, the card is not a link (LinkCards.tsx).
+        { name: 'href', label: t.blocks.cards.href, type: 'relation', to: 'pages', hint: t.blocks.cards.hrefHint },
+      ],
+    },
+  ],
+  example,
+  detail: (p) => [((p.items ?? []) as { title?: string }[]).map((c) => c.title).join(' · ')],
+});

package/src/standard/cards/load.ts

@@ -0,0 +1,17 @@
+// "Kort" on the site (view.ts): the pictures' sizes come from the site (pictureOf).
+import { pictureOf } from '../load';
+import type { Load } from '../view';
+import { headOf } from '../head';
+import shared from './shared';
+import { cardsOf, type CardsView, type LinkCardProps } from './view';
+
+/** Cards on the site, with their pictures' sizes (a site's own cards too: this site's front page). */
+export const loadCards = (items: LinkCardProps[]) => cardsOf(items, pictureOf);
+
+export const load: Load<CardsView> = async (props, { texts }) => ({
+  ...headOf(props),
+  design: props.design,
+  background: props.background || undefined,
+  more: texts.more ?? shared.values.more,
+  items: loadCards(props.items ?? []),
+});

package/src/standard/cards/shared.ts

@@ -0,0 +1,27 @@
+// The shared text of "Kort" ("Blokke"): the link on the cards, to begin with in the
+// site's language (siteT).
+import { siteT, t } from '../../i18n';
+import { defineShared } from '../../shared';
+
+/** The cards 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. With a page, so the link's text,
+ * which is edited there, is on them. */
+export const example = { items: siteT.blocks.cards.example.map((c) => ({ ...c, href: '/' })) };
+
+export default defineShared({
+  fields: [{ name: 'more', label: t.blocks.cards.more, type: 'string', required: true, max: 30 }],
+  values: { more: siteT.blocks.cards.moreText },
+  // The three designs, each under its name, and the icons on the accent.
+  preview: {
+    props: example,
+    variants: [
+      { label: t.blocks.cards.designText, props: { design: 'text' } },
+      { label: t.blocks.cards.designIcon, props: { design: '' } },
+      { label: t.blocks.cards.designImage, props: { design: 'image' } },
+      {
+        label: `${t.blocks.cards.designIcon}, ${t.blocks.cards.backgroundAccent.toLowerCase()}`,
+        props: { design: '', background: 'accent' },
+      },
+    ],
+  },
+});

package/src/standard/cards/view.ts

@@ -0,0 +1,29 @@
+// What "Kort" shows (its view, drawn by the theme's View.tsx and LinkCards.tsx): its heading, its design ('image': a
+// picture at the top, 'text': nothing, else an icon), its background ('accent', else the theme's surface), the link's text (its shared text) and each card's icon or
+// picture, heading, text and page. In the editor: viewOf; on the site: load.ts, with the pictures' sizes.
+import { shownAt } from '../../images';
+import { sharedIn } from '../../shared';
+import type { Picture, ViewOf } from '../view';
+import { headOf, type HeadView } from '../head';
+import shared from './shared';
+
+export type LinkCard = { icon?: string; image?: Picture; title: string; text: string; href?: string };
+export type CardsView = HeadView & { design?: string; background?: string; more: string; items: LinkCard[] };
+
+/** A card as its field writes it. */
+export type LinkCardProps = { icon?: string; image?: string; title: string; text: string; href?: string };
+
+/** The cards, with their pictures as `picture` gives them. */
+export const cardsOf = (items: LinkCardProps[], picture: (src: string) => Picture): LinkCard[] =>
+  items.map(({ image, ...card }) => (image ? { ...card, image: picture(image) } : card));
+
+/** Cards in the editor (a site's own too: its preview of the front page). */
+export const shownCards = (items: LinkCardProps[]) => cardsOf(items, (src) => ({ src: shownAt(src) }));
+
+export const viewOf: ViewOf<CardsView> = (props, data) => ({
+  ...headOf(props),
+  design: props.design,
+  background: props.background || undefined,
+  more: sharedIn(data.site, 'cards', shared.values).more,
+  items: shownCards(props.items ?? []),
+});

package/src/standard/checklist/index.tsx

@@ -0,0 +1,27 @@
+// "Tjekliste", a standard block: a heading and points, each a short text with a check in a circle in the accent before
+// it; with many of them, in two columns where there is room. How it looks is the theme's
+// (packages/editor/theme/blocks/checklist/View.tsx with Checks.tsx); what it shows: view.ts, and load.ts on the site.
+import { ListChecks } from '@phosphor-icons/react';
+import { cut, defineBlock } from '../../blocks';
+import { siteT, t } from '../../i18n';
+import { headFields } from '../head';
+
+export default defineBlock({
+  label: t.blocks.checklist.label,
+  icon: ListChecks,
+  hint: t.blocks.checklist.hint,
+  fields: [
+    ...headFields,
+    {
+      name: 'items',
+      label: t.blocks.checklist.items,
+      singular: t.blocks.checklist.item,
+      type: 'list',
+      required: true,
+      field: { name: 'text', label: t.blocks.checklist.text, type: 'string', required: true },
+    },
+  ],
+  // In the site's language, like the drawing.
+  example: { items: siteT.blocks.checklist.example },
+  detail: (p) => [cut(((p.items ?? []) as string[]).join(' · '), 140)],
+});

package/src/standard/checklist/load.ts

@@ -0,0 +1,5 @@
+// "Tjekliste" on the site: only its fields (view.ts).
+import type { Load } from '../view';
+import { checklistOf, type ChecklistView } from './view';
+
+export const load: Load<ChecklistView> = async (props) => checklistOf(props);

package/src/standard/checklist/view.ts

@@ -0,0 +1,13 @@
+// What "Tjekliste" shows (its view, drawn by the theme's View.tsx and Checks.tsx): its heading and its points. The same
+// in the editor (viewOf) and on the site (load.ts): only its fields.
+import { headOf, type HeadView } from '../head';
+import type { ViewOf } from '../view';
+
+export type ChecklistView = HeadView & { items: string[] };
+
+export const checklistOf = (props: Record<string, any>): ChecklistView => ({
+  ...headOf(props),
+  items: ((props.items ?? []) as string[]).filter(Boolean),
+});
+
+export const viewOf: ViewOf<ChecklistView> = checklistOf;

package/src/standard/cookies/index.tsx

@@ -0,0 +1,17 @@
+// "Cookieliste", a standard block: the site's cookies as a table in the cookie policy, each one's name, who sets it,
+// what for, how long it lasts and its category. The cookies are in the list the block brings ("Cookies",
+// list.ts; cookieList.ts), so the block works without any app. How it looks is the theme's
+// (packages/editor/theme/blocks/cookies/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { Cookie } from '@phosphor-icons/react';
+import { config } from '@site/config';
+import { defineBlock } from '../../blocks';
+import { t } from '../../i18n';
+
+export default defineBlock({
+  label: t.blocks.cookies.label,
+  icon: Cookie,
+  hint: t.blocks.cookies.hint,
+  edit: { to: `liste/${config.lists.cookies}`, text: t.blocks.cookies.edit },
+  fields: [],
+  example: {},
+});

package/src/standard/cookies/list.ts

@@ -0,0 +1,56 @@
+// "Cookies", the list the standard block "Cookieliste" brings: one file per cookie in the site's data (config.cookieList),
+// under "Lister" on every site, each with its name (`*` for the rest of it), who sets it, what for, how long it lasts
+// and its category (lib/cookieCategories.mjs: necessary, or one the visitor says yes to in the cookie banner). An app's cookies come and go with it, and the app "Cookiescanner"
+// adds those it finds (cookieList.ts). The site reads them for the block (StandardSite.cookies, the site's
+// packages/editor/site/cookieList.ts).
+// Made with the texts of a language: the editor's for the screens, the site's (siteT) for the commits (site.ts).
+import { Cookie } from '@phosphor-icons/react';
+import { config } from '@site/config';
+import { COOKIE_CATEGORIES } from '../../../lib/cookieCategories.mjs';
+import type { Messages } from '../../i18n';
+import type { OwnedList } from '../../schema';
+
+export default function cookiesList(say: Messages): OwnedList {
+  const own = say.blocks.cookies.entries;
+  return {
+    kind: 'folder',
+    id: config.lists.cookies,
+    icon: Cookie,
+    create: own.create,
+    label: own.label,
+    singular: own.singular,
+    folder: config.cookieList,
+    deletable: true,
+    slugFrom: 'name',
+    // Who sets it, with its name under it, so the list is by provider.
+    summary: (d) => String(d.provider ?? ''),
+    detail: (d) => String(d.name ?? ''),
+    // One the app "Cookiescanner" added (`new`, cookieList.ts) first, marked, until it is saved.
+    fresh: {
+      field: 'new',
+      heading: own.fresh,
+      label: (d) => (String(d.purpose ?? '').trim() ? own.freshLabel : own.noPurpose),
+      notice: own.freshNotice,
+      approve: own.approve,
+    },
+    filters: [
+      { field: 'provider', all: own.allProviders },
+      { field: 'category', all: own.allCategories },
+    ],
+    fields: [
+      { name: 'provider', label: own.provider, type: 'string', required: true },
+      { name: 'name', label: own.name, type: 'string', required: true, hint: own.nameHint },
+      { name: 'purpose', label: own.purpose, type: 'text' },
+      { name: 'lasts', label: own.lasts, type: 'string' },
+      {
+        name: 'category',
+        label: own.category,
+        type: 'select',
+        required: true,
+        default: 'marketing',
+        hint: own.categoryHint,
+        options: COOKIE_CATEGORIES.map((value) => ({ label: own.categories[value], value })),
+      },
+    ],
+  };
+}

package/src/standard/cookies/load.ts

@@ -0,0 +1,11 @@
+// "Cookieliste" on the site (view.ts): the cookies of the list "Cookies" from the site (@site/standard) and the shared
+// texts, with those saved over them.
+import { standard } from '@site/standard';
+import type { Load } from '../view';
+import shared from './shared';
+import { rowsOf, type CookiesTexts, type CookiesView } from './view';
+
+export const load: Load<CookiesView> = async (_, { texts }) => ({
+  cookies: rowsOf(standard.cookies),
+  texts: { ...shared.values, ...texts } as CookiesTexts,
+});

package/src/standard/cookies/shared.ts

@@ -0,0 +1,20 @@
+// The shared texts of "Cookieliste" ("Blokke"): the table's headings and the names of the categories, to begin with in
+// the site's language (siteT).
+import { COOKIE_CATEGORIES } from '../../../lib/cookieCategories.mjs';
+import { siteT, t } from '../../i18n';
+import { defineShared } from '../../shared';
+
+const own = t.blocks.cookies;
+
+export default defineShared({
+  fields: [
+    { name: 'name', label: own.nameHead, type: 'string', required: true },
+    { name: 'provider', label: own.providerHead, type: 'string', required: true },
+    { name: 'purpose', label: own.purposeHead, type: 'string', required: true },
+    { name: 'lasts', label: own.lastsHead, type: 'string', required: true },
+    { name: 'category', label: own.categoryHead, type: 'string', required: true },
+    ...COOKIE_CATEGORIES.map((name) => ({ name, label: own[`${name}Text`], type: 'string' as const, required: true })),
+  ],
+  values: { ...siteT.blocks.cookies.texts },
+  preview: { props: {} },
+});

package/src/standard/cookies/view.ts

@@ -0,0 +1,28 @@
+// What "Cookieliste" shows (its view, drawn by the theme's View.tsx): the cookies of the list "Cookies" (list.ts), by
+// category (the necessary first, as the cookie banner has them), then by who sets them and then by name, and its shared
+// texts ("Blokke" › "Cookieliste"), with the categories' names. In the editor: viewOf, from the files as the editor
+// has them (StandardSiteData.cookies); on the site: load.ts.
+import { COOKIE_CATEGORIES, type CookieCategory } from '../../../lib/cookieCategories.mjs';
+import { sharedIn } from '../../shared';
+import type { CookieItem } from '../site';
+import type { ViewOf } from '../view';
+import shared from './shared';
+
+export type CookieRow = { name: string; provider: string; purpose: string; lasts: string; category: CookieCategory };
+export type CookiesTexts = Record<'name' | 'provider' | 'purpose' | 'lasts' | 'category' | CookieCategory, string>;
+export type CookiesView = { cookies: CookieRow[]; texts: CookiesTexts };
+
+const order = (c: CookieRow) => COOKIE_CATEGORIES.indexOf(c.category);
+
+/** The cookies as the block shows them: by category, then by who sets them, then by name (one without a name is left
+ * out). */
+export const rowsOf = (cookies: CookieItem[]): CookieRow[] =>
+  cookies
+    .filter((c) => c.name)
+    .map((c) => ({ name: c.name, provider: c.provider, purpose: c.purpose ?? '', lasts: c.lasts ?? '', category: c.category }))
+    .sort((a, b) => order(a) - order(b) || a.provider.localeCompare(b.provider) || a.name.localeCompare(b.name));
+
+export const viewOf: ViewOf<CookiesView> = (_, data) => ({
+  cookies: rowsOf(data.site.cookies),
+  texts: sharedIn(data.site, 'cookies', shared.values) as CookiesTexts,
+});

package/src/standard/faq/index.tsx

@@ -0,0 +1,29 @@
+// "Spørgsmål og svar", a standard block: questions that fold out with the answer, one open at a time in
+// each list; the answers with bold, italic, links and lists. How it looks is the theme's
+// (packages/editor/theme/blocks/faq/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { Question } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { t } from '../../i18n';
+import { headFields } from '../head';
+
+export default defineBlock({
+  label: t.blocks.faq.label,
+  icon: Question,
+  hint: t.blocks.faq.hint,
+  fields: [
+    ...headFields,
+    {
+      name: 'items',
+      label: t.blocks.faq.items,
+      singular: t.blocks.faq.item,
+      type: 'list',
+      summary: 'question',
+      required: true,
+      fields: [
+        { name: 'question', label: t.blocks.faq.question, type: 'string', required: true },
+        { name: 'answer', label: t.blocks.faq.answer, type: 'markdown', required: true },
+      ],
+    },
+  ],
+  detail: (p) => [((p.items ?? []) as { question?: string }[]).map((q) => q.question).join(' · ')],
+});

package/src/standard/faq/load.ts

@@ -0,0 +1,14 @@
+// "Spørgsmål og svar" on the site (view.ts): the answers as Astro's Markdown makes them (markdownHtml), one open at a
+// time in each list (its own group, by its place in the text).
+import { markdownHtml } from '../../../lib/inline';
+import type { Load } from '../view';
+import { headOf } from '../head';
+import type { FaqView, Question } from './view';
+
+export const load: Load<FaqView> = async (props, { index }) => ({
+  ...headOf(props),
+  group: `faq-${index}`,
+  rows: await Promise.all(
+    ((props.items ?? []) as Question[]).map(async (q) => ({ label: q.question, html: await markdownHtml(q.answer ?? '') })),
+  ),
+});

package/src/standard/faq/view.ts

@@ -0,0 +1,21 @@
+// What "Spørgsmål og svar" shows (its view, drawn by the theme's View.tsx and Accordion.tsx): its heading, its rows
+// (each question, and its answer as HTML: paragraphs, lists, bold, italic and links), and the name that keeps one open
+// at a time in it (on the site by its place in the text; in the editor its own). In the editor: viewOf; on the site:
+// load.ts.
+import { markdownNow } from '../../../lib/markdown';
+import type { PageRowView } from '../accordion/view';
+import type { ViewOf } from '../view';
+import { headOf, type HeadView } from '../head';
+
+/** A row that folds out: a question and its answer as HTML, or a page's row ("Foldeliste", PageRow). */
+export type AccordionRow = { label: string; html: string } | { label: string; page: PageRowView };
+
+export type FaqView = HeadView & { group?: string; rows: AccordionRow[] };
+
+/** A question as its field writes it. */
+export type Question = { question: string; answer?: string };
+
+export const viewOf: ViewOf<FaqView> = (props) => ({
+  ...headOf(props),
+  rows: ((props.items ?? []) as Question[]).map((q) => ({ label: q.question, html: markdownNow(q.answer ?? '') })),
+});

package/src/standard/head.ts

@@ -0,0 +1,23 @@
+// A block's head, for the standard blocks that start a section ("Kort", "Punkter med ikon", "Trin", "Udtalelser",
+// "Spørgsmål og svar", "Blogindlæg", "Foldeliste", "Priskort", "Tjekliste"): a label in small capitals above the
+// heading ("Etiket", `eyebrow`), the heading, and a subheading under it ("Underoverskrift", `intro`: the key
+// "Foldeliste" had it by before), all optional. Its fields, one definition for all of them (headFields, around where
+// the heading is in a block's fields), and what it shows (headOf, the same in the editor and on the site); drawn by the theme's blocks/BlockHead.tsx.
+import { t } from '../i18n';
+import type { Field } from '../schema';
+
+export const headFields: Field[] = [
+  { name: 'eyebrow', label: t.blocks.eyebrow, type: 'string', max: 30, hint: t.blocks.eyebrowHint },
+  { name: 'heading', label: t.blocks.heading, type: 'string', hint: t.blocks.headingHint },
+  { name: 'intro', label: t.blocks.subheading, type: 'text', hint: t.blocks.subheadingHint },
+];
+
+/** What a block's head shows: the label above the heading, the heading and the subheading under it. */
+export type HeadView = { eyebrow?: string; heading?: string; subheading?: string };
+
+/** A block's head, from its fields. */
+export const headOf = (props: Record<string, any>): HeadView => ({
+  eyebrow: props.eyebrow?.trim() || undefined,
+  heading: props.heading || undefined,
+  subheading: props.intro?.trim() || undefined,
+});

package/src/standard/hero/fields.ts

@@ -0,0 +1,48 @@
+// The parts of a "Banner"'s text (its `text`, Markdown), as view.ts and load.ts show them, and a theme's own front
+// page (its home/Hero.astro): a heading at the very top ("## …") is its heading (an H2), the first picture in it,
+// wherever it is, its picture, its "Knapper" block its buttons, the text before that block the subtitle and the
+// introduction, and the text after it the text under the buttons. Without a "Knapper" block (or with a hidden one) it has
+// no buttons, and all of its text is before them. No React here, so the site and the build can use it.
+import { cutAtBlock, parseBlock } from '../../../lib/blocks.mjs';
+import { splitPicture } from '../../../lib/crop.mjs';
+import { plainHeading } from '../../sections.mjs';
+
+export type HeroParts = {
+  heading?: string;
+  /** The text before the buttons, without its heading and its picture (Markdown). */
+  text: string;
+  /** The picture: its own address (without a format, crop or decorative mark) and its description ('' when it is
+   * decorative, crop.mjs). */
+  picture?: { src: string; alt: string };
+  /** The props of its "Knapper" block (`items`: its own buttons, else the shared ones); none without one. */
+  buttons?: Record<string, unknown>;
+  /** The text after the buttons (Markdown). */
+  after: string;
+};
+
+// A picture in Markdown, as Milkdown writes it (with a title, if it has one): its description and its address.
+const PICTURE = /!\[((?:\\.|[^\]])*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/;
+const HEADING = /^ {0,3}##(?!#)(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*(?:\r?\n|$)/;
+const unescape = (s: string) => s.replace(/\\([!-/:-@[-`{-~])/g, '$1');
+const tidy = (s: string) => s.replace(/\n{3,}/g, '\n\n').trim();
+
+/** The parts of a "Banner"'s text. */
+export function heroParts(markdown: unknown): HeroParts {
+  const [before, from] = cutAtBlock(String(markdown ?? ''), 'buttons');
+  const [line = '', ...rest] = from ? from.split('\n') : [];
+  const block = parseBlock(line, ['buttons'])?.props as Record<string, unknown> | undefined;
+  let text = before;
+  let after = rest.join('\n');
+  const top = text.match(HEADING);
+  const heading = top ? plainHeading(top[1] ?? '') || undefined : undefined;
+  if (top) text = text.slice(top[0].length);
+  let picture: HeroParts['picture'];
+  const m = text.match(PICTURE) ?? after.match(PICTURE);
+  if (m) {
+    const { src, decorative } = splitPicture(m[2]);
+    picture = { src, alt: decorative ? '' : unescape(m[1]) };
+    if (text.match(PICTURE)) text = text.replace(PICTURE, '');
+    else after = after.replace(PICTURE, '');
+  }
+  return { heading, text: tidy(text), picture, buttons: block && !block.hidden ? block : undefined, after: tidy(after) };
+}

package/src/standard/hero/index.tsx

@@ -0,0 +1,57 @@
+// "Banner" (type "hero", as it was called before), a standard block: a text written as a page's (Markdown), in which a
+// picture and a "Knapper" block can be put with "+" (one of each): a heading at its top is its own heading (not the
+// page's H1), the first paragraph the subtitle, the others the introduction, and the text after the buttons is under
+// them, a quote ("> …") in it too (fields.ts); the picture beside the text or behind it (`placement`), across the whole
+// width of the window or as wide as the text (`width`); at the top of a page or anywhere in its text. At the top of the
+// front page its text up to the buttons is written as the text above its card (`frontLeads` in packages/editor/defaults/standardPages.ts,
+// sections.mjs). How it looks is the theme's
+// (packages/editor/theme/blocks/hero/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { ArrowsInLineHorizontal, ArrowsOutLineHorizontal, Columns, ImageSquare, Sparkle } from '@phosphor-icons/react';
+import { cut, defineBlock, plain } from '../../blocks';
+import { t } from '../../i18n';
+import { heroParts } from './fields';
+
+export default defineBlock({
+  label: t.blocks.hero.label,
+  icon: Sparkle,
+  hint: t.blocks.hero.hint,
+  fields: [
+    // A picture ('image', IMAGE in BlockDialog.tsx) and a "Knapper" block, at most one of each.
+    {
+      name: 'text',
+      label: t.blocks.hero.text,
+      type: 'markdown',
+      hint: t.blocks.hero.textHint,
+      template: { blocks: ['image', 'buttons'], max: { image: 1, buttons: 1 } },
+    },
+    // Where the picture is: beside the text (empty, as the banners from before there was a choice) or behind it.
+    {
+      name: 'placement',
+      label: t.blocks.hero.placement,
+      type: 'select',
+      segments: true,
+      options: [
+        { label: t.blocks.hero.placementBeside, value: '', icon: Columns },
+        { label: t.blocks.hero.placementBehind, value: 'behind', icon: ImageSquare },
+      ],
+    },
+    // Across the whole width of the window (a new banner) or as wide as the text (empty, as the banners from before
+    // there was a choice: one saved without it is as wide as the text, `missing`).
+    {
+      name: 'width',
+      label: t.blocks.hero.width,
+      type: 'select',
+      segments: true,
+      default: 'full',
+      missing: '',
+      options: [
+        { label: t.blocks.hero.widthFull, value: 'full', icon: ArrowsOutLineHorizontal },
+        { label: t.blocks.hero.widthText, value: '', icon: ArrowsInLineHorizontal },
+      ],
+    },
+  ],
+  detail: (p) => {
+    const parts = heroParts(p.text);
+    return [parts.heading ?? '', cut(plain(parts.text), 140)];
+  },
+});