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

package/apps/storefront/src/components/admin/AdminSubscriptionsTab.astro

@@ -4,6 +4,7 @@
  * truth; lifecycle actions require a later subscription API and audit gates.
  */
 import { getSubscriptionsViewModel } from "@/lib/admin/services/mock";
+import { formatDate } from "@/lib/format";
 import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
 import type {
   SubscriptionAttentionRow,
@@ -64,9 +65,6 @@ function formatMoney(value: number): string {
   return `$${value.toFixed(2)}`;
 }
 
-function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" });
-}
 ---
 
 <section

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

@@ -0,0 +1,87 @@
+---
+// Paywall card shown under the teaser of a gated post the viewer can't read in
+// full. Mirrors the "Coming soon" host gate (`src/lib/auth/gatePage.ts`):
+// badge + headline + one line of value + a single CTA — restyled with the site's
+// design tokens so it reads as native article chrome, and preceded by a fade that
+// dissolves the truncated body into the card.
+import type { BlogAccess } from "@/lib/blog/types.js";
+
+interface Props {
+  access: BlogAccess;
+  next: string;
+  signedIn: boolean;
+  loginHref: string;
+}
+
+const { next, signedIn, loginHref } = Astro.props;
+---
+
+<div class="paywall-fade" aria-hidden="true"></div>
+<aside class="paywall" data-next={next} role="note">
+  <span class="paywall-badge">Members only</span>
+  {signedIn ? (
+    <>
+      <h2>You're signed in</h2>
+      <p>Membership tiers for this story are coming soon.</p>
+      {/* Unreachable in v1 (authenticated ⇒ member) — coded per the B4.0 spike so
+          a future paid tier only has to point this CTA at a membership route. */}
+      <a class="paywall-cta" href={loginHref}>Become a member</a>
+    </>
+  ) : (
+    <>
+      <h2>This story is for members</h2>
+      <p>Sign in with Token of Trust to keep reading — it's free.</p>
+      <a class="paywall-cta" href={loginHref}>Sign in to keep reading</a>
+    </>
+  )}
+</aside>
+
+<style>
+  .paywall-fade {
+    height: 7rem;
+    margin-top: -7rem;
+    position: relative;
+    pointer-events: none;
+    background: linear-gradient(to bottom, transparent, var(--color-bg));
+  }
+  .paywall {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: .9rem;
+    max-width: 34rem;
+    margin: 0 auto;
+    padding: clamp(1.75rem, 4vw, 2.5rem);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-md);
+  }
+  .paywall-badge {
+    display: inline-block;
+    letter-spacing: .18em;
+    text-transform: uppercase;
+    font-size: .72rem;
+    font-weight: 700;
+    color: var(--color-muted);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: .35rem .8rem;
+  }
+  .paywall h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
+  .paywall p { margin: 0; max-width: 28rem; color: var(--color-muted); font-size: 1.02rem; line-height: 1.6; }
+  .paywall-cta {
+    margin-top: .4rem;
+    display: inline-block;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--color-primary-contrast);
+    background: var(--color-primary);
+    border-radius: var(--radius-md);
+    padding: .8rem 1.6rem;
+    transition: background .15s ease;
+  }
+  .paywall-cta:hover { background: var(--color-primary-hover); }
+</style>

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

@@ -0,0 +1,43 @@
+---
+// Visual-only lock badge for a gated post on listing card grids. Reads
+// `post.access` and renders nothing for public posts. No gating logic lives
+// here — entitlement is decided in the route via `viewerHasBlogAccess`; this
+// is purely a "this story is members-only" indicator on listings and archives.
+import type { BlogAccess } from "@/lib/blog/types.js";
+
+interface Props {
+  access?: BlogAccess;
+}
+
+const { access } = Astro.props;
+const gated = (access ?? "public") !== "public";
+---
+
+{gated && (
+  <p class="access-badge">
+    <svg class="lock" width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="4" y="11" width="16" height="9" rx="2"></rect>
+      <path d="M8 11V7a4 4 0 0 1 8 0v4"></path>
+    </svg>
+    Members
+  </p>
+)}
+
+<style>
+  .access-badge {
+    display: inline-flex;
+    gap: .3rem;
+    align-items: center;
+    align-self: flex-start;
+    margin: 0 0 .55rem;
+    padding: .2rem .55rem;
+    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
+    border-radius: var(--radius-full);
+    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
+    color: var(--color-accent-ink);
+    font: 700 .68rem/1 var(--font-mono);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+  }
+  .lock { flex: 0 0 auto; }
+</style>

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

