@acms-subir/core 0.1.0 → 0.3.0

package/src/components/editor/extensions/infoCards.tsx

@@ -1,6 +1,7 @@
 import { Node } from '@tiptap/core';
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
 import type { NodeViewProps } from '@tiptap/react';
+import { cleanEventName } from '../../../lib/analytics';
 
 // Info cards: a *static* grid of title / badge / description / detail-line
 // cards — services, opening hours, team members, feature grids. Unlike the
@@ -25,6 +26,7 @@ export interface InfoItem {
   badgeStyle: 'filled' | 'outline';
   description: string;
   href: string; // empty = plain card; set = whole card is a link
+  event: string; // optional analytics event name (linked cards only)
   lines: InfoLine[];
 }
 
@@ -67,6 +69,7 @@ const sanitizeItem = (raw: unknown): InfoItem | null => {
     badgeStyle: it.badgeStyle === 'outline' ? 'outline' : 'filled',
     description: str(it.description),
     href: str(it.href),
+    event: str(it.event),
     lines,
   };
 };
@@ -90,6 +93,7 @@ const newItem = (): InfoItem => ({
   badgeStyle: 'filled',
   description: '',
   href: '',
+  event: '',
   lines: [
     { icon: 'calendar', text: '' },
     { icon: 'clock', text: '' },
@@ -140,8 +144,9 @@ export const InfoCards = Node.create({
           ]);
         }
         const href = it.href.trim();
+        const event = cleanEventName(it.event ?? '');
         return href
-          ? ['a', { class: 'pc-info-card', href }, ...children]
+          ? ['a', { class: 'pc-info-card', href, ...(event ? { 'data-umami-event': event } : {}) }, ...children]
           : ['article', { class: 'pc-info-card' }, ...children];
       });
     return ['div', { class: 'pc-infocards', 'data-items': JSON.stringify(items) }, ...cards];
@@ -256,6 +261,16 @@ function InfoCardsView({ node, updateAttributes, deleteNode, selected }: NodeVie
                 value={it.href}
                 onChange={(e) => patch(i, { href: e.target.value })}
               />
+              {it.href.trim() !== '' && (
+                <input
+                  type="text"
+                  className="pe-infocard-href"
+                  placeholder="Analytics event (optional)"
+                  title="Clicks are counted under this name in Umami (and forwarded to enabled ad pixels)"
+                  value={it.event}
+                  onChange={(e) => patch(i, { event: e.target.value })}
+                />
+              )}
             </div>
           </div>
         ))}

package/src/components/editor/extensions/mediaCards.tsx

@@ -5,6 +5,7 @@ import { useRef, useState } from 'react';
 import { actions } from 'astro:actions';
 import { uploadFile, mediaUrl } from '../imaging';
 import { ImagePicker } from '../ImagePicker';
+import { cleanEventName } from '../../../lib/analytics';
 
 // Media cards beyond the basic image: file/download, gallery, bookmark.
 // Same contract as cards.tsx — renderHTML emits public `.pc-*` markup,
@@ -30,6 +31,8 @@ export const FileCard = Node.create({
       href: { default: '' },
       filename: { default: '' },
       size: { default: 0 },
+      // optional analytics event name → data-umami-event on the public <a>
+      event: { default: '' },
     };
   },
 
@@ -43,6 +46,7 @@ export const FileCard = Node.create({
             href: e.getAttribute('href') ?? '',
             filename: e.querySelector('.pc-file-name')?.textContent ?? e.getAttribute('download') ?? '',
             size: Number(e.getAttribute('data-size') ?? 0),
+            event: e.getAttribute('data-umami-event') ?? '',
           };
         },
       },
