@acms-subir/core 0.2.0 → 0.3.1

package/src/pages/blog/[slug].astro

@@ -2,9 +2,11 @@
 import Site from '../../layouts/Site.astro';
 import { getRepo } from '../../lib/repo';
 import { renderMarkdown } from '../../lib/markdown';
-import { expandDynamicBlocks } from '../../lib/dynamicBlocks';
+import { expandDynamicBlocks, extractToc } from '../../lib/dynamicBlocks';
+import TagLabel from '../../components/site/TagLabel.astro';
+import PostCard from '../../components/site/PostCard.astro';
 import { highlightCodeHtml } from '../../lib/highlightCode';
-import { verifySessionToken, SESSION_COOKIE } from '../../lib/auth';
+import { validateSession, SESSION_COOKIE } from '../../lib/auth';
 import { slugify, authorSlug, publicTags } from '../../lib/schema';
 import { resolveDesign } from '../../lib/theme';
 import { effectiveSettings } from '../../lib/designPreview';
@@ -20,7 +22,7 @@ const { slug } = Astro.params;
 const repo = await getRepo(Astro.locals);
 const post = slug ? await repo.getPostBySlug(slug, col.key) : null;
 
-const isAdmin = verifySessionToken(Astro.cookies.get(SESSION_COOKIE)?.value);
+const isAdmin = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
 if (!post || (post.status !== 'published' && !isAdmin)) {
   return new Response(null, { status: 404, statusText: 'Not found' });
 }
@@ -33,7 +35,7 @@ const [tags, allUsers, allPosts, rawSettings, allMedia] = await Promise.all([
   post.cover.startsWith('/media/') ? repo.listMedia() : Promise.resolve([]),
 ]);
 // ?designPreview=1 (admin-only) renders the staged Design-screen changes
-const settings = effectiveSettings(rawSettings, Astro.url, Astro.cookies);
+const settings = await effectiveSettings(rawSettings, Astro.url, Astro.cookies, Astro.locals);
 // ordered author objects; the first is the primary (gets the author card)
 const authors = authorIds
   .map((id) => allUsers.find((u) => u.id === id))
@@ -72,6 +74,13 @@ const byOverlap = allPosts
   .sort((a, b) => b.shared - a.shared || (b.p.publishedAt ?? 0) - (a.p.publishedAt ?? 0))
   .map((r) => r.p);
 const related = byOverlap.slice(0, 3);
+const relatedReadMins = (p: (typeof allPosts)[number]) =>
+  Math.max(1, Math.round((p.bodyHtml || p.body).replace(/<[^>]+>/g, ' ').split(/\s+/).filter(Boolean).length / 220));
+const tagLinks = (names: string[]) => publicTags(names).map((n) => ({ name: n, href: tagUrl(tagSlug(n)) }));
+// "On this page" rail: only worth it with a few sections to jump between
+const toc = extractToc(html).filter((i) => i.level > 1);
+const showToc = po.toc && toc.length >= 3;
+const tocMin = toc.length ? Math.min(...toc.map((i) => i.level)) : 2;
 
 const heroOverlay = po.cover === 'overlay' && Boolean(post.cover);
 const iso = (ts: number | null) => (ts ? new Date(ts).toISOString() : undefined);
