@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/standard/hero/view.ts

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

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

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

@@ -1,25 +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 }] : [];
-      }),
-    })),
-  };
-};
+// 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

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

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

@@ -1,18 +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;
+// 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

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

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

@@ -1,16 +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>';
+// "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

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

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

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