create-brainerce-store 1.46.0 → 1.47.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.46.0",
+      version: "1.47.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.46.0",
+  "version": "1.47.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/blog/[slug]/page.tsx.ejs

@@ -0,0 +1,276 @@
+/**
+ * Blog post detail page — renders a single published blog post by its slug.
+ *
+ * - Fetches the post from the Brainerce SDK (returns null on 404)
+ * - Generates full SEO metadata (title, description, OG image)
+ * - Injects Article JSON-LD for Google rich snippets
+ * - Body HTML is sanitized before rendering
+ *
+ * Security: always pass blog content through sanitizeHtml before dangerouslySetInnerHTML.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import Image from 'next/image';
+
+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 post = await getServerClient(locale).blog.getPost(slug).catch(() => null);
+  if (!post) return { title: slug };
+  return {
+    title: post.seoTitle ?? post.title,
+    description: post.seoDescription ?? post.excerpt,
+    openGraph: {
+      title: post.seoTitle ?? post.title,
+      description: post.seoDescription ?? post.excerpt ?? undefined,
+      type: 'article',
+      publishedTime: post.publishedAt ?? undefined,
+      authors: post.author ? [post.author] : undefined,
+      images: post.ogImageUrl
+        ? [{ url: post.ogImageUrl }]
+        : post.coverImageUrl
+          ? [{ url: post.coverImageUrl }]
+          : undefined,
+    },
+  };
+}
+
+export default async function BlogPostPage({ params }: PageProps) {
+  const { locale, slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const post = await getServerClient(locale).blog.getPost(slug).catch(() => null);
+  if (!post) notFound();
+
+  const isHe = locale === 'he';
+  const dir = isHe ? 'rtl' : 'ltr';
+  const backLabel = isHe ? '← חזרה לבלוג' : '← Back to blog';
+
+  const articleJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: post.title,
+    description: post.excerpt ?? undefined,
+    image: post.coverImageUrl ?? undefined,
+    datePublished: post.publishedAt ?? undefined,
+    dateModified: post.updatedAt,
+    author: post.author ? { '@type': 'Person', name: post.author } : undefined,
+  };
+
+  return (
+    <main dir={dir} className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd).replace(/</g, '\\u003c') }}
+      />
+
+      {/* Back link */}
+      <Link
+        href="/blog"
+        className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        {backLabel}
+      </Link>
+
+      {/* Category */}
+      {post.category && (
+        <div className="mb-3">
+          <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+            {post.category}
+          </span>
+        </div>
+      )}
+
+      {/* Title */}
+      <h1 className="mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl leading-tight">
+        {post.title}
+      </h1>
+
+      {/* Meta row: author + date + tags */}
+      <div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground border-b border-border pb-6">
+        {post.author && <span className="font-medium text-foreground">{post.author}</span>}
+        {post.publishedAt && (
+          <time dateTime={post.publishedAt}>
+            {new Date(post.publishedAt).toLocaleDateString(isHe ? 'he-IL' : 'en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </time>
+        )}
+        {post.tags && post.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {post.tags.map((tag) => (
+              <span
+                key={tag}
+                className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Cover image */}
+      {post.coverImageUrl && (
+        <div className="mb-8 overflow-hidden rounded-xl">
+          <Image
+            src={post.coverImageUrl}
+            alt={post.coverImageAlt ?? post.title}
+            width={800}
+            height={450}
+            className="w-full object-cover"
+            priority
+          />
+        </div>
+      )}
+
+      {/* Excerpt */}
+      {post.excerpt && (
+        <p className="mb-6 text-lg text-muted-foreground leading-relaxed font-light italic border-s-2 border-primary/40 ps-4">
+          {post.excerpt}
+        </p>
+      )}
+
+      {/* Body */}
+      <div
+        className="prose prose-neutral dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.content) }}
+      />
+    </main>
+  );
+}
+<% } 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 post = await getServerClient().blog.getPost(slug).catch(() => null);
+  if (!post) return { title: slug };
+  return {
+    title: post.seoTitle ?? post.title,
+    description: post.seoDescription ?? post.excerpt,
+    openGraph: {
+      title: post.seoTitle ?? post.title,
+      description: post.seoDescription ?? post.excerpt ?? undefined,
+      type: 'article',
+      publishedTime: post.publishedAt ?? undefined,
+      authors: post.author ? [post.author] : undefined,
+      images: post.ogImageUrl
+        ? [{ url: post.ogImageUrl }]
+        : post.coverImageUrl
+          ? [{ url: post.coverImageUrl }]
+          : undefined,
+    },
+  };
+}
+
+export default async function BlogPostPage({ params }: PageProps) {
+  const { slug: rawSlug } = await params;
+  const slug = decodeSlug(rawSlug);
+  const post = await getServerClient().blog.getPost(slug).catch(() => null);
+  if (!post) notFound();
+
+  const articleJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: post.title,
+    description: post.excerpt ?? undefined,
+    image: post.coverImageUrl ?? undefined,
+    datePublished: post.publishedAt ?? undefined,
+    dateModified: post.updatedAt,
+    author: post.author ? { '@type': 'Person', name: post.author } : undefined,
+  };
+
+  return (
+    <main className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd).replace(/</g, '\\u003c') }}
+      />
+
+      <Link
+        href="/blog"
+        className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        ← Back to blog
+      </Link>
+
+      {post.category && (
+        <div className="mb-3">
+          <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+            {post.category}
+          </span>
+        </div>
+      )}
+
+      <h1 className="mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl leading-tight">
+        {post.title}
+      </h1>
+
+      <div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground border-b border-border pb-6">
+        {post.author && <span className="font-medium text-foreground">{post.author}</span>}
+        {post.publishedAt && (
+          <time dateTime={post.publishedAt}>
+            {new Date(post.publishedAt).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </time>
+        )}
+        {post.tags && post.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {post.tags.map((tag) => (
+              <span
+                key={tag}
+                className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {post.coverImageUrl && (
+        <div className="mb-8 overflow-hidden rounded-xl">
+          <Image
+            src={post.coverImageUrl}
+            alt={post.coverImageAlt ?? post.title}
+            width={800}
+            height={450}
+            className="w-full object-cover"
+            priority
+          />
+        </div>
+      )}
+
+      {post.excerpt && (
+        <p className="mb-6 text-lg text-muted-foreground leading-relaxed font-light italic border-s-2 border-primary/40 ps-4">
+          {post.excerpt}
+        </p>
+      )}
+
+      <div
+        className="prose prose-neutral dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.content) }}
+      />
+    </main>
+  );
+}
+<% } %>

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

@@ -0,0 +1,276 @@
+/**
+ * Blog listing page — fetches published posts from the Brainerce blog API.
+ *
+ * Merchants manage posts in the Brainerce dashboard under Sell → Blog.
+ * The storefront renders them here. Each post links to /blog/[slug].
+ *
+ * Posts are only visible when status=PUBLISHED and publishedAt <= NOW().
+ * Category and tag filtering available via query params.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import Image from 'next/image';
+
+import { getServerClient } from '@/lib/brainerce';
+
+<% if (i18nEnabled) { %>
+type PageProps = {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ category?: string; tag?: string; page?: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  return {
+    title: locale === 'he' ? 'בלוג' : 'Blog',
+    description: locale === 'he' ? 'מאמרים וסיפורים מהחנות' : 'Articles and stories from our store',
+  };
+}
+
+export default async function BlogListPage({ params, searchParams }: PageProps) {
+  const { locale } = await params;
+  const { category, tag, page: pageParam } = await searchParams;
+  const page = Number(pageParam ?? '1') || 1;
+
+  const client = getServerClient(locale);
+  const { data: posts, meta } = await client.blog
+    .getPosts({ category, tag, page, limit: 12 })
+    .catch(() => ({ data: [], meta: { page: 1, limit: 12, total: 0, totalPages: 1 } }));
+
+  const isHe = locale === 'he';
+  const dir = isHe ? 'rtl' : 'ltr';
+  const emptyLabel = isHe ? 'עדיין אין פוסטים.' : 'No posts yet.';
+  const blogLabel = isHe ? 'בלוג' : 'Blog';
+  const readMoreLabel = isHe ? 'קרא עוד' : 'Read more';
+  const prevLabel = isHe ? 'הקודם' : 'Previous';
+  const nextLabel = isHe ? 'הבא' : 'Next';
+
+  return (
+    <main dir={dir} className="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="mb-8 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        {blogLabel}
+      </h1>
+
+      {posts.length === 0 ? (
+        <p className="text-muted-foreground">{emptyLabel}</p>
+      ) : (
+        <>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {posts.map((post) => (
+              <article
+                key={post.id}
+                className="group flex flex-col overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm transition-shadow hover:shadow-md"
+              >
+                {post.coverImageUrl && (
+                  <Link href={`/blog/${encodeURIComponent(post.slug)}`} tabIndex={-1}>
+                    <div className="relative aspect-[16/9] overflow-hidden">
+                      <Image
+                        src={post.coverImageUrl}
+                        alt={post.coverImageAlt ?? post.title}
+                        fill
+                        className="object-cover transition-transform duration-300 group-hover:scale-105"
+                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                      />
+                    </div>
+                  </Link>
+                )}
+
+                <div className="flex flex-1 flex-col gap-3 p-5">
+                  {/* Category badge */}
+                  {post.category && (
+                    <span className="w-fit rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
+                      {post.category}
+                    </span>
+                  )}
+
+                  {/* Title */}
+                  <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
+                    <h2 className="line-clamp-2 text-lg font-semibold leading-snug text-foreground hover:text-primary transition-colors">
+                      {post.title}
+                    </h2>
+                  </Link>
+
+                  {/* Excerpt */}
+                  {post.excerpt && (
+                    <p className="line-clamp-3 text-sm text-muted-foreground leading-relaxed">
+                      {post.excerpt}
+                    </p>
+                  )}
+
+                  {/* Meta: author + date */}
+                  <div className="mt-auto flex items-center gap-2 pt-2 text-xs text-muted-foreground">
+                    {post.author && <span>{post.author}</span>}
+                    {post.author && post.publishedAt && <span>·</span>}
+                    {post.publishedAt && (
+                      <time dateTime={post.publishedAt}>
+                        {new Date(post.publishedAt).toLocaleDateString(isHe ? 'he-IL' : 'en-US', {
+                          year: 'numeric',
+                          month: 'short',
+                          day: 'numeric',
+                        })}
+                      </time>
+                    )}
+                  </div>
+
+                  <Link
+                    href={`/blog/${encodeURIComponent(post.slug)}`}
+                    className="mt-1 text-sm font-medium text-primary hover:underline"
+                  >
+                    {readMoreLabel} →
+                  </Link>
+                </div>
+              </article>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {meta.totalPages > 1 && (
+            <nav className="mt-10 flex items-center justify-center gap-4">
+              {page > 1 && (
+                <Link
+                  href={`/blog?page=${page - 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  {prevLabel}
+                </Link>
+              )}
+              <span className="text-sm text-muted-foreground">
+                {page} / {meta.totalPages}
+              </span>
+              {page < meta.totalPages && (
+                <Link
+                  href={`/blog?page=${page + 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  {nextLabel}
+                </Link>
+              )}
+            </nav>
+          )}
+        </>
+      )}
+    </main>
+  );
+}
+<% } else { %>
+type PageProps = {
+  searchParams: Promise<{ category?: string; tag?: string; page?: string }>;
+};
+
+export const metadata: Metadata = {
+  title: 'Blog',
+  description: 'Articles and stories from our store',
+};
+
+export default async function BlogListPage({ searchParams }: PageProps) {
+  const { category, tag, page: pageParam } = await searchParams;
+  const page = Number(pageParam ?? '1') || 1;
+
+  const { data: posts, meta } = await getServerClient()
+    .blog.getPosts({ category, tag, page, limit: 12 })
+    .catch(() => ({ data: [], meta: { page: 1, limit: 12, total: 0, totalPages: 1 } }));
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="mb-8 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        Blog
+      </h1>
+
+      {posts.length === 0 ? (
+        <p className="text-muted-foreground">No posts yet.</p>
+      ) : (
+        <>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {posts.map((post) => (
+              <article
+                key={post.id}
+                className="group flex flex-col overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm transition-shadow hover:shadow-md"
+              >
+                {post.coverImageUrl && (
+                  <Link href={`/blog/${encodeURIComponent(post.slug)}`} tabIndex={-1}>
+                    <div className="relative aspect-[16/9] overflow-hidden">
+                      <Image
+                        src={post.coverImageUrl}
+                        alt={post.coverImageAlt ?? post.title}
+                        fill
+                        className="object-cover transition-transform duration-300 group-hover:scale-105"
+                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                      />
+                    </div>
+                  </Link>
+                )}
+
+                <div className="flex flex-1 flex-col gap-3 p-5">
+                  {post.category && (
+                    <span className="w-fit rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
+                      {post.category}
+                    </span>
+                  )}
+
+                  <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
+                    <h2 className="line-clamp-2 text-lg font-semibold leading-snug text-foreground hover:text-primary transition-colors">
+                      {post.title}
+                    </h2>
+                  </Link>
+
+                  {post.excerpt && (
+                    <p className="line-clamp-3 text-sm text-muted-foreground leading-relaxed">
+                      {post.excerpt}
+                    </p>
+                  )}
+
+                  <div className="mt-auto flex items-center gap-2 pt-2 text-xs text-muted-foreground">
+                    {post.author && <span>{post.author}</span>}
+                    {post.author && post.publishedAt && <span>·</span>}
+                    {post.publishedAt && (
+                      <time dateTime={post.publishedAt}>
+                        {new Date(post.publishedAt).toLocaleDateString('en-US', {
+                          year: 'numeric',
+                          month: 'short',
+                          day: 'numeric',
+                        })}
+                      </time>
+                    )}
+                  </div>
+
+                  <Link
+                    href={`/blog/${encodeURIComponent(post.slug)}`}
+                    className="mt-1 text-sm font-medium text-primary hover:underline"
+                  >
+                    Read more →
+                  </Link>
+                </div>
+              </article>
+            ))}
+          </div>
+
+          {meta.totalPages > 1 && (
+            <nav className="mt-10 flex items-center justify-center gap-4">
+              {page > 1 && (
+                <Link
+                  href={`/blog?page=${page - 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  Previous
+                </Link>
+              )}
+              <span className="text-sm text-muted-foreground">
+                {page} / {meta.totalPages}
+              </span>
+              {page < meta.totalPages && (
+                <Link
+                  href={`/blog?page=${page + 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  Next
+                </Link>
+              )}
+            </nav>
+          )}
+        </>
+      )}
+    </main>
+  );
+}
+<% } %>