@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/components/Section.astro

@@ -0,0 +1,29 @@
+---
+// A front-page section: container, spacing above, reveal on scroll and an optional heading + intro.
+import Container from '@theme/components/Container.astro';
+import SectionHeading from '@theme/components/SectionHeading';
+import Inline from '@theme/components/Inline.astro';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  class?: string;
+  /** Id for the heading; the section is then labelled by it (aria-labelledby). */
+  id?: string;
+}
+const { title, intro, class: className, id } = Astro.props;
+---
+
+<Container
+  class:list={['pt-(--theme-section-space) md:pt-(--theme-section-space-large)', className]}
+  aria-labelledby={title && id ? id : undefined}
+  data-reveal
+>
+  {title && <SectionHeading id={id} text={title} />}
+  {intro && (
+    <p class="type-body-large mt-3 max-w-[52ch] text-muted">
+      <Inline text={intro} />
+    </p>
+  )}
+  <slot />
+</Container>

package/theme/components/SectionHeading.tsx

@@ -0,0 +1,8 @@
+// The h2 used for every front-page section. `text`: its text.
+export default function SectionHeading({ text, id, className }: { text: string; id?: string; className?: string }) {
+  return (
+    <h2 id={id} className={['type-headline-large md:type-display-medium', className].filter(Boolean).join(' ')}>
+      {text}
+    </h2>
+  );
+}

package/theme/components/TextSection.astro

@@ -0,0 +1,16 @@
+---
+// A text on the blog page or the 404 page (packages/editor/site/standardPages.ts): an optional heading and Markdown.
+import PageSection from '@theme/components/PageSection.astro';
+import Markdown from '@theme/components/Markdown.astro';
+
+interface Props {
+  heading?: string;
+  body: string;
+  class?: string;
+}
+const { heading, body, class: className } = Astro.props;
+---
+
+<PageSection title={heading} class={className}>
+  <Markdown body={body} class={heading && 'mt-6'} />
+</PageSection>

package/theme/components/home/PageBlock.astro

@@ -0,0 +1,19 @@
+---
+// A block a page can have, as a section of the front page (`pageBlocks` in packages/editor/defaults/collections.ts): the standard
+// one's or the app's (Block.astro, by its type), in the front page's width and space, with its shared texts.
+import Block from '@morphemecms/cms/src/standard/Block.astro';
+import Section from '@theme/components/Section.astro';
+import { blockTexts } from '@morphemecms/cms/site/site';
+
+interface Props {
+  section: { type: string; hidden?: boolean } & Record<string, unknown>;
+  class?: string;
+}
+const { type, hidden, ...props } = Astro.props.section;
+---
+
+<Section class={Astro.props.class}>
+  <div class="block-place">
+    <Block type={type} props={props} texts={blockTexts[type]} />
+  </div>
+</Section>

package/theme/components/home/Text.astro

@@ -0,0 +1,13 @@
+---
+// A text the site's owner writes: an optional heading and Markdown.
+import Section from '@theme/components/Section.astro';
+import Markdown from '@theme/components/Markdown.astro';
+import type { HomeSection } from '@morphemecms/cms/site/home';
+
+type Props = Extract<HomeSection, { type: 'text' }> & { class?: string };
+const { heading, body, class: className } = Astro.props;
+---
+
+<Section title={heading} class={className}>
+  <Markdown body={body} class={heading && 'mt-6'} />
+</Section>

package/theme/components/loadPopup.ts

