@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/components/PhoneButton.tsx

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

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

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

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

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

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