@acms-subir/core 0.1.0 → 0.3.0

package/src/pages/api/restore.ts

@@ -1,34 +1,12 @@
 import type { APIRoute } from 'astro';
-import { verifySessionToken, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
+import { validateSession, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
 import { getRepo } from '../../lib/repo';
 import { getMediaStore } from '../../lib/media/store';
 import { unzip } from '../../lib/backup/unzip';
-import { Page, Post, Media, Link, Tag, User, NavItem, Redirect, Settings } from '../../lib/schema';
-import { z } from 'zod';
-
-// Restore a backup ZIP produced by /api/backup. Two modes:
-//   POST /api/restore?dry=1  — parse + validate, return a report, change nothing
-//   POST /api/restore        — REPLACE all content with the backup's
-// Owner-only, like the backup download. Restored user accounts have no
-// passwords (backups never include hashes) — sign in with ADMIN_PASSWORD.
-
-const BackupContent = z.object({
-  format: z.literal('acms-backup'),
-  version: z.number(),
-  settings: Settings.partial(),
-  pages: z.array(Page),
-  posts: z.array(Post),
-  media: z.array(Media),
-  links: z.array(Link),
-  tags: z.array(Tag),
-  navItems: z.array(NavItem),
-  users: z.array(User),
-  // added in backup version 2; older backups restore with none
-  redirects: z.array(Redirect).default([]),
-});
+import { BackupContent } from '../../lib/backup/content';
 
 export const POST: APIRoute = async ({ request, cookies, locals, url }) => {
-  const sessionUserId = verifySessionToken(cookies.get(SESSION_COOKIE)?.value);
+  const sessionUserId = (await validateSession(cookies.get(SESSION_COOKIE)?.value, locals));
   if (!sessionUserId) return Response.json({ error: 'Unauthorized' }, { status: 401 });
   const repo = await getRepo(locals);
   const sessionUser = sessionUserId !== OWNER_ENV ? await repo.getUser(sessionUserId) : null;
@@ -36,7 +14,13 @@ export const POST: APIRoute = async ({ request, cookies, locals, url }) => {
     return Response.json({ error: 'Only owners can restore backups' }, { status: 403 });
   }
 
-  const form = await request.formData();
+  const origin = request.headers.get('origin');
+  if ((origin && origin !== url.origin) || request.headers.get('sec-fetch-site') === 'cross-site') {
+    return Response.json({ error: 'Cross-origin requests are not allowed.' }, { status: 403 });
+  }
+
+  let form: FormData;
+  try { form = await request.formData(); } catch { return Response.json({ error: 'Invalid multipart form.' }, { status: 400 }); }
   const file = form.get('file');
   if (!(file instanceof File) || file.size === 0) {
     return Response.json({ error: 'Missing backup file' }, { status: 400 });
@@ -54,25 +38,23 @@ export const POST: APIRoute = async ({ request, cookies, locals, url }) => {
   const contentRaw = entries.get('content.json');
   if (!contentRaw) return Response.json({ error: 'content.json missing — not an acms backup' }, { status: 400 });
 
-  const parsed = BackupContent.safeParse(JSON.parse(new TextDecoder().decode(contentRaw)));
+  let raw: unknown;
+  try { raw = JSON.parse(new TextDecoder().decode(contentRaw)); } catch { return Response.json({ error: 'content.json is not valid JSON' }, { status: 400 }); }
+  const parsed = BackupContent.safeParse(raw);
   if (!parsed.success) {
     return Response.json({ error: 'content.json failed validation — is this from a newer acms?' }, { status: 400 });
   }
   const content = parsed.data;
+  delete content.settings.ai;
+  delete content.settings.agent;
 
-  // an incomplete archive must not restore media rows whose binary is gone —
-  // that would publish permanently-404ing /media/ URLs. Rows missing their
-  // primary binary are dropped; rows missing only variants lose the variants.
-  const mediaKeys = content.media.flatMap((m) => [m.key, ...m.variants.map((v) => v.key)]);
-  const missingBinaries = mediaKeys.filter((k) => !entries.has(`media/${k}`));
-  content.media = content.media
-    .filter((m) => entries.has(`media/${m.key}`))
-    .map((m) => ({ ...m, variants: m.variants.filter((v) => entries.has(`media/${v.key}`)) }));
+  const mediaKeys = content.media.flatMap(m => [m.key, ...m.variants.map(v => v.key)]);
+  const missingBinaries = mediaKeys.filter(k => !entries.has(`media/${k}`));
 
   if (url.searchParams.get('dry')) {
     return Response.json({
       report: {
-        exportedAt: (JSON.parse(new TextDecoder().decode(contentRaw)) as { exportedAt?: string }).exportedAt ?? null,
+        exportedAt: content.exportedAt ?? null,
         posts: content.posts.length,
         pages: content.pages.length,
         media: content.media.length,
@@ -80,11 +62,19 @@ export const POST: APIRoute = async ({ request, cookies, locals, url }) => {
         tags: content.tags.length,
         navItems: content.navItems.length,
         users: content.users.length,
+        events: content.events.length,
+        calendars: content.calendars.length,
+        bookings: content.bookings.length,
+        bookingRequests: content.bookingRequests?.length ?? 0,
+        retryRecordsIncluded: content.version >= 5,
+        warnings: content.version < 5 ? ['This older backup has no booking retry records. Use a new v5 backup for migration.'] : [],
         missingBinaries: missingBinaries.length,
       },
     });
   }
 
+  if (missingBinaries.length) return Response.json({ error: 'Archive is incomplete: media files are missing. Restore cancelled.' }, { status: 400 });
+
   // media binaries first, so content never references a missing object
   const store = getMediaStore(locals);
   for (const m of content.media) {
@@ -98,5 +88,5 @@ export const POST: APIRoute = async ({ request, cookies, locals, url }) => {
   }
   await repo.restoreAll(content);
 
-  return Response.json({ ok: true, restored: { posts: content.posts.length, pages: content.pages.length, media: content.media.length } });
+  return Response.json({ ok: true, restored: { posts: content.posts.length, pages: content.pages.length, media: content.media.length, events: content.events.length, bookings: content.bookings.length, bookingRequests: content.bookingRequests?.length ?? 0 } }, { headers: { 'Cache-Control': 'no-store' } });
 };

package/src/pages/api/search.ts

@@ -3,7 +3,9 @@ import { getRepo } from '../../lib/repo';
 import { authorSlug, publicTags } from '../../lib/schema';
 import { collectionUrl, tagUrl } from '../../lib/content';
 import { localeHomeUrl, normalizePageLocale } from '../../lib/i18n';
-import { formatDate } from '../../lib/dates';
+import { formatDate, siteLocale } from '../../lib/dates';
+import { CALENDAR, eventUrl } from '../../lib/calendar/config';
+import { eventIsPublic, featuredOccurrence, formatOccurrence } from '../../lib/calendar/events';
 
 // Public search API behind the site's search modal. Published-only by
 // construction — the same contract as rss/sitemap — so it needs no auth and
@@ -11,16 +13,18 @@ import { formatDate } from '../../lib/dates';
 // language to the top of page results; it never filters. Snippets are safe
 // HTML (entity-escaped, <mark> around matches) ready for innerHTML.
 
-const LIMITS = { posts: 10, pages: 5, tags: 5, authors: 5 };
+const LIMITS = { posts: 10, pages: 5, events: 5, tags: 5, authors: 5 };
 
 export const GET: APIRoute = async ({ locals, url }) => {
   const headers = { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'public, max-age=60' };
   const q = (url.searchParams.get('q') ?? '').trim().slice(0, 100);
-  if (!q) return new Response(JSON.stringify({ posts: [], pages: [], tags: [], authors: [] }), { headers });
+  if (!q) return new Response(JSON.stringify({ posts: [], pages: [], events: [], tags: [], authors: [] }), { headers });
 
   const repo = await getRepo(locals);
   const locale = normalizePageLocale(url.searchParams.get('locale') ?? '');
-  const [results, settings] = await Promise.all([repo.searchPublished(q, { locale }), repo.getSettings()]);
+  const [results, settings, calendars] = await Promise.all([repo.searchPublished(q, { locale }), repo.getSettings(), repo.listCalendars()]);
+  const calMap = new Map(calendars.map((c) => [c.id, c]));
+  const now = Date.now();
 
   const body = {
     posts: results.posts.slice(0, LIMITS.posts).map(({ doc: p, snippet }) => ({
@@ -37,6 +41,16 @@ export const GET: APIRoute = async ({ locals, url }) => {
       snippet,
       locale: p.locale,
     })),
+    // private-calendar events never surface publicly
+    events: (CALENDAR.enabled ? results.events.filter(({ doc }) => eventIsPublic(doc, calMap)) : []).slice(0, LIMITS.events).map(({ doc: e, snippet }) => {
+      const o = featuredOccurrence(e, settings, now);
+      return {
+        title: e.title,
+        url: eventUrl(e.slug),
+        snippet,
+        date: o ? formatOccurrence(o, settings.timezone || 'UTC', siteLocale(settings)).range : '',
+      };
+    }),
     tags: results.tags.slice(0, LIMITS.tags).map(({ tag, count }) => ({ name: tag.name, url: tagUrl(tag.slug), count })),
     authors: results.authors.slice(0, LIMITS.authors).map((u) => ({ name: u.name, url: `/author/${authorSlug(u)}`, avatar: u.avatar })),
   };

package/src/pages/api/v1/availability.ts

@@ -0,0 +1,7 @@
+import { getAvailability } from '../../../lib/mobile/calendar';
+import { readRoute } from '../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../lib/mobile/http';
+export const GET = readRoute(getAvailability, false);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

package/src/pages/api/v1/bookings.ts

@@ -0,0 +1,17 @@
+import type { APIRoute } from 'astro';
+import { getRepo } from '../../../lib/repo';
+import { submitBooking } from '../../../lib/mobile/bookings';
+import { failure, limitRequest, response } from '../../../lib/mobile/http';
+import { methodNotAllowed } from '../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../lib/mobile/http';
+export const POST: APIRoute = async context => {
+  try {
+    const repo = await getRepo(context.locals);
+    let address = 'unknown';
+    try { address = context.clientAddress || address; } catch { /* shared fallback bucket */ }
+    await limitRequest(repo, address, true);
+    const result = await submitBooking(repo, context.request, context.locals);
+    return response(result.data, result.replayed ? 200 : 201, { 'Idempotency-Replayed': String(result.replayed) });
+  } catch (error) { return failure(error); }
+};
+export const ALL = () => methodNotAllowed('POST, OPTIONS');

package/src/pages/api/v1/calendars.ts

@@ -0,0 +1,7 @@
+import { listCalendars } from '../../../lib/mobile/calendar';
+import { readRoute } from '../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../lib/mobile/http';
+export const GET = readRoute(listCalendars, true);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

package/src/pages/api/v1/content/[id].ts

@@ -0,0 +1,7 @@
+import { getContent } from '../../../../lib/mobile/content';
+import { readRoute } from '../../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../../lib/mobile/http';
+export const GET = readRoute(getContent, true);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

package/src/pages/api/v1/content/index.ts

@@ -0,0 +1,7 @@
+import { listContent } from '../../../../lib/mobile/content';
+import { readRoute } from '../../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../../lib/mobile/http';
+export const GET = readRoute(listContent, true);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

package/src/pages/api/v1/events.ts

@@ -0,0 +1,7 @@
+import { listEvents } from '../../../lib/mobile/calendar';
+import { readRoute } from '../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../lib/mobile/http';
+export const GET = readRoute(listEvents, true);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

package/src/pages/api/v1/resources.ts

@@ -0,0 +1,7 @@
+import { listResources } from '../../../lib/mobile/calendar';
+import { readRoute } from '../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../lib/mobile/http';
+export const GET = readRoute(listResources, true);
+export const HEAD = GET;
+export const ALL = () => methodNotAllowed();

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

@@ -1,14 +1,18 @@
 ---
 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 { tagUrl } from '../../lib/content';
+import { publicTags, slugify } from '../../lib/schema';
 import { authorSlug } from '../../lib/schema';
 import { formatDate } from '../../lib/dates';
 import { CONTENT, collectionUrl } from '../../lib/content';
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 12;
 const { slug } = Astro.params;
 const repo = await getRepo(Astro.locals);
-const [users, settings] = await Promise.all([repo.listUsers(), repo.getSettings()]);
+const [users, settings, tags] = await Promise.all([repo.listUsers(), repo.getSettings(), repo.listTags()]);
 // stored slug wins; slugified name is the fallback so profiles work untouched
 const author = users.find((u) => authorSlug(u) === slug);
 if (!author) return new Response(null, { status: 404, statusText: 'Not found' });
@@ -26,41 +30,45 @@ 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);
+const tagLinks = (names: string[]) => publicTags(names).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={author.name} description={author.bio || `${CONTENT.posts.plural} by ${author.name}`}>
-  <header class="author-hero">
-    {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>
-    )}
-    <div>
-      <p class="tag-kicker">Author · {allPosts.length} {(allPosts.length === 1 ? CONTENT.posts.singular : CONTENT.posts.plural).toLowerCase()}</p>
-      <h1>{author.name}</h1>
-      {author.bio && <p class="tag-desc">{author.bio}</p>}
+  <div class="wide archive">
+    <header class="profile-head">
+      {author.avatar ? (
+        <img class="profile-avatar" src={author.avatar} alt={author.name} />
+      ) : (
+        <span class="profile-avatar avatar-empty" aria-hidden="true"><svg viewBox="0 0 24 24" width="30" height="30" 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>
+        <h1>{author.name}</h1>
+        {author.bio && <p class="page-lede">{author.bio}</p>}
+        <p class="profile-count">{allPosts.length} {(allPosts.length === 1 ? CONTENT.posts.singular : CONTENT.posts.plural).toLowerCase()}</p>
+      </div>
+    </header>
+    {posts.length === 0 && <p class="muted-note">No published {CONTENT.posts.plural.toLowerCase()} yet.</p>}
+    <div class:list={['post-grid', `is-${layout}`]}>
+      {posts.map((p) => (
+        <PostCard
+          variant={layout === 'cards' ? 'card' : 'row'}
+          headingLevel={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>
-  </header>
-  {posts.length === 0 && <p>No published {CONTENT.posts.plural.toLowerCase()} yet.</p>}
-  <ul class="post-list">
-    {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>
-  )}
+    <Pager base={base} page={pageNum} count={pageCount} />
+  </div>
 </Site>

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

@@ -2,11 +2,14 @@
 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';
 import { siteOrigin } from '../../lib/seo';
 import { formatDate } from '../../lib/dates';
 import { collectionFromPath, collectionUrl, tagUrl } from '../../lib/content';
@@ -19,18 +22,20 @@ 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' });
 }
 const authorIds = post.authorIds.length ? post.authorIds : post.authorId ? [post.authorId] : [];
-const [tags, allUsers, allPosts, settings, allMedia] = await Promise.all([
+const [tags, allUsers, allPosts, rawSettings, allMedia] = await Promise.all([
   repo.listTags(),
   authorIds.length ? repo.listUsers() : Promise.resolve([]),
   repo.listPublishedPosts(col.key), // related reading stays within the collection
   repo.getSettings(),
   post.cover.startsWith('/media/') ? repo.listMedia() : Promise.resolve([]),
 ]);
+// ?designPreview=1 (admin-only) renders the staged Design-screen changes
+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))
@@ -69,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);
@@ -108,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">
@@ -128,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)) && (
@@ -147,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 && (
@@ -200,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) => {
@@ -236,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>