@tokenoftrust/storefront-runner 1.4.0 → 1.4.2-rc.0

package/apps/storefront/src/pages/search.astro

@@ -28,7 +28,7 @@ const isJson = url.searchParams.get("format") === "json";
 // Search goes through the ToTClient: D1 FTS5 when a D1 binding is wired, else a
 // Fuse index over the bundled snapshot (FixtureToTClient). It returns full
 // products, so the HTML grid renders directly and the typeahead just projects to
-// the compact shape. See epics/edge-read-replica.md.
+// the compact shape.
 
 // --- JSON path: powers the header typeahead island. Must return BEFORE render.
 if (isJson) {

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

@@ -11,6 +11,8 @@
 import type { APIContext } from "astro";
 import { nonEmptyCollections } from "@/lib/tot/query.js";
 import { listBlogPosts } from "@/lib/blog/provider.js";
+import { authorSlug } from "@/lib/blog/collection.js";
+import { listBuildPosts } from "@/lib/the-build/provider.js";
 
 interface SitemapUrl {
   loc: string;
@@ -71,6 +73,24 @@ export async function GET(context: APIContext): Promise<Response> {
     for (const post of blogPosts) {
       urls.push({ loc: `${base}/blog/${post.slug}/`, lastmod: post.modifiedAt || post.publishedAt });
     }
+    // Author archives (blog/author/[author].astro): one per distinct byline,
+    // same source as the pages themselves so the sitemap never lists an
+    // archive that would 404 (and vice versa — the static publish's T3 gate
+    // requires every rendered route to appear here).
+    const authorSlugs = [
+      ...new Set(blogPosts.map((post) => authorSlug(post.author)).filter(Boolean)),
+    ].sort();
+    for (const slug of authorSlugs) {
+      urls.push({ loc: `${base}/blog/author/${slug}/` });
+    }
+  }
+
+  const buildPosts = await listBuildPosts(tenant.tenant_id);
+  if (buildPosts.length > 0) {
+    urls.push({ loc: `${base}/the-build/` });
+    for (const post of buildPosts) {
+      urls.push({ loc: `${base}/the-build/${post.slug}/`, lastmod: post.modifiedAt || post.publishedAt });
+    }
   }
 
   const body = `<?xml version="1.0" encoding="UTF-8"?>

package/apps/storefront/src/pages/the-build/[slug].astro

@@ -0,0 +1,129 @@
+---
+// Detail route for "the-build" collection posts — mirrors src/pages/blog/
+// but reads the generic per-tenant × per-collection engine via
+// the-build/provider.ts. Draft posts 404 on live (getBuildPost's default
+// visibility chokepoint); unlisted posts resolve here but carry noindex and
+// stay out of the index/sitemap/RSS (see collection.ts isVisibleOnLive).
+import Layout from "@/layouts/Layout.astro";
+import ReactionBar from "@/components/blog/ReactionBar.astro";
+import { getBuildPost, resolveBuildRedirect, THE_BUILD } from "@/lib/the-build/provider.js";
+import { getTranslations } from "@/lib/blog/collection.js";
+import { buildAlternates } from "@/lib/seo/alternates.js";
+import { breadcrumbLd } from "@/lib/jsonld.js";
+
+const { tenant, canonicalBase, basePath } = Astro.locals;
+const slug = Astro.params.slug ?? "";
+const post = await getBuildPost(tenant.tenant_id, slug);
+if (!post) {
+  const redirect = await resolveBuildRedirect(tenant.tenant_id, slug);
+  if (redirect) return Astro.redirect(`${basePath}/the-build/${redirect}/`, 301);
+  return new Response(null, { status: 404 });
+}
+
+const canonical = new URL(`/the-build/${post.slug}/`, canonicalBase + "/").toString();
+const articleLd = {
+  "@context": "https://schema.org",
+  "@type": "BlogPosting",
+  headline: post.title,
+  description: post.description,
+  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() } : {}),
+};
+const crumbs = breadcrumbLd([
+  { label: tenant.displayName, href: "/" },
+  { label: "The Build", href: "/the-build/" },
+  { label: post.title, href: `/the-build/${post.slug}/` },
+], canonicalBase);
+const buildHref = `${basePath}/the-build/`;
+
+// I2 — hreflang alternates + per-variant <html lang>. `getTranslations` returns
+// the live-visible variant set (self + siblings); `buildAlternates` yields [] for
+// a singleton, so a non-translated post gets no alternates and no `lang` override
+// (byte-identical to today).
+const translations = await getTranslations(tenant.tenant_id, THE_BUILD.id, post.slug);
+const alternates = buildAlternates(translations, (s) =>
+  new URL(`/the-build/${s}/`, canonicalBase + "/").toString(),
+);
+const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
+---
+
+<Layout
+  title={post.seoTitle || post.title}
+  description={post.description}
+  path={`/the-build/${post.slug}/`}
+  ogType="article"
+  ogImage={post.featuredImage?.src}
+  noindex={post.status === "unlisted"}
+  jsonLd={[crumbs, articleLd]}
+  alternates={alternates}
+  lang={lang}
+>
+  <article class="article-shell">
+    <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={buildHref}>The Build</a><span aria-hidden="true">/</span><span>{post.categories[0] ?? "Article"}</span></nav>
+    <header>
+      {post.tags[0] && <p class="eyebrow eyebrow--tick">{post.tags[0]}</p>}
+      <h1>{post.title}</h1>
+      <p class="dek">{post.excerpt}</p>
+      <div class="byline">
+        <span>By {post.author}</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>
+    </header>
+    {post.featuredImage && (
+      <img
+        class="featured"
+        src={post.featuredImage.src}
+        alt={post.featuredImage.alt}
+        width={post.featuredImage.width}
+        height={post.featuredImage.height}
+        fetchpriority="high"
+        decoding="async"
+      />
+    )}
+    <div class="article-grid">
+      <aside>
+        <a href={buildHref}>← 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>
+    <ReactionBar collection="the-build" slug={post.slug} />
+  </article>
+</Layout>
+
+<style>
+  .article-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; padding-block: clamp(2rem, 5vw, 5rem); }
+  .breadcrumbs { display: flex; gap: .55rem; align-items: center; color: var(--color-muted); font-size: .84rem; }
+  .breadcrumbs a { color: var(--color-accent-ink); font-weight: 700; }
+  header { max-width: 880px; margin: clamp(2.5rem, 6vw, 5rem) auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
+  header .eyebrow { justify-content: center; }
+  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; }
+  .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-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; }
+  .blog-body :global(h2) { font-size: clamp(1.75rem, 3vw, 2.35rem); }
+  .blog-body :global(h3) { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
+  .blog-body :global(a) { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: .18em; }
+  .blog-body :global(ul), .blog-body :global(ol) { padding-left: 1.4rem; }
+  .blog-body :global(li) { margin-block: .45rem; }
+  .blog-body :global(blockquote) { padding: .8rem 1.25rem; border-left: 4px solid var(--color-accent); background: var(--color-surface); color: var(--color-muted); }
+  .blog-body :global(img) { display: block; width: auto; max-width: 100%; margin-inline: auto; border-radius: var(--radius-md); }
+  .blog-body :global(figcaption) { margin-top: .5rem; color: var(--color-muted); text-align: center; font-size: .78rem; }
+  .blog-body :global(table) { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
+  .blog-body :global(th), .blog-body :global(td) { padding: .7rem; border: 1px solid var(--color-border); text-align: left; }
+  @media (max-width: 760px) { .article-grid { grid-template-columns: 1fr; } aside { position: static; } .article-tags { display: none; } }
+</style>

package/apps/storefront/src/pages/the-build/index.astro

@@ -0,0 +1,146 @@
+---
+// Base reader route for the "the-build" collection — mirrors src/pages/blog/
+// but reads the generic per-tenant × per-collection engine (src/lib/blog/
+// collection.ts) via the the-build/provider.ts thin wrapper, so any tenant
+// with the-build content renders the same way (per-tenant/multi-collection
+// invariant — see docs/plans/2026-08-21-blog-platform-workstream.md §1).
+import Layout from "@/layouts/Layout.astro";
+import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
+import { listBuildPosts } from "@/lib/the-build/provider.js";
+
+const { tenant, basePath, canonicalBase } = Astro.locals;
+const posts = await listBuildPosts(tenant.tenant_id);
+if (posts.length === 0) return new Response(null, { status: 404 });
+
+const href = (path: string) => `${basePath}${path}` || "/";
+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(`/the-build/${post.slug}/`, canonicalBase + "/").toString(),
+  })),
+};
+---
+
+<Layout
+  title="The Build"
+  description="Short articles on building a compliant, resilient storefront — from Token of Trust."
+  path="/the-build/"
+  fullBleed
+  jsonLd={itemList}
+>
+  <header class="blog-hero">
+    <div class="blog-shell">
+      <p class="eyebrow eyebrow--tick">The Build</p>
+      <h1>The Build</h1>
+      <p>Notes from building a compliant, resilient storefront.</p>
+    </div>
+  </header>
+
+  <div class="blog-shell">
+    <section class="post-grid" aria-label="The Build posts" id="the-build-posts">
+      {posts.map((post, index) => (
+        <article class="post-card">
+          <a href={href(`/the-build/${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>
+
+    <section class="news-signup" aria-labelledby="news-signup-title">
+      <h2 id="news-signup-title">Get The Build in your inbox</h2>
+      <p>A short note when something worth reading lands. Double opt-in — we'll email a link to confirm.</p>
+      <form class="news-form" method="post" action={href("/api/newsletter/the-build/subscribe")}>
+        <label class="sr-only" for="news-email">Email address</label>
+        <input id="news-email" name="email" type="email" inputmode="email" autocomplete="email"
+          required placeholder="you@example.com" />
+        <button type="submit">Subscribe</button>
+      </form>
+      <p class="news-status" role="status" aria-live="polite" hidden></p>
+    </section>
+  </div>
+
+  <script>
+    // Progressive enhancement: the form POSTs natively without JS (the endpoint
+    // redirects back with ?subscribed=1). With JS we intercept for inline feedback.
+    const form = document.querySelector<HTMLFormElement>(".news-form");
+    const status = document.querySelector<HTMLParagraphElement>(".news-status");
+    function show(msg: string) {
+      if (!status) return;
+      status.textContent = msg;
+      status.hidden = false;
+    }
+    if (new URLSearchParams(location.search).get("subscribed") === "1") {
+      show("Almost there — check your inbox to confirm.");
+    }
+    form?.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const email = new FormData(form).get("email");
+      try {
+        const res = await fetch(form.action, {
+          method: "POST",
+          headers: { "content-type": "application/json", accept: "application/json" },
+          body: JSON.stringify({ email }),
+        });
+        if (res.status === 429) show("You've tried a few times — give it a minute and retry.");
+        else if (res.ok) {
+          form.reset();
+          show("Almost there — check your inbox to confirm.");
+        } else show("That address didn't look right — try again.");
+      } catch {
+        show("Something went wrong — try again in a moment.");
+      }
+    });
+  </script>
+</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); }
+  .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; align-items: start; padding-block: clamp(3rem, 7vw, 6rem); }
+  .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: 520px) { .post-grid { grid-template-columns: 1fr; } }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .news-signup { margin: 0 auto clamp(3rem, 7vw, 6rem); max-width: 40rem; padding: clamp(1.75rem, 4vw, 2.5rem); text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
+  .news-signup h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
+  .news-signup p { margin: .6rem 0 0; color: var(--color-muted); line-height: 1.6; }
+  .news-form { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.35rem; }
+  .news-form input { flex: 1 1 16rem; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: inherit; font-size: 1rem; }
+  .news-form button { padding: .7rem 1.4rem; border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700; cursor: pointer; }
+  .news-form button:hover { background: color-mix(in srgb, var(--color-primary) 88%, black); }
+  .news-status { margin-top: 1rem; font-weight: 600; color: var(--color-accent-ink); }
+</style>

package/apps/storefront/src/pages/the-build/rss.xml.ts

@@ -0,0 +1,33 @@
+/**
+ * RSS 2.0 feed for the resolved tenant's `the-build` collection — the
+ * syndication mirror of `sitemap.xml.ts` and the newsletter on-ramp (B1.1).
+ * Reads the engine's live-visible list (`listBuildPosts` default), so drafts and
+ * unlisted posts never syndicate — the same visibility chokepoint the sitemap
+ * rides. The XML itself is hand-rolled in `lib/blog/rss.ts` (no `@astrojs/rss`),
+ * which is tenant/collection-generic so `/blog/rss.xml` can reuse it later.
+ */
+import type { APIContext } from "astro";
+import { listBuildPosts, THE_BUILD } from "@/lib/the-build/provider.js";
+import { renderRssFeed } from "@/lib/blog/rss.js";
+
+export async function GET(context: APIContext): Promise<Response> {
+  const { tenant, canonicalBase } = context.locals;
+  const posts = await listBuildPosts(tenant.tenant_id);
+  if (posts.length === 0) return new Response(null, { status: 404 });
+
+  const body = renderRssFeed({
+    channelTitle: `The Build — ${tenant.displayName}`,
+    channelDescription:
+      "Short articles on building a compliant, resilient storefront — from Token of Trust.",
+    canonicalBase,
+    collectionBase: THE_BUILD.base,
+    posts,
+  });
+
+  return new Response(body, {
+    headers: {
+      "content-type": "application/rss+xml; charset=utf-8",
+      "cache-control": "public, max-age=300, s-maxage=3600",
+    },
+  });
+}