@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/standard/hero/load.ts

@@ -0,0 +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,
+  };
+};

package/src/standard/hero/view.ts

@@ -0,0 +1,38 @@
+// What "Banner" shows (its view, drawn by the theme's View.tsx), from the parts of its text (heroParts in fields.ts):
+// its heading (an H2; the page's H1 is the page's), the text before its buttons as HTML (the first paragraph the
+// subtitle, the others the introduction), its picture (beside the text, or behind it), whether it goes across the whole
+// width of the window, the buttons of its "Knapper" block (its own, else the shared ones, "Blokke" › "Knapper"; none
+// without the block), and the text after them, with a quote written in it. In the editor: viewOf; on the site: load.ts.
+import { markdownNow } from '../../../lib/markdown';
+import { shownAt } from '../../images';
+import { buttonsOf, type ButtonView } from '../buttons/view';
+import type { Button } from '../buttons/fields';
+import type { Picture, ViewOf } from '../view';
+import { heroParts } from './fields';
+
+export type HeroView = {
+  heading?: string;
+  html: string;
+  image?: Picture & { alt: string };
+  /** The picture behind the text (`placement` 'behind'), not beside it. */
+  behind?: boolean;
+  /** Across the whole width of the window (`width` 'full'), not only the text's. */
+  full?: boolean;
+  /** The buttons of its "Knapper" block; none without one. */
+  buttons?: ButtonView[];
+  /** The text after the buttons, as HTML: its paragraphs and a quote ("> …"). */
+  note?: string;
+};
+
+export const viewOf: ViewOf<HeroView> = (props, data) => {
+  const parts = heroParts(props.text);
+  return {
+    heading: parts.heading,
+    html: markdownNow(parts.text),
+    image: parts.picture ? { src: shownAt(parts.picture.src), alt: parts.picture.alt } : undefined,
+    behind: props.placement === 'behind' && !!parts.picture,
+    full: props.width === 'full',
+    buttons: parts.buttons && buttonsOf(parts.buttons.items as Button[] | undefined, data),
+    note: parts.after ? markdownNow(parts.after) : undefined,
+  };
+};

package/src/standard/links/index.tsx

@@ -0,0 +1,41 @@
+// "Links", a standard block: groups of links to pages, each group in a box with a heading, which can go to a page of
+// its own, and the pages under each other by their names. How it looks is the theme's
+// (packages/editor/theme/blocks/links/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { LinkSimple } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { siteT, t } from '../../i18n';
+
+type Group = { title?: string; href?: string; paths?: string[] };
+
+export default defineBlock({
+  label: t.blocks.links.label,
+  icon: LinkSimple,
+  hint: t.blocks.links.hint,
+  fields: [
+    { name: 'heading', label: t.blocks.heading, type: 'string', hint: t.blocks.headingHint },
+    {
+      name: 'groups',
+      label: t.blocks.links.groups,
+      singular: t.blocks.links.group,
+      type: 'list',
+      summary: 'title',
+      required: true,
+      fields: [
+        { name: 'title', label: t.blocks.links.title, type: 'string', required: true },
+        { name: 'href', label: t.blocks.links.href, type: 'relation', to: 'pages', fixed: true, hint: t.blocks.links.hrefHint },
+        {
+          name: 'paths',
+          label: t.blocks.links.pages,
+          singular: t.blocks.links.page,
+          type: 'list',
+          required: true,
+          field: { name: 'path', label: t.blocks.links.page, type: 'relation', to: 'pages', fixed: true, required: true },
+        },
+      ],
+    },
+  ],
+  example: {
+    groups: siteT.blocks.links.example.map((title) => ({ title, paths: ['/'] })),
+  },
+  detail: (p) => [((p.groups ?? []) as Group[]).map((g) => g.title ?? '').join(' · ')],
+});

package/src/standard/links/load.ts

