@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/standard/pricecards/index.tsx

@@ -0,0 +1,57 @@
+// "Priskort", a standard block: a heading and one to four price cards side by side where there is room, each with a
+// name, a price and what it is for (`unit`, after it), a short text, what is included (each line with a check, as
+// "Tjekliste") and a button at the bottom (as one of "Knapper", buttons/fields.ts); one can be highlighted, with a small
+// label over its name. The prices are written here (a site's own price list is an app's block). How it looks
+// is the theme's (packages/editor/theme/blocks/pricecards/View.tsx); what it shows: view.ts, and load.ts on the site.
+import { CurrencyCircleDollar } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { siteT, t } from '../../i18n';
+import { headFields } from '../head';
+import { buttonList } from '../buttons/fields';
+import type { PriceCardProps } from './view';
+
+const texts = t.blocks.pricecards;
+
+export default defineBlock({
+  label: texts.label,
+  icon: CurrencyCircleDollar,
+  hint: texts.hint,
+  fields: [
+    ...headFields,
+    {
+      name: 'items',
+      label: texts.items,
+      singular: texts.item,
+      type: 'list',
+      summary: 'name',
+      required: true,
+      maxItems: 4,
+      fields: [
+        { name: 'name', label: texts.name, type: 'string', required: true, max: 40 },
+        { name: 'price', label: texts.price, type: 'string', required: true, max: 20 },
+        { name: 'unit', label: texts.unit, type: 'string', max: 30, hint: texts.unitHint },
+        { name: 'text', label: texts.text, type: 'text' },
+        {
+          name: 'features',
+          label: texts.features,
+          singular: texts.feature,
+          type: 'list',
+          field: { name: 'feature', label: texts.text, type: 'string', required: true },
+        },
+        // One button, as a "Knapper" block's; without one, none (not the shared buttons).
+        { ...buttonList, name: 'buttons', label: texts.button, singular: texts.buttonItem, maxItems: 1 },
+        { name: 'featured', label: texts.featured, type: 'boolean', toggle: texts.featuredToggle },
+        { name: 'badge', label: texts.badge, type: 'string', max: 20, hint: texts.badgeHint, only: { field: 'featured', is: ['true'] } },
+      ],
+    },
+  ],
+  // In the site's language, like the drawing: the middle one highlighted, its button filled and the others' outlined.
+  example: {
+    items: siteT.blocks.pricecards.example.map(({ button, badge, ...card }) => ({
+      ...card,
+      ...(badge ? { featured: true, badge } : {}),
+      buttons: [{ to: 'page', href: '/', label: button, kind: badge ? 'filled' : 'outlined' }],
+    })),
+  },
+  detail: (p) => [((p.items ?? []) as PriceCardProps[]).map((c) => [c.name, c.price].filter(Boolean).join(' ')).join(' · ')],
+});

package/src/standard/pricecards/load.ts

@@ -0,0 +1,11 @@
+// "Priskort" on the site (view.ts): each card's button as a "Knapper" block's (loadButtons, which knows the site's pages
+// and targets), and none without one.
+import { loadButtons } from '../buttons/load';
+import { headOf } from '../head';
+import type { Load } from '../view';
+import { priceCardOf, type PriceCardProps, type PriceCardsView } from './view';
+
+export const load: Load<PriceCardsView> = async (props) => ({
+  ...headOf(props),
+  items: await Promise.all(((props.items ?? []) as PriceCardProps[]).map(async (c) => priceCardOf(c, await loadButtons(c.buttons, [])))),
+});

package/src/standard/pricecards/view.ts

