@tokenoftrust/storefront-runner 2.2.84 → 2.2.85

package/apps/storefront/src/components/Seo.astro

@@ -23,6 +23,9 @@ interface Props {
   jsonLd?: JsonLd | JsonLd[];
   /** Alternate RSS/Atom feeds this page advertises (e.g. a collection's feed). */
   feeds?: { title: string; href: string }[];
+  /** A paginated collection's siblings — path-only (like `path`), joined to the
+   *  same canonical base. Absent fields emit no link (first/last page). */
+  pagination?: { prev?: string; next?: string };
   // --- B1.6 article SEO hardening (all additive/optional) ---
   /** Open Graph `article:*` meta; emitted only when `ogType === "article"`. */
   article?: ArticleMeta;
@@ -51,6 +54,7 @@ const {
   noindex = false,
   jsonLd,
   feeds = [],
+  pagination,
   article,
   imageAlt,
   imageWidth,
@@ -84,6 +88,10 @@ const articleMeta = articleSeoMetaTags({
 
 const graphs = jsonLd ? (Array.isArray(jsonLd) ? jsonLd : [jsonLd]) : [];
 const alternateLinks = withXDefault(alternates);
+const paginationLinks = [
+  ...(pagination?.prev ? [{ rel: "prev", href: new URL(pagination.prev, canonicalBase + "/").toString() }] : []),
+  ...(pagination?.next ? [{ rel: "next", href: new URL(pagination.next, canonicalBase + "/").toString() }] : []),
+];
 ---
 
 <title>{fullTitle}</title>
@@ -91,6 +99,10 @@ const alternateLinks = withXDefault(alternates);
 <link rel="canonical" href={canonical} />
 {noindex && <meta name="robots" content="noindex,nofollow" />}
 
+{
+  paginationLinks.map((l) => <link rel={l.rel} href={l.href} />)
+}
+
 {
   feeds.map((f) => (
     <link rel="alternate" type="application/rss+xml" title={f.title} href={f.href} />

package/apps/storefront/src/components/blog/BlogIndexView.astro

@@ -0,0 +1,140 @@
+---
+// Shared render for every `/blog/` index page — page 1 (src/pages/blog/index.astro)
+// and every `/blog/page/<n>/` (src/pages/blog/page/[n].astro) render through this ONE
+// component so the hero/grid/pagination markup, and the tenant-copy + pagination
+// contract it implements, can't drift between the two routes (fb-1791301493691-brzl6f).
+import Layout from "@/layouts/Layout.astro";
+import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
+import type { BlogPostSummary } from "@/lib/blog/types.js";
+import type { BlogIndexCopy } from "@/lib/blog/pagination.js";
+import { blogPagePath } from "@/lib/blog/pagination.js";
+
+interface Props {
+  basePath: string;
+  canonicalBase: string;
+  copy: BlogIndexCopy;
+  tags: string[];
+  pagePosts: BlogPostSummary[];
+  page: number;
+  totalPages: number;
+}
+
+const { basePath, canonicalBase, copy, tags, pagePosts, page, totalPages } = Astro.props;
+
+const href = (path: string) => `${basePath}${path}` || "/";
+const path = blogPagePath(page);
+// Page 1 keeps the tenant's declared title verbatim (unchanged default copy); page
+// N>1 is distinguished in the <title> tag only — the on-page <h1> stays identical
+// across pages, matching how a reader experiences "the same blog, page 2".
+const documentTitle = page > 1 ? `${copy.title} — Page ${page}` : copy.title;
+const pagination = {
+  ...(page > 1 ? { prev: blogPagePath(page - 1) } : {}),
+  ...(page < totalPages ? { next: blogPagePath(page + 1) } : {}),
+};
+
+const itemList = {
+  "@context": "https://schema.org",
+  "@type": "ItemList",
+  numberOfItems: pagePosts.length,
+  itemListElement: pagePosts.map((post, index) => ({
+    "@type": "ListItem",
+    position: index + 1,
+    name: post.title,
+    url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
+  })),
+};
+---
+
+<Layout
+  title={documentTitle}
+  description={copy.description}
+  path={path}
+  fullBleed
+  jsonLd={itemList}
+  pagination={pagination}
+>
+  <header class="blog-hero">
+    <div class="blog-shell">
+      <p class="eyebrow eyebrow--tick">{copy.eyebrow}</p>
+      <h1>{copy.title}</h1>
+      <p>{copy.tagline}</p>
+    </div>
+  </header>
+
+  <div class="blog-shell blog-layout">
+    <aside aria-label="Blog topics">
+      <p class="filter-label">Explore topics</p>
+      <div class="tag-list">
+        {tags.map((tag) => <span>{tag}</span>)}
+      </div>
+    </aside>
+
+    <section class="post-grid" aria-label="Blog posts" id="blog-posts">
+      {pagePosts.map((post, index) => (
+        <article class="post-card">
+          <a href={href(`/blog/${post.slug}/`)} aria-label={`Read ${post.title}`}>
+            {post.featuredImage ? (
+              <img
+                src={post.featuredImage.src}
+                alt={post.featuredImage.alt}
+                width={post.featuredImage.width}
+                height={post.featuredImage.height}
+                loading={index < 3 ? "eager" : "lazy"}
+                decoding="async"
+              />
+            ) : <div class="image-placeholder" aria-hidden="true"></div>}
+            <div class="post-card-copy">
+              <p class="post-meta"><time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</time>{post.tags[0] && <> · {post.tags[0]}</>}</p>
+              <PostAccessBadge access={post.access} />
+              <h2>{post.title}</h2>
+              <p>{post.excerpt}</p>
+              <span>Read article <span aria-hidden="true">→</span></span>
+            </div>
+          </a>
+        </article>
+      ))}
+    </section>
+  </div>
+
+  {totalPages > 1 && (
+    <nav class="blog-shell blog-pagination" aria-label="Blog pagination">
+      {page > 1
+        ? <a class="blog-pagination-link" rel="prev" href={href(blogPagePath(page - 1))}>← Newer posts</a>
+        : <span />}
+      <span class="blog-pagination-status">Page {page} of {totalPages}</span>
+      {page < totalPages
+        ? <a class="blog-pagination-link" rel="next" href={href(blogPagePath(page + 1))}>Older posts →</a>
+        : <span />}
+    </nav>
+  )}
+</Layout>
+
+<style>
+  .blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
+  .blog-hero { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 82%, var(--color-accent))); color: var(--color-primary-contrast); }
+  .blog-hero h1 { max-width: 12ch; margin-top: .75rem; color: inherit; font-size: clamp(2.9rem, 7vw, 5.6rem); }
+  .blog-hero p:last-child { max-width: 58ch; margin-top: 1.25rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.12rem; }
+  .blog-hero .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .blog-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 6rem); }
+  aside { align-self: start; position: sticky; top: 7rem; }
+  .filter-label { margin-bottom: .85rem; font: 700 .76rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
+  .tag-list { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
+  .tag-list span { padding: .45rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font-size: .76rem; }
+  .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; align-items: start; }
+  .post-card { height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
+  .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
+  .post-card a { display: flex; height: 100%; flex-direction: column; }
+  .post-card img, .image-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, white), color-mix(in srgb, var(--color-accent) 24%, white)); }
+  .post-card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
+  .post-meta { margin: 0 0 .7rem; color: var(--color-muted); font: 600 .72rem/1.45 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
+  .post-card h2 { font-size: 1.18rem; line-height: 1.25; }
+  .post-card-copy > p:not(.post-meta) { display: -webkit-box; margin: .75rem 0 1rem; overflow: hidden; color: var(--color-muted); font-size: .92rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+  .post-card-copy > span { margin-top: auto; color: var(--color-accent-ink); font-weight: 700; font-size: .88rem; }
+  @media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  @media (max-width: 720px) { .blog-layout { grid-template-columns: 1fr; } aside { position: static; } .tag-list { flex-direction: row; overflow-x: auto; padding-bottom: .4rem; } .tag-list button { flex: 0 0 auto; } }
+  @media (max-width: 520px) { .post-grid { grid-template-columns: 1fr; } }
+
+  .blog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: clamp(3rem, 7vw, 6rem); }
+  .blog-pagination-link { font-weight: 700; color: var(--color-accent-ink); }
+  .blog-pagination-status { color: var(--color-muted); font: 600 .78rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
+</style>

package/apps/storefront/src/layouts/Layout.astro

@@ -46,6 +46,8 @@ interface Props {
   jsonLd?: Record<string, unknown> | Record<string, unknown>[];
   /** Alternate RSS/Atom feeds this page advertises (threaded to <Seo>). */
   feeds?: { title: string; href: string }[];
+  /** A paginated collection's prev/next siblings (threaded to <Seo>). */
+  pagination?: { prev?: string; next?: string };
   /** Wider pages (PLP/home) drop the prose max-width. */
   fullBleed?: boolean;
   /**
@@ -85,6 +87,7 @@ const {
   noindex,
   jsonLd,
   feeds,
+  pagination,
   article,
   imageAlt,
   imageWidth,
@@ -302,6 +305,7 @@ const footerWidgets = await renderWidgetSlot(
       noindex={noindex}
       jsonLd={allJsonLd}
       feeds={feeds}
+      pagination={pagination}
       article={article}
       imageAlt={imageAlt}
       imageWidth={imageWidth}

package/apps/storefront/src/lib/blog/pagination.ts

@@ -0,0 +1,78 @@
+import type { BlogSettings } from "./types.js";
+
+/** Posts per `/blog/` page when a tenant declares no `pageSize` (or an invalid one). */
+export const DEFAULT_BLOG_PAGE_SIZE = 12;
+
+/**
+ * Resolved `/blog/` index copy + page size. A declared `BlogSettings` field wins;
+ * an absent one falls back to a NEUTRAL default derived from the tenant's own
+ * `displayName` — never Token of Trust's own copy (fb-1791301493691-brzl6f). A
+ * tenant that wants ToT's current copy (tokenoftrust.com included) declares it
+ * in its own `content/blog/settings.json`.
+ */
+export interface BlogIndexCopy {
+  title: string;
+  eyebrow: string;
+  tagline: string;
+  description: string;
+  pageSize: number;
+}
+
+function trimmed(value: string | undefined): string | undefined {
+  const v = value?.trim();
+  return v ? v : undefined;
+}
+
+export function resolveBlogIndexCopy(
+  settings: BlogSettings | null | undefined,
+  displayName: string,
+): BlogIndexCopy {
+  const tagline = trimmed(settings?.tagline) ?? `The latest from ${displayName}.`;
+  const pageSize = settings?.pageSize;
+  return {
+    title: trimmed(settings?.title) ?? `${displayName} Blog`,
+    eyebrow: trimmed(settings?.eyebrow) ?? "Updates",
+    tagline,
+    description: trimmed(settings?.description) ?? tagline,
+    pageSize: Number.isInteger(pageSize) && pageSize! > 0 ? pageSize! : DEFAULT_BLOG_PAGE_SIZE,
+  };
+}
+
+export interface BlogPageSlice<T> {
+  posts: T[];
+  page: number;
+  totalPages: number;
+}
+
+/**
+ * One page of `posts` (newest/curated-order preserved), or null when `page` is
+ * out of `[1, totalPages]` — the caller's cue to 404. `posts.length === 0` still
+ * resolves `totalPages` to 1 so a caller checks emptiness itself (the existing
+ * "no blog at all" 404 is a different case, with its own marker header).
+ */
+export function paginateBlogPosts<T>(
+  posts: readonly T[],
+  pageSize: number,
+  page: number,
+): BlogPageSlice<T> | null {
+  const totalPages = Math.max(1, Math.ceil(posts.length / pageSize));
+  if (!Number.isInteger(page) || page < 1 || page > totalPages) return null;
+  const start = (page - 1) * pageSize;
+  return { posts: posts.slice(start, start + pageSize), page, totalPages };
+}
+
+/** `/blog/` is page 1; `/blog/page/<n>/` is page N for N≥2. */
+export function blogPagePath(page: number): string {
+  return page <= 1 ? "/blog/" : `/blog/page/${page}/`;
+}
+
+/**
+ * Parse a `/blog/page/<n>/` route param into a page number, or null when it is
+ * not a valid page-N route: not a bare positive-integer string (rejects "01",
+ * "1.5", "-1", "abc", ""), or N<2 (page 1 lives at `/blog/`, not `/blog/page/1/`).
+ */
+export function parseBlogPageParam(raw: string | undefined): number | null {
+  if (!raw || !/^[1-9]\d*$/.test(raw)) return null;
+  const n = Number(raw);
+  return n >= 2 ? n : null;
+}

package/apps/storefront/src/lib/blog/provider.ts

@@ -11,7 +11,7 @@ import {
   tenantDirSegment,
 } from "@tot/public-runtime";
 import { listPosts } from "./collection.js";
-import type { BlogPost, BlogPostSummary } from "./types.js";
+import type { BlogPost, BlogPostSummary, BlogSettings } from "./types.js";
 import type { ContentProvider } from "../storyblok/provider.js";
 import { readEnv } from "../env.js";
 
@@ -53,6 +53,13 @@ const redirectGlobs = import.meta.glob<Record<string, string>>(
   ],
   { import: "default" },
 );
+const settingsGlobs = import.meta.glob<BlogSettings>(
+  [
+    "../../../../../tenants/*/content/blog/settings.json",
+    "../../../../../tenants/e2e/*/content/blog/settings.json",
+  ],
+  { import: "default" },
+);
 
 function tenantKey(keys: string[], tenantId: string, suffix: string): string | undefined {
   const segment = `${tenantDirSegment(tenantId)}content/blog/`;
@@ -166,3 +173,29 @@ export async function resolveBlogRedirect(
   const redirects = await redirectGlobs[key]!();
   return redirects[slug] ?? null;
 }
+
+/**
+ * Optional per-tenant blog index copy + page size (`tenants/<id>/content/blog/settings.json`),
+ * or null when the tenant has declared none. Null is "use the neutral default", never an error —
+ * see `resolveBlogIndexCopy` (./pagination.ts), which is the one place that applies the default.
+ */
+export async function getBlogSettings(
+  tenantId: string,
+  source?: ArtifactSource,
+): Promise<BlogSettings | null> {
+  if (canReadArtifacts(source)) {
+    const paths = await source.listArtifactPaths("blog/");
+    const raw = await source.readArtifact("blog/settings.json");
+    if (raw) {
+      try {
+        return JSON.parse(raw) as BlogSettings;
+      } catch {
+        return null;
+      }
+    }
+    if (paths !== null) return null;
+  }
+  const key = tenantKey(Object.keys(settingsGlobs), tenantId, "/settings.json")
+    ?? Object.keys(settingsGlobs).find((candidate) => candidate.includes(`${tenantDirSegment(tenantId)}content/blog/settings.json`));
+  return key ? (await settingsGlobs[key]!()) ?? null : null;
+}

package/apps/storefront/src/lib/blog/types.ts

@@ -44,6 +44,24 @@ export interface BlogPost extends BlogPostSummary {
   bodyMarkdown?: string;
 }
 
+/**
+ * Optional per-tenant blog index copy + page size, sourced from
+ * `tenants/<id>/content/blog/settings.json`. Every field is optional — an absent
+ * field, or an absent file, resolves to a NEUTRAL default derived from the
+ * tenant's own `displayName` (see `resolveBlogIndexCopy` in `./pagination.ts`),
+ * never Token of Trust's own copy. A tenant that wants its own branding
+ * (tokenoftrust.com included) declares it here.
+ */
+export interface BlogSettings {
+  title?: string;
+  eyebrow?: string;
+  tagline?: string;
+  description?: string;
+  /** Posts per `/blog/` page. Must be a positive integer; anything else falls
+   *  back to the platform default (`DEFAULT_BLOG_PAGE_SIZE`). */
+  pageSize?: number;
+}
+
 /**
  * Optional per-tenant × per-collection author bios, keyed by the author's slug
  * (see `authorSlug`). Sourced from `tenants/<id>/content/<collection>/authors.json`;

package/apps/storefront/src/pages/blog/index.astro

@@ -1,7 +1,7 @@
 ---
-import Layout from "@/layouts/Layout.astro";
-import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
-import { listBlogPosts } from "@/lib/blog/provider.js";
+import BlogIndexView from "@/components/blog/BlogIndexView.astro";
+import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
+import { paginateBlogPosts, resolveBlogIndexCopy } from "@/lib/blog/pagination.js";
 
 const { tenant, basePath, canonicalBase, content, publicationTimestamp } = Astro.locals;
 const posts = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp);
@@ -16,94 +16,20 @@ if (posts.length === 0) {
   });
 }
 
-const href = (path: string) => `${basePath}${path}` || "/";
+const settings = await getBlogSettings(tenant.tenant_id, content);
+const copy = resolveBlogIndexCopy(settings, tenant.displayName);
+// Page 1 is always in range once posts.length > 0 — paginateBlogPosts never
+// returns null here.
+const { posts: pagePosts, totalPages } = paginateBlogPosts(posts, copy.pageSize, 1)!;
 const tags = [...new Set(posts.flatMap((post) => post.tags))].sort((a, b) => a.localeCompare(b));
-const itemList = {
-  "@context": "https://schema.org",
-  "@type": "ItemList",
-  numberOfItems: posts.length,
-  itemListElement: posts.map((post, index) => ({
-    "@type": "ListItem",
-    position: index + 1,
-    name: post.title,
-    url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
-  })),
-};
 ---
 
-<Layout
-  title="Blog"
-  description="Product updates, compliance news, and practical guidance from Token of Trust."
-  path="/blog/"
-  fullBleed
-  jsonLd={itemList}
->
-  <header class="blog-hero">
-    <div class="blog-shell">
-      <p class="eyebrow eyebrow--tick">Insights &amp; updates</p>
-      <h1>Token of Trust blog</h1>
-      <p>Practical guidance for identity, age assurance, fraud prevention, and regulated commerce.</p>
-    </div>
-  </header>
-
-  <div class="blog-shell blog-layout">
-    <aside aria-label="Blog topics">
-      <p class="filter-label">Explore topics</p>
-      <div class="tag-list">
-        {tags.map((tag) => <span>{tag}</span>)}
-      </div>
-    </aside>
-
-    <section class="post-grid" aria-label="Blog posts" id="blog-posts">
-      {posts.map((post, index) => (
-        <article class="post-card">
-          <a href={href(`/blog/${post.slug}/`)} aria-label={`Read ${post.title}`}>
-            {post.featuredImage ? (
-              <img
-                src={post.featuredImage.src}
-                alt={post.featuredImage.alt}
-                width={post.featuredImage.width}
-                height={post.featuredImage.height}
-                loading={index < 3 ? "eager" : "lazy"}
-                decoding="async"
-              />
-            ) : <div class="image-placeholder" aria-hidden="true"></div>}
-            <div class="post-card-copy">
-              <p class="post-meta"><time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</time>{post.tags[0] && <> · {post.tags[0]}</>}</p>
-              <PostAccessBadge access={post.access} />
-              <h2>{post.title}</h2>
-              <p>{post.excerpt}</p>
-              <span>Read article <span aria-hidden="true">→</span></span>
-            </div>
-          </a>
-        </article>
-      ))}
-    </section>
-  </div>
-</Layout>
-
-<style>
-  .blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
-  .blog-hero { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 82%, var(--color-accent))); color: var(--color-primary-contrast); }
-  .blog-hero h1 { max-width: 12ch; margin-top: .75rem; color: inherit; font-size: clamp(2.9rem, 7vw, 5.6rem); }
-  .blog-hero p:last-child { max-width: 58ch; margin-top: 1.25rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.12rem; }
-  .blog-hero .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
-  .blog-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 6rem); }
-  aside { align-self: start; position: sticky; top: 7rem; }
-  .filter-label { margin-bottom: .85rem; font: 700 .76rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
-  .tag-list { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
-  .tag-list span { padding: .45rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font-size: .76rem; }
-  .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; align-items: start; }
-  .post-card { height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
-  .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
-  .post-card a { display: flex; height: 100%; flex-direction: column; }
-  .post-card img, .image-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, white), color-mix(in srgb, var(--color-accent) 24%, white)); }
-  .post-card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
-  .post-meta { margin: 0 0 .7rem; color: var(--color-muted); font: 600 .72rem/1.45 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
-  .post-card h2 { font-size: 1.18rem; line-height: 1.25; }
-  .post-card-copy > p:not(.post-meta) { display: -webkit-box; margin: .75rem 0 1rem; overflow: hidden; color: var(--color-muted); font-size: .92rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
-  .post-card-copy > span { margin-top: auto; color: var(--color-accent-ink); font-weight: 700; font-size: .88rem; }
-  @media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-  @media (max-width: 720px) { .blog-layout { grid-template-columns: 1fr; } aside { position: static; } .tag-list { flex-direction: row; overflow-x: auto; padding-bottom: .4rem; } .tag-list button { flex: 0 0 auto; } }
-  @media (max-width: 520px) { .post-grid { grid-template-columns: 1fr; } }
-</style>
+<BlogIndexView
+  basePath={basePath}
+  canonicalBase={canonicalBase}
+  copy={copy}
+  tags={tags}
+  pagePosts={pagePosts}
+  page={1}
+  totalPages={totalPages}
+/>

package/apps/storefront/src/pages/blog/page/[n].astro

@@ -0,0 +1,39 @@
+---
+// /blog/page/<n>/ — page N≥2 of the blog index. Page 1 lives at /blog/
+// (src/pages/blog/index.astro); both render through the same BlogIndexView so the
+// tenant-copy + pagination contract can't drift between the two routes.
+import BlogIndexView from "@/components/blog/BlogIndexView.astro";
+import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
+import { paginateBlogPosts, parseBlogPageParam, resolveBlogIndexCopy } from "@/lib/blog/pagination.js";
+
+const page = parseBlogPageParam(Astro.params.n);
+if (page === null) return new Response(null, { status: 404 });
+
+const { tenant, basePath, canonicalBase, content, publicationTimestamp } = Astro.locals;
+const posts = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp);
+if (posts.length === 0) {
+  return new Response(null, {
+    status: 404,
+    headers: { "x-tot-blog-collection": "empty" },
+  });
+}
+
+const settings = await getBlogSettings(tenant.tenant_id, content);
+const copy = resolveBlogIndexCopy(settings, tenant.displayName);
+const sliced = paginateBlogPosts(posts, copy.pageSize, page);
+// Out of [1, totalPages] (e.g. /blog/page/99/ on a 3-page blog) — a real 404, not
+// an empty-collection one, since the blog itself exists and resolves fine at /blog/.
+if (!sliced) return new Response(null, { status: 404 });
+
+const tags = [...new Set(posts.flatMap((post) => post.tags))].sort((a, b) => a.localeCompare(b));
+---
+
+<BlogIndexView
+  basePath={basePath}
+  canonicalBase={canonicalBase}
+  copy={copy}
+  tags={tags}
+  pagePosts={sliced.posts}
+  page={sliced.page}
+  totalPages={sliced.totalPages}
+/>

package/apps/storefront/src/pages/sitemap.xml.ts

@@ -10,8 +10,9 @@
  */
 import type { APIContext } from "astro";
 import { nonEmptyCollections } from "@/lib/tot/query.js";
-import { listBlogPosts } from "@/lib/blog/provider.js";
+import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
 import { authorSlug, categorySlug } from "@/lib/blog/collection.js";
+import { resolveBlogIndexCopy } from "@/lib/blog/pagination.js";
 import { listBuildPosts } from "@/lib/the-build/provider.js";
 import { isIndexableHtml, rawPageCanonicalUrl } from "@/lib/rawMarketingHtml.js";
 
@@ -76,6 +77,14 @@ export async function GET(context: APIContext): Promise<Response> {
   const blogPosts = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp);
   if (blogPosts.length > 0) {
     urls.push({ loc: `${base}/blog/` });
+    // Paginated pages (N≥2) — the static materializer discovers these new routes
+    // straight off this list (withSitemapRoutes in scripts/publish/lib/routes.mjs),
+    // so listing them here is what makes /blog/page/N/ exist in BOTH serving
+    // planes, not just the SSR Worker.
+    const blogSettings = await getBlogSettings(tenant.tenant_id, content);
+    const { pageSize } = resolveBlogIndexCopy(blogSettings, tenant.displayName);
+    const totalBlogPages = Math.max(1, Math.ceil(blogPosts.length / pageSize));
+    for (let n = 2; n <= totalBlogPages; n++) urls.push({ loc: `${base}/blog/page/${n}/` });
     for (const post of blogPosts) {
       urls.push({ loc: `${base}/blog/${post.slug}/`, lastmod: post.modifiedAt || post.publishedAt });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "2.2.84",
+  "version": "2.2.85",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",