refactor: centralize section config — remove all hardcoded section lists

- New packages/config/src/sections.ts: SECTIONS, SECTIONS_BY_ID, SECTION_IDS
  (no Node.js built-in imports — safe for client components)
- New package entrypoint: @mcpedia/config/sections (exports only sections.ts)
- Client components import from @mcpedia/config/sections (no node:fs in bundle)
- Server components import from @mcpedia/config (has env/fs, server-only)
- Removed hardcoded SECTIONS/SECTION_LABEL/SECTION_ICON from:
  - [section]/page.tsx (was inline array)
  - [section]/[...slug]/page.tsx (was hardcoded Record maps)
  - Sidebar.tsx (was inline array)
  - layout.tsx (was inline array)
  - page.tsx (was inline array)
  - create/page.tsx (was inline array via SECTIONS import)
- Added @mcpedia/config/sections entrypoint to package.json exports

apps/web/app/[section]/[...slug]/page.tsx

@@ -7,6 +7,7 @@ import Markdown from "@/components/Markdown";
 import DocForm from "@/components/DocForm";
 import TOC from "@/components/TOC";
 import { classifyPath, extractFoldersForSection } from "@mcpedia/core";
+import { SECTIONS_BY_ID } from "@mcpedia/config/sections";
 import type { DocumentMeta } from "@mcpedia/core";
 
 // Render at request time (content in Postgres, not available at build time).
@@ -17,19 +18,22 @@ interface DocPageProps {
   searchParams: Promise<{ edit?: string }>;
 }
 
-const SECTION_LABEL: Record<string, string> = {
-  docs: "Documentation",
-  writeups: "Writeup",
-  research: "Research",
-  notes: "Note",
-};
-
-const SECTION_ICON: Record<string, string> = {
-  docs: "📄",
-  writeups: "📝",
-  research: "🔬",
-  notes: "📌",
-};
+/**
+ * Get section label and icon from the centralized config.
+ */
+function getSectionInfo(section: string) {
+  const info = SECTIONS_BY_ID.get(section);
+  if (!info) {
+    return {
+      label: section.charAt(0).toUpperCase() + section.slice(1),
+      icon: "📄",
+    };
+  }
+  return {
+    label: info.label,
+    icon: info.icon,
+  };
+}
 
 /**
  * Render any extra/custom frontmatter fields as labeled badges.
@@ -167,10 +171,7 @@ function FolderIndexPage({
 
   const folders = [...immediateFolders.entries()].sort(([a], [b]) => a.localeCompare(b));
 
-  const sectionInfo = {
-    icon: SECTION_ICON[section] || "📁",
-    label: SECTION_LABEL[section] || section,
-  };
+  const sectionInfo = getSectionInfo(section);
 
   return (
     <div>
@@ -366,6 +367,8 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
   const related = await getRelated(fullSlug, 5);
   const revisions = await listRevisions(fullSlug, 10);
 
+  const sectionInfo = getSectionInfo(doc.section);
+
   return (
     <article>
       {/* Breadcrumb — dynamic based on the doc's actual path */}
@@ -380,7 +383,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
           const crumbPath = doc.slug.split("/").slice(0, i + 1).join("/");
           const isLast = i === doc.slug.split("/").length - 1;
           const label = i === 0
-            ? SECTION_LABEL[part] || part
+            ? sectionInfo.label
             : part
                 .split(/[-_]/)
                 .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
@@ -408,12 +411,12 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
       <div className="bg-[#0f1011] border border-[#1f2022] rounded-lg p-6 mb-8">
         <div className="flex items-start gap-3 mb-4">
           <span className="text-2xl">
-            {SECTION_ICON[doc.section] || "📄"}
+            {sectionInfo.icon}
           </span>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-2">
               <span className="text-xs font-medium text-[#7170ff] uppercase">