@@ -0,0 +1,50 @@
+// What "Priskort" shows (its view, drawn by the theme's View.tsx): its heading, and each card's name, price, what the
+// price is for (`unit`), text, what is included, button, and whether it is highlighted, with its label. In the editor:
+// viewOf, with the buttons as the editor has them (buttonsOf); on the site: load.ts (loadButtons). A card without a
+// button has none, not the shared buttons of "Knapper".
+import type { Button } from '../buttons/fields';
+import { buttonsOf, type ButtonView } from '../buttons/view';
+import { headOf, type HeadView } from '../head';
+import type { ViewOf } from '../view';
+
+/** A card as its fields write it. */
+export type PriceCardProps = {
+  name?: string;
+  price?: string;
+  unit?: string;
+  text?: string;
+  features?: string[];
+  buttons?: Button[];
+  featured?: boolean;
+  badge?: string;
+};
+
+/** A card as it is drawn: its label only when it is highlighted. */
+export type PriceCard = {
+  name: string;
+  price: string;
+  unit?: string;
+  text?: string;
+  features: string[];
+  buttons: ButtonView[];
+  featured: boolean;
+  badge?: string;
+};
+export type PriceCardsView = HeadView & { items: PriceCard[] };
+
+/** A card with its buttons, as the editor or the site makes them. */
+export const priceCardOf = (c: PriceCardProps, buttons: ButtonView[]): PriceCard => ({
+  name: c.name ?? '',
+  price: c.price ?? '',
+  unit: c.unit?.trim() || undefined,
+  text: c.text?.trim() || undefined,
+  features: (c.features ?? []).filter(Boolean),
+  buttons,
+  featured: c.featured === true,
+  badge: (c.featured === true && c.badge?.trim()) || undefined,
+});
+
+export const viewOf: ViewOf<PriceCardsView> = (props, data) => ({
+  ...headOf(props),
+  items: ((props.items ?? []) as PriceCardProps[]).map((c) => priceCardOf(c, c.buttons?.length ? buttonsOf(c.buttons, data) : [])),
+});

package/src/standard/sharedTexts.ts

@@ -0,0 +1,6 @@
+// The shared texts of the standard blocks that have them (shared.ts in the block's folder, see
+// ../shared.ts), by the path of the file like a site's own (src/apps/<app>/blocks/<type>/shared.ts): the site puts
+// them before its own (packages/editor/site/site.ts), so a block of its own by the same name has its own instead.
+import type { SharedTexts } from '../shared';
+
+export const standardShared = import.meta.glob<SharedTexts>('./*/shared.ts', { eager: true, import: 'default' });

package/src/standard/site.ts

