create-brainerce-store 1.88.0 → 1.89.0

package/templates/nextjs/base/src/core/providers/listing-seed.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { Product, PublicMetafieldDefinition } from 'brainerce';
+
+/**
+ * First-page product data fetched on the SERVER, handed to the client hooks so
+ * the home grid and /products render real products in the initial HTML.
+ *
+ * Without it both pages were client-only: the server sent a spinner, the browser
+ * fetched, and a crawler that does not run JavaScript saw an empty page for the
+ * two most important URLs on the site.
+ *
+ * Delivered through context rather than props on `HomeClient` / `ProductListing`
+ * on purpose: those components are overridden by every design pack and mirrored
+ * in the design canvas, so a new prop has to be forwarded through each copy or
+ * the seed is silently dropped. The hooks they all call are shared, so the seed
+ * lives there.
+ */
+export interface HomeSeed {
+  products: Product[];
+  /** Region the server priced these in. A seed for another region is not used. */
+  regionId: string | undefined;
+}
+
+export interface ListingSeed {
+  products: Product[];
+  page: number;
+  totalPages: number;
+  total: number;
+  /** `listingSignature(...)` of the query the server ran. The hook uses the seed only when its own signature matches. */
+  signature: string;
+  /**
+   * The filterable custom-field definitions the server resolved, only when the
+   * URL selected a facet. Needed to compute the same signature in the browser
+   * before the definitions load there.
+   */
+  metafieldDefs: PublicMetafieldDefinition[];
+}
+
+interface SeedValue {
+  home: HomeSeed | null;
+  listing: ListingSeed | null;
+}
+
+const SeedContext = createContext<SeedValue>({ home: null, listing: null });
+
+export function ListingSeedProvider({
+  home = null,
+  listing = null,
+  children,
+}: {
+  home?: HomeSeed | null;
+  listing?: ListingSeed | null;
+  children: ReactNode;
+}) {
+  return <SeedContext.Provider value={{ home, listing }}>{children}</SeedContext.Provider>;
+}
+
+export function useHomeSeed(): HomeSeed | null {
+  return useContext(SeedContext).home;
+}
+
+export function useListingSeed(): ListingSeed | null {
+  return useContext(SeedContext).listing;
+}

package/templates/nextjs/base/src/ui/product/product-card.tsx

