@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/components/BookButton.tsx

@@ -0,0 +1,22 @@
+// "Book en tid" button (`label`: booking.json, "Blokke" › "Book en tid" in the editor), filled (Button.tsx), in its
+// size (`size`, small in the header). It opens what books on the page (`data-open="booking"`: the booking sheet of an
+// app's promotion, src/apps/), or goes to the booking page (`href`). In the editor only drawn.
+import Button, { type ButtonSize } from '@theme/ui/Button';
+
+export default function BookButton({
+  href,
+  label,
+  size,
+  className,
+}: {
+  href: string;
+  label: string;
+  size?: ButtonSize;
+  className?: string;
+}) {
+  return (
+    <Button href={href} size={size} data-open="booking" className={className}>
+      {label}
+    </Button>
+  );
+}

package/theme/components/Container.astro

@@ -0,0 +1,11 @@
+---
+// Page-width container with the site's side gutters. Every full-width block uses it.
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'section'> & { as?: 'section' | 'div' | 'header' };
+const { as: Tag = 'section', class: className, ...rest } = Astro.props;
+---
+
+<Tag class:list={['mx-auto max-w-6xl px-5 md:px-8', className]} {...rest}>
+  <slot />
+</Tag>

package/theme/components/CookieConsent.astro

@@ -0,0 +1,121 @@
+---
+// Cookie banner: asks about each category of cookies the apps' tags set (consentCategories in packages/editor/site/consent.ts:
+// preferences, statistics, marketing, targeting), so a yes to one is not a yes to another, before those tags are loaded
+// (afterConsent in src/scripts/tracking.ts). "Ja tak" says yes to all of them and "Nej tak" no, equally easy; "Avanceret"
+// shows each category with what it is for and a box to tick (the theme's Checkbox), and "Gem valg" saves what is
+// ticked. The necessary cookies are shown too, always on. "Cookieindstillinger" in the footer opens it again, with the
+// categories, the visitor's answer and the id of their answers in the consent log (packages/editor/worker/consent.js), and so does
+// ?cookiebanner in the address (the editor's "Se på hjemmesiden"). It asks again when it
+// asks about a category the visitor has not answered.
+// The texts are in src/data/cookies.json, which the owner edits in the editor ("Indstillinger" › "Privatliv" ›
+// "Cookiebanner"); "Læs mere" goes to the cookie policy ("Standardsider", cookiesHref in packages/editor/site/standardPages.ts).
+// Its `enabled` is read by Base.astro: switched off, neither the banner nor this script (and so no
+// Google tag) is on the site.
+import type { CookieCategory } from '@morphemecms/cms/lib/cookieCategories.mjs';
+import { buttonClass } from '@theme/ui/Button';
+import Checkbox from '@theme/ui/Checkbox';
+import { dialogClass } from '@theme/ui/Dialog';
+import cookies from '@data/cookies.json';
+import { cookiesHref } from '@morphemecms/cms/site/standardPages';
+import { consentCategories } from '../../site/consent';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+const more = await cookiesHref();
+// Each category with its name and what it is for.
+const category = (id: CookieCategory) => ({ id, label: cookies[id], text: cookies[`${id}Text`] });
+const choices = consentCategories.map(category);
+const necessary = category('necessary');
+---
+
+<div
+  id="cookie-consent"
+  role="region"
+  aria-label={siteT.theme.cookies}
+  hidden
+  class:list={[
+    dialogClass,
+    'fixed inset-x-3 bottom-3 z-[42] max-h-[calc(100dvh-1.5rem)] max-w-md overflow-y-auto p-5 md:inset-x-auto md:bottom-6 md:left-6 md:p-6',
+  ]}
+  style="margin-bottom: env(safe-area-inset-bottom)"
+>
+  <p class="type-title-large">{cookies.heading}</p>
+  <p class="mt-2 type-body-medium text-muted">
+    {cookies.text}{' '}
+    <a href={more} class="text-accent underline underline-offset-4">
+      {cookies.more}
+    </a>
+  </p>
+  <fieldset data-choices hidden class="mt-4 space-y-3">
+    <legend class="sr-only">{cookies.choose}</legend>
+    <Checkbox label={necessary.label} supporting={necessary.text} checked disabled />
+    {choices.map((c) => (
+      <Checkbox label={c.label} supporting={c.text} name="consent" value={c.id} />
+    ))}
+  </fieldset>
+  <div class="mt-4 grid grid-cols-2 gap-2.5">
+    <button type="button" data-consent="denied" class={buttonClass('outlined')}>
+      {cookies.no}
+    </button>
+    <button type="button" data-consent="granted" class={buttonClass('outlined')}>
+      {cookies.yes}
+    </button>
+  </div>
+  <button type="button" data-consent="choose" class="link mt-3 type-body-medium">
+    {cookies.choose}
+  </button>
+  <button type="button" data-consent="save" hidden class={`${buttonClass('outlined')} mt-2.5 w-full`}>
+    {cookies.save}
+  </button>
+  <p data-consent-id hidden class="type-body-small mt-3 break-all text-muted">
+    {cookies.consentId}: <span></span>
+  </p>
+</div>
+
+<script>
+  import type { ConsentCategory } from '@morphemecms/cms/lib/cookieCategories.mjs';
+  import { choose, consentId, storedConsent } from '../../site/tracking.client';
+
+  const banner = document.getElementById('cookie-consent');
+  if (banner) {
+    const boxes = [...banner.querySelectorAll<HTMLInputElement>('input[name="consent"]')];
+    const choices = banner.querySelector<HTMLElement>('[data-choices]')!;
+    const button = (what: string) => banner.querySelector<HTMLButtonElement>(`[data-consent="${what}"]`)!;
+    const category = (box: HTMLInputElement) => box.value as ConsentCategory;
+
+    // Shows the banner, with the categories (`choosing`) ticked as the visitor answered last.
+    const open = (choosing: boolean) => {
+      const stored = storedConsent();
+      for (const box of boxes) box.checked = stored?.[category(box)] === true;
+      choices.hidden = !choosing;
+      // The id of the visitor's answers in the consent log, once they have answered.
+      const id = consentId();
+      const idLine = banner.querySelector<HTMLElement>('[data-consent-id]')!;
+      idLine.hidden = !id;
+      idLine.querySelector('span')!.textContent = id ?? '';
+      button('choose').hidden = choosing;
+      button('save').hidden = !choosing;
+      banner.hidden = false;
+    };
+    const answer = (yes: (box: HTMLInputElement) => boolean) => {
+      banner.hidden = true;
+      choose(Object.fromEntries(boxes.map((box) => [category(box), yes(box)])));
+    };
+
+    const stored = storedConsent();
+    if (!stored || boxes.some((box) => stored[category(box)] === undefined) || new URLSearchParams(location.search).has('cookiebanner'))
+      open(false);
+    button('granted').addEventListener('click', () => answer(() => true));
+    button('denied').addEventListener('click', () => answer(() => false));
+    button('save').addEventListener('click', () => answer((box) => box.checked));
+    button('choose').addEventListener('click', () => {
+      open(true);
+      boxes[0]?.focus();
+    });
+    document.querySelectorAll('[data-cookie-settings]').forEach((btn) =>
+      btn.addEventListener('click', () => {
+        open(!!storedConsent());
+        (storedConsent() ? boxes[0] : button('denied'))?.focus();
+      }),
+    );
+  }
+</script>

