@tokenoftrust/storefront-runner 1.4.1 → 2.0.0

package/apps/storefront/src/pages/api/newsletter/[collection]/subscribe.ts

@@ -0,0 +1,146 @@
+/**
+ * N2 — newsletter double-opt-in subscribe. `POST /api/newsletter/<collection>/subscribe`
+ * with body `{ email }` (JSON) or an `email` form field.
+ *
+ * Discipline (mirrors the other public POSTs, `blog/.../react.ts` / `newsletter.ts`):
+ *   - `tenant_id` is resolved from `locals.tenant`, `collection` from the ROUTE —
+ *     NEVER the request body (tenant is the isolation boundary).
+ *   - A soft per-IP KV rate limit (`kvWindow`) stops trivial scripted signups.
+ *   - `INSERT OR IGNORE` a `pending` row with a fresh opaque token + consent
+ *     record (`consent_source` = referrer, `consent_ip_hash` = sha256(ip+salt) —
+ *     NEVER a raw IP). A repeat subscribe is idempotent.
+ *   - Confirmation email is STUBBED (no ESP in-repo yet — N4 wires it); a stub
+ *     failure never fails the subscribe.
+ *   - Never 500. A `fetch`/JSON caller gets a clean JSON body; a plain form POST
+ *     is redirected back to the referrer so the page can show its own thanks.
+ */
+import type { APIRoute } from "astro";
+import { readD1, readKv, readEnv } from "@/lib/env";
+import { fromD1 } from "@/lib/d1/catalog";
+import { checkRateLimit } from "@/lib/rate/kvWindow";
+import { NewsletterSubscribersStore } from "@/lib/newsletter/subscribers";
+import { randomToken, hashConsentIp } from "@/lib/newsletter/consent";
+import { sendConfirmationEmail } from "@/lib/newsletter/confirmationEmail";
+
+export const prerender = false;
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const COLLECTION_RE = /^[a-z0-9][a-z0-9._-]*$/;
+const RATE_WINDOW_SECONDS = 3600;
+const RATE_MAX_PER_WINDOW = 5;
+/** Dev fallback only — production sets NEWSLETTER_CONSENT_SALT as a secret. */
+const DEV_CONSENT_SALT = "newsletter-consent-dev-salt";
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json; charset=utf-8" },
+  });
+}
+
+/** Best-effort client IP for rate-limit keying + consent record — CF header, else XFF. */
+function clientIp(request: Request): string {
+  const cf = request.headers.get("cf-connecting-ip");
+  if (cf) return cf;
+  const xff = request.headers.get("x-forwarded-for");
+  if (xff) return xff.split(",")[0]!.trim();
+  return "unknown";
+}
+
+/** Read `email` from a JSON or form-encoded body; null if unparseable. */
+async function readEmail(request: Request): Promise<string | null> {
+  try {
+    const type = request.headers.get("content-type") ?? "";
+    if (type.includes("application/json")) {
+      const body = (await request.json()) as { email?: unknown };
+      return typeof body.email === "string" ? body.email : null;
+    }
+    const value = (await request.formData()).get("email");
+    return typeof value === "string" ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+/** True when the caller wants JSON (fetch/JS) rather than a page navigation. */
+function wantsJson(request: Request): boolean {
+  const ct = request.headers.get("content-type") ?? "";
+  if (ct.includes("application/json")) return true;
+  return (request.headers.get("accept") ?? "").includes("application/json");
+}
+
+/** Success response: JSON for fetch, else redirect back to the referrer with a flag. */
+function ok(request: Request): Response {
+  if (wantsJson(request)) return json({ ok: true, status: "pending" });
+  const referer = request.headers.get("referer");
+  if (referer) {
+    try {
+      const back = new URL(referer);
+      back.searchParams.set("subscribed", "1");
+      return Response.redirect(back.toString(), 303);
+    } catch {
+      /* fall through */
+    }
+  }
+  return json({ ok: true, status: "pending" });
+}
+
+export const POST: APIRoute = async (context) => {
+  const tenantId = context.locals?.tenant?.tenant_id;
+  const collection = context.params.collection;
+  if (!tenantId || !collection || !COLLECTION_RE.test(collection)) {
+    return json({ ok: false, error: "not_found" }, 404);
+  }
+
+  try {
+    const email = (await readEmail(context.request))?.trim().toLowerCase() ?? "";
+    if (!EMAIL_RE.test(email)) {
+      return json({ ok: false, error: "invalid_email" }, 400);
+    }
+
+    const kv = await readKv("TENANT_CACHE");
+    const { allowed } = await checkRateLimit(
+      kv,
+      `newsletter-subscribe:${tenantId}:${clientIp(context.request)}`,
+      { windowSeconds: RATE_WINDOW_SECONDS, maxRequests: RATE_MAX_PER_WINDOW },
+    );
+    if (!allowed) return json({ ok: false, error: "rate_limited" }, 429);
+
+    const d1 = await readD1("STOREFRONT_APPS_DB");
+    if (!d1) {
+      // No apps DB binding (local/dev without D1): can't persist. Don't fail the
+      // visitor — log and acknowledge so the flow is exercisable in dev.
+      console.log(`[newsletter] subscribe (no D1) ${email} → ${tenantId}/${collection}`);
+      return ok(context.request);
+    }
+
+    const referer = context.request.headers.get("referer");
+    const consentSource = referer ? new URL(referer).pathname : null;
+    const salt = (await readEnv("NEWSLETTER_CONSENT_SALT")) ?? DEV_CONSENT_SALT;
+    const consentIpHash = await hashConsentIp(clientIp(context.request), salt);
+
+    const store = new NewsletterSubscribersStore(fromD1(d1));
+    const result = await store.subscribe({
+      tenantId,
+      collection,
+      email,
+      token: randomToken(),
+      consentSource,
+      consentIpHash,
+    });
+
+    // Only (re)send confirmation while still pending — never re-mail a confirmed
+    // or unsubscribed address. Best-effort; a stub failure must not fail signup.
+    if (result.status === "pending") {
+      const origin = new URL(context.request.url).origin;
+      const basePath = context.locals?.basePath ?? "";
+      const confirmUrl = `${origin}${basePath}/api/newsletter/confirm?token=${result.token}`;
+      await sendConfirmationEmail({ email, collection, confirmUrl }).catch(() => {});
+    }
+
+    return ok(context.request);
+  } catch {
+    // Never 500 on a signup — acknowledge and move on.
+    return ok(context.request);
+  }
+};

package/apps/storefront/src/pages/api/newsletter/confirm.ts

@@ -0,0 +1,75 @@
+/**
+ * N2 — newsletter double-opt-in confirm. `GET /api/newsletter/confirm?token=…`
+ * (the link in the confirmation email). Flips the addressed `pending` subscriber
+ * to `confirmed`; that timestamp + the stored consent source/ip-hash IS the GDPR
+ * consent record.
+ *
+ * The token is opaque + per-subscriber, so it identifies the exact row without
+ * an email in the URL; the lookup is still scoped to `locals.tenant`. Idempotent:
+ * re-clicking an already-confirmed link is a success, not an error. An unknown/
+ * stale token renders a clean "invalid link" page — never a 500.
+ */
+import type { APIRoute } from "astro";
+import { readD1 } from "@/lib/env";
+import { fromD1 } from "@/lib/d1/catalog";
+import { NewsletterSubscribersStore } from "@/lib/newsletter/subscribers";
+
+export const prerender = false;
+
+function page(title: string, message: string, status = 200): Response {
+  const esc = (s: string) => s.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]!);
+  const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>${esc(title)}</title>
+    <style>
+      :root { color-scheme: light dark; }
+      body { font-family: ui-serif, Georgia, serif; margin: 0; min-height: 100vh;
+        display: grid; place-items: center; padding: 2rem; text-align: center;
+        background: #f4f1ea; color: #2f3a34; }
+      .card { max-width: 30rem; }
+      h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.75rem; }
+      p { color: #5a655e; line-height: 1.6; }
+      a { color: #2f3a34; font-weight: 600; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>${esc(title)}</h1>
+      <p>${esc(message)}</p>
+      <p><a href="/">Back to the shop →</a></p>
+    </div>
+  </body>
+</html>`;
+  return new Response(html, {
+    status,
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+}
+
+export const GET: APIRoute = async (context) => {
+  const tenantId = context.locals?.tenant?.tenant_id;
+  const token = context.url.searchParams.get("token")?.trim();
+  if (!tenantId || !token) {
+    return page("Invalid link", "That confirmation link isn't valid. Try subscribing again.", 400);
+  }
+
+  try {
+    const d1 = await readD1("STOREFRONT_APPS_DB");
+    if (!d1) {
+      return page("Try again shortly", "We couldn't confirm your subscription just now. Please try again in a moment.", 503);
+    }
+    const store = new NewsletterSubscribersStore(fromD1(d1));
+    const result = await store.confirmByToken({ tenantId, token });
+    if (result === "not_found") {
+      return page("Invalid link", "That confirmation link is expired or already used. Try subscribing again.", 400);
+    }
+    // "confirmed" and "already" are both success — idempotent.
+    return page("You're confirmed.", "Thanks for confirming — you'll hear from us when something worth knowing lands.");
+  } catch {
+    return page("Try again shortly", "We couldn't confirm your subscription just now. Please try again in a moment.", 503);
+  }
+};

package/apps/storefront/src/pages/api/newsletter/unsubscribe.ts

@@ -0,0 +1,90 @@
+/**
+ * Newsletter one-click unsubscribe (newsletter-send epic, N3) — the endpoint the
+ * unsubscribe footer link and the RFC 8058 `List-Unsubscribe` header both point at.
+ * (N4 composes those headers/links; this unit is only the target they hit.)
+ *
+ *   - GET  /api/newsletter/unsubscribe?token=…  — a clicked email-footer link. Flips
+ *     the subscriber to `unsubscribed` and renders a plain confirmation page.
+ *   - POST /api/newsletter/unsubscribe?token=…  — the RFC 8058 `List-Unsubscribe-Post:
+ *     List-Unsubscribe=One-Click` request a mailbox provider (Gmail/Yahoo) fires. Same
+ *     effect, 200 with no interstitial and no confirmation step.
+ *
+ * The `token` (query string only — never the email in the URL) is an opaque per-
+ * subscriber capability, so this succeeds WITHOUT login in one click. It is idempotent
+ * (re-unsubscribing is a no-op success) and NON-LEAKING: an unknown token gets the exact
+ * same response as a real one, so an observer can't probe which tokens exist.
+ *
+ * NOTE (integration): Astro's global `security.checkOrigin` (default-on for a server
+ * build) 403s a cross-origin form-encoded POST before it reaches this handler, which
+ * would break the RFC 8058 one-click POST from a mailbox provider. See the unit report.
+ */
+import type { APIContext } from "astro";
+import { readD1 } from "@/lib/env";
+import { fromD1 } from "@/lib/d1/catalog";
+import { unsubscribeByToken } from "@/lib/newsletter/subscribers";
+
+export const prerender = false;
+
+/** Confirmation page for the clicked-link (GET) path. `noindex`; house serif style. */
+function confirmationPage(): Response {
+  const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>Unsubscribed</title>
+    <style>
+      :root { color-scheme: light dark; }
+      body { font-family: ui-serif, Georgia, serif; margin: 0; min-height: 100vh;
+        display: grid; place-items: center; padding: 2rem; text-align: center;
+        background: #f4f1ea; color: #2f3a34; }
+      .card { max-width: 30rem; }
+      h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.75rem; }
+      p { color: #5a655e; line-height: 1.6; }
+      a { color: #2f3a34; font-weight: 600; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>You're unsubscribed.</h1>
+      <p>You won't receive any more of these emails. Changed your mind? You can always sign up again.</p>
+      <p><a href="/">Back to the shop →</a></p>
+    </div>
+  </body>
+</html>`;
+  return new Response(html, {
+    status: 200,
+    headers: { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" },
+  });
+}
+
+/** Apply the unsubscribe for the token in the query string. Best-effort: never throws,
+ *  and returns the same value regardless of whether the token was real (non-leaking).
+ *  When no D1 binding is present (local/dev) it's a silent no-op — the response shape
+ *  is identical either way. */
+async function applyUnsubscribe(context: APIContext): Promise<void> {
+  try {
+    const token = new URL(context.request.url).searchParams.get("token") ?? "";
+    const d1 = await readD1("STOREFRONT_APPS_DB");
+    if (!d1) return;
+    await unsubscribeByToken(fromD1(d1), token, new Date().toISOString());
+  } catch {
+    // Unsubscribe must never error out at the reader — degrade to the same success
+    // response. (A failed write is preferable to showing a subscriber an error.)
+  }
+}
+
+export async function GET(context: APIContext): Promise<Response> {
+  await applyUnsubscribe(context);
+  return confirmationPage();
+}
+
+export async function POST(context: APIContext): Promise<Response> {
+  await applyUnsubscribe(context);
+  // RFC 8058 one-click: a bare 200, no body of consequence, no confirmation step.
+  return new Response("Unsubscribed", {
+    status: 200,
+    headers: { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" },
+  });
+}

package/apps/storefront/src/pages/api/publish/stage-bundle.ts

@@ -0,0 +1,70 @@
+/**
+ * PUT/HEAD /api/publish/stage-bundle?key=versions/<digest>/<rel> — the
+ * authenticated Worker staging surface that writes bundle objects into the
+ * `STATIC_BUNDLES` R2 binding, so CI stages digests WITHOUT a static R2
+ * S3-compatible key pair. Auth (a CI `private_key_jwt` assertion, RFC 7523/8707,
+ * one-time `jti`) + the write logic live in `@/lib/publish/stageBundleUpload`;
+ * this route only resolves the runtime bindings/config.
+ *
+ * Fails CLOSED (503 "not configured") until a human wires the CI client's public
+ * JWKS (`STATIC_BUNDLE_UPLOAD_JWKS`) + the endpoint's own audience
+ * (`STATIC_BUNDLE_UPLOAD_AUDIENCE`) — the same "needs provisioning" gate the R2
+ * buckets themselves sit behind. It is EXEMPT from the demo login gate
+ * (loginGate.ts `isStaticBundleUploadPath`): it carries its own, stricter auth,
+ * so it must answer server-to-server rather than being masked by a "Coming soon"
+ * holding page.
+ */
+import type { APIContext } from "astro";
+import { readEnv, readKv, readR2 } from "@/lib/env";
+import {
+  handleStageBundleUpload,
+  kvJtiReplayStore,
+  DEFAULT_STAGE_BUNDLE_UPLOAD_ISSUER,
+  type StageBundleUploadBucket,
+  type StageBundleUploadConfig,
+  type JtiKvLike,
+} from "@/lib/publish/stageBundleUpload";
+
+export const prerender = false;
+
+async function handle(context: APIContext): Promise<Response> {
+  const bucket = (await readR2("STATIC_BUNDLES")) as StageBundleUploadBucket | undefined;
+  if (!bucket) {
+    return new Response(JSON.stringify({ error: "no_bundle_store" }), {
+      status: 503,
+      headers: { "content-type": "application/json" },
+    });
+  }
+
+  const jwksRaw = await readEnv("STATIC_BUNDLE_UPLOAD_JWKS");
+  const audience = await readEnv("STATIC_BUNDLE_UPLOAD_AUDIENCE");
+  if (!jwksRaw || !audience) {
+    return new Response(JSON.stringify({ error: "upload_not_configured" }), {
+      status: 503,
+      headers: { "content-type": "application/json" },
+    });
+  }
+  let jwks: StageBundleUploadConfig["jwks"];
+  try {
+    jwks = JSON.parse(jwksRaw) as StageBundleUploadConfig["jwks"];
+  } catch {
+    return new Response(JSON.stringify({ error: "upload_not_configured" }), {
+      status: 503,
+      headers: { "content-type": "application/json" },
+    });
+  }
+  const issuer =
+    (await readEnv("STATIC_BUNDLE_UPLOAD_ISSUER")) ?? DEFAULT_STAGE_BUNDLE_UPLOAD_ISSUER;
+
+  const kv = (await readKv("TENANT_CACHE")) as JtiKvLike | undefined;
+
+  return handleStageBundleUpload({
+    request: context.request,
+    bucket,
+    config: { jwks, issuer, audience },
+    ...(kv ? { jtiStore: kvJtiReplayStore(kv) } : {}),
+  });
+}
+
+export const PUT = handle;
+export const HEAD = handle;

package/apps/storefront/src/pages/api/rum/vitals.ts

@@ -14,6 +14,8 @@
  */
 import type { APIRoute } from "astro";
 import { rateMetric, type WebVitalName, type WebVitalsSample } from "@/lib/analytics/webVitals";
+import { readKv, runAfterResponse, type CfExecutionContextLike } from "@/lib/env";
+import { recordBlogView } from "@/lib/blog/viewCounts";
 
 export const prerender = false;
 
@@ -38,14 +40,30 @@ function parseSample(raw: unknown): WebVitalsSample | null {
   };
 }
 
-export const POST: APIRoute = async ({ request }) => {
+export const POST: APIRoute = async (context) => {
   try {
-    const sample = parseSample(await request.json());
+    const sample = parseSample(await context.request.json());
     if (sample) {
       // eslint-disable-next-line no-console
       console.info("[rum:web-vitals]", JSON.stringify(sample));
       // TODO(F14 follow-up): forward to Analytics Engine and run
       // rumAlert.detectRegressions on the per-route/hour rollup.
+
+      // B3.3 — per-post blog view counts. CLS is emitted exactly once per page
+      // load (LCP/INP are conditional), so it is the reliable one-per-view
+      // signal; count off it only. `recordBlogView` no-ops unless `sample.path`
+      // resolves to a live post for the resolved tenant. Runs PAST the response
+      // so the beacon 204 is never delayed and the KV write never fails the
+      // request.
+      if (sample.metric === "cls") {
+        const tenantId = context.locals?.tenant?.tenant_id;
+        const kv = tenantId ? await readKv("TENANT_CACHE") : undefined;
+        if (tenantId && kv) {
+          const cfContext =
+            (context.locals as { cfContext?: CfExecutionContextLike })?.cfContext ?? null;
+          runAfterResponse(recordBlogView(kv, tenantId, sample.path), cfContext);
+        }
+      }
     }
   } catch {
     /* never fail a telemetry beacon */

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

@@ -1,37 +1,74 @@
 ---
 import Layout from "@/layouts/Layout.astro";
-import { getBlogPost, resolveBlogRedirect } from "@/lib/blog/provider.js";
-import { breadcrumbLd } from "@/lib/jsonld.js";
+import BlogPaywall from "@/components/blog/BlogPaywall.astro";
+import ReactionBar from "@/components/blog/ReactionBar.astro";
+import { getBlogPost, listBlogPosts, resolveBlogRedirect } from "@/lib/blog/provider.js";
+import { authorSlug, getTranslations } from "@/lib/blog/collection.js";
+import { viewerHasBlogAccess } from "@/lib/blog/access.js";
+import { articleBodyHtml } from "@/lib/blog/teaser.js";
+import { readViewerSession, safeNext } from "@/lib/auth/route.js";
+import { buildAlternates } from "@/lib/seo/alternates.js";
+import { languageLabel } from "@/lib/i18n.js";
+import { breadcrumbLd, blogPostingLd } from "@/lib/jsonld.js";
 
-const { tenant, canonicalBase, basePath } = Astro.locals;
+const { tenant, canonicalBase, basePath, content } = Astro.locals;
 const slug = Astro.params.slug ?? "";
-const post = await getBlogPost(tenant.tenant_id, slug);
+const post = await getBlogPost(tenant.tenant_id, slug, content);
 if (!post) {
-  const redirect = await resolveBlogRedirect(tenant.tenant_id, slug);
+  const redirect = await resolveBlogRedirect(tenant.tenant_id, slug, content);
   if (redirect) return Astro.redirect(`${basePath}/blog/${redirect}/`, 301);
   return new Response(null, { status: 404 });
 }
 
+// Entitlement (⟂ visibility): a gated post is still published/listed, but an
+// unentitled reader sees a teaser + paywall rather than the full body. A teaser
+// is a legitimate partial-content 200 — indexable, NOT noindexed (B4.0 spike §4).
+const viewer = await readViewerSession(Astro);
+const gated = (post.access ?? "public") !== "public";
+const unlock = viewerHasBlogAccess(viewer, post);
+const bodyHtml = articleBodyHtml(post.contentHtml, { gated, unlock });
+const next = safeNext(`${basePath}/blog/${post.slug}/`);
+const loginHref = `/auth/login?next=${encodeURIComponent(next)}`;
+
 const canonical = new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString();
-const articleLd = {
-  "@context": "https://schema.org",
-  "@type": "BlogPosting",
-  headline: post.title,
-  description: post.description,
+// The author archive (`/blog/author/<slug>`) lists posts from the curated blog
+// index, and 404s for an author with no LISTED post (an unlisted-only or
+// index-omitted byline). Resolve that up front so the byline links ONLY when the
+// archive will actually render — a byline must never point at a missing page
+// (the invariant `blog/author/[author].astro` documents). Same slug + same source
+// the archive itself filters on, so the two can't disagree.
+const authorArchiveSlug = authorSlug(post.author);
+const authorHasArchive = (await listBlogPosts(tenant.tenant_id, content)).some(
+  (p) => authorSlug(p.author) === authorArchiveSlug,
+);
+const authorUrl = authorHasArchive
+  ? new URL(`/blog/author/${authorArchiveSlug}/`, canonicalBase + "/").toString()
+  : undefined;
+const articleLd = blogPostingLd(post, {
   url: canonical,
-  mainEntityOfPage: canonical,
-  datePublished: post.publishedAt,
-  dateModified: post.modifiedAt,
-  author: { "@type": "Person", name: post.author },
-  publisher: { "@type": "Organization", name: tenant.displayName, url: canonicalBase },
-  ...(post.featuredImage ? { image: new URL(post.featuredImage.src, canonicalBase + "/").toString() } : {}),
-};
+  canonicalBase,
+  publisherName: tenant.displayName,
+  authorUrl,
+});
 const crumbs = breadcrumbLd([
   { label: tenant.displayName, href: "/" },
   { label: "Blog", href: "/blog/" },
   { label: post.title, href: `/blog/${post.slug}/` },
 ], canonicalBase);
 const blogHref = `${basePath}/blog/`;
+const authorHref = authorHasArchive
+  ? `${basePath}/blog/author/${authorArchiveSlug}/`
+  : null;
+
+// I2 — hreflang alternates + per-variant <html lang>. Singleton ⇒ [] alternates
+// and no `lang` override, so a non-translated post is byte-identical to today.
+const translations = post.translationGroupId
+  ? await getTranslations(tenant.tenant_id, "blog", post.slug, { content })
+  : [];
+const alternates = buildAlternates(translations, (s) =>
+  new URL(`/blog/${s}/`, canonicalBase + "/").toString(),
+);
+const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
 ---
 
 <Layout
@@ -41,6 +78,19 @@ const blogHref = `${basePath}/blog/`;
   ogType="article"
   ogImage={post.featuredImage?.src}
   jsonLd={[crumbs, articleLd]}
+  article={{
+    publishedTime: post.publishedAt,
+    modifiedTime: post.modifiedAt,
+    author: authorUrl,
+    section: post.categories[0],
+    tags: post.tags,
+  }}
+  imageAlt={post.featuredImage?.alt}
+  imageWidth={post.featuredImage?.width}
+  imageHeight={post.featuredImage?.height}
+  canonicalOverride={post.canonicalUrl}
+  alternates={alternates}
+  lang={lang}
 >
   <article class="article-shell">
     <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={blogHref}>Blog</a><span aria-hidden="true">/</span><span>{post.categories[0] ?? "Article"}</span></nav>
@@ -49,10 +99,27 @@ const blogHref = `${basePath}/blog/`;
       <h1>{post.title}</h1>
       <p class="dek">{post.excerpt}</p>
       <div class="byline">
-        <span>By {post.author}</span>
+        <span>By {authorHref
+          ? <a href={authorHref} class="byline-author" rel="author">{post.author}</a>
+          : <span class="byline-author">{post.author}</span>}</span>
         <span aria-hidden="true">·</span>
         <time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</time>
       </div>
+      {translations.length > 1 && (
+        <nav class="lang-switcher" aria-label="Available languages">
+          {translations.map((variant) => {
+            const code = variant.inLanguage ?? "en";
+            const current = variant.slug === post.slug;
+            return (
+              <a
+                hreflang={code}
+                href={`${basePath}/blog/${variant.slug}/`}
+                aria-current={current ? "true" : undefined}
+              >{languageLabel(code)}</a>
+            );
+          })}
+        </nav>
+      )}
     </header>
     {post.featuredImage && (
       <img
@@ -70,8 +137,14 @@ const blogHref = `${basePath}/blog/`;
         <a href={blogHref}>← All articles</a>
         {post.tags.length > 0 && <div class="article-tags">{post.tags.map((tag) => <span>{tag}</span>)}</div>}
       </aside>
-      <div class="blog-body" set:html={post.contentHtml}></div>
+      <div class="blog-main">
+        <div class="blog-body" set:html={bodyHtml}></div>
+        {gated && !unlock && (
+          <BlogPaywall access={post.access ?? "authenticated"} next={next} signedIn={!!viewer} loginHref={loginHref} />
+        )}
+      </div>
     </div>
+    <ReactionBar collection="blog" slug={post.slug} />
   </article>
 </Layout>
 
@@ -84,12 +157,19 @@ const blogHref = `${basePath}/blog/`;
   h1 { margin-top: .9rem; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; }
   .dek { max-width: 68ch; margin: 1.5rem auto 0; color: var(--color-muted); font-size: clamp(1rem, 2vw, 1.2rem); }
   .byline { display: flex; justify-content: center; gap: .55rem; margin-top: 1.35rem; color: var(--color-muted); font-size: .85rem; }
+  .byline-author { color: var(--color-accent-ink); font-weight: 700; text-decoration: none; }
+  .byline-author:hover { text-decoration: underline; text-underline-offset: .18em; }
+  .lang-switcher { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 1.1rem; }
+  .lang-switcher a { padding: .28rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: .78rem; font-weight: 600; text-decoration: none; }
+  .lang-switcher a:hover { color: var(--color-accent-ink); border-color: var(--color-accent); }
+  .lang-switcher a[aria-current="true"] { color: var(--color-accent-ink); border-color: var(--color-accent); background: var(--color-surface); }
   .featured { display: block; width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
   .article-grid { display: grid; grid-template-columns: 190px minmax(0, 720px); justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(3rem, 7vw, 5.5rem); }
   aside { align-self: start; position: sticky; top: 7rem; }
   aside > a { color: var(--color-accent-ink); font-size: .88rem; font-weight: 700; }
   .article-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
   .article-tags span { padding: .3rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: .7rem; }
+  .blog-main { min-width: 0; }
   .blog-body { min-width: 0; font-size: 1.05rem; line-height: 1.78; }
   .blog-body :global(p), .blog-body :global(ul), .blog-body :global(ol), .blog-body :global(blockquote), .blog-body :global(figure), .blog-body :global(table), .blog-body :global(pre) { margin-block: 1.25rem; }
   .blog-body :global(h2), .blog-body :global(h3), .blog-body :global(h4) { scroll-margin-top: 7rem; margin: 2.8rem 0 1rem; line-height: 1.18; }