@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/blocks/faq/script.ts

@@ -1,56 +1,56 @@
-// Rows that fold out (Accordion.tsx), on the site: the text of a row that opens fades in, and where the browser cannot
-// animate ::details-content the height glides (and this keeps one row open). Reduced motion: no animation. Run on
-// every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts). It moves with the site's
-// motion scheme (motionTiming, @morphemecms/cms/lib/motion.ts).
-import { motionTiming } from '@morphemecms/cms/lib/motion';
-
-export default function accordion() {
-  const still = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
-  const bodyOf = (d: HTMLDetailsElement) => d.querySelector<HTMLElement>('.block-accordion-body')!;
-
-  // The text of a row that opens fades in and rises a little (also when find-in-page opens it).
-  document.querySelectorAll<HTMLDetailsElement>('details.block-accordion-row').forEach((d) =>
-    d.addEventListener('toggle', () => {
-      if (d.open && !still())
-        bodyOf(d).animate(
-          [
-            { opacity: 0, transform: 'translateY(0.5rem)' },
-            { opacity: 1, transform: 'none' },
-          ],
-          motionTiming('spatial'),
-        );
-    }),
-  );
-
-  // Browsers that cannot animate ::details-content: the height glides here. Then this keeps one row
-  // open (the same name would close the other at once, before it could glide shut).
-  if (!CSS.supports('selector(::details-content)')) {
-    const glide = (d: HTMLDetailsElement, open: boolean) => {
-      const body = bodyOf(d);
-      if (open) d.open = true;
-      const full = { height: `${body.offsetHeight}px`, paddingBottom: getComputedStyle(body).paddingBottom };
-      const shut = { height: '0px', paddingBottom: '0px' };
-      body.style.overflow = 'hidden';
-      const run = body.animate(open ? [shut, full] : [full, shut], motionTiming('spatial'));
-      run.onfinish = run.oncancel = () => {
-        body.style.overflow = '';
-        if (!open) d.open = false;
-      };
-    };
-    document.querySelectorAll<HTMLDetailsElement>('details.block-accordion-row').forEach((d) => {
-      const group = d.getAttribute('name');
-      d.removeAttribute('name');
-      d.querySelector('summary')!.addEventListener('click', (e) => {
-        const others = [
-          ...document.querySelectorAll<HTMLDetailsElement>(`details.block-accordion-row[data-group="${group}"][open]`),
-        ].filter((o) => o !== d);
-        if (still()) return others.forEach((o) => (o.open = false));
-        e.preventDefault();
-        if (d.open) return glide(d, false);
-        others.forEach((o) => glide(o, false));
-        glide(d, true);
-      });
-      d.dataset.group = group ?? '';
-    });
-  }
-}
+// Rows that fold out (Accordion.tsx), on the site: the text of a row that opens fades in, and where the browser cannot
+// animate ::details-content the height glides (and this keeps one row open). Reduced motion: no animation. Run on
+// every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts). It moves with the site's
+// motion scheme (motionTiming, @morphemecms/cms/lib/motion.ts).
+import { motionTiming } from '@morphemecms/cms/lib/motion';
+
+export default function accordion() {
+  const still = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const bodyOf = (d: HTMLDetailsElement) => d.querySelector<HTMLElement>('.block-accordion-body')!;
+
+  // The text of a row that opens fades in and rises a little (also when find-in-page opens it).
+  document.querySelectorAll<HTMLDetailsElement>('details.block-accordion-row').forEach((d) =>
+    d.addEventListener('toggle', () => {
+      if (d.open && !still())
+        bodyOf(d).animate(
+          [
+            { opacity: 0, transform: 'translateY(0.5rem)' },
+            { opacity: 1, transform: 'none' },
+          ],
+          motionTiming('spatial'),
+        );
+    }),
+  );
+
+  // Browsers that cannot animate ::details-content: the height glides here. Then this keeps one row
+  // open (the same name would close the other at once, before it could glide shut).
+  if (!CSS.supports('selector(::details-content)')) {
+    const glide = (d: HTMLDetailsElement, open: boolean) => {
+      const body = bodyOf(d);
+      if (open) d.open = true;
+      const full = { height: `${body.offsetHeight}px`, paddingBottom: getComputedStyle(body).paddingBottom };
+      const shut = { height: '0px', paddingBottom: '0px' };
+      body.style.overflow = 'hidden';
+      const run = body.animate(open ? [shut, full] : [full, shut], motionTiming('spatial'));
+      run.onfinish = run.oncancel = () => {
+        body.style.overflow = '';
+        if (!open) d.open = false;
+      };
+    };
+    document.querySelectorAll<HTMLDetailsElement>('details.block-accordion-row').forEach((d) => {
+      const group = d.getAttribute('name');
+      d.removeAttribute('name');
+      d.querySelector('summary')!.addEventListener('click', (e) => {
+        const others = [
+          ...document.querySelectorAll<HTMLDetailsElement>(`details.block-accordion-row[data-group="${group}"][open]`),
+        ].filter((o) => o !== d);
+        if (still()) return others.forEach((o) => (o.open = false));
+        e.preventDefault();
+        if (d.open) return glide(d, false);
+        others.forEach((o) => glide(o, false));
+        glide(d, true);
+      });
+      d.dataset.group = group ?? '';
+    });
+  }
+}