@@ -0,0 +1,57 @@
+---
+// Reader-facing card grid for a list of blog posts, shared by the collection's
+// category and tag index pages. `base` is the collection route base (e.g.
+// "/blog"); `basePath` is the tenant/preview path prefix from Astro.locals.
+import type { BlogPostSummary } from "@/lib/blog/types.js";
+import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
+
+interface Props {
+  posts: BlogPostSummary[];
+  basePath: string;
+  base: string;
+}
+
+const { posts, basePath, base } = Astro.props;
+const href = (path: string) => `${basePath}${path}` || "/";
+---
+
+<section class="post-grid" aria-label="Posts">
+  {posts.map((post, index) => (
+    <article class="post-card">
+      <a href={href(`${base}/${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>
+
+<style>
+  .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: 520px) { .post-grid { grid-template-columns: 1fr; } }
+</style>

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

@@ -0,0 +1,214 @@
+---
+/**
+ * E1.2 — reader reaction bar. Server-renders the post's current reaction tallies
+ * (from the E1.1 KV counters) and offers the fixed vocabulary as clickable
+ * buttons; a client script POSTs the chosen reaction to the public react endpoint
+ * and updates the displayed count optimistically, then reconciles against the
+ * authoritative tallies the endpoint returns. Anonymous, no identity, no
+ * moderation — an emoji tally, the first reader-sentiment signal (complements
+ * view counts). Tenant/collection-generic: mounts on any post route.
+ */
+import { getReactionCounts, REACTIONS, type Reaction } from "@/lib/blog/reactions.js";
+import { readKv } from "@/lib/env";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  /** Collection id the post lives in (e.g. "blog", "the-build"). */
+  collection: string;
+  /** Post slug. */
+  slug: string;
+}
+
+const { collection, slug } = Astro.props;
+const { tenant, basePath, cspNonce } = Astro.locals;
+
+const META: Record<Reaction, { emoji: string; label: string }> = {
+  like: { emoji: "👍", label: "Like" },
+  insightful: { emoji: "💡", label: "Insightful" },
+  celebrate: { emoji: "🎉", label: "Celebrate" },
+};
+
+const kv = await readKv("TENANT_CACHE");
+const counts = await getReactionCounts(kv, tenant.tenant_id, collection, slug);
+
+// The react endpoint is base-path-scoped like every other same-origin POST
+// (mirrors the newsletter form action); host-routed tenants get an empty prefix.
+const endpoint = withBase(
+  basePath,
+  `/api/blog/${encodeURIComponent(collection)}/${encodeURIComponent(slug)}/react`,
+);
+---
+
+<section class="reaction-bar" aria-label="React to this article" data-reaction-bar data-endpoint={endpoint}>
+  <span class="reaction-bar__prompt">React</span>
+  <div class="reaction-bar__buttons">
+    {
+      REACTIONS.map((reaction) => (
+        <button
+          type="button"
+          class="reaction-btn"
+          data-reaction={reaction}
+          aria-pressed="false"
+          aria-label={META[reaction].label}
+        >
+          <span class="reaction-btn__emoji" aria-hidden="true">
+            {META[reaction].emoji}
+          </span>
+          <span class="reaction-btn__label">{META[reaction].label}</span>
+          <span class="reaction-btn__count" data-reaction-count>
+            {counts[reaction]}
+          </span>
+        </button>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  .reaction-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1rem;
+    width: min(720px, 100%);
+    margin: clamp(2.5rem, 6vw, 4rem) auto 0;
+    padding-top: clamp(1.5rem, 4vw, 2.25rem);
+    border-top: 1px solid var(--color-border);
+  }
+  .reaction-bar__prompt {
+    color: var(--color-muted);
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .reaction-bar__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+  }
+  .reaction-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.5rem 0.85rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    color: var(--color-ink, inherit);
+    font: inherit;
+    font-size: 0.9rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
+  }
+  .reaction-btn:hover {
+    border-color: var(--color-accent);
+  }
+  .reaction-btn:active {
+    transform: translateY(1px);
+  }
+  .reaction-btn[aria-pressed="true"] {
+    border-color: var(--color-accent);
+    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
+  }
+  .reaction-btn__emoji {
+    font-size: 1.1rem;
+  }
+  .reaction-btn__label {
+    font-weight: 700;
+  }
+  .reaction-btn__count {
+    min-width: 1.25ch;
+    padding-left: 0.15rem;
+    color: var(--color-muted);
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+  }
+  .reaction-btn[aria-pressed="true"] .reaction-btn__count {
+    color: var(--color-accent-ink);
+  }
+</style>
+
+<script is:inline nonce={cspNonce}>
+  (() => {
+    // One article (and one reaction bar) per page.
+    const root = document.querySelector("[data-reaction-bar]");
+    if (!root) return;
+
+    const endpoint = root.dataset.endpoint;
+    if (!endpoint) return;
+
+    // Remember this browser's reactions so a reload shows the pressed state and
+    // the same reader can't trivially re-inflate a tally by re-clicking.
+    const storeKey = "blogreact:" + endpoint;
+    let reacted = {};
+    try {
+      reacted = JSON.parse(localStorage.getItem(storeKey) || "{}") || {};
+    } catch {
+      reacted = {};
+    }
+    const persist = () => {
+      try {
+        localStorage.setItem(storeKey, JSON.stringify(reacted));
+      } catch {
+        /* storage disabled — pressed state is best-effort */
+      }
+    };
+
+    const buttons = Array.from(root.querySelectorAll("[data-reaction]"));
+    const countEl = (btn) => btn.querySelector("[data-reaction-count]");
+    const readCount = (btn) => {
+      const n = parseInt((countEl(btn)?.textContent || "0").trim(), 10);
+      return Number.isFinite(n) && n >= 0 ? n : 0;
+    };
+    const setCount = (btn, n) => {
+      const el = countEl(btn);
+      if (el) el.textContent = String(n);
+    };
+
+    for (const btn of buttons) {
+      if (reacted[btn.dataset.reaction]) btn.setAttribute("aria-pressed", "true");
+    }
+
+    const applyServerCounts = (counts) => {
+      if (!counts || typeof counts !== "object") return;
+      for (const btn of buttons) {
+        const v = counts[btn.dataset.reaction];
+        if (typeof v === "number" && v >= 0) setCount(btn, v);
+      }
+    };
+
+    for (const btn of buttons) {
+      btn.addEventListener("click", async () => {
+        const reaction = btn.dataset.reaction;
+        if (!reaction || reacted[reaction]) return;
+
+        // Optimistic: bump immediately, mark pressed.
+        const before = readCount(btn);
+        setCount(btn, before + 1);
+        btn.setAttribute("aria-pressed", "true");
+        reacted[reaction] = true;
+        persist();
+
+        try {
+          const res = await fetch(endpoint, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ reaction }),
+          });
+          const data = await res.json().catch(() => null);
+          // The endpoint always returns the authoritative tallies (even on
+          // rate-limit / invalid) — reconcile the display to them.
+          if (data && data.counts) applyServerCounts(data.counts);
+        } catch {
+          // Network fault: revert the optimistic bump and pressed state.
+          setCount(btn, before);
+          btn.setAttribute("aria-pressed", "false");
+          delete reacted[reaction];
+          persist();
+        }
+      });
+    }
+  })();
+</script>

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

@@ -36,12 +36,46 @@ interface Props {
   ogImage?: string;
   noindex?: boolean;
   jsonLd?: Record<string, unknown> | Record<string, unknown>[];
+  /** Alternate RSS/Atom feeds this page advertises (threaded to <Seo>). */
+  feeds?: { title: string; href: string }[];
   /** Wider pages (PLP/home) drop the prose max-width. */
   fullBleed?: boolean;
+  // --- B1.6 article SEO hardening: pass-through to <Seo> (all additive) ---
+  article?: import("@/lib/seo/meta.js").ArticleMeta;
+  imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  twitterSite?: string;
+  twitterCreator?: string;
+  canonicalOverride?: string;
+  // --- I2 hreflang / <html lang> (additive) ---
+  /** Per-variant `hreflang` alternates for a translated article; threaded to
+   *  <Seo>. Absent/empty ⇒ no alternate links (singleton unchanged). */
+  alternates?: import("@/lib/seo/alternates.js").Alternate[];
+  /** Overrides `<html lang>` (e.g. a translated article's `inLanguage`). Absent ⇒
+   *  the tenant-locale default, so non-translated pages are unchanged. */
+  lang?: string;
 }
 
-const { title, description, path, ogType, ogImage, noindex, jsonLd } =
-  Astro.props;
+const {
+  title,
+  description,
+  path,
+  ogType,
+  ogImage,
+  noindex,
+  jsonLd,
+  feeds,
+  article,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  twitterSite,
+  twitterCreator,
+  canonicalOverride,
+  alternates,
+  lang,
+} = Astro.props;
 const { tenant, themeStyle, canonicalBase, basePath, cspNonce, features, capabilities } =
   Astro.locals;
 
@@ -156,7 +190,7 @@ const footerWidgets = await renderWidgetSlot(
 ---
 
 <!doctype html>
-<html lang={tenant.locale.split("-")[0] ?? "en"} data-base-path={basePath || undefined}>
+<html lang={lang ?? tenant.locale.split("-")[0] ?? "en"} data-base-path={basePath || undefined}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -185,6 +219,15 @@ const footerWidgets = await renderWidgetSlot(
       ogImage={ogImage}
       noindex={noindex}
       jsonLd={allJsonLd}
+      feeds={feeds}
+      article={article}
+      imageAlt={imageAlt}
+      imageWidth={imageWidth}
+      imageHeight={imageHeight}
+      twitterSite={twitterSite}
+      twitterCreator={twitterCreator}
+      canonicalOverride={canonicalOverride}
+      alternates={alternates}
     />
 
     {
@@ -357,6 +400,8 @@ const footerWidgets = await renderWidgetSlot(
           function fix(a) {
             var href = a.getAttribute("href");
             if (!href || href.charAt(0) !== "/" || href.charAt(1) === "/") return;
+            // Global asset namespaces are root-served under every tenant.
+            if (href.indexOf("/tenants/") === 0 || href.indexOf("/shared/") === 0) return;
             if (href === base || href.indexOf(base + "/") === 0) return;
             a.setAttribute("href", base + href);
           }