@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/layouts/PostLayout.astro

@@ -0,0 +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>

package/theme/scripts/motion.ts

@@ -0,0 +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' },
+    );
+  });
+}

package/theme/styles/base.css

@@ -0,0 +1,320 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+/* The theme's UI components, as Material 3 names them (buttons, icon buttons), and the standard blocks of the editor,
+   in this site's design (their variables below). */
+@import './ui.css';
+@import './blocks.css';
+/* The theme's variables and the classes the standard theme's components use with them. */
+@import './components.css';
+
+/*
+  The standard theme's base: what every theme builds on, plain and neutral. The system's own font, a small radius on
+  panels, a light shadow, full pills on controls; the classes the standard theme's components use (.link, .prose,
+  the motion …) besides the UI components (ui.css: buttons, icon buttons, chips, snackbars). The standard theme's own look is over it, in global.css; a theme with a look of its
+  own from a design system (Material) imports only this file, so that look does not mix into its own. Another theme sets
+  its own (its styles/global.css); what it does not draw itself is drawn by the standard theme's components and blocks,
+  in its CSS.
+  Dark mode follows the system unless the visitor picks one (data-theme on <html>).
+
+  The colours (--bg, --surface, --tint, --ink, --muted, --line, --accent, --accent-hover, --on-accent, and Material 3's
+  other colours: --accent-container, --secondary, --secondary-container, --tertiary, --tertiary-container, each with its
+  --on-…)
+  are not here: they are data, src/data/colors.json, which the owner changes under "Farver" in the editor.
+  Base.astro and the editor's page write them into <head> (colorsCss, packages/editor/lib/colors.ts), for
+  light mode and dark mode as below; the editor checks them to WCAG AA before they are saved
+  (colorPairs in @site/colors). Everything here uses them by name.
+*/
+:root {
+  --radius: 0.75rem;
+  /* The corners of something smaller in or beside a panel: a picture in a list, a row in a menu, an icon's square. */
+  --radius-small: 1rem;
+  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.18);
+  /* The motion scheme's curve (blocks.css, lib/motion.ts). */
+  --ease: var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+  color-scheme: light;
+
+  /* The standard blocks (blocks.css) in this design; in dark mode too, as they
+     follow the tokens above. */
+  --block-text: var(--ink);
+  --block-muted: var(--muted);
+  --block-accent: var(--accent);
+  --block-accent-hover: var(--accent-hover);
+  --block-on-accent: var(--on-accent);
+  --block-surface: var(--surface);
+  --block-tint: var(--tint);
+  --block-line: var(--line);
+  --block-radius: var(--radius);
+  --block-radius-small: var(--radius-small);
+  --block-control-radius: 9999px;
+  --block-shadow: var(--shadow);
+  --block-ease: var(--ease);
+  /* How far a carousel reaches out to the edges of a phone's screen (ui.css): Container.astro's gutter there (px-5). */
+  --carousel-bleed: 1.25rem;
+  /* The same for a chip set that scrolls (ui.css). */
+  --chip-set-bleed: 1.25rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 20px 40px -24px rgb(0 0 0 / 0.7);
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme='dark'] {
+  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 20px 40px -24px rgb(0 0 0 / 0.7);
+  color-scheme: dark;
+}
+
+@theme inline {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-tint: var(--tint);
+  --color-ink: var(--ink);
+  --color-muted: var(--muted);
+  --color-line: var(--line);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-on-accent: var(--on-accent);
+  --color-accent-container: var(--accent-container);
+  --color-on-accent-container: var(--on-accent-container);
+  --color-secondary: var(--secondary);
+  --color-on-secondary: var(--on-secondary);
+  --color-secondary-container: var(--secondary-container);
+  --color-on-secondary-container: var(--on-secondary-container);
+  --color-tertiary: var(--tertiary);
+  --color-on-tertiary: var(--on-tertiary);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-on-tertiary-container: var(--on-tertiary-container);
+  --radius-panel: var(--radius);
+  --radius-panel-small: var(--radius-small);
+  --shadow-soft: var(--shadow);
+  --ease-soft: var(--ease);
+}
+
+/* z-index scale (documented, no ad-hoc values): action bar 30, header 40, cookie banner 42 (under the
+   open menu, which must stay usable), menu 45, skip link 50 */
+
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+    scroll-padding-top: 5.5rem;
+  }
+  body {
+    background: var(--bg);
+    color: var(--ink);
+    font-family: var(--font-sans);
+    font-size: var(--type-body-large-size);
+    line-height: var(--type-body-large-line-height);
+    font-weight: var(--type-body-large-weight);
+    letter-spacing: var(--type-body-large-tracking);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  ::selection {
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+  :focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+    border-radius: 6px;
+  }
+  h1,
+  h2,
+  h3 {
+    text-wrap: balance;
+    font-weight: var(--type-headline-large-weight);
+    letter-spacing: var(--type-headline-large-tracking);
+  }
+  p {
+    text-wrap: pretty;
+  }
+  /* Grid children may contain horizontal scrollers; never let them widen the track. */
+  .grid > * {
+    min-width: 0;
+  }
+}
+
+@layer components {
+  .link {
+    color: var(--accent);
+    font-weight: 500;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25em;
+  }
+  .link:hover {
+    text-decoration-thickness: 2px;
+  }
+}
+
+/* Long-form text (migrated pages and blog posts). */
+.prose {
+  --tw-prose-body: var(--ink);
+  --tw-prose-headings: var(--ink);
+  --tw-prose-lead: var(--muted);
+  --tw-prose-links: var(--accent);
+  --tw-prose-bold: var(--ink);
+  --tw-prose-counters: var(--muted);
+  --tw-prose-bullets: var(--accent);
+  --tw-prose-hr: var(--line);
+  --tw-prose-quotes: var(--ink);
+  --tw-prose-quote-borders: var(--accent);
+  --tw-prose-captions: var(--muted);
+  --tw-prose-th-borders: var(--line);
+  --tw-prose-td-borders: var(--line);
+  --tw-prose-code: var(--ink);
+  font-size: var(--type-body-large-size);
+  line-height: var(--type-body-large-line-height);
+  font-weight: var(--type-body-large-weight);
+  letter-spacing: var(--type-body-large-tracking);
+}
+/* The text's headings: a headline, a title under it and a smaller title under that (the type scale, ui.css). */
+.prose :where(h2) {
+  font-size: var(--type-headline-medium-size);
+  line-height: var(--type-headline-medium-line-height);
+  font-weight: var(--type-headline-medium-weight);
+  letter-spacing: var(--type-headline-medium-tracking);
+}
+.prose :where(h3) {
+  font-size: var(--type-title-large-size);
+  line-height: var(--type-title-large-line-height);
+  font-weight: var(--type-title-large-weight);
+  letter-spacing: var(--type-title-large-tracking);
+}
+.prose :where(h4) {
+  font-size: var(--type-title-medium-size);
+  line-height: var(--type-title-medium-line-height);
+  font-weight: var(--type-title-medium-weight);
+  letter-spacing: var(--type-title-medium-tracking);
+}
+/* Code in a line (cookie names in the privacy policy): on a tint, without the plugin's backticks. */
+.prose :where(:not(pre) > code):not(:where(.not-prose code)) {
+  background: var(--tint);
+  border-radius: 0.3em;
+  padding: 0.1em 0.35em;
+  font-weight: 500;
+}
+.prose :where(:not(pre) > code):not(:where(.not-prose code))::before,
+.prose :where(:not(pre) > code):not(:where(.not-prose code))::after {
+  content: none;
+}
+/* Not the links of a block in the text (not-prose): their look is the block's. */
+.prose :where(a):not(:where(.not-prose a)) {
+  font-weight: 500;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+/* Pictures in the text; not those in a block of the site in it (not-prose, RichText.astro). */
+.prose :where(img):not(:where(.not-prose img)) {
+  border-radius: var(--radius);
+  width: 100%;
+  height: auto;
+}
+/* A picture in the text cut to a format in the editor (packages/editor/lib/crop.mjs): the box is the format, the
+   picture in it as large and as far moved as the part chosen. */
+.picture-crop {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius);
+  margin-block: 2em;
+}
+.picture-crop > img {
+  position: absolute;
+  inset: 0 auto auto 0;
+  max-width: none;
+  height: auto;
+  margin: 0;
+  border-radius: 0;
+}
+/* Video embeds (an embed that needs another size, an app's calendar, sets its own). */
+.prose :where(iframe) {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  border: 0;
+  border-radius: var(--radius);
+  margin-block: 2em;
+}
+
+/* Motion.
+   [data-reveal]: sections fade up once when scrolled into view (packages/editor/theme/scripts/motion.ts).
+   The top of a page stands still from the first paint; from another page of the site it fades in (components.css).
+   Off for visitors who prefer reduced motion, and with the calm motion scheme ("Bevægelse", data-motion-scheme). */
+@media (prefers-reduced-motion: no-preference) {
+  .js:not([data-motion-scheme='calm']) [data-reveal] {
+    opacity: 0;
+  }
+}
+
+/* The site's logo (public/logo.svg), colored by background-color via a mask. */
+.logo-mark {
+  display: inline-block;
+  -webkit-mask: url('/logo.svg') center / contain no-repeat;
+  mask: url('/logo.svg') center / contain no-repeat;
+}
+
+/* A block the theme places outside the text (Block.astro in EndBlock.astro and on the prices page): its
+   place gives the space around it, not the text's (.block-in-text). */
+.block-place > .block-in-text {
+  margin-block: 0;
+}
+/* The heading of a block placed outside the text (a front-page section): as the theme's other section headings
+   (SectionHeading.tsx), not the text's; with a label or a subheading (.block-head, blocks.css) the space under the
+   whole head. */
+.block-place > h2,
+.block-place > .block-head {
+  margin-block: 0 2rem;
+}
+.block-place > h2,
+.block-place > .block-head > h2 {
+  font-size: var(--type-headline-large-size);
+  line-height: var(--type-headline-large-line-height);
+  font-weight: var(--type-headline-large-weight);
+  letter-spacing: var(--type-headline-large-tracking);
+}
+@media (min-width: 48rem) {
+  .block-place > h2,
+  .block-place > .block-head > h2 {
+    font-size: var(--type-display-medium-size);
+    line-height: var(--type-display-medium-line-height);
+    font-weight: var(--type-display-medium-weight);
+    letter-spacing: var(--type-display-medium-tracking);
+  }
+}
+/* Cards placed in the page's full width (a front-page section, PageBlock.astro): three in a row on a computer, as
+   there is room for (in the text, two). */
+@media (min-width: 64rem) {
+  .block-place .block-cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* The mark before the name on a testimonial (the standard block's card): a small dot in the accent, which the standard
+   theme's own look (global.css) makes an avatar with the initial. Another mark (e.g. a logo) is that
+   theme's own (its global.css), not the standard theme's. */
+.block-testimonial-mark {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background-color: var(--accent);
+}
+
+/* Boxes side by side ("Links", an app's boxes): the site's panels (outlined cards, ui.css, without a shadow), with
+   more room on a computer and the heading of a section in it. */
+.block-panels .block-panel-title {
+  font-size: var(--type-headline-small-size);
+  line-height: var(--type-headline-small-line-height);
+  font-weight: var(--type-headline-small-weight);
+  letter-spacing: var(--type-headline-small-tracking);
+}
+@media (min-width: 48rem) {
+  .block-panels > .block-panel {
+    --card-padding: 2rem;
+  }
+}