@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/components/Header.astro

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

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

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

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

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

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

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