@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,61 @@
+---
+/**
+ * 404 — written in the Northwind voice, not a stub. Offers a way home and a
+ * few collections to wander into so a dead link still lands somewhere useful.
+ */
+import Layout from "@/layouts/Layout.astro";
+import CollectionCard from "@/components/CollectionCard.astro";
+import { withBase } from "@/lib/basePath";
+
+const { tenant, tot, basePath } = Astro.locals;
+
+// A handful of collections to redirect lost visitors toward.
+const collections = (await tot.listCollections()).slice(0, 3);
+---
+
+<Layout
+  title="Page not found"
+  description="The page you were after isn't here."
+  path="/404"
+  noindex={true}
+>
+  <section class="bg-[var(--color-bg)]">
+    <div class="container-prose py-[clamp(4rem,10vw,8rem)] text-center" data-reveal>
+      <p class="eyebrow mb-4">404</p>
+      <h1 class="display-xl mx-auto max-w-[18ch]">
+        This page wandered off in the fog.
+      </h1>
+      <p class="mx-auto mt-5 max-w-[44ch] text-[1.1rem] text-[var(--color-muted)]">
+        The link you followed leads nowhere we keep. No harm done — let's get you
+        back on the trail.
+      </p>
+      <div class="mt-9 flex flex-wrap items-center justify-center gap-3">
+        <a
+          href={withBase(basePath, "/")}
+          class="inline-flex items-center rounded-full bg-[var(--color-primary)] px-6 py-3 font-display text-sm font-medium text-[var(--color-primary-contrast)] transition-transform hover:-translate-y-0.5"
+        >
+          Back home
+        </a>
+        <a
+          href={withBase(basePath, "/collections")}
+          class="inline-flex items-center rounded-full border border-[var(--color-border)] px-6 py-3 font-display text-sm font-medium text-[var(--color-text)] transition-colors hover:border-[var(--color-primary)]"
+        >
+          Browse collections
+        </a>
+      </div>
+    </div>
+  </section>
+
+  {collections.length > 0 && (
+    <section class="bg-[var(--color-surface)] py-[clamp(2.5rem,6vw,4.5rem)]">
+      <div class="container-prose">
+        <p class="eyebrow mb-6 text-center">Maybe you were looking for</p>
+        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {collections.map((c) => (
+            <CollectionCard collection={c} productCount={c.product_handles.length} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )}
+</Layout>

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

@@ -0,0 +1,90 @@
+---
+/**
+ * Editorial pages from the ContentProvider (Storyblok seam; local fallback in
+ * Phase 1). Catch-all, lowest routing priority — Astro resolves /products,
+ * /collections, /search first. We still guard defensively against those
+ * prefixes so a stray slug can never shadow a real route.
+ */
+import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import { breadcrumbLd } from "@/lib/jsonld";
+import { truncate } from "@/lib/format";
+import { rawHtmlResponse } from "@/lib/rawMarketingHtml";
+
+const { tenant, canonicalBase, content, basePath } = Astro.locals;
+const slug = (Astro.params.slug ?? "").replace(/^\/+|\/+$/g, "");
+
+// Defensive: never let the catch-all answer for first-class route namespaces.
+// (Keeps the commerce boundary hard — a marketing subpage can never shadow a
+// product/collection route.)
+if (
+  !slug ||
+  slug.startsWith("products/") ||
+  slug.startsWith("collections/")
+) {
+  return new Response(null, { status: 404 });
+}
+
+// Preview/dev-only style-guide surfaces are requested at `/_style-guide/<tenant>/…`
+// (the leading underscore signals internal). Astro won't route a `_`-prefixed pages
+// dir, so the pages live under `/style-guide/…` and we rewrite the underscored URL
+// onto them. These are noindex + sitemap-excluded and never reskin the live site.
+if (slug === "_style-guide" || slug.startsWith("_style-guide/")) {
+  return Astro.rewrite("/style-guide/" + slug.slice("_style-guide".length + 1));
+}
+
+// Raw tenant-authored marketing subpage (vendor-injected HTML) — serve the
+// self-contained document VERBATIM, bypassing the block Layout, with the request
+// CSP nonce stamped onto its first-party inline <style>/<script>. Same path as the
+// raw home in index.astro. Middleware still applies canonical host, security
+// headers, CSP, and (prod) the edge cache.
+const rawHtml = await content.getPageHtml(slug);
+if (rawHtml) {
+  // 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();
+  return rawHtmlResponse(rawHtml, { nonce: Astro.locals.cspNonce, basePath, chromeWrapper });
+}
+
+const page = await content.getPage(slug);
+if (!page) return new Response(null, { status: 404 });
+
+const crumbs = [
+  { label: tenant.displayName, href: "/" },
+  { label: page.title, href: `/${page.slug}` },
+];
+
+const description =
+  page.seoDescription ||
+  (page.intro ? truncate(page.intro, 160) : undefined);
+---
+
+<Layout
+  title={page.seoTitle || page.title}
+  description={description}
+  path={`/${page.slug}`}
+  ogType="article"
+  jsonLd={breadcrumbLd(crumbs, canonicalBase)}
+>
+  <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>
+    )}
+  </header>
+
+  {/* Body — constrained to a readable measure. */}
+  <div class="container-prose pb-[clamp(3rem,7vw,6rem)] pt-8">
+    <div class="rte mx-auto max-w-[68ch] text-[var(--color-text)]" set:html={page.body_html} />
+  </div>
+</Layout>