@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/standard/cookies/load.ts

@@ -1,11 +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,
-});
+// "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

@@ -1,20 +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: {} },
-});
+// 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

@@ -1,28 +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,
-});
+// 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

@@ -1,29 +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(' · ')],
-});
+// "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

@@ -1,14 +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 ?? '') })),
-  ),
-});
+// "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

@@ -1,21 +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 ?? '') })),
-});
+// 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

@@ -1,23 +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,
-});
+// 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

@@ -1,48 +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) };
-}
+// 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

@@ -1,57 +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)];
-  },
-});
+// "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)];
+  },
+});

package/src/standard/hero/load.ts

@@ -1,23 +1,23 @@
-// "Banner" on the site (view.ts): the parts of its text as Astro's Markdown makes them, its picture with the sizes the
-// site has made of it, and the buttons of its "Knapper" block (@site/standard).
-import { standard } from '@site/standard';
-import { markdownHtml } from '../../../lib/inline';
-import type { Button } from '../buttons/fields';
-import { loadButtons } from '../buttons/load';
-import { pictureOf } from '../load';
-import type { Load } from '../view';
-import { heroParts } from './fields';
-import type { HeroView } from './view';
-
-export const load: Load<HeroView> = async (props) => {
-  const parts = heroParts(props.text);
-  return {
-    heading: parts.heading,
-    html: await markdownHtml(parts.text),
-    image: parts.picture ? { ...pictureOf(parts.picture.src), alt: parts.picture.alt } : undefined,
-    behind: props.placement === 'behind' && !!parts.picture,
-    full: props.width === 'full',
-    buttons: parts.buttons && (await loadButtons(parts.buttons.items as Button[] | undefined, standard.texts.buttons?.items)),
-    note: parts.after ? await markdownHtml(parts.after) : undefined,
-  };
-};
+// "Banner" on the site (view.ts): the parts of its text as Astro's Markdown makes them, its picture with the sizes the
+// site has made of it, and the buttons of its "Knapper" block (@site/standard).
+import { standard } from '@site/standard';
+import { markdownHtml } from '../../../lib/inline';
+import type { Button } from '../buttons/fields';
+import { loadButtons } from '../buttons/load';
+import { pictureOf } from '../load';
+import type { Load } from '../view';
+import { heroParts } from './fields';
+import type { HeroView } from './view';
+
+export const load: Load<HeroView> = async (props) => {
+  const parts = heroParts(props.text);
+  return {
+    heading: parts.heading,
+    html: await markdownHtml(parts.text),
+    image: parts.picture ? { ...pictureOf(parts.picture.src), alt: parts.picture.alt } : undefined,
+    behind: props.placement === 'behind' && !!parts.picture,
+    full: props.width === 'full',
+    buttons: parts.buttons && (await loadButtons(parts.buttons.items as Button[] | undefined, standard.texts.buttons?.items)),
+    note: parts.after ? await markdownHtml(parts.after) : undefined,
+  };
+};