@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/layouts/PageLayout.astro

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

package/theme/layouts/PostLayout.astro

@@ -1,137 +1,137 @@
----
-// Blog post template. A narrow reading column, the site's owner as author; related posts in the footer.
-// 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 picture and the text.
-import { firstImage, heroImage, picturesOf } from '@morphemecms/cms/site/images.mjs';
-import Base from '@theme/layouts/Base.astro';
-import Icon from '@theme/components/Icon.astro';
-import Img from '@theme/components/Img.astro';
-import EndBlock from '@theme/components/EndBlock.astro';
-import { categoryName, getPosts, postPath, stateOf, type Post } from '@morphemecms/cms/site/content';
-import PostMeta from '@theme/components/PostMeta';
-import Chip from '@theme/ui/Chip';
-import { postViewOf } from '@theme/components/loadPosts';
-import { site } from '@morphemecms/cms/site/site';
-import { isBlogCategory } from '@morphemecms/cms/site/categories';
-import { blogPosting } from '@morphemecms/cms/site/schema';
-import { siteT } from '@morphemecms/cms/src/i18n';
-
-interface Props {
-  post: Post;
-}
-const { post } = Astro.props;
-const { title, description, date, updated, categories } = post.data;
-// A decorative picture (imageDecorative) has no alternative text.
-const imageAlt = post.data.imageDecorative ? undefined : post.data.imageAlt;
-// The pills under the post: only the blog categories (the others have no page).
-const onBlog = categories.filter(isBlogCategory);
-// Some posts also have their featured image (or another version of it) inside the text; never show it twice.
-const image = heroImage(post.data.image, post.body);
-
-// Related: most shared categories first, then newest.
-const related = (await getPosts())
-  .filter((p) => p.id !== post.id)
-  .map((p) => ({ p, score: p.data.categories.filter((c) => categories.includes(c)).length }))
-  .filter(({ score }) => score > 0)
-  .sort((a, b) => b.score - a.score || b.p.data.date.valueOf() - a.p.data.date.valueOf())
-  .slice(0, 3)
-  .map(({ p }) => p);
----
-
-<Base
-  title={title}
-  description={description}
-  seoTitle={post.data.seoTitle}
-  seoDescription={post.data.seoDescription}
-  canonical={post.data.canonical}
-  image={post.data.image || firstImage(post.body)}
-  pictures={[post.data.image, ...picturesOf(post.body)]}
-  imageAlt={post.data.image ? imageAlt : undefined}
-  shareImage={post.data.shareImage}
-  shareTitle={post.data.shareTitle}
-  shareDescription={post.data.shareDescription}
-  type="article"
-  published={date}
-  modified={updated}
-  noindex={stateOf(post.data) === 'unlisted' || post.data.noindex}
-  crumbs={[{ name: siteT.theme.blog, href: '/blog/' }]}
-  schema={[
-    blogPosting({
-      path: postPath(post),
-      title,
-      description,
-      date,
-      updated,
-      image: post.data.image,
-      categories: categories.map(categoryName),
-    }),
-  ]}
->
-  <article>
-    <header class="mx-auto max-w-3xl px-5 pt-8 md:px-8 md:pt-14">
-      <a href="/blog/" class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
-        <Icon name="arrow-left" size={16} /> {siteT.theme.blog}
-      </a>
-      <h1 data-editor="heading" class="theme-title mt-3">
-        {title}
-      </h1>
-      <div class="mt-6 flex items-center gap-3">
-        {site.portrait && (
-          <Img src={site.portrait} alt="" loading="eager" class="size-11 rounded-full object-cover object-[50%_20%]" sizes="44px" />
-        )}
-        <div class="leading-snug">
-          <span class="block font-medium">{site.name}</span>
-          <PostMeta post={postViewOf(post)} />
-        </div>
-      </div>
-    </header>
-
-    {image && (
-      <div data-editor="image" class="mx-auto mt-8 max-w-5xl px-5 md:mt-12 md:px-8">
-        <Img
-          src={image}
-          alt={imageAlt ?? ''}
-          fetchpriority="high"
-          class="aspect-[16/10] w-full rounded-(--theme-picture-radius) object-cover md:aspect-[16/9]"
-          sizes="(min-width: 1024px) 960px, calc(100vw - 40px)"
-        />
-      </div>
-    )}
-
-    <div data-editor="text" class="prose mx-auto mt-10 max-w-3xl px-5 md:mt-14 md:px-8">
-      <slot />
-    </div>
-
-    <footer class="mx-auto mt-12 max-w-3xl px-5 md:px-8">
-      {onBlog.length > 0 && (
-        <ul class="flex flex-wrap gap-2" aria-label="Tags">
-          {onBlog.map((c) => (
-            <li>
-              <Chip href={`/blog/kategori/${c}/`} label={categoryName(c)} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </footer>
-  </article>
-
-  {site.postEnd && <EndBlock type={site.postEnd} />}
-
-  {related.length > 0 && (
-    <Fragment slot="footer-column">
-      <p class="footer-heading font-medium">{siteT.theme.relatedPosts}</p>
-      <ul class="mt-3 space-y-2.5 text-muted">
-        {related.map((p) => (
-          <li>
-            <a href={postPath(p)} class="hover:text-accent">
-              {p.data.title}
-            </a>
-          </li>
-        ))}
-      </ul>
-      <a href="/blog/" class="mt-4 inline-flex items-center gap-1.5 font-medium text-accent">
-        {siteT.theme.seeAll} <Icon name="arrow-right" size={16} />
-      </a>
-    </Fragment>
-  )}
-</Base>
+---
+// Blog post template. A narrow reading column, the site's owner as author; related posts in the footer.
+// 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 picture and the text.
+import { firstImage, heroImage, picturesOf } from '@morphemecms/cms/site/images.mjs';
+import Base from '@theme/layouts/Base.astro';
+import Icon from '@theme/components/Icon.astro';
+import Img from '@theme/components/Img.astro';
+import EndBlock from '@theme/components/EndBlock.astro';
+import { categoryName, getPosts, postPath, stateOf, type Post } from '@morphemecms/cms/site/content';
+import PostMeta from '@theme/components/PostMeta';
+import Chip from '@theme/ui/Chip';
+import { postViewOf } from '@theme/components/loadPosts';
+import { site } from '@morphemecms/cms/site/site';
+import { isBlogCategory } from '@morphemecms/cms/site/categories';
+import { blogPosting } from '@morphemecms/cms/site/schema';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  post: Post;
+}
+const { post } = Astro.props;
+const { title, description, date, updated, categories } = post.data;
+// A decorative picture (imageDecorative) has no alternative text.
+const imageAlt = post.data.imageDecorative ? undefined : post.data.imageAlt;
+// The pills under the post: only the blog categories (the others have no page).
+const onBlog = categories.filter(isBlogCategory);
+// Some posts also have their featured image (or another version of it) inside the text; never show it twice.
+const image = heroImage(post.data.image, post.body);
+
+// Related: most shared categories first, then newest.
+const related = (await getPosts())
+  .filter((p) => p.id !== post.id)
+  .map((p) => ({ p, score: p.data.categories.filter((c) => categories.includes(c)).length }))
+  .filter(({ score }) => score > 0)
+  .sort((a, b) => b.score - a.score || b.p.data.date.valueOf() - a.p.data.date.valueOf())
+  .slice(0, 3)
+  .map(({ p }) => p);
+---
+
+<Base
+  title={title}
+  description={description}
+  seoTitle={post.data.seoTitle}
+  seoDescription={post.data.seoDescription}
+  canonical={post.data.canonical}
+  image={post.data.image || firstImage(post.body)}
+  pictures={[post.data.image, ...picturesOf(post.body)]}
+  imageAlt={post.data.image ? imageAlt : undefined}
+  shareImage={post.data.shareImage}
+  shareTitle={post.data.shareTitle}
+  shareDescription={post.data.shareDescription}
+  type="article"
+  published={date}
+  modified={updated}
+  noindex={stateOf(post.data) === 'unlisted' || post.data.noindex}
+  crumbs={[{ name: siteT.theme.blog, href: '/blog/' }]}
+  schema={[
+    blogPosting({
+      path: postPath(post),
+      title,
+      description,
+      date,
+      updated,
+      image: post.data.image,
+      categories: categories.map(categoryName),
+    }),
+  ]}
+>
+  <article>
+    <header class="mx-auto max-w-3xl px-5 pt-8 md:px-8 md:pt-14">
+      <a href="/blog/" class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
+        <Icon name="arrow-left" size={16} /> {siteT.theme.blog}
+      </a>
+      <h1 data-editor="heading" class="theme-title mt-3">
+        {title}
+      </h1>
+      <div class="mt-6 flex items-center gap-3">
+        {site.portrait && (
+          <Img src={site.portrait} alt="" loading="eager" class="size-11 rounded-full object-cover object-[50%_20%]" sizes="44px" />
+        )}
+        <div class="leading-snug">
+          <span class="block font-medium">{site.name}</span>
+          <PostMeta post={postViewOf(post)} />
+        </div>
+      </div>
+    </header>
+
+    {image && (
+      <div data-editor="image" class="mx-auto mt-8 max-w-5xl px-5 md:mt-12 md:px-8">
+        <Img
+          src={image}
+          alt={imageAlt ?? ''}
+          fetchpriority="high"
+          class="aspect-[16/10] w-full rounded-(--theme-picture-radius) object-cover md:aspect-[16/9]"
+          sizes="(min-width: 1024px) 960px, calc(100vw - 40px)"
+        />
+      </div>
+    )}
+
+    <div data-editor="text" class="prose mx-auto mt-10 max-w-3xl px-5 md:mt-14 md:px-8">
+      <slot />
+    </div>
+
+    <footer class="mx-auto mt-12 max-w-3xl px-5 md:px-8">
+      {onBlog.length > 0 && (
+        <ul class="flex flex-wrap gap-2" aria-label="Tags">
+          {onBlog.map((c) => (
+            <li>
+              <Chip href={`/blog/kategori/${c}/`} label={categoryName(c)} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </footer>
+  </article>
+
+  {site.postEnd && <EndBlock type={site.postEnd} />}
+
+  {related.length > 0 && (
+    <Fragment slot="footer-column">
+      <p class="footer-heading font-medium">{siteT.theme.relatedPosts}</p>
+      <ul class="mt-3 space-y-2.5 text-muted">
+        {related.map((p) => (
+          <li>
+            <a href={postPath(p)} class="hover:text-accent">
+              {p.data.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+      <a href="/blog/" class="mt-4 inline-flex items-center gap-1.5 font-medium text-accent">
+        {siteT.theme.seeAll} <Icon name="arrow-right" size={16} />
+      </a>
+    </Fragment>
+  )}
+</Base>

package/theme/scripts/motion.ts

@@ -1,29 +1,29 @@
-// Page motion, using Motion's vanilla API (same engine as motion/react, without React).
-// Every animation has a job:
-//   [data-reveal]  sections fade up once as they reach the viewport (storytelling)
-// They move with the site's motion scheme's slow spatial spring (motionSpring, @morphemecms/cms/lib/motion.ts). With
-// the calm scheme, or prefers-reduced-motion, everything is shown instantly (motionReduced).
-import { animate, inView } from 'motion';
-import { motionReduced, motionSpring } from '@morphemecms/cms/lib/motion';
-
-const reduce = motionReduced();
-const spring = motionSpring('spatial', 'slow');
-
-// Tells the safety net in Base.astro that the sections are taken care of. One it already showed
-// (this script came late) stays as it is rather than fading in again.
-document.documentElement.dataset.motion = 'ready';
-const reveals = [...document.querySelectorAll<HTMLElement>('[data-reveal]')].filter((el) => el.style.opacity !== '1');
-
-if (reduce) {
-  reveals.forEach((el) => (el.style.opacity = '1'));
-} else {
-  reveals.forEach((el) => {
-    inView(
-      el,
-      () => {
-        animate(el, { opacity: [0, 1], y: [32, 0] }, spring);
-      },
-      { margin: '0px 0px -10% 0px' },
-    );
-  });
-}
+// Page motion, using Motion's vanilla API (same engine as motion/react, without React).
+// Every animation has a job:
+//   [data-reveal]  sections fade up once as they reach the viewport (storytelling)
+// They move with the site's motion scheme's slow spatial spring (motionSpring, @morphemecms/cms/lib/motion.ts). With
+// the calm scheme, or prefers-reduced-motion, everything is shown instantly (motionReduced).
+import { animate, inView } from 'motion';
+import { motionReduced, motionSpring } from '@morphemecms/cms/lib/motion';
+
+const reduce = motionReduced();
+const spring = motionSpring('spatial', 'slow');
+
+// Tells the safety net in Base.astro that the sections are taken care of. One it already showed
+// (this script came late) stays as it is rather than fading in again.
+document.documentElement.dataset.motion = 'ready';
+const reveals = [...document.querySelectorAll<HTMLElement>('[data-reveal]')].filter((el) => el.style.opacity !== '1');
+
+if (reduce) {
+  reveals.forEach((el) => (el.style.opacity = '1'));
+} else {
+  reveals.forEach((el) => {
+    inView(
+      el,
+      () => {
+        animate(el, { opacity: [0, 1], y: [32, 0] }, spring);
+      },
+      { margin: '0px 0px -10% 0px' },
+    );
+  });
+}