create-brainerce-store 1.39.0 → 1.40.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.39.0",
+      version: "1.40.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/app/layout.tsx.ejs

@@ -86,7 +86,7 @@ export default async function RootLayout({
         <StoreProvider locale={locale}>
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
-            <SiteHeader header={siteHeader} />
+            <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
             <main className="flex-1">{children}</main>
             <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
           </div>
@@ -175,7 +175,7 @@ export default async function RootLayout({
         <StoreProvider>
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
-            <SiteHeader header={siteHeader} />
+            <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
             <main className="flex-1">{children}</main>
             <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
           </div>

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

@@ -4,17 +4,15 @@
  * The merchant configures the footer in the Brainerce dashboard under
  *   Sell → Content → Footer
  *
- * Everything below is generic rendering logic — it adapts automatically to
- * any footer shape returned by the API, so **you should not hardcode column
- * titles or link labels here**.
+ * Renders a brand block (store-name + social icons), the merchant's link
+ * columns, and a copyright bar. Social icons are inline SVGs so the
+ * scaffold stays dependency-free; unknown platforms fall back to a
+ * letter avatar.
  *
  * API contract:
  *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
  *   Returns null on 404 — we render a minimal fallback so the layout never
  *   crashes when the merchant hasn't seeded the footer yet.
- *
- * Security: this component renders text only. For RichText/Page HTML, use
- *   <RichTextBlock> which sanitizes via isomorphic-dompurify.
  */
 import * as React from 'react';
 import type { Content } from 'brainerce';
@@ -22,74 +20,144 @@ import type { Content } from 'brainerce';
 interface SiteFooterProps {
   /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
   footer: Content<'FOOTER'> | null;
-  /** Store name shown in the fallback copyright when no footer is configured. */
+  /** Store name shown in the brand block + fallback copyright. */
   storeName?: string;
 }
 
+type SvgComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+const InstagramIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
+    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+  </svg>
+);
+
+const FacebookIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
+    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+  </svg>
+);
+
+const XIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+  </svg>
+);
+
+const LinkedInIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" />
+  </svg>
+);
+
+const YouTubeIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+  </svg>
+);
+
+const TikTokIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z" />
+  </svg>
+);
+
+const SOCIAL_ICONS: Record<string, SvgComponent> = {
+  instagram: InstagramIcon,
+  facebook: FacebookIcon,
+  x: XIcon,
+  twitter: XIcon,
+  linkedin: LinkedInIcon,
+  youtube: YouTubeIcon,
+  tiktok: TikTokIcon,
+};
+
 export function SiteFooter({ footer, storeName }: SiteFooterProps) {
   const data = footer?.data;
   const columns = data?.columns ?? [];
   const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
 
-  // Fallback when the merchant hasn't seeded a footer yet — keeps the layout
-  // visually complete without exposing "missing content" to shoppers.
   if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
-    const year = new Date().getFullYear();
     return (
-      <footer className="border-border bg-muted/30 text-muted-foreground mt-12 border-t py-8 text-sm">
+      <footer className="border-border bg-muted/30 text-muted-foreground mt-16 border-t py-8 text-sm">
         <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
-          © {year} {storeName ?? 'Store'}
+          © {year} {brandLabel}. All rights reserved.
         </div>
       </footer>
     );
   }
 
   return (
-    <footer className="border-border bg-muted/30 text-foreground mt-12 border-t">
-      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
-        {columns.length > 0 ? (
-          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {columns.map((col, idx) => (
-              <div key={`${col.title}-${idx}`}>
-                <h3 className="text-foreground mb-3 text-sm font-semibold">{col.title}</h3>
-                <ul className="space-y-2">
-                  {col.links.map((link, linkIdx) => (
-                    <li key={`${link.url}-${linkIdx}`}>
-                      <a
-                        href={link.url}
-                        className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                      >
-                        {link.label}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
+    <footer className="border-border bg-muted/30 mt-16 border-t">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
+          <div className="md:col-span-4">
+            <a
+              href="/"
+              className="text-foreground text-lg font-semibold tracking-tight"
+            >
+              {brandLabel}
+            </a>
+            {social.length > 0 ? (
+              <div className="mt-4 flex flex-wrap items-center gap-2">
+                {social.map((entry, idx) => {
+                  const key = entry.platform.toLowerCase();
+                  const Icon = SOCIAL_ICONS[key];
+                  return (
+                    <a
+                      key={`${entry.platform}-${idx}`}
+                      href={entry.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={entry.platform}
+                      className="border-border hover:border-foreground/40 hover:text-foreground text-muted-foreground inline-flex h-9 w-9 items-center justify-center rounded-full border transition-colors"
+                    >
+                      {Icon ? (
+                        <Icon className="h-4 w-4" />
+                      ) : (
+                        <span className="text-xs font-medium uppercase">
+                          {entry.platform.charAt(0)}
+                        </span>
+                      )}
+                    </a>
+                  );
+                })}
               </div>
-            ))}
+            ) : null}
           </div>
-        ) : null}
 
-        {social.length > 0 ? (
-          <div className="border-border mt-8 flex flex-wrap items-center gap-4 border-t pt-6">
-            {social.map((entry, idx) => (
-              <a
-                key={`${entry.platform}-${idx}`}
-                href={entry.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-muted-foreground hover:text-foreground text-sm capitalize transition-colors"
-              >
-                {entry.platform}
-              </a>
-            ))}
-          </div>
-        ) : null}
+          {columns.length > 0 ? (
+            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
+              {columns.map((col, idx) => (
+                <div key={`${col.title}-${idx}`}>
+                  <h3 className="text-foreground mb-3 text-sm font-semibold tracking-wide">
+                    {col.title}
+                  </h3>
+                  <ul className="space-y-2">
+                    {col.links.map((link, linkIdx) => (
+                      <li key={`${link.url}-${linkIdx}`}>
+                        <a
+                          href={link.url}
+                          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                        >
+                          {link.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
 
-        {data.copyright ? (
-          <div className="border-border text-muted-foreground mt-6 border-t pt-4 text-center text-xs">
-            {data.copyright}
-          </div>
-        ) : null}
+        <div className="border-border text-muted-foreground mt-10 flex flex-col items-center justify-between gap-2 border-t pt-6 text-xs sm:flex-row">
+          <span>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</span>
+        </div>
       </div>
     </footer>
   );

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

@@ -4,13 +4,14 @@
  * 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.
+ * 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.
  *
- * 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.
+ * Returns null on 404. New stores ship with a seeded HEADER row from the
+ * backend (StoresService.seedDefaultContent), so this should be populated
+ * out of the box.
  */
 import * as React from 'react';
 import type { Content } from 'brainerce';
@@ -18,32 +19,75 @@ import type { Content } from 'brainerce';
 interface SiteHeaderProps {
   /** Pre-fetched header payload (server-side). `null` renders nothing. */
   header: Content<'HEADER'> | null;
+  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
+  storeName?: string;
 }
 
-export function SiteHeader({ header }: SiteHeaderProps) {
+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) {
   if (!header) return null;
   const data = header.data;
   const logo = data.logo;
   const navItems = data.navItems ?? [];
   const cta = data.cta;
+  const brandLabel = logo?.alt || storeName || 'Store';
 
   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">
+    <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" />
-          ) : null}
+          ) : (
+            <span className="text-lg">{brandLabel}</span>
+          )}
         </a>
 
         {navItems.length > 0 ? (
-          <nav className="hidden items-center gap-6 md:flex">
+          <nav className="hidden items-center gap-8 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"
+                className="text-foreground/80 hover:text-foreground text-sm font-medium transition-colors"
               >
                 {item.label}
               </a>
@@ -51,15 +95,48 @@ export function SiteHeader({ header }: SiteHeaderProps) {
           </nav>
         ) : null}
 
-        {cta ? (
+        <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={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"
+            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"
           >
-            {cta.label}
+            <CartIcon className="h-5 w-5" />
           </a>
-        ) : null}
+
+          {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>
-    </div>
+    </header>
   );
 }