@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/components/MobileMenu.tsx

@@ -0,0 +1,224 @@
+// The menu in Material: the theme's modal navigation drawer (ui/NavigationDrawer.tsx, m3.material.io/components/navigation-drawer), opened by the
+// navigation icon first in the top app bar (Header.astro). It comes in from the left over a scrim, with the site's name,
+// "Book en tid" as an extended FAB (ui/Fab.tsx), the menu's items with the open page in an active indicator, and "Ring" under a
+// divider. Items with sub-pages unfold with the caret at the end of their row (inside the active indicator); the one
+// with the open page starts open.
+// Rendered through a portal into <body>, so nothing on the page can clip it. It moves with the site's motion scheme
+// (motionSpring, @morphemecms/cms/lib/motion.ts: Material 3's springs, the expressive ones unless the owner chose
+// another under "Bevægelse"); with reduced motion it appears at once.
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { motionSpring } from '@morphemecms/cms/lib/motion';
+import IconButton from '@theme/ui/IconButton';
+import { ExtendedFab } from '@theme/ui/Fab';
+import {
+  NavigationDrawerItem,
+  NavigationDrawerRow,
+  NavigationDrawerSubitem,
+  NavigationDrawerToggle,
+  navigationDrawerClass,
+  navigationDrawerScrimClass,
+} from '@theme/ui/NavigationDrawer';
+
+type Link = { label: string; href: string };
+type Item = Link & { children?: Link[] };
+
+export default function MobileMenu({
+  items,
+  current,
+  bookingPath,
+  phone,
+  phoneHref,
+  name,
+  role,
+  book,
+  call,
+  texts,
+}: {
+  items: Item[];
+  current: string;
+  bookingPath: string;
+  phone: string;
+  phoneHref: string;
+  name: string;
+  role: string;
+  /** The site's own labels of "Book en tid" and "Ring". */
+  book: string;
+  call: string;
+  /** Its texts in the site's language (Header.astro has them, so the editor's dictionaries stay out of the browser). */
+  texts: { open: string; close: string; menu: string; drawer: string; subpages: string[] };
+}) {
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const reduce = useReducedMotion();
+  const openButton = useRef<HTMLButtonElement>(null);
+  const closeButton = useRef<HTMLButtonElement>(null);
+  const drawer = useRef<HTMLDivElement>(null);
+  // The scheme's springs (only used in the browser, where the menu opens): in at the default spatial spring, out at the
+  // fast one, and the scrim with the effects'.
+  const [spring] = useState(() => ({
+    enter: motionSpring('spatial'),
+    leave: motionSpring('spatial', 'fast'),
+    fadeIn: motionSpring('effects'),
+    fadeOut: motionSpring('effects', 'fast'),
+  }));
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const root = document.documentElement;
+    const prevOverflow = root.style.overflow;
+    root.style.overflow = 'hidden';
+    closeButton.current?.focus();
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+      // Keep keyboard focus inside the drawer while it is open.
+      if (e.key === 'Tab' && drawer.current) {
+        const focusable = drawer.current.querySelectorAll<HTMLElement>('a[href], button');
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      // Closed by "Book en tid": the booking sheet (a modal dialog) is open now and keeps the page
+      // still and the focus itself.
+      if (document.querySelector('dialog[open]')) return;
+      root.style.overflow = prevOverflow;
+      openButton.current?.focus();
+    };
+  }, [open]);
+
+  const isCurrent = (href: string) => current === href || current.startsWith(href);
+  const holdsCurrent = (item: Item) => isCurrent(item.href) || !!item.children?.some((c) => c.href === current);
+  const [expanded, setExpanded] = useState<string | null>(() => items.find((i) => i.children && holdsCurrent(i))?.href ?? null);
+
+  return (
+    <>
+      <IconButton
+        ref={openButton}
+        icon="list"
+        label={texts.open}
+        onClick={() => setOpen(true)}
+        aria-expanded={open}
+        aria-controls={open ? 'navigation-drawer' : undefined}
+      />
+
+      {mounted &&
+        createPortal(
+          <AnimatePresence>
+            {open && (
+              <div className="fixed inset-0 z-[45]" key="drawer-root">
+                <motion.div
+                  className={`${navigationDrawerScrimClass} absolute inset-0`}
+                  onClick={() => setOpen(false)}
+                  aria-hidden="true"
+                  initial={reduce ? false : { opacity: 0 }}
+                  animate={{ opacity: 1, transition: spring.fadeIn }}
+                  exit={reduce ? undefined : { opacity: 0, transition: spring.fadeOut }}
+                />
+                <motion.div
+                  ref={drawer}
+                  id="navigation-drawer"
+                  role="dialog"
+                  aria-modal="true"
+                  aria-label={texts.drawer}
+                  className={`${navigationDrawerClass} absolute inset-y-0 left-0`}
+                  initial={reduce ? false : { x: '-100%' }}
+                  animate={{ x: 0, transition: reduce ? { duration: 0 } : spring.enter }}
+                  exit={reduce ? undefined : { x: '-100%', transition: spring.leave }}
+                >
+                  <div className="md-drawer-head">
+                    <span aria-hidden="true" className="logo-mark h-10 w-9 shrink-0 bg-accent" />
+                    <div className="min-w-0 flex-1 leading-tight">
+                      <p className="md-drawer-name">{name}</p>
+                      <p className="md-drawer-role">{role}</p>
+                    </div>
+                    <IconButton ref={closeButton} icon="x" label={texts.close} onClick={() => setOpen(false)} />
+                  </div>
+
+                  <ExtendedFab
+                    href={bookingPath}
+                    icon="calendar-blank"
+                    label={book}
+                    kind="secondary-container"
+                    data-open="booking"
+                    onClick={() => setOpen(false)}
+                  />
+
+                  <nav aria-label={texts.menu}>
+                    <ul>
+                      {items.map((item, i) => (
+                        <li key={item.href}>
+                          <NavigationDrawerRow data-active={holdsCurrent(item) || undefined}>
+                            <NavigationDrawerItem
+                              href={item.href}
+                              onClick={() => setOpen(false)}
+                              aria-current={current === item.href ? 'page' : undefined}
+                            >
+                              {item.label}
+                            </NavigationDrawerItem>
+                            {item.children && (
+                              <NavigationDrawerToggle
+                                label={texts.subpages[i]}
+                                expanded={expanded === item.href}
+                                onClick={() => setExpanded(expanded === item.href ? null : item.href)}
+                                aria-controls={`sub-${item.href}`}
+                              />
+                            )}
+                          </NavigationDrawerRow>
+                          <AnimatePresence initial={false}>
+                            {item.children && expanded === item.href && (
+                              <motion.ul
+                                id={`sub-${item.href}`}
+                                className="overflow-hidden"
+                                initial={reduce ? false : { height: 0, opacity: 0 }}
+                                animate={{ height: 'auto', opacity: 1, transition: spring.enter }}
+                                exit={reduce ? undefined : { height: 0, opacity: 0, transition: spring.leave }}
+                              >
+                                {item.children.map((child) => (
+                                  <li key={child.href}>
+                                    <NavigationDrawerSubitem
+                                      href={child.href}
+                                      active={current === child.href}
+                                      onClick={() => setOpen(false)}
+                                      aria-current={current === child.href ? 'page' : undefined}
+                                    >
+                                      {child.label}
+                                    </NavigationDrawerSubitem>
+                                  </li>
+                                ))}
+                              </motion.ul>
+                            )}
+                          </AnimatePresence>
+                        </li>
+                      ))}
+                    </ul>
+                  </nav>
+
+                  <hr className="md-divider" />
+                  <NavigationDrawerItem href={phoneHref}>
+                    <Svg name="phone" size={24} />
+                    {call} {phone}
+                  </NavigationDrawerItem>
+                </motion.div>
+              </div>
+            )}
+          </AnimatePresence>,
+          document.body,
+        )}
+    </>
+  );
+}

