@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/blocks/pricecards/View.tsx

@@ -0,0 +1,40 @@
+// "Priskort": its head in the text (BlockHead.tsx), then the cards side by side where there is room (.block-plans in ../blocks.css,
+// as many columns as cards, two by two before there is room for four), on a phone under each other: each an outlined
+// card (Card.tsx in ../../ui/) with a label
+// when it is highlighted, its name, its price with what it is for, its text, what is included (../checklist/Checks.tsx)
+// and its button at the bottom (../buttons/Buttons.tsx).
+import BlockHead from '@theme/blocks/BlockHead';
+import Buttons from '@theme/blocks/buttons/Buttons';
+import Checks from '@theme/blocks/checklist/Checks';
+import Card from '@theme/ui/Card';
+import type { PriceCardsView } from '@morphemecms/cms/src/standard/pricecards/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function PriceCards({ view }: { view: PriceCardsView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <div className={useInText('block-plans')}>
+        <ul className={`block-plans-list block-plans-${view.items.length}`}>
+          {view.items.map((c, i) => (
+            <Card as="li" key={i} className={c.featured ? 'block-plan block-plan-featured' : 'block-plan'}>
+              {c.badge && <span className="block-plan-badge">{c.badge}</span>}
+              <h3 className="block-plan-name">{c.name}</h3>
+              <p className="block-plan-price">
+                <span className="block-plan-amount">{c.price}</span>
+                {c.unit && <span className="block-plan-unit">{c.unit}</span>}
+              </p>
+              {c.text && <p className="block-plan-text">{c.text}</p>}
+              {c.features.length > 0 && <Checks items={c.features} className="block-plan-features" />}
+              {c.buttons.length > 0 && (
+                <div className="block-buttons block-plan-buttons">
+                  <Buttons buttons={c.buttons} />
+                </div>
+              )}
+            </Card>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}

package/theme/blocks/steps/StepList.tsx

@@ -0,0 +1,23 @@
+// Numbered steps along a line, each with a heading and a text (.block-steps in ../blocks.css): the standard block
+// "Trin", and the site's own steps (this site's front page, home/Steps.astro). `className`: the site's own classes on
+// it, e.g. a margin.
+import type { Step } from '@morphemecms/cms/src/standard/steps/view';
+
+export default function StepList({ items, className }: { items: Step[]; className?: string }) {
+  return (
+    <ol className={className ? `block-steps ${className}` : 'block-steps'}>
+      <span className="block-steps-line" aria-hidden="true"></span>
+      {items.map((s, i) => (
+        <li key={i} className="block-step">
+          <span aria-hidden="true" className="block-step-number">
+            {i + 1}
+          </span>
+          <div className="block-step-body">
+            <h3 className="block-step-title">{s.title}</h3>
+            <p className="block-step-text">{s.text}</p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/theme/blocks/steps/View.tsx

@@ -0,0 +1,14 @@
+// "Trin": its head in the text (BlockHead.tsx), and StepList.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import StepList from '@theme/blocks/steps/StepList';
+import type { StepsView } from '@morphemecms/cms/src/standard/steps/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Steps({ view }: { view: StepsView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <StepList items={view.items} className={useInText() || 'block-in-text'} />
+    </>
+  );
+}

package/theme/blocks/testimonials/List.tsx

@@ -0,0 +1,46 @@
+// Testimonials one after another with the whole text (.block-testimonial-list in ../blocks.css), in two columns where
+// there is room, so long and short texts sit well together: the standard block "Udtalelser" with `layout` 'list'. With
+// `filters`, filter chips (Chip) with their tags over them (.block-filters; with two tags or more): one shows only those with that
+// tag, "Alle" all of them again (on the site by script.ts; without JavaScript all are shown and the buttons are hidden;
+// in the editor only drawn, "Alle" chosen). Each has its anchor, so a short one elsewhere can link to it.
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { useOnSite } from '@morphemecms/cms/src/standard/view';
+import Testimonial from '@theme/blocks/testimonials/Testimonial';
+import Chip from '@theme/ui/Chip';
+
+const say = siteT.blocks.testimonials;
+
+export default function List({
+  testimonials,
+  texts,
+  filters,
+  className,
+}: {
+  testimonials: TestimonialView[];
+  texts: TestimonialTexts;
+  filters: { slug: string; name: string }[];
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  if (testimonials.length === 0 && !onSite) return <p className="block-empty">{say.none}</p>;
+  return (
+    <div className={className ? `block-testimonials ${className}` : 'block-testimonials'} data-testimonial-filter="">
+      {filters.length > 1 && (
+        <div className="block-filters" role="group" aria-label={say.filterLabel} hidden={onSite} data-filters="">
+          <Chip kind="filter" label={say.filterAll} selected data-tag="" />
+          {filters.map((tag) => (
+            <Chip key={tag.slug} kind="filter" label={tag.name} data-tag={tag.slug} />
+          ))}
+        </div>
+      )}
+      <div className="block-testimonial-list">
+        {testimonials.map((t) => (
+          <div key={t.slug} data-tags={t.categories.join(' ')}>
+            <Testimonial testimonial={t} texts={texts} full />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/theme/blocks/testimonials/Slider.tsx

@@ -0,0 +1,44 @@
+// Testimonials to leaf through in a carousel (Carousel.tsx in ../../ui/): the standard block "Udtalelser", and a site's
+// own (this site's front page). One card with the next one peeking in at the edge, two on a tablet, three on a
+// computer, with the carousel's page indicator under them. With one testimonial it is just the card (Testimonial.tsx);
+// in the editor with none, a note. `label`: what it is called for screen readers; `short`: two lines each, with a link
+// to the whole text.
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { useOnSite } from '@morphemecms/cms/src/standard/view';
+import Testimonial from '@theme/blocks/testimonials/Testimonial';
+import Carousel from '@theme/ui/Carousel';
+
+const say = siteT.blocks.testimonials;
+
+export default function Slider({
+  testimonials,
+  texts,
+  label,
+  short = false,
+  className,
+}: {
+  testimonials: TestimonialView[];
+  texts: TestimonialTexts;
+  label: string;
+  short?: boolean;
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  if (testimonials.length === 0) return onSite ? null : <p className="block-empty">{say.none}</p>;
+  if (testimonials.length === 1) return <Testimonial testimonial={testimonials[0]} texts={texts} short={short} className={className} />;
+  return (
+    <Carousel
+      label={label}
+      roleDescription={say.carousel}
+      itemRoleDescription={say.slide}
+      items={testimonials.map((t, i) => ({
+        key: t.slug,
+        label: say.slideOf(i + 1, testimonials.length),
+        content: <Testimonial testimonial={t} texts={texts} short={short} />,
+      }))}
+      indicatorLabels={testimonials.map((t, i) => say.show1(i + 1, t.name))}
+      className={className}
+    />
+  );
+}

package/theme/blocks/testimonials/Testimonial.tsx

@@ -0,0 +1,124 @@
+// One testimonial, word for word, on an outlined card (Card.tsx in ../../ui/, .block-testimonial in ../blocks.css): the
+// standard block "Udtalelser" (Slider.tsx, List.tsx), and a site's own testimonials (this site's front page). A long
+// text is cut after seven lines with a "Læs mere" button that unfolds it in place: on the site by script.ts (only with
+// JavaScript; without it the whole text is shown), in the editor here. `full` always shows everything, with the anchor the testimonials page has it by. Its
+// tags (none unless shown) are chips (Chip), each a link to the tag's page when it has one. `short` shows the first two lines and
+// links to the whole text on the testimonials page. "Læs mere" and "Vis mindre" are the block's shared texts. Before
+// the name its picture, round, or without one the theme's mark, with the name's first letter as `data-initial` for a
+// theme that shows it (the standard theme's and Material's avatars; a theme with a logo as its mark leaves it out).
+import { useLayoutEffect, useRef, useState } from 'react';
+import Card from '@theme/ui/Card';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { Link, useOnSite } from '@morphemecms/cms/src/standard/view';
+import Chip from '@theme/ui/Chip';
+
+export default function Testimonial({
+  testimonial: t,
+  texts,
+  full = false,
+  short = false,
+  className,
+}: {
+  testimonial: TestimonialView;
+  texts: TestimonialTexts;
+  full?: boolean;
+  short?: boolean;
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  // In the editor: whether it is unfolded, and whether its text is cut (measured once it is drawn).
+  const [open, setOpen] = useState(false);
+  const [cut, setCut] = useState(true);
+  const text = useRef<HTMLQuoteElement>(null);
+  useLayoutEffect(() => {
+    const el = text.current;
+    if (el && !open && !onSite) setCut(el.scrollHeight > el.clientHeight + 2);
+  });
+  const clamp = !full && !open && !onSite;
+  return (
+    <Card
+      as="figure"
+      className={className ? `block-testimonial ${className}` : 'block-testimonial'}
+      data-testimonial=""
+      id={full ? t.anchor : undefined}
+    >
+      <div className="block-testimonial-head">
+        <span className="block-testimonial-quote-mark" aria-hidden="true">
+          “
+        </span>
+        {t.tags.length > 0 && (
+          <span className="block-testimonial-tags">
+            {t.tags.map((tag) =>
+              tag.href ? <Chip key={tag.name} href={tag.href} label={tag.name} /> : <Chip key={tag.name} plain label={tag.name} />,
+            )}
+          </span>
+        )}
+      </div>
+      {short ? (
+        <>
+          <blockquote className="block-testimonial-text block-testimonial-short">{t.quote.join(' ')}</blockquote>
+          <Link href={t.href} className="block-testimonial-more">
+            {texts.more} <span className="block-sr-only">{siteT.blocks.testimonials.from(t.name)}</span>
+            <Svg name="arrow-right" size={16} />
+          </Link>
+        </>
+      ) : (
+        <blockquote
+          ref={text}
+          className="block-testimonial-text"
+          data-clamp={full ? undefined : ''}
+          style={
+            clamp
+              ? {
+                  maxHeight: 'calc(1.625em * 7)',
+                  overflow: 'hidden',
+                  // Faded at the bottom only when it is cut.
+                  ...(cut ? { maskImage: 'linear-gradient(to bottom, #000 55%, transparent)' } : {}),
+                }
+              : undefined
+          }
+        >
+          {t.context && <p className="block-testimonial-context">{t.context}</p>}
+          {t.quote.map((p, i) => (
+            <p key={i}>{p}</p>
+          ))}
+        </blockquote>
+      )}
+      {!full && !short && (
+        <button
+          type="button"
+          className="block-testimonial-more"
+          aria-expanded={open}
+          data-expand=""
+          data-more={texts.more}
+          data-less={texts.less}
+          hidden={onSite || !cut}
+          onClick={() => setOpen(!open)}
+        >
+          <span>{open ? texts.less : texts.more}</span>
+          <Svg name="caret-down" size={16} />
+        </button>
+      )}
+      <figcaption className="block-testimonial-name">
+        {t.image ? (
+          <img
+            className="block-testimonial-picture"
+            src={t.image.src}
+            srcSet={t.image.srcset}
+            sizes={t.image.srcset ? '48px' : undefined}
+            width={t.image.width}
+            height={t.image.height}
+            alt=""
+            loading="lazy"
+            decoding="async"
+          />
+        ) : (
+          <span className="block-testimonial-mark" aria-hidden="true" data-initial={[...t.name.trim()][0]?.toLocaleUpperCase()}></span>
+        )}
+        {t.name}
+      </figcaption>
+    </Card>
+  );
+}

package/theme/blocks/testimonials/View.tsx

@@ -0,0 +1,21 @@
+// "Udtalelser": its head in the text (BlockHead.tsx), then its testimonials in Slider.tsx or (`layout` 'list') List.tsx, with the
+// space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import List from '@theme/blocks/testimonials/List';
+import Slider from '@theme/blocks/testimonials/Slider';
+import type { TestimonialsView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Testimonials({ view }: { view: TestimonialsView }) {
+  const inText = useInText() || 'block-in-text';
+  return (
+    <>
+      <BlockHead view={view} />
+      {view.layout === 'list' ? (
+        <List testimonials={view.testimonials} texts={view.texts} filters={view.filters} className={inText} />
+      ) : (
+        <Slider testimonials={view.testimonials} texts={view.texts} label={view.label} className={inText} />
+      )}
+    </>
+  );
+}

package/theme/blocks/testimonials/script.ts

@@ -0,0 +1,52 @@
+// What testimonials do on the site (Testimonial.tsx, List.tsx): "Læs mere" shown only on texts that are actually cut;
+// a list's buttons with the tags. (The carousel's page indicator, Slider.tsx, is the carousel's: ui/carousel.script.ts.)
+// Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts).
+export default function testimonials() {
+  more();
+  filters();
+}
+
+// "Læs mere" only on texts that are actually cut; it unfolds the text, "Vis mindre" folds it again.
+function more() {
+  const setup = () =>
+    document.querySelectorAll<HTMLElement>('[data-testimonial]').forEach((card) => {
+      const text = card.querySelector<HTMLElement>('[data-clamp]');
+      const btn = card.querySelector<HTMLButtonElement>('[data-expand]');
+      if (!text || !btn || text.hasAttribute('data-open')) return;
+      const cut = text.scrollHeight > text.clientHeight + 2;
+      text.toggleAttribute('data-overflow', cut);
+      btn.hidden = !cut;
+    });
+
+  document.addEventListener('click', (e) => {
+    const btn = (e.target as Element | null)?.closest<HTMLButtonElement>('[data-expand]');
+    const text = btn?.closest('[data-testimonial]')?.querySelector<HTMLElement>('[data-clamp]');
+    if (!btn || !text) return;
+    const open = btn.getAttribute('aria-expanded') !== 'true';
+    btn.setAttribute('aria-expanded', String(open));
+    text.toggleAttribute('data-open', open);
+    btn.querySelector('span')!.textContent = (open ? btn.dataset.less : btn.dataset.more) ?? '';
+  });
+
+  setup();
+  document.fonts?.ready.then(setup);
+  addEventListener('resize', setup, { passive: true });
+}
+
+function filters() {
+  // The buttons with the tags: one shows only the testimonials with its tag, "Alle" (no tag) all of them.
+  document.querySelectorAll<HTMLElement>('[data-testimonial-filter]').forEach((box) => {
+    const filters = box.querySelector<HTMLElement>('[data-filters]');
+    if (!filters) return;
+    filters.hidden = false;
+    const buttons = [...filters.querySelectorAll<HTMLButtonElement>('[data-tag]')];
+    const items = [...box.querySelectorAll<HTMLElement>('[data-tags]')];
+    buttons.forEach((button) =>
+      button.addEventListener('click', () => {
+        const tag = button.dataset.tag ?? '';
+        buttons.forEach((b) => b.setAttribute('aria-pressed', String(b === button)));
+        items.forEach((item) => (item.hidden = !!tag && !(item.dataset.tags ?? '').split(' ').includes(tag)));
+      }),
+    );
+  });
+}

package/theme/blocks/video/View.tsx

@@ -0,0 +1,41 @@
+// "Video": the video before it is played, in the text's style, as a video written in the text
+// (@morphemecms/cms/lib/video.mjs, .video-facade in ../blocks.css): a link to the video with its still, a play button and
+// its title; a click puts the video in its place (Base.astro). A new link is a new video, with its own still. In the
+// editor a still the site does not have yet is YouTube's or Vimeo's, else the plain box.
+import { useState } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { VideoView } from '@morphemecms/cms/src/standard/video/view';
+import { InProse, Link, useOnSite } from '@morphemecms/cms/src/standard/view';
+
+export default function Video({ view }: { view: VideoView }) {
+  return <Facade key={view.href} view={view} />;
+}
+
+function Facade({ view }: { view: VideoView }) {
+  const [still, setStill] = useState(view.still);
+  const failed = () => {
+    if (still === view.still && view.stillElsewhere) view.stillElsewhere().then((src) => setStill(src ? { src } : null));
+    else setStill(null);
+  };
+  const classes = ['video-facade', !useOnSite() && 'my-0!', still && 'video-facade-still'];
+  return (
+    <InProse>
+      <Link href={view.href} data-video={view.player} data-title={view.title} className={classes.filter(Boolean).join(' ')}>
+        {still && (
+          <img
+            className="video-facade-image"
+            src={still.src}
+            srcSet={still.srcset}
+            sizes={still.srcset && '(min-width: 768px) 720px, 100vw'}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            onError={failed}
+          />
+        )}
+        <Svg name="play" weight="fill" size={48} />
+        <span className="video-facade-title">{view.title}</span>
+      </Link>
+    </InProse>
+  );
+}

package/theme/components/ActionBar.astro

@@ -0,0 +1,63 @@
+---
+// The action bar at the bottom of a phone's screen ("Indhold" › "Promovering", the kind "Handlingslinje", stored as
+// `bookingbar`, packages/editor/site/popups.ts): the first one that is on and shown on this page, with its one or two
+// items, each a button (the first filled, a second with a line) or a text: a list row of two lines, its heading over
+// its text (the theme's List and ListItem, .theme-action-bar-text: beside the button, in the room it leaves; one button alone takes the whole width, two share it, styles/components.css). Each button goes
+// where a button of "Knapper" can, and is drawn by the same component (Buttons.tsx, with `bar`): "Book en tid" opens
+// what books on the page (`data-open="booking"`: an app's booking sheet) or goes to the booking page, "Ring" calls, "Åbn
+// promovering" opens a pop-up or an app's booking sheet, and a page is a link. Built of the theme's docked toolbar
+// (toolbarClass, ui/Toolbar.tsx), fixed at the bottom (.theme-action-bar in styles/components.css), and its buttons
+// (ui/Button.tsx); only the first bar on a page is shown, and it moves away while the buttons at the top of the front
+// page are on screen (data-action-bar, the script in Base.astro). Not on a page one of its buttons goes to (the booking
+// page for "Book en tid") or the thank-you page.
+import Buttons from '@theme/blocks/buttons/Buttons';
+import List, { ListItem } from '@theme/ui/List';
+import { toolbarClass } from '@theme/ui/Toolbar';
+import { loadButtons } from '@morphemecms/cms/src/standard/buttons/load';
+import type { Button } from '@morphemecms/cms/src/standard/buttons/fields';
+import { popupsAt } from '@morphemecms/cms/site/popups';
+import { site } from '@morphemecms/cms/site/site';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+const path = Astro.url.pathname.endsWith('/') ? Astro.url.pathname : `${Astro.url.pathname}/`;
+// An item of the bar: a button, or a text (`type`; without one, a button).
+type Item = Button & { type?: string; heading?: string; text?: string };
+const isText = (b: Item) => b.type === 'text';
+const goesHere = (b: Item) => !isText(b) && (b.to === 'page' ? b.href === path : b.to === 'booking' && path.startsWith(site.bookingPath));
+const bar = site.thanks.includes(path)
+  ? undefined
+  : (await popupsAt(path)).find((p) => p.type === 'bookingbar' && !((p.data.buttons ?? []) as Item[]).some(goesHere));
+const items = ((bar?.data.buttons ?? []) as Item[]).slice(0, 2);
+// The first button filled, a second with a line.
+const first = items.findIndex((b) => !isText(b));
+// Each in its place: a text, or a button (none when what it opens is gone, loadButtons).
+const shown = await Promise.all(
+  items.map(async (b, i) =>
+    isText(b)
+      ? { heading: b.heading?.trim() ?? '', text: b.text?.trim() || undefined }
+      : {
+          button: (
+            await loadButtons(
+              [{ label: b.label, to: b.to, href: b.href, open: b.open, kind: i === first ? 'filled' : 'outlined' }],
+              undefined,
+              { bar: true },
+            )
+          )[0],
+        },
+  ),
+);
+---
+
+{shown.some((s) => s.heading || s.button) && (
+  <div class={`${toolbarClass()} theme-action-bar`} role="toolbar" aria-label={siteT.theme.actions} data-action-bar>
+    {shown.map((s) =>
+      s.button ? (
+        <Buttons buttons={[s.button]} />
+      ) : s.heading ? (
+        <List dividers="none" className="theme-action-bar-text">
+          <ListItem headline={s.heading} supporting={s.text} />
+        </List>
+      ) : null,
+    )}
+  </div>
+)}

package/theme/components/AppSlot.astro

@@ -0,0 +1,21 @@
+---
+// A place on every page where the apps installed put what they have for it (src/apps/<app>/slots/
+// <name>.astro, packages/editor/site/apps.ts): `head` in <head> (a script, a stylesheet), `body-end` at the end of
+// <body> (a banner, a dialog). Base.astro has the two places and nothing else about apps. An app that is
+// not installed puts nothing there.
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
+import { installed } from '@morphemecms/cms/site/apps';
+
+type Props = { name: 'head' | 'body-end' };
+const { name } = Astro.props;
+
+const slots = import.meta.glob<{ default: AstroComponentFactory }>('/src/apps/*/slots/*.astro', { eager: true });
+const here = Object.entries(slots)
+  .filter(([path]) => path.endsWith(`/slots/${name}.astro`) && installed.includes(path.split('/apps/')[1].split('/')[0]))
+  .sort(([a], [b]) => a.localeCompare(b))
+  .map(([, m]) => m.default);
+---
+
+{here.map((Part) => (
+  <Part />
+))}

package/theme/components/ArrowLink.tsx

@@ -0,0 +1,21 @@
+// "Læs om ..." with an arrow. Without href a span, for use inside a card that is itself a link; in the editor only drawn.
+// `label`: its text.
+import { Svg } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export default function ArrowLink({ href, label, className }: { href?: string; label: string; className?: string }) {
+  const classes = ['inline-flex items-center gap-2 font-medium text-accent', className].filter(Boolean).join(' ');
+  const inside = (
+    <>
+      {label}
+      <Svg name="arrow-right" size={18} />
+    </>
+  );
+  return href ? (
+    <Link href={href} className={classes}>
+      {inside}
+    </Link>
+  ) : (
+    <span className={classes}>{inside}</span>
+  );
+}

package/theme/components/BlogIndex.astro

@@ -0,0 +1,48 @@
+---
+// Blog index and category pages: the header with the categories as filter chips (Chip, the open one chosen; they scroll
+// sideways on mobile), then what the page puts in (the posts, BlogPosts.astro). `seo`: the blog page's own Google texts and the rest
+// of a page's (Base.astro).
+import type { ComponentProps } from 'astro/types';
+import Base from '@theme/layouts/Base.astro';
+import { getCategories } from '@morphemecms/cms/site/content';
+import { plainText } from '@morphemecms/cms/site/text';
+import PageHeader from '@theme/components/PageHeader.astro';
+import Chip from '@theme/ui/Chip';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  title: string;
+  intro: string;
+  activeCategory?: string;
+  seo?: Omit<ComponentProps<typeof Base>, 'title'>;
+}
+const { title, intro, activeCategory, seo } = Astro.props;
+// Without a description of its own, the introduction.
+const description = seo?.description || plainText(intro);
+const categories = await getCategories();
+---
+
+<Base {...seo} title={title} description={description} crumbs={activeCategory ? [{ name: 'Blog', href: '/blog/' }] : []}>
+  <PageHeader title={title} intro={intro}>
+    <nav aria-label={siteT.theme.tags} class="-mx-5 mt-8 md:mx-0">
+      <ul class="flex gap-2 overflow-x-auto px-5 pb-2 [scrollbar-width:none] md:flex-wrap md:overflow-visible md:px-0">
+        <li class="shrink-0">
+          <Chip kind="filter" href="/blog/" label={siteT.theme.allPosts} selected={!activeCategory} className="shrink-0" />
+        </li>
+        {categories.map((c) => (
+          <li class="shrink-0">
+            <Chip
+              kind="filter"
+              href={`/blog/kategori/${c.slug}/`}
+              label={c.name}
+              selected={activeCategory === c.slug}
+              className="shrink-0"
+            />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  </PageHeader>
+
+  <slot />
+</Base>

package/theme/components/BlogPosts.astro

@@ -0,0 +1,18 @@
+---
+// The posts of a tag's page (BlogPosts.tsx), in the page's width.
+import BlogPostsView from '@theme/components/BlogPosts';
+import Container from '@theme/components/Container.astro';
+import { postViewOf } from '@theme/components/loadPosts';
+import type { Post } from '@morphemecms/cms/site/content';
+
+interface Props {
+  posts: Post[];
+  /** The space above (packages/editor/site/sections.ts). */
+  class?: string;
+}
+const { posts, class: className } = Astro.props;
+---
+
+<Container class={className ?? (posts.length ? 'mt-10 md:mt-14' : 'mt-10')}>
+  <BlogPostsView posts={posts.map(postViewOf)} />
+</Container>

package/theme/components/BlogPosts.tsx

@@ -0,0 +1,45 @@
+// Posts with the newest large, the rest as a list (PostList.tsx); without any, a note and a link to all the posts: a
+// tag's page (BlogPosts.astro puts it in the page's width), and the standard block "Blogindlæg" with "Det nyeste stort"
+// (blocks/posts/View.tsx), as on the blog page.
+import Img from '@theme/components/Img';
+import PostList from '@theme/components/PostList';
+import PostMeta from '@theme/components/PostMeta';
+import type { PostView } from '@theme/components/posts';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+export default function BlogPosts({ posts }: { posts: PostView[] }) {
+  const [featured, ...rest] = posts;
+  if (!featured)
+    return (
+      <div className="rounded-panel bg-tint p-8">
+        <p className="type-title-medium">{siteT.theme.noPosts}</p>
+        <Link href="/blog/" className="link mt-3 inline-block">
+          {siteT.theme.seeAllPosts}
+        </Link>
+      </div>
+    );
+  return (
+    <>
+      <Link href={featured.href} className="group grid items-center gap-6 md:grid-cols-12 md:gap-12">
+        {featured.image && (
+          <div className="overflow-hidden rounded-(--theme-picture-radius) md:col-span-7">
+            <Img
+              image={featured.image}
+              alt={featured.imageAlt ?? ''}
+              fetchPriority="high"
+              className="aspect-[16/10] w-full object-cover [transition:scale_var(--motion-spatial-slow)] group-hover:scale-[1.03]"
+              sizes="(min-width: 768px) 55vw, calc(100vw - 40px)"
+            />
+          </div>
+        )}
+        <div className="md:col-span-5">
+          <PostMeta post={featured} />
+          <h2 className="mt-2 type-headline-medium transition-colors group-hover:text-accent md:type-headline-large">{featured.title}</h2>
+          <p className="mt-3 text-muted">{featured.description}</p>
+        </div>
+      </Link>
+      {rest.length > 0 && <PostList posts={rest} className="mt-12 md:mt-16" />}
+    </>
+  );
+}