@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/blocks/Person.tsx

@@ -0,0 +1,26 @@
+// A person (.block-person in ../styles/blocks.css): their picture, small, beside their name and their role, at the top of
+// an app's box (@theme/blocks/Person). A theme draws it its own way with its own blocks/Person.tsx, with the same props.
+// The picture with the sizes the site made of it (pictureOf, packages/editor/site/images.mjs); in the editor the picture itself.
+import type { Picture } from '@morphemecms/cms/src/standard/view';
+
+export default function Person({ picture, name, role }: { picture: Picture; name: string; role?: string }) {
+  return (
+    <div className="block-person">
+      <img
+        src={picture.src}
+        srcSet={picture.srcset}
+        sizes={picture.srcset ? '56px' : undefined}
+        width={picture.width}
+        height={picture.height}
+        alt=""
+        loading="lazy"
+        decoding="async"
+        className="block-person-picture"
+      />
+      <p>
+        <span className="block-person-name">{name}</span>
+        <span className="block-person-role">{role}</span>
+      </p>
+    </div>
+  );
+}

package/theme/blocks/accordion/PageRow.tsx

@@ -0,0 +1,25 @@
+// A row's text in the accordion (Accordion.tsx in ../faq/, a row with `page`): the text, a link to the row's page
+// (`link`: its text, e.g. "Læs mere om priser", the shared text of "Foldeliste"), and links to more specific pages
+// (`more`, e.g. "Depression som ung", as chips). The standard block "Foldeliste", and a site's own rows (this site's front
+// page, home/Topics.astro).
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { PageRowView } from '@morphemecms/cms/src/standard/accordion/view';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Chip from '@theme/ui/Chip';
+
+export default function PageRow(row: PageRowView) {
+  return (
+    <>
+      <p className="block-row-text">{row.text}</p>
+      <div className="block-row-links">
+        <Link href={row.href} className="block-link block-row-link">
+          {row.link}
+          <Svg name="arrow-right" size={18} />
+        </Link>
+        {row.more?.map((m) => (
+          <Chip key={m.href} href={m.href} label={m.label} />
+        ))}
+      </div>
+    </>
+  );
+}

package/theme/blocks/accordion/View.tsx

@@ -0,0 +1,17 @@
+// "Foldeliste": its head in the text (BlockHead.tsx), then its rows (Accordion.tsx in ../faq/, each
+// with PageRow.tsx) with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import Accordion from '@theme/blocks/faq/Accordion';
+import type { AccordionView } from '@morphemecms/cms/src/standard/accordion/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function AccordionBlock({ view }: { view: AccordionView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <div className={useInText() || undefined}>
+        <Accordion rows={view.rows.map((page) => ({ label: page.label, page }))} group={view.group} />
+      </div>
+    </>
+  );
+}

package/theme/blocks/buttons/Buttons.tsx

@@ -0,0 +1,28 @@
+// Buttons (Button.tsx in ../../ui/): the standard block "Knapper", and a site's or an app's own buttons (this site's
+// front page, the price cards, the action bar). Only the buttons: the caller lays them out (.block-buttons in a row).
+// What each shows is made by the contract (@morphemecms/cms/src/standard/buttons/view.ts: buttonsOf in the editor,
+// loadButtons on the site), its kind too. `className`: the site's own classes on each button, e.g. its width. The arrow
+// goes after the text (Button's trailingIcon), the other icons before it.
+import Button from '@theme/ui/Button';
+import type { ButtonView } from '@morphemecms/cms/src/standard/buttons/view';
+
+export default function Buttons({ buttons, className }: { buttons: ButtonView[]; className?: string }) {
+  return (
+    <>
+      {buttons.map((b, i) => (
+        <Button
+          key={i}
+          href={b.href}
+          kind={b.kind}
+          icon={b.icon !== 'arrow-right' ? b.icon : undefined}
+          trailingIcon={b.icon === 'arrow-right' ? 'arrow-right' : undefined}
+          data-open={b.open}
+          className={className}
+          aria-label={b.label}
+        >
+          {b.text}
+        </Button>
+      ))}
+    </>
+  );
+}

package/theme/blocks/buttons/View.tsx