@@ -51,9 +55,13 @@ export const FileCard = Node.create({
 
   renderHTML({ node }) {
     const a = node.attrs;
+    const event = cleanEventName(a.event ?? '');
     return [
       'a',
-      { class: 'pc-filecard', href: a.href, download: a.filename, 'data-size': String(a.size) },
+      {
+        class: 'pc-filecard', href: a.href, download: a.filename, 'data-size': String(a.size),
+        ...(event ? { 'data-umami-event': event } : {}),
+      },
       ['span', { class: 'pc-file-icon', 'aria-hidden': 'true' }, '↓'],
       ['span', { class: 'pc-file-text' },
         ['span', { class: 'pc-file-name' }, a.filename || 'Download'],
@@ -111,6 +119,15 @@ function FileCardView({ node, updateAttributes, deleteNode, selected }: NodeView
         <span className="pe-provider">File</span>
         <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
       </div>
+      <div className="pe-button-fields" contentEditable={false}>
+        <input
+          type="text"
+          placeholder="Analytics event (optional)"
+          title="Downloads are counted under this name in Umami (and forwarded to enabled ad pixels)"
+          value={a.event}
+          onChange={(e) => updateAttributes({ event: e.target.value })}
+        />
+      </div>
       <span className="pc-filecard" contentEditable={false}>
         <span className="pc-file-icon" aria-hidden="true">↓</span>
         <span className="pc-file-text">
@@ -262,6 +279,8 @@ export const BookmarkCard = Node.create({
       image: { default: '' },
       favicon: { default: '' },
       siteName: { default: '' },
+      // optional analytics event name → data-umami-event on the public <a>
+      event: { default: '' },
     };
   },
 
@@ -278,6 +297,7 @@ export const BookmarkCard = Node.create({
             image: e.querySelector<HTMLElement>('.pc-bookmark-thumb img')?.getAttribute('src') ?? '',
             favicon: e.querySelector<HTMLElement>('.pc-bookmark-favicon')?.getAttribute('src') ?? '',
             siteName: e.querySelector('.pc-bookmark-site')?.textContent ?? '',
+            event: e.getAttribute('data-umami-event') ?? '',
           };
         },
       },
@@ -296,7 +316,12 @@ export const BookmarkCard = Node.create({
     ];
     if (a.description) content.push(['div', { class: 'pc-bookmark-desc' }, a.description]);
     content.push(meta);
-    const out: unknown[] = ['a', { class: 'pc-bookmark', href: a.url, target: '_blank', rel: 'noopener' }, content];
+    const event = cleanEventName(a.event ?? '');
+    const out: unknown[] = [
+      'a',
+      { class: 'pc-bookmark', href: a.url, target: '_blank', rel: 'noopener', ...(event ? { 'data-umami-event': event } : {}) },
+      content,
+    ];
     if (a.image) out.push(['div', { class: 'pc-bookmark-thumb' }, ['img', { src: a.image, alt: '', loading: 'lazy' }]]);
     return out as [string, Record<string, string>, ...unknown[]];
   },
@@ -352,6 +377,15 @@ function BookmarkCardView({ node, updateAttributes, deleteNode, selected }: Node
         <span className="pe-provider">Bookmark</span>
         <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
       </div>
+      <div className="pe-button-fields" contentEditable={false}>
+        <input
+          type="text"
+          placeholder="Analytics event (optional)"
+          title="Clicks are counted under this name in Umami (and forwarded to enabled ad pixels)"
+          value={a.event}
+          onChange={(e) => updateAttributes({ event: e.target.value })}
+        />
+      </div>
       <span className="pc-bookmark" contentEditable={false}>
         <span className="pc-bookmark-content">
           <span className="pc-bookmark-title">{a.title || a.url}</span>

package/src/components/editor/extensions/slash.tsx

@@ -3,19 +3,31 @@ import type { Editor, Range } from '@tiptap/react';
 import Suggestion from '@tiptap/suggestion';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { CONTENT } from '../../../lib/content';
+import { CALENDAR } from '../../../lib/calendar/config';
 
 // "/" command menu, Ghost-style: type / on a line to insert cards and blocks.
 
+export interface SlashSnippet {
+  id: string;
+  name: string;
+  contentJson: string; // JSON array of ProseMirror nodes
+}
+
 export interface SlashContext {
   openImagePicker: (insertAt: Range) => void;
+  // saved snippets, provided by the editor shell (loaded once per mount)
+  getSnippets: () => SlashSnippet[];
+  deleteSnippet: (id: string) => void;
 }
 
 interface SlashItem {
   title: string;
   description: string;
   keywords: string;
-  group: 'Basic' | 'Cards';
+  group: 'Basic' | 'Cards' | 'Snippets';
   icon: string; // svg path (24 viewBox, stroked)
+  snippetId?: string;
+  onDelete?: () => void;
   run: (editor: Editor, range: Range, ctx: SlashContext) => void;
 }
 
@@ -58,16 +70,32 @@ const ITEMS: SlashItem[] = [
     icon: 'M12 3l9 18H3zM12 10v4M12 17.5h0',
     run: (editor, range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'callout' }).run(),
   },
+  {
+    title: 'Toggle', description: 'Collapsible section', keywords: 'toggle accordion collapse details faq expand', group: 'Cards',
+    icon: 'M8 5l4 4 4-4M6 13h12M6 17h8',
+    run: (editor, range) =>
+      editor.chain().focus().deleteRange(range).insertContent({ type: 'toggleCard', content: [{ type: 'paragraph' }] }).run(),
+  },
+  {
+    title: 'Table of contents', description: 'Linked outline of this document (dynamic)', keywords: 'toc contents outline sections navigation dynamic', group: 'Cards',
+    icon: 'M9 6h12M9 12h12M12 18h9M4 5.5h2v2H4zM6 11h3M7 16.5h2',
+    run: (editor, range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'tocCard' }).run(),
+  },
   {
     title: 'HTML', description: 'Raw HTML block', keywords: 'html code embed custom', group: 'Cards',
     icon: 'M8 6l-5 6 5 6M16 6l5 6-5 6',
     run: (editor, range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'htmlCard' }).run(),
   },
   {
-    title: 'Calendar', description: 'Google Calendar or ICS feed (dynamic)', keywords: 'calendar events google ics schedule month week upcoming dynamic', group: 'Cards',
+    title: 'Calendar', description: 'Site calendars, Google Calendar or any ICS feed (dynamic)', keywords: 'calendar events google ics schedule month week upcoming dynamic', group: 'Cards',
     icon: 'M3 5h18v16H3zM3 9h18M8 3v4M16 3v4M7 13h2M12 13h2M7 17h2M12 17h2',
     run: (editor, range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'calendarCard' }).run(),
   },
+  ...(CALENDAR.enabled ? [{
+    title: 'Events', description: 'Coming-up event cards, or one event with its button (dynamic)', keywords: 'events event upcoming coming up calendar card rsvp cta dynamic', group: 'Cards' as const,
+    icon: 'M3 5h18v16H3zM3 9h18M8 3v4M16 3v4M7 13h4v4H7z',
+    run: (editor: Editor, range: Range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'eventCard' }).run(),
+  } satisfies SlashItem] : []),
   {
     title: 'Info cards', description: 'Grid of cards: title, badge, details', keywords: 'info cards grid services hours schedule team features locations badge', group: 'Cards',
     icon: 'M3 5h18v14H3zM7 9h6M15.5 9h2M7 13h7M7 16h5',
@@ -89,6 +117,11 @@ const ITEMS: SlashItem[] = [
     icon: 'M3 12h18',
     run: (editor, range) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
   },
+  {
+    title: 'Heading 1', description: 'Large section heading', keywords: 'heading h1 title large', group: 'Basic',
+    icon: 'M4 5v14M14 5v14M4 12h10M18.5 9.5l1.5-1v7',
+    run: (editor, range) => editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run(),
+  },
   {
     title: 'Heading 2', description: 'Section heading', keywords: 'heading h2 title section', group: 'Basic',
     icon: 'M4 5v14M14 5v14M4 12h10M18 15c0-1 2-1.6 2-3a1.8 1.8 0 0 0-3.4-.8',
@@ -132,23 +165,27 @@ export interface SlashListHandle {
 
 const SlashList = forwardRef<SlashListHandle, ListProps>(function SlashList({ items, command }, ref) {
   const [selected, setSelected] = useState(0);
+  // snippets deleted from the open menu disappear immediately; the source
+  // list refreshes on the next menu open
+  const [hidden, setHidden] = useState<Set<string>>(() => new Set());
+  const visible = items.filter((i) => !i.snippetId || !hidden.has(i.snippetId));
   useEffect(() => setSelected(0), [items]);
 
   useImperativeHandle(ref, () => ({
     onKeyDown(e) {
-      if (e.key === 'ArrowDown') { setSelected((s) => (s + 1) % items.length); return true; }
-      if (e.key === 'ArrowUp') { setSelected((s) => (s - 1 + items.length) % items.length); return true; }
-      if (e.key === 'Enter') { if (items[selected]) command(items[selected]); return true; }
+      if (e.key === 'ArrowDown') { setSelected((s) => (s + 1) % visible.length); return true; }
+      if (e.key === 'ArrowUp') { setSelected((s) => (s - 1 + visible.length) % visible.length); return true; }
+      if (e.key === 'Enter') { if (visible[selected]) command(visible[selected]); return true; }
       return false;
     },
   }));
 
-  if (!items.length) return <div className="pe-slash"><div className="pe-slash-empty">No matches</div></div>;
+  if (!visible.length) return <div className="pe-slash"><div className="pe-slash-empty">No matches</div></div>;
 
   let lastGroup = '';
   return (
     <div className="pe-slash">
-      {items.map((item, i) => {
+      {visible.map((item, i) => {
         const header = item.group !== lastGroup ? item.group : null;
         lastGroup = item.group;
         return (
@@ -169,6 +206,22 @@ const SlashList = forwardRef<SlashListHandle, ListProps>(function SlashList({ it
                 <span className="pe-slash-title">{item.title}</span>
                 <span className="pe-slash-desc">{item.description}</span>
               </span>
+              {item.onDelete && item.snippetId && (
+                <span
+                  role="button"
+                  tabIndex={-1}
+                  className="pe-slash-del"
+                  title="Delete snippet"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    item.onDelete!();
+                    setHidden((h) => new Set(h).add(item.snippetId!));
+                  }}
+                >
+                  ✕
+                </span>
+              )}
             </button>
           </div>
         );
@@ -181,7 +234,7 @@ export const SlashMenu = Extension.create<{ context: SlashContext }>({
   name: 'slashMenu',
 
   addOptions() {
-    return { context: { openImagePicker: () => {} } };
+    return { context: { openImagePicker: () => {}, getSnippets: () => [], deleteSnippet: () => {} } };
   },
 
   addProseMirrorPlugins() {
@@ -196,7 +249,22 @@ export const SlashMenu = Extension.create<{ context: SlashContext }>({
         },
         items: ({ query }: { query: string }) => {
           const q = query.toLowerCase();
-          return ITEMS.filter(
+          const snippets: SlashItem[] = context.getSnippets().map((s) => ({
+            title: s.name,
+            description: 'Saved snippet',
+            keywords: `snippet ${s.name.toLowerCase()}`,
+            group: 'Snippets' as const,
+            icon: 'M4 7l8-4 8 4-8 4zM4 12l8 4 8-4M4 17l8 4 8-4',
+            snippetId: s.id,
+            onDelete: () => context.deleteSnippet(s.id),
+            run: (editor, range) => {
+              let content: unknown = null;
+              try { content = JSON.parse(s.contentJson); } catch { /* corrupt row: insert nothing */ }
+              if (!Array.isArray(content) || !content.length) return;
+              editor.chain().focus().deleteRange(range).insertContent(content).run();
+            },
+          }));
+          return [...ITEMS, ...snippets].filter(
             (i) => i.title.toLowerCase().includes(q) || i.keywords.includes(q)
           );
         },

package/src/components/editor/extensions/toc.tsx

@@ -0,0 +1,89 @@
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { useEffect, useState } from 'react';
+
+// Table-of-contents card: a *dynamic* block like the post list — it
+// serializes as a placeholder div (data-dyn="toc") that public routes expand
+// at request time from the body's anchored headings, so it can never go
+// stale. The editor shows a live outline built from the current document.
+
+export const TocCard = Node.create({
+  name: 'tocCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return { title: { default: 'In this article' } };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-dyn="toc"]',
+        getAttrs: (el) => ({ title: (el as HTMLElement).getAttribute('data-title') ?? '' }),
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    return ['div', { 'data-dyn': 'toc', 'data-title': node.attrs.title }];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(TocView);
+  },
+});
+
+interface OutlineItem {
+  level: number;
+  text: string;
+}
+
+function TocView({ node, editor, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const [outline, setOutline] = useState<OutlineItem[]>([]);
+
+  useEffect(() => {
+    const collect = () => {
+      const items: OutlineItem[] = [];
+      editor.state.doc.descendants((n) => {
+        if (n.type.name === 'heading' && n.textContent.trim()) {
+          items.push({ level: n.attrs.level as number, text: n.textContent });
+        }
+      });
+      setOutline(items);
+    };
+    collect();
+    editor.on('update', collect);
+    return () => {
+      editor.off('update', collect);
+    };
+  }, [editor]);
+
+  const min = outline.length ? Math.min(...outline.map((i) => i.level)) : 1;
+  return (
+    <NodeViewWrapper className={`pe-card pe-toc ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">Contents · dynamic</span>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <div className="pc-toc" contentEditable={false}>
+        <input
+          className="pe-toc-title"
+          type="text"
+          placeholder="Title (empty hides it)"
+          value={node.attrs.title}
+          onChange={(e) => updateAttributes({ title: e.target.value })}
+        />
+        {outline.length ? (
+          outline.map((i, idx) => (
+            <span key={idx} className="pc-toc-link" data-depth={i.level - min}>{i.text}</span>
+          ))
+        ) : (
+          <span className="pe-toc-empty">No headings yet — headings you write will be listed here, linked to their section.</span>
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}

package/src/components/editor/extensions/toggle.tsx

@@ -0,0 +1,70 @@
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { useState } from 'react';
+
+// Toggle card: a collapsible section — summary line + rich block content.
+// Publishes as native <details>/<summary> so the public site needs no JS;
+// the editor keeps its own open/closed state (not serialized) so collapsing
+// while writing never changes what readers see.
+
+export const ToggleCard = Node.create({
+  name: 'toggleCard',
+  group: 'block',
+  content: 'block+',
+  defining: true,
+
+  addAttributes() {
+    return { summary: { default: '', renderHTML: () => ({}) } };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'details.pc-toggle',
+        getAttrs: (el) => ({ summary: (el as HTMLElement).querySelector(':scope > summary')?.textContent ?? '' }),
+        contentElement: '.pc-toggle-body',
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    return [
+      'details',
+      { class: 'pc-toggle' },
+      ['summary', {}, node.attrs.summary],
+      ['div', { class: 'pc-toggle-body' }, 0],
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ToggleView);
+  },
+});
+
+function ToggleView({ node, updateAttributes, selected }: NodeViewProps) {
+  const [open, setOpen] = useState(true);
+  return (
+    <NodeViewWrapper className={`pc-toggle pe-toggle ${selected ? 'is-selected' : ''} ${open ? 'is-open' : ''}`}>
+      <div className="pe-toggle-head" contentEditable={false}>
+        <button
+          type="button"
+          className="pe-toggle-chevron"
+          title={open ? 'Collapse' : 'Expand'}
+          onClick={() => setOpen((v) => !v)}
+        >
+          ▸
+        </button>
+        <input
+          className="pe-toggle-summary"
+          type="text"
+          placeholder="Toggle heading…"
+          value={node.attrs.summary}
+          onChange={(e) => updateAttributes({ summary: e.target.value })}
+        />
+      </div>
+      {/* stays mounted when collapsed — ProseMirror must keep its content DOM */}
+      <NodeViewContent className="pc-toggle-body" style={open ? undefined : { display: 'none' }} />
+    </NodeViewWrapper>
+  );
+}

package/src/components/site/Pager.astro

@@ -0,0 +1,24 @@
+---
+// Numbered pagination: ← Newer · 1 2 … n · Older →. `base` is the page-1 URL;
+// later pages append ?page=N.
+interface Props { base: string; page: number; count: number }
+const { base, page, count } = Astro.props;
+const href = (n: number) => (n === 1 ? base : `${base}${base.includes('?') ? '&' : '?'}page=${n}`);
+// window of pages around the current one, with first/last always shown
+const nums: (number | '…')[] = [];
+for (let n = 1; n <= count; n++) {
+  if (n === 1 || n === count || Math.abs(n - page) <= 1) nums.push(n);
+  else if (nums[nums.length - 1] !== '…') nums.push('…');
+}
+---
+{count > 1 && (
+  <nav class="pager" aria-label="Pagination">
+    {page > 1 ? <a class="pager-step" href={href(page - 1)} rel="prev">← Newer</a> : <span class="pager-step is-off">← Newer</span>}
+    <span class="pager-nums">
+      {nums.map((n) => n === '…'
+        ? <span class="pager-gap">…</span>
+        : <a href={href(n)} aria-current={n === page ? 'page' : undefined}>{n}</a>)}
+    </span>
+    {page < count ? <a class="pager-step" href={href(page + 1)} rel="next">Older →</a> : <span class="pager-step is-off">Older →</span>}
+  </nav>
+)}

package/src/components/site/PostCard.astro

@@ -0,0 +1,64 @@
+---
+// One post teaser in three shapes, shared by the blog index, tag and author
+// archives and "Keep reading":
+//   card    — 16:10 cover (or a generated tile), meta line, title, excerpt
+//   row     — text-first list row with a small thumbnail on the right
+//   feature — the big split card for the featured post
+// Posts without a cover get a quiet generated tile (soft fill + first tag),
+// so a grid never goes ragged.
+import TagLabel from './TagLabel.astro';
+import { tagColor } from '../../lib/tagColor';
+
+interface Props {
+  variant?: 'card' | 'row' | 'feature';
+  href: string;
+  title: string;
+  excerpt?: string;
+  cover?: string;
+  coverAlt?: string;
+  date?: string;
+  datetime?: string;
+  readMins?: number;
+  tags?: { name: string; href: string }[];
+  featured?: boolean;
+  author?: { name: string; avatar?: string; href: string } | null;
+  headingLevel?: 2 | 3;
+}
+const {
+  variant = 'card', href, title, excerpt, cover, coverAlt = '', date, datetime, readMins,
+  tags = [], featured = false, author = null, headingLevel = 3,
+} = Astro.props;
+const H = `h${headingLevel}` as 'h2' | 'h3';
+const firstTag = tags[0]?.name;
+const shownTags = tags.slice(0, variant === 'feature' ? 2 : 1);
+---
+<article class:list={['post-card', `is-${variant}`]}>
+  {variant !== 'row' && (
+    <a class="post-card-media" href={href} tabindex="-1" aria-hidden="true">
+      {cover
+        ? <img src={cover} alt={coverAlt} loading={variant === 'feature' ? 'eager' : 'lazy'} />
+        : <span class="post-card-tile" style={firstTag ? `--tc:${tagColor(firstTag)}` : undefined}><span>{firstTag ?? title}</span></span>}
+    </a>
+  )}
+  <div class="post-card-body">
+    <div class="post-card-meta">
+      {featured && <TagLabel name="Featured" accent />}
+      {shownTags.map((t) => <TagLabel name={t.name} href={t.href} />)}
+      {date && <time datetime={datetime}>{date}</time>}
+      {readMins && <span class="post-card-read">{readMins} min read</span>}
+    </div>
+    <H class="post-card-title"><a href={href}>{title}</a></H>
+    {excerpt && <p class="post-card-excerpt">{excerpt}</p>}
+    {variant === 'feature' && author && (
+      <a class="post-card-author" href={author.href}>
+        {author.avatar
+          ? <img class="avatar" src={author.avatar} alt="" />
+          : <span class="avatar avatar-empty" aria-hidden="true"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8.5" r="3.5" /><path d="M5 20a7 7 0 0 1 14 0" /></svg></span>}
+        <span>{author.name}</span>
+      </a>
+    )}
+  </div>
+  {variant === 'row' && cover && (
+    <a class="post-card-thumb" href={href} tabindex="-1" aria-hidden="true"><img src={cover} alt="" loading="lazy" /></a>
+  )}
+</article>

package/src/components/site/TagLabel.astro

@@ -0,0 +1,11 @@
+---
+// A tag as marker + text. `href` makes it a link; `accent` swaps the hashed
+// color for the theme accent (used for "Featured").
+import { tagColor } from '../../lib/tagColor';
+interface Props { name: string; href?: string; accent?: boolean }
+const { name, href, accent = false } = Astro.props;
+const style = accent ? undefined : `--tc:${tagColor(name)}`;
+---
+{href
+  ? <a class:list={['tag', { 'is-accent': accent }]} href={href} style={style}>{name}</a>
+  : <span class:list={['tag', { 'is-accent': accent }]} style={style}>{name}</span>}