@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,150 @@
+---
+/**
+ * /search — dual-purpose route (brief §5 Search).
+ *
+ * 1. `?format=json` — returns `{ products: TypeaheadDoc[] }` for the header
+ *    typeahead island. Search runs through the ToTClient (D1 FTS5 when bound, else
+ *    a Fuse index over the snapshot) over ACTIVE products only (drafts never surface).
+ * 2. Otherwise — the full results page: a no-JS <form>, the echoed query, a
+ *    result count, and a product grid. Results pages are `noindex` (standard
+ *    practice — thin, parameterized, duplicative).
+ */
+import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import EmptyState from "@/components/EmptyState.astro";
+import Section from "@/components/Section.astro";
+import { toTypeaheadDoc } from "@/lib/search";
+import { breadcrumbLd } from "@/lib/jsonld";
+import { withBase } from "@/lib/basePath";
+
+const { tenant, tot, canonicalBase, basePath } = Astro.locals;
+// Commerce-only route (page + typeahead JSON): off for marketing tenants.
+if (!Astro.locals.features.productSearch) return new Response(null, { status: 404 });
+const url = new URL(Astro.request.url);
+const q = (url.searchParams.get("q") ?? "").trim();
+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.
+
+// --- JSON path: powers the header typeahead island. Must return BEFORE render.
+if (isJson) {
+  const docs = (await tot.search(q, 8)).map(toTypeaheadDoc);
+  return new Response(JSON.stringify({ products: docs }), {
+    headers: { "content-type": "application/json" },
+  });
+}
+
+// --- HTML path.
+const results = q ? await tot.search(q, 24) : [];
+const featured = q ? [] : await tot.getFeatured(8);
+
+const crumbs = [
+  { label: tenant.displayName, href: "/" },
+  { label: "Search", href: "/search" },
+];
+---
+
+<Layout
+  title={q ? `Search: ${q}` : "Search"}
+  description={`Search the ${tenant.displayName} catalog.`}
+  path="/search"
+  noindex={true}
+  jsonLd={breadcrumbLd(crumbs, canonicalBase)}
+>
+  <div class="container-prose pt-6">
+    <Breadcrumbs crumbs={crumbs} />
+  </div>
+
+  {/* Search hero + no-JS form (works without the island). */}
+  <header class="container-prose pb-2 pt-8">
+    <p class="eyebrow eyebrow--tick mb-3">Search</p>
+    <h1 class="display-xl">
+      {q ? <>Results for “{q}”</> : "What are you after?"}
+    </h1>
+    <form
+      method="get"
+      action={withBase(basePath, "/search")}
+      role="search"
+      class="mt-7 flex max-w-xl items-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-2 focus-within:border-[var(--color-primary)]"
+    >
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+        class="shrink-0 text-[var(--color-muted)]"
+      >
+        <circle cx="11" cy="11" r="7"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+      <label class="sr-only" for="search-input">Search products</label>
+      <input
+        id="search-input"
+        type="search"
+        name="q"
+        value={q}
+        autocomplete="off"
+        placeholder="Search products"
+        class="w-full min-w-0 bg-transparent font-body text-text placeholder:text-muted focus:outline-none"
+      />
+      <button
+        type="submit"
+        class="shrink-0 rounded-full bg-[var(--color-primary)] px-5 py-1.5 font-display text-sm font-medium text-[var(--color-primary-contrast)] transition-transform hover:-translate-y-0.5"
+      >
+        Search
+      </button>
+    </form>
+    {q && (
+      <p class="mt-4 text-sm text-[var(--color-muted)]">
+        {results.length} {results.length === 1 ? "result" : "results"}
+      </p>
+    )}
+  </header>
+
+  {q ? (
+    results.length === 0 ? (
+      <EmptyState
+        title={`No matches for “${q}”`}
+        body="Nothing in the catalog answers to that — yet. Try a broader word, a category, or browse the full range."
+        ctaLabel="Browse collections"
+        ctaHref="/collections"
+      />
+    ) : (
+      <section class="bg-[var(--color-bg)] py-[clamp(2rem,5vw,3.5rem)]">
+        <div class="container-prose">
+          <div class="grid grid-cols-2 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+            {results.map((p, i) => (
+              <ProductCard product={p} position={i} list="search" />
+            ))}
+          </div>
+        </div>
+      </section>
+    )
+  ) : (
+    <>
+      <EmptyState
+        title="Start with a word"
+        body="Search by name, maker, or material. Or wander through the collections below."
+        ctaLabel="Browse collections"
+        ctaHref="/collections"
+      />
+      {featured.length > 0 && (
+        <Section title="While you're here" eyebrow="Featured" tone="surface">
+          <div class="grid grid-cols-2 gap-5 lg:grid-cols-4">
+            {featured.map((p, i) => (
+              <ProductCard product={p} position={i} list="search-featured" />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )}
+</Layout>

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

@@ -0,0 +1,78 @@
+/**
+ * Per-tenant XML sitemap. Built from the resolved tenant's canonical base +
+ * catalog. ACTIVE products only — getAllActiveProducts() excludes the draft
+ * canary (`trail-cap`), so drafts never leak into the sitemap. Editorial slugs
+ * come from the ContentProvider.
+ */
+import type { APIContext } from "astro";
+
+interface SitemapUrl {
+  loc: string;
+  lastmod?: string;
+}
+
+/** XML-escape text inside a tag (URLs may contain & in query, etc.). */
+function escapeXml(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+export async function GET(context: APIContext): Promise<Response> {
+  const { tot, canonicalBase, content, features } = context.locals;
+  const base = canonicalBase.replace(/\/$/, "");
+
+  const urls: SitemapUrl[] = [{ loc: `${base}/` }];
+
+  // Commerce URLs only for tenants with a catalog sitemap. Marketing tenants
+  // emit homepage + content pages, keeping product/collection routes out.
+  if (features.commerceSitemap) {
+    const [products, collections] = await Promise.all([
+      tot.getAllActiveProducts(),
+      tot.listCollections(),
+    ]);
+    urls.push({ loc: `${base}/collections` });
+    for (const c of collections) {
+      urls.push({ loc: `${base}/collections/${c.handle}` });
+    }
+    for (const p of products) {
+      const entry: SitemapUrl = { loc: `${base}/products/${p.handle}` };
+      if (p.updated_at) entry.lastmod = p.updated_at;
+      urls.push(entry);
+    }
+  }
+
+  // Raw tenant-authored marketing subpages (content/<tenant>/pages-html/*.html).
+  const rawPageSlugs = await content.listPageHtmlSlugs();
+  for (const slug of rawPageSlugs) {
+    urls.push({ loc: `${base}/${slug}/` });
+  }
+
+  const pages = await content.listPages();
+  for (const page of pages) {
+    urls.push({ loc: `${base}/${page.slug}` });
+  }
+
+  const body = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls
+  .map(
+    (u) =>
+      `  <url>\n    <loc>${escapeXml(u.loc)}</loc>${
+        u.lastmod ? `\n    <lastmod>${escapeXml(u.lastmod)}</lastmod>` : ""
+      }\n  </url>`,
+  )
+  .join("\n")}
+</urlset>
+`;
+
+  return new Response(body, {
+    headers: {
+      "content-type": "application/xml; charset=utf-8",
+      "cache-control": "public, max-age=300, s-maxage=3600",
+    },
+  });
+}