-                {SECTION_LABEL[doc.section] || doc.section}
+                {sectionInfo.label}
               </span>
               <span className="text-xs text-[#62666d]">·</span>
               <span className="text-xs text-[#62666d]">
@@ -475,38 +478,41 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
             Related Documents
           </h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {related.map((r) => (
-              <Link
-                key={r.slug}
-                href={`/${r.slug}`}
-                className="group block bg-[#0f1011] border border-[#1f2022] rounded-lg p-4 hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all duration-200"
-              >
-                <div className="flex items-start gap-2 mb-2">
-                  <span className="text-xl">
-                    {SECTION_ICON[r.section] || "📄"}
-                  </span>
-                  <time className="text-xs text-[#62666d]">
-                    {new Date(r.updatedAt).toLocaleDateString(undefined, {
-                      month: "short",
-                      day: "numeric",
-                    })}
-                  </time>
-                </div>
-                <h3 className="font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-1">
-                  {r.title}
-                </h3>
-                <div className="flex flex-wrap gap-1 mt-2">
-                  {r.tags.slice(0, 3).map((t) => (
-                    <span
-                      key={t}
-                      className="text-xs px-1.5 py-0.5 bg-[#191a1b] border border-[#23252a] rounded text-[#d0d6e0]"
-                    >
-                      #{t}
+            {related.map((r) => {
+              const rInfo = getSectionInfo(r.section);
+              return (
+                <Link
+                  key={r.slug}
+                  href={`/${r.slug}`}
+                  className="group block bg-[#0f1011] border border-[#1f2022] rounded-lg p-4 hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all duration-200"
+                >
+                  <div className="flex items-start gap-2 mb-2">
+                    <span className="text-xl">
+                      {rInfo.icon}
                     </span>
-                  ))}
-                </div>
-              </Link>
-            ))}
+                    <time className="text-xs text-[#62666d]">
+                      {new Date(r.updatedAt).toLocaleDateString(undefined, {
+                        month: "short",
+                        day: "numeric",
+                      })}
+                    </time>
+                  </div>
+                  <h3 className="font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-1">
+                    {r.title}
+                  </h3>
+                  <div className="flex flex-wrap gap-1 mt-2">
+                    {r.tags.slice(0, 3).map((t) => (
+                      <span
+                        key={t}
+                        className="text-xs px-1.5 py-0.5 bg-[#191a1b] border border-[#23252a] rounded text-[#d0d6e0]"
+                      >
+                        #{t}
+                      </span>
+                    ))}
+                  </div>
+                </Link>
+              );
+            })}
           </div>
         </aside>
       )}

apps/web/app/[section]/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { listDocuments } from "@mcpedia/core";
+import { SECTIONS } from "@mcpedia/config/sections";
 
 export const dynamic = "force-dynamic";
 
@@ -12,18 +13,6 @@ interface DocMeta {
   path: string;
 }
 
