npm - @tokenoftrust/storefront-runner - Versions diffs - 0.1.0 - Mend

@tokenoftrust/storefront-runner 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/apps/storefront/src/pages/index.astro ADDED Viewed

@@ -0,0 +1,290 @@
+---
+/**
+ * Homepage — composed from Storyblok blocks (local fallback in Phase 1).
+ * Editorial composition comes from the ContentProvider; product/collection data
+ * is resolved from the ToTClient. All async data resolution happens HERE in the
+ * frontmatter (Astro templates can't host multi-statement async arrows), then
+ * the template renders simple typed view-models.
+ */
+import Layout from "@/layouts/Layout.astro";
+import Section from "@/components/Section.astro";
+import Hero from "@/components/home/Hero.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import CollectionCard from "@/components/CollectionCard.astro";
+import Img from "@/components/Img.astro";
+import MarketingBlocks from "@/components/marketing/MarketingBlocks.astro";
+import { withBase } from "@/lib/basePath";
+import { rawHtmlResponse } from "@/lib/rawMarketingHtml";
+import type { CatalogCollection, CatalogProduct } from "@tot/public-runtime";
+import {
+  isMarketingBlock,
+  type HeroBlock,
+  type EditorialBlock,
+  type NewsletterBlock,
+  type PromoTilesBlock,
+  type MarketingBlock,
+} from "@/lib/storyblok/content-model";
+const { tenant, tot, content, basePath, features } = Astro.locals;
+const marketing = !features.catalog;
+// Raw-HTML home (vendor-injected): serve the tenant's own self-contained
+// document VERBATIM, bypassing the block Layout entirely. Its inline
+// <style>/<script> get this request's CSP nonce so the strict policy still
+// allows them. This route stays fully inside Astro — middleware already applied
+// tenant resolution + canonical host, and on the way out applies security
+// headers, the CSP, and (in prod) the edge page cache. SEO title/meta/canonical/
+// OpenGraph/JSON-LD come from the document's own <head>. The homepage `/` is in
+// the marketing sitemap (sitemap.xml.ts).
+//
+// Served regardless of siteType: a tenant that ships home.html gets its raw
+// marketing home whether or not commerce is on. This is the HYBRID tenant —
+// pixel-perfect marketing chrome at `/` surrounding a live commerce core at
+// /collections + /products/* (see playbook/site-migration/commerce-handoff.md §1
+// and product-boundaries.md). Commerce tenants with no home.html fall through to
+// the block-composed home below, unchanged. Mirrors the raw-subpage path in
+// [...slug].astro (getPageHtml is already siteType-agnostic).
+{
+  const rawHtml = await content.getHomeHtml();
+  if (rawHtml) {
+    // Shared chrome: if the tenant ships a chrome.html wrapper AND this home is a
+    // body-only fragment, rawHtmlResponse splices it in; a full document serves
+    // verbatim (backward-compatible).
+    const chromeWrapper = await content.getChromeHtml();
+    return rawHtmlResponse(rawHtml, { nonce: Astro.locals.cspNonce, basePath, chromeWrapper });
+  }
+}
+const home = await content.getHome();
+// Marketing tenants (no catalog) compose the homepage from marketing blocks and
+// skip ALL product/collection resolution below.
+const marketingBlocks: MarketingBlock[] = marketing
+  ? home.blocks.filter(isMarketingBlock)
+  : [];
+const collections = marketing ? [] : await tot.listCollections();
+// --- Resolve each block into a typed, render-ready view-model -----------------
+type Resolved =
+  | { kind: "hero"; block: HeroBlock; product: CatalogProduct | null }
+  | { kind: "promo_tiles"; title?: string; tiles: PromoTilesBlock["tiles"] }
+  | { kind: "collections"; title?: string; cols: CatalogCollection[] }
+  | { kind: "products"; title?: string; products: CatalogProduct[] }
+  | { kind: "editorial"; block: EditorialBlock }
+  | { kind: "newsletter"; block: NewsletterBlock };
+async function resolveProducts(
+  source: "featured" | "newest",
+  handles: string[] | undefined,
+  limit: number,
+): Promise<CatalogProduct[]> {
+  if (handles?.length) {
+    const all = await Promise.all(handles.map((h) => tot.getProductByHandle(h)));
+    return all
+      .filter((p): p is CatalogProduct => !!p && p.status === "active")
+      .slice(0, limit);
+  }
+  if (source === "newest") {
+    const { products } = await tot.listProducts({ sort: "newest", pageSize: limit });
+    return products;
+  }
+  return tot.getFeatured(limit);
+}
+const resolved: Resolved[] = [];
+for (const block of marketing ? [] : home.blocks) {
+  switch (block.component) {
+    case "hero": {
+      let product: CatalogProduct | null = null;
+      if (block.featureCollection) {
+        const col = collections.find((c) => c.handle === block.featureCollection);
+        const firstHandle = col?.product_handles[0];
+        if (firstHandle) product = await tot.getProductByHandle(firstHandle);
+      }
+      resolved.push({ kind: "hero", block, product });
+      break;
+    }
+    case "promo_tiles": {
+      if (block.tiles?.length) {
+        resolved.push({ kind: "promo_tiles", title: block.title, tiles: block.tiles });
+      }
+      break;
+    }
+    case "featured_collections": {
+      const handles = block.handles?.length
+        ? block.handles
+        : collections.map((c) => c.handle);
+      const cols = handles
+        .map((h) => collections.find((c) => c.handle === h))
+        .filter((c): c is CatalogCollection => !!c);
+      resolved.push({ kind: "collections", title: block.title, cols });
+      break;
+    }
+    case "featured_products": {
+      const products = await resolveProducts(
+        block.source,
+        block.handles,
+        block.limit ?? 4,
+      );
+      resolved.push({ kind: "products", title: block.title, products });
+      break;
+    }
+    case "editorial":
+      resolved.push({ kind: "editorial", block });
+      break;
+    case "newsletter":
+      resolved.push({ kind: "newsletter", block });
+      break;
+  }
+}
+---
+<Layout
+  title={home.seoTitle ?? tenant.displayName}
+  description={home.seoDescription}
+  path="/"
+  ogType="website"
+  fullBleed={marketing}
+>
+  {marketing && <MarketingBlocks blocks={marketingBlocks} basePath={basePath} />}
+  {
+    !marketing && resolved.map((r) => {
+      if (r.kind === "hero") {
+        return <Hero block={r.block} featureProduct={r.product} />;
+      }
+      if (r.kind === "promo_tiles") {
+        return (
+          <Section title={r.title} eyebrow="Featured" tone="bg">
+            <div
+              class:list={[
+                "grid gap-5",
+                r.tiles.length >= 3 ? "sm:grid-cols-3" : "sm:grid-cols-2",
+              ]}
+            >
+              {r.tiles.map((t) => (
+                <a
+                  href={withBase(basePath, t.href)}
+                  class="group relative block aspect-[16/9] overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)]"
+                >
+                  {t.image && (
+                    <img
+                      src={t.image}
+                      alt={t.label}
+                      loading="lazy"
+                      class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                  )}
+                  <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4 font-display text-lg font-semibold text-white">
+                    {t.label}
+                  </span>
+                </a>
+              ))}
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "collections") {
+        return (
+          <Section title={r.title} eyebrow="Collections" tone="bg">
+            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+              {r.cols.map((c) => (
+                <CollectionCard collection={c} productCount={c.product_handles.length} />
+              ))}
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "products") {
+        return (
+          <Section title={r.title} eyebrow="Shop" tone="surface">
+            <div class="grid grid-cols-2 gap-5 lg:grid-cols-4">
+              {r.products.map((p, i) => (
+                <ProductCard product={p} position={i} list={r.title} />
+              ))}
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "editorial") {
+        const b = r.block;
+        const right = b.align !== "left";
+        return (
+          <Section tone="bg">
+            <div
+              class:list={[
+                "grid items-center gap-10 md:grid-cols-2",
+                right ? "" : "md:[&>*:first-child]:order-2",
+              ]}
+            >
+              <div data-reveal>
+                {b.eyebrow && <p class="eyebrow eyebrow--tick mb-4">{b.eyebrow}</p>}
+                <h2 class="display-md">
+                  {b.title}
+                </h2>
+                <div class="rte mt-5 text-[var(--color-muted)]" set:html={b.body_html} />
+                {b.ctaLabel && b.ctaHref && (
+                  <a
+                    href={withBase(basePath, b.ctaHref)}
+                    class="link-accent mt-7 inline-block pb-0.5 font-display text-sm font-medium"
+                  >
+                    {b.ctaLabel} →
+                  </a>
+                )}
+              </div>
+              <div data-reveal>
+                <div class="overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-md)]">
+                  <Img
+                    seed={b.imageSeed ?? b.title}
+                    label={b.title}
+                    alt=""
+                    width={1000}
+                    height={750}
+                    sizes="(min-width:768px) 48vw, 100vw"
+                    class="h-full w-full object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          </Section>
+        );
+      }
+      if (r.kind === "newsletter") {
+        const b = r.block;
+        return (
+          <Section tone="surface" id="newsletter">
+            <div class="mx-auto max-w-xl text-center" data-reveal>
+              <h2 class="display-md">
+                {b.title}
+              </h2>
+              {b.body && <p class="mt-3 text-[var(--color-muted)]">{b.body}</p>}
+              <form
+                action={withBase(basePath, "/api/newsletter")}
+                method="post"
+                class="mx-auto mt-7 flex max-w-md flex-col gap-3 sm:flex-row"
+              >
+                <input type="hidden" name="source" value="home" />
+                <label class="sr-only" for="home-news-email">Email address</label>
+                <input
+                  id="home-news-email"
+                  type="email"
+                  name="email"
+                  required
+                  placeholder={b.placeholder ?? "you@example.com"}
+                  class="flex-1 rounded-full border border-[var(--color-border)] bg-[var(--color-bg)] px-5 py-3 text-[var(--color-text)] placeholder:text-[var(--color-muted)]"
+                />
+                <button
+                  type="submit"
+                  class="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"
+                >
+                  {b.ctaLabel ?? "Subscribe"}
+                </button>
+              </form>
+            </div>
+          </Section>
+        );
+      }
+      return null;
+    })
+  }
+</Layout>

package/apps/storefront/src/pages/llms.txt.ts ADDED Viewed

@@ -0,0 +1,92 @@
+/**
+ * Per-tenant llms.txt — the emerging /llms.txt convention: a concise,
+ * machine-readable guide that helps LLM answer engines (ChatGPT, Perplexity,
+ * Google AI Overviews, etc.) understand what this store is and where its key
+ * content lives. Mirrors robots.txt / sitemap.xml: built per request from the
+ * resolved tenant's catalog + content, canonical base from the Host.
+ *
+ * Every line traces to REAL migrated data or tenant config — no fabricated copy
+ * (playbook/codebase-health.md T7). Summary/descriptions are the merchant's own
+ * SEO text; compliance facts come from tenant.compliance.
+ */
+import type { APIContext } from "astro";
+import { createContentProvider } from "@/lib/storyblok/provider";
+/** Collapse HTML/whitespace to a single trimmed line for a link description. */
+function oneLine(s: string | undefined, max = 140): string | undefined {
+  if (!s) return undefined;
+  const t = s.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+  if (!t) return undefined;
+  return t.length > max ? `${t.slice(0, max - 1)}…` : t;
+}
+export async function GET(context: APIContext): Promise<Response> {
+  const { tot, tenant, canonicalBase } = context.locals;
+  const base = canonicalBase.replace(/\/$/, "");
+  const provider = createContentProvider(tenant);
+  const [collections, pages, featured, home] = await Promise.all([
+    tot.listCollections(),
+    provider.listPages(),
+    tot.getFeatured(12),
+    provider.getHome().catch(() => null),
+  ]);
+  const lines: string[] = [`# ${tenant.displayName}`, ""];
+  const summary = oneLine(home?.seoDescription, 280);
+  if (summary) lines.push(`> ${summary}`, "");
+  // Compliance facts — sourced from tenant config, never invented.
+  const c = tenant.compliance;
+  if (c && (c.minAge || c.nicotineWarning || c.shippingRestriction)) {
+    const facts: string[] = [];
+    if (c.minAge) facts.push(`age-restricted — customers must be ${c.minAge}+`);
+    if (c.nicotineWarning) facts.push("products contain nicotine (FDA warning applies)");
+    if (facts.length) lines.push(`**Compliance:** ${facts.join("; ")}.`);
+    const ship = oneLine(c.shippingRestriction, 240);
+    if (ship) lines.push(`**Shipping:** ${ship}`);
+    lines.push("");
+  }
+  if (collections.length) {
+    lines.push("## Collections");
+    for (const col of collections) {
+      const desc = oneLine(col.description_text ?? col.seo.description);
+      lines.push(`- [${col.title}](${base}/collections/${col.handle})${desc ? `: ${desc}` : ""}`);
+    }
+    lines.push("");
+  }
+  if (featured.length) {
+    lines.push("## Featured products");
+    for (const p of featured) {
+      const desc = oneLine(p.seo.description ?? p.description_text);
+      lines.push(`- [${p.title}](${base}/products/${p.handle})${desc ? `: ${desc}` : ""}`);
+    }
+    lines.push("");
+  }
+  if (pages.length) {
+    lines.push("## Pages");
+    for (const pg of pages) {
+      lines.push(`- [${pg.title}](${base}/${pg.slug})`);
+    }
+    lines.push("");
+  }
+  lines.push("## Optional");
+  lines.push(`- [Full product catalog (XML sitemap)](${base}/sitemap.xml)`);
+  lines.push(`- [Search](${base}/search)`);
+  lines.push(
+    "- Every page ships Schema.org JSON-LD (Product, Offer, AggregateRating, Breadcrumb, Organization) for structured extraction.",
+  );
+  lines.push("");
+  return new Response(lines.join("\n"), {
+    headers: {
+      "content-type": "text/plain; charset=utf-8",
+      "cache-control": "public, max-age=300, s-maxage=3600",
+    },
+  });
+}