create-brainerce-store 1.88.0 → 1.89.0

package/templates/nextjs/base/scripts/connect.mjs

@@ -35,6 +35,7 @@ import { spawn } from 'node:child_process';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { setVar } from './env-file.mjs';
+import { markAgentDocsConnected } from './agent-docs.mjs';
 
 const API_BASE = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(/\/$/, '');
 const ENV_PATH = resolve(process.cwd(), '.env.local');
@@ -248,6 +249,11 @@ function writeEnv(connectionId) {
   let body = existsSync(ENV_PATH) ? readFileSync(ENV_PATH, 'utf8') : '';
   for (const key of KEYS) body = setVar(body, key, connectionId);
   writeFileSync(ENV_PATH, body);
+  // CLAUDE.md and AGENTS.md open with "Not connected yet" on a deferred scaffold.
+  // Left alone they tell the next coding agent this store has no channel, and it
+  // asks the user to connect it again.
+  const docs = markAgentDocsConnected(dirname(ENV_PATH), connectionId);
+  if (docs.length > 0) console.log(`Updated ${docs.join(' and ')}: the store is no longer "not connected".`);
 }
 
 /**

package/templates/nextjs/base/src/app/api/auth/oauth-callback/route.ts

@@ -1,96 +1,102 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-const TOKEN_COOKIE = 'brainerce_customer_token';
-const LOGGED_IN_COOKIE = 'brainerce_logged_in';
-const COOKIE_MAX_AGE = 7 * 24 * 60 * 60; // 7 days
-
-const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
-  /\/$/,
-  ''
-);
-
-function isSecure(): boolean {
-  return process.env.NODE_ENV === 'production';
-}
-
-/**
- * Forward a failure to the client callback page as a stable snake_case code.
- *
- * The backend uses the RFC 6749 §4.1.2.1 shape (`oauth_error` = code,
- * `error_description` = English developer detail), so codes are what the page
- * switches on to pick localized copy. The description is deliberately NOT
- * forwarded — it is not shopper-facing copy.
- */
-function errorRedirect(base: URL, code: string): NextResponse {
-  base.searchParams.set('oauth_error', code);
-  const response = NextResponse.redirect(base);
-  response.headers.set('Referrer-Policy', 'no-referrer');
-  return response;
-}
-
-/**
- * OAuth callback handler.
- *
- * The backend redirects here with ?oauth_success=true&auth_code=<one-time-code>.
- * We exchange the auth_code for the real JWT via a server-to-server POST (so the
- * JWT never appears in any URL), then set an httpOnly cookie and redirect to the
- * client-side callback page.
- */
-export async function GET(request: NextRequest) {
-  const { searchParams } = request.nextUrl;
-  const authCode = searchParams.get('auth_code');
-  const oauthSuccess = searchParams.get('oauth_success');
-  const oauthError = searchParams.get('oauth_error');
-
-  const redirectUrl = new URL('/auth/callback', request.url);
-
-  if (oauthError) {
-    return errorRedirect(redirectUrl, oauthError);
-  }
-
-  if (oauthSuccess !== 'true' || !authCode) {
-    return errorRedirect(redirectUrl, 'invalid_request');
-  }
-
-  // Exchange the one-time auth_code for the real JWT.
-  // This is a server-to-server call — the JWT never enters the browser URL.
-  let token: string;
-  try {
-    const exchangeRes = await fetch(`${BACKEND_URL}/api/oauth/customer/exchange`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ code: authCode }),
-    });
-    if (!exchangeRes.ok) {
-      throw new Error(`exchange responded ${exchangeRes.status}`);
-    }
-    const data = await exchangeRes.json();
-    if (!data.token) throw new Error('missing token in exchange response');
-    token = data.token;
-  } catch (err) {
-    console.error('[oauth-callback] auth_code exchange failed:', err);
-    return errorRedirect(redirectUrl, 'server_error');
-  }
-
-  redirectUrl.searchParams.set('oauth_success', 'true');
-  const response = NextResponse.redirect(redirectUrl);
-
-  response.cookies.set(TOKEN_COOKIE, token, {
-    httpOnly: true,
-    secure: isSecure(),
-    sameSite: 'lax',
-    path: '/',
-    maxAge: COOKIE_MAX_AGE,
-  });
-
-  response.cookies.set(LOGGED_IN_COOKIE, '1', {
-    httpOnly: false,
-    secure: isSecure(),
-    sameSite: 'lax',
-    path: '/',
-    maxAge: COOKIE_MAX_AGE,
-  });
-
-  response.headers.set('Referrer-Policy', 'no-referrer');
-  return response;
-}
+import { NextRequest, NextResponse } from 'next/server';
+import { REFERRAL_COOKIE } from '@/core/lib/referral';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+const COOKIE_MAX_AGE = 7 * 24 * 60 * 60; // 7 days
+
+const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
+  /\/$/,
+  ''
+);
+
+function isSecure(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
+
+/**
+ * Forward a failure to the client callback page as a stable snake_case code.
+ *
+ * The backend uses the RFC 6749 §4.1.2.1 shape (`oauth_error` = code,
+ * `error_description` = English developer detail), so codes are what the page
+ * switches on to pick localized copy. The description is deliberately NOT
+ * forwarded — it is not shopper-facing copy.
+ */
+function errorRedirect(base: URL, code: string): NextResponse {
+  base.searchParams.set('oauth_error', code);
+  const response = NextResponse.redirect(base);
+  response.headers.set('Referrer-Policy', 'no-referrer');
+  return response;
+}
+
+/**
+ * OAuth callback handler.
+ *
+ * The backend redirects here with ?oauth_success=true&auth_code=<one-time-code>.
+ * We exchange the auth_code for the real JWT via a server-to-server POST (so the
+ * JWT never appears in any URL), then set an httpOnly cookie and redirect to the
+ * client-side callback page.
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const authCode = searchParams.get('auth_code');
+  const oauthSuccess = searchParams.get('oauth_success');
+  const oauthError = searchParams.get('oauth_error');
+
+  const redirectUrl = new URL('/auth/callback', request.url);
+
+  if (oauthError) {
+    return errorRedirect(redirectUrl, oauthError);
+  }
+
+  if (oauthSuccess !== 'true' || !authCode) {
+    return errorRedirect(redirectUrl, 'invalid_request');
+  }
+
+  // Exchange the one-time auth_code for the real JWT.
+  // This is a server-to-server call — the JWT never enters the browser URL.
+  let token: string;
+  try {
+    const exchangeRes = await fetch(`${BACKEND_URL}/api/oauth/customer/exchange`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code: authCode }),
+    });
+    if (!exchangeRes.ok) {
+      throw new Error(`exchange responded ${exchangeRes.status}`);
+    }
+    const data = await exchangeRes.json();
+    if (!data.token) throw new Error('missing token in exchange response');
+    token = data.token;
+  } catch (err) {
+    console.error('[oauth-callback] auth_code exchange failed:', err);
+    return errorRedirect(redirectUrl, 'server_error');
+  }
+
+  redirectUrl.searchParams.set('oauth_success', 'true');
+  const response = NextResponse.redirect(redirectUrl);
+
+  response.cookies.set(TOKEN_COOKIE, token, {
+    httpOnly: true,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+
+  response.cookies.set(LOGGED_IN_COOKIE, '1', {
+    httpOnly: false,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+
+  // The referral code rode the OAuth state and is now spent (or ignored, for
+  // an existing customer). Drop it so the next account created in this
+  // browser is not attributed to the same referrer — same as /register does.
+  response.cookies.set(REFERRAL_COOKIE, '', { path: '/', maxAge: 0, sameSite: 'lax' });
+
+  response.headers.set('Referrer-Policy', 'no-referrer');
+  return response;
+}

package/templates/nextjs/base/src/app/blog/[slug]/{page.tsx.ejs → page.tsx}

@@ -6,6 +6,12 @@
  * - Injects Article JSON-LD for Google rich snippets
  * - Body HTML is sanitized before rendering
  *
+ * One implementation for single- and multi-language stores: `locale` exists only
+ * under the `[locale]` segment and is `undefined` otherwise. Every string comes
+ * from the `blog` message namespace in the request locale; none is a
+ * `locale === 'he'` ternary, which gave every third language English and forced
+ * `dir="ltr"` onto Arabic.
+ *
  * Security: always pass blog content through sanitizeHtml before dangerouslySetInnerHTML.
  */
 import * as React from 'react';
@@ -16,14 +22,15 @@ import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import { ArticleJsonLd } from '@/components/seo/article-json-ld';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
 
+import { defaultLocale } from '@/i18n';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
+import { localePath } from '@/core/lib/locale-path';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { sanitizeHtml } from '@/core/lib/sanitize';
 import { decodeSlug } from '@/core/lib/utils';
 
-
-<% if (i18nEnabled) { %>
 type PageProps = {
-  params: Promise<{ locale: string; slug: string }>;
+  params: Promise<{ locale?: string; slug: string }>;
 };
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
@@ -41,8 +48,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
   const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
   const SITE_URL = await getCanonicalSiteUrl();
-  const canonicalPath =
-    locale && locale !== defaultLoc ? `/${locale}/blog/${post.slug}` : `/blog/${post.slug}`;
+  const canonicalPath = localePath(locale, `/blog/${post.slug}`);
   const hreflangLanguages =
     supportedLocales.length > 1
       ? Object.fromEntries([
@@ -63,9 +69,12 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
       canonical: canonicalPath,
       ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
     },
+    // `openGraph` replaces the root layout's object wholesale rather than merging
+    // into it, so `siteName` is repeated here.
     openGraph: {
       title: post.seoTitle ?? post.title,
       description: post.seoDescription ?? post.excerpt ?? undefined,
+      ...(storeInfo?.name ? { siteName: storeInfo.name } : {}),
       type: 'article',
       publishedTime: post.publishedAt ?? undefined,
       authors: post.author ? [post.author] : undefined,
@@ -95,29 +104,43 @@ export default async function BlogPostPage({ params }: PageProps) {
     // Default locale stays unprefixed (matches the sitemap/hreflang convention).
     const redirect = await client.resolveSlugRedirect('blog', slug);
     if (redirect) {
-      const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
-      const prefix = locale && locale !== defaultLoc ? `/${locale}` : '';
-      permanentRedirect(`${prefix}/blog/${redirect.currentSlug}`);
+      permanentRedirect(localePath(locale, `/blog/${redirect.currentSlug}`));
     }
     notFound();
   }
 
-  const isHe = locale === 'he';
-  const dir = isHe ? 'rtl' : 'ltr';
-  const backLabel = isHe ? '← חזרה לבלוג' : '← Back to blog';
-  const SITE_URL = await getCanonicalSiteUrl();
-  const articleUrl = `${SITE_URL}/blog/${post.slug}`;
+  const [SITE_URL, strings, seo] = await Promise.all([
+    getCanonicalSiteUrl(),
+    getServerNamespace('blog', locale),
+    getServerNamespace('seo', locale),
+  ]);
+  // The same URL the canonical tag names (locale prefix included), so the
+  // Article JSON-LD cannot point at a different page than the page declares.
+  const articleUrl = `${SITE_URL}${localePath(locale, `/blog/${post.slug}`)}`;
+  const breadcrumbs = [
+    { name: seo.home ?? '', url: `${SITE_URL}${localePath(locale, '/')}` },
+    { name: seo.blog ?? '', url: `${SITE_URL}${localePath(locale, '/blog')}` },
+    { name: post.title, url: articleUrl },
+  ];
 
   return (
-    <main dir={dir} className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <ArticleJsonLd post={post} url={articleUrl} organizationName={storeInfo?.name} />
+    <main className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <ArticleJsonLd
+        post={post}
+        url={articleUrl}
+        organizationName={storeInfo?.name}
+        breadcrumbs={breadcrumbs}
+      />
 
       {/* Back link */}
       <Link
-        href="/blog"
+        href={localePath(locale, '/blog')}
         className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
-        {backLabel}
+        <span aria-hidden="true" className="rtl:rotate-180">
+          ←
+        </span>
+        {strings.backToBlog}
       </Link>
 
       {/* Category */}
@@ -139,7 +162,7 @@ export default async function BlogPostPage({ params }: PageProps) {
         {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', {
+            {new Date(post.publishedAt).toLocaleDateString(locale ?? defaultLocale, {
               year: 'numeric',
               month: 'long',
               day: 'numeric',
@@ -189,129 +212,3 @@ export default async function BlogPostPage({ params }: PageProps) {
     </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 (await getServerClient()).blog.getPost(slug).catch(() => null);
-  if (!post) return { title: slug };
-  return {
-    title: post.seoTitle ?? post.title,
-    description: post.seoDescription ?? post.excerpt,
-    alternates: { canonical: `/blog/${post.slug}` },
-    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 client = await getServerClient();
-  const [post, storeInfo] = await Promise.all([
-    // getPost returns null only on a genuine 404; any other API failure (a
-    // 403 from the channel's origin check, a network error) throws and
-    // surfaces as the error it is instead of masquerading as a missing post.
-    client.blog.getPost(slug),
-    client.getStoreInfo().catch(() => null),
-  ]);
-  if (!post) {
-    // The slug may have been renamed — 301 to the current slug so the old
-    // URL keeps its ranking; genuine unknowns fall through to the 404 page.
-    const redirect = await client.resolveSlugRedirect('blog', slug);
-    if (redirect) permanentRedirect(`/blog/${redirect.currentSlug}`);
-    notFound();
-  }
-
-  const SITE_URL = await getCanonicalSiteUrl();
-  const articleUrl = `${SITE_URL}/blog/${post.slug}`;
-
-  return (
-    <main className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <ArticleJsonLd post={post} url={articleUrl} organizationName={storeInfo?.name} />
-
-      <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

@@ -0,0 +1,187 @@
+/**
+ * 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.
+ *
+ * One implementation for single- and multi-language stores: `locale` exists only
+ * under the `[locale]` segment and is `undefined` otherwise. Every string comes
+ * from the `seo` / `blog` message namespaces in the request locale; none is a
+ * `locale === 'he'` ternary, which gave every third language English.
+ */
+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 { defaultLocale } from '@/i18n';
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { localePath } from '@/core/lib/locale-path';
+import { getServerNamespace } from '@/core/lib/server-messages';
+
+type PageProps = {
+  params: Promise<{ locale?: string }>;
+  searchParams: Promise<{ category?: string; tag?: string; page?: string }>;
+};
+
+/** `/blog` plus whichever of category / tag / page apply, in a fixed order. */
+function blogHref(
+  locale: string | undefined,
+  query: { category?: string; tag?: string; page?: number }
+): string {
+  const params = new URLSearchParams();
+  if (query.category) params.set('category', query.category);
+  if (query.tag) params.set('tag', query.tag);
+  if (query.page && query.page > 1) params.set('page', String(query.page));
+  const qs = params.toString();
+  return `${localePath(locale, '/blog')}${qs ? `?${qs}` : ''}`;
+}
+
+// The canonical is set here because the root layout no longer sets one: a
+// layout-level canonical is inherited by every page without its own, and this
+// page used to tell Google it was a duplicate of the homepage. Each page of the
+// list is its own canonical (`?page=2` is not a copy of page 1).
+export async function generateMetadata({ params, searchParams }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const { category, tag, page: pageParam } = await searchParams;
+  const seo = await getServerNamespace('seo', locale);
+  return {
+    title: seo.blog ?? '',
+    description: seo.blogDescription ?? '',
+    alternates: {
+      canonical: blogHref(locale, { category, tag, page: Number(pageParam ?? '1') || 1 }),
+    },
+  };
+}
+
+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 }, seo, strings] = await Promise.all([
+    client.blog
+      .getPosts({ category, tag, page, limit: 12 })
+      .catch(() => ({ data: [], meta: { page: 1, limit: 12, total: 0, totalPages: 1 } })),
+    getServerNamespace('seo', locale),
+    getServerNamespace('blog', locale),
+  ]);
+  const dateLocale = locale ?? defaultLocale;
+
+  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">
+        {seo.blog}
+      </h1>
+
+      {posts.length === 0 ? (
+        <p className="text-muted-foreground">{strings.empty}</p>
+      ) : (
+        <>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {posts.map((post) => {
+              const postHref = localePath(locale, `/blog/${encodeURIComponent(post.slug)}`);
+              return (
+                <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={postHref} 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={postHref}>
+                      <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(dateLocale, {
+                            year: 'numeric',
+                            month: 'short',
+                            day: 'numeric',
+                          })}
+                        </time>
+                      )}
+                    </div>
+
+                    <Link
+                      href={postHref}
+                      className="mt-1 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+                    >
+                      {strings.readMore}
+                      <span aria-hidden="true" className="rtl:rotate-180">
+                        →
+                      </span>
+                    </Link>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+
+          {/* Pagination */}
+          {meta.totalPages > 1 && (
+            <nav className="mt-10 flex items-center justify-center gap-4">
+              {page > 1 && (
+                <Link
+                  href={blogHref(locale, { category, tag, page: page - 1 })}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  {strings.previous}
+                </Link>
+              )}
+              <span className="text-sm text-muted-foreground">
+                {page} / {meta.totalPages}
+              </span>
+              {page < meta.totalPages && (
+                <Link
+                  href={blogHref(locale, { category, tag, page: page + 1 })}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  {strings.next}
+                </Link>
+              )}
+            </nav>
+          )}
+        </>
+      )}
+    </main>
+  );
+}