package/theme/components/EndBlock.astro

@@ -0,0 +1,21 @@
+---
+// A block across the page at its end, below the text (Block.astro, by its type): the one that ends a page's text when
+// its type is drawn across the page (endBlock in packages/editor/src/standard/views.ts, e.g. an app's booking block),
+// or the one after every blog post (`postEnd` in the site's config), with its props (empty: its shared texts). The
+// theme only places it.
+// Other attributes go on the outermost element (PageLayout.astro marks the one at the end of a page for
+// the editor's preview, `data-editor`).
+import Block from '@morphemecms/cms/src/standard/Block.astro';
+import Container from '@theme/components/Container.astro';
+
+interface Props {
+  type: string;
+  props?: Record<string, unknown>;
+  [attribute: `data-${string}`]: string;
+}
+const { type, props = {}, ...rest } = Astro.props;
+---
+
+<Container class="block-place mt-20 md:mt-28" data-reveal {...rest}>
+  <Block type={type} props={props} />
+</Container>

package/theme/components/FontPreload.astro

@@ -0,0 +1,6 @@
+---
+// Preload the Latin font file so text renders without waiting for the CSS to be parsed (Base.astro).
+import robotoLatin from '@fontsource-variable/roboto/files/roboto-latin-wght-normal.woff2?url';
+---
+
+<link rel="preload" href={robotoLatin} as="font" type="font/woff2" crossorigin />