@@ -0,0 +1,17 @@
+// "Links" on the site (view.ts): the pages by their titles as the site has them (@site/standard).
+import { standard } from '@site/standard';
+import type { Load } from '../view';
+import type { LinkGroupProps, LinksView } from './view';
+
+export const load: Load<LinksView> = async (props) => ({
+  heading: props.heading || undefined,
+  groups: await Promise.all(
+    ((props.groups ?? []) as LinkGroupProps[]).map(async (g) => ({
+      title: g.title ?? '',
+      href: g.href,
+      pages: (await Promise.all((g.paths ?? []).map(async (href) => ({ href, name: await standard.pageTitle(href) })))).flatMap((p) =>
+        p.name === undefined ? [] : [{ href: p.href, name: p.name }],
+      ),
+    })),
+  ),
+});

package/src/standard/links/view.ts

@@ -0,0 +1,25 @@
+// What "Links" shows (its view, drawn by the theme's View.tsx and LinkGroups.tsx): its heading, and each group's
+// heading, its page when it has one, and its pages by their titles; a page that is not there is left out. In the
+// editor: viewOf, from the site's pages; on the site: load.ts.
+import type { ViewOf } from '../view';
+
+export type LinkGroup = { title: string; href?: string; pages: { href: string; name: string }[] };
+export type LinksView = { heading?: string; groups: LinkGroup[] };
+
+/** A group as its field writes it. */
+export type LinkGroupProps = { title?: string; href?: string; paths?: string[] };
+
+export const viewOf: ViewOf<LinksView> = (props, data) => {
+  const byPath = new Map(data.site.pages.map((p) => [p.path, p]));
+  return {
+    heading: props.heading || undefined,
+    groups: ((props.groups ?? []) as LinkGroupProps[]).map((g) => ({
+      title: g.title ?? '',
+      href: g.href,
+      pages: (g.paths ?? []).flatMap((path) => {
+        const page = byPath.get(path);
+        return page ? [{ href: path, name: page.title }] : [];
+      }),
+    })),
+  };
+};

package/src/standard/list/index.tsx

@@ -0,0 +1,50 @@
+// "Liste", a standard block: rows under each other, each with a heading and, if it has them, an icon before it, a text
+// under it and a page it links to: the theme's list, or each row on its own surface. How it looks is the theme's (packages/editor/theme/blocks/list/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { ListBullets, Rows, SquaresFour } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { iconOptions } from '../../icon';
+import { t } from '../../i18n';
+import { headFields } from '../head';
+
+type Row = { title?: string };
+
+export default defineBlock({
+  label: t.blocks.list.label,
+  icon: ListBullets,
+  hint: t.blocks.list.hint,
+  fields: [
+    ...headFields,
+    {
+      name: 'design',
+      label: t.blocks.list.design,
+      type: 'select',
+      segments: true,
+      options: [
+        { label: t.blocks.list.designStandard, value: '', icon: Rows },
+        { label: t.blocks.list.designSegmented, value: 'segmented', icon: SquaresFour },
+      ],
+    },
+    {
+      name: 'items',
+      label: t.blocks.list.items,
+      singular: t.blocks.list.item,
+      type: 'list',
+      summary: 'title',
+      required: true,
+      fields: [
+        { name: 'icon', label: t.blocks.list.icon, type: 'select', icons: true, options: iconOptions(t.blocks.icons) },
+        { name: 'title', label: t.blocks.list.title, type: 'string', required: true },
+        { name: 'text', label: t.blocks.list.text, type: 'text' },
+        { name: 'href', label: t.blocks.list.href, type: 'relation', to: 'pages', hint: t.blocks.list.hrefHint },
+      ],
+    },
+  ],
+  example: {
+    items: [
+      { icon: 'clock', title: t.blocks.list.exampleTitle, text: t.blocks.list.exampleText },
+      { icon: 'info', title: t.blocks.list.exampleTitle, text: t.blocks.list.exampleText },
+      { icon: 'map-pin', title: t.blocks.list.exampleTitle, text: t.blocks.list.exampleText },
+    ],
+  },
+  detail: (p) => [((p.items ?? []) as Row[]).map((r) => r.title ?? '').join(' · ')],
+});