@@ -0,0 +1,124 @@
+// What the standard blocks take from a site, where they need more than their own fields and shared
+// texts. On the site: the site's `@site/standard` (packages/editor/defaults/standard.ts, StandardSite); only the blocks'
+// load.ts (and the site's own pages that draw the same parts) import it, never the editor, so it
+// may read the site's content (astro:content) and use its components. In the editor: the site's data
+// (BlockData.site, from the site's siteOf), which has StandardSiteData too. And in the site's config
+// (@site/config): where the buttons can go (`buttonTargets`).
+import type { CookieCategory } from '../../lib/cookieCategories.mjs';
+
+/** Where a button of "Knapper" can go besides a page, as the site's config names it (its label in the
+ * site's language, e.g. "Book en tid"), and what to know about it in the hint of a button's text. `pick`: it
+ * opens something picked among those shown on the page (a relation with Option.on, e.g. "Åbn promovering"), in a
+ * field named `pickLabel` (the button's `open`). */
+export type ButtonTargetName = { value: string; label: string; note?: string; pick?: string; pickLabel?: string };
+
+/** A button's text for where it goes, when it has none of its own (e.g. "Ring"), and what comes after
+ * every text (e.g. the phone number). `open`: what the button opens on the page instead of going to its address
+ * (its `data-open`, which a promotion on the page answers: "booking" the booking sheet, "promotion:<file name>" a
+ * pop-up); without one there, the address is an ordinary link. */
+export type ButtonText = { text: string; after?: string; open?: string };
+
+/** Which posts a "Blogindlæg" block shows (its fields): those with any of `categories` (all when empty), with `show`
+ * "all" all of them, else the newest `count` ('3' to '6') or with `order` "random" picked anew on each visit, or with
+ * `show` "picked" those picked; and the tag "Alle indlæg" goes to (`link`). */
+export type PostChoice = {
+  show?: string;
+  categories?: string[];
+  count?: string;
+  order?: string;
+  picked?: string[];
+  link?: string;
+};
+
+/** A blog post as "Blogindlæg" shows it: its address, title, description, picture (its file), date (ISO)
+ * and reading time in minutes. */
+export type ListedPost = {
+  href: string;
+  title: string;
+  description?: string;
+  image?: string;
+  imageAlt?: string;
+  date: string;
+  minutes: number;
+};
+
+/** What the editor's drawings of the standard blocks take from the site's data (BlockData.site). */
+export type StandardSiteData = {
+  pages: { path: string; title: string }[];
+  /** The posts on the blog, newest first, by file name, with what "Blogindlæg" shows of them (reading time in minutes). */
+  posts: {
+    slug: string;
+    title: string;
+    image?: string;
+    imageAlt?: string;
+    description?: string;
+    date: Date;
+    minutes: number;
+    categories: string[];
+  }[];
+  /** The tags that are not on the blog (no page of their own): "Alle indlæg" does not go to them. */
+  tagsOffBlog: string[];
+  /** The texts of the buttons that go elsewhere than a page, by `buttonTargets` value. */
+  buttons: Record<string, ButtonText>;
+  /** The cookie list ("Cookies", standard/cookies/list.ts), as the files are now. */
+  cookies: CookieItem[];
+};
+
+/** A cookie in the site's cookie list (cookieList.ts): its name (`*` for the rest of it), who sets it, what for, how
+ * long it lasts and its category (necessary, or one the visitor says yes to in the cookie banner,
+ * lib/cookieCategories.mjs). */
+export type CookieItem = { name: string; provider: string; purpose?: string; lasts?: string; category: CookieCategory };
+
+/** A testimonial as the site has it (its file name, its picture, the quote's paragraphs, its tags). */
+export type TestimonialItem = {
+  slug: string;
+  name: string;
+  /** Its picture (optional), by the name. */
+  image?: string;
+  context?: string;
+  quote: string[];
+  categories: string[];
+  frontPage: boolean;
+};
+
+export type StandardSite = {
+  /** The blocks' shared texts (shared.ts, with those saved over them), by type: for a block that shows another's
+   * (Banner: the shared buttons, "Læs mere"). */
+  texts: Record<string, Record<string, any>>;
+  /** The opening of a page's text, by its address (Accordion: a row without a text of its own);
+   * undefined when there is no such page. `preview`: the page is a new version (/ny/), so the opening
+   * of the new version of the page, when there is one. */
+  pageOpening(href: string, preview?: boolean): Promise<string | undefined>;
+  /** A page's name on a button without a text of its own, by its address. */
+  pageName(href: string): Promise<string>;
+  /** A page's title, its name in a list of pages ("Links"), by its address; undefined when there is no such page. */
+  pageTitle(href: string): Promise<string | undefined>;
+  /** The buttons that go elsewhere than a page, by `buttonTargets` value: their address and text. */
+  buttons: Record<string, ButtonText & { href: string }>;
+  /** A button of a target that picks something (ButtonTargetName.pick): what it opens, by what is picked (a
+   * promotion's file name), with its address without JavaScript and its text; undefined when there is no such. */
+  picked(target: string, value: string): (ButtonText & { href: string }) | undefined;
+  /** The cookie list ("Cookies"), for "Cookieliste". */
+  cookies: CookieItem[];
+  testimonials: {
+    /** All of them, in their order. */
+    list: TestimonialItem[];
+    /** The page with all of them in full, and the anchor of one there (a short one links to it). */
+    page: string;
+    anchor(t: TestimonialItem): string;
+    /** A tag's name, and its page when it has one. */
+    tag(slug: string): Promise<{ name: string; href?: string }>;
+  };
+  posts: {
+    /** The posts a choice shows, and whether they are picked at random on the page (then all it picks
+     * from are there, and the page shows `count` of them). */
+    choose(choice: PostChoice, count: number): Promise<{ posts: ListedPost[]; random: boolean }>;
+    /** The posts on the blog with any of `categories` (all when empty), newest first. */
+    list(categories: string[]): Promise<ListedPost[]>;
+    /** Where its "Alle indlæg" goes: a tag's page, with the tag's name, or the blog. */
+    all(choice: PostChoice): { href: string; tag?: string };
+    /** A picture's sizes, for the browser to pick the one that fits (srcset, width and height). Also
+     * the pictures on "Kort" (LinkCards.tsx). */
+    image(src: string): { srcset?: string; width?: number; height?: number };
+  };
+};

