/* global React, window */ // Shared CategoryLP component used by all 6 categories. // Pages pass dept id + per-category motif SVG renderer. const { CATEGORIES_EXT, AUTHORS, ARTICLES, TAGS_EXT } = window.cynixDataExt; const { TAGS_V2 } = window.cynixDataExtV2; const { SharedMasthead, Breadcrumb, Colophon, findAuthor, findCategory } = window.cynixShared; const ALL_TAGS = (() => { const seen = new Set(); return [...TAGS_EXT, ...TAGS_V2].filter((t) => { if (seen.has(t.slug)) return false; seen.add(t.slug); return true; }); })(); // ─────── Per-category hero photos (gpt-image-1 documentary photo) ─────── const HERO_PHOTOS = { server: "hero-server.png", domain: "hero-domain-ssl.png", saas: "hero-saas.png", ec: "hero-ec.png", ai: "hero-ai-tools.png", rsv: "hero-reservation.png", }; // ─────── Per-category SVG motifs ─────── const Motifs = { server: () => ( ), domain: () => ( ), saas: () => ( ), ec: () => ( ), ai: () => ( ), rsv: () => ( ), }; const DEPT_INDEX = (id) => CATEGORIES_EXT.findIndex((c) => c.id === id); const CategoryPage = ({ deptId, deco, quote, articles, pillarOverrides }) => { const CAT = CATEGORIES_EXT.find((c) => c.id === deptId) || CATEGORIES_EXT[0]; const idx = DEPT_INDEX(deptId); const ed = (CAT.chars.length === 2) ? { label: "NAOTO × HARUKA", primary: "naoto-miyake" } : (CAT.chars[0] === "navi" ? { label: "NAOTO", primary: "naoto-miyake" } : { label: "HARUKA", primary: "haruka-hayashi" }); const author = findAuthor(ed.primary); const Motif = Motifs[deptId] || Motifs.server; // 動的 tested: そのカテゴリの記事タイトル「N社比較 / N選」を合算 const TESTED_COUNT = articles.reduce((sum, a) => { const t = (a.title || "") + " " + (a.deck || ""); const m = t.match(/(\d+)\s*(?:社|選|本|つ|個)/); return sum + (m ? parseInt(m[1], 10) : 5); }, 0); // Pillar — fall back to first 3 articles。 cover image (a.cover) を hero に渡して実機 documentary 写真表示 const pillar = pillarOverrides || articles.slice(0, 3).map((a, i) => ({ slug: a.slug, lead: i === 0, title: a.title, deck: a.deck, cat: i === 0 ? "FEATURE" : a.type === "tutorial" ? "TUTORIAL" : a.type === "review" ? "REVIEW" : "GUIDE", page: `p.${a.pageNum || "020"}`, read: `${a.readTime || 10} min`, author: a.author, n: String(i + 1).padStart(2, "0"), img: a.cover, grad: i === 0 ? [CAT.color, CAT.accent, "#0A0A0A"] : i === 1 ? [CAT.accent, CAT.color] : ["#FFB800", "#FF6B2B"], })); return (

{/* Cover */}

DEPARTMENT №{String(idx + 1).padStart(2, "0")} · pp.012—055 · {CAT.count} ARTICLES INDEXED

{CAT.title.split("・")[0]}、
その{deptId === "ai" ? "本物" : deptId === "ec" ? "成長曲線" : deptId === "saas" ? "ROI" : deptId === "rsv" ? "現場" : deptId === "domain" ? "信頼" : "実測値"}。 {CAT.en} · DEPT.{String(idx + 1).padStart(2, "0")}

{CAT.deck}

indexed{CAT.count}

target{CAT.target}

subcat{CAT.subcategories.length}

tested{TESTED_COUNT}

editor{ed.label}

{HERO_PHOTOS[deptId] && (

)}

{deco}

DEPT №
{String(idx + 1).padStart(2, "0")}{CAT.en}
edition

{quote}

— {author.role_jp.toUpperCase()} {author.name_en.toUpperCase()}

{/* Subcategory grid */}

{CAT.subcategories.map((s, i) => ( № {String(i + 1).padStart(2, "0")} / {String(CAT.subcategories.length).padStart(2, "0")}

{s.title}

{s.deck}

{s.count || 5} ARTICLES → ))}

{/* Cross-dept nav */} {/* Pillar */}

編集部の
本命3本。

FEATURED · pp.012—030
UPDATED 2026/04/25
{ed.label}

{pillar.map((p) => { const auth = findAuthor(p.author); const fullArticle = articles.find((a) => a.slug === p.slug); const href = p.href || (fullArticle ? "/" + fullArticle.category + (fullArticle.subcategory ? "/" + fullArticle.subcategory : "") + "/" + fullArticle.slug + "/" : "#"); return (

{p.title

{p.cat} {p.page}

{p.title}

{p.deck}

By {auth.name_jp} {p.read}

); })}

{/* Article list */}

すべての記事。

最新人気編集部選定 A→Z

{articles.map((a, i) => { const auth = findAuthor(a.author); const href = "/" + a.category + (a.subcategory ? "/" + a.subcategory : "") + "/" + a.slug + "/"; return ( {String(i + 1).padStart(3, "0")} {(a.type || "guide").toUpperCase()} {a.title} By {auth.name_jp} · {a.readTime || 10} MIN {a.published} → ); })}

{/* Tag cloud */}

関連タグ。

{ALL_TAGS.filter((t) => !t.parent || t.parent === deptId || (deptId === "server" && ["実機ベンチ", "セルフバック"].includes(t.label))).slice(0, 14).map((t) => ( #{t.label} {t.count} ))}

{/* Newsletter */}

毎週金曜、
{CAT.title.split("・")[0]}の本音を。

編集部 {author.name_jp} が、その週に検証したプロダクトの実測値とサポート応答時間を、生のまま配信。

); }; window.cynixCategoryPage = CategoryPage;