package/src/standard/list/load.ts

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

package/src/standard/list/view.ts

@@ -0,0 +1,18 @@
+// What "Liste" shows (its view, drawn by the theme's View.tsx and Rows.tsx): its heading, its design, and each row's
+// icon, heading, text and page. 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';
+
+/** Its design: the theme's list (empty; lines between the rows if the theme has them) or each row on its own surface
+ * (`segmented`). */
+export type ListDesign = '' | 'segmented';
+export type ListRow = { icon?: string; title: string; text?: string; href?: string };
+export type ListView = HeadView & { design: ListDesign; items: ListRow[] };
+
+export const listOf = (props: Record<string, any>): ListView => ({
+  ...headOf(props),
+  design: props.design === 'segmented' ? 'segmented' : '',
+  items: props.items ?? [],
+});
+
+export const viewOf: ViewOf<ListView> = listOf;

package/src/standard/load.ts

@@ -0,0 +1,7 @@
+// What the standard blocks' load.ts (view.tsx) share on the site, when it is built: they may read the site's content
+// (@site/standard). Never imported by the editor.
+import { standard } from '@site/standard';
+import type { Picture } from './view';
+
+/** A picture with the sizes the site has made of it (srcset, width and height). */
+export const pictureOf = (src: string): Picture => ({ src, ...standard.posts.image(src) });

package/src/standard/notice/index.tsx

@@ -0,0 +1,30 @@
+// "Besked", a standard block: a short notice in a box with the accent along its left edge. With "Vis indtil" it goes by
+// itself at that time (packages/editor/lib/notice.mjs); then its card is greyed. How it looks is the theme's
+// (packages/editor/theme/blocks/notice/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { Info } from '@phosphor-icons/react';
+import { cut, defineBlock, plain } from '../../blocks';
+import { isOver, untilTime } from '../../../lib/notice.mjs';
+import { locale, t } from '../../i18n';
+
+// When it stops being shown, for its card: "Vises til 1. mar. 2026 kl. 12.00", or that it is over (in
+// the editor's language).
+function untilLine(until: unknown): string {
+  const at = untilTime(String(until ?? ''));
+  if (at === null) return '';
+  const zone = { timeZone: 'Europe/Copenhagen' } as const;
+  const day = new Date(at).toLocaleDateString(locale, { ...zone, day: 'numeric', month: 'short', year: 'numeric' });
+  const time = new Date(at).toLocaleTimeString(locale, { ...zone, hour: '2-digit', minute: '2-digit' });
+  return isOver(String(until)) ? t.blocks.notice.over(day, time) : t.blocks.notice.shownUntil(day, time);
+}
+
+export default defineBlock({
+  label: t.blocks.notice.label,
+  icon: Info,
+  hint: t.blocks.notice.hint,
+  fields: [
+    { name: 'text', label: t.blocks.notice.text, type: 'markdown', required: true },
+    { name: 'until', label: t.blocks.notice.until, type: 'datetime', hint: t.blocks.notice.untilHint },
+  ],
+  detail: (p) => [cut(plain(p.text), 140), untilLine(p.until)],
+  over: (p) => isOver(String(p.until ?? '')),
+});

package/src/standard/notice/load.ts