package/theme/blocks/hero/View.tsx

@@ -1,44 +1,44 @@
-// "Banner", beside its picture or over it (view.behind: the picture fills the block behind the text), or without one
-// (block-hero-plain), across the whole width of the window or as wide as the text (view.full, block-hero-full: on the
-// site it reaches out of the text to the window's edges with its content in the page's width; in the editor it is as
-// wide as where it is drawn, blocks.css): its own heading (an H2; the page's H1 is the page's), the subtitle and the
-// introduction (its text before the buttons: the first paragraph the subtitle), the buttons of its "Knapper" block and
-// the text under them, with a quote written in it. Until the buttons scroll into view, a bar at the bottom of a phone's
-// screen may show them (data-hero-cta, Base.astro).
-import Buttons from '@theme/blocks/buttons/Buttons';
-import type { HeroView } from '@morphemecms/cms/src/standard/hero/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Hero({ view }: { view: HeroView }) {
-  const { image } = view;
-  // The widths the picture is shown in: behind the text the whole block's, beside it a part of it.
-  const sizes = view.behind ? (view.full ? '100vw' : '(min-width: 1152px) 1152px, 100vw') : '(min-width: 768px) 40vw, 100vw';
-  return (
-    <div
-      className={useInText('block-hero', view.behind && 'block-hero-behind', !image && 'block-hero-plain', view.full && 'block-hero-full')}
-    >
-      <div className="block-hero-body">
-        {view.heading && <h2 className="block-hero-title">{view.heading}</h2>}
-        <div className="block-hero-text" dangerouslySetInnerHTML={{ __html: view.html }} />
-        {view.buttons && (
-          <div className="block-buttons" data-hero-cta="">
-            <Buttons buttons={view.buttons} />
-          </div>
-        )}
-        {view.note && <div className="block-hero-note" dangerouslySetInnerHTML={{ __html: view.note }} />}
-      </div>
-      {image && (
-        <img
-          src={image.src}
-          srcSet={image.srcset}
-          sizes={image.srcset ? sizes : undefined}
-          width={image.width}
-          height={image.height}
-          alt={image.alt}
-          fetchPriority="high"
-          className="block-hero-picture"
-        />
-      )}
-    </div>
-  );
-}
+// "Banner", beside its picture or over it (view.behind: the picture fills the block behind the text), or without one
+// (block-hero-plain), across the whole width of the window or as wide as the text (view.full, block-hero-full: on the
+// site it reaches out of the text to the window's edges with its content in the page's width; in the editor it is as
+// wide as where it is drawn, blocks.css): its own heading (an H2; the page's H1 is the page's), the subtitle and the
+// introduction (its text before the buttons: the first paragraph the subtitle), the buttons of its "Knapper" block and
+// the text under them, with a quote written in it. Until the buttons scroll into view, a bar at the bottom of a phone's
+// screen may show them (data-hero-cta, Base.astro).
+import Buttons from '@theme/blocks/buttons/Buttons';
+import type { HeroView } from '@morphemecms/cms/src/standard/hero/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Hero({ view }: { view: HeroView }) {
+  const { image } = view;
+  // The widths the picture is shown in: behind the text the whole block's, beside it a part of it.
+  const sizes = view.behind ? (view.full ? '100vw' : '(min-width: 1152px) 1152px, 100vw') : '(min-width: 768px) 40vw, 100vw';
+  return (
+    <div
+      className={useInText('block-hero', view.behind && 'block-hero-behind', !image && 'block-hero-plain', view.full && 'block-hero-full')}
+    >
+      <div className="block-hero-body">
+        {view.heading && <h2 className="block-hero-title">{view.heading}</h2>}
+        <div className="block-hero-text" dangerouslySetInnerHTML={{ __html: view.html }} />
+        {view.buttons && (
+          <div className="block-buttons" data-hero-cta="">
+            <Buttons buttons={view.buttons} />
+          </div>
+        )}
+        {view.note && <div className="block-hero-note" dangerouslySetInnerHTML={{ __html: view.note }} />}
+      </div>
+      {image && (
+        <img
+          src={image.src}
+          srcSet={image.srcset}
+          sizes={image.srcset ? sizes : undefined}
+          width={image.width}
+          height={image.height}
+          alt={image.alt}
+          fetchPriority="high"
+          className="block-hero-picture"
+        />
+      )}
+    </div>
+  );
+}

