@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/blocks/testimonials/script.ts

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

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

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

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

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

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

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

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