package/src/standard/siteLooks.ts

@@ -0,0 +1,19 @@
+// How the blocks look on the site, for the site's build (blockViews and blockLoads in
+// packages/editor/src/standard/views.ts): the standard blocks' drawing (View.tsx) in the theme in use
+// (src/themes/<theme>/blocks/<type>/, @theme), else in the standard theme (packages/editor/theme/blocks/), and the apps'
+// blocks' (src/apps/<app>/blocks/<type>/: View.tsx and load.ts). Apart from apps.ts, which the editor loads too.
+import type { Contract, View } from './view';
+
+type Views = Record<string, { default: View<any> }>;
+
+/** The standard blocks' drawings in the standard theme, and in the theme in use (the same, when it is the standard). */
+export const themeViews = {
+  standard: import.meta.glob<{ default: View<any> }>('@saturn/blocks/*/View.tsx', { eager: true }) as Views,
+  own: import.meta.glob<{ default: View<any> }>('@theme/blocks/*/View.tsx', { eager: true }) as Views,
+};
+
+/** The apps' blocks: their drawing (View.tsx) and their view on the site (load.ts). */
+export const appLooks = {
+  views: import.meta.glob<{ default: View<any> }>('/src/apps/*/blocks/*/View.tsx', { eager: true }) as Views,
+  loads: import.meta.glob<Contract<any>>('/src/apps/*/blocks/*/load.ts', { eager: true }),
+};

package/src/standard/sites.ts

@@ -0,0 +1,13 @@
+// How the blocks look on the site, by their folder's name: each drawn from its view by BlockSite.astro (the view its
+// contract's load.ts makes, drawn by its View.tsx: views.ts). The theme's RichText.astro shows them in the text of a
+// page, and Block.astro one by its type anywhere else, each with its type.
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
+import { blockViews } from './views';
+
+// BlockSite.astro, found by Vite: TypeScript does not read an .astro file.
+const [{ default: BlockSite }] = Object.values(import.meta.glob<{ default: AstroComponentFactory }>('./BlockSite.astro', { eager: true }));
+
+/** Every block on the site, by its type. */
+export const blockSites: Record<string, AstroComponentFactory> = Object.fromEntries(
+  Object.keys(blockViews).map((type) => [type, BlockSite]),
+);

package/src/standard/steps/index.tsx

@@ -0,0 +1,28 @@
+// "Trin", a standard block: numbered steps with a heading and a text along a line. How it looks is the theme's
+// (packages/editor/theme/blocks/steps/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { ListNumbers } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { t } from '../../i18n';
+import { headFields } from '../head';
+
+export default defineBlock({
+  label: t.blocks.steps.label,
+  icon: ListNumbers,
+  hint: t.blocks.steps.hint,
+  fields: [
+    ...headFields,
+    {
+      name: 'items',
+      label: t.blocks.steps.items,
+      singular: t.blocks.steps.item,
+      type: 'list',
+      summary: 'title',
+      required: true,
+      fields: [
+        { name: 'title', label: t.blocks.steps.title, type: 'string', required: true },
+        { name: 'text', label: t.blocks.steps.text, type: 'text', required: true },
+      ],
+    },
+  ],
+  detail: (p) => [((p.items ?? []) as { title?: string }[]).map((s, i) => `${i + 1}. ${s.title ?? ''}`).join(' · ')],
+});

