@webnumseoagent/next 0.3.1 → 0.4.0

package/bin/cli.mjs

@@ -39,6 +39,23 @@ async function anyExistsRel(paths) {
   for (const p of paths) if (await exists(path.join(root, p))) return true;
   return false;
 }
+// Пишет НАШ генерируемый роут: создаёт, если нет; ПЕРЕЗАПИСЫВАЕТ, если файл уже наш (импортит наши
+// blog-компоненты) и содержимое изменилось (напр. старый init-роут без ?show → обновляем на актуальный
+// с пагинацией); НЕ трогает собственный блог сайта (файл без наших импортов).
+async function writeOurRoute(p, content) {
+  const cur = await fs.readFile(p, "utf8").catch(() => null);
+  if (cur === null) {
+    await fs.mkdir(path.dirname(p), { recursive: true });
+    await fs.writeFile(p, content);
+    ok(path.relative(root, p));
+    return;
+  }
+  if (!/SeoBlogIndex|SeoBlogArticle|seoBlogPost/.test(cur)) { skip(`${path.relative(root, p)} — свой блог сайта`); return; }
+  if (cur === content) { skip(path.relative(root, p)); return; }
+  await fs.writeFile(p, content);
+  ok(`${path.relative(root, p)} (обновлён)`);
+}
+
 // Переименовывает файл в *.bak (не удаляя) — сохраняем чужой robots/sitemap при takeover.
 async function backupIfExists(p) {
   if (!(await exists(p))) return false;
@@ -622,16 +639,102 @@ async function takeover() {
   log("\n\x1b[1mЗатем:\x1b[0m проверь \x1b[36mgit diff\x1b[0m, затем \x1b[36mgit add -A && git commit && git push\x1b[0m. Убедись, что env SEOAGENT_* заданы в Vercel.\n");
 }
 
+// Динамическая папка локали в app/ (next-intl обычно [locale]) — чтобы положить блог ПОД layout сайта.
+async function findLocaleDir(appDir) {
+  const entries = await fs.readdir(path.join(root, appDir), { withFileTypes: true }).catch(() => []);
+  const dyn = entries.filter((e) => e.isDirectory() && /^\[[a-zA-Z]+\]$/.test(e.name)).map((e) => e.name);
+  return dyn.find((n) => /^\[(locale|lang|lng|language)\]$/i.test(n)) ?? null;
+}
+
+// `blog` — ставит/переставляет страницы блога: под layout сайта (в [locale] у мультиязычных — тогда
+// блог наследует header/footer сайта) либо на корень app/. Роуты: список (?show= → «Показать больше»
+// по 20) + [slug]. Идемпотентно (свои роуты не перезаписывает). Дизайн/шапка/футер — с самого сайта.
+async function blogPage() {
+  log("\n\x1b[1m@webnumseoagent/next — страница блога\x1b[0m\n");
+  if (!isGitClean() && !args.includes("--force")) {
+    console.error("  ✗ Рабочее дерево git не чистое. Закоммить/откатись (или добавь --force).");
+    process.exit(1);
+  }
+  const appDir = await findAppDir();
+  if (!appDir) { console.error("  ✗ Не найдена папка app/ или src/app/. Запусти из корня Next.js-проекта."); process.exit(1); }
+  ok(`Найден app-каталог: ${appDir}/`);
+  const ext = (await exists(path.join(root, "tsconfig.json"))) ? "ts" : "js";
+  const jsxExt = ext === "ts" ? "tsx" : "jsx";
+  const pkgMode = await exists(path.join(root, "node_modules/@webnumseoagent/next/package.json"));
+  if (!pkgMode && !(await exists(path.join(root, "seoagent", "blog.tsx")))) {
+    console.error("  ✗ Адаптер не установлен (нет пакета и нет seoagent/blog.tsx). Сначала запусти init.");
+    process.exit(1);
+  }
+  const blogFor = (file) => (pkgMode ? "@webnumseoagent/next/blog" : `${importPath(appDir, file)}/blog`);
+
+  const localeDir = await findLocaleDir(appDir); // "[locale]" | null
+  const under = localeDir ? `${localeDir}/` : "";
+  const param = localeDir ? localeDir.slice(1, -1) : null; // "locale"
+  if (localeDir) ok(`Мультиязычный сайт (${localeDir}) — блог под layout сайта: ${appDir}/${localeDir}/blog (header/footer сайта).`);
+  else ok(`Блог на ${appDir}/blog (наследует корневой layout сайта).`);
+
+  // Ставим под [locale], но на корне уже есть НАШ голый app/blog → бэкапим его (иначе останется
+  // дублирующий /blog без шапки). Трогаем только наши файлы (импортят SeoBlogIndex/seoBlogPost).
+  if (localeDir) {
+    for (const f of [`blog/page.${jsxExt}`, `blog/[slug]/page.${jsxExt}`]) {
+      const p = path.join(root, appDir, f);
+      const cur = await fs.readFile(p, "utf8").catch(() => null);
+      if (cur && /SeoBlogIndex|SeoBlogArticle|seoBlogPost/.test(cur)) await backupIfExists(p);
+    }
+  }
+
+  // Конфликт: свой [иной-сегмент] в blog → свой [slug] не создаём (Next запрещает два динам. имени).
+  let blogDynConflict = false;
+  const blogDirAbs = path.join(root, appDir, under, "blog");
+  if (await exists(blogDirAbs)) {
+    const names = await fs.readdir(blogDirAbs).catch(() => []);
+    blogDynConflict = names.some((n) => /^\[.*\]$/.test(n) && n !== "[slug]");
+  }
+
+  // index-роут (список): в [locale] прокидываем locale + basePath; ?show= → пагинация по 20.
+  const idxSig = ext === "ts"
+    ? (param ? `{ params, searchParams }: { params: { ${param}: string }; searchParams: { show?: string } }` : `{ searchParams }: { searchParams: { show?: string } }`)
+    : (param ? "{ params, searchParams }" : "{ searchParams }");
+  const idxBody = param
+    ? `<SeoBlogIndex locale={params.${param}} basePath={\`/\${params.${param}}/blog\`} show={Number(searchParams?.show) || 20} />`
+    : `<SeoBlogIndex show={Number(searchParams?.show) || 20} />`;
+  await writeOurRoute(
+    path.join(root, appDir, under, `blog/page.${jsxExt}`),
+    `import { SeoBlogIndex } from "${blogFor(`${under}blog/page.tsx`)}";\nexport const revalidate = 300;\nexport default function BlogPage(${idxSig}) {\n  return ${idxBody};\n}\n`,
+  );
+
+  if (blogDynConflict) {
+    log(`\n  \x1b[1mУ сайта уже есть blog/[иной-сегмент]\x1b[0m — роут статьи /blog/[slug] не создаю. Подключи вручную: \x1b[36mimport { seoBlogPost, SeoBlogArticle } from "${blogFor(`${under}blog/[slug]/page.tsx`)}";\x1b[0m`);
+  } else {
+    const artSig = ext === "ts"
+      ? (param ? `{ params }: { params: { ${param}: string; slug: string } }` : `{ params }: { params: { slug: string } }`)
+      : "{ params }";
+    const localeArg = param ? `, { locale: params.${param} }` : "";
+    const localeProp = param ? ` locale={params.${param}}` : "";
+    await writeOurRoute(
+      path.join(root, appDir, under, `blog/[slug]/page.${jsxExt}`),
+      `import { notFound } from "next/navigation";\nimport { seoBlogPost, SeoBlogArticle } from "${blogFor(`${under}blog/[slug]/page.tsx`)}";\nexport const revalidate = 300;\n\nexport async function generateMetadata(${artSig}) {\n  const post = await seoBlogPost(params.slug${localeArg});\n  if (!post) return {};\n  return { title: post.title, description: post.excerpt, openGraph: { images: post.cover ? [post.cover] : [] } };\n}\n\nexport default async function BlogPostPage(${artSig}) {\n  const post = await seoBlogPost(params.slug${localeArg});\n  if (!post) notFound();\n  return <SeoBlogArticle post={post}${localeProp} />;\n}\n`,
+    );
+  }
+
+  log(`\n  \x1b[32m✓\x1b[0m Готово. Проверь \x1b[36mgit diff\x1b[0m, затем commit + push. Блог: \x1b[1m${localeDir ? `/${param}/blog` : "/blog"}\x1b[0m — дизайн/шапка с сайта, список 4-в-ряд + «Показать больше».\n`);
+}
+
 if (cmd === "init") {
   init().catch((e) => { console.error(e); process.exit(1); });
 } else if (cmd === "takeover") {
   takeover().catch((e) => { console.error(e); process.exit(1); });
+} else if (cmd === "blog") {
+  blogPage().catch((e) => { console.error(e); process.exit(1); });
 } else {
-  log("Использование: npx @webnumseoagent/next <init|takeover> [опции]");
+  log("Использование: npx @webnumseoagent/next <init|takeover|blog> [опции]");
   log("  init [--wrap] [--no-blog] [--site <id>] [--token <t>] [--api <url>] [--revalidate-secret <s>]");
   log("    --wrap     — авто-обернуть generateMetadata страниц (иначе печатает сниппеты)");
   log("    --no-blog  — не создавать роуты блога /blog (по умолчанию блог создаётся)");
   log("  takeover [--robots] [--sitemap] [--force]");
   log("    передать robots.txt/sitemap.xml под управление платформы (бэкап чужих в *.bak);");
   log("    без флагов — оба. Требует уже установленного адаптера (init).");
+  log("  blog [--force]");
+  log("    поставить страницу блога под layout сайта (мультиязычный → /[locale]/blog, с header/footer);");
+  log("    список 4-в-ряд + «Показать больше» (по 20). Дизайн — с самого сайта.");
 }

package/blog.tsx

@@ -81,20 +81,27 @@ const base = (cfg: SeoBlogConfig): string => cfg.supabaseUrl.replace(/\/+$/, "")
 async function fetchPosts(cfg: SeoBlogConfig, locale: string, limit: number): Promise<SeoBlogSummary[]> {
   const m = cfg.mapping;
   if (!m.id) return []; // без колонки id/slug ссылки на статьи не построить
+  const buildUrl = (suf: string) => {
+    const titleCol = m.title + suf;
+    const excerptCol = m.excerpt ? m.excerpt + suf : "";
+    const cols = [m.id, titleCol, excerptCol, m.image || "", m.publishedAt || ""].filter(Boolean).join(",");
+    let url = `${base(cfg)}/rest/v1/${encodeURIComponent(cfg.table)}?select=${cols}`;
+    if (m.published) url += `&${m.published}=eq.true`;
+    if (m.publishedAt) url += `&order=${m.publishedAt}.desc`;
+    url += `&limit=${limit}`;
+    return { url, titleCol, excerptCol };
+  };
   const suf = locale ? `_${locale}` : "";
-  const titleCol = m.title + suf;
-  const excerptCol = m.excerpt ? m.excerpt + suf : "";
-  const cols = [m.id, titleCol, excerptCol, m.image || "", m.publishedAt || ""].filter(Boolean).join(",");
-  let url = `${base(cfg)}/rest/v1/${encodeURIComponent(cfg.table)}?select=${cols}`;
-  if (m.published) url += `&${m.published}=eq.true`;
-  if (m.publishedAt) url += `&order=${m.publishedAt}.desc`;
-  url += `&limit=${limit}`;
-  const rows = await supaGet(cfg, url);
+  let q = buildUrl(suf);
+  let rows = await supaGet(cfg, q.url);
+  // Запрошенной локали нет среди колонок доставки (напр. языки блога не совпали с локалями сайта) →
+  // PostgREST вернул 400 (supaGet=null). Откатываемся на базовые колонки (оригинал), а не показываем пусто.
+  if (rows === null && suf) { q = buildUrl(""); rows = await supaGet(cfg, q.url); }
   return (rows ?? [])
     .map((r) => ({
       slug: S(r[m.id!]),
-      title: S(r[titleCol]),
-      excerpt: excerptCol ? S(r[excerptCol]) : "",
+      title: S(r[q.titleCol]),
+      excerpt: q.excerptCol ? S(r[q.excerptCol]) : "",
       cover: m.image ? (r[m.image] as string | null) ?? null : null,
       date: m.publishedAt ? (r[m.publishedAt] as string | null) ?? null : null,
     }))
@@ -111,11 +118,14 @@ async function fetchPost(cfg: SeoBlogConfig, slug: string, locale: string): Prom
   const rows = await supaGet(cfg, url);
   const r = rows && rows[0];
   if (!r) return null;
-  const rawBody = S(r[m.body + suf]);
+  // Локаль-колонка пуста/отсутствует → берём базовую (оригинал). Так статья не выходит пустой, если
+  // перевода на запрошенную локаль нет (доставка тоже кладёт оригинал для непереведённых локалей).
+  const val = (colBase: string) => (suf ? S(r[colBase + suf]) : "") || S(r[colBase]);
+  const rawBody = val(m.body);
   return {
     slug: S(r[m.id]) || slug,
-    title: S(r[m.title + suf]),
-    excerpt: m.excerpt ? S(r[m.excerpt + suf]) : "",
+    title: val(m.title),
+    excerpt: m.excerpt ? val(m.excerpt) : "",
     cover: m.image ? (r[m.image] as string | null) ?? null : null,
     date: m.publishedAt ? (r[m.publishedAt] as string | null) ?? null : null,
     bodyHtml: cfg.format === "minimarkup" ? miniMarkupToHtml(rawBody) : sanitizeDeliveryHtml(rawBody),
@@ -248,29 +258,70 @@ function themeStyle(theme?: SeoBlogTheme): Record<string, string> {
   return out;
 }
 
-// Список статей блога. Сам тянет конфиг+статьи. Пусто/ошибка → null (ничего не ломаем).
-export async function SeoBlogIndex(props: { locale?: string; basePath?: string; limit?: number; title?: string }) {
+// Сетка/карточки списка — через класс + медиазапросы (инлайн-стиль их не умеет): 1→2→3→4 колонки.
+// Цвета/рамки/скругления берутся из --sa-* (авто-тема сайта). Наследует шрифт/цвет текста от layout.
+const GRID_CSS = `.sa-blog-wrap{max-width:1120px;margin:0 auto;padding:2rem 1.25rem}
+.sa-blog-h1{font-size:2rem;line-height:1.2;margin:0 0 1.5rem}
+.sa-blog-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
+@media(min-width:560px){.sa-blog-grid{grid-template-columns:repeat(2,1fr)}}
+@media(min-width:880px){.sa-blog-grid{grid-template-columns:repeat(3,1fr)}}
+@media(min-width:1160px){.sa-blog-grid{grid-template-columns:repeat(4,1fr)}}
+.sa-blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--sa-border,#e5e7eb);border-radius:var(--sa-radius,12px);overflow:hidden;background:var(--sa-surface,transparent);transition:transform .15s ease,box-shadow .15s ease}
+.sa-blog-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.08)}
+.sa-blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
+.sa-blog-card .sa-cb{padding:1rem;display:flex;flex-direction:column;gap:.4rem}
+.sa-blog-card h2{font-size:1.1rem;line-height:1.35;margin:0}
+.sa-blog-card p{margin:0;color:var(--sa-muted,#64748b);font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.sa-blog-more{display:flex;justify-content:center;margin-top:2rem}
+.sa-blog-more a{display:inline-block;padding:.7rem 1.6rem;border:1px solid var(--sa-border,#e5e7eb);border-radius:var(--sa-radius,10px);text-decoration:none;color:inherit;font-weight:500}
+.sa-blog-more a:hover{background:var(--sa-th-bg,#f8fafc)}
+.sa-blog-empty{color:var(--sa-muted,#64748b)}`;
+
+const BLOG_TITLE: Record<string, string> = { ru: "Блог", uz: "Blog", en: "Blog", ar: "المدونة", tr: "Blog" };
+const MORE_LABEL: Record<string, string> = { ru: "Показать больше", uz: "Ko‘proq ko‘rsatish", en: "Show more", ar: "عرض المزيد" };
+const EMPTY_LABEL: Record<string, string> = { ru: "Пока нет статей.", uz: "Hozircha maqolalar yo‘q.", en: "No posts yet.", ar: "لا توجد مقالات بعد." };
+const L = (map: Record<string, string>, locale: string, fb: string) => map[locale] || map[locale?.split("-")[0]] || fb;
+
+// Список статей блога: H1 + карточки (по 4 в ряд на десктопе) + «Показать больше» (пагинация по 20
+// через ?show=, серверно — без клиентского JS, дружелюбно к SEO). Всегда рендерит H1 (даже пустой блог),
+// чтобы страница не была пустой. perPage — размер «страницы» (дефолт 20), show — сколько показать сейчас.
+export async function SeoBlogIndex(props: { locale?: string; basePath?: string; title?: string; show?: number; perPage?: number }) {
   const cfg = await fetchBlogConfig();
-  if (!cfg) return null;
-  const locale = props.locale ?? firstLocale(cfg);
-  const posts = await fetchPosts(cfg, locale, props.limit ?? 30);
-  if (!posts.length) return null;
+  const locale = props.locale ?? (cfg ? firstLocale(cfg) : "");
+  const title = props.title ?? L(BLOG_TITLE, locale, "Blog");
+  const per = Math.max(1, Math.floor(props.perPage ?? 20));
+  const show = Math.max(per, Math.floor(Number(props.show) || per));
   const basePath = (props.basePath ?? "/blog").replace(/\/+$/, "");
+  // Тянем show+1, чтобы понять, есть ли ещё (для кнопки «Показать больше»).
+  const posts = cfg ? await fetchPosts(cfg, locale, show + 1) : [];
+  const hasMore = posts.length > show;
+  const visible = posts.slice(0, show);
   return (
-    <div style={{ maxWidth: 1080, margin: "0 auto", padding: "1.5rem", ...themeStyle(cfg.theme) } as CSSProperties}>
-      {props.title ? <h1 style={{ fontSize: "2rem", margin: "0 0 1.5rem" }}>{props.title}</h1> : null}
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1.5rem" }}>
-        {posts.map((p) => (
-          <a key={p.slug} href={`${basePath}/${p.slug}`}
-            style={{ display: "block", textDecoration: "none", color: "inherit", border: "1px solid var(--sa-border, #e5e7eb)", borderRadius: "var(--sa-radius, 12px)", overflow: "hidden", background: "var(--sa-surface, transparent)" }}>
-            {p.cover ? <img src={p.cover} alt={p.title} style={{ width: "100%", height: 180, objectFit: "cover", display: "block" }} /> : null}
-            <div style={{ padding: "1rem" }}>
-              <h2 style={{ fontSize: "1.1rem", margin: "0 0 .5rem", lineHeight: 1.3 }}>{p.title}</h2>
-              {p.excerpt ? <p style={{ margin: 0, color: "var(--sa-muted, #64748b)", fontSize: ".9rem", lineHeight: 1.5 }}>{p.excerpt}</p> : null}
+    <div className="sa-blog-wrap" style={themeStyle(cfg?.theme) as CSSProperties}>
+      <style dangerouslySetInnerHTML={{ __html: GRID_CSS }} />
+      <h1 className="sa-blog-h1">{title}</h1>
+      {visible.length ? (
+        <>
+          <div className="sa-blog-grid">
+            {visible.map((p) => (
+              <a key={p.slug} className="sa-blog-card" href={`${basePath}/${p.slug}`}>
+                {p.cover ? <img src={p.cover} alt={p.title} loading="lazy" /> : null}
+                <div className="sa-cb">
+                  <h2>{p.title}</h2>
+                  {p.excerpt ? <p>{p.excerpt}</p> : null}
+                </div>
+              </a>
+            ))}
+          </div>
+          {hasMore ? (
+            <div className="sa-blog-more">
+              <a href={`${basePath}?show=${show + per}`} rel="nofollow">{L(MORE_LABEL, locale, "Show more")}</a>
             </div>
-          </a>
-        ))}
-      </div>
+          ) : null}
+        </>
+      ) : (
+        <p className="sa-blog-empty">{L(EMPTY_LABEL, locale, "No posts yet.")}</p>
+      )}
     </div>
   );
 }

package/dist/blog.d.ts

@@ -45,9 +45,10 @@ export declare function seoBlogPost(slug: string, opts?: {
 export declare function SeoBlogIndex(props: {
     locale?: string;
     basePath?: string;
-    limit?: number;
     title?: string;
-}): Promise<import("react").JSX.Element | null>;
+    show?: number;
+    perPage?: number;
+}): Promise<import("react").JSX.Element>;
 export declare function SeoBlogArticle({ post, locale }: {
     post: SeoBlogPostFull;
     locale?: string;

package/dist/blog.js

@@ -57,22 +57,32 @@ async function fetchPosts(cfg, locale, limit) {
     const m = cfg.mapping;
     if (!m.id)
         return []; // без колонки id/slug ссылки на статьи не построить
+    const buildUrl = (suf) => {
+        const titleCol = m.title + suf;
+        const excerptCol = m.excerpt ? m.excerpt + suf : "";
+        const cols = [m.id, titleCol, excerptCol, m.image || "", m.publishedAt || ""].filter(Boolean).join(",");
+        let url = `${base(cfg)}/rest/v1/${encodeURIComponent(cfg.table)}?select=${cols}`;
+        if (m.published)
+            url += `&${m.published}=eq.true`;
+        if (m.publishedAt)
+            url += `&order=${m.publishedAt}.desc`;
+        url += `&limit=${limit}`;
+        return { url, titleCol, excerptCol };
+    };
     const suf = locale ? `_${locale}` : "";
-    const titleCol = m.title + suf;
-    const excerptCol = m.excerpt ? m.excerpt + suf : "";
-    const cols = [m.id, titleCol, excerptCol, m.image || "", m.publishedAt || ""].filter(Boolean).join(",");
-    let url = `${base(cfg)}/rest/v1/${encodeURIComponent(cfg.table)}?select=${cols}`;
-    if (m.published)
-        url += `&${m.published}=eq.true`;
-    if (m.publishedAt)
-        url += `&order=${m.publishedAt}.desc`;
-    url += `&limit=${limit}`;
-    const rows = await supaGet(cfg, url);
+    let q = buildUrl(suf);
+    let rows = await supaGet(cfg, q.url);
+    // Запрошенной локали нет среди колонок доставки (напр. языки блога не совпали с локалями сайта) →
+    // PostgREST вернул 400 (supaGet=null). Откатываемся на базовые колонки (оригинал), а не показываем пусто.
+    if (rows === null && suf) {
+        q = buildUrl("");
+        rows = await supaGet(cfg, q.url);
+    }
     return (rows ?? [])
         .map((r) => ({
         slug: S(r[m.id]),
-        title: S(r[titleCol]),
-        excerpt: excerptCol ? S(r[excerptCol]) : "",
+        title: S(r[q.titleCol]),
+        excerpt: q.excerptCol ? S(r[q.excerptCol]) : "",
         cover: m.image ? r[m.image] ?? null : null,
         date: m.publishedAt ? r[m.publishedAt] ?? null : null,
     }))
@@ -91,11 +101,14 @@ async function fetchPost(cfg, slug, locale) {
     const r = rows && rows[0];
     if (!r)
         return null;
-    const rawBody = S(r[m.body + suf]);
+    // Локаль-колонка пуста/отсутствует → берём базовую (оригинал). Так статья не выходит пустой, если
+    // перевода на запрошенную локаль нет (доставка тоже кладёт оригинал для непереведённых локалей).
+    const val = (colBase) => (suf ? S(r[colBase + suf]) : "") || S(r[colBase]);
+    const rawBody = val(m.body);
     return {
         slug: S(r[m.id]) || slug,
-        title: S(r[m.title + suf]),
-        excerpt: m.excerpt ? S(r[m.excerpt + suf]) : "",
+        title: val(m.title),
+        excerpt: m.excerpt ? val(m.excerpt) : "",
         cover: m.image ? r[m.image] ?? null : null,
         date: m.publishedAt ? r[m.publishedAt] ?? null : null,
         bodyHtml: cfg.format === "minimarkup" ? miniMarkupToHtml(rawBody) : sanitizeDeliveryHtml(rawBody),
@@ -251,17 +264,43 @@ function themeStyle(theme) {
         out["--sa-radius"] = t.radius;
     return out;
 }
-// Список статей блога. Сам тянет конфиг+статьи. Пусто/ошибка → null (ничего не ломаем).
+// Сетка/карточки списка — через класс + медиазапросы (инлайн-стиль их не умеет): 1→2→3→4 колонки.
+// Цвета/рамки/скругления берутся из --sa-* (авто-тема сайта). Наследует шрифт/цвет текста от layout.
+const GRID_CSS = `.sa-blog-wrap{max-width:1120px;margin:0 auto;padding:2rem 1.25rem}
+.sa-blog-h1{font-size:2rem;line-height:1.2;margin:0 0 1.5rem}
+.sa-blog-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
+@media(min-width:560px){.sa-blog-grid{grid-template-columns:repeat(2,1fr)}}
+@media(min-width:880px){.sa-blog-grid{grid-template-columns:repeat(3,1fr)}}
+@media(min-width:1160px){.sa-blog-grid{grid-template-columns:repeat(4,1fr)}}
+.sa-blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--sa-border,#e5e7eb);border-radius:var(--sa-radius,12px);overflow:hidden;background:var(--sa-surface,transparent);transition:transform .15s ease,box-shadow .15s ease}
+.sa-blog-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.08)}
+.sa-blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
+.sa-blog-card .sa-cb{padding:1rem;display:flex;flex-direction:column;gap:.4rem}
+.sa-blog-card h2{font-size:1.1rem;line-height:1.35;margin:0}
+.sa-blog-card p{margin:0;color:var(--sa-muted,#64748b);font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.sa-blog-more{display:flex;justify-content:center;margin-top:2rem}
+.sa-blog-more a{display:inline-block;padding:.7rem 1.6rem;border:1px solid var(--sa-border,#e5e7eb);border-radius:var(--sa-radius,10px);text-decoration:none;color:inherit;font-weight:500}
+.sa-blog-more a:hover{background:var(--sa-th-bg,#f8fafc)}
+.sa-blog-empty{color:var(--sa-muted,#64748b)}`;
+const BLOG_TITLE = { ru: "Блог", uz: "Blog", en: "Blog", ar: "المدونة", tr: "Blog" };
+const MORE_LABEL = { ru: "Показать больше", uz: "Ko‘proq ko‘rsatish", en: "Show more", ar: "عرض المزيد" };
+const EMPTY_LABEL = { ru: "Пока нет статей.", uz: "Hozircha maqolalar yo‘q.", en: "No posts yet.", ar: "لا توجد مقالات بعد." };
+const L = (map, locale, fb) => map[locale] || map[locale?.split("-")[0]] || fb;
+// Список статей блога: H1 + карточки (по 4 в ряд на десктопе) + «Показать больше» (пагинация по 20
+// через ?show=, серверно — без клиентского JS, дружелюбно к SEO). Всегда рендерит H1 (даже пустой блог),
+// чтобы страница не была пустой. perPage — размер «страницы» (дефолт 20), show — сколько показать сейчас.
 async function SeoBlogIndex(props) {
     const cfg = await fetchBlogConfig();
-    if (!cfg)
-        return null;
-    const locale = props.locale ?? firstLocale(cfg);
-    const posts = await fetchPosts(cfg, locale, props.limit ?? 30);
-    if (!posts.length)
-        return null;
+    const locale = props.locale ?? (cfg ? firstLocale(cfg) : "");
+    const title = props.title ?? L(BLOG_TITLE, locale, "Blog");
+    const per = Math.max(1, Math.floor(props.perPage ?? 20));
+    const show = Math.max(per, Math.floor(Number(props.show) || per));
     const basePath = (props.basePath ?? "/blog").replace(/\/+$/, "");
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: 1080, margin: "0 auto", padding: "1.5rem", ...themeStyle(cfg.theme) }, children: [props.title ? (0, jsx_runtime_1.jsx)("h1", { style: { fontSize: "2rem", margin: "0 0 1.5rem" }, children: props.title }) : null, (0, jsx_runtime_1.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1.5rem" }, children: posts.map((p) => ((0, jsx_runtime_1.jsxs)("a", { href: `${basePath}/${p.slug}`, style: { display: "block", textDecoration: "none", color: "inherit", border: "1px solid var(--sa-border, #e5e7eb)", borderRadius: "var(--sa-radius, 12px)", overflow: "hidden", background: "var(--sa-surface, transparent)" }, children: [p.cover ? (0, jsx_runtime_1.jsx)("img", { src: p.cover, alt: p.title, style: { width: "100%", height: 180, objectFit: "cover", display: "block" } }) : null, (0, jsx_runtime_1.jsxs)("div", { style: { padding: "1rem" }, children: [(0, jsx_runtime_1.jsx)("h2", { style: { fontSize: "1.1rem", margin: "0 0 .5rem", lineHeight: 1.3 }, children: p.title }), p.excerpt ? (0, jsx_runtime_1.jsx)("p", { style: { margin: 0, color: "var(--sa-muted, #64748b)", fontSize: ".9rem", lineHeight: 1.5 }, children: p.excerpt }) : null] })] }, p.slug))) })] }));
+    // Тянем show+1, чтобы понять, есть ли ещё (для кнопки «Показать больше»).
+    const posts = cfg ? await fetchPosts(cfg, locale, show + 1) : [];
+    const hasMore = posts.length > show;
+    const visible = posts.slice(0, show);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "sa-blog-wrap", style: themeStyle(cfg?.theme), children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: GRID_CSS } }), (0, jsx_runtime_1.jsx)("h1", { className: "sa-blog-h1", children: title }), visible.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "sa-blog-grid", children: visible.map((p) => ((0, jsx_runtime_1.jsxs)("a", { className: "sa-blog-card", href: `${basePath}/${p.slug}`, children: [p.cover ? (0, jsx_runtime_1.jsx)("img", { src: p.cover, alt: p.title, loading: "lazy" }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "sa-cb", children: [(0, jsx_runtime_1.jsx)("h2", { children: p.title }), p.excerpt ? (0, jsx_runtime_1.jsx)("p", { children: p.excerpt }) : null] })] }, p.slug))) }), hasMore ? ((0, jsx_runtime_1.jsx)("div", { className: "sa-blog-more", children: (0, jsx_runtime_1.jsx)("a", { href: `${basePath}?show=${show + per}`, rel: "nofollow", children: L(MORE_LABEL, locale, "Show more") }) })) : null] })) : ((0, jsx_runtime_1.jsx)("p", { className: "sa-blog-empty", children: L(EMPTY_LABEL, locale, "No posts yet.") }))] }));
 }
 // Одна статья. Принимает пост (из seoBlogPost) — так страница может сделать notFound()/метаданные.
 function SeoBlogArticle({ post, locale }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webnumseoagent/next",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Runtime SEO adapter + installer for Next.js App Router sites (SEO Agent platform)",
   "main": "dist/client.js",
   "types": "dist/client.d.ts",