package/theme/blocks/links/LinkGroups.tsx

@@ -1,24 +1,24 @@
-// Groups of links to pages (.block-panels in ../../styles/blocks.css): a box for each group (Panel.tsx) with its heading,
-// a link to its page when it has one, and its pages under each other in a list (List.tsx in ../../ui/) by their titles,
-// each with an arrow. Two boxes side by side where there is room. `className`: the site's own classes on it.
-import Panel from '@theme/blocks/Panel';
-import List, { ListItem } from '@theme/ui/List';
-import { Svg } from '@morphemecms/cms/src/icon';
-import type { LinkGroup } from '@morphemecms/cms/src/standard/links/view';
-import { Link } from '@morphemecms/cms/src/standard/view';
-
-export default function LinkGroups({ groups, className }: { groups: LinkGroup[]; className?: string }) {
-  return (
-    <div className={className ? `block-panels ${className}` : 'block-panels'}>
-      {groups.map((g, i) => (
-        <Panel key={i} title={g.href ? <Link href={g.href}>{g.title}</Link> : g.title}>
-          <List>
-            {g.pages.map((p) => (
-              <ListItem key={p.href} href={p.href} headline={p.name} trailing={<Svg name="arrow-right" size={18} />} />
-            ))}
-          </List>
-        </Panel>
-      ))}
-    </div>
-  );
-}
+// Groups of links to pages (.block-panels in ../../styles/blocks.css): a box for each group (Panel.tsx) with its heading,
+// a link to its page when it has one, and its pages under each other in a list (List.tsx in ../../ui/) by their titles,
+// each with an arrow. Two boxes side by side where there is room. `className`: the site's own classes on it.
+import Panel from '@theme/blocks/Panel';
+import List, { ListItem } from '@theme/ui/List';
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { LinkGroup } from '@morphemecms/cms/src/standard/links/view';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export default function LinkGroups({ groups, className }: { groups: LinkGroup[]; className?: string }) {
+  return (
+    <div className={className ? `block-panels ${className}` : 'block-panels'}>
+      {groups.map((g, i) => (
+        <Panel key={i} title={g.href ? <Link href={g.href}>{g.title}</Link> : g.title}>
+          <List>
+            {g.pages.map((p) => (
+              <ListItem key={p.href} href={p.href} headline={p.name} trailing={<Svg name="arrow-right" size={18} />} />
+            ))}
+          </List>
+        </Panel>
+      ))}
+    </div>
+  );
+}

package/theme/blocks/links/View.tsx