@@ -0,0 +1,22 @@
+// A pop-up's box on the site (PopupView.tsx): its picture with the sizes the site has made of it, and its button
+// (PopupButton.tsx) with the site's targets and pages.
+import { loadButtons } from '@morphemecms/cms/src/standard/buttons/load';
+import { pictureOf } from '@morphemecms/cms/src/standard/load';
+import type { Popup } from '@morphemecms/cms/site/popups';
+import type { PopupBoxView } from '@theme/components/PopupView';
+import type { PopupButtonView } from '@theme/components/PopupButton';
+
+async function buttonOf(button: Popup['button']): Promise<PopupButtonView | undefined> {
+  if (!button) return undefined;
+  if (button.to === 'file') return button.href ? { file: { href: button.href, label: button.label?.trim() || 'Download PDF' } } : undefined;
+  const icon = button.to === 'phone' ? 'phone' : 'arrow-right';
+  return { buttons: await loadButtons([{ to: button.to, label: button.label, href: button.href, kind: 'filled', icon }]) };
+}
+
+export const loadPopup = async (p: Popup): Promise<PopupBoxView> => ({
+  slug: p.slug,
+  image: p.image ? pictureOf(p.image) : undefined,
+  heading: p.heading,
+  text: p.text,
+  button: await buttonOf(p.button),
+});

package/theme/components/loadPosts.ts

@@ -0,0 +1,16 @@
+// A blog post on the site, as BlogPosts.tsx, PostList.tsx and PostMeta.tsx draw it (posts.ts), with its picture's sizes.
+import { pictureOf } from '@morphemecms/cms/src/standard/load';
+import { postPath, type Post } from '@morphemecms/cms/site/content';
+import { formatDate, readingMinutes } from '@morphemecms/cms/site/format';
+import type { PostView } from '@theme/components/posts';
+
+export const postViewOf = (post: Post): PostView => ({
+  href: postPath(post),
+  title: post.data.title,
+  description: post.data.description,
+  image: post.data.image ? pictureOf(post.data.image) : undefined,
+  imageAlt: post.data.imageDecorative ? undefined : post.data.imageAlt,
+  date: post.data.date.toISOString(),
+  dateText: formatDate(post.data.date),
+  minutes: readingMinutes(post.body),
+});

package/theme/components/posts.ts

@@ -0,0 +1,15 @@
+// A blog post as BlogPosts.tsx, PostList.tsx and PostMeta.tsx draw it: its page, title, description, picture, date
+// (ISO, and as Danish text) and reading time. On the site: postViewOf (loadPosts.ts); the standard block
+// "Blogindlæg" from its view (blocks/posts/View.tsx).
+import type { Picture } from '@morphemecms/cms/src/standard/view';
+
+export type PostView = {
+  href: string;
+  title: string;
+  description?: string;
+  image?: Picture;
+  imageAlt?: string;
+  date: string;
+  dateText: string;
+  minutes: number;
+};

package/theme/editor/looks.mjs

@@ -0,0 +1,7 @@
+// How the sections of the front page look on the site, so the editor shows them so too (looksOf in
+// packages/editor/src/sections.mjs, editor.css): by file and section type, the looks of a section's heading and the
+// text under it. The standard theme has none of its own: a heading looks like the page's other headings.
+export const LOOKS = {};
+
+// The look of the other headings of the front page, when not 'page-section'.
+export const HEADINGS = {};

package/theme/editor/previews.tsx