package/src/standard/steps/load.ts

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

package/src/standard/steps/view.ts

@@ -0,0 +1,11 @@
+// What "Trin" shows (its view, drawn by the theme's View.tsx and StepList.tsx): its heading, and each step's heading
+// and text. The same in the editor (viewOf) and on the site (load.ts): only its fields.
+import type { ViewOf } from '../view';
+import { headOf, type HeadView } from '../head';
+
+export type Step = { title: string; text: string };
+export type StepsView = HeadView & { items: Step[] };
+
+export const stepsOf = (props: Record<string, any>): StepsView => ({ ...headOf(props), items: props.items ?? [] });
+
+export const viewOf: ViewOf<StepsView> = stepsOf;

package/src/standard/testimonials/index.tsx

@@ -0,0 +1,87 @@
+// "Udtalelser", a standard block: testimonials to leaf through or one after another with the whole text (`layout`
+// 'list'), with a heading: those with any of the block's tags (all without tags), those marked "Vis på forsiden", or
+// those picked. The testimonials are in the list the block brings ("Udtalelser", list.ts; the relation `testimonials`,
+// and BlockData.testimonials). How it looks is the theme's (packages/editor/theme/blocks/testimonials/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { Columns, Quotes, Rows } from '@phosphor-icons/react';
+import { config } from '@site/config';
+import { defineBlock, names, withTags, type BlockData, type BlockProps } from '../../blocks';
+import { t } from '../../i18n';
+import { headFields } from '../head';
+
+/** The tags of these testimonials, as buttons to filter by (List.tsx), each once, in the order they come. */
+export const tagsOf = (list: { categories?: string[] }[]) => [...new Set(list.flatMap((t) => t.categories ?? []))];
+/** Whether the cards show their tags: not when the block picks by tags, which are then the same on all; in a list,
+ * all of them without tags. */
+export const tagsShown = (props: BlockProps) =>
+  props.show !== 'categories' || (props.layout === 'list' && !((props.categories ?? []) as string[]).length);
+
+const showOptions = [
+  { label: t.blocks.testimonials.all, value: 'all' },
+  { label: t.blocks.testimonials.withTags, value: 'categories' },
+  { label: t.blocks.testimonials.front, value: 'front' },
+  { label: t.blocks.testimonials.picked, value: 'picked' },
+];
+
+// Which testimonials it shows (as load.ts picks them on the site).
+export function chosen(props: BlockProps, data: BlockData) {
+  const all = data.testimonials;
+  if (props.show === 'all') return all;
+  if (props.show === 'categories') return withTags(all, props.categories);
+  if (props.show === 'picked')
+    return ((props.picked ?? []) as string[]).map((slug) => all.find((row) => row.slug === slug)).filter((row) => row !== undefined);
+  return all.filter((row) => row.frontPage);
+}
+
+export default defineBlock({
+  label: t.blocks.testimonials.label,
+  icon: Quotes,
+  hint: t.blocks.testimonials.hint,
+  edit: { to: `liste/${config.lists.testimonials}`, text: t.blocks.testimonials.edit },
+  fields: [
+    ...headFields,
+    {
+      name: 'layout',
+      label: t.blocks.testimonials.layout,
+      type: 'select',
+      segments: true,
+      default: 'slider',
+      hint: t.blocks.testimonials.layoutHint,
+      options: [
+        { label: t.blocks.testimonials.slider, value: 'slider', icon: Columns },
+        { label: t.blocks.testimonials.list, value: 'list', icon: Rows },
+      ],
+    },
+    {
+      name: 'filter',
+      label: t.blocks.testimonials.filter,
+      type: 'boolean',
+      default: true,
+      hint: t.blocks.testimonials.filterHint,
+      only: { field: 'layout', is: ['list'] },
+    },
+    { name: 'show', label: t.blocks.testimonials.show, type: 'select', required: true, default: 'categories', options: showOptions },
+    {
+      name: 'categories',
+      label: t.blocks.testimonials.tags,
+      type: 'relation',
+      to: 'categories',
+      multiple: true,
+      add: t.blocks.testimonials.addTag,
+      hint: t.blocks.testimonials.tagsHint,
+      only: { field: 'show', is: ['categories'] },
+    },
+    {
+      name: 'picked',
+      label: t.blocks.testimonials.items,
+      type: 'relation',
+      to: 'testimonials',
+      multiple: true,
+      only: { field: 'show', is: ['picked'] },
+    },
+  ],
+  detail: (p, data) => [
+    p.heading ? String(p.heading) : '',
+    showOptions.find((o) => o.value === p.show)?.label ?? '',
+    names(chosen(p, data)),
+  ],
+});