@@ -0,0 +1,16 @@
+// "Besked" on the site (view.ts): with `until` (Danish time) it is left out once that time has passed, and the script
+// right after it (`after`) removes it in a browser where the time has come since the site was built
+// (../../../lib/notice.mjs).
+import { inlineHtml } from '../../../lib/inline';
+import { isOver, untilTime } from '../../../lib/notice.mjs';
+import type { Load } from '../view';
+import type { NoticeView } from './view';
+
+export const load: Load<NoticeView> = async (props) =>
+  isOver(props.until) ? null : { html: await inlineHtml(props.text ?? ''), until: untilTime(props.until) };
+
+// Runs as the page is read, right after the box, so a notice that is over is never shown.
+export const after = (view: NoticeView) =>
+  view.until === null
+    ? undefined
+    : '<script>(() => { const n = document.currentScript.previousElementSibling; if (Date.now() >= +n.dataset.until) n.remove(); })();</script>';

package/src/standard/notice/view.ts

@@ -0,0 +1,10 @@
+// What "Besked" shows (its view, drawn by the theme's View.tsx): its text with bold, italic and links as written, inside
+// a <p> of its own, and when it stops being shown (milliseconds since 1970), or null. In the editor: viewOf; on the
+// site: load.ts.
+import { inlineNow } from '../../../lib/markdown';
+import { untilTime } from '../../../lib/notice.mjs';
+import type { ViewOf } from '../view';
+
+export type NoticeView = { html: string; until: number | null };
+
+export const viewOf: ViewOf<NoticeView> = (props) => ({ html: inlineNow(String(props.text ?? '')), until: untilTime(props.until) });

package/src/standard/points/index.tsx

@@ -0,0 +1,42 @@
+// "Punkter med ikon", a standard block: points side by side where there is room, each with an icon in a circle, a
+// heading, a text and, with a page, a link after the text. How it looks is the theme's
+// (packages/editor/theme/blocks/points/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { SquaresFour } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { iconOptions } from '../../icon';
+import { t } from '../../i18n';
+import { headFields } from '../head';
+
+type Point = { icon?: string; title?: string; text?: string; more?: string; href?: string };
+
+export default defineBlock({
+  label: t.blocks.points.label,
+  icon: SquaresFour,
+  hint: t.blocks.points.hint,
+  fields: [
+    ...headFields,
+    {
+      name: 'items',
+      label: t.blocks.points.items,
+      singular: t.blocks.points.item,
+      type: 'list',
+      summary: 'title',
+      required: true,
+      fields: [
+        { name: 'icon', label: t.blocks.points.icon, type: 'select', icons: true, options: iconOptions(t.blocks.icons), required: true },
+        { name: 'title', label: t.blocks.points.title, type: 'string', required: true },
+        { name: 'text', label: t.blocks.points.text, type: 'text', required: true },
+        { name: 'href', label: t.blocks.points.href, type: 'relation', to: 'pages', hint: t.blocks.points.hrefHint },
+        { name: 'more', label: t.blocks.points.more, type: 'string', hint: t.blocks.points.moreHint },
+      ],
+    },
+  ],
+  example: {
+    items: [
+      { icon: 'train', title: t.blocks.points.exampleTitle, text: t.blocks.points.exampleText },
+      { icon: 'clock', title: t.blocks.points.exampleTitle, text: t.blocks.points.exampleText },
+      { icon: 'info', title: t.blocks.points.exampleTitle, text: t.blocks.points.exampleText },
+    ],
+  },
+  detail: (p) => [((p.items ?? []) as Point[]).map((x) => x.title ?? '').join(' · ')],
+});

package/src/standard/points/load.ts

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

package/src/standard/points/view.ts

@@ -0,0 +1,12 @@
+// What "Punkter med ikon" shows (its view, drawn by the theme's View.tsx and PointList.tsx): its heading, and each
+// point's icon, heading, text and, with a page and a link's text, the link after the 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 Point = { icon: string; title: string; text: string; more?: string; href?: string };
+export type PointsView = HeadView & { items: Point[] };
+
+export const pointsOf = (props: Record<string, any>): PointsView => ({ ...headOf(props), items: props.items ?? [] });
+
+export const viewOf: ViewOf<PointsView> = pointsOf;

package/src/standard/posts/index.tsx

