create-brainerce-store 1.40.0 → 1.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.40.0",
+  "version": "1.41.1",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"
@@ -33,7 +33,7 @@
     "typescript": "^5.4.0"
   },
   "engines": {
-    "node": ">=18"
+    "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
   },
   "keywords": [
     "brainerce",

package/templates/nextjs/base/package.json.ejs

@@ -28,5 +28,8 @@
     "postcss": "^8.4.0",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.4.0"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
   }
 }

package/templates/nextjs/base/src/app/faq/page.tsx.ejs

@@ -1,46 +1,46 @@
-/**
- * FAQ page — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * This page fetches the merchant's *primary* FAQ (key='main'). For topical
- * FAQs (e.g. /faq/shipping), copy this route to `app/faq/[topic]/page.tsx`
- * and pass `params.topic` to `client.content.faq.get(topic, locale)`.
- */
-import * as React from 'react';
-import type { Metadata } from 'next';
-
-import { getServerClient } from '@/lib/brainerce';
-import { FaqSection } from '@/components/content/faq-section';
-<% if (i18nEnabled) { %>
-type PageProps = {
-  params: Promise<{ locale: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { locale } = await params;
-  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
-  return {
-    title: faq?.name ?? 'FAQ',
-  };
-}
-
-export default async function FaqPage({ params }: PageProps) {
-  const { locale } = await params;
-  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
-  return <FaqSection faq={faq} />;
-}
-<% } else { %>
-export async function generateMetadata(): Promise<Metadata> {
-  const faq = await getServerClient().content.faq.get('main').catch(() => null);
-  return {
-    title: faq?.name ?? 'FAQ',
-  };
-}
-
-export default async function FaqPage() {
-  const faq = await getServerClient().content.faq.get('main').catch(() => null);
-  return <FaqSection faq={faq} />;
-}
-<% } %>
+/**
+ * FAQ page — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * This page fetches the merchant's *primary* FAQ (key='main'). For topical
+ * FAQs (e.g. /faq/shipping), copy this route to `app/faq/[topic]/page.tsx`
+ * and pass `params.topic` to `client.content.faq.get(topic, locale)`.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { getServerClient } from '@/lib/brainerce';
+import { FaqSection } from '@/components/content/faq-section';
+<% if (i18nEnabled) { %>
+type PageProps = {
+  params: Promise<{ locale: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
+  return {
+    title: faq?.name ?? 'FAQ',
+  };
+}
+
+export default async function FaqPage({ params }: PageProps) {
+  const { locale } = await params;
+  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
+  return <FaqSection faq={faq} />;
+}
+<% } else { %>
+export async function generateMetadata(): Promise<Metadata> {
+  const faq = await getServerClient().content.faq.get('main').catch(() => null);
+  return {
+    title: faq?.name ?? 'FAQ',
+  };
+}
+
+export default async function FaqPage() {
+  const faq = await getServerClient().content.faq.get('main').catch(() => null);
+  return <FaqSection faq={faq} />;
+}
+<% } %>

package/templates/nextjs/base/src/app/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { getServerClient } from '@/lib/brainerce';
 import { buildMetaDescription } from '@/lib/seo';
 import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
+import { RichTextBlock } from '@/components/content/rich-text-block';
 import { HomeClient } from './home-client';
 
 // Build homepage metadata server-side so Google, Facebook, WhatsApp etc.
@@ -35,18 +36,28 @@ export default async function HomePage() {
   // crawlers and AI Overviews see it without needing to execute JavaScript.
   // Failure here is non-fatal: the client component re-fetches via the
   // StoreProvider so the page still renders.
-  let storeInfo = null;
-  try {
-    storeInfo = await getServerClient().getStoreInfo();
-  } catch {
-    storeInfo = null;
-  }
+  //
+  // Also fetch the merchant's homepage intro (RICH_TEXT key='main'). When
+  // present, it renders as a sanitized HTML block above the product grid —
+  // typical use is brand introduction, value-prop copy, or a seasonal
+  // announcement that needs more formatting than the AnnouncementBar.
+  // When absent, RichTextBlock returns null cleanly so the layout collapses
+  // to just the product grid.
+  const client = getServerClient();
+  const [storeInfo, intro] = await Promise.all([
+    client.getStoreInfo().catch(() => null),
+    client.content.richText.get('main').catch(() => null),
+  ]);
 
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
 
   return (
     <>
       {storeInfo && baseUrl ? <OrganizationJsonLd storeInfo={storeInfo} baseUrl={baseUrl} /> : null}
+      <RichTextBlock
+        block={intro}
+        className="prose prose-sm dark:prose-invert mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8"
+      />
       <HomeClient />
     </>
   );

package/templates/nextjs/base/src/app/pages/[slug]/page.tsx.ejs

@@ -1,87 +1,92 @@
-/**
- * Static page route — fully driven by the merchant's dashboard.
- *
- * The merchant creates pages in the Brainerce dashboard under
- *   Sell → Content → Page (one row per page, each with its own `slug`)
- *
- * This catch-all renders any PAGE by its `data.slug`. `/pages/about` →
- * fetches PAGE with slug='about'. Mounting under `/pages/` (rather than
- * the root) keeps the route from clashing with existing static routes
- * like /cart, /login, /products.
- *
- * Security: page HTML is sanitized via `sanitizeHtml` before injecting.
- */
-import * as React from 'react';
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-
-import { getServerClient } from '@/lib/brainerce';
-import { sanitizeHtml } from '@/lib/sanitize';
-
-<% if (i18nEnabled) { %>
-type PageProps = {
-  params: Promise<{ locale: string; slug: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { locale, slug } = await params;
-  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
-  if (!page) return { title: slug };
-  const seo = page.data.seo ?? {};
-  return {
-    title: seo.title ?? page.data.title,
-    description: seo.description,
-    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
-  };
-}
-
-export default async function StaticPage({ params }: PageProps) {
-  const { locale, slug } = await params;
-  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
-  if (!page) notFound();
-  return (
-    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
-        {page.data.title}
-      </h1>
-      <div
-        className="prose prose-sm dark:prose-invert max-w-none"
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
-      />
-    </article>
-  );
-}
-<% } else { %>
-type PageProps = {
-  params: Promise<{ slug: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { slug } = await params;
-  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
-  if (!page) return { title: slug };
-  const seo = page.data.seo ?? {};
-  return {
-    title: seo.title ?? page.data.title,
-    description: seo.description,
-    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
-  };
-}
-
-export default async function StaticPage({ params }: PageProps) {
-  const { slug } = await params;
-  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
-  if (!page) notFound();
-  return (
-    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
-        {page.data.title}
-      </h1>
-      <div
-        className="prose prose-sm dark:prose-invert max-w-none"
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
-      />
-    </article>
-  );
-}
-<% } %>
+/**
+ * Static page route — fully driven by the merchant's dashboard.
+ *
+ * The merchant creates pages in the Brainerce dashboard under
+ *   Sell → Content → Page (one row per page, each with its own `slug`)
+ *
+ * This catch-all renders any PAGE by its `data.slug`. `/pages/about` →
+ * fetches PAGE with slug='about'. Mounting under `/pages/` (rather than
+ * the root) keeps the route from clashing with existing static routes
+ * like /cart, /login, /products.
+ *
+ * Security: page HTML is sanitized via `sanitizeHtml` before injecting.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { getServerClient } from '@/lib/brainerce';
+import { sanitizeHtml } from '@/lib/sanitize';
+import { decodeSlug } from '@/lib/utils';
+
+<% if (i18nEnabled) { %>
+type PageProps = {
+  params: Promise<{ locale: string; slug: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale, slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
+  if (!page) return { title: slug };
+  const seo = page.data.seo ?? {};
+  return {
+    title: seo.title ?? page.data.title,
+    description: seo.description,
+    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
+  };
+}
+
+export default async function StaticPage({ params }: PageProps) {
+  const { locale, slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
+  if (!page) notFound();
+  return (
+    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
+        {page.data.title}
+      </h1>
+      <div
+        className="prose prose-sm dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
+      />
+    </article>
+  );
+}
+<% } else { %>
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
+  if (!page) return { title: slug };
+  const seo = page.data.seo ?? {};
+  return {
+    title: seo.title ?? page.data.title,
+    description: seo.description,
+    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
+  };
+}
+
+export default async function StaticPage({ params }: PageProps) {
+  const { slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
+  if (!page) notFound();
+  return (
+    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
+        {page.data.title}
+      </h1>
+      <div
+        className="prose prose-sm dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
+      />
+    </article>
+  );
+}
+<% } %>

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getServerClient } from '@/lib/brainerce';
 import { buildMetaDescription } from '@/lib/seo';
+import { decodeSlug } from '@/lib/utils';
 import { ProductJsonLd } from '@/components/seo/product-json-ld';
 import { ReviewsSection } from '@/components/reviews/reviews-section';
 import { ProductClientSection } from './product-client-section';
@@ -11,7 +12,8 @@ type Props = {
 };
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug, locale } = await params;
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
 
   try {
     const client = getServerClient(locale);
@@ -53,7 +55,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function ProductDetailPage({ params }: Props) {
-  const { slug, locale } = await params;
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
 
   let product;
   try {

package/templates/nextjs/base/src/components/content/announcement-bar.tsx.ejs

@@ -1,125 +1,125 @@
-/**
- * Storefront announcement bar — fully driven by the merchant's dashboard.
- *
- * The merchant configures announcements in the Brainerce dashboard under
- *   Sell → Content → Announcement
- *
- * Everything below is generic rendering logic — it adapts automatically to
- * any announcement shape returned by the API, so **you should not hardcode
- * the message or severity here**.
- *
- * API contract:
- *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
- *   Empty array → renders nothing (page layout stays intact).
- *
- * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
- * timestamps. We filter client-side so the cached server response can be
- * shared across visitors regardless of the current time.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface AnnouncementBarProps {
-  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
-  announcements: Content<'ANNOUNCEMENT'>[];
-}
-
-const SEVERITY_STYLES: Record<'info' | 'warning' | 'success', string> = {
-  info: 'bg-blue-600 text-white',
-  warning: 'bg-amber-500 text-amber-950',
-  success: 'bg-emerald-600 text-white',
-};
-
-const STORAGE_KEY = 'brainerce_dismissed_announcements';
-
-export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
-  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
-
-  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
-  React.useEffect(() => {
-    if (typeof window === 'undefined') return;
-    try {
-      const raw = window.localStorage.getItem(STORAGE_KEY);
-      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
-    } catch {
-      // ignore malformed storage
-    }
-  }, []);
-
-  const dismiss = (id: string) => {
-    setDismissed((prev) => {
-      const next = new Set(prev);
-      next.add(id);
-      if (typeof window !== 'undefined') {
-        try {
-          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
-        } catch {
-          // ignore quota errors
-        }
-      }
-      return next;
-    });
-  };
-
-  const now = Date.now();
-  const visible = announcements.filter((a) => {
-    if (dismissed.has(a.id)) return false;
-    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
-    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
-    return startOk && endOk;
-  });
-
-  if (visible.length === 0) return null;
-
-  return (
-    <div role="region" aria-label="Site announcements">
-      {visible.map((announcement) => {
-        const severity = announcement.data.severity;
-        const tone = SEVERITY_STYLES[severity] ?? SEVERITY_STYLES.info;
-        return (
-          <div
-            key={announcement.id}
-            className={`flex items-center justify-center gap-3 px-4 py-2 text-sm ${tone}`}
-          >
-            <span className="flex-1 text-center">
-              {announcement.data.message}
-              {announcement.data.ctaHref && announcement.data.ctaLabel ? (
-                <>
-                  {' '}
-                  <a
-                    href={announcement.data.ctaHref}
-                    className="underline underline-offset-2"
-                  >
-                    {announcement.data.ctaLabel}
-                  </a>
-                </>
-              ) : null}
-            </span>
-            {announcement.data.dismissible ? (
-              <button
-                type="button"
-                onClick={() => dismiss(announcement.id)}
-                aria-label="Dismiss announcement"
-                className="text-current opacity-80 transition-opacity hover:opacity-100"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className="h-4 w-4"
-                  aria-hidden="true"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            ) : null}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+/**
+ * Storefront announcement bar — fully driven by the merchant's dashboard.
+ *
+ * The merchant configures announcements in the Brainerce dashboard under
+ *   Sell → Content → Announcement
+ *
+ * Everything below is generic rendering logic — it adapts automatically to
+ * any announcement shape returned by the API, so **you should not hardcode
+ * the message or severity here**.
+ *
+ * API contract:
+ *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
+ *   Empty array → renders nothing (page layout stays intact).
+ *
+ * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
+ * timestamps. We filter client-side so the cached server response can be
+ * shared across visitors regardless of the current time.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+interface AnnouncementBarProps {
+  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
+  announcements: Content<'ANNOUNCEMENT'>[];
+}
+
+const SEVERITY_STYLES: Record<'info' | 'warning' | 'success', string> = {
+  info: 'bg-blue-600 text-white',
+  warning: 'bg-amber-500 text-amber-950',
+  success: 'bg-emerald-600 text-white',
+};
+
+const STORAGE_KEY = 'brainerce_dismissed_announcements';
+
+export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
+  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
+
+  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
+    } catch {
+      // ignore malformed storage
+    }
+  }, []);
+
+  const dismiss = (id: string) => {
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
+        } catch {
+          // ignore quota errors
+        }
+      }
+      return next;
+    });
+  };
+
+  const now = Date.now();
+  const visible = announcements.filter((a) => {
+    if (dismissed.has(a.id)) return false;
+    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
+    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
+    return startOk && endOk;
+  });
+
+  if (visible.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Site announcements">
+      {visible.map((announcement) => {
+        const severity = announcement.data.severity;
+        const tone = SEVERITY_STYLES[severity] ?? SEVERITY_STYLES.info;
+        return (
+          <div
+            key={announcement.id}
+            className={`flex items-center justify-center gap-3 px-4 py-2 text-sm ${tone}`}
+          >
+            <span className="flex-1 text-center">
+              {announcement.data.message}
+              {announcement.data.ctaHref && announcement.data.ctaLabel ? (
+                <>
+                  {' '}
+                  <a
+                    href={announcement.data.ctaHref}
+                    className="underline underline-offset-2"
+                  >
+                    {announcement.data.ctaLabel}
+                  </a>
+                </>
+              ) : null}
+            </span>
+            {announcement.data.dismissible ? (
+              <button
+                type="button"
+                onClick={() => dismiss(announcement.id)}
+                aria-label="Dismiss announcement"
+                className="text-current opacity-80 transition-opacity hover:opacity-100"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  className="h-4 w-4"
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}