@@ -0,0 +1,56 @@
+// The standard pages' sections in the editor as they look on the site, where the theme draws a block its own way there
+// (by `<file>#<key>`: 'src/data/standard-pages.json#front' …, the same React components as on the site; the theme's
+// CSS is the editor's, @theme/styles/global.css), with what is in it now; the standard theme draws every block as the
+// block (preview() in packages/editor/src/registry.tsx). Also what another theme's previews.tsx can take from here
+// (Texts, contactOf, Text …). Links and buttons are only drawn
+// (Link, InEditor): the card around a preview is the button that opens the block's menu (MarkdownEditor.tsx).
+import { createContext, useContext, type ReactNode } from 'react';
+import type { BlockData, BlockProps, DrawBlock } from '@morphemecms/cms/src/blocks';
+import type { SiteData } from '@site/sitedata';
+
+export const cx = (...names: unknown[]) => names.filter(Boolean).join(' ');
+export type Props = BlockProps & Record<string, any>;
+export type Contact = BlockData['site']['contact'];
+
+// The texts every copy of a block has, and the labels of the buttons, as the editor has them now
+// (BlockData's site, sitedata.ts); preview() gives them to the blocks it draws.
+export const Texts = createContext<Pick<SiteData, 'labels' | 'blocks'> | null>(null);
+export const useTexts = () => useContext(Texts)!;
+
+// The phone, e-mail and address, as saved under "Virksomheden".
+export const contactOf = (data: BlockData): Contact => data.site.contact;
+
+// Markdown as plain paragraphs, for a text that is not edited here (a hidden section, Om mig).
+export const plainParagraphs = (markdown: string) =>
+  markdown
+    .split(/\n\s*\n/)
+    .map((p) =>
+      p
+        .replace(/^#+\s*/, '')
+        .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+        .replace(/<[^>]+>/g, '')
+        .replace(/[*_`>]/g, '')
+        .trim(),
+    )
+    .filter(Boolean);
+
+// A text that is not edited here, in the page's text style: a hidden section of text.
+export const Text = ({ heading, body }: { heading?: string; body: string }) => (
+  <div className="prose max-w-none">
+    {heading && <h2>{heading}</h2>}
+    {plainParagraphs(body).map((p, i) => (
+      <p key={i}>{p}</p>
+    ))}
+  </div>
+);
+
+export type Preview = (props: Props, data: BlockData, block: DrawBlock) => ReactNode;
+
+// What every standard page draws its own way: a text (only on a page with sections in their own fields). A section of
+// a block's type is drawn by that block, and the prices by the block "Priser" (`block`, as the site's Block.astro).
+export const everyFixedPage: Record<string, Preview> = {
+  text: (props) => <Text heading={props.heading} body={String(props.body ?? '')} />,
+};
+
+export const fixedPages: Record<string, Record<string, Preview>> = {};

package/theme/layouts/Base.astro

@@ -0,0 +1,273 @@
+---
+import '@theme/styles/global.css';
+import Header from '@theme/components/Header.astro';
+import Footer from '@theme/components/Footer.astro';
+import CookieConsent from '@theme/components/CookieConsent.astro';
+import Popup from '@theme/components/Popup.astro';
+import ActionBar from '@theme/components/ActionBar.astro';
+import AppSlot from '@theme/components/AppSlot.astro';
+// The theme's own font files, loaded before the CSS asks for them (FontPreload.astro).
+import FontPreload from '@theme/components/FontPreload.astro';
+// The site's colours, which the owner changes under "Farver" in the editor (the theme's styles/global.css uses them),
+// as the apps installed change them for the page (packages/editor/site/pageColors.ts: an app's hooks/page-colors.ts).
+import { pageColors } from '@morphemecms/cms/site/pageColors';
+import { colorsCss } from '@morphemecms/cms/lib/colors';
+// How the site moves (Material 3's motion schemes), which the owner chooses under "Bevægelse" in the editor: its springs
+// as the CSS variables every transition takes, and its name on <html> for the scripts (packages/editor/lib/motion.ts).
+import { motionCss } from '@morphemecms/cms/lib/motion';
+import { motionScheme } from '@morphemecms/cms/site/motion';
+import { site } from '@morphemecms/cms/site/site';
+import { business, businessRef, person, website, webPage, type Crumb, type Question } from '@morphemecms/cms/site/schema';
+import { seo } from '@morphemecms/cms/site/seo';
+import { cookieBanner } from '../../site/consent';
+import { shareImage } from '@morphemecms/cms/site/images.mjs';
+import { isNoindex } from '@morphemecms/cms/site/noindex.mjs';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  title: string;
+  description?: string;
+  /** Google title and description from the page's front matter (pages and blog posts). */
+  seoTitle?: string;
+  seoDescription?: string;
+  /** The address of the page Google should count as the original (rel=canonical), from the front matter;
+   * else this page itself. */
+  canonical?: string;
+  /** The page's picture: shown when the page is shared, and in the structured data. */
+  image?: string;
+  /** The pictures on the page, in the order they are on it (a blog post's own first, then the real pictures in
+   * its text and blocks, picturesOf), for an app that changes the page's colours (pageColors), with the one it is
+   * shared with after them. */
+  pictures?: (string | undefined)[];
+  /** What `image` shows (og:image:alt). */
+  imageAlt?: string;
+  /** The picture to show when the page is shared, when it is another than `image`. */
+  shareImage?: string;
+  /** The title and description when the page is shared (og:), when they are others than the Google ones. */
+  shareTitle?: string;
+  shareDescription?: string;
+  type?: 'website' | 'article';
+  /** A blog post's date and last edit (article:published_time and article:modified_time). */
+  published?: Date;
+  modified?: Date;
+  noindex?: boolean;
+  /** Breadcrumbs between the front page and this page, for the structured data. */
+  crumbs?: Crumb[];
+  /** The questions and answers on the page, which make it an FAQPage in the structured data. */
+  questions?: Question[];
+  /** More structured data for this page (a blog post, prices). */
+  schema?: Record<string, unknown>[];
+}
+const { title, image, type = 'website', crumbs, questions, schema = [] } = Astro.props;
+// <title> and meta description: the page's own SEO fields (front matter of pages and blog posts),
+// else packages/editor/site/seo.ts (the pages built in code), else the title and description props.
+const entry = seo[Astro.url.pathname];
+const noindex = Astro.props.noindex || entry?.noindex || isNoindex(Astro.url.pathname);
+// `||`, not `??`: an empty field (the content schemas default to '') falls through to the next.
+const fullTitle = Astro.props.seoTitle || entry?.title || (Astro.url.pathname === '/' ? title : `${title} | ${site.name}`);
+const description = Astro.props.seoDescription || entry?.description || Astro.props.description || site.description;
+// When the page is shared: its own title and description for that ("Titel ved deling", "Beskrivelse ved deling"), else
+// the Google ones.
+const ogTitle = Astro.props.shareTitle || fullTitle;
+const ogDescription = Astro.props.shareDescription || description;
+const canonical = new URL(Astro.props.canonical || entry?.canonical || Astro.url.pathname, Astro.site);
+// The picture when the page is shared: the one chosen for that ("Billede ved deling" on the page or in
+// packages/editor/site/seo.ts), else the page's own, else the site's portrait; none when the site has none either.
+const chosen = Astro.props.shareImage || entry?.image;
+const shared = chosen || image || site.portrait;
+const og = shared ? shareImage(shared) : null;
+const ogImage = og && new URL(og.src, Astro.site);
+// What it shows, when that is known (not for a picture chosen only for sharing).
+const ogAlt = chosen ? undefined : image ? Astro.props.imageAlt : site.portraitAlt;
+const current = Astro.url.pathname;
+// The page's colours: the site's, as the apps installed change them for it, given its pictures, in order, then the one
+// it is shared with ("Billede ved deling"); with the app that changed them and the picture they came from, kept on their
+// <style> for "Farver" › "Sider" in the editor (packages/editor/scripts/page-colors.mjs).
+const {
+  colors,
+  app: colorsApp,
+  picture: colorsPicture,
+} = await pageColors({ path: Astro.url.pathname, pictures: [...(Astro.props.pictures ?? []), chosen] });
+// The cookie banner (and "Cookieindstillinger"): when it is on and there is something to ask about (packages/editor/site/consent.ts).
+const banner = cookieBanner;
+
+// Structured data (packages/editor/site/schema.ts): the business, the person behind it, the website, this page and what the page adds.
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    // The business in full on the front page and the contact page, a reference elsewhere.
+    current === '/' || current === site.contactPath ? business : businessRef,
+    ...(person ? [person] : []),
+    website,
+    ...webPage({ path: current, title: fullTitle, name: title, description, image, crumbs, questions }),
+    ...schema,
+  ],
+};
+---
+
+<!doctype html>
+<html lang={site.locale.split('-')[0]} data-motion-scheme={motionScheme}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>{fullTitle}</title>
+    <meta name="description" content={description} />
+    {!noindex && <link rel="canonical" href={canonical} />}
+    {noindex && <meta name="robots" content="noindex" />}
+    <meta property="og:type" content={type} />
+    <meta property="og:title" content={ogTitle} />
+    <meta property="og:description" content={ogDescription} />
+    {!noindex && <meta property="og:url" content={canonical} />}
+    {ogImage && <meta property="og:image" content={ogImage} />}
+    {og?.type && <meta property="og:image:type" content={og.type} />}
+    {og?.width && <meta property="og:image:width" content={String(og.width)} />}
+    {og?.height && <meta property="og:image:height" content={String(og.height)} />}
+    {ogAlt && <meta property="og:image:alt" content={ogAlt} />}
+    <meta property="og:site_name" content={site.name} />
+    <meta property="og:locale" content={site.locale.replace('-', '_')} />
+    {Astro.props.published && <meta property="article:published_time" content={Astro.props.published.toISOString()} />}
+    {Astro.props.modified && <meta property="article:modified_time" content={Astro.props.modified.toISOString()} />}
+    <meta name="twitter:card" content={ogImage ? 'summary_large_image' : 'summary'} />
+    {ogAlt && <meta name="twitter:image:alt" content={ogAlt} />}
+    <FontPreload />
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="alternate" type="application/rss+xml" title={`${site.name} blog`} href="/rss.xml" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <meta name="theme-color" content={colors.light.bg} media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content={colors.dark.bg} media="(prefers-color-scheme: dark)" />
+    <style is:inline data-page-colors data-app={colorsApp} data-picture={colorsPicture} set:html={colorsCss(colors)}></style>
+    <style is:inline data-motion-springs set:html={motionCss(motionScheme)}></style>
+    {!noindex && <script type="application/ld+json" set:html={JSON.stringify(jsonLd).replace(/</g, '\\u003c')} />}
+    <script is:inline>
+      document.documentElement.classList.add('js');
+      try {
+        const t = localStorage.getItem('theme');
+        if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
+      } catch {}
+      // Safety net: never leave content hidden if the motion script fails to load. When it has loaded
+      // (the theme's scripts/motion.ts sets data-motion), the sections not yet scrolled to wait for it.
+      setTimeout(
+        () =>
+          !document.documentElement.dataset.motion &&
+          document.querySelectorAll('[data-reveal]').forEach((el) => {
+            if (getComputedStyle(el).opacity === '0' && !el.getAnimations().length) el.style.opacity = '1';
+          }),
+        4000,
+      );
+    </script>
+    <slot name="head" />
+    <AppSlot name="head" />
+  </head>
+  <body class="flex min-h-dvh flex-col">
+    <a
+      href="#hovedindhold"
+      class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-full focus:bg-accent focus:px-4 focus:py-2 focus:text-on-accent"
+    >
+      {siteT.theme.skipToContent}
+    </a>
+
+    <Header />
+
+    <main id="hovedindhold" class="flex-1">
+      <slot />
+    </main>
+
+    {banner && <CookieConsent />}
+    {/* The pop-ups for this page ("Promovering" in the editor). */}
+    <Popup />
+
+    {
+      /* A blog post's related posts, in the footer instead of the practical links. */
+      Astro.slots.has('footer-column') ? (
+        <Footer>
+          <slot name="footer-column" slot="footer-column" />
+        </Footer>
+      ) : (
+        <Footer />
+      )
+    }
+
+    <style is:global>
+      :root .light-hide {
+        display: none;
+      }
+      :root[data-theme='dark'] .light-hide {
+        display: inline-block;
+      }
+      :root[data-theme='dark'] .dark-hide {
+        display: none;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root:not([data-theme='light']) .light-hide {
+          display: inline-block;
+        }
+        :root:not([data-theme='light']) .dark-hide {
+          display: none;
+        }
+      }
+    </style>
+
+    <script>
+      // What the blocks do in a browser (script.ts in the theme's blocks/<type>/).
+      import { blockScripts } from '../../site/blockScripts';
+      Object.values(blockScripts).forEach((run) => run());
+    </script>
+
+    <script>
+      import '@theme/scripts/motion';
+
+      // Theme toggle: flips between light and dark and remembers the choice.
+      document.querySelectorAll('[data-theme-toggle]').forEach((btn) =>
+        btn.addEventListener('click', () => {
+          const root = document.documentElement;
+          const isDark = root.dataset.theme === 'dark' || (!root.dataset.theme && matchMedia('(prefers-color-scheme: dark)').matches);
+          const next = isDark ? 'light' : 'dark';
+          root.dataset.theme = next;
+          try {
+            localStorage.setItem('theme', next);
+          } catch {}
+        }),
+      );
+
+      // Videos from YouTube and Vimeo in the text (packages/editor/lib/video.mjs): the video loads only when it is played.
+      document.querySelectorAll<HTMLAnchorElement>('a[data-video]').forEach((link) =>
+        link.addEventListener('click', (e) => {
+          if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+          e.preventDefault();
+          const frame = document.createElement('iframe');
+          frame.src = link.dataset.video!;
+          frame.title = link.dataset.title ?? '';
+          frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';
+          frame.allowFullscreen = true;
+          frame.referrerPolicy = 'strict-origin-when-cross-origin';
+          link.replaceWith(frame);
+          frame.focus();
+        }),
+      );
+
+      // Header: a shadow once the page scrolls under it.
+      const header = document.querySelector<HTMLElement>('[data-header]');
+      if (header) {
+        const update = () => header.toggleAttribute('data-stuck', scrollY > 4);
+        addEventListener('scroll', update, { passive: true });
+        update();
+      }
+
+      // The bar at the bottom of a phone's screen (a promotion, ActionBar.astro, or an app's): on pages with
+      // buttons at the top, hide it only while those are (almost) fully on screen. A sliver of them
+      // peeking in at the bottom still shows the bar.
+      const bar = document.querySelector<HTMLElement>('[data-action-bar]');
+      const heroCta = document.querySelector('[data-hero-cta]');
+      if (bar && heroCta && 'IntersectionObserver' in window) {
+        new IntersectionObserver(([e]) => bar.toggleAttribute('data-hidden', e.intersectionRatio >= 0.95), {
+          threshold: [0, 0.95],
+        }).observe(heroCta);
+      }
+    </script>
+    {/* The bars at the bottom of a phone's screen, before the apps' (only the first one is shown). */}
+    <ActionBar />
+    <AppSlot name="body-end" />
+  </body>
+</html>

package/theme/layouts/PageLayout.astro

@@ -0,0 +1,126 @@
+---
+// A page (the standard theme's): back link, title and the text with its blocks (its pictures in it), in one column, and the booking
+// prompt across the page when the text ends with it. A wide page (`wide`, "Hele bredden"): its blocks go across the
+// page, its text keeps a readable width, and its first paragraph is the introduction under the heading (as
+// PageHeader.astro's).
+// data-editor marks what the editor's preview fills in with what is in its form ("Forhåndsvis",
+// packages/editor/src/pagePreview.tsx): the heading, the text, and the booking prompt at the end.
+import Base from '@theme/layouts/Base.astro';
+import Icon from '@theme/components/Icon.astro';
+import EndBlock from '@theme/components/EndBlock.astro';
+import { endBlock } from '@morphemecms/cms/src/standard/views';
+import { getPages, pageHeading, pageHeadingHtml, parentPage, stateOf, withoutH1, type Page } from '@morphemecms/cms/site/content';
+import { nav } from '@morphemecms/cms/site/site';
+import { firstPicture, picturesOf } from '@morphemecms/cms/site/images.mjs';
+import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
+import { markdownHtml } from '@morphemecms/cms/lib/inline';
+import Container from '@theme/components/Container.astro';
+import RichText from '@theme/components/RichText.astro';
+import Snackbar from '@theme/ui/Snackbar';
+import { isPreview, livePath, PREVIEW, previewId } from '@morphemecms/cms/site/noindex.mjs';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  page: Page;
+}
+const { page } = Astro.props;
+const all = await getPages();
+const parentEntry = parentPage(page, all);
+// The parent can also be a bespoke page (e.g. /kontakt/), which is not in the collection.
+const parentPath = page.data.path.replace(/[^/]+\/$/, '');
+const parentNav = nav.find((n) => n.href === parentPath);
+const parent = parentEntry
+  ? { href: parentEntry.data.path, title: pageHeading(parentEntry) }
+  : parentNav
+    ? { href: parentNav.href, title: parentNav.label }
+    : undefined;
+const { description, path, wide } = page.data;
+const heading = pageHeading(page);
+// With its colours, when a word in it has one.
+const headingHtml = pageHeadingHtml(page);
+// The picture when the page is shared: the first in its text (a page's pictures are all in its text).
+const picture = firstPicture(page.body);
+// The text with its blocks (RichText.astro). A block at the very end of it whose type goes across the page (endBlock,
+// e.g. "Book en tid", as on most pages) is shown across the page below the text and the column next to it; not when
+// it is hidden (RichText.astro leaves hidden blocks out).
+// Without the H1 at the top of the text (the page's heading, drawn above).
+const html = withoutH1(await Astro.slots.render('default'));
+const end = endBlock(html);
+// The questions in the text's "Spørgsmål og svar" blocks (not the hidden ones), for the structured data
+// (an FAQPage, packages/editor/site/schema.ts); the answers as HTML, as on the page (the block's load.ts).
+const questions = await Promise.all(
+  splitBlocks(html, ['faq'])
+    .flatMap((b) => (b.type === 'faq' ? ((b.props.items ?? []) as { question?: string; answer?: string }[]) : []))
+    .filter((q) => q.question?.trim() && q.answer?.trim())
+    .map(async (q) => ({ question: q.question!.trim(), answer: await markdownHtml(q.answer!) })),
+);
+// A new version of a page (/ny/…, packages/editor/site/noindex.mjs): a message at the bottom when the page opens
+// (the theme's Snackbar, shown by ui/snackbar.script.ts with time to read the links) links to the current
+// page and to the page's row on /ny/, where what the owner should look at stands; its blocks see it as the
+// current page.
+const preview = isPreview(path);
+const current = livePath(path);
+const review = (page.data.review ?? '').trim();
+---
+
+<Base
+  title={heading}
+  description={description}
+  seoTitle={page.data.seoTitle}
+  seoDescription={page.data.seoDescription}
+  canonical={page.data.canonical}
+  noindex={stateOf(page.data) === 'unlisted' || page.data.noindex}
+  image={picture?.src}
+  imageAlt={picture?.alt}
+  pictures={picturesOf(page.body)}
+  shareImage={page.data.shareImage}
+  shareTitle={page.data.shareTitle}
+  shareDescription={page.data.shareDescription}
+  crumbs={parent ? [{ name: parent.title, href: parent.href }] : []}
+  questions={questions}
+>
+  <article>
+    <Container as="header" class="pt-8 md:pt-14">
+      {parent && (
+        <a href={parent.href} class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
+          <Icon name="arrow-left" size={16} />
+          {parent.title}
+        </a>
+      )}
+      <h1 data-editor="heading" class="theme-title mt-3 max-w-[22ch]">
+        {headingHtml ? <Fragment set:html={headingHtml} /> : heading}
+      </h1>
+    </Container>
+
+    <Container as="div" class:list={[wide ? 'mt-4' : 'mt-8 md:mt-12']}>
+      <div>
+        <div
+          data-editor="text"
+          class:list={[
+            'prose',
+            wide
+              ? 'max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:max-w-[52ch] [&>p:first-child]:type-body-large [&>p:first-child]:text-muted md:[&>p:first-child]:type-title-large'
+              : 'max-w-[66ch]',
+          ]}
+        >
+          <RichText html={end ? end.html : html} path={current} preview={preview} />
+        </div>
+      </div>
+    </Container>
+  </article>
+
+  {end && <EndBlock type={end.type} props={end.props} data-editor="end" data-editor-block={end.type} />}
+  {preview && (
+    <template data-snackbar data-ms="8000">
+      <Snackbar
+        text={siteT.theme.reviewNotice}
+        links={[
+          { text: siteT.theme.seeCurrentPage, href: current },
+          review
+            ? { text: siteT.theme.seeChanges, href: `${PREVIEW}#${previewId(path)}` }
+            : { text: siteT.theme.allNewPages, href: PREVIEW },
+        ]}
+      />
+    </template>
+  )}
+</Base>