package/src/standard/testimonials/list.ts

@@ -0,0 +1,43 @@
+// "Udtalelser", the list the standard block brings: one file per testimonial in the site's data
+// (<config.folders.data>/testimonials/<slug>.json), under "Lister" on every site, in their order (the arrows), each
+// with its picture (optional, round by the name), its tags (the relation `categories`) and whether it is marked "Vis
+// på forsiden" (the block's "Hvilke udtalelser"). The site reads them for its pages (StandardSite.testimonials, the
+// site's packages/editor/site/testimonials.ts).
+// Made with the texts of a language: the editor's for the screens, the site's (siteT) for the commits (site.ts).
+import { Quotes } from '@phosphor-icons/react';
+import { config } from '@site/config';
+import type { Messages } from '../../i18n';
+import type { OwnedList } from '../../schema';
+
+export default function testimonialsList(say: Messages): OwnedList {
+  const own = say.blocks.testimonials;
+  return {
+    kind: 'folder',
+    id: config.lists.testimonials,
+    icon: Quotes,
+    create: own.entries.create,
+    label: own.entries.label,
+    singular: own.entries.singular,
+    folder: `${config.folders.data}/testimonials`,
+    deletable: true,
+    orderable: true,
+    slugFrom: 'name',
+    summary: (d) => String(d.name ?? ''),
+    fields: [
+      { name: 'name', label: own.entries.name, type: 'string', required: true },
+      { name: 'image', label: own.entries.image, type: 'image' },
+      { name: 'context', label: own.entries.context, type: 'text' },
+      { name: 'quote', label: own.entries.quote, type: 'text', required: true },
+      {
+        name: 'categories',
+        label: own.tags,
+        type: 'relation',
+        to: 'categories',
+        multiple: true,
+        add: own.addTag,
+        edit: { to: `ny/${config.lists.tags}`, text: own.entries.createTag },
+      },
+      { name: 'frontPage', label: own.entries.frontPage, type: 'boolean', default: true },
+    ],
+  };
+}

package/src/standard/testimonials/load.ts

