@tokenoftrust/storefront-runner 4.2.2 → 4.2.3

package/apps/storefront/src/components/content/storefront/chrome/SiteFooter.astro

@@ -122,7 +122,7 @@ const collapsible = variant === "light-collapsible";
             <div class="mt-4 flex items-center gap-3">
               {social.map((s) => (
                 <a
-                  href={s.href}
+                  href={withBase(basePath, s.href)}
                   aria-label={s.label}
                   rel="noopener noreferrer"
                   class="text-muted transition-colors hover:text-primary"

package/apps/storefront/src/components/content/storefront/chrome/SiteHeader.astro

@@ -90,6 +90,7 @@ const {
 
 const { basePath } = Astro.locals;
 const homeHref = withBase(basePath, brandHref ?? "/");
+const searchFormAction = searchAction ? withBase(basePath, searchAction) : undefined;
 const showLogo = !!logo && /^(https?:|\/)/.test(logo.src);
 const dark = variant === "dark";
 const minimal = layout === "minimal";
@@ -205,11 +206,11 @@ const currentPath = Astro.url.pathname;
 
       <!-- Search (live typeahead island) -->
       {
-        !minimal && !compact && searchAction && (
+        !minimal && !compact && searchFormAction && (
           <div class="hidden flex-1 md:flex">
             <SearchTypeahead
               client:idle
-              action={searchAction}
+              action={searchFormAction}
               placeholder={searchPlaceholder}
               label={searchLabel}
             />
@@ -220,9 +221,9 @@ const currentPath = Astro.url.pathname;
       <!-- Actions: saved items + marketing CTAs + auth + account + cart (link only) + mobile menu -->
       <div class:list={["flex items-center gap-1", compact ? "col-start-3 justify-self-end" : "ml-auto"]}>
         {
-          compact && searchAction && (
+          compact && searchFormAction && (
             <a
-              href={withBase(basePath, searchAction)}
+              href={searchFormAction}
               aria-label={searchLabel ?? "Search"}
               class="hidden h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent-ink md:grid"
             >
@@ -281,7 +282,7 @@ const currentPath = Astro.url.pathname;
         {
           authLink && (
             <a data-mobile-menu-action
-              href={authLink.href}
+              href={withBase(basePath, authLink.href)}
               class="inline-flex shrink-0 items-center rounded-full border border-current px-4 py-2 font-display text-sm font-medium transition-opacity hover:opacity-80"
             >
               {authLink.label}
@@ -338,11 +339,11 @@ const currentPath = Astro.url.pathname;
   </div>
 
   {
-    compact && searchAction && (
+    compact && searchFormAction && (
       <div class="border-b border-border bg-surface px-4 py-2 md:hidden" data-header-phone-search>
         <SearchTypeahead
           client:idle
-          action={searchAction}
+          action={searchFormAction}
           placeholder={searchPlaceholder}
           label={searchLabel}
         />
@@ -387,8 +388,8 @@ const currentPath = Astro.url.pathname;
   compact && (
     <nav class:list={["fixed inset-x-0 bottom-0 z-50 grid h-[62px] border-t border-border bg-surface shadow-[0_-3px_14px_color-mix(in_srgb,var(--color-text)_10%,transparent)] md:hidden", cartHref ? "grid-cols-4" : "grid-cols-3"]} aria-label="Quick links">
       <a href={homeHref} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Home</a>
-      <a href={withBase(basePath, searchAction ?? "/search")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Search</a>
-      <a href={accountHref ? withBase(basePath, accountHref) : (authLink?.href ?? "/auth/login")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Account</a>
+      <a href={searchFormAction ?? withBase(basePath, "/search")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Search</a>
+      <a href={withBase(basePath, accountHref ?? authLink?.href ?? "/auth/login")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Account</a>
       {cartHref && <a href={withBase(basePath, cartHref)} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Cart</a>}
     </nav>
   )

package/apps/storefront/src/components/content/storefront/chrome/UtilityNav.astro

@@ -64,7 +64,7 @@ const linkStamp = (l: ChromeLink, index: number) =>
           <span class="flex items-center gap-3">
             {social.map((s) => (
               <a
-                href={s.href}
+                href={withBase(basePath, s.href)}
                 aria-label={s.label}
                 rel="noopener noreferrer"
                 class="transition-colors hover:text-primary"

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

@@ -29,7 +29,8 @@ import { organizationLd, websiteLd } from "@/lib/content/shared/jsonld";
 import { composeStructuredData, structuredDataProfile, type StructuredDataPage } from "@/lib/content/seo/structuredData";
 import { canonicalUrl } from "@/lib/content/seo/urlForm";
 import { documentTitle } from "@/lib/content/seo/documentTitle";
-import { nonceInlineTags, prefixApiFormActions, CHROME_BODY_MARKER } from "@/lib/content/shared/rawMarketingHtml";
+import { nonceInlineTags, prefixSharedChrome, CHROME_BODY_MARKER } from "@/lib/content/shared/rawMarketingHtml";
+import { withBase } from "@/lib/publication/shared/basePath";
 import { CHROME_BEHAVIOR_JS, CHROME_HEAD_JS, sanitizeSharedChromeFragment } from "@/lib/content/shared/rawChrome";
 import { ASYNC_CSS_SWAP_JS } from "@/lib/content/shared/asyncCss";
 import { reportTrackingChainHealth } from "@/lib/measurement/tracking/interactionHealth";
@@ -196,17 +197,19 @@ if (chromeHtml && chromeHtml.includes(CHROME_BODY_MARKER)) {
   const bodyEnd = chromeHtml.lastIndexOf("</body>");
   sharedChrome = {
     header: nonceInlineTags(
-      prefixApiFormActions(
+      prefixSharedChrome(
         sanitizeSharedChromeFragment(chromeHtml.slice(bodyOpen, marker)),
+        basePath,
         apiBasePath,
       ),
       cspNonce,
     ),
     footer: nonceInlineTags(
-      prefixApiFormActions(
+      prefixSharedChrome(
         sanitizeSharedChromeFragment(
           chromeHtml.slice(marker + CHROME_BODY_MARKER.length, bodyEnd >= 0 ? bodyEnd : undefined),
         ),
+        basePath,
         apiBasePath,
       ),
       cspNonce,
@@ -394,7 +397,9 @@ const footerWidgets = await renderWidgetSlot(
             layout={resolvedHeaderVariant}
             announcement={chrome.header.announcement?.messages[0]}
             searchAction={
-              features.productSearch ? (chrome.header.search?.action ?? "/search") : undefined
+              features.productSearch
+                ? withBase(basePath, chrome.header.search?.action ?? "/search")
+                : undefined
             }
             searchPlaceholder={chrome.header.search?.placeholder}
             searchLabel={chrome.header.search?.label}

package/apps/storefront/src/lib/content/shared/rawMarketingHtml.ts

@@ -3,11 +3,13 @@
  *
  * A marketing tenant can ship a self-contained document (`content/<tenant>/home.html`
  * or `content/<tenant>/pages-html/<slug>.html`) that we serve VERBATIM, bypassing the
- * block Layout. Two transforms are applied at serve time:
+ * block Layout. Three transforms are applied at serve time:
  *   1. nonce-stamp the document's inline <style>/<script> so a strict CSP admits them;
  *   2. under path-prefix tenant routing (locals.basePath set), prefix same-origin
- *      root-absolute anchor hrefs with the base path so navigation stays in-tenant —
- *      the raw doc bypasses the Layout's client base-path fixer, so we do it here.
+ *      root-absolute anchor hrefs and page form actions with the base path so
+ *      navigation stays in-tenant — the raw doc bypasses the Layout's client
+ *      base-path fixer, so we do it here;
+ *   3. prefix `/api` form actions with apiBasePath, never a preview pin.
  *
  * Single home for both routes (`index.astro`, `[...slug].astro`).
  *
@@ -24,7 +26,7 @@ import {
 } from "@tot/public-runtime";
 import { reportTrackingChainHealth } from "../../measurement/tracking/interactionHealth.js";
 import { ASYNC_CSS_SWAP_JS } from "./asyncCss.js";
-import { ROOT_SERVED_HREF_NAMESPACES } from "../../publication/shared/basePath.js";
+import { ROOT_SERVED_HREF_NAMESPACES, withBase } from "../../publication/shared/basePath.js";
 
 export { rawHtmlPolicy } from "@tot/public-runtime";
 
@@ -205,6 +207,44 @@ export function prefixApiFormActions(html: string, apiBasePath: string): string
   return html.replace(API_FORM_ACTION_RE, (_match, attr: string) => `${attr}="${apiBasePath}/api/`);
 }
 
+/** True when a form target is an `/api` route. Those use {@link prefixApiFormActions}. */
+function isApiFormTarget(href: string): boolean {
+  if (!href.startsWith("/")) return false;
+  const path = href.slice(1).split(/[?#]/, 1)[0] ?? "";
+  return path === "api" || path.startsWith("api/");
+}
+
+const PAGE_FORM_ACTION_RE = /\b(action|formaction)=("([^"]*)"|'([^']*)')/g;
+
+/**
+ * Prefix same-origin page form targets (`action`/`formaction`) with `basePath`
+ * via {@link withBase}. A preview pin's header search (`/search`) stays inside
+ * that pin. `/api` targets are left for {@link prefixApiFormActions}. No-op
+ * when `basePath` is empty.
+ */
+export function prefixPageFormActions(html: string, basePath: string): string {
+  if (!basePath) return html;
+  return html.replace(PAGE_FORM_ACTION_RE, (full, attr: string, _quoted: string, dq: string | undefined, sq: string | undefined) => {
+    const href = dq ?? sq ?? "";
+    if (isApiFormTarget(href)) return full;
+    const next = withBase(basePath, href);
+    if (next === href) return full;
+    const quote = dq !== undefined ? '"' : "'";
+    return `${attr}=${quote}${next}${quote}`;
+  });
+}
+
+/**
+ * Serve-time prefix for chrome HTML on both mounts (raw documents and Layout's
+ * shared-chrome splice). Anchors go through {@link prefixTenantLinks}. Page
+ * form actions go through {@link prefixPageFormActions} (`withBase`). `/api`
+ * form actions go through {@link prefixApiFormActions} and `apiBasePath`, never
+ * a preview pin.
+ */
+export function prefixSharedChrome(html: string, basePath: string, apiBasePath: string): string {
+  return prefixApiFormActions(prefixPageFormActions(prefixTenantLinks(html, basePath), basePath), apiBasePath);
+}
+
 /** Raw pages with a robots `noindex` directive remain routable but stay out of discovery. */
 export function isIndexableHtml(html: string): boolean {
   for (const match of html.matchAll(/<meta\b([^>]*)>/gi)) {
@@ -397,10 +437,7 @@ export function rawHtmlResponse(
   composed = injectBodyEnd(composed, interactionTrackingScript(opts.nonce));
   composed = injectBodyEnd(composed, asyncCssSwapScript(opts.nonce));
   composed = resolveCanonicalHref(composed, opts.canonicalUrl);
-  const doc = prefixApiFormActions(
-    prefixTenantLinks(composed, opts.basePath),
-    opts.apiBasePath ?? "",
-  );
+  const doc = prefixSharedChrome(composed, opts.basePath, opts.apiBasePath ?? "");
   return new Response(doc, {
     headers: { "content-type": "text/html; charset=utf-8" },
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",