@@ -111,11 +120,10 @@ const shareLi = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI
   {PostTemplate ? (
     <PostTemplate post={post} html={html} authors={authors} settings={settings} related={related} />
   ) : (
-  <article>
+  <>
+  <article class="post">
     {post.status !== 'published' && (
-      <p style="background:#fff3cd;border:1px solid #ffe08a;border-radius:8px;padding:8px 14px;font-size:14px;">
-        Draft preview — only you can see this post.
-      </p>
+      <p class="notice is-warning">Draft preview. Only you can see this post.</p>
     )}
     {heroOverlay ? (
       <header class="post-hero">
@@ -131,7 +139,7 @@ const shareLi = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI
         <div class="post-hero-scrim" aria-hidden="true" />
         <div class="post-hero-content">
           <div class="post-kicker">
-            {visibleTags.map((t) => <a class="tag" href={tagUrl(tagSlug(t))}>{t}</a>)}
+            {visibleTags.map((t) => <TagLabel name={t} href={tagUrl(tagSlug(t))} />)}
           </div>
           <h1>{post.title}</h1>
           {(metaBits || (po.byline && author)) && (
@@ -150,52 +158,80 @@ const shareLi = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI
       </header>
     ) : (
       <header class="post-header">
-        <div class="post-kicker">
-          {visibleTags.map((t) => <a class="tag" href={tagUrl(tagSlug(t))}>{t}</a>)}
-        </div>
+        {visibleTags.length > 0 && (
+          <div class="post-kicker">
+            {visibleTags.map((t) => <TagLabel name={t} href={tagUrl(tagSlug(t))} />)}
+          </div>
+        )}
         <h1>{post.title}</h1>
-        {(metaBits || (po.byline && author)) && (
-          <div class="post-meta">
-            {po.showDate && post.publishedAt && <time datetime={iso(post.publishedAt)}>{fmt(post.publishedAt)}</time>}
-            {po.showDate && post.publishedAt && po.showReadingTime && ' \u00b7 '}
-            {po.showReadingTime && `${readMins} min read`}
-            {po.byline && author && (
-              <span class="byline">{metaBits && '\u00b7 '}by {authors.map((a, i) => (
-                  <>{i > 0 && (i === authors.length - 1 ? ' & ' : ', ')}<a href={`/author/${authorSlug(a)}`}>{a.name}</a></>
-                ))}</span>
+        {post.excerpt && <p class="post-dek">{post.excerpt}</p>}
+        {(metaBits || (po.byline && author) || po.share) && (
+          <div class="post-byline-row">
+            <div class="post-byline">
+              {po.byline && authors.length > 0 && (
+                <span class="avatar-stack">
+                  {authors.slice(0, 3).map((a) => a.avatar
+                    ? <img class="avatar" src={a.avatar} alt="" />
+                    : <span class="avatar avatar-empty" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" 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>
+              )}
+              <div>
+                {po.byline && authors.length > 0 && (
+                  <span class="byline">{authors.map((a, i) => (
+                    <>{i > 0 && (i === authors.length - 1 ? ' & ' : ', ')}<a href={`/author/${authorSlug(a)}`}>{a.name}</a></>
+                  ))}</span>
+                )}
+                {metaBits && (
+                  <span class="post-meta">
+                    {po.showDate && post.publishedAt && <time datetime={iso(post.publishedAt)}>{fmt(post.publishedAt)}</time>}
+                    {po.showDate && post.publishedAt && po.showReadingTime && ' \u00b7 '}
+                    {po.showReadingTime && `${readMins} min read`}
+                  </span>
+                )}
+              </div>
+            </div>
+            {po.share && (
+        <div class="post-share" aria-label="Share this post">
+          <a href={shareX} target="_blank" rel="noopener" aria-label="Share on X">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.9 2H22l-6.8 7.8L23.2 22h-6.3l-4.9-6.4L6.4 22H3.3l7.3-8.3L1.6 2H8l4.4 5.9L18.9 2zm-1.1 18h1.7L7.1 3.7H5.3L17.8 20z"/></svg>
+          </a>
+          <a href={shareLi} target="_blank" rel="noopener" aria-label="Share on LinkedIn">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.4 20.4h-3.5v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.4V9h3.4v1.6a3.7 3.7 0 0 1 3.3-1.8c3.6 0 4.2 2.3 4.2 5.4v6.2zM5.3 7.4a2 2 0 1 1 0-4.1 2 2 0 0 1 0 4.1zM7.1 20.4H3.6V9h3.5v11.4z"/></svg>
+          </a>
+          <button type="button" class="post-share-copy" data-url={shareUrl} aria-label="Copy link">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5"/></svg>
+          </button>
+        </div>
             )}
           </div>
         )}
       </header>
     )}
     {post.cover && !heroOverlay && po.cover !== 'hidden' && (
-      <img
-        class={`post-cover ${po.cover === 'full' ? 'is-full' : ''}`}
-        src={post.cover}
-        alt={post.coverAlt}
-        width={coverMedia?.width || undefined}
-        height={coverMedia?.height || undefined}
-        srcset={coverSrcset}
-        sizes={coverSrcset ? '(max-width: 760px) 100vw, 760px' : undefined}
-      />
+      <figure class:list={['post-cover-wrap', { 'is-full': po.cover === 'full' }]}>
+        <img
+          class:list={['post-cover', { 'is-full': po.cover === 'full' }]}
+          src={post.cover}
+          alt={post.coverAlt}
+          width={coverMedia?.width || undefined}
+          height={coverMedia?.height || undefined}
+          srcset={coverSrcset}
+          sizes={coverSrcset ? (po.cover === 'full' ? '100vw' : '(max-width: 1000px) 100vw, 1000px') : undefined}
+        />
+      </figure>
     )}
 
-    <div class="post-layout">
-      <div class="post-content" set:html={html} />
-      {po.share && (
-      <aside class="post-share" aria-label="Share this post">
-        <span class="post-share-label">Share</span>
-        <a href={shareX} target="_blank" rel="noopener" aria-label="Share on X">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-6.8 7.8L23.2 22h-6.3l-4.9-6.4L6.4 22H3.3l7.3-8.3L1.6 2H8l4.4 5.9L18.9 2zm-1.1 18h1.7L7.1 3.7H5.3L17.8 20z"/></svg>
-        </a>
-        <a href={shareLi} target="_blank" rel="noopener" aria-label="Share on LinkedIn">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.4 20.4h-3.5v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.4V9h3.4v1.6a3.7 3.7 0 0 1 3.3-1.8c3.6 0 4.2 2.3 4.2 5.4v6.2zM5.3 7.4a2 2 0 1 1 0-4.1 2 2 0 0 1 0 4.1zM7.1 20.4H3.6V9h3.5v11.4z"/></svg>
-        </a>
-        <button type="button" class="post-share-copy" data-url={shareUrl} aria-label="Copy link">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5"/></svg>
-        </button>
-      </aside>
+    <div class:list={['post-layout', { 'has-toc': showToc }]}>
+      {showToc && (
+        <aside class="post-toc">
+          <nav aria-label="On this page">
+            <span class="post-toc-title">On this page</span>
+            {toc.map((i) => <a href={`#${i.id}`} data-depth={i.level - tocMin}>{i.text}</a>)}
+          </nav>
+        </aside>
       )}
+      <div class="post-content" set:html={html} />
     </div>
 
     {po.authorCard && author && (
@@ -203,34 +239,38 @@ const shareLi = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI
         {author.avatar ? (
           <img class="author-avatar" src={author.avatar} alt={author.name} />
         ) : (
-          <span class="author-avatar author-initial" aria-hidden="true">{author.name.slice(0, 1)}</span>
+          <span class="author-avatar avatar-empty" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="8.5" r="3.5" /><path d="M5 20a7 7 0 0 1 14 0" /></svg></span>
         )}
-        <div>
+        <div class="author-card-text">
           <h2 class="author-card-name"><a href={`/author/${authorSlug(author)}`}>{author.name}</a></h2>
           {author.bio && <p class="author-card-bio">{author.bio}</p>}
-          <a class="author-card-more" href={`/author/${authorSlug(author)}`}>More posts</a>
         </div>
+        <a class="btn secondary sm author-card-more" href={`/author/${authorSlug(author)}`}>More posts</a>
       </aside>
     )}
-
-    {po.related && related.length > 0 && (
-      <section class="related">
-        <h2 class="related-title">Related reading</h2>
-        <div class="related-grid">
-          {related.map((p) => (
-            <article class="related-card">
-              {p.cover && (
-                <a class="related-thumb" href={collectionUrl(col.key, p.slug)}><img src={p.cover} alt={p.coverAlt} loading="lazy" /></a>
-              )}
-              <div class="post-meta">{p.publishedAt && <time datetime={iso(p.publishedAt)}>{fmt(p.publishedAt)}</time>}</div>
-              <h3><a href={collectionUrl(col.key, p.slug)}>{p.title}</a></h3>
-              {p.excerpt && <p class="related-excerpt">{p.excerpt}</p>}
-            </article>
-          ))}
-        </div>
-      </section>
-    )}
   </article>
+
+  {po.related && related.length > 0 && (
+    <section class="related wide">
+      <h2 class="related-title">Keep reading</h2>
+      <div class="post-grid is-cards">
+        {related.map((p) => (
+          <PostCard
+            href={collectionUrl(col.key, p.slug)}
+            title={p.title}
+            cover={p.cover}
+            coverAlt={p.coverAlt}
+            date={formatDate(p.publishedAt, settings, 'short')}
+            datetime={iso(p.publishedAt)}
+            readMins={relatedReadMins(p)}
+            tags={tagLinks(p.tags)}
+          />
+        ))}
+      </div>
+    </section>
+  )}
+  {po.progress && <div class="read-progress" aria-hidden="true"><i></i></div>}
+  </>
   )}
   <script>
     document.querySelector<HTMLButtonElement>('.post-share-copy')?.addEventListener('click', async (e) => {
@@ -239,5 +279,36 @@ const shareLi = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI
       btn.classList.add('is-copied');
       setTimeout(() => btn.classList.remove('is-copied'), 1200);
     });
+
+    // reading progress: how far the article body has scrolled past the top
+    const bar = document.querySelector<HTMLElement>('.read-progress i');
+    const body = document.querySelector<HTMLElement>('.post-content');
+    if (bar && body) {
+      const update = () => {
+        const r = body.getBoundingClientRect();
+        const total = r.height - window.innerHeight * 0.6;
+        const done = Math.min(1, Math.max(0, -r.top / Math.max(1, total)));
+        bar.style.transform = `scaleX(${done})`;
+      };
+      addEventListener('scroll', update, { passive: true });
+      addEventListener('resize', update);
+      update();
+    }
+
+    // "On this page": mark the section currently in view
+    const links = [...document.querySelectorAll<HTMLAnchorElement>('.post-toc a')];
+    if (links.length && 'IntersectionObserver' in window) {
+      const byId = new Map(links.map((a) => [decodeURIComponent(a.hash.slice(1)), a]));
+      const visible = new Set<string>();
+      const mark = () => {
+        const first = [...byId.keys()].find((id) => visible.has(id));
+        if (first) links.forEach((a) => a.toggleAttribute('aria-current', a === byId.get(first)));
+      };
+      const io = new IntersectionObserver((entries) => {
+        entries.forEach((e) => (e.isIntersecting ? visible.add(e.target.id) : visible.delete(e.target.id)));
+        mark();
+      }, { rootMargin: '-80px 0px -55% 0px' });
+      byId.forEach((_, id) => { const el = document.getElementById(id); if (el) io.observe(el); });
+    }
   </script>
 </Site>

package/src/pages/blog/index.astro

@@ -1,8 +1,12 @@
 ---
 import Site from '../../layouts/Site.astro';
+import PostCard from '../../components/site/PostCard.astro';
+import Pager from '../../components/site/Pager.astro';
 import { getRepo } from '../../lib/repo';
-import { publicTags, slugify } from '../../lib/schema';
+import { publicTags, slugify, authorSlug } from '../../lib/schema';
 import { formatDate } from '../../lib/dates';
+import { resolveDesign } from '../../lib/theme';
+import { effectiveSettings } from '../../lib/designPreview';
 import { collectionFromPath, collectionUrl, tagUrl } from '../../lib/content';
 
 // One file serves every collection's index — injectRoute can't pass props,
@@ -10,42 +14,103 @@ import { collectionFromPath, collectionUrl, tagUrl } from '../../lib/content';
 const col = collectionFromPath(Astro.url.pathname);
 if (!col) return new Response(null, { status: 404, statusText: 'Not found' });
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 12;
 const repo = await getRepo(Astro.locals);
-const [allPosts, tags, users, settings] = await Promise.all([repo.listPublishedPosts(col.key), repo.listTags(), repo.listUsers(), repo.getSettings()]);
+const [allPosts, tags, users, rawSettings] = await Promise.all([repo.listPublishedPosts(col.key), repo.listTags(), repo.listUsers(), repo.getSettings()]);
+const settings = await effectiveSettings(rawSettings, Astro.url, Astro.cookies, Astro.locals);
+const design = resolveDesign(settings);
 
-const pageCount = Math.max(1, Math.ceil(allPosts.length / PAGE_SIZE));
+// page 1 leads with the featured post (if any) as a big split card; it's
+// pulled out of the grid so it never shows twice
+const featured = allPosts.find((p) => p.featured) ?? null;
+const rest = featured ? allPosts.filter((p) => p.id !== featured.id) : allPosts;
+const pageCount = Math.max(1, Math.ceil(rest.length / PAGE_SIZE));
 const pageNum = Math.min(pageCount, Math.max(1, Number(Astro.url.searchParams.get('page')) || 1));
-const posts = allPosts.slice((pageNum - 1) * PAGE_SIZE, pageNum * PAGE_SIZE);
+const posts = rest.slice((pageNum - 1) * PAGE_SIZE, pageNum * PAGE_SIZE);
+const lead = pageNum === 1 ? featured : null;
+
+// 'auto' picks cards when at least half the posts have covers — a text-first
+// blog gets honest list rows instead of a grid of generated tiles
+const withCover = allPosts.filter((p) => p.cover).length;
+const layout = design.tokens.blogLayout === 'auto'
+  ? (allPosts.length && withCover / allPosts.length >= 0.5 ? 'cards' : 'list')
+  : design.tokens.blogLayout;
 
 const tagSlug = (name: string) =>
   tags.find((t) => t.name.toLowerCase() === name.toLowerCase())?.slug ?? slugify(name);
-const authorName = (id: string | null) => (id ? users.find((u) => u.id === id)?.name : undefined);
-const fmt = (ts: number | null) =>
-  formatDate(ts, settings, 'short');
+const tagLinks = (names: string[]) => publicTags(names).map((n) => ({ name: n, href: tagUrl(tagSlug(n)) }));
+const readMins = (p: (typeof allPosts)[number]) =>
+  Math.max(1, Math.round((p.bodyHtml || p.body).replace(/<[^>]+>/g, ' ').split(/\s+/).filter(Boolean).length / 220));
+const authorOf = (p: (typeof allPosts)[number]) => {
+  const id = p.authorIds[0] ?? p.authorId;
+  const u = id ? users.find((x) => x.id === id) : undefined;
+  return u ? { name: u.name, avatar: u.avatar || undefined, href: `/author/${authorSlug(u)}` } : null;
+};
+
+// filter tabs: the collection's most-used public tags, with counts
+// (case-insensitive: "Product" and "product" are one tag, first spelling wins)
+const counts = new Map<string, [string, number]>();
+for (const p of allPosts) for (const t of publicTags(p.tags)) {
+  const k = t.toLowerCase();
+  counts.set(k, [counts.get(k)?.[0] ?? t, (counts.get(k)?.[1] ?? 0) + 1]);
+}
+const topTags = [...counts.values()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).slice(0, 6);
+const iso = (ts: number | null) => (ts ? new Date(ts).toISOString() : undefined);
 ---
 
 <Site title={col.plural}>
-  <h1>{col.plural}</h1>
-  {posts.length === 0 && <p>No {col.plural.toLowerCase()} yet.</p>}
-  <ul class="post-list">
-    {posts.map((p) => (
-      <li>
-        <a href={collectionUrl(col.key, p.slug)}>{p.title}</a>
-        <div class="post-meta">
-          {fmt(p.publishedAt)}
-          {authorName(p.authorId) && <span class="byline">· {authorName(p.authorId)}</span>}
-          {publicTags(p.tags).map((t) => <a class="tag" href={tagUrl(tagSlug(t))}>{t}</a>)}
-        </div>
-        {p.excerpt && <p class="post-excerpt">{p.excerpt}</p>}
-      </li>
-    ))}
-  </ul>
-  {pageCount > 1 && (
-    <nav class="pager" aria-label="Pagination">
-      {pageNum > 1 ? <a href={pageNum === 2 ? col.base : `${col.base}?page=${pageNum - 1}`}>← Newer</a> : <span />}
-      <span class="pager-status">Page {pageNum} of {pageCount}</span>
-      {pageNum < pageCount ? <a href={`${col.base}?page=${pageNum + 1}`}>Older →</a> : <span />}
-    </nav>
-  )}
+  <div class="wide blog-index">
+    <header class="page-head">
+      <h1>{col.plural}</h1>
+      {settings.tagline && <p class="page-lede">{settings.tagline}</p>}
+    </header>
+    {topTags.length > 1 && (
+      <nav class="filter-tabs" aria-label="Filter by tag">
+        <a href={col.base} aria-current="page">All <small>{allPosts.length}</small></a>
+        {topTags.map(([name, n]) => <a href={tagUrl(tagSlug(name))}>{name} <small>{n}</small></a>)}
+      </nav>
+    )}
+    {allPosts.length === 0 && (
+      <div class="empty-state">
+        <span class="empty-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 13 6.5 5h11L20 13v5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18v-5Z" /><path d="M4 13h4.5l1 2h5l1-2H20" /></svg></span>
+        <b>No {col.plural.toLowerCase()} yet</b>
+        <span>New {col.plural.toLowerCase()} will show up here.</span>
+      </div>
+    )}
+    {lead && (
+      <PostCard
+        variant="feature"
+        headingLevel={2}
+        href={collectionUrl(col.key, lead.slug)}
+        title={lead.title}
+        excerpt={lead.excerpt}
+        cover={lead.cover}
+        coverAlt={lead.coverAlt}
+        date={formatDate(lead.publishedAt, settings, 'short')}
+        datetime={iso(lead.publishedAt)}
+        readMins={readMins(lead)}
+        tags={tagLinks(lead.tags)}
+        featured
+        author={authorOf(lead)}
+      />
+    )}
+    <div class:list={['post-grid', `is-${layout}`]}>
+      {posts.map((p) => (
+        <PostCard
+          variant={layout === 'cards' ? 'card' : 'row'}
+          headingLevel={2}
+          href={collectionUrl(col.key, p.slug)}
+          title={p.title}
+          excerpt={p.excerpt}
+          cover={p.cover}
+          coverAlt={p.coverAlt}
+          date={formatDate(p.publishedAt, settings, 'short')}
+          datetime={iso(p.publishedAt)}
+          readMins={readMins(p)}
+          tags={tagLinks(p.tags)}
+        />
+      ))}
+    </div>
+    <Pager base={col.base} page={pageNum} count={pageCount} />
+  </div>
 </Site>

package/src/pages/blog/tag/[slug].astro

@@ -1,14 +1,17 @@
 ---
 import Site from '../../../layouts/Site.astro';
+import PostCard from '../../../components/site/PostCard.astro';
+import Pager from '../../../components/site/Pager.astro';
 import { getRepo } from '../../../lib/repo';
-import { isInternalTag } from '../../../lib/schema';
+import { tagColor } from '../../../lib/tagColor';
+import { isInternalTag, publicTags, slugify } from '../../../lib/schema';
 import { formatDate } from '../../../lib/dates';
 import { CONTENT, collectionUrl, postsIndexUrl, tagUrl } from '../../../lib/content';
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 12;
 const { slug } = Astro.params;
 const repo = await getRepo(Astro.locals);
-const [tag, settings] = await Promise.all([slug ? repo.getTagBySlug(slug) : Promise.resolve(null), repo.getSettings()]);
+const [tag, settings, tags] = await Promise.all([slug ? repo.getTagBySlug(slug) : Promise.resolve(null), repo.getSettings(), repo.listTags()]);
 // internal (#-prefixed) tags never get a public archive
 if (!tag || isInternalTag(tag.name)) return new Response(null, { status: 404, statusText: 'Not found' });
 
@@ -40,44 +43,46 @@ const fmt = (ts: number | null) =>
   formatDate(ts, settings, 'short');
 const readMins = (p: (typeof posts)[number]) =>
   Math.max(1, Math.round((p.bodyHtml || p.body).replace(/<[^>]+>/g, ' ').split(/\s+/).filter(Boolean).length / 220));
+const tagSlug = (name: string) =>
+  tags.find((t) => t.name.toLowerCase() === name.toLowerCase())?.slug ?? slugify(name);
+// the archive's own tag is implied, so cards show the post's other tags
+const tagLinks = (names: string[]) =>
+  publicTags(names).filter((n) => n.toLowerCase() !== tag.name.toLowerCase()).map((n) => ({ name: n, href: tagUrl(tagSlug(n)) }));
+const layout = allPosts.length && allPosts.filter((p) => p.cover).length / allPosts.length >= 0.5 ? 'cards' : 'list';
+const iso = (ts: number | null) => (ts ? new Date(ts).toISOString() : undefined);
 ---
 
 <Site title={tag.name} description={tag.description || `Tagged ${tag.name}`}>
-  <header class="tag-hero">
-    <p class="tag-kicker">Collection · {allPosts.length} {countNoun}</p>
-    <h1>{tag.name}</h1>
-    {tag.description && <p class="tag-desc">{tag.description}</p>}
-  </header>
-  {posts.length === 0 && <p>Nothing with this tag yet.</p>}
-  {groups.map((g) => (
-    <>
-      {multi && <h2 class="tag-group">{g.plural}</h2>}
-      <ul class="post-list">
-        {g.posts.map((p) => (
-          <li class="post-item">
-            {p.cover && (
-              <a class="post-thumb" href={collectionUrl(p.collection, p.slug)}><img src={p.cover} alt={p.coverAlt} loading="lazy" /></a>
-            )}
-            <div>
-              <a href={collectionUrl(p.collection, p.slug)}>{p.title}</a>
-              <div class="post-meta">{fmt(p.publishedAt)} · {readMins(p)} min read</div>
-              {p.excerpt && <p class="post-excerpt">{p.excerpt}</p>}
-            </div>
-          </li>
-        ))}
-      </ul>
-    </>
-  ))}
-  {pageCount > 1 && (
-    <nav class="pager" aria-label="Pagination">
-      {pageNum > 1 ? <a href={pageNum === 2 ? base : `${base}?page=${pageNum - 1}`}>← Newer</a> : <span />}
-      <span class="pager-status">Page {pageNum} of {pageCount}</span>
-      {pageNum < pageCount ? <a href={`${base}?page=${pageNum + 1}`}>Older →</a> : <span />}
-    </nav>
-  )}
-  <p style="margin-top:28px"><a href={postsIndexUrl()}>← All {CONTENT.posts.plural.toLowerCase()}</a></p>
+  <div class="wide archive">
+    <header class="page-head">
+      <p class="page-kicker"><span class="tag" style={`--tc:${tagColor(tag.name)}`}>Tag</span> <span>{allPosts.length} {countNoun}</span></p>
+      <h1>{tag.name}</h1>
+      {tag.description && <p class="page-lede">{tag.description}</p>}
+    </header>
+    {posts.length === 0 && <p class="muted-note">Nothing with this tag yet.</p>}
+    {groups.map((g) => (
+      <>
+        {multi && <h2 class="archive-group">{g.plural}</h2>}
+        <div class:list={['post-grid', `is-${layout}`]}>
+          {g.posts.map((p) => (
+            <PostCard
+              variant={layout === 'cards' ? 'card' : 'row'}
+              headingLevel={multi ? 3 : 2}
+              href={collectionUrl(p.collection, p.slug)}
+              title={p.title}
+              excerpt={p.excerpt}
+              cover={p.cover}
+              coverAlt={p.coverAlt}
+              date={fmt(p.publishedAt)}
+              datetime={iso(p.publishedAt)}
+              readMins={readMins(p)}
+              tags={tagLinks(p.tags)}
+            />
+          ))}
+        </div>
+      </>
+    ))}
+    <Pager base={base} page={pageNum} count={pageCount} />
+    <p class="archive-back"><a href={postsIndexUrl()}>← All {CONTENT.posts.plural.toLowerCase()}</a></p>
+  </div>
 </Site>
-
-<style>
-  .tag-group { font-size: 1.05rem; margin: 1.6rem 0 0.2rem; color: var(--muted, inherit); }
-</style>

package/src/pages/book/[resource]/[link].astro

@@ -0,0 +1,70 @@
+---
+import Site from '../../../layouts/Site.astro';
+import BookingFlow from '../../../components/booking/BookingFlow.astro';
+import { getRepo } from '../../../lib/repo';
+import { bookingsEnabled, manageUrl, resourceUrl } from '../../../lib/calendar/config';
+import { availabilityContext, createResourceBooking, rescheduleBooking, BookingError } from '../../../lib/booking/service';
+import { siteOrigin } from '../../../lib/seo';
+import { waitUntilFrom } from '../../../lib/webhooks';
+
+// One booking link: pick → answer → done. POSTs create the booking (or move
+// one when ?reschedule=<token>) and land on the manage page.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const resource = await repo.getResourceBySlug(Astro.params.resource ?? '');
+const link = resource ? await repo.getBookingLinkBySlug(resource.id, Astro.params.link ?? '') : null;
+if (!resource || !link || !link.active) return new Response(null, { status: 404, statusText: 'Not found' });
+const settings = await repo.getSettings();
+const origin = siteOrigin(settings, Astro.url);
+const flow = { origin, locals: Astro.locals, waitUntil: waitUntilFrom(Astro.locals) };
+const rescheduleToken = Astro.url.searchParams.get('reschedule') ?? '';
+const reschedule = rescheduleToken ? await repo.getBookingByToken(rescheduleToken) : null;
+if (reschedule && reschedule.linkId !== link.id) return Astro.redirect(manageUrl(reschedule.manageToken));
+
+let error = '';
+let values: Record<string, string> = {};
+// after a failed submit, re-open the form on the time that was chosen
+const flowUrl = new URL(Astro.url);
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  values = Object.fromEntries([...form.entries()].map(([k, v]) => [k, String(v)]));
+  const start = Number(form.get('start'));
+  const end = Number(form.get('end'));
+  try {
+    if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) throw new BookingError(400, 'Pick a time first.');
+    const token = String(form.get('reschedule') || '');
+    if (token) {
+      const b = await repo.getBookingByToken(token);
+      if (!b || b.linkId !== link.id) throw new BookingError(404, 'That booking can’t be found.');
+      await rescheduleBooking(repo, b, start, end, flow);
+      return Astro.redirect(`${manageUrl(b.manageToken)}?moved=1`);
+    }
+    const answers: Record<string, string> = {};
+    for (const qn of link.questions) answers[qn.id] = String(form.get(`q_${qn.id}`) ?? '');
+    const b = await createResourceBooking(repo, {
+      resource, link, start, end,
+      booker: { name: String(form.get('name') ?? ''), email: String(form.get('email') ?? ''), phone: String(form.get('phone') ?? ''), answers },
+    }, flow);
+    if (link.redirectUrl && /^https?:\/\//.test(link.redirectUrl)) return Astro.redirect(link.redirectUrl);
+    return Astro.redirect(`${manageUrl(b.manageToken)}?new=1`);
+  } catch (err) {
+    error = err instanceof BookingError ? err.message : 'Something went wrong. Please try again.';
+    if (Number.isFinite(start)) {
+      const tz = resource.timezone || settings.timezone || 'UTC';
+      flowUrl.searchParams.set('start', String(start));
+      flowUrl.searchParams.set('date', new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }).format(start));
+      if (link.mode !== 'slots') flowUrl.searchParams.set('len', String(Math.round((end - start) / 60_000)));
+    }
+    if (!(err instanceof BookingError)) console.error(err);
+    Astro.response.status = err instanceof BookingError ? err.status : 500;
+  }
+}
+const ctx = await availabilityContext(repo, resource, link, settings, Date.now(), reschedule?.id);
+---
+
+<Site title={`${link.name} · ${resource.name}`} description={link.description || `Book ${resource.name}.`} noindex={link.visibility === 'unlisted' || resource.visibility === 'unlisted'}>
+  <div class="pc-bkpage">
+    <BookingFlow resource={resource} link={link} ctx={ctx} settings={settings} url={flowUrl} error={error} values={values} reschedule={reschedule} />
+    <p class="pc-bk-foot"><a href={resourceUrl(resource.slug)}>Other ways to book {resource.name}</a></p>
+  </div>
+</Site>