@@ -1,17 +1,17 @@
-// "Links": its heading in the text, and LinkGroups.tsx with the space of a block in the text.
-import LinkGroups from '@theme/blocks/links/LinkGroups';
-import type { LinksView } from '@morphemecms/cms/src/standard/links/view';
-import { InProse, useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Links({ view }: { view: LinksView }) {
-  return (
-    <>
-      {view.heading && (
-        <InProse>
-          <h2>{view.heading}</h2>
-        </InProse>
-      )}
-      <LinkGroups groups={view.groups} className={useInText() || 'block-in-text'} />
-    </>
-  );
-}
+// "Links": its heading in the text, and LinkGroups.tsx with the space of a block in the text.
+import LinkGroups from '@theme/blocks/links/LinkGroups';
+import type { LinksView } from '@morphemecms/cms/src/standard/links/view';
+import { InProse, useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Links({ view }: { view: LinksView }) {
+  return (
+    <>
+      {view.heading && (
+        <InProse>
+          <h2>{view.heading}</h2>
+        </InProse>
+      )}
+      <LinkGroups groups={view.groups} className={useInText() || 'block-in-text'} />
+    </>
+  );
+}

package/theme/blocks/list/Rows.tsx

@@ -1,24 +1,24 @@
-// The rows of "Liste": the theme's list (List.tsx in ../../ui/), standard (its lines between the rows are the
-// theme's: --list-divider, none in Material's) or segmented, each row an item with its icon leading it, its heading as the headline and its text as the supporting
-// text, and, with a page, the whole row a link with an arrow after it. With a text on any row, all rows have two lines,
-// so they are alike. `className`: the classes of where it is (the space of a block in the text).
-import List, { ListItem } from '@theme/ui/List';
-import type { ListDesign, ListRow } from '@morphemecms/cms/src/standard/list/view';
-
-export default function Rows({ items, design, className }: { items: ListRow[]; design: ListDesign; className?: string }) {
-  const withText = items.some((r) => r.text);
-  return (
-    <List kind={design === 'segmented' ? 'segmented' : 'standard'} className={className ? `block-list ${className}` : 'block-list'}>
-      {items.map((r, i) => (
-        <ListItem
-          key={i}
-          href={r.href || undefined}
-          leadingIcon={r.icon || undefined}
-          headline={r.title}
-          supporting={withText ? (r.text ?? '') : undefined}
-          trailingIcon={r.href ? 'caret-right' : undefined}
-        />
-      ))}
-    </List>
-  );
-}
+// The rows of "Liste": the theme's list (List.tsx in ../../ui/), standard (its lines between the rows are the
+// theme's: --list-divider, none in Material's) or segmented, each row an item with its icon leading it, its heading as the headline and its text as the supporting
+// text, and, with a page, the whole row a link with an arrow after it. With a text on any row, all rows have two lines,
+// so they are alike. `className`: the classes of where it is (the space of a block in the text).
+import List, { ListItem } from '@theme/ui/List';
+import type { ListDesign, ListRow } from '@morphemecms/cms/src/standard/list/view';
+
+export default function Rows({ items, design, className }: { items: ListRow[]; design: ListDesign; className?: string }) {
+  const withText = items.some((r) => r.text);
+  return (
+    <List kind={design === 'segmented' ? 'segmented' : 'standard'} className={className ? `block-list ${className}` : 'block-list'}>
+      {items.map((r, i) => (
+        <ListItem
+          key={i}
+          href={r.href || undefined}
+          leadingIcon={r.icon || undefined}
+          headline={r.title}
+          supporting={withText ? (r.text ?? '') : undefined}
+          trailingIcon={r.href ? 'caret-right' : undefined}
+        />
+      ))}
+    </List>
+  );
+}

package/theme/blocks/list/View.tsx

@@ -1,14 +1,14 @@
-// "Liste": its head in the text (BlockHead.tsx), and Rows.tsx with the space of a block in the text.
-import BlockHead from '@theme/blocks/BlockHead';
-import Rows from '@theme/blocks/list/Rows';
-import type { ListView } from '@morphemecms/cms/src/standard/list/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function ListBlock({ view }: { view: ListView }) {
-  return (
-    <>
-      <BlockHead view={view} />
-      <Rows items={view.items} design={view.design} className={useInText() || undefined} />
-    </>
-  );
-}
+// "Liste": its head in the text (BlockHead.tsx), and Rows.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import Rows from '@theme/blocks/list/Rows';
+import type { ListView } from '@morphemecms/cms/src/standard/list/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function ListBlock({ view }: { view: ListView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <Rows items={view.items} design={view.design} className={useInText() || undefined} />
+    </>
+  );
+}