@@ -0,0 +1,58 @@
+// "Udtalelser" on the site (view.ts): all of them (`show: 'all'`), those with any of its tags (`show: 'categories'`,
+// all when it has none; the tags are then not on the cards, except in a list of all), those marked "Vis på forsiden"
+// ('front'), or those picked ('picked', by file name, in that order), from the site (@site/standard), with their tags'
+// pages, their pictures' sizes and where their whole text is.
+import { standard } from '@site/standard';
+import { pictureOf } from '../load';
+import type { TestimonialItem } from '../site';
+import type { Load } from '../view';
+import { tagsShown } from '.';
+import { headOf } from '../head';
+import shared from './shared';
+import { labelOf, type TestimonialsView, type TestimonialTexts, type TestimonialView } from './view';
+
+/** Testimonials on the site (a site's own too: this site's front page), with their tags (`showTopic`). */
+export const loadTestimonials = (items: TestimonialItem[], showTopic = true): Promise<TestimonialView[]> =>
+  Promise.all(
+    items.map(async (t) => {
+      const anchor = standard.testimonials.anchor(t);
+      return {
+        slug: t.slug,
+        name: t.name,
+        ...(t.image ? { image: pictureOf(t.image) } : {}),
+        context: t.context,
+        quote: t.quote,
+        categories: t.categories,
+        tags: showTopic ? await Promise.all(t.categories.map((slug) => standard.testimonials.tag(slug))) : [],
+        anchor,
+        href: `${standard.testimonials.page}#${anchor}`,
+      };
+    }),
+  );
+
+/** Its shared texts, with those saved over them. */
+export const testimonialTexts = (texts?: Record<string, any>): TestimonialTexts => ({ ...shared.values, ...texts }) as TestimonialTexts;
+
+export const load: Load<TestimonialsView> = async (props, { texts }) => {
+  const all = standard.testimonials.list;
+  const chosen = () => {
+    if (props.show === 'all') return all;
+    if (props.show === 'categories') {
+      const wanted: string[] = props.categories ?? [];
+      return all.filter((t) => !wanted.length || t.categories.some((c) => wanted.includes(c)));
+    }
+    if (props.show === 'picked')
+      return ((props.picked ?? []) as string[]).map((slug) => all.find((t) => t.slug === slug)).filter((t) => t !== undefined);
+    return all.filter((t) => t.frontPage);
+  };
+  const items = chosen();
+  const slugs = props.layout === 'list' && props.filter !== false ? [...new Set(items.flatMap((t) => t.categories))] : [];
+  return {
+    ...headOf(props),
+    layout: props.layout,
+    testimonials: await loadTestimonials(items, tagsShown(props)),
+    label: labelOf(props),
+    filters: await Promise.all(slugs.map(async (slug) => ({ slug, name: (await standard.testimonials.tag(slug)).name }))),
+    texts: testimonialTexts(texts),
+  };
+};

package/src/standard/testimonials/shared.ts

@@ -0,0 +1,13 @@
+// The shared texts of "Udtalelser" ("Blokke"): the buttons that unfold a testimonial and fold it again,
+// to begin with in the site's language (siteT). Also on a site's own testimonials (Testimonial.tsx).
+import { siteT, t } from '../../i18n';
+import { defineShared } from '../../shared';
+
+export default defineShared({
+  fields: [
+    { name: 'more', label: t.blocks.testimonials.more, type: 'string', required: true, max: 30 },
+    { name: 'less', label: t.blocks.testimonials.less, type: 'string', required: true, max: 30 },
+  ],
+  values: { more: siteT.blocks.testimonials.moreText, less: siteT.blocks.testimonials.lessText },
+  preview: { props: { show: 'front' } },
+});

package/src/standard/testimonials/view.ts

