@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/components/BookButton.tsx

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

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

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

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

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

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