@@ -0,0 +1,12 @@
+// "Knapper": its own buttons, or the shared ones, in a row, on a phone under each other in the full width.
+import Buttons from '@theme/blocks/buttons/Buttons';
+import type { ButtonsView } from '@morphemecms/cms/src/standard/buttons/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function ButtonsBlock({ view }: { view: ButtonsView }) {
+  return (
+    <div className={useInText('block-buttons')}>
+      <Buttons buttons={view.buttons} />
+    </div>
+  );
+}

package/theme/blocks/cards/LinkCards.tsx

@@ -0,0 +1,72 @@
+// Cards that link to other pages (outlined cards, Card.tsx in ../../ui/; one without a page is only its text), each with
+// an icon, (`design` 'image') a picture or ('text') nothing at the top, a heading, a text and the link's text at the
+// bottom (`more`, the block's shared text), two side by side from small screens (.block-cards in ../blocks.css), on the
+// theme's surface or (`background`) the accent: the standard block "Kort", and a site's own cards (this site's front
+// page).
+// `className`: the site's own classes on the list, e.g. its margin.
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { LinkCard } from '@morphemecms/cms/src/standard/cards/view';
+import Card from '@theme/ui/Card';
+
+const sizes = '(min-width: 640px) 352px, 100vw';
+
+export default function LinkCards({
+  items,
+  more,
+  design,
+  background,
+  className,
+}: {
+  items: LinkCard[];
+  more: string;
+  design?: string;
+  background?: string;
+  className?: string;
+}) {
+  const pictures = design === 'image';
+  const filled = background === 'accent' ? 'block-cards-accent' : undefined;
+  return (
+    <ul className={['block-cards', pictures && 'block-cards-pictures', filled, className].filter(Boolean).join(' ')}>
+      {items.map((card, i) => {
+        const inside = (
+          <>
+            {pictures ? (
+              <span className="block-card-picture">
+                {card.image && (
+                  <img
+                    src={card.image.src}
+                    srcSet={card.image.srcset}
+                    sizes={card.image.srcset ? sizes : undefined}
+                    width={card.image.width}
+                    height={card.image.height}
+                    alt=""
+                    loading="lazy"
+                    decoding="async"
+                  />
+                )}
+              </span>
+            ) : (
+              design !== 'text' && <Svg name={card.icon ?? ''} size={28} className="block-card-icon" />
+            )}
+            <span className="block-card-title">{card.title}</span>
+            <span className="block-card-text">{card.text}</span>
+            {card.href && (
+              <span className="block-card-more">
+                {more}
+                <Svg name="arrow-right" size={18} className="block-card-arrow" />
+              </span>
+            )}
+          </>
+        );
+        // A card without a page is not a link, and has no link's text.
+        return (
+          <li key={i}>
+            <Card href={card.href || undefined} className="block-card">
+              {inside}
+            </Card>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/theme/blocks/cards/View.tsx

@@ -0,0 +1,20 @@
+// "Kort": its head in the text (BlockHead.tsx), then LinkCards.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import LinkCards from '@theme/blocks/cards/LinkCards';
+import type { CardsView } from '@morphemecms/cms/src/standard/cards/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Cards({ view }: { view: CardsView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <LinkCards
+        items={view.items}
+        design={view.design}
+        background={view.background}
+        more={view.more}
+        className={useInText() || undefined}
+      />
+    </>
+  );
+}

package/theme/blocks/checklist/Checks.tsx

@@ -0,0 +1,15 @@
+// Lines with a check before each, a list without dividers (List.tsx in ../../ui/, .block-checklist in ../blocks.css):
+// the standard block "Tjekliste", in two columns where there is room when it has six or more, and what is included on
+// a card of "Priskort" (../pricecards/View.tsx). `className`: the classes of where it is (the space of a block in the
+// text, a card's).
+import List, { ListItem } from '@theme/ui/List';
+
+export default function Checks({ items, className }: { items: string[]; className?: string }) {
+  return (
+    <List dividers="none" className={className ? `block-checklist ${className}` : 'block-checklist'}>
+      {items.map((text, i) => (
+        <ListItem key={i} leadingIcon="check" headline={text} />
+      ))}
+    </List>
+  );
+}

package/theme/blocks/checklist/View.tsx

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

package/theme/blocks/cookies/View.tsx

@@ -0,0 +1,36 @@
+// "Cookieliste": the cookies as a table, a row each with who sets it first and then its name, which scrolls sideways on
+// a narrow screen. Built of the standard blocks' part .block-table.
+import type { CookiesView } from '@morphemecms/cms/src/standard/cookies/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Cookies({ view }: { view: CookiesView }) {
+  const { texts } = view;
+  return (
+    <div className={useInText('block-table')}>
+      <table>
+        <thead>
+          <tr>
+            <th scope="col">{texts.provider}</th>
+            <th scope="col">{texts.name}</th>
+            <th scope="col">{texts.purpose}</th>
+            <th scope="col">{texts.lasts}</th>
+            <th scope="col">{texts.category}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {view.cookies.map((c) => (
+            <tr key={`${c.name} ${c.provider}`}>
+              <td>{c.provider}</td>
+              <th scope="row">
+                <code>{c.name}</code>
+              </th>
+              <td>{c.purpose}</td>
+              <td>{c.lasts}</td>
+              <td>{texts[c.category]}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/theme/blocks/faq/Accordion.tsx

@@ -0,0 +1,34 @@
+// Rows that fold out (.block-accordion in ../blocks.css): the standard block "Spørgsmål og svar" (a question, and its
+// answer as it was written: `html`), and "Foldeliste" and a site's own rows of pages (`page`: PageRow.tsx in
+// ../accordion/; this site's topics). Native <details>/<summary>, no JavaScript: the same `name` (`group`; in the
+// editor, without one, its own) keeps one open at a time in each list (browsers without support just allow several).
+// Closed text is still in the HTML for search engines, and the browser's find-in-page opens the row it finds. Opening
+// and closing glide: in CSS where the browser can animate ::details-content, else by script.ts; the text fades in as
+// it opens. Reduced motion: no animation.
+import { useId } from 'react';
+import PageRow from '@theme/blocks/accordion/PageRow';
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { AccordionRow } from '@morphemecms/cms/src/standard/faq/view';
+
+export default function Accordion({ rows, group }: { rows: AccordionRow[]; group?: string }) {
+  const own = useId();
+  return (
+    <div className="block-accordion">
+      {rows.map((row, i) => (
+        <details key={i} name={group ?? own} className="block-accordion-row">
+          <summary className="block-accordion-label">
+            {row.label}
+            <Svg name="caret-down" size={20} className="block-accordion-icon" />
+          </summary>
+          <div className="block-accordion-body">
+            {'html' in row ? (
+              <div className="block-accordion-answer" dangerouslySetInnerHTML={{ __html: row.html }} />
+            ) : (
+              <PageRow {...row.page} />
+            )}
+          </div>
+        </details>
+      ))}
+    </div>
+  );
+}

package/theme/blocks/faq/View.tsx

@@ -0,0 +1,16 @@
+// "Spørgsmål og svar": its head in the text (BlockHead.tsx), then Accordion.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import Accordion from '@theme/blocks/faq/Accordion';
+import type { FaqView } from '@morphemecms/cms/src/standard/faq/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Faq({ view }: { view: FaqView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <div className={useInText() || undefined}>
+        <Accordion rows={view.rows} group={view.group} />
+      </div>
+    </>
+  );
+}

package/theme/blocks/faq/script.ts

@@ -0,0 +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 ?? '';
+    });
+  }
+}

package/theme/blocks/hero/View.tsx

@@ -0,0 +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>
+  );
+}

package/theme/blocks/links/LinkGroups.tsx

@@ -0,0 +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>
+  );
+}

package/theme/blocks/links/View.tsx

@@ -0,0 +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'} />
+    </>
+  );
+}

package/theme/blocks/list/Rows.tsx

@@ -0,0 +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>
+  );
+}

package/theme/blocks/list/View.tsx

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

package/theme/blocks/notice/View.tsx

@@ -0,0 +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>
+  );
+}

package/theme/blocks/points/PointList.tsx

@@ -0,0 +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>
+  );
+}

package/theme/blocks/points/View.tsx

@@ -0,0 +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'} />
+    </>
+  );
+}

package/theme/blocks/posts/View.tsx

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