@morphemecms/cms 0.7.1 → 0.8.0-next-20261105074335

package/theme/layouts/PostLayout.astro

@@ -1,16 +1,18 @@
 ---
-// Blog post template. A narrow reading column, the site's owner as author; related posts in the footer.
+// Blog post template. A narrow reading column, the site's owner as author. Order: PostHeader (back link, title, author,
+// byline with tags, share row), the lead (the text's first paragraph), the featured picture, the rest of the text, the
+// end block, RelatedPosts. Without a lead the picture comes before the text.
 // 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. The text goes through RichText (blocks={false}: a post draws no blocks, but its coloured sections are panels).
+// packages/editor/src/pagePreview.tsx): the heading, the lead, the picture and the text. The text goes through RichText (blocks={false}: a post draws no blocks, but its coloured sections are panels).
+import { splitLead } from '@morphemecms/cms/lib/lead.mjs';
 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 RichText from '@theme/components/RichText.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 PostHeader from '@theme/components/PostHeader.astro';
+import RelatedPosts from '@theme/components/RelatedPosts.astro';
 import { postViewOf } from '@theme/components/loadPosts';
 import { site } from '@morphemecms/cms/site/site';
 import { isBlogCategory } from '@morphemecms/cms/site/categories';
@@ -24,11 +26,20 @@ 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).
+// The tags in the byline: 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);
 
+// The picture a share to Pinterest pins: the one chosen for sharing, else the post's own, with the site's address in front.
+const sharePicture = post.data.shareImage || post.data.image || firstImage(post.body);
+const picture = sharePicture?.startsWith('/') ? site.url + sharePicture : sharePicture || undefined;
+
+// The text's first paragraph is the lead, drawn before the featured picture; without one the picture comes first.
+const { lead, rest } = splitLead(await Astro.slots.render('default'));
+// The lead has the text's class too (the editor's preview copies the text's class to the lead) and post-lead.
+const textClass = 'prose mx-auto mt-10 max-w-3xl px-5 medium:mt-14 medium:px-8';
+
 // Related: most shared categories first, then newest.
 const related = (await getPosts())
   .filter((p) => p.id !== post.id)
@@ -69,23 +80,14 @@ const related = (await getPosts())
   ]}
 >
   <article>
-    <header class="mx-auto max-w-3xl px-5 pt-8 medium:px-8 medium: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>
+    <PostHeader
+      title={title}
+      post={postViewOf(post)}
+      tags={onBlog.map((c) => ({ label: categoryName(c), href: `/blog/kategori/${c}/` }))}
+      share={{ url: site.url + postPath(post), title, picture, share: site.social.share }}
+    />
+
+    {lead && <div data-editor="lead" class={`${textClass} post-lead`} set:html={lead} />}
 
     {image && (
       <div data-editor="image" class="mx-auto mt-8 max-w-5xl px-5 medium:mt-12 medium:px-8">
@@ -99,40 +101,12 @@ const related = (await getPosts())
       </div>
     )}
 
-    <div data-editor="text" class="prose mx-auto mt-10 max-w-3xl px-5 medium:mt-14 medium:px-8">
-      <RichText html={await Astro.slots.render('default')} blocks={false} />
+    <div data-editor="text" class={textClass}>
+      <RichText html={rest} blocks={false} />
     </div>
-
-    <footer class="mx-auto mt-12 max-w-3xl px-5 medium: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>
-  )}
+  <RelatedPosts posts={related.map(postViewOf)} />
 </Base>

package/theme/styles/base.css

@@ -181,6 +181,18 @@
   font-weight: var(--type-body-large-weight);
   letter-spacing: var(--type-body-large-tracking);
 }
+/* A blog post's lead: its first paragraph, one step larger than the text (the title-large size, with the body weight). */
+.prose.post-lead {
+  font-size: var(--type-title-large-size);
+  line-height: var(--type-title-large-line-height);
+  font-weight: var(--type-body-large-weight);
+  letter-spacing: var(--type-title-large-tracking);
+}
+/* The text right after the lead (no picture between): the space the prose puts between paragraphs (1.25em), not the
+   larger space of a text under a picture. Unlayered on purpose: it must beat the mt-10 / medium:mt-14 utilities (a layer). */
+.prose.post-lead + .prose {
+  margin-top: 1.25em;
+}
 /* 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);

package/theme/ui/copyLink.script.ts

@@ -0,0 +1,17 @@
+// What a copy-link button (ShareRow.astro, [data-copy-link]) does on the site: it writes its address to the clipboard and
+// says so in a snackbar (its text in data-copied). Run on every page by Base.astro (blockScripts, by `ui/copyLink`);
+// without such a button on the page it does nothing.
+import { snackbar } from '@morphemecms/cms/lib/snackbar';
+
+export default function copyLinks() {
+  document.querySelectorAll<HTMLButtonElement>('button[data-copy-link]').forEach((button) => {
+    button.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(button.dataset.copyLink ?? '');
+      } catch {
+        return;
+      }
+      snackbar({ text: button.dataset.copied ?? '' });
+    });
+  });
+}