create-brainerce-store 1.65.0 → 1.67.0

package/templates/nextjs/ui-canvas/layout/site-header.tsx.ejs

@@ -1,119 +1,120 @@
-/**
- * Merchant-controlled site header (bare skeleton).
- *
- * 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-friendly 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.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { HeaderAccount } from './header-account';
-<% if (i18nEnabled) { %>
-import { LanguageSwitcher } from '@/ui/layout/language-switcher';
-<% } %>
-
-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;
-}
-
-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.
-  if (!header) {
-    return (
-      <header>
-        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <div className="flex items-center justify-between gap-4">
-          <a href="/" aria-label={brandLabel}>
-            {brandLabel}
-          </a>
-          <div className="flex items-center gap-2">
-            <% if (i18nEnabled) { %>
-            <LanguageSwitcher />
-            <% } %>
-            <HeaderAccount />
-            <a href="/cart" aria-label="Cart">
-              Cart
-            </a>
-          </div>
-        </div>
-      </header>
-    );
-  }
-
-  return (
-    <header>
-      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <div className="flex items-center justify-between gap-4">
-        <a href="/" className="flex items-center gap-2" 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} />
-          ) : (
-            <span>{brandLabel}</span>
-          )}
-        </a>
-
-        {navItems.length > 0 ? (
-          <nav aria-label="Main">
-            <ul className="flex items-center gap-4">
-              {navItems.map((item, idx) => (
-                <li key={`${item.url}-${idx}`}>
-                  <a href={item.url}>{item.label}</a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        ) : null}
-
-        <div className="flex items-center gap-2">
-          {cta ? <a href={cta.url}>{cta.label}</a> : null}
-
-          <% if (i18nEnabled) { %>
-          <LanguageSwitcher />
-          <% } %>
-
-          <HeaderAccount />
-
-          <a href="/cart" aria-label="Cart">
-            Cart
-          </a>
-
-          {navItems.length > 0 ? (
-            <details>
-              <summary>Menu</summary>
-              <nav aria-label="Mobile">
-                <ul>
-                  {navItems.map((item, idx) => (
-                    <li key={`m-${item.url}-${idx}`}>
-                      <a href={item.url}>{item.label}</a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            </details>
-          ) : null}
-        </div>
-      </div>
-    </header>
-  );
-}
+/**
+ * Merchant-controlled site header (bare skeleton).
+ *
+ * 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-friendly 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.
+ */
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import type { Content } from 'brainerce';
+import { HeaderAccount } from './header-account';
+<% if (i18nEnabled) { %>
+import { LanguageSwitcher } from '@/ui/layout/language-switcher';
+<% } %>
+
+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;
+}
+
+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.
+  if (!header) {
+    return (
+      <header>
+        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <div className="flex items-center justify-between gap-4">
+          <Link href="/" aria-label={brandLabel}>
+            {brandLabel}
+          </Link>
+          <div className="flex items-center gap-2">
+            <% if (i18nEnabled) { %>
+            <LanguageSwitcher />
+            <% } %>
+            <HeaderAccount />
+            <Link href="/cart" aria-label="Cart">
+              Cart
+            </Link>
+          </div>
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header>
+      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div className="flex items-center justify-between gap-4">
+        <Link href="/" className="flex items-center gap-2" 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} />
+          ) : (
+            <span>{brandLabel}</span>
+          )}
+        </Link>
+
+        {navItems.length > 0 ? (
+          <nav aria-label="Main">
+            <ul className="flex items-center gap-4">
+              {navItems.map((item, idx) => (
+                <li key={`${item.url}-${idx}`}>
+                  <a href={item.url}>{item.label}</a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+
+        <div className="flex items-center gap-2">
+          {cta ? <a href={cta.url}>{cta.label}</a> : null}
+
+          <% if (i18nEnabled) { %>
+          <LanguageSwitcher />
+          <% } %>
+
+          <HeaderAccount />
+
+          <Link href="/cart" aria-label="Cart">
+            Cart
+          </Link>
+
+          {navItems.length > 0 ? (
+            <details>
+              <summary>Menu</summary>
+              <nav aria-label="Mobile">
+                <ul>
+                  {navItems.map((item, idx) => (
+                    <li key={`m-${item.url}-${idx}`}>
+                      <a href={item.url}>{item.label}</a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </details>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/nextjs/ui-canvas/product/faq-section.tsx.ejs

@@ -0,0 +1,54 @@
+import type { Product } from 'brainerce';
+<% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
+
+type FaqStrings = Record<string, string>;
+
+<% if (i18nEnabled) { %>async function getFaqStrings(locale: string): Promise<FaqStrings> {
+  return ((await getMessages(locale)).faq ?? {}) as FaqStrings;
+}<% } else { %>async function getFaqStrings(_locale: string): Promise<FaqStrings> {
+  return ((messages as Record<string, unknown>).faq ?? {}) as FaqStrings;
+}<% } %>
+
+interface ProductFaqSectionProps {
+  product: Product;
+  locale?: string;
+}
+
+/**
+ * DESIGN ME — visible product Q&A.
+ *
+ * Two things here are behaviour, not styling, and must survive a redesign:
+ *
+ * 1. Keep it a SERVER component (no 'use client'). The pairs have to be in the
+ *    initial HTML payload — AI answer engines cite this extractable Q&A format
+ *    and do not run JavaScript. Content inside a closed <details> is still in
+ *    the HTML, so an accordion costs nothing for extraction.
+ * 2. Render the same pairs <ProductJsonLd> emits as FAQPage JSON-LD. Both read
+ *    `product.faq`, so they cannot drift — unless you stop rendering them, at
+ *    which point the structured data describes content that is not on the page.
+ *
+ * Style it however you like; drop the <details> for a custom accordion if you
+ * prefer, as long as the text ships in the server-rendered HTML.
+ */
+export async function ProductFaqSection({
+  product,
+  locale = defaultLocale,
+}: ProductFaqSectionProps) {
+  const pairs = (product.faq ?? []).filter((item) => item?.q && item?.a);
+  if (pairs.length === 0) return null;
+  const t = await getFaqStrings(locale);
+
+  return (
+    <section>
+      <h2>{t.title ?? 'Frequently asked questions'}</h2>
+      <div>
+        {pairs.map((item) => (
+          <details key={item.q}>
+            <summary>{item.q}</summary>
+            <p>{item.a}</p>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}