@@ -0,0 +1,76 @@
+// What "Udtalelser" shows (its view, drawn by the theme's View.tsx, Slider.tsx, List.tsx and Testimonial.tsx): its
+// heading, its layout (to leaf through, or 'list': one after another with the whole text), its testimonials (each
+// one's name, picture, context, paragraphs, tags with their pages, and where its whole text is: `anchor` on the
+// testimonials page, `href` from elsewhere), what the slider is called for screen readers, the tags to filter by in a
+// list (`filters`), and its shared texts ("Læs mere", "Vis mindre"). In the editor: viewOf, with the testimonials of
+// the list "Udtalelser"; on the site: load.ts.
+import type { BlockData } from '../../blocks';
+import type { TestimonialRow } from '../../fields';
+import { siteT } from '../../i18n';
+import { sharedIn } from '../../shared';
+import { shownAt } from '../../images';
+import type { Picture, ViewOf } from '../view';
+import { chosen, tagsOf, tagsShown } from '.';
+import { headOf, type HeadView } from '../head';
+import shared from './shared';
+
+export type TestimonialView = {
+  slug: string;
+  name: string;
+  image?: Picture;
+  context?: string;
+  quote: string[];
+  categories: string[];
+  tags: { name: string; href?: string }[];
+  anchor: string;
+  href: string;
+};
+export type TestimonialTexts = { more: string; less: string };
+export type TestimonialsView = HeadView & {
+  layout?: string;
+  testimonials: TestimonialView[];
+  /** What the slider is called for screen readers: its heading, else the block's name (labelOf). */
+  label: string;
+  filters: { slug: string; name: string }[];
+  texts: TestimonialTexts;
+};
+
+/** What the slider is called for screen readers: the block's heading, else "Udtalelser" in the site's language. */
+export const labelOf = (props: Record<string, any>): string => props.heading?.trim() || siteT.blocks.testimonials.label;
+
+// A tag's name, as the list of tags has it.
+const tagName = (data: BlockData, slug: string) => data.relations.categories?.find((o) => o.value === slug)?.label ?? slug;
+
+/** Testimonials in the editor (a site's own too: its preview of the front page), with their tags (`showTopic`). Only
+ * drawn: a link leads nowhere. */
+export const shownTestimonials = (rows: TestimonialRow[], data: BlockData, showTopic = true): TestimonialView[] =>
+  rows.map((row) => ({
+    slug: row.slug,
+    name: row.name,
+    ...(row.image ? { image: { src: shownAt(row.image) } } : {}),
+    context: row.context,
+    // Its paragraphs, as the site splits its text.
+    quote: String(row.quote ?? '')
+      .split(/\n\s*\n/)
+      .map((p) => p.trim())
+      .filter(Boolean),
+    categories: row.categories ?? [],
+    tags: showTopic ? (row.categories ?? []).map((slug) => ({ name: tagName(data, slug) })) : [],
+    anchor: row.slug,
+    href: '',
+  }));
+
+/** Its shared texts in the editor. */
+export const shownTexts = (data: BlockData) => sharedIn(data.site, 'testimonials', shared.values) as TestimonialTexts;
+
+export const viewOf: ViewOf<TestimonialsView> = (props, data) => {
+  const rows = chosen(props, data);
+  return {
+    ...headOf(props),
+    layout: props.layout,
+    testimonials: shownTestimonials(rows, data, tagsShown(props)),
+    label: labelOf(props),
+    filters: props.layout === 'list' && props.filter !== false ? tagsOf(rows).map((slug) => ({ slug, name: tagName(data, slug) })) : [],
+    texts: shownTexts(data),
+  };
+};

package/src/standard/themeBlocks.ts

@@ -0,0 +1,13 @@
+// The theme's blocks for the editor: the drawing of each standard block (View.tsx in a theme's blocks/<type>/, given
+// the view the block's contract makes, view.ts), the theme in use's (@theme), else the standard theme's
+// (packages/editor/theme/blocks/), as on the site (sites.ts). A theme has no blocks of its own: only the look of the
+// standard ones. Apart from editor.ts, so loading the blocks waits until the editor's blocks (registry.tsx) need them.
+import type { View } from './view';
+
+const byType = <T>(found: Record<string, T>) => Object.fromEntries(Object.entries(found).map(([file, d]) => [file.split('/').at(-2)!, d]));
+
+/** How each standard block looks in the editor, by its type. */
+export const blockViews: Record<string, View<any>> = {
+  ...byType(import.meta.glob<View<any>>('@saturn/blocks/*/View.tsx', { eager: true, import: 'default' })),
+  ...byType(import.meta.glob<View<any>>('@theme/blocks/*/View.tsx', { eager: true, import: 'default' })),
+};