package/theme/blocks/notice/View.tsx

@@ -1,13 +1,13 @@
-// "Besked": a short notice in a box with the accent along its left edge (.block-notice in ../blocks.css). What it shows
-// is its contract's (@morphemecms/cms/src/standard/notice/view.ts); on the site it also has the time it goes, for the
-// script after it.
-import { useInText } from '@morphemecms/cms/src/standard/view';
-import type { NoticeView } from '@morphemecms/cms/src/standard/notice/view';
-
-export default function Notice({ view }: { view: NoticeView }) {
-  return (
-    <aside className={useInText('block-notice')} data-until={view.until ?? undefined}>
-      <p dangerouslySetInnerHTML={{ __html: view.html }} />
-    </aside>
-  );
-}
+// "Besked": a short notice in a box with the accent along its left edge (.block-notice in ../blocks.css). What it shows
+// is its contract's (@morphemecms/cms/src/standard/notice/view.ts); on the site it also has the time it goes, for the
+// script after it.
+import { useInText } from '@morphemecms/cms/src/standard/view';
+import type { NoticeView } from '@morphemecms/cms/src/standard/notice/view';
+
+export default function Notice({ view }: { view: NoticeView }) {
+  return (
+    <aside className={useInText('block-notice')} data-until={view.until ?? undefined}>
+      <p dangerouslySetInnerHTML={{ __html: view.html }} />
+    </aside>
+  );
+}

package/theme/blocks/points/PointList.tsx

@@ -1,34 +1,34 @@
-// Points side by side where there is room (.block-points in ../blocks.css), a list without dividers (List.tsx in
-// ../../ui/): each an item with its icon leading it, its heading as the headline and its text as the supporting text,
-// with, with a page and a link's text, the link after the text: the standard block "Punkter med ikon".
-// `className`: the site's own classes on the list.
-import List, { ListItem } from '@theme/ui/List';
-import type { Point } from '@morphemecms/cms/src/standard/points/view';
-import { Link } from '@morphemecms/cms/src/standard/view';
-
-export default function PointList({ items, className }: { items: Point[]; className?: string }) {
-  return (
-    <List dividers="none" className={className ? `block-points ${className}` : 'block-points'}>
-      {items.map((p, i) => (
-        <ListItem
-          key={i}
-          leadingIcon={p.icon}
-          headline={p.title}
-          supporting={
-            <>
-              {p.text}
-              {p.more && p.href && (
-                <>
-                  {' '}
-                  <Link href={p.href} className="block-link">
-                    {p.more}
-                  </Link>
-                </>
-              )}
-            </>
-          }
-        />
-      ))}
-    </List>
-  );
-}
+// Points side by side where there is room (.block-points in ../blocks.css), a list without dividers (List.tsx in
+// ../../ui/): each an item with its icon leading it, its heading as the headline and its text as the supporting text,
+// with, with a page and a link's text, the link after the text: the standard block "Punkter med ikon".
+// `className`: the site's own classes on the list.
+import List, { ListItem } from '@theme/ui/List';
+import type { Point } from '@morphemecms/cms/src/standard/points/view';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export default function PointList({ items, className }: { items: Point[]; className?: string }) {
+  return (
+    <List dividers="none" className={className ? `block-points ${className}` : 'block-points'}>
+      {items.map((p, i) => (
+        <ListItem
+          key={i}
+          leadingIcon={p.icon}
+          headline={p.title}
+          supporting={
+            <>
+              {p.text}
+              {p.more && p.href && (
+                <>
+                  {' '}
+                  <Link href={p.href} className="block-link">
+                    {p.more}
+                  </Link>
+                </>
+              )}
+            </>
+          }
+        />
+      ))}
+    </List>
+  );
+}

package/theme/blocks/points/View.tsx

