@tokenoftrust/storefront-runner 2.4.73 → 2.4.75

package/apps/storefront/src/lib/seo/faqItems.ts

@@ -0,0 +1,63 @@
+/**
+ * The question/answer pairs a page visibly carries, for a declared FAQPage node
+ * (lib/seo/structuredData.ts). Derived from the rendered content itself, so the markup can never
+ * claim an answer the page does not show: a heading phrased as a question, answered by the text
+ * up to the next heading. Fewer than two pairs is not an FAQ.
+ */
+import type { ProseSection } from "@/lib/content/prose";
+import { plainText } from "@/lib/content/richtext";
+
+export interface FaqItem {
+  q: string;
+  a: string;
+}
+
+const MIN_PAIRS = 2;
+
+const isQuestion = (text: string) => text.trim().endsWith("?");
+
+function decode(text: string): string {
+  return text
+    .replace(/ /g, " ").replace(/"/g, '"').replace(/&#0?39;|’|’/g, "'")
+    .replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+
+const textOf = (html: string) => decode(html.replace(/<[^>]+>/g, " ")).replace(/\s+/g, " ").trim();
+
+function atLeastTwo(items: FaqItem[]): FaqItem[] {
+  const answered = items.filter((it) => it.q && it.a);
+  return answered.length >= MIN_PAIRS ? answered : [];
+}
+
+/** FAQ pairs from sanitized body HTML: each question-phrased h2–h4 and the text after it. */
+export function faqFromHtml(html: string | undefined): FaqItem[] {
+  if (!html) return [];
+  const parts = html.split(/(<h[2-4][^>]*>[\s\S]*?<\/h[2-4]>)/i);
+  const items: FaqItem[] = [];
+  for (let i = 1; i < parts.length; i += 2) {
+    const q = textOf(parts[i]!);
+    if (isQuestion(q)) items.push({ q, a: textOf(parts[i + 1] ?? "") });
+  }
+  return atLeastTwo(items);
+}
+
+/** FAQ pairs from structured prose: each question-phrased heading and the paragraphs/lists after it. */
+export function faqFromSections(sections: ProseSection[] | undefined): FaqItem[] {
+  const items: FaqItem[] = [];
+  let current: FaqItem | null = null;
+  for (const section of sections ?? []) {
+    if (section.kind === "heading") {
+      current = isQuestion(section.text) ? { q: section.text.trim(), a: "" } : null;
+      if (current) items.push(current);
+      continue;
+    }
+    if (!current) continue;
+    const text = section.kind === "paragraph"
+      ? plainText(section.text)
+      : section.kind === "list"
+        ? section.items.map(plainText).join(" ")
+        : "";
+    if (text) current.a = current.a ? `${current.a} ${text}` : text;
+  }
+  return atLeastTwo(items);
+}

package/apps/storefront/src/lib/seo/structuredData.ts

@@ -0,0 +1,267 @@
+/**
+ * The declared structured-data profile (`seo.structuredData` in `.tot/config.json`): per page
+ * type, exactly which JSON-LD nodes the page emits, in one `@graph`. A migrated store keeps the
+ * graph its rankings were earned under — the same node types, ids linking them, and the key
+ * fields (name, url, sku, price) a parity check compares — instead of whatever the platform
+ * default happens to emit.
+ *
+ * When a tenant declares a graph for a page type, `composeStructuredData` is the ONLY JSON-LD
+ * that page emits: Layout drops the platform defaults and the page's own graphs, and widget
+ * emitters (Faq.astro) defer to it. A node whose data the page lacks is omitted, never invented.
+ * Pure: pages hand it the data, Layout hands it the tenant and the canonical.
+ */
+import type {
+  CatalogProduct,
+  StructuredDataNodeToken,
+  StructuredDataPageType,
+  TenantConfig,
+} from "@tot/public-runtime";
+import { productLd } from "../jsonld.js";
+import { pageUrlForm } from "./urlForm.js";
+
+type Node = Record<string, unknown>;
+type Profile = NonNullable<NonNullable<TenantConfig["seo"]>["structuredData"]>;
+
+/** What a page knows about itself, for the nodes that describe it. Every field is optional. */
+export interface StructuredDataPage {
+  pageType: StructuredDataPageType;
+  /** The page's primary image, site-relative or absolute. */
+  image?: string | null;
+  author?: { name: string; url?: string } | null;
+  /** The entity's own title (a post or page heading). */
+  headline?: string;
+  description?: string;
+  datePublished?: string;
+  dateModified?: string;
+  product?: CatalogProduct;
+  /** Real sourced `aggregateRating` / `review` (reviewLd output); emitted only when declared. */
+  reviews?: Record<string, unknown>;
+  faq?: { q: string; a: string }[];
+  crumbs?: { label: string; href: string }[];
+  items?: { title: string; url: string }[];
+}
+
+/** The tenant's declared profile, or null when it declares none. */
+export function structuredDataProfile(tenant: Pick<TenantConfig, "seo"> | undefined): Profile | null {
+  return tenant?.seo?.structuredData ?? null;
+}
+
+/**
+ * A product with more than one variant is a `productGroup` when the profile declares that graph;
+ * every other page type maps to itself.
+ */
+export function productPageType(profile: Profile | null, product: CatalogProduct): StructuredDataPageType {
+  return product.variants.length > 1 && profile?.graphs.productGroup ? "productGroup" : "product";
+}
+
+/** The declared node list for a page type; `productGroup` falls back to `product`. */
+export function graphFor(profile: Profile | null, pageType: StructuredDataPageType): StructuredDataNodeToken[] | null {
+  if (!profile) return null;
+  return profile.graphs[pageType] ?? (pageType === "productGroup" ? profile.graphs.product ?? null : null);
+}
+
+const SITE_TOKENS = new Set<StructuredDataNodeToken>(["Organization", "Person", "Organization+Person"]);
+const PAGE_ENTITY_TOKENS = new Set<StructuredDataNodeToken>(["WebPage", "ItemPage", "CollectionPage", "AboutPage", "ContactPage"]);
+
+function absolute(value: string, canonicalBase: string): string {
+  return new URL(value, canonicalBase + "/").toString();
+}
+
+export interface ComposeInput {
+  profile: Profile;
+  page: StructuredDataPage;
+  tenant: TenantConfig;
+  canonicalBase: string;
+  /** The page's absolute canonical URL, already in the declared URL form. */
+  canonical: string;
+  /** The page's full `<title>`. */
+  documentTitle: string;
+}
+
+/** One `@graph` holding exactly the declared nodes the page has data for, or null when the page type declares none. */
+export function composeStructuredData(input: ComposeInput): Node | null {
+  const { profile, page, tenant, canonicalBase, canonical, documentTitle } = input;
+  const tokens = graphFor(profile, page.pageType);
+  if (!tokens) return null;
+  const base = canonicalBase.replace(/\/$/, "");
+  const lang = tenant.locale || "en";
+  const nameOf = (type: "Product" | "ProductGroup" | "Article" | "BlogPosting", own: string | undefined, fallback: "documentTitle" | "title") =>
+    (profile.names?.[type] ?? fallback) === "documentTitle" ? documentTitle : own || documentTitle;
+
+  const siteToken = tokens.find((t) => SITE_TOKENS.has(t));
+  const siteTypes = siteToken ? siteToken.split("+") : [];
+  const siteId = `${base}/#${siteTypes.includes("Person") ? "person" : "organization"}`;
+  const imageUrl = page.image ? absolute(page.image, canonicalBase) : null;
+  const imageId = imageUrl ?? undefined;
+  const pageToken = tokens.find((t) => PAGE_ENTITY_TOKENS.has(t));
+  const pageId = `${canonical}#webpage`;
+  const authorId = page.author ? `${page.author.url ? absolute(page.author.url, canonicalBase) : canonical}#author` : undefined;
+  const ref = (id: string | undefined) => (id ? { "@id": id } : undefined);
+  const pageUrl = (href: string) => pageUrlForm(absolute(href, canonicalBase), tenant.seo);
+
+  const nodes: Node[] = [];
+  for (const token of tokens) {
+    const node = buildNode(token);
+    if (node) nodes.push(node);
+  }
+  return { "@context": "https://schema.org", "@graph": nodes };
+
+  function buildNode(token: StructuredDataNodeToken): Node | null {
+    if (SITE_TOKENS.has(token)) {
+      const logo = tenant.theme_tokens?.brand?.logoLight ?? tenant.theme_tokens?.brand?.ogImage;
+      return {
+        "@type": siteTypes.length > 1 ? siteTypes : siteTypes[0],
+        "@id": siteId,
+        name: tenant.displayName,
+        url: base,
+        ...(logo && siteTypes.includes("Organization") ? { logo: { "@type": "ImageObject", url: absolute(logo, canonicalBase) } } : {}),
+      };
+    }
+    if (PAGE_ENTITY_TOKENS.has(token)) {
+      return {
+        "@type": token,
+        "@id": pageId,
+        url: canonical,
+        name: documentTitle,
+        ...(page.description ? { description: page.description } : {}),
+        isPartOf: { "@id": `${base}/#website` },
+        ...(imageId ? { primaryImageOfPage: { "@id": imageId } } : {}),
+        ...(page.datePublished ? { datePublished: page.datePublished } : {}),
+        ...(page.dateModified ? { dateModified: page.dateModified } : {}),
+        inLanguage: lang,
+      };
+    }
+    switch (token) {
+      case "WebSite":
+        return {
+          "@type": "WebSite",
+          "@id": `${base}/#website`,
+          url: base,
+          name: tenant.displayName,
+          ...(siteToken ? { publisher: { "@id": siteId } } : {}),
+          inLanguage: lang,
+        };
+      case "ImageObject":
+        return imageUrl ? { "@type": "ImageObject", "@id": imageUrl, url: imageUrl, inLanguage: lang } : null;
+      case "Person:author":
+        return page.author
+          ? {
+              "@type": "Person",
+              "@id": authorId,
+              name: page.author.name,
+              ...(page.author.url ? { url: pageUrl(page.author.url) } : {}),
+            }
+          : null;
+      case "Article":
+      case "BlogPosting": {
+        const name = nameOf(token, page.headline, token === "Article" ? "documentTitle" : "title");
+        return {
+          "@type": token,
+          "@id": `${canonical}#richSnippet`,
+          headline: page.headline || name,
+          name,
+          ...(page.description ? { description: page.description } : {}),
+          ...(page.datePublished ? { datePublished: page.datePublished } : {}),
+          ...(page.dateModified ? { dateModified: page.dateModified } : {}),
+          ...(authorId ? { author: { "@id": authorId, name: page.author!.name } } : {}),
+          ...(siteToken ? { publisher: { "@id": siteId } } : {}),
+          ...(imageId ? { image: { "@id": imageId } } : {}),
+          ...(pageToken ? { isPartOf: { "@id": pageId }, mainEntityOfPage: { "@id": pageId } } : {}),
+          inLanguage: lang,
+        };
+      }
+      case "Product":
+        return page.product ? productNode(page.product) : null;
+      case "ProductGroup":
+        return page.product ? productGroupNode(page.product) : null;
+      case "FAQPage":
+        return page.faq?.length
+          ? {
+              "@type": "FAQPage",
+              "@id": `${canonical}#faq`,
+              mainEntity: page.faq.map((it) => ({
+                "@type": "Question",
+                name: it.q,
+                acceptedAnswer: { "@type": "Answer", text: it.a },
+              })),
+            }
+          : null;
+      case "BreadcrumbList":
+        return page.crumbs?.length
+          ? {
+              "@type": "BreadcrumbList",
+              "@id": `${canonical}#breadcrumb`,
+              itemListElement: page.crumbs.map((c, i) => ({
+                "@type": "ListItem",
+                position: i + 1,
+                name: c.label,
+                item: pageUrl(c.href),
+              })),
+            }
+          : null;
+      case "ItemList":
+        return page.items?.length
+          ? {
+              "@type": "ItemList",
+              numberOfItems: page.items.length,
+              itemListElement: page.items.map((it, i) => ({
+                "@type": "ListItem",
+                position: i + 1,
+                name: it.title,
+                url: pageUrlForm(it.url, tenant.seo),
+              })),
+            }
+          : null;
+      default:
+        return null;
+    }
+  }
+
+  function offer(v: CatalogProduct["variants"][number]): Node {
+    return {
+      "@type": "Offer",
+      ...(v.sku ? { sku: v.sku } : {}),
+      price: v.price.toFixed(2),
+      priceCurrency: v.currency,
+      availability: v.inventory.available ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
+      url: canonical,
+      ...(siteToken ? { seller: { "@id": siteId } } : {}),
+    };
+  }
+
+  function productNode(p: CatalogProduct): Node {
+    const { "@context": _context, ...ld } = productLd(p, tenant, canonicalBase) as Node;
+    const single = p.variants.length === 1 ? p.variants[0] : undefined;
+    return {
+      ...ld,
+      "@id": `${canonical}#product`,
+      name: nameOf("Product", p.title, "title"),
+      url: canonical,
+      ...(pageToken ? { mainEntityOfPage: { "@id": pageId } } : {}),
+      ...(single ? { offers: offer(single) } : {}),
+      ...(profile.reviews ? page.reviews ?? {} : {}),
+    };
+  }
+
+  function productGroupNode(p: CatalogProduct): Node {
+    const name = nameOf("ProductGroup", p.title, "title");
+    return {
+      "@type": "ProductGroup",
+      "@id": `${canonical}#product`,
+      name,
+      url: canonical,
+      productGroupID: p.handle,
+      ...(p.seo.description || p.description_text ? { description: p.seo.description || p.description_text.slice(0, 300) } : {}),
+      ...(p.vendor ? { brand: { "@type": "Brand", name: p.vendor } } : {}),
+      ...(p.options.length ? { variesBy: p.options.map((o) => o.name) } : {}),
+      ...(pageToken ? { mainEntityOfPage: { "@id": pageId } } : {}),
+      hasVariant: p.variants.map((v) => ({
+        "@type": "Product",
+        name: `${p.title} - ${v.title}`,
+        ...(v.sku ? { sku: v.sku } : {}),
+        offers: offer(v),
+      })),
+      ...(profile.reviews ? page.reviews ?? {} : {}),
+    };
+  }
+}

package/apps/storefront/src/lib/seo/urlForm.ts

@@ -0,0 +1,40 @@
+/**
+ * The tenant's declared URL form (`seo.trailingSlash` in `.tot/config.json`). A migrated store
+ * keeps the URL shape its rankings were earned under: canonicals, og:url, JSON-LD urls, sitemap
+ * locs and platform-generated page links all take the same form. Both forms serve the same
+ * directory-index file on every substrate, so this changes what we ADVERTISE, never what resolves.
+ */
+import type { SeoDeclaration } from "@tot/public-runtime";
+
+/** A last segment with a file extension names a file (`/sitemap.xml`), never a page. */
+const FILE_SEGMENT = /\.[a-z0-9]{1,8}$/i;
+
+function slashPathname(pathname: string): string {
+  if (pathname === "" || pathname.endsWith("/")) return pathname || "/";
+  const last = pathname.slice(pathname.lastIndexOf("/") + 1);
+  return FILE_SEGMENT.test(last) ? pathname : `${pathname}/`;
+}
+
+/**
+ * A page path or absolute page URL in the tenant's declared form. Without `trailingSlash` the
+ * value is returned unchanged. Query and fragment are kept; non-page values (files, `#x`, `?x`,
+ * `mailto:`, protocol-relative) pass through.
+ */
+export function pageUrlForm(value: string, seo: SeoDeclaration | undefined): string {
+  if (!seo?.trailingSlash || !value) return value;
+  if (/^https?:\/\//i.test(value)) {
+    const url = new URL(value);
+    url.pathname = slashPathname(url.pathname);
+    return url.toString();
+  }
+  if (!value.startsWith("/") || value.startsWith("//")) return value;
+  const cut = value.search(/[?#]/);
+  const path = cut < 0 ? value : value.slice(0, cut);
+  const rest = cut < 0 ? "" : value.slice(cut);
+  return slashPathname(path) + rest;
+}
+
+/** The absolute canonical URL for a path-only page path, in the declared form. */
+export function canonicalUrl(path: string, canonicalBase: string, seo: SeoDeclaration | undefined): string {
+  return pageUrlForm(new URL(path, canonicalBase + "/").toString(), seo);
+}

package/apps/storefront/src/lib/storyblok/content-model.ts

@@ -304,6 +304,9 @@ export interface HomeContent {
   /** SEO + social. */
   seoTitle?: string;
   seoDescription?: string;
+  /** The home page's byline author and primary image, for its structured data. */
+  author?: { name: string; url?: string };
+  image?: string;
   /** Commerce home blocks OR marketing blocks — the page branches on tenant
    * siteType/features and renders the matching set. */
   blocks: (HomeBlock | MarketingBlock)[];
@@ -344,6 +347,10 @@ export interface EditorialPage {
   updated?: string;
   /** When true, listed in the footer policy column. */
   isPolicy?: boolean;
+  /** The page's byline author, named by its structured data (a profile's `Person:author`). */
+  author?: { name: string; url?: string };
+  /** The page's primary image, site-relative or absolute (a profile's `ImageObject`). */
+  image?: string;
 }
 
 // Site chrome (header/footer) is the ONE consolidated schema in

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

@@ -472,6 +472,8 @@ function mapHome(content: Record<string, any>): HomeContent {
   return {
     seoTitle: content.seoTitle ?? content.seo_title,
     seoDescription: content.seoDescription ?? content.seo_description,
+    author: content.author,
+    image: content.image,
     blocks: blocks as HomeContent["blocks"],
   };
 }
@@ -497,6 +499,8 @@ function mapPage(content: Record<string, any>, slug: string): EditorialPage {
     intro: content.intro,
     updated: content.updated,
     isPolicy: !!content.isPolicy,
+    author: content.author,
+    image: content.image,
   };
 }
 

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

@@ -12,9 +12,13 @@ import ProseSections from "@/components/content/ProseSections.astro";
 import ProseToc from "@/components/content/ProseToc.astro";
 import { breadcrumbLd } from "@/lib/jsonld";
 import { truncate } from "@/lib/format";
+import { faqFromHtml, faqFromSections } from "@/lib/seo/faqItems";
 import { rawHtmlPolicy, rawHtmlResponse, rawPageCanonicalUrl } from "@/lib/rawMarketingHtml";
 import { renderRawComplianceTop, renderRawComplianceBottom } from "@/lib/compliance/rawComplianceNotices";
 import { styleGuideAliasRewrite } from "@/lib/styleGuidePaths";
+import { getBlogSettings } from "@/lib/blog/provider.js";
+import { loadBlogPostViewV1, type BlogPostViewPropsV1 } from "@/lib/blog/postView.js";
+import BlogPostArticle from "@/components/blog/BlogPostArticle.astro";
 
 const { tenant, canonicalBase, content, basePath, apiBasePath, capabilities, features } =
   Astro.locals;
@@ -41,51 +45,77 @@ if (styleGuideTarget !== undefined) {
   return Astro.rewrite(styleGuideTarget);
 }
 
-// Raw tenant-authored marketing subpage (vendor-injected HTML) — serve the
-// self-contained document VERBATIM only when rawHtmlPolicy says this tenant may
-// bypass Layout. Regulated commerce tenants fall through to platform-composed
-// pages so compliance UI cannot be removed by raw HTML.
-const rawHtml = await content.getPageHtml(slug);
-const rawPolicy = rawHtmlPolicy(tenant);
-if (rawHtml && rawPolicy.allowed) {
-  // Shared chrome: a body-only fragment gets wrapped in the tenant's chrome.html;
-  // a full document serves verbatim (backward-compatible). See rawMarketingHtml.ts.
-  const chromeWrapper = await content.getChromeHtml(`/${slug}`);
-  const notices = {
-    nicotineWarning: tenant.compliance?.nicotineWarning,
-    pactAct: !!tenant.compliance?.pactAct,
-    minAge: tenant.compliance?.minAge,
-    shippingRestriction: tenant.compliance?.shippingRestriction,
-    exciseTaxEnabled: capabilities.exciseTax.enabled && features.catalog,
-  };
-  return rawHtmlResponse(rawHtml, {
-    nonce: Astro.locals.cspNonce,
-    basePath,
-    apiBasePath,
-    chromeWrapper,
-    plan: Astro.locals.integrationPlan,
-    consentSnapshot: Astro.locals.consentSnapshot,
-    canonicalUrl: rawPageCanonicalUrl(canonicalBase, slug),
-    complianceTop: rawPolicy.regulated ? renderRawComplianceTop(notices) : undefined,
-    complianceBottom: rawPolicy.regulated ? renderRawComplianceBottom(notices) : undefined,
-  });
+// A tenant that declares `BlogSettings.postsAtRoot` (see lib/blog/types.ts) serves its
+// individual posts at the site root — a single-segment slug tries the blog collection
+// before falling through to a raw marketing page or a CMS page. Multi-segment slugs are
+// never posts, so this never shadows a nested marketing/CMS path.
+// A renamed root post's 308 is the same declared blog redirect the publication composition
+// materializes for the blog collection (blog/[slug].astro declares the same source).
+export const MATERIALIZED_REDIRECT_SOURCE = "content/blog/redirects.json";
+
+let blogPostProps: BlogPostViewPropsV1 | null = null;
+if (!slug.includes("/")) {
+  const blogSettings = await getBlogSettings(tenant.tenant_id, content);
+  if (blogSettings?.postsAtRoot) {
+    const result = await loadBlogPostViewV1(Astro, slug);
+    if (result.status === "redirect") return Astro.redirect(result.to, 308);
+    if (result.status === "ok") blogPostProps = result.props;
+  }
 }
 
-const page = await content.getPage(slug);
-if (!page) return new Response(null, { status: 404 });
+let page: Awaited<ReturnType<typeof content.getPage>> | null = null;
+if (!blogPostProps) {
+  // Raw tenant-authored marketing subpage (vendor-injected HTML) — serve the
+  // self-contained document VERBATIM only when rawHtmlPolicy says this tenant may
+  // bypass Layout. Regulated commerce tenants fall through to platform-composed
+  // pages so compliance UI cannot be removed by raw HTML.
+  const rawHtml = await content.getPageHtml(slug);
+  const rawPolicy = rawHtmlPolicy(tenant);
+  if (rawHtml && rawPolicy.allowed) {
+    // Shared chrome: a body-only fragment gets wrapped in the tenant's chrome.html;
+    // a full document serves verbatim (backward-compatible). See rawMarketingHtml.ts.
+    const chromeWrapper = await content.getChromeHtml(`/${slug}`);
+    const notices = {
+      nicotineWarning: tenant.compliance?.nicotineWarning,
+      pactAct: !!tenant.compliance?.pactAct,
+      minAge: tenant.compliance?.minAge,
+      shippingRestriction: tenant.compliance?.shippingRestriction,
+      exciseTaxEnabled: capabilities.exciseTax.enabled && features.catalog,
+    };
+    return rawHtmlResponse(rawHtml, {
+      nonce: Astro.locals.cspNonce,
+      basePath,
+      apiBasePath,
+      chromeWrapper,
+      plan: Astro.locals.integrationPlan,
+      consentSnapshot: Astro.locals.consentSnapshot,
+      canonicalUrl: rawPageCanonicalUrl(canonicalBase, slug),
+      complianceTop: rawPolicy.regulated ? renderRawComplianceTop(notices) : undefined,
+      complianceBottom: rawPolicy.regulated ? renderRawComplianceBottom(notices) : undefined,
+    });
+  }
+
+  page = await content.getPage(slug);
+  if (!page) return new Response(null, { status: 404 });
+}
 
-const crumbs = siteTrail(
-  homeCrumbLabel(await Astro.locals.content.getChrome()),
-  { label: page.title, href: `/${page.slug}` },
-);
+// Only reached when no root-level blog post claimed this slug. `page` is always truthy by
+// the time this renders (the block above already 404s otherwise) — `[]` here is only to
+// keep `crumbs` non-nullable for the breadcrumbLd/<Breadcrumbs> calls below.
+const crumbs = page
+  ? siteTrail(
+      homeCrumbLabel(await Astro.locals.content.getChrome()),
+      { label: page.title, href: `/${page.slug}` },
+    )
+  : [];
 
-const description =
-  page.seoDescription ||
-  (page.intro ? truncate(page.intro, 160) : undefined);
+const description = page
+  ? page.seoDescription || (page.intro ? truncate(page.intro, 160) : undefined)
+  : undefined;
 
 // Structured pages drive the body from `sections`; legacy pages keep the
 // sanitized `body_html`. Prefer structured whenever a page ships sections.
-const structured = (page.sections?.length ?? 0) > 0;
+const structured = (page?.sections?.length ?? 0) > 0;
 
 // Reviewer-only needs-review flags render in preview/dev only — mirrors the
 // middleware's "production read" definition (no preview host / token / cookie),
@@ -96,7 +126,7 @@ const isPreview =
   Astro.url.searchParams.has("__preview") ||
   Astro.cookies.has("tot_preview");
 
-const updatedLabel = page.updated
+const updatedLabel = page?.updated
   ? new Date(page.updated).toLocaleDateString("en-US", {
       year: "numeric",
       month: "long",
@@ -105,44 +135,58 @@ const updatedLabel = page.updated
   : null;
 ---
 
-<Layout
-  title={page.title}
-  seoTitle={page.seoTitle}
-  description={description}
-  path={`/${page.slug}`}
-  ogType="article"
-  jsonLd={breadcrumbLd(crumbs, canonicalBase)}
->
-  <div class="container-prose pt-6">
-    <Breadcrumbs crumbs={crumbs} />
-  </div>
+{blogPostProps ? (
+  <BlogPostArticle {...blogPostProps} />
+) : (
+  <Layout
+    title={page!.title}
+    seoTitle={page!.seoTitle}
+    description={description}
+    path={`/${page!.slug}`}
+    ogType="article"
+    jsonLd={breadcrumbLd(crumbs, canonicalBase)}
+    structuredData={{
+      pageType: "page",
+      headline: page!.title,
+      image: page!.image,
+      author: page!.author,
+      description,
+      dateModified: page!.updated,
+      faq: structured ? faqFromSections(page!.sections) : faqFromHtml(page!.body_html),
+      crumbs,
+    }}
+  >
+    <div class="container-prose pt-6">
+      <Breadcrumbs crumbs={crumbs} />
+    </div>
 
-  {/* Page hero */}
-  <header class="container-prose pb-2 pt-8">
-    {page.eyebrow && <p class="eyebrow eyebrow--tick mb-3">{page.eyebrow}</p>}
-    <h1 class="display-xl max-w-[20ch]">
-      {page.title}
-    </h1>
-    {page.intro && (
-      <p class="mt-5 max-w-[60ch] text-[1.1rem] text-[var(--color-muted)]">
-        {page.intro}
-      </p>
-    )}
-    {updatedLabel && (
-      <p class="mt-3 text-sm text-[var(--color-muted)]">Last updated {updatedLabel}</p>
-    )}
-    {structured && <ProseToc sections={page.sections!} />}
-  </header>
+    {/* Page hero */}
+    <header class="container-prose pb-2 pt-8">
+      {page!.eyebrow && <p class="eyebrow eyebrow--tick mb-3">{page!.eyebrow}</p>}
+      <h1 class="display-xl max-w-[20ch]">
+        {page!.title}
+      </h1>
+      {page!.intro && (
+        <p class="mt-5 max-w-[60ch] text-[1.1rem] text-[var(--color-muted)]">
+          {page!.intro}
+        </p>
+      )}
+      {updatedLabel && (
+        <p class="mt-3 text-sm text-[var(--color-muted)]">Last updated {updatedLabel}</p>
+      )}
+      {structured && <ProseToc sections={page!.sections!} />}
+    </header>
 
-  {/* Body — constrained to a readable measure. Structured pages render
-      framework widgets from `sections`; legacy pages keep the sanitized HTML. */}
-  <div class="container-prose pb-[clamp(3rem,7vw,6rem)] pt-8">
-    {structured ? (
-      <div class="mx-auto max-w-[68ch]">
-        <ProseSections sections={page.sections!} includeNeedsReview={isPreview} />
-      </div>
-    ) : (
-      <div class="rte mx-auto max-w-[68ch] text-[var(--color-text)]" set:html={page.body_html} />
-    )}
-  </div>
-</Layout>
+    {/* Body — constrained to a readable measure. Structured pages render
+        framework widgets from `sections`; legacy pages keep the sanitized HTML. */}
+    <div class="container-prose pb-[clamp(3rem,7vw,6rem)] pt-8">
+      {structured ? (
+        <div class="mx-auto max-w-[68ch]">
+          <ProseSections sections={page!.sections!} includeNeedsReview={isPreview} />
+        </div>
+      ) : (
+        <div class="rte mx-auto max-w-[68ch] text-[var(--color-text)]" set:html={page!.body_html} />
+      )}
+    </div>
+  </Layout>
+)}