@morphemecms/cms 0.7.0 → 0.8.0

package/src/ui.tsx

@@ -38,14 +38,12 @@ import {
   CaretUp,
   Check,
   Funnel,
-  Layout,
   LockSimple,
   LockSimpleOpen,
   PencilSimple,
   Plus,
   Sidebar,
   SidebarSimple,
-  SquareHalf,
   X,
   type Icon,
 } from '@phosphor-icons/react';
@@ -90,8 +88,6 @@ import {
   SiteNavigationDrawerToggle,
   siteNavigationDrawerDialogClass,
   siteFocusNavigationDrawerItem,
-  siteSideSheet,
-  siteSideSheetDialogClass,
   SiteSegmentedButton,
   SiteSideSheet,
   SiteTab,
@@ -131,15 +127,15 @@ import { menuLayout } from '../lib/menu-layout.mjs';
 
 /** The theme's button (Material 3's buttons): filled, the one thing to do; tonal, an important step that is not the
  * main one; elevated, one on a coloured background; outlined, another choice beside it ("Annuller" too); text, a small
- * step on the side (Fjern, Tilføj). medium (the default): side by side, and across the screen or a sheet with `wide`
- * (Gem ændringer); small: in a line of text or by a field (Skift billede, Tilføj tag). */
+ * step on the side (Fjern, Tilføj). medium (the default): side by side, and with `wide` across the screen or a sheet on a
+ * phone (compact) and the width of its text from medium (Gem ændringer); small: in a line of text or by a field (Skift billede, Tilføj tag). */
 export type { ButtonKind };
 export type ButtonSize = 'medium' | 'small';
 
 type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
   kind?: ButtonKind;
   size?: ButtonSize;
-  /** Across the screen or the sheet. */
+  /** Across the screen or the sheet on a phone (compact), the width of its text from medium. */
   wide?: boolean;
   /** Before the text. */
   icon?: Icon;
@@ -148,7 +144,7 @@ type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
 
 export function Button({ icon: Glyph, wide, className, children, ...rest }: ButtonProps) {
   return (
-    <SiteButton icon={Glyph && <Glyph />} className={[wide && 'w-full', className].filter(Boolean).join(' ')} {...rest}>
+    <SiteButton icon={Glyph && <Glyph />} className={[wide && 'w-full medium:w-auto', className].filter(Boolean).join(' ')} {...rest}>
       {children}
     </SiteButton>
   );
@@ -164,7 +160,12 @@ export function LinkButton({
   ...rest
 }: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & { kind?: ButtonKind; size?: ButtonSize; wide?: boolean; icon?: Icon }) {
   return (
-    <SiteButton href={href} icon={Glyph && <Glyph />} className={[wide && 'w-full', className].filter(Boolean).join(' ')} {...rest}>
+    <SiteButton
+      href={href}
+      icon={Glyph && <Glyph />}
+      className={[wide && 'w-full medium:w-auto', className].filter(Boolean).join(' ')}
+      {...rest}
+    >
       {children}
     </SiteButton>
   );
@@ -2610,14 +2611,13 @@ export function SideSheet({ title, onClose, children }: { title: string; onClose
   );
 }
 
-/** One entry of a SectionList: its id, its name and its icon, and evt. the theme's Badge (how many are new there; or a
- * dot). */
-export type NavigationItem = { id: string; label: string; icon: Icon; badge?: number | boolean };
+/** One entry of a SectionList: its id, its name and evt. the theme's Badge (how many are new there; or a dot). */
+export type NavigationItem = { id: string; label: string; badge?: number | boolean };
 
-/** The sections of a long form (a page's, a post's: Indhold, Status, Andre felter …), as the theme's list (Material 3's
- * List and ListItem): each with its icon, its name and evt. its badge, the one open or in view (`value`) selected; a tap
- * calls `onChange` with its id (EntryForm scrolls to it). `title` names the navigation. In a SectionPane on large and
- * wider screens, in a SectionSheet below. */
+/** The sections of a long form (a page's, a post's: Indhold, Status, Andre felter …) as an "on this page" list, as on
+ * m3.material.io: plain text, no icons and no surface; the one in view (`value`) in the accent colour and medium
+ * weight (`aria-current="location"`). A tap calls `onChange` with its id (EntryForm scrolls to it). Evt. the theme's
+ * Badge after the name. `title` names the navigation. In a SectionPane. */
 export function SectionList({
   title,
   items,
@@ -2631,94 +2631,39 @@ export function SectionList({
 }) {
   return (
     <nav aria-label={title}>
-      <ul className={siteListClasses('standard', 'none')}>
-        {items.map(({ id, label, icon, badge }) => {
-          const open = id === value;
-          return (
-            <ListItem
-              key={id}
-              icon={icon}
-              iconSelected={open}
-              selected={open}
-              aria-current={open ? 'location' : undefined}
-              headline={label}
-              trailing={badge ? <SiteBadge count={badge === true ? undefined : badge} /> : undefined}
+      <ul className="m-0 flex list-none flex-col gap-1 p-0">
+        {items.map(({ id, label, badge }) => (
+          <li key={id}>
+            <button
+              type="button"
+              aria-current={id === value ? 'location' : undefined}
               onClick={() => onChange(id)}
-            />
-          );
-        })}
+              className="section-list-item flex w-full items-center gap-2 rounded-(--block-radius-small) px-2 py-2 text-start text-muted transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none aria-[current=location]:text-accent"
+            >
+              <span className="min-w-0">{label}</span>
+              {badge ? <SiteBadge count={badge === true ? undefined : badge} /> : null}
+            </button>
+          </li>
+        ))}
       </ul>
     </nav>
   );
 }
 
-/** The pane at the end of a long form on large and wider screens (Material 3's 412dp pane): the theme's standard side
- * sheet titled `title`, with the form's SectionList in it (`children`); it stays in view while the form scrolls. Nothing
- * when it is not `open`: the button in the top bar (SectionsButton) shows and hides it. Its place in the form is
- * FormColumns' `pane`, against the window's end edge; below large it is not drawn (a SectionSheet is). */
-export function SectionPane({ title, open, children }: { title: string; open: boolean; children: ReactNode }) {
-  const id = useId();
-  if (!open) return null;
+/** The "on this page" card at the end of a long form on large and wider screens: the theme's outlined card, as tall as
+ * its content (it scrolls inside only when that is taller than the window less the top bar), with the small `caption`
+ * (Afsnit), the form's `title` under it and the form's SectionList (`children`). It stays in view while the form
+ * scrolls. Its place is FormColumns' `pane`, against the window's end edge; below large it is not drawn. */
+export function SectionPane({ caption, title, children }: { caption: string; title: string; children: ReactNode }) {
   return (
-    <SiteSideSheet headline={title} headlineId={id} className="editor-reveal h-full w-full [--side-sheet-width:var(--section-pane-width)]">
+    <div className={`${siteCardClass('outlined')} max-h-[calc(100dvh-var(--top-bar-height)-2*var(--section-pane-gap))] overflow-y-auto`}>
+      <p className="section-pane-caption m-0 text-muted">{caption}</p>
+      <h2 className="section-pane-title m-0 mb-3 text-ink">{title}</h2>
       {children}
-    </SiteSideSheet>
-  );
-}
-
-/** The sections below large: the theme's modal side sheet (Material 3's), from the end edge over the screen, titled
- * `title`, with the form's SectionList in it (`children`). Controlled: `open` shows it (the theme's `sideSheet()` slides
- * it in; with reduced motion it just appears), and `onClose` is called when it has been closed by its cross, Escape or a
- * tap on the scrim; a choice closes it by the caller setting `open` to false. The page does not scroll while it is
- * open (the theme's control), and it is given back if the sheet is taken away while open (the window grows to large). */
-export function SectionSheet({
-  title,
-  open,
-  onClose,
-  children,
-}: {
-  title: string;
-  open: boolean;
-  onClose: () => void;
-  children: ReactNode;
-}) {
-  const id = useId();
-  const dialog = useRef<HTMLDialogElement>(null);
-  const control = useRef<ReturnType<typeof siteSideSheet> | undefined>(undefined);
-  const closed = useRef(onClose);
-  closed.current = onClose;
-  useEffect(() => {
-    const el = dialog.current!;
-    control.current = siteSideSheet(el);
-    const done = () => closed.current();
-    el.addEventListener('close', done);
-    return () => {
-      el.removeEventListener('close', done);
-      if (el.open) el.close();
-      document.documentElement.style.overflow = '';
-    };
-  }, []);
-  useEffect(() => {
-    if (open) control.current?.open();
-    else void control.current?.close();
-  }, [open]);
-  return (
-    <dialog ref={dialog} aria-labelledby={id} className={siteSideSheetDialogClass}>
-      <SiteSideSheet kind="modal" headline={title} headlineId={id} closeLabel={t.common.close}>
-        {children}
-      </SiteSideSheet>
-    </dialog>
+    </div>
   );
 }
 
-/** The button at the end of the top bar (Screen's `drawer`) for a form's sections: on large and wider it shows and hides
- * the SectionPane (`open`: it is shown, so the icon is `right_panel_close` (`square-half`), else `right_panel_open` (`layout`)),
- * below it opens the SectionSheet, so the icon is always `right_panel_open`. `label` names it. */
-export function SectionsButton({ label, open, onClick }: { label: string; open?: boolean; onClick: () => void }) {
-  const pane = useAtLeast('large');
-  return <IconButton icon={pane && open ? SquareHalf : Layout} label={label} aria-expanded={open} onClick={onClick} />;
-}
-
 /** The editor's main navigation (Material 3's navigation drawer, the theme's, in its design): the site's parts in sections
  * (`MainDrawerSection`, `MainDrawerItem`), at the full height of the window, with the menu button at the top. From medium
  * and wider a navigation rail (`rail`: its destinations, `MainRailItem` and `MainRailSectionItem`) stands in its place while
@@ -3152,8 +3097,8 @@ export function FormColumns({
   side?: ReactNode;
   cards?: boolean;
   sticky?: boolean;
-  /** A SectionPane, on large and wider screens against the window's end edge under the top bar (412dp, fixed while the form
-   * scrolls; editor.css lets the content column keep clear of it, so `main` is centred to its left); below large nothing.
+  /** A SectionPane, on large and wider screens against the window's end edge under the top bar (--section-pane-width
+   * wide, fixed while the form scrolls; editor.css lets the content column keep clear of it); below large nothing.
    * Instead of `first` and `side`. */
   pane?: ReactNode;
 }) {
@@ -3170,7 +3115,7 @@ export function FormColumns({
       <div className="min-w-0 space-y-6 large:col-start-1 large:row-span-2 large:row-start-1">{main}</div>
       {side && <div className={`${right} ${first ? 'large:row-start-2' : 'large:row-span-2 large:row-start-1'}`}>{side}</div>}
       {pane && (
-        <div className="editor-section-pane hidden large:fixed large:end-0 large:top-(--top-bar-height) large:z-10 large:block large:h-[calc(100dvh-var(--top-bar-height))] large:w-(--section-pane-width)">
+        <div className="editor-section-pane hidden large:fixed large:end-0 large:top-[calc(var(--top-bar-height)+var(--section-pane-gap))] large:z-10 large:block large:w-(--section-pane-width) large:pe-(--section-pane-gap)">
           {pane}
         </div>
       )}

package/src/virtual.d.ts

@@ -1,3 +1,8 @@
+declare module 'virtual:material-symbols' {
+  const files: Record<string, string>;
+  export default files;
+}
+
 declare module 'virtual:material-symbols-ssr' {
   const files: Record<string, string>;
   export default files;

package/starter/package.json

@@ -32,7 +32,7 @@
     "@material-symbols/svg-400": "0.48.2",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.7.0",
+    "@morphemecms/cms": "0.8.0",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/starter/src/data/social.json

@@ -0,0 +1,14 @@
+{
+  "facebook": "",
+  "instagram": "",
+  "linkedin": "",
+  "x": "",
+  "youtube": "",
+  "tiktok": "",
+  "pinterest": "",
+  "shareFacebook": true,
+  "shareX": true,
+  "shareLinkedin": true,
+  "sharePinterest": true,
+  "shareCopyLink": true
+}

package/theme/components/PostAuthor.astro

@@ -0,0 +1,20 @@
+---
+// The author of a blog post: a round picture (when the site has one), the name and the role under it.
+// Props: name, role, portrait. A theme may replace this file to redesign the author.
+import Img from '@theme/components/Img.astro';
+
+interface Props {
+  name: string;
+  role?: string;
+  portrait?: string;
+}
+const { name, role, portrait } = Astro.props;
+---
+
+<div class="flex items-center gap-3">
+  {portrait && <Img src={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">{name}</span>
+    {role && <span class="block type-body-medium text-muted">{role}</span>}
+  </div>
+</div>

package/theme/components/PostCard.tsx

@@ -0,0 +1,26 @@
+// One related post under a blog post (RelatedPosts.astro): a Material card (ui/Card.tsx) with the post's picture, its
+// title, and its date and reading time (PostMeta.tsx). A theme may replace this file to redesign the card.
+import { BREAKPOINTS } from '@morphemecms/cms/lib/breakpoints.mjs';
+import Card from '@theme/ui/Card';
+import Img from '@theme/components/Img';
+import PostMeta from '@theme/components/PostMeta';
+import type { PostView } from '@theme/components/posts';
+
+export default function PostCard({ post }: { post: PostView }) {
+  return (
+    <Card as="article" href={post.href} className="h-full overflow-hidden">
+      {post.image && (
+        <Img
+          image={post.image}
+          alt={post.imageAlt ?? ''}
+          sizes={`(min-width: ${BREAKPOINTS.medium}px) 33vw, 100vw`}
+          className="aspect-[4/3] w-full object-cover"
+        />
+      )}
+      <div className="p-4">
+        <h3 className="type-title-medium">{post.title}</h3>
+        <PostMeta post={post} className="mt-2" />
+      </div>
+    </Card>
+  );
+}

package/theme/components/PostHeader.astro

@@ -0,0 +1,36 @@
+---
+// The header of a blog post: back link, title, author (from site), byline with tags, and share row, left-aligned.
+// Props: title, post (PostView), tags, share (ShareRow's props). A theme may replace this file to redesign the header.
+import Icon from '@theme/components/Icon.astro';
+import PostAuthor from '@theme/components/PostAuthor.astro';
+import PostMeta from '@theme/components/PostMeta';
+import ShareRow from '@theme/components/ShareRow.astro';
+import type { PostView } from '@theme/components/posts';
+import type { ShareId } from '@morphemecms/cms/site/social.mjs';
+import { site } from '@morphemecms/cms/site/site';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  title: string;
+  post: PostView;
+  tags: { label: string; href: string }[];
+  share: { url: string; title: string; picture?: string; share: ShareId[] };
+}
+const { title, post, tags, share } = Astro.props;
+---
+
+<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">
+    <PostAuthor name={site.name} role={site.role} portrait={site.portrait} />
+  </div>
+  <PostMeta post={post} tags={tags} className="mt-3" />
+  <div class="mt-4">
+    <ShareRow {...share} />
+  </div>
+</header>

package/theme/components/PostMeta.tsx

@@ -1,9 +1,19 @@
-// Date and reading time for a blog post: "12. marts 2024 · 5 min. læsetid" in Danish (posts.ts makes them).
+// Date and reading time for a blog post, then its tags as links: "12. marts 2024 · 5 min. læsetid · News, Tips" in Danish
+// (posts.ts makes them). Props: post, optional tags and className. A theme may replace this file.
+import { Fragment } from 'react';
 import { Svg } from '@morphemecms/cms/src/icon';
 import type { PostView } from '@theme/components/posts';
 import { siteT } from '@morphemecms/cms/src/i18n';
 
-export default function PostMeta({ post, className }: { post: PostView; className?: string }) {
+export default function PostMeta({
+  post,
+  tags,
+  className,
+}: {
+  post: PostView;
+  tags?: { label: string; href: string }[];
+  className?: string;
+}) {
   return (
     <p className={['flex flex-wrap items-center gap-x-2 type-body-medium text-muted', className].filter(Boolean).join(' ')}>
       <time dateTime={post.date}>{post.dateText}</time>
@@ -12,6 +22,21 @@ export default function PostMeta({ post, className }: { post: PostView; classNam
         <Svg name="clock" size={15} />
         {siteT.theme.readingTime(post.minutes)}
       </span>
+      {tags && tags.length > 0 && (
+        <>
+          <span aria-hidden="true">·</span>
+          <span>
+            {tags.map((tag, i) => (
+              <Fragment key={tag.href}>
+                {i > 0 && ', '}
+                <a href={tag.href} className="underline hover:text-accent">
+                  {tag.label}
+                </a>
+              </Fragment>
+            ))}
+          </span>
+        </>
+      )}
     </p>
   );
 }

package/theme/components/RelatedPosts.astro

@@ -0,0 +1,29 @@
+---
+// A "Related posts" section under a blog post: up to three PostCard components in a responsive grid. A theme may replace
+// this file to redesign the section.
+import Container from '@theme/components/Container.astro';
+import PostCard from '@theme/components/PostCard';
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { PostView } from '@theme/components/posts';
+
+interface Props {
+  posts: PostView[];
+}
+
+const { posts } = Astro.props;
+---
+
+{posts.length > 0 && (
+  <Container class="mt-12 medium:mt-16" aria-labelledby="related-posts">
+    <h2 id="related-posts" class="type-headline-small">
+      {siteT.theme.relatedPosts}
+    </h2>
+    <ul class="mt-6 grid gap-6 medium:grid-cols-3">
+      {posts.map((post) => (
+        <li>
+          <PostCard post={post} />
+        </li>
+      ))}
+    </ul>
+  </Container>
+)}

package/theme/components/ShareRow.astro

@@ -0,0 +1,48 @@
+---
+// The share buttons under a blog post: plain links to Facebook, X, LinkedIn and Pinterest, and a button that copies the
+// post's address (theme/ui/copyLink.script.ts). Props: the post's address, title and picture, and which buttons are on
+// (site.social.share). Draws nothing without buttons. Uses shareLinks (site/social.mjs), Icon and IconButton's classes.
+import { shareLinks, type ShareId } from '@morphemecms/cms/site/social.mjs';
+import Icon from '@theme/components/Icon.astro';
+import { iconButtonClass } from '@theme/ui/IconButton';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  url: string;
+  title: string;
+  picture?: string;
+  share: ShareId[];
+}
+const { url, title, picture, share } = Astro.props;
+
+const links = shareLinks({ url, title, picture }, share);
+const networks: Record<string, { name: string; icon: string }> = {
+  facebook: { name: 'Facebook', icon: 'facebook-logo' },
+  x: { name: 'X', icon: 'x-logo' },
+  linkedin: { name: 'LinkedIn', icon: 'linkedin-logo' },
+  pinterest: { name: 'Pinterest', icon: 'pinterest-logo' },
+};
+const buttonClass = iconButtonClass('standard');
+---
+
+{links.length > 0 && (
+  <div role="group" aria-label={siteT.theme.share} class="flex items-center gap-x-2">
+    {links.map(({ id, href }) =>
+      id === 'copy-link' ? (
+        <button
+          type="button"
+          class={buttonClass}
+          aria-label={siteT.theme.copyLink}
+          data-copy-link={url}
+          data-copied={siteT.theme.linkCopied}
+        >
+          <Icon name="link-simple" size={22} />
+        </button>
+      ) : (
+        <a href={href} class={buttonClass} aria-label={siteT.theme.shareOn(networks[id].name)} target="_blank" rel="noopener">
+          <Icon name={networks[id].icon} size={22} />
+        </a>
+      ),
+    )}
+  </div>
+)}

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>