@@ -1,14 +1,14 @@
-// "Punkter med ikon": its head in the text (BlockHead.tsx), and PointList.tsx with the space of a block in the text.
-import BlockHead from '@theme/blocks/BlockHead';
-import PointList from '@theme/blocks/points/PointList';
-import type { PointsView } from '@morphemecms/cms/src/standard/points/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Points({ view }: { view: PointsView }) {
-  return (
-    <>
-      <BlockHead view={view} />
-      <PointList items={view.items} className={useInText() || 'block-in-text'} />
-    </>
-  );
-}
+// "Punkter med ikon": its head in the text (BlockHead.tsx), and PointList.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import PointList from '@theme/blocks/points/PointList';
+import type { PointsView } from '@morphemecms/cms/src/standard/points/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Points({ view }: { view: PointsView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <PointList items={view.items} className={useInText() || 'block-in-text'} />
+    </>
+  );
+}

package/theme/blocks/posts/View.tsx

@@ -1,26 +1,26 @@
-// "Blogindlæg": its head in the text (BlockHead.tsx), then its posts as the blog shows them, with the space of a block in
-// the text: a list (the theme's PostList.tsx: picture, date and reading time, title and description), or the newest
-// large over the list (BlogPosts.tsx, as on the blog page), with "Alle indlæg" under them when it has it. In the editor,
-// when they are picked at random, how many it picks from, and when it shows all, how many more there are.
-import ArrowLink from '@theme/blocks/ArrowLink';
-import BlockHead from '@theme/blocks/BlockHead';
-import BlogPosts from '@theme/components/BlogPosts';
-import PostList from '@theme/components/PostList';
-import type { PostsView } from '@morphemecms/cms/src/standard/posts/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-import { formatDate } from '@morphemecms/cms/site/format';
-
-export default function Posts({ view }: { view: PostsView }) {
-  const posts = view.posts.map((p) => ({ ...p, dateText: formatDate(new Date(p.date)) }));
-  return (
-    <>
-      <BlockHead view={view} />
-      <div className={`${useInText() || 'block-in-text'} block-posts-in-text`}>
-        {view.note && <p className="block-posts-note">{view.note}</p>}
-        {view.design === 'featured' ? <BlogPosts posts={posts} /> : <PostList posts={posts} count={view.count} random={view.random} />}
-        {view.more && <p className="block-posts-note block-posts-more">{view.more}</p>}
-        {view.all && <ArrowLink href={view.all.href} label={view.all.text} className="block-posts-all" />}
-      </div>
-    </>
-  );
-}
+// "Blogindlæg": its head in the text (BlockHead.tsx), then its posts as the blog shows them, with the space of a block in
+// the text: a list (the theme's PostList.tsx: picture, date and reading time, title and description), or the newest
+// large over the list (BlogPosts.tsx, as on the blog page), with "Alle indlæg" under them when it has it. In the editor,
+// when they are picked at random, how many it picks from, and when it shows all, how many more there are.
+import ArrowLink from '@theme/blocks/ArrowLink';
+import BlockHead from '@theme/blocks/BlockHead';
+import BlogPosts from '@theme/components/BlogPosts';
+import PostList from '@theme/components/PostList';
+import type { PostsView } from '@morphemecms/cms/src/standard/posts/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+import { formatDate } from '@morphemecms/cms/site/format';
+
+export default function Posts({ view }: { view: PostsView }) {
+  const posts = view.posts.map((p) => ({ ...p, dateText: formatDate(new Date(p.date)) }));
+  return (
+    <>
+      <BlockHead view={view} />
+      <div className={`${useInText() || 'block-in-text'} block-posts-in-text`}>
+        {view.note && <p className="block-posts-note">{view.note}</p>}
+        {view.design === 'featured' ? <BlogPosts posts={posts} /> : <PostList posts={posts} count={view.count} random={view.random} />}
+        {view.more && <p className="block-posts-note block-posts-more">{view.more}</p>}
+        {view.all && <ArrowLink href={view.all.href} label={view.all.text} className="block-posts-all" />}
+      </div>
+    </>
+  );
+}

package/theme/blocks/pricecards/View.tsx

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