@@ -16,6 +16,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { useCart } from '@/core/providers/store-provider';
+import { useReviewsEnabled } from '@/core/hooks/use-reviews-enabled';
 import { useCurrency } from '@/core/lib/use-currency';
 import { trackAddToCart } from '@/core/lib/tracking';
 import {
@@ -56,6 +57,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
   const router = useRouter();
   const { refreshCart } = useCart();
   const fallbackCurrency = useCurrency();
+  const showRating = useReviewsEnabled();
   // FX overlay (PRD §23): prefer the region-converted display values when the
   // storefront passed regionId to getProducts. Otherwise fall back to the
   // canonical store-currency basePrice / salePrice.
@@ -205,8 +207,11 @@ export function ProductCard({ product, className }: ProductCardProps) {
         {/* Star rating. `avgRating` / `reviewCount` are denormalized rollups
             the API returns on every product fetch. Auto-hides on a store with
             no reviews yet: `reviewCount` is 0 (or absent) and the whole block
-            is skipped, so nothing renders and the card keeps its layout. */}
-        {product.reviewCount ? (
+            is skipped, so nothing renders and the card keeps its layout.
+            Also hidden while the merchant has reviews switched off: the rollups
+            keep their stored values then, and a rating with no reviews to open
+            is a claim the page cannot back. */}
+        {showRating && product.reviewCount ? (
           <div className="flex items-center gap-1" aria-label={tr('starRating')}>
             <Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400" aria-hidden="true" />
             <span className="text-foreground text-xs font-medium">

package/templates/nextjs/base/src/ui/product/reviews-section.tsx.ejs

@@ -1,6 +1,7 @@
 import { Star } from 'lucide-react';
 import type { ProductReview } from 'brainerce';
 import { getServerClient } from '@/core/lib/brainerce.server';
+import { isReviewsDisabledError } from '@/core/lib/reviews-disabled';
 import { CdnImage } from '@/ui/shared/cdn-image';
 import { Badge } from '@/components/ui/badge';
 <% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
@@ -44,8 +45,11 @@ export async function ReviewsSection({
     try {
       const result = await (await getServerClient()).listProductReviews(productId, { page: 1, limit: 20, sort: 'photos_first' });
       reviews = result.data;
-    } catch {
-      // Review listing disabled at store level or network error — render the form anyway.
+    } catch (err) {
+      // The merchant switched reviews off: this store collects none, so render
+      // nothing (no heading, no "no reviews yet", no form). Any other failure
+      // (network, 5xx) is not "off": render the form with an empty list.
+      if (isReviewsDisabledError(err)) return null;
       reviews = [];
     }
   }

package/templates/nextjs/designs/atelier/app-overlay/layout.tsx.ejs

@@ -14,6 +14,7 @@ import { resolveRegion } from '@/core/lib/region.server';
 import { getDirection, getMessages, supportedLocales } from '@/i18n';
 import { getNonce } from '@/core/lib/nonce';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { resolveStoreName, buildTitleTemplate } from '@/core/lib/store-name';
 import { buildMetaDescription } from '@/core/lib/seo';
 import '../globals.css';
@@ -56,9 +57,6 @@ export async function generateMetadata({
     template: buildTitleTemplate(storeName),
   },
   description: buildMetaDescription(storeInfo?.metaDescription) || storeName,
-  alternates: {
-    canonical: '/',
-  },
   openGraph: {
     siteName: storeName,
     type: 'website',
@@ -70,15 +68,6 @@ export async function generateMetadata({
   };
 }
 
-function buildOrganizationJsonLd(baseUrl: string, storeName: string) {
-  return {
-    '@context': 'https://schema.org',
-    '@type': 'Organization',
-    name: storeName,
-    url: baseUrl,
-  };
-}
-
 export function generateStaticParams() {
   return supportedLocales.map((locale) => ({ locale }));
 }
@@ -93,7 +82,6 @@ export default async function RootLayout({
   const { locale } = await params;
   const dir = getDirection(locale);
   const nonce = await getNonce();
-  const baseUrl = await getCanonicalSiteUrl();
 
   // Merchant-driven layout chrome — fetched server-side. Each call falls back
   // to null/[] on 404 so the layout never crashes when the merchant hasn't
@@ -129,21 +117,17 @@ export default async function RootLayout({
   // One resolved name for the JSON-LD, the header and the footer. Live data
   // first; the scaffold-time literal is only the last fallback.
   const storeName = resolveStoreName(storeInfo);
+  // Feed title in the request locale (a literal "Blog" was every language's).
+  const seoStrings = await getServerNamespace('seo', locale);
 
   return (
     <html lang={locale} dir={dir} data-scroll-behavior="smooth">
       <head>
-        <script
-          type="application/ld+json"
-          nonce={nonce}
-          suppressHydrationWarning
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl, storeName))
-              .replace(/</g, '\\u003c')
-              .replace(/>/g, '\\u003e')
-              .replace(/&/g, '\\u0026'),
-          }}
-        />
+        {/* No Organization JSON-LD here. This layout wraps EVERY page, and the
+            homepage already emits the full Organization + WebSite block
+            (components/seo/organization-json-ld.tsx); a second, thinner
+            Organization on the same page is a duplicate entity, not a reinforcement.
+            Organization data belongs on the homepage only. */}
         {/* Google Search Console verification — token set by the merchant in
             the dashboard (channel settings → Google site verification). Also
             what the Merchant Center website claim checks for. Renders nothing
@@ -153,7 +137,7 @@ export default async function RootLayout({
         ) : null}
         {/* RSS autodiscovery — feed readers and aggregators find the blog feed
             from any page. The route itself lives at /blog/rss.xml. */}
-        <link rel="alternate" type="application/rss+xml" title="Blog" href="/blog/rss.xml" />
+        <link rel="alternate" type="application/rss+xml" title={seoStrings.blog ?? ''} href="/blog/rss.xml" />
         {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
             SPA route changes. Cookieless (no consent banner needed); the
             merchant can toggle it per sales channel in the dashboard. */}
@@ -209,6 +193,7 @@ import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { resolveRegion } from '@/core/lib/region.server';
 import { getNonce } from '@/core/lib/nonce';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { resolveStoreName, buildTitleTemplate } from '@/core/lib/store-name';
 import { buildMetaDescription } from '@/core/lib/seo';
 import './globals.css';
@@ -246,9 +231,6 @@ export async function generateMetadata(): Promise<Metadata> {
     template: buildTitleTemplate(storeName),
   },
   description: buildMetaDescription(storeInfo?.metaDescription) || storeName,
-  alternates: {
-    canonical: '/',
-  },
   openGraph: {
     siteName: storeName,
     locale: '<%= ogLocale %>',
@@ -261,22 +243,12 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-function buildOrganizationJsonLd(baseUrl: string, storeName: string) {
-  return {
-    '@context': 'https://schema.org',
-    '@type': 'Organization',
-    name: storeName,
-    url: baseUrl,
-  };
-}
-
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const nonce = await getNonce();
-  const baseUrl = await getCanonicalSiteUrl();
 
   // Merchant-driven layout chrome — fetched server-side. Each call falls back
   // to null/[] on 404 so the layout never crashes when the merchant hasn't
@@ -308,21 +280,17 @@ export default async function RootLayout({
   // One resolved name for the JSON-LD, the header and the footer. Live data
   // first; the scaffold-time literal is only the last fallback.
   const storeName = resolveStoreName(storeInfo);
+  // Feed title in the request locale (a literal "Blog" was every language's).
+  const seoStrings = await getServerNamespace('seo');
 
   return (
     <html lang="<%= language %>" dir="<%= direction %>" data-scroll-behavior="smooth">
       <head>
-        <script
-          type="application/ld+json"
-          nonce={nonce}
-          suppressHydrationWarning
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl, storeName))
-              .replace(/</g, '\\u003c')
-              .replace(/>/g, '\\u003e')
-              .replace(/&/g, '\\u0026'),
-          }}
-        />
+        {/* No Organization JSON-LD here. This layout wraps EVERY page, and the
+            homepage already emits the full Organization + WebSite block
+            (components/seo/organization-json-ld.tsx); a second, thinner
+            Organization on the same page is a duplicate entity, not a reinforcement.
+            Organization data belongs on the homepage only. */}
         {/* Google Search Console verification — token set by the merchant in
             the dashboard (channel settings → Google site verification). Also
             what the Merchant Center website claim checks for. Renders nothing
@@ -332,7 +300,7 @@ export default async function RootLayout({
         ) : null}
         {/* RSS autodiscovery — feed readers and aggregators find the blog feed
             from any page. The route itself lives at /blog/rss.xml. */}
-        <link rel="alternate" type="application/rss+xml" title="Blog" href="/blog/rss.xml" />
+        <link rel="alternate" type="application/rss+xml" title={seoStrings.blog ?? ''} href="/blog/rss.xml" />
         {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
             SPA route changes. Cookieless (no consent banner needed); the
             merchant can toggle it per sales channel in the dashboard. */}

package/templates/nextjs/designs/atelier/ui/home/testimonials-band.tsx

@@ -6,7 +6,8 @@
  * Never invent testimonials. A storefront that ships hardcoded quotes and star
  * ratings is publishing fake reviews under the merchant's name, which is illegal
  * in most markets. This section renders only what shoppers actually left, and
- * auto-hides entirely until someone has reviewed something.
+ * auto-hides entirely until someone has reviewed something, and while the
+ * merchant has reviews switched off.
  *
  * `avgRating` / `reviewCount` already ride on the products the page loaded, so
  * this costs no extra request.
@@ -14,12 +15,14 @@
 import type { Product } from 'brainerce';
 import { Link } from '@/core/lib/navigation';
 import { useTranslations } from '@/core/lib/translations';
+import { useReviewsEnabled } from '@/core/hooks/use-reviews-enabled';
 import { IconStar } from '@/ui/shared/icons';
 
 const MAX_SHOWN = 3;
 
 export function TestimonialsBand({ products }: { products: Product[] }) {
   const t = useTranslations('home');
+  const reviewsOn = useReviewsEnabled();
 
   const rated = products
     .filter((p) => (p.reviewCount ?? 0) > 0 && (p.avgRating ?? 0) > 0)
@@ -27,7 +30,10 @@ export function TestimonialsBand({ products }: { products: Product[] }) {
     .slice(0, MAX_SHOWN);
 
   // Nothing reviewed yet — show nothing rather than filling the gap with fiction.
-  if (rated.length === 0) return null;
+  // Also nothing while the merchant has reviews switched off: the ratings are
+  // still stored, but the store is not showing reviews, so quoting them here
+  // would advertise something a shopper cannot open.
+  if (!reviewsOn || rated.length === 0) return null;
 
   return (
     <section className="section-pad wash-sand">

package/templates/nextjs/designs/atelier/ui/product/product-card.tsx

@@ -12,6 +12,7 @@ import { StockBadge } from '@/ui/product/stock-badge';
 import { canPurchaseProduct } from '@/core/lib/kit';
 import { DiscountBadge } from '@/ui/product/discount-badge';
 import { useCart } from '@/core/providers/store-provider';
+import { useReviewsEnabled } from '@/core/hooks/use-reviews-enabled';
 import { flyToCart } from '@/ui/shared/fly-to-cart';
 import { openCartDrawer } from '@/ui/cart/cart-drawer';
 import { useCurrency } from '@/core/lib/use-currency';
@@ -56,6 +57,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
   const router = useRouter();
   const { refreshCart } = useCart();
   const fallbackCurrency = useCurrency();
+  const showRating = useReviewsEnabled();
   // FX overlay (PRD §23): prefer the region-converted display values when the
   // storefront passed regionId to getProducts. Otherwise fall back to the
   // canonical store-currency basePrice / salePrice.
@@ -199,8 +201,11 @@ export function ProductCard({ product, className }: ProductCardProps) {
         {/* Star rating. `avgRating` / `reviewCount` are denormalized rollups
             the API returns on every product fetch. Auto-hides on a store with
             no reviews yet: `reviewCount` is 0 (or absent) and the whole block
-            is skipped, so nothing renders and the card keeps its layout. */}
-        {product.reviewCount ? (
+            is skipped, so nothing renders and the card keeps its layout.
+            Also hidden while the merchant has reviews switched off: the rollups
+            keep their stored values then, and a rating with no reviews to open
+            is a claim the page cannot back. */}
+        {showRating && product.reviewCount ? (
           <div className="flex items-center gap-1" aria-label={tr('starRating')}>
             <span aria-hidden="true" className="text-primary">
               <IconStar size={16} />

package/templates/nextjs/designs/atelier/ui/product/reviews-section.tsx.ejs

@@ -1,5 +1,6 @@
 import type { ProductReview } from 'brainerce';
 import { getServerClient } from '@/core/lib/brainerce.server';
+import { isReviewsDisabledError } from '@/core/lib/reviews-disabled';
 import { CdnImage } from '@/ui/shared/cdn-image';
 <% if (i18nEnabled) { %>
 import { getMessages, defaultLocale } from '@/i18n';
@@ -49,8 +50,11 @@ export async function ReviewsSection({
     try {
       const result = await (await getServerClient()).listProductReviews(productId, { page: 1, limit: 20, sort: 'photos_first' });
       reviews = result.data;
-    } catch {
-      // Review listing disabled at store level or network error — render the form anyway.
+    } catch (err) {
+      // The merchant switched reviews off: this store collects none, so render
+      // nothing (no heading, no "no reviews yet", no form). Any other failure
+      // (network, 5xx) is not "off": render the form with an empty list.
+      if (isReviewsDisabledError(err)) return null;
       reviews = [];
     }
   }

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

@@ -1,5 +1,6 @@
 import type { ProductReview } from 'brainerce';
 import { getServerClient } from '@/core/lib/brainerce.server';
+import { isReviewsDisabledError } from '@/core/lib/reviews-disabled';
 import { CdnImage } from '@/ui/shared/cdn-image';
 <% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
 import { ReviewForm } from './review-form';
@@ -42,8 +43,11 @@ export async function ReviewsSection({
     try {
       const result = await (await getServerClient()).listProductReviews(productId, { page: 1, limit: 20, sort: 'photos_first' });
       reviews = result.data;
-    } catch {
-      // Review listing disabled at store level or network error — render the form anyway.
+    } catch (err) {
+      // The merchant switched reviews off: this store collects none, so render
+      // nothing (no heading, no "no reviews yet", no form). Any other failure
+      // (network, 5xx) is not "off": render the form with an empty list.
+      if (isReviewsDisabledError(err)) return null;
       reviews = [];
     }
   }

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

@@ -1,277 +0,0 @@
-/**
- * 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 { CdnImage as Image } from '@/ui/shared/cdn-image';
-
-import { getServerClient } from '@/core/lib/brainerce.server';
-
-<% 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 = await 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 client = await getServerClient();
-  const { data: posts, meta } = await client.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>
-  );
-}
-<% } %>