package/theme/components/Footer.astro

@@ -0,0 +1,85 @@
+---
+// The footer in Material: a surface container with extra-large corners at the top, the business as a headline, how to
+// reach it as a list with leading icons, the practical links (footer.json, "På alle sider" › "Footer" in the editor) or
+// what a page puts in the slot `footer-column` instead (a blog post's related posts), and at the bottom the cookie
+// settings and light or dark as text buttons.
+import Icon from '@theme/components/Icon.astro';
+import Container from '@theme/components/Container.astro';
+import LogoMark from '@theme/components/LogoMark.astro';
+import footer from '@data/footer.json';
+import { site } from '@morphemecms/cms/site/site';
+import { cookieBanner } from '@morphemecms/cms/site/consent';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+// "Cookieindstillinger": when the cookie banner is on and there is something to ask about (as in Base.astro).
+const banner = cookieBanner;
+const contactLinks = [
+  { href: site.phoneHref, icon: 'phone', lines: [site.phone] },
+  { href: `mailto:${site.email}`, icon: 'envelope-simple', lines: [site.email] },
+  { href: `${site.contactPath}#find-vej`, icon: 'map-pin', lines: [site.address.street, site.address.city] },
+];
+---
+
+<footer class="md-footer">
+  <Container as="div" class="grid gap-10 py-12 md:grid-cols-12 md:py-16">
+    <div class="md:col-span-5">
+      <LogoMark class="block h-12 w-11 bg-accent" />
+      <p class="md-footer-name">{site.name}</p>
+      <p class="md-footer-text">{footer.text}</p>
+    </div>
+    <div class="md:col-span-4">
+      <p class="md-footer-heading">{footer.contactHeading}</p>
+      <ul class="md-footer-list">
+        {contactLinks.map((c) => (
+          <li>
+            <a href={c.href} class="md-footer-item">
+              <Icon name={c.icon} size={24} />
+              <span>
+                {c.lines.map((line, i) => (
+                  <>
+                    {i > 0 && <br />}
+                    {line}
+                  </>
+                ))}
+              </span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+    <div class="md-footer-column md:col-span-3">
+      <slot name="footer-column">
+        <p class="md-footer-heading">{footer.linksHeading}</p>
+        <ul class="md-footer-list">
+          {footer.links.map((l) => (
+            <li>
+              <a href={l.href} class="md-footer-item">
+                {l.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </slot>
+    </div>
+    <div class="md-footer-bottom md:col-span-12">
+      <span>
+        © {new Date().getFullYear()} {site.name}
+        {site.cvr && <> · CVR {site.cvr}</>}
+      </span>
+      <div class="flex flex-wrap items-center gap-2">
+        {banner && (
+          <button type="button" data-cookie-settings class="button button-text">
+            <Icon name="cookie" size={18} />
+            {siteT.theme.cookieSettings}
+          </button>
+        )}
+        <button type="button" data-theme-toggle class="button button-text">
+          <Icon name="moon" size={18} class="dark-hide" />
+          <Icon name="sun" size={18} class="light-hide" />
+          <span class="dark-hide">{siteT.theme.darkTheme}</span>
+          <span class="light-hide">{siteT.theme.lightTheme}</span>
+        </button>
+      </div>
+    </div>
+  </Container>
+</footer>

package/theme/components/Header.astro

@@ -0,0 +1,186 @@
+---
+// The header in Material: a small top app bar (ui/TopAppBar.tsx, m3.material.io/components/top-app-bar) with the navigation drawer's
+// button first (MobileMenu.tsx) on a phone, a tablet and when the menu does not fit, the logo, the menu's items with
+// the open page in an active indicator on a computer (an item with sub-pages has a button with a caret that opens them
+// in a menu (ui/Menu.tsx), also on hover), and "Ring" as an icon button at the end; without the menu and its button when "Hovedmenu" is
+// turned off. Under it the bar of "Mobilmenu" (MobileNav.astro), when it is on. Under it, "Book en tid"
+// as an extended FAB at the bottom right of the screen (ui/Fab.tsx, m3.material.io/components/extended-fab), which shows only its
+// icon while the page scrolls down. Not on the booking page and the thank-you page; on a phone with a bar at the
+// bottom of the screen, the bar's first button is the FAB instead (global.css).
+import Icon from '@theme/components/Icon.astro';
+import MobileMenu from '@theme/components/MobileMenu.tsx';
+import Logo from '@theme/components/Logo.astro';
+import Container from '@theme/components/Container.astro';
+import MobileNav from '@theme/components/MobileNav.astro';
+import { topAppBarClass } from '@theme/ui/TopAppBar';
+import { menuClass, menuItemClass } from '@theme/ui/Menu';
+import { extendedFabClass } from '@theme/ui/Fab';
+import { site, nav, navShown } from '@morphemecms/cms/site/site';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+const current = Astro.url.pathname;
+const isActive = (href: string) => current === href || (href !== '/' && current.startsWith(href));
+const fab = !current.startsWith(site.bookingPath) && current !== '/tak/';
+---
+
+<header data-header class:list={[topAppBarClass, 'group/header sticky top-0 z-[43]']}>
+  <Container as="div" data-header-row class="flex h-16 items-center gap-1">
+    {navShown && (
+      <div class="-ml-2 mr-1 xl:hidden xl:group-data-crowded/header:block">
+        <MobileMenu
+          client:interact
+          items={nav}
+          current={current}
+          bookingPath={site.bookingPath}
+          phone={site.phone}
+          phoneHref={site.phoneHref}
+          name={site.name}
+          role={site.role}
+          book={site.labels.book}
+          call={site.labels.call}
+          texts={{
+            open: siteT.theme.openMenu,
+            close: siteT.theme.closeMenu,
+            menu: siteT.theme.mainMenu,
+            drawer: siteT.theme.mobileMenu,
+            subpages: nav.map((item) => siteT.theme.subpagesOf(item.label)),
+          }}
+        />
+      </div>
+    )}
+    <a href="/" class="md-top-app-bar-title mr-auto xl:shrink-0 xl:whitespace-nowrap">
+      <Logo />
+    </a>
+
+    {navShown && (
+      <nav aria-label={siteT.theme.mainMenu} class="hidden shrink-0 xl:block xl:group-data-crowded/header:hidden">
+        <ul class="flex items-center gap-1">
+          {nav.map((item, i) => (
+            <li class="group relative flex items-center" data-nav-item>
+              <a
+                href={item.href}
+                class:list={['md-nav-item', item.children && 'md-nav-item-parent']}
+                aria-current={isActive(item.href) ? 'page' : undefined}
+              >
+                {item.label}
+              </a>
+              {item.children && (
+                <button
+                  type="button"
+                  class="md-nav-toggle"
+                  aria-expanded="false"
+                  aria-controls={`menu-${i}`}
+                  aria-label={siteT.theme.subpagesOf(item.label)}
+                  data-nav-toggle
+                >
+                  <Icon name="caret-down" size={20} />
+                </button>
+              )}
+              {item.children && (
+                // A menu (m3.material.io/components/menus) that opens on hover and with the button before it.
+                <div
+                  id={`menu-${i}`}
+                  class:list={[
+                    'md-menu-anchor invisible absolute top-full pt-1 opacity-0 transition-opacity group-hover:visible group-hover:opacity-100 group-data-[open]:visible group-data-[open]:opacity-100',
+                    i >= nav.length - 2 ? 'right-0' : 'left-0',
+                  ]}
+                >
+                  <ul class={menuClass}>
+                    {item.children.map((child) => (
+                      <li>
+                        <a href={child.href} class={menuItemClass} aria-current={current === child.href ? 'page' : undefined}>
+                          {child.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </nav>
+    )}
+
+    <a
+      href={site.phoneHref}
+      class="icon-button icon-button-standard -mr-2 ml-1"
+      aria-label={`${site.labels.call} ${site.phone}`}
+      title={site.phone}
+    >
+      <Icon name="phone" size={24} />
+    </a>
+  </Container>
+  <MobileNav />
+</header>
+<script is:inline>
+  // When the menu items (set in the editor) don't fit on one line next to the logo, the header
+  // shows the menu button instead, as on smaller screens. Runs before the first paint.
+  {
+    const header = document.querySelector('[data-header]');
+    const row = header.querySelector('[data-header-row]');
+    const fit = () => {
+      header.removeAttribute('data-crowded');
+      header.toggleAttribute('data-crowded', row.scrollWidth > row.clientWidth);
+    };
+    fit();
+    if ('ResizeObserver' in window) {
+      const ro = new ResizeObserver(fit);
+      ro.observe(header);
+      const menu = row.querySelector('nav ul');
+      if (menu) ro.observe(menu);
+    }
+    document.fonts?.ready.then(fit);
+  }
+</script>
+<script>
+  // A menu's button opens and closes it (aria-expanded); Escape, a click outside it and focus leaving it close it.
+  const items = [...document.querySelectorAll<HTMLElement>('[data-nav-item]:has([data-nav-toggle])')];
+  const setOpen = (item: HTMLElement, open: boolean) => {
+    item.toggleAttribute('data-open', open);
+    item.querySelector('[data-nav-toggle]')?.setAttribute('aria-expanded', String(open));
+  };
+  for (const item of items) {
+    const toggle = item.querySelector<HTMLElement>('[data-nav-toggle]')!;
+    toggle.addEventListener('click', () => {
+      const open = !item.hasAttribute('data-open');
+      for (const other of items) if (other !== item) setOpen(other, false);
+      setOpen(item, open);
+    });
+    item.addEventListener('focusout', (e) => {
+      if (!item.contains(e.relatedTarget as Node | null)) setOpen(item, false);
+    });
+    item.addEventListener('keydown', (e) => {
+      if (e.key !== 'Escape' || !item.hasAttribute('data-open')) return;
+      setOpen(item, false);
+      toggle.focus();
+    });
+  }
+  document.addEventListener('click', (e) => {
+    for (const item of items) if (!item.contains(e.target as Node)) setOpen(item, false);
+  });
+</script>
+
+{fab && (
+  <a href={site.bookingPath} data-open="booking" data-fab class={extendedFabClass()}>
+    <Icon name="calendar-blank" size={24} />
+    <span class="extended-fab-label">{site.labels.book}</span>
+  </a>
+)}
+
+<script>
+  // The FAB shows only its icon while the page scrolls down, and its label again when it scrolls up or is at the top.
+  const fab = document.querySelector<HTMLElement>('[data-fab]');
+  if (fab) {
+    let last = scrollY;
+    addEventListener(
+      'scroll',
+      () => {
+        if (Math.abs(scrollY - last) < 8) return;
+        fab.toggleAttribute('data-collapsed', scrollY > last && scrollY > 64);
+        last = scrollY;
+      },
+      { passive: true },
+    );
+  }
+</script>

package/theme/components/Icon.astro

@@ -0,0 +1,16 @@
+---
+// An icon by its name, drawn by the same Svg as the blocks and the editor (@morphemecms/cms/src/icon): the theme's own
+// (icons/<name>.svg), else the icon pack in use's, else Phosphor's; one the site does not draw as the question mark
+// (MISSING), which check:screens finds on the built pages.
+import { Svg } from '@morphemecms/cms/src/icon';
+
+interface Props {
+  name: string;
+  size?: number;
+  class?: string;
+  label?: string;
+}
+const { name, size = 20, class: className = '', label } = Astro.props;
+---
+
+<Svg name={name} size={size} className={className} label={label} />

package/theme/components/Img.astro

@@ -0,0 +1,29 @@
+---
+// Responsive <img>: adds srcset + width/height from the image manifest so the browser
+// downloads a size that matches the screen. `sizes` describes the displayed width.
+import { responsive } from '@morphemecms/cms/site/images.mjs';
+
+interface Props {
+  src: string;
+  alt: string;
+  sizes: string;
+  class?: string;
+  loading?: 'lazy' | 'eager';
+  fetchpriority?: 'high' | 'low' | 'auto';
+}
+const { src, alt, sizes, class: className, loading = 'lazy', fetchpriority } = Astro.props;
+const { srcset, width, height } = responsive(src);
+---
+
+<img
+  src={src}
+  srcset={srcset}
+  sizes={srcset ? sizes : undefined}
+  width={width}
+  height={height}
+  alt={alt}
+  loading={fetchpriority === 'high' ? 'eager' : loading}
+  decoding="async"
+  fetchpriority={fetchpriority}
+  class={className}
+/>

package/theme/components/Img.tsx

@@ -0,0 +1,33 @@
+// A picture with the sizes the site made of it (pictureOf, packages/editor/site/images.mjs), so the browser downloads one that fits
+// the screen; in the editor the picture itself. `sizes` is the width it is shown in; a picture fetched first
+// (`fetchPriority` 'high') is not lazy.
+import type { Picture } from '@morphemecms/cms/src/standard/view';
+
+export default function Img({
+  image,
+  alt,
+  sizes,
+  className,
+  fetchPriority,
+}: {
+  image: Picture;
+  alt: string;
+  sizes: string;
+  className?: string;
+  fetchPriority?: 'high' | 'low' | 'auto';
+}) {
+  return (
+    <img
+      src={image.src}
+      srcSet={image.srcset}
+      sizes={image.srcset ? sizes : undefined}
+      width={image.width}
+      height={image.height}
+      alt={alt}
+      loading={fetchPriority === 'high' ? 'eager' : 'lazy'}
+      decoding="async"
+      fetchPriority={fetchPriority}
+      className={className}
+    />
+  );
+}

package/theme/components/Inline.astro

@@ -0,0 +1,11 @@
+---
+// A short text from the editor inside the component's own <p> (packages/editor/lib/inline.ts).
+import { inlineHtml } from '@morphemecms/cms/lib/inline';
+
+interface Props {
+  text: string;
+}
+const html = await inlineHtml(Astro.props.text ?? '');
+---
+
+<Fragment set:html={html} />

package/theme/components/Logo.astro

@@ -0,0 +1,23 @@
+---
+// The site's logo (public/logo.svg, "Tema" › "Logo og ikon") + its name and role ("Virksomheden"), in the theme's
+// variables (--theme-logo-*, styles/components.css).
+// The mark is a CSS mask over public/logo.svg, so it takes the theme's accent color
+// and the 20 KB file is downloaded once and cached.
+import LogoMark from '@theme/components/LogoMark.astro';
+import { site } from '@morphemecms/cms/site/site';
+
+interface Props {
+  size?: 'sm' | 'md';
+}
+const { size = 'md' } = Astro.props;
+---
+
+<span class="flex items-center gap-2.5">
+  <span class="theme-logo-tile">
+    <LogoMark class:list={['theme-logo-mark', size === 'sm' && 'theme-logo-mark-small']} />
+  </span>
+  <span class="leading-tight">
+    <span class="theme-logo-name block tracking-tight">{site.name}</span>
+    <span class="theme-logo-role type-body-small text-muted">{site.role}</span>
+  </span>
+</span>

package/theme/components/LogoMark.astro

@@ -0,0 +1,10 @@
+---
+// The site's logo (public/logo.svg) as a decorative mark. Size and colour come from the classes,
+// e.g. <LogoMark class="h-9 w-8 bg-accent" />.
+interface Props {
+  class?: string;
+}
+const { class: className = 'bg-accent' } = Astro.props;
+---
+
+<span class:list={['logo-mark shrink-0', className]} aria-hidden="true"></span>

package/theme/components/Markdown.astro

@@ -0,0 +1,17 @@
+---
+// A text the site's owner writes in Markdown (paragraphs, lists, links, quotes), in the same style as the
+// text on the pages. Rendered with Astro's Markdown pipeline, like the pages (GitHub-flavoured
+// Markdown, typographic quotes).
+import { createMarkdownProcessor } from '@astrojs/markdown-remark';
+
+interface Props {
+  body: string;
+  class?: string;
+}
+const { body, class: className } = Astro.props;
+
+const processor = await createMarkdownProcessor();
+const html = (await processor.render(body ?? '')).code;
+---
+
+<div class:list={['prose max-w-[62ch]', className]} set:html={html} />