-const SECTIONS: { id: string; label: string; icon: string; desc: string }[] = [
-  {
-    id: "docs",
-    label: "Documentation",
-    icon: "📄",
-    desc: "Setup guides, API references, and protocol specs.",
-  },
-  { id: "writeups", label: "Writeups", icon: "📝", desc: "Post-mortems, debugging stories, and case studies." },
-  { id: "research", label: "Research", icon: "🔬", desc: "Deep-dive analysis, architecture notes, and experiments." },
-  { id: "notes", label: "Notes", icon: "📌", desc: "Quick references, patterns, and gotchas." },
-];
-
 /**
  * Build a hierarchical folder tree from a flat list of documents.
  * Each node is either a folder (has children) or a leaf doc.
@@ -68,8 +57,6 @@ function buildFolderTree(docs: DocMeta[], section: string): TreeNode[] {
       if (isLeaf) {
         node.doc = doc;
         node.docCount = 1;
-      } else {
-        // This is a folder — count will be accumulated below
       }
       current = node.children;
     }

apps/web/app/components/Sidebar.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { SECTIONS } from "@mcpedia/config/sections";
 
 interface Doc {
   slug: string;
@@ -11,13 +12,6 @@ interface Doc {
   tags: string[];
 }
 
-const SECTIONS = [
-  { id: "docs", label: "Documentation", icon: "📄" },
-  { id: "writeups", label: "Writeups", icon: "📝" },
-  { id: "research", label: "Research", icon: "🔬" },
-  { id: "notes", label: "Notes", icon: "📌" },
-] as const;
-
 /**
  * Build a hierarchical folder tree from flat document slugs.
  * Each node is either a folder (has children) or a leaf doc.
@@ -132,7 +126,7 @@ function renderTreeNode(
       </Link>
       {node.children.length > 0 && (
         <ul className="mt-0.5">
-          {node.children.map((child) => renderTreeNode(child, 0, pathname))}
+          {node.children.map((child) => renderTreeNode(child, depth + 1, pathname))}
         </ul>
       )}
     </li>

apps/web/app/create/page.tsx

@@ -1,33 +1,31 @@
 import { listDocuments, extractFoldersForSection } from "@mcpedia/core";
+import { SECTIONS } from "@mcpedia/config/sections";
+import { WEBHOOK_SECRET } from "@mcpedia/config";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import DocForm from "@/components/DocForm";
-import { WEBHOOK_SECRET } from "@mcpedia/config";
-
-export const dynamic = "force-dynamic";
 
 export default async function CreatePage() {
   const cookieStore = await cookies();
-  const canEdit = cookieStore.get("mcpedia_admin")?.value != null;
-  if (!canEdit) redirect("/login");
+  const isAdmin = cookieStore.get("mcpedia_admin")?.value != null;
+  if (!isAdmin) redirect("/login");
 
-  const allDocs = await listDocuments();
-  const docPaths = allDocs.map((d) => d.path);
-
-  // Build folder suggestions per section using the shared core helper
-  const sections = ["docs", "writeups", "research", "notes"];
-  const foldersBySection: Record<string, string[]> = {};
-  for (const sec of sections) {
-    foldersBySection[sec] = extractFoldersForSection(docPaths, sec);
-  }
+  const all = await listDocuments();
+  const docPaths = all.map((d) => d.path);
 
   return (
     <div>
-      <h1 className="text-3xl font-medium text-[#f7f8f8] mb-6">Create Document</h1>
+      <div className="flex items-center gap-2 mb-6">
+        <span className="text-2xl">✏️</span>
+        <h1 className="text-2xl font-medium text-[#f7f8f8]">Create Document</h1>
+      </div>
+
       <DocForm
         mode="create"
         secret={WEBHOOK_SECRET}
-        existingFolders={foldersBySection}
+        existingFolders={Object.fromEntries(
+          SECTIONS.map((s) => [s.id, extractFoldersForSection(docPaths, s.id)])
+        )}
       />
     </div>
   );

apps/web/app/globals.css

@@ -72,3 +72,17 @@ body {
 .prose tbody tr:nth-child(even) {
   background: rgba(15, 16, 17, 0.5);
 }
+
+/* Inline code in prose */
+.prose code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+
+/* Blockquote styling */
+.prose blockquote {
+  border-left: 2px solid var(--color-border);
+  margin: 1.5em 0;
+  padding: 0.25em 1em;
+  font-style: italic;
+}

apps/web/app/layout.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import "./globals.css";
 import ThemeToggle from "@/components/ThemeToggle";
 import Sidebar from "@/components/Sidebar";