package/theme/components/MobileNav.astro

@@ -0,0 +1,33 @@
+---
+// The bar under the header ("Mobilmenu" in the editor, mobileNav in packages/editor/site/site.ts), in the header so it stays at the
+// top with it: its links on one line as scrollable tabs (m3.material.io/components/tabs), on a phone and a tablet (where
+// the menu is behind the menu button), to be swiped sideways when they do not fit, with the open page's chosen (its
+// label in its own colour) and scrolled into view: the theme's tabs (ui/Tabs.tsx, .tab in styles/ui.css). Not there when
+// it is turned off or has no links.
+import { tabsClass, tabClass } from '@theme/ui/Tabs';
+import { mobileNav } from '@morphemecms/cms/site/site';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+const current = Astro.url.pathname;
+const isActive = (href: string) => current === href || (href !== '/' && current.startsWith(href));
+---
+
+{mobileNav.length > 0 && (
+  <nav aria-label={siteT.theme.mobileMenu} data-mobile-nav class="xl:hidden xl:group-data-crowded/header:block">
+    <ul class:list={[tabsClass, 'relative mx-auto max-w-6xl px-1 md:px-4']}>
+      {mobileNav.map((item) => (
+        <li>
+          <a href={item.href} class={tabClass} aria-current={isActive(item.href) ? 'page' : undefined}>
+            {item.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </nav>
+)}
+<script>
+  // The open page's link in the middle of the bar when the links do not all fit.
+  const active = document.querySelector<HTMLElement>('[data-mobile-nav] [aria-current="page"]');
+  const bar = active?.closest('ul');
+  if (active && bar) bar.scrollLeft = active.offsetLeft - (bar.clientWidth - active.offsetWidth) / 2;
+</script>

package/theme/components/PageHeader.astro

@@ -0,0 +1,22 @@
+---
+// Title and intro at the top of the bespoke pages (prices, contact, services, blog, 404).
+// Anything placed inside (e.g. category pills) goes below the intro.
+import Container from '@theme/components/Container.astro';
+import Inline from '@theme/components/Inline.astro';
+
+interface Props {
+  title: string;
+  intro?: string;
+}
+const { title, intro } = Astro.props;
+---
+
+<Container as="header" class="pt-8 md:pt-14">
+  <h1 class="theme-title max-w-[18ch]">{title}</h1>
+  {intro && (
+    <p class="type-body-large md:type-title-large mt-4 max-w-[52ch] text-muted">
+      <Inline text={intro} />
+    </p>
+  )}
+  <slot />
+</Container>

package/theme/components/PageSection.astro

@@ -0,0 +1,24 @@
+---
+// A section on a fixed page below its page header (prices, contact, ...): container, the space above
+// (packages/editor/site/sections.ts), reveal on scroll and an optional heading + intro.
+import Container from '@theme/components/Container.astro';
+import Inline from '@theme/components/Inline.astro';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  class?: string;
+  id?: string;
+}
+const { title, intro, class: className, id } = Astro.props;
+---
+
+<Container class={className} id={id} data-reveal>
+  {title && <h2 class="type-headline-large md:type-display-small">{title}</h2>}
+  {intro && (
+    <p class="mt-3 max-w-[52ch] text-muted">
+      <Inline text={intro} />
+    </p>
+  )}
+  <slot />
+</Container>

package/theme/components/PhoneButton.tsx

@@ -0,0 +1,11 @@
+// "Ring 12 34 56 78" button (`label`, its text before the number: booking.json, "Blokke" › "Book en tid"), outlined
+// (Button.tsx). In the editor only drawn.
+import Button from '@theme/ui/Button';
+
+export default function PhoneButton({ href, label, phone, className }: { href: string; label: string; phone: string; className?: string }) {
+  return (
+    <Button href={href} kind="outlined" icon="phone" className={className}>
+      {label} {phone}
+    </Button>
+  );
+}

package/theme/components/Popup.astro

@@ -0,0 +1,145 @@
+---
+// Pop-ups (packages/editor/site/popups.ts, "Indhold" › "Promovering" in the editor): those for this page, as a modal dialog in the
+// middle of the screen over its scrim (dialogModalClass, ui/Dialog.tsx) with their box (PopupView.tsx, as in the
+// editor: a picture at the top, a heading, a text and a button).
+// A pop-up of a kind an app adds (`type`, e.g. Mailchimp's) has the app's part under the text instead
+// (src/apps/<app>/popups/View.tsx), which shows the button where it wants; it can tell the script that the visitor is
+// done (the event `popup:done`: not shown again) and that it cannot be shown (an element with `data-popup-off`: an app
+// without its settings). The cross to close it is in the top right corner, over the picture. The script shows the
+// first one the visitor has not closed, `delay` seconds after the page opens, once the page is scrolled `scroll` %
+// down, or as the visitor is about to leave it (`trigger`), and not while the cookie banner is asking or another dialog
+// is open. Closed (the cross, Escape, a tap outside it or its button), it is remembered in the browser and not shown to
+// that visitor again by itself. A button that opens it ("Knapper": "Åbn promovering", `data-open="promotion:<file
+// name>"`) opens it whenever it is tapped, also when it was closed before. Without JavaScript none is shown.
+import PopupView, { type PopupPart } from '@theme/components/PopupView';
+import { loadPopup } from '@theme/components/loadPopup';
+import { dialogModalClass } from '@theme/ui/Dialog';
+import { popupsAt, type Popup } from '@morphemecms/cms/site/popups';
+
+// The kinds the apps add (src/apps/<app>/popups/: View.tsx and load.ts), by the app's id: what is under the text of one
+// of that kind (Mailchimp: the signup form), given the button. Also when the app is no longer installed: what was made
+// with it stays on the site. A kind of an app without that part is no pop-up, and shows itself (Calendly's booking
+// sheet, in the app's slots/).
+const byApp = <T,>(found: Record<string, T>) =>
+  Object.fromEntries(Object.entries(found).map(([path, m]) => [path.split('/apps/')[1].split('/')[0], m]));
+const parts = byApp(import.meta.glob<{ default: PopupPart }>('/src/apps/*/popups/View.tsx', { eager: true }));
+const loads = byApp(import.meta.glob<{ load: (popup: Popup) => unknown }>('/src/apps/*/popups/load.ts', { eager: true }));
+const shown = await Promise.all(
+  (await popupsAt(Astro.url.pathname))
+    .filter((p) => p.type === 'standard' || (parts[p.type] && loads[p.type]))
+    .map(async (p) => ({ ...p, box: await loadPopup(p), Part: parts[p.type]?.default, part: loads[p.type]?.load(p) })),
+);
+---
+
+{shown.map((p) => (
+  <dialog
+    class={dialogModalClass}
+    aria-labelledby={`popup-${p.slug}`}
+    data-popup={p.slug}
+    data-trigger={p.trigger}
+    data-delay={p.delay}
+    data-scroll={p.scroll}
+  >
+    <PopupView popup={p.box} Part={p.Part} part={p.part} />
+  </dialog>
+))}
+
+<script>
+  const KEY = 'popups-closed';
+  const closed = (): string[] => {
+    try {
+      return JSON.parse(localStorage.getItem(KEY) ?? '[]');
+    } catch {
+      return [];
+    }
+  };
+  const remember = (slug: string) => {
+    try {
+      localStorage.setItem(KEY, JSON.stringify([...new Set([...closed(), slug])]));
+    } catch {}
+  };
+
+  // Those that can be shown (an app's that cannot, without its settings, says so with data-popup-off).
+  const all = [...document.querySelectorAll<HTMLDialogElement>('dialog[data-popup]')].filter((d) => !d.querySelector('[data-popup-off]'));
+  for (const d of all) {
+    const close = () => d.open && d.close();
+    d.addEventListener('close', () => remember(d.dataset.popup!));
+    // An app's kind says the visitor is done (signed up): not shown again, also before it is closed.
+    d.addEventListener('popup:done', () => remember(d.dataset.popup!));
+    d.querySelector('[data-popup-close]')?.addEventListener('click', close);
+    // A tap on the dimmed backdrop (outside the box) closes it.
+    d.addEventListener('click', (e) => e.target === d && close());
+    // Its button closes it first, so what it opens (the page, or an app's sheet over it) opens alone.
+    d.querySelectorAll('a').forEach((a) => a.addEventListener('click', close));
+  }
+
+  // A button that opens one of them, whenever it is tapped (not with a key held: a new tab).
+  document.addEventListener('click', (e) => {
+    const link = (e.target as Element | null)?.closest?.<HTMLElement>('[data-open^="promotion:"]');
+    const d = link && all.find((p) => `promotion:${p.dataset.popup}` === link.dataset.open);
+    if (!d || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || (e as MouseEvent).button !== 0) return;
+    e.preventDefault();
+    all.forEach((p) => p.open && p.close());
+    d.showModal();
+  });
+
+  // The one that opens by itself: the first the visitor has not closed.
+  const popup = all.find((d) => !closed().includes(d.dataset.popup!));
+  if (popup) {
+    // Not over the cookie banner (CookieConsent.astro), an app's dialog (a booking sheet) or another pop-up
+    // (an app's, src/apps/): it waits until they are answered and closed.
+    const busy = () =>
+      document.getElementById('cookie-consent')?.hidden === false ||
+      [...document.querySelectorAll('dialog')].some((d) => d !== popup && d.open);
+    const show = () => {
+      if (popup.open) return;
+      if (!busy()) return popup.showModal();
+      setTimeout(show, 1000);
+    };
+
+    // How far down the page is scrolled, 0 to 1 (1 for a page too short to scroll).
+    const down = () => {
+      const max = document.documentElement.scrollHeight - innerHeight;
+      return max > 0 ? scrollY / max : 1;
+    };
+    const trigger = popup.dataset.trigger;
+    if (trigger === 'scroll') {
+      const at = Math.min(Number(popup.dataset.scroll) / 100, 0.98);
+      const check = () => {
+        if (down() < at) return;
+        removeEventListener('scroll', check);
+        show();
+      };
+      addEventListener('scroll', check, { passive: true });
+      // A page too short to scroll (or opened further down) gets it without a scroll.
+      setTimeout(check, 1000);
+    } else if (trigger === 'exit') {
+      if (matchMedia('(hover: hover) and (pointer: fine)').matches) {
+        // The mouse leaves the window at the top: towards the tabs, the address bar or the back button.
+        const leave = (e: MouseEvent) => {
+          if (e.relatedTarget || e.clientY > 0) return;
+          document.removeEventListener('mouseout', leave);
+          show();
+        };
+        document.addEventListener('mouseout', leave);
+      } else {
+        // A phone has no mouse: a quick scroll back up, once the visitor has scrolled a screen down.
+        let mark = { y: scrollY, t: performance.now() };
+        let deepest = scrollY;
+        const flick = () => {
+          const now = performance.now();
+          deepest = Math.max(deepest, scrollY);
+          if (now - mark.t < 150) return;
+          const speed = (mark.y - scrollY) / (now - mark.t);
+          mark = { y: scrollY, t: now };
+          if (deepest < innerHeight || speed < 1.5) return;
+          removeEventListener('scroll', flick);
+          show();
+        };
+        addEventListener('scroll', flick, { passive: true });
+      }
+    } else {
+      setTimeout(show, Number(popup.dataset.delay) * 1000);
+    }
+  }
+</script>

package/theme/components/PopupButton.tsx

@@ -0,0 +1,24 @@
+// The button of a pop-up (PopupView.tsx): the booking sheet, the phone or a page, as the buttons of the blocks
+// (Buttons.tsx), or a PDF to download in the same look. A pop-up of an app's kind (a Mailchimp signup) gets it and shows
+// it where it wants (after the signup).
+import Buttons from '@theme/blocks/buttons/Buttons';
+import type { ButtonView } from '@morphemecms/cms/src/standard/buttons/view';
+import Button from '@theme/ui/Button';
+
+/** Its button: a PDF to download (its address and text), or the buttons' view (one). */
+export type PopupButtonView = { file: { href: string; label: string } } | { buttons: ButtonView[] };
+
+export default function PopupButton({ button }: { button?: PopupButtonView }) {
+  if (!button) return null;
+  return (
+    <div className="block-buttons mt-6">
+      {'file' in button ? (
+        <Button href={button.file.href} icon="download-simple" download="" className="w-full sm:w-auto">
+          {button.file.label}
+        </Button>
+      ) : (
+        <Buttons buttons={button.buttons} className="w-full sm:w-auto" />
+      )}
+    </div>
+  );
+}

package/theme/components/PopupView.tsx

@@ -0,0 +1,48 @@
+// A pop-up's box, a dialog (Dialog.tsx; Popup.astro shows it modally on the site, the editor draws it beside its
+// form): the cross to close it in the top right corner (a tonal icon button, as it can stand on a picture), over the
+// picture at the top (to the edges in 3:2, as on the cards with a picture), the heading, the text and its button
+// (PopupButton.tsx). A pop-up of a kind an app adds (`type`, e.g. Mailchimp's) has the app's part under the text
+// instead (`Part`, src/apps/<app>/popups/View.tsx, given its view and the button), which shows the button where it
+// wants.
+import type { ComponentType, ReactNode } from 'react';
+import type { Picture } from '@morphemecms/cms/src/standard/view';
+import Dialog from '@theme/ui/Dialog';
+import IconButton from '@theme/ui/IconButton';
+import PopupButton, { type PopupButtonView } from '@theme/components/PopupButton';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+export type PopupBoxView = { slug: string; image?: Picture; heading: string; text: string[]; button?: PopupButtonView };
+
+/** An app's part of a pop-up: its view, and the pop-up's own button to show where it wants. */
+export type PopupPart<V = any> = ComponentType<{ view: V; button: ReactNode }>;
+
+export default function PopupView({ popup, Part, part }: { popup: PopupBoxView; Part?: PopupPart; part?: unknown }) {
+  const button = <PopupButton button={popup.button} />;
+  return (
+    <Dialog className="relative overflow-hidden">
+      <IconButton icon="x" label={siteT.theme.close} kind="tonal" className="absolute top-3 right-3 z-10" data-popup-close="true" />
+      {popup.image && (
+        <img
+          src={popup.image.src}
+          srcSet={popup.image.srcset}
+          width={popup.image.width}
+          height={popup.image.height}
+          sizes="(min-width: 480px) 448px, calc(100vw - 2rem)"
+          alt=""
+          className="block aspect-[3/2] w-full bg-tint object-cover"
+        />
+      )}
+      <div className="p-6 md:p-8">
+        <h2 id={`popup-${popup.slug}`} className={popup.image ? 'type-headline-small' : 'pr-12 type-headline-small'}>
+          {popup.heading}
+        </h2>
+        {popup.text.map((t, i) => (
+          <p key={i} className="mt-3 text-muted">
+            {t}
+          </p>
+        ))}
+        {Part ? <Part view={part} button={button} /> : button}
+      </div>
+    </Dialog>
+  );
+}

package/theme/components/PostList.tsx

@@ -0,0 +1,58 @@
+// List of posts: one column on mobile, two on desktop. Thumbnail, date and reading time, title, description. The posts
+// after the newest (BlogPosts.tsx), and the posts of the standard block "Blogindlæg" (blocks/posts/View.tsx). `random`: the list has all the posts it can take from, and on the site a script right after
+// it shows `count` of them on each visit, before the list is drawn (without JavaScript: the first, the newest).
+import Img from '@theme/components/Img';
+import PostMeta from '@theme/components/PostMeta';
+import type { PostView } from '@theme/components/posts';
+import { Link, useOnSite } from '@morphemecms/cms/src/standard/view';
+
+// Shows the number in data-random-posts of the posts in the list just before it, picked at random.
+const PICK = `(() => {
+  const list = document.currentScript.previousElementSibling;
+  const items = [...list.children];
+  const shown = new Set();
+  while (shown.size < Number(list.dataset.randomPosts)) shown.add(Math.floor(Math.random() * items.length));
+  items.forEach((li, i) => (li.hidden = !shown.has(i)));
+})();`;
+
+export default function PostList({
+  posts,
+  count = posts.length,
+  random = false,
+  className,
+}: {
+  posts: PostView[];
+  count?: number;
+  random?: boolean;
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  return (
+    <>
+      <ul className={['grid gap-x-12 md:grid-cols-2', className].filter(Boolean).join(' ')} data-random-posts={random ? count : undefined}>
+        {posts.map((post, i) => (
+          <li key={post.href || post.title} hidden={random && i >= count} className="border-t border-line">
+            <Link href={post.href} className="group grid grid-cols-[5.5rem_1fr] gap-4 py-5 sm:grid-cols-[8rem_1fr] sm:gap-5">
+              {post.image ? (
+                <Img
+                  image={post.image}
+                  alt=""
+                  className="theme-post-picture aspect-square w-full object-cover"
+                  sizes="(min-width: 640px) 128px, 88px"
+                />
+              ) : (
+                <span className="theme-post-picture aspect-square bg-tint" />
+              )}
+              <div>
+                <PostMeta post={post} />
+                <h3 className="mt-1 type-title-medium transition-colors group-hover:text-accent">{post.title}</h3>
+                {post.description && <p className="mt-1.5 line-clamp-2 type-body-medium text-muted">{post.description}</p>}
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      {random && onSite && <script dangerouslySetInnerHTML={{ __html: PICK }} />}
+    </>
+  );
+}

package/theme/components/PostMeta.tsx

@@ -0,0 +1,17 @@
+// Date and reading time for a blog post: "12. marts 2024 · 5 min. læsetid" in Danish (posts.ts makes them).
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { PostView } from '@theme/components/posts';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+export default function PostMeta({ post, className }: { post: PostView; className?: string }) {
+  return (
+    <p className={['flex flex-wrap items-center gap-x-2 type-body-medium text-muted', className].filter(Boolean).join(' ')}>
+      <time dateTime={post.date}>{post.dateText}</time>
+      <span aria-hidden="true">·</span>
+      <span className="inline-flex items-center gap-1">
+        <Svg name="clock" size={15} />
+        {siteT.theme.readingTime(post.minutes)}
+      </span>
+    </p>
+  );
+}

package/theme/components/RichText.astro

@@ -0,0 +1,28 @@
+---
+// A page's text, with the site's blocks put in it in the editor (packages/editor/lib/blocks.mjs) shown
+// as the real components: each block drawn from its view, the standard blocks' and the apps' (blockSites in
+// packages/editor/src/standard/sites.ts; the folder's name is its type). The text keeps the page's "prose" style; the blocks are outside it (not-prose; the video
+// is in it, as a video written in the text, packages/editor/lib/video.mjs); a block hidden in the editor is left
+// out (splitBlocks). The HTML comes as `html`, or as the default slot (rendered Markdown). `path`: the
+// page's address, for the testimonials' label. `preview`: a new version of a page (/ny/), whose topics
+// show the opening of the new versions too. Each block gets its type, and its shared texts as `texts` (blockTexts).
+import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
+import { blockSites } from '@morphemecms/cms/src/standard/sites';
+import { blockTexts } from '@morphemecms/cms/site/site';
+
+interface Props {
+  html?: string;
+  path?: string;
+  preview?: boolean;
+}
+const { path, preview } = Astro.props;
+const html = Astro.props.html ?? (await Astro.slots.render('default'));
+
+const parts = splitBlocks(html, Object.keys(blockSites));
+---
+
+{parts.map((p, i) => {
+  if (p.html !== undefined) return <Fragment set:html={p.html} />;
+  const Block = blockSites[p.type];
+  return <Block type={p.type} props={p.props} index={i} path={path} preview={preview} texts={blockTexts[p.type]} />;
+})}