create-brainerce-store 1.39.0 → 1.41.0

package/templates/nextjs/base/src/components/content/site-header.tsx.ejs

@@ -1,65 +1,166 @@
-/**
- * Merchant-controlled site header.
- *
- * The merchant configures the header in the Brainerce dashboard under
- *   Sell → Content → Header
- *
- * Renders logo (when set) + nav items + CTA. Everything is generic — you
- * should NOT hardcode nav labels or logo paths here; the merchant edits
- * them in the dashboard and the change propagates within ~5 minutes.
- *
- * Returns null on 404 — new stores are seeded with a default HEADER row
- * by the backend (StoresService.seedDefaultContent) so this should be
- * populated out of the box.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface SiteHeaderProps {
-  /** Pre-fetched header payload (server-side). `null` renders nothing. */
-  header: Content<'HEADER'> | null;
-}
-
-export function SiteHeader({ header }: SiteHeaderProps) {
-  if (!header) return null;
-  const data = header.data;
-  const logo = data.logo;
-  const navItems = data.navItems ?? [];
-  const cta = data.cta;
-
-  return (
-    <div className="border-border bg-background border-b">
-      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-        <a href="/" className="flex items-center gap-2">
-          {logo ? (
-            // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
-            <img src={logo.src} alt={logo.alt} className="h-8 w-auto" />
-          ) : null}
-        </a>
-
-        {navItems.length > 0 ? (
-          <nav className="hidden items-center gap-6 md:flex">
-            {navItems.map((item, idx) => (
-              <a
-                key={`${item.url}-${idx}`}
-                href={item.url}
-                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-              >
-                {item.label}
-              </a>
-            ))}
-          </nav>
-        ) : null}
-
-        {cta ? (
-          <a
-            href={cta.url}
-            className="bg-primary text-primary-foreground inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:opacity-90"
-          >
-            {cta.label}
-          </a>
-        ) : null}
-      </div>
-    </div>
-  );
-}
+/**
+ * Merchant-controlled site header.
+ *
+ * The merchant configures the header in the Brainerce dashboard under
+ *   Sell → Content → Header
+ *
+ * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
+ * with a `<details>` mobile menu that works without client-side JS. Everything
+ * is generic — do NOT hardcode nav labels or logo paths here; the merchant
+ * edits them in the dashboard and the change propagates within ~5 minutes.
+ *
+ * If `header` is null (404 from the API, or the merchant deleted the row),
+ * we render a minimal static fallback with just the brand label and cart link
+ * so the layout never collapses. New stores ship with a seeded HEADER row
+ * from the backend (StoresService.seedDefaultContent), so the populated
+ * branch is the common case.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+interface SiteHeaderProps {
+  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
+  header: Content<'HEADER'> | null;
+  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
+  storeName?: string;
+}
+
+const MenuIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    {...props}
+  >
+    <line x1="4" y1="6" x2="20" y2="6" />
+    <line x1="4" y1="12" x2="20" y2="12" />
+    <line x1="4" y1="18" x2="20" y2="18" />
+  </svg>
+);
+
+const CartIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    {...props}
+  >
+    <circle cx="9" cy="21" r="1" />
+    <circle cx="20" cy="21" r="1" />
+    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
+  </svg>
+);
+
+export function SiteHeader({ header, storeName }: SiteHeaderProps) {
+  const data = header?.data;
+  const logo = data?.logo;
+  const navItems = data?.navItems ?? [];
+  const cta = data?.cta;
+  const brandLabel = logo?.alt || storeName || 'Store';
+
+  // Static fallback — runs when the Content API returned null (no HEADER row
+  // for this store yet, or fetch failed). Keep the brand + cart so the page
+  // always has a clickable home link and entry to checkout, but no nav since
+  // the merchant hasn't defined any items.
+  if (!header) {
+    return (
+      <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
+        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+          <a href="/" className="text-lg font-semibold tracking-tight" aria-label={brandLabel}>
+            {brandLabel}
+          </a>
+          <a
+            href="/cart"
+            aria-label="Cart"
+            className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
+          >
+            <CartIcon className="h-5 w-5" />
+          </a>
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+        <a
+          href="/"
+          className="flex items-center gap-2 font-semibold tracking-tight"
+          aria-label={brandLabel}
+        >
+          {logo ? (
+            // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
+            <img src={logo.src} alt={logo.alt} className="h-8 w-auto" />
+          ) : (
+            <span className="text-lg">{brandLabel}</span>
+          )}
+        </a>
+
+        {navItems.length > 0 ? (
+          <nav className="hidden items-center gap-8 md:flex">
+            {navItems.map((item, idx) => (
+              <a
+                key={`${item.url}-${idx}`}
+                href={item.url}
+                className="text-foreground/80 hover:text-foreground text-sm font-medium transition-colors"
+              >
+                {item.label}
+              </a>
+            ))}
+          </nav>
+        ) : null}
+
+        <div className="flex items-center gap-2">
+          {cta ? (
+            <a
+              href={cta.url}
+              className="bg-primary text-primary-foreground hidden items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:opacity-90 sm:inline-flex"
+            >
+              {cta.label}
+            </a>
+          ) : null}
+
+          <a
+            href="/cart"
+            aria-label="Cart"
+            className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
+          >
+            <CartIcon className="h-5 w-5" />
+          </a>
+
+          {navItems.length > 0 ? (
+            <details className="group relative md:hidden">
+              <summary className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-md transition-colors [&::-webkit-details-marker]:hidden">
+                <MenuIcon className="h-5 w-5" />
+                <span className="sr-only">Menu</span>
+              </summary>
+              <nav className="border-border bg-background absolute end-0 top-full z-50 mt-2 w-56 overflow-hidden rounded-lg border shadow-lg">
+                <ul className="py-1">
+                  {navItems.map((item, idx) => (
+                    <li key={`m-${item.url}-${idx}`}>
+                      <a
+                        href={item.url}
+                        className="text-foreground/80 hover:text-foreground hover:bg-muted block px-4 py-2 text-sm transition-colors"
+                      >
+                        {item.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </details>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/nextjs/base/src/components/seo/organization-json-ld.tsx

@@ -34,7 +34,7 @@ export async function OrganizationJsonLd({ storeInfo, baseUrl }: OrganizationJso
   // social profiles. Order doesn't matter; we just filter out empties.
   const sameAs = storeInfo.socialLinks
     ? Object.values(storeInfo.socialLinks).filter(
-        (url): url is string => typeof url === 'string' && url.trim().length > 0,
+        (url): url is string => typeof url === 'string' && url.trim().length > 0
       )
     : [];
 

package/templates/nextjs/base/src/lib/sanitize.ts.ejs

@@ -1,26 +1,26 @@
-/**
- * Single-source HTML sanitizer for merchant-authored content.
- *
- * Brainerce returns RICH_TEXT.html, PAGE.html, and FAQ answer values as raw
- * HTML — the server does NOT pre-sanitize because some merchants embed
- * iframes (e.g. YouTube). Run every merchant-authored HTML string through
- * this wrapper before injecting via `dangerouslySetInnerHTML`.
- *
- *   const safe = sanitizeHtml(rawHtml);
- *   <div dangerouslySetInnerHTML={{ __html: safe }} />
- *
- * Uses isomorphic-dompurify so the same call works in Server Components and
- * Client Components.
- */
-import DOMPurify from 'isomorphic-dompurify';
-
-const DEFAULT_CONFIG: DOMPurify.Config = {
-  // Allow iframes for embedded videos/maps the merchant may include.
-  ADD_TAGS: ['iframe'],
-  ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'target', 'rel'],
-};
-
-export function sanitizeHtml(html: string | null | undefined): string {
-  if (!html) return '';
-  return DOMPurify.sanitize(html, DEFAULT_CONFIG) as unknown as string;
-}
+/**
+ * Single-source HTML sanitizer for merchant-authored content.
+ *
+ * Brainerce returns RICH_TEXT.html, PAGE.html, and FAQ answer values as raw
+ * HTML — the server does NOT pre-sanitize because some merchants embed
+ * iframes (e.g. YouTube). Run every merchant-authored HTML string through
+ * this wrapper before injecting via `dangerouslySetInnerHTML`.
+ *
+ *   const safe = sanitizeHtml(rawHtml);
+ *   <div dangerouslySetInnerHTML={{ __html: safe }} />
+ *
+ * Uses isomorphic-dompurify so the same call works in Server Components and
+ * Client Components.
+ */
+import DOMPurify from 'isomorphic-dompurify';
+
+const DEFAULT_CONFIG: DOMPurify.Config = {
+  // Allow iframes for embedded videos/maps the merchant may include.
+  ADD_TAGS: ['iframe'],
+  ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'target', 'rel'],
+};
+
+export function sanitizeHtml(html: string | null | undefined): string {
+  if (!html) return '';
+  return DOMPurify.sanitize(html, DEFAULT_CONFIG) as unknown as string;
+}

package/templates/nextjs/base/src/lib/seo.ts

@@ -31,10 +31,7 @@ export function stripHtmlForSeo(input: string | null | undefined): string {
 // Truncates at the nearest word boundary so we never cut mid-word, and
 // appends a Unicode ellipsis. Returns '' for null/empty input so callers
 // can fall back cleanly.
-export function buildMetaDescription(
-  input: string | null | undefined,
-  maxLength = 160
-): string {
+export function buildMetaDescription(input: string | null | undefined, maxLength = 160): string {
   const stripped = stripHtmlForSeo(input);
   if (!stripped) return '';
   if (stripped.length <= maxLength) return stripped;