+import { SECTIONS } from "@mcpedia/config/sections";
 
 export const metadata: Metadata = {
   title: "MCPedia — Knowledge base for humans and AI agents",
@@ -10,51 +11,34 @@ export const metadata: Metadata = {
     "A content-first knowledge base. Humans read the Web UI; AI agents use the MCP server. Both share one Core.",
 };
 
-const SECTIONS = [
-  { id: "docs", label: "Documentation", icon: "📄" },
-  { id: "writeups", label: "Writeups", icon: "📝" },
-  { id: "research", label: "Research", icon: "🔬" },
-  { id: "notes", label: "Notes", icon: "📌" },
-] as const;
-
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
     <html lang="en" className="h-full scroll-smooth">
       <body className="min-h-screen bg-[#08090a] text-[#e2e4e7] font-inter">
+        <div hidden>
+          {/* hidden aria-live container for screen readers */}
+          <div id="a11y-live-region" aria-live="polite" aria-atomic="true" />
+        </div>
+
         <header className="sticky top-0 z-20 border-b border-[#1f2022]">
           <div className="mx-auto max-w-7xl px-4 h-14 flex items-center justify-between">
             <Link href="/" className="font-medium text-[#f7f8f8] text-lg">
               MCPedia
             </Link>
             <nav className="flex items-center gap-6 text-sm">
-              <Link
-                href="/docs"
-                className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
-              >
-                Docs
-              </Link>
-              <Link
-                href="/writeups"
-                className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
-              >
-                Writeups
-              </Link>
-              <Link
-                href="/research"
-                className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
-              >
-                Research
-              </Link>
-              <Link
-                href="/notes"
-                className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
-              >
-                Notes
-              </Link>
+              {SECTIONS.map((s) => (
+                <Link
+                  key={s.id}
+                  href={`/${s.id}`}
+                  className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
+                >
+                  {s.label}
+                </Link>
+              ))}
               <Link
                 href="/search"
                 className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
@@ -74,11 +58,9 @@ export default function RootLayout({
 
         <div className="mx-auto max-w-7xl">
           <div className="flex">
-            {/* Sticky sidebar for doc navigation */}
             <aside className="hidden xl:block w-64 shrink-0 border-r border-[#1f2022]">
               <Sidebar />
             </aside>
-
             <main className="flex-1 min-w-0">
               <div className="px-8 py-10 max-w-4xl mx-auto lg:max-w-5xl xl:max-w-6xl">
                 {children}

apps/web/app/page.tsx

@@ -1,21 +1,9 @@
 import Link from "next/link";
 import { listDocuments } from "@mcpedia/core";
-import type { DocSection } from "@mcpedia/core";
+import { SECTIONS } from "@mcpedia/config/sections";
 
 export const dynamic = "force-dynamic";
 
-const SECTIONS: { id: DocSection; label: string; icon: string; desc: string }[] = [
-  {
-    id: "docs",
-    label: "Documentation",
-    icon: "📄",
-    desc: "Setup guides, API references, and protocol specs.",
-  },
-  { id: "writeups", label: "Writeups", icon: "📝", desc: "Post-mortems, debugging stories, and case studies." },
-  { id: "research", label: "Research", icon: "🔬", desc: "Deep-dive analysis, architecture notes, and experiments." },
-  { id: "notes", label: "Notes", icon: "📌", desc: "Quick references, patterns, and gotchas." },
-];
-
 /**
  * Build a hierarchical folder tree from a flat list of document paths.
  * Each tree node is either a folder (has children) or a leaf doc.
@@ -32,21 +20,6 @@ function buildFolderTree(paths: string[], section: string): TreeNode[] {
   const tree: TreeNode[] = [];
   const base = `${section}/`;
 
-  // Build a map of path → title (leaf docs only)
-  // We don't have titles here, so we use the last path segment as display name
-  const pathToTitle = new Map<string, string>();
-  for (const p of paths) {
-    const rel = p.startsWith(base) ? p.slice(base.length) : p;
-    const cleanPath = rel.replace(/\.md$/, "");
-    const parts = cleanPath.split("/");
-    const leafName = parts[parts.length - 1];
-    const title = leafName
-      .split(/[-_]/)
-      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-      .join(" ");
-    pathToTitle.set(cleanPath, title);
-  }
-
   const addPath = (cleanPath: string) => {
     const parts = cleanPath.split("/");
     let current = tree;
@@ -71,9 +44,11 @@ function buildFolderTree(paths: string[], section: string): TreeNode[] {
 
       if (isLeaf) {
         node.isLeaf = true;
-        node.title = pathToTitle.get(cleanPath) ?? part;
+        node.title = part
+          .split(/[-_]/)
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+          .join(" ");
       } else if (!node.title) {
-        // Folder title: capitalize the folder name
         node.title = part
           .split(/[-_]/)
           .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
@@ -126,17 +101,16 @@ interface SectionTreeProps {
   pathname: string;
 }
 
-async function SectionTree({ section, docPaths, pathname }: SectionTreeProps) {
+function SectionTree({ section, docPaths, pathname }: SectionTreeProps) {
   const tree = buildFolderTree(docPaths.filter((p) => p.startsWith(`${section}/`)), section);
-  const sectionInfo = SECTIONS.find((s) => s.id === section)!;
+  const sectionInfo = SECTIONS.find((s) => s.id === section);
+  if (!sectionInfo) return null;
 
   return (
     <div>
       <div className="flex items-center gap-1.5 mb-2">
         <span className="text-xl">{sectionInfo.icon}</span>
-        <h3 className="font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors">
-          {sectionInfo.label}
-        </h3>
+        <h3 className="font-medium text-[#f7f8f8]">{sectionInfo.label}</h3>
       </div>
       {tree.length > 0 ? (
         renderTree(tree, pathname)
@@ -244,38 +218,41 @@ export default async function HomePage() {
             </Link>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {recent.map((d) => (
-              <Link
-                key={d.slug}
-                href={`/${d.slug}`}
-                className="group block bg-[#0f1011] border border-[#1f2022] rounded-lg p-4 hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all duration-200"
-              >
-                <div className="flex items-start justify-between gap-2 mb-2">
-                  <span className="text-xl">
-                    {SECTIONS.find((s) => s.id === d.section)?.icon || "📄"}
-                  </span>
-                  <time className="text-xs text-[#62666d]">
-                    {new Date(d.updatedAt).toLocaleDateString(undefined, {
-                      month: "short",
-                      day: "numeric",
-                    })}
-                  </time>
-                </div>
-                <h3 className="font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1">
-                  {d.title}
-                </h3>
-                <div className="mt-2 flex flex-wrap gap-1">
-                  {d.tags.slice(0, 3).map((t) => (
-                    <span
-                      key={t}
-                      className="text-xs px-1.5 py-0.5 bg-[#191a1b] border border-[#23252a] rounded text-[#d0d6e0]"
-                    >
-                      #{t}
+            {recent.map((d) => {
+              const sInfo = SECTIONS.find((s) => s.id === d.section);
+              return (
+                <Link
+                  key={d.slug}
+                  href={`/${d.slug}`}
+                  className="group block bg-[#0f1011] border border-[#1f2022] rounded-lg p-4 hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all duration-200"
+                >
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <span className="text-xl">
+                      {sInfo?.icon || "📄"}
                     </span>
-                  ))}
-                </div>
-              </Link>
-            ))}
+                    <time className="text-xs text-[#62666d]">
+                      {new Date(d.updatedAt).toLocaleDateString(undefined, {
+                        month: "short",
+                        day: "numeric",
+                      })}
+                    </time>
+                  </div>
+                  <h3 className="font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1">
+                    {d.title}
+                  </h3>
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {d.tags.slice(0, 3).map((t) => (
+                      <span
+                        key={t}
+                        className="text-xs px-1.5 py-0.5 bg-[#191a1b] border border-[#23252a] rounded text-[#d0d6e0]"
+                      >
+                        #{t}
+                      </span>
+                    ))}
+                  </div>
+                </Link>
+              );
+            })}
           </div>
         </section>
       )}