@tokenoftrust/storefront-runner 1.3.4-rc.3 → 1.4.0

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

@@ -0,0 +1,98 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { listBlogPosts } from "@/lib/blog/provider.js";
+
+const { tenant, basePath, canonicalBase } = Astro.locals;
+const posts = await listBlogPosts(tenant.tenant_id);
+if (posts.length === 0) return new Response(null, { status: 404 });
+
+const href = (path: string) => `${basePath}${path}` || "/";
+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>
+              <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>

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

@@ -9,7 +9,15 @@
  * toggle here would bypass the promote gate this whole design exists to enforce.
  * The console reflects the real per-environment resolved state (each column reads
  * the published capabilities artifact for its pointer) and makes the flow legible.
+ *
+ * DELIBERATELY on-demand — do NOT prerender (audit finding "selective-prerender").
+ * It resolves per-request against the running host: Astro.locals.tenant + cspNonce
+ * (from middleware), live/preview/test capability pointers read from TENANT_CACHE KV,
+ * and a host-based "you are here" marker. Prerendering would freeze one tenant's
+ * capability state at build time and strip the middleware CSP + security headers.
  */
+export const prerender = false;
+
 import { readKv } from "@/lib/env";
 import {
   readPublishedArtifact,