@@ -0,0 +1,132 @@
+// "Blogindlæg", a standard block: blog posts as a list, all of them (those with some tags, when it has any), 3–6 of
+// them (the newest or random ones with some tags) or those picked, with "Alle indlæg" under them but when it shows all; the newest large when its design is "Det nyeste stort".
+// The posts are the site's (the relation `blog`, and BlockData.site.posts), their tags the relation `categories`. How it
+// looks is the theme's (packages/editor/theme/blocks/posts/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { Article, Newspaper, Rows } from '@phosphor-icons/react';
+import { defineBlock, type BlockData, type BlockProps } from '../../blocks';
+import { siteT, t } from '../../i18n';
+import type { Relation } from '../../schema';
+import { sharedIn } from '../../shared';
+import { headFields } from '../head';
+import type { PostChoice } from '../site';
+import shared, { allPostsText, postCount } from './shared';
+
+/** The posts a "Blogindlæg" block or a site's own section shows, as the site picks them: all (with `show` "all"), the
+ * newest `count`, or those picked. Random: the newest stand here (the site picks anew on each visit), and the note says
+ * how many it picks from. `all`: what "Alle indlæg" says (to a tag when the posts are from one blog tag, or one is
+ * picked); empty when it shows all. */
+export function postsOf(choice: PostChoice, data: BlockData) {
+  const { show = 'categories', categories = [], order = 'newest', picked = [] } = choice;
+  const pool = data.site.posts.filter((p) => !categories.length || p.categories.some((c) => categories.includes(c)));
+  if (show === 'all') return { posts: pool, note: '', all: '' };
+  const n = postCount(choice.count);
+  const posts =
+    show === 'picked'
+      ? picked.map((slug) => data.site.posts.find((p) => p.slug === slug)).filter((p) => p !== undefined)
+      : pool.slice(0, n);
+  const random = show !== 'picked' && order === 'random' && pool.length > n;
+  const slug = choice.link || (show !== 'picked' && categories.length === 1 ? categories[0] : null);
+  const tag = slug && !data.site.tagsOffBlog.includes(slug) ? data.relations.categories?.find((o) => o.value === slug)?.label : undefined;
+  return {
+    posts,
+    note: random ? siteT.blocks.posts.randomNote(n, pool.length) : '',
+    all: allPostsText(sharedIn(data.site, 'posts', shared.values), tag),
+  };
+}
+
+// Which posts it shows, for its card: "Kommunikation · 12 indlæg", "De nyeste 3 fra Kommunikation", "Tilfældige 3
+// fra alle indlæg", or the titles of those picked.
+function postsLine(p: BlockProps, data: BlockData): string {
+  const label = (to: Relation, v: string) => data.relations[to]?.find((o) => o.value === v)?.label ?? v;
+  if (p.show === 'picked') return ((p.picked ?? []) as string[]).map((v) => label('blog', v)).join(' · ');
+  const tags = ((p.categories ?? []) as string[]).map((v) => label('categories', v)).join(', ');
+  if (p.show === 'all') return t.blocks.posts.allFrom(tags, postsOf(p as PostChoice, data).posts.length);
+  const from = tags || t.blocks.posts.all;
+  return (p.order === 'random' ? t.blocks.posts.randomFrom : t.blocks.posts.newestFrom)(postCount(p.count), from);
+}
+
+export default defineBlock({
+  label: t.blocks.posts.label,
+  icon: Newspaper,
+  hint: t.blocks.posts.hint,
+  edit: { to: 'blokke/posts', text: t.blocks.posts.edit },
+  fields: [
+    ...headFields,
+    // A list (the empty choice: so are the blocks from before there was a choice), or the newest large over the list
+    // (as on the blog page).
+    {
+      name: 'design',
+      label: t.blocks.posts.design,
+      type: 'select',
+      segments: true,
+      options: [
+        { label: t.blocks.posts.designList, value: '', icon: Rows },
+        { label: t.blocks.posts.designFeatured, value: 'featured', icon: Article },
+      ],
+    },
+    {
+      name: 'show',
+      label: t.blocks.posts.show,
+      type: 'select',
+      required: true,
+      default: 'categories',
+      options: [
+        { label: t.blocks.posts.every, value: 'all' },
+        { label: t.blocks.posts.some, value: 'categories' },
+        { label: t.blocks.posts.picked, value: 'picked' },
+      ],
+    },
+    {
+      name: 'categories',
+      label: t.blocks.posts.tags,
+      type: 'relation',
+      to: 'categories',
+      multiple: true,
+      add: t.blocks.posts.addTag,
+      hint: t.blocks.posts.tagsHint,
+      only: { field: 'show', is: ['all', 'categories'] },
+    },
+    {
+      name: 'count',
+      label: t.blocks.posts.count,
+      type: 'select',
+      required: true,
+      default: '3',
+      options: ['3', '4', '5', '6'].map((n) => ({ label: t.blocks.posts.countOption(n), value: n })),
+      only: { field: 'show', is: ['categories'] },
+    },
+    {
+      name: 'order',
+      label: t.blocks.posts.order,
+      type: 'select',
+      required: true,
+      default: 'newest',
+      options: [
+        { label: t.blocks.posts.newest, value: 'newest' },
+        { label: t.blocks.posts.random, value: 'random' },
+      ],
+      only: { field: 'show', is: ['categories'] },
+    },
+    {
+      name: 'picked',
+      label: t.blocks.posts.items,
+      type: 'relation',
+      to: 'blog',
+      multiple: true,
+      maxItems: 6,
+      add: t.blocks.posts.addItem,
+      required: true,
+      hint: t.blocks.posts.itemsHint,
+      only: { field: 'show', is: ['picked'] },
+    },
+    {
+      name: 'link',
+      label: t.blocks.posts.link,
+      type: 'relation',
+      to: 'categories',
+      hint: t.blocks.posts.linkHint,
+      only: { field: 'show', is: ['categories', 'picked'] },
+    },
+  ],
+  detail: (p, data) => [postsLine(p, data)],
+});

package/src/standard/posts/load.ts

@@ -0,0 +1,36 @@
+// "Blogindlæg" on the site (view.ts): the posts it shows (from the site, @site/standard), all of them or those it picks,
+// with "Alle indlæg" under those it picks (to a tag, "Alle indlæg om …", when it goes to one; its shared texts). Nothing
+// when there are none, but where the newest of all would be large (the blog page): there the theme says there are none.
+import { standard } from '@site/standard';
+import { pictureOf } from '../load';
+import type { ListedPost } from '../site';
+import type { Load } from '../view';
+import { headOf } from '../head';
+import shared, { allPostsText, postCount } from './shared';
+import { designOf, type PostView, type PostsView } from './view';
+
+/** Posts as the site lists them, with their pictures' sizes. */
+export const loadPosts = (posts: ListedPost[]): PostView[] =>
+  posts.map(({ image, ...p }) => ({ ...p, image: image ? pictureOf(image) : undefined }));
+
+export const load: Load<PostsView> = async (props, { texts }) => {
+  const design = designOf(props);
+  if (props.show === 'all') {
+    const categories = Array.isArray(props.categories) ? props.categories.map(String) : [];
+    const posts = await standard.posts.list(categories);
+    if (!posts.length && design === 'list') return null;
+    return { ...headOf(props), design, posts: loadPosts(posts), count: posts.length, random: false };
+  }
+  const count = postCount(props.count);
+  const { posts, random } = await standard.posts.choose(props, count);
+  if (!posts.length) return null;
+  const all = standard.posts.all(props);
+  return {
+    ...headOf(props),
+    design,
+    posts: loadPosts(posts),
+    count,
+    random,
+    all: { href: all.href, text: allPostsText({ ...shared.values, ...texts }, all.tag) },
+  };
+};

package/src/standard/posts/shared.ts

@@ -0,0 +1,21 @@
+// The shared texts of "Blogindlæg" ("Blokke"): the link under the posts, with {tag} for the tag it goes
+// to, to begin with in the site's language (siteT). Also where a site shows posts itself (this site's
+// front page).
+import { siteT, t } from '../../i18n';
+import { defineShared, fill } from '../../shared';
+
+export default defineShared({
+  fields: [
+    { name: 'all', label: t.blocks.posts.allLink, type: 'string', required: true, max: 30 },
+    { name: 'allAbout', label: t.blocks.posts.allAboutLink, type: 'string', required: true, max: 40, hint: t.blocks.posts.allAboutHint },
+  ],
+  values: { all: siteT.blocks.posts.allText, allAbout: siteT.blocks.posts.allAboutText },
+});
+
+/** What its "Alle indlæg" says: "Alle indlæg om opskrifter" when it goes to a tag (by its name), else
+ * "Alle indlæg". */
+export const allPostsText = (texts: Record<string, string>, tag?: string): string =>
+  tag ? fill(texts.allAbout, { tag: tag.toLowerCase() }) : texts.all;
+
+/** How many posts it shows: its `count` (3–6), else 3. */
+export const postCount = (count: unknown) => Math.min(6, Math.max(3, Number(count) || 3));

package/src/standard/posts/view.ts

@@ -0,0 +1,63 @@
+// What "Blogindlæg" shows (its view, drawn by the theme's View.tsx): its heading, its design (a list, or the newest
+// large over the list), its posts (each one's page, title, description, picture, date and reading time), how many it
+// shows and whether they are picked at random on each visit (then all it picks from are there), and "Alle indlæg"
+// (where it goes and what it says; none when it shows all). In the editor (viewOf) the posts as the site picks them
+// (postsOf: random ones are the newest, and `note` says how many it picks from; of all, the first ones, and `more` says
+// how many more there are, so the card stays short); on the site: load.ts.
+import type { BlockData } from '../../blocks';
+import { siteT } from '../../i18n';
+import { shownPicture, type Picture, type ViewOf } from '../view';
+import { postsOf } from '.';
+import type { PostChoice } from '../site';
+import { headOf, type HeadView } from '../head';
+
+export type PostView = {
+  href: string;
+  title: string;
+  description?: string;
+  image?: Picture;
+  imageAlt?: string;
+  date: string;
+  minutes: number;
+};
+export type PostsView = HeadView & {
+  design: 'list' | 'featured';
+  posts: PostView[];
+  count: number;
+  random: boolean;
+  all?: { href: string; text: string };
+  note?: string;
+  more?: string;
+};
+
+/** Its design: the newest large, or a list (also one from before there was a choice). */
+export const designOf = (props: Record<string, unknown>): PostsView['design'] => (props.design === 'featured' ? 'featured' : 'list');
+
+/** A post as the editor has it, only drawn. */
+export const shownPost = (p: BlockData['site']['posts'][number]): PostView => ({
+  href: '',
+  title: p.title,
+  description: p.description,
+  image: p.image ? shownPicture(p.image) : undefined,
+  imageAlt: p.imageAlt,
+  date: p.date.toISOString(),
+  minutes: p.minutes,
+});
+
+/** How many of all the posts the editor draws. */
+const SHOWN = 5;
+
+export const viewOf: ViewOf<PostsView> = (props, data) => {
+  const { posts, note, all } = postsOf(props as PostChoice, data);
+  const shown = props.show === 'all' ? posts.slice(0, SHOWN) : posts;
+  return {
+    ...headOf(props),
+    design: designOf(props),
+    posts: shown.map(shownPost),
+    count: shown.length,
+    random: false,
+    all: all ? { href: '', text: all } : undefined,
+    note: note || undefined,
+    more: posts.length > shown.length ? siteT.blocks.posts.more(posts.length - shown.length) : undefined,
+  };
+};