specweave 1.0.263 → 1.0.265

package/dist/src/utils/docs-preview/config-generator.js

@@ -1,6 +1,6 @@
 /**
  * Docusaurus configuration generator
- * Generates docusaurus.config.js with sensible defaults
+ * Generates docusaurus.config.js with professional defaults
  */
 import * as path from 'path';
 import * as fs from '../../utils/fs-native.js';
@@ -8,10 +8,26 @@ import * as fs from '../../utils/fs-native.js';
  * Generate docusaurus.config.js content
  */
 export function generateDocusaurusConfig(config) {
-    const { title, tagline, url, baseUrl, docsPath, theme = 'default' } = config;
+    const { title, tagline, url, baseUrl, docsPath } = config;
+    const projectName = config.projectMetadata?.name || title;
+    // Build Docusaurus exclude patterns from excludeFolders
+    const excludeFolders = config.excludeFolders || [];
+    const excludePatterns = excludeFolders.map(f => `'**/${f.replace(/'/g, "\\'")}/**'`).join(', ');
+    // Generate footer links from detected categories (max 4)
+    const categories = config.projectMetadata?.categories || [];
+    const footerItems = categories.slice(0, 4).map(cat => `              {\n                label: '${cat.label}',\n                to: '/${cat.id}',\n              }`).join(',\n');
+    const footerLinksBlock = footerItems
+        ? `[
+          {
+            title: 'Documentation',
+            items: [
+${footerItems},
+            ],
+          },
+        ]`
+        : `[]`;
     return `// @ts-check
-// This is a Docusaurus site configuration object.
-// Auto-generated by SpecWeave docs-preview plugin
+// Auto-generated documentation site configuration
 // Generated: ${new Date().toISOString()}
 
 import {themes as prismThemes} from 'prism-react-renderer';
@@ -19,19 +35,14 @@ import {themes as prismThemes} from 'prism-react-renderer';
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: '${title}',
-  tagline: '${tagline}',
-  favicon: 'img/favicon.ico',
+  tagline: '${escapeQuotes(tagline)}',
+  favicon: 'img/favicon.svg',
 
   // Production URL
   url: '${url}',
   baseUrl: '${baseUrl}',
 
-  // GitHub Pages deployment config
-  organizationName: 'your-org',
-  projectName: 'your-repo',
-
   onBrokenLinks: 'warn',
-  onBrokenMarkdownLinks: 'warn',
   onBrokenAnchors: 'warn',
 
   // Internationalization
@@ -49,17 +60,14 @@ const config = {
           routeBasePath: '/',
           path: '${docsPath}',
           sidebarPath: './sidebars.js',
-          editUrl: undefined, // Disable "Edit this page" for internal docs
-          // CRITICAL: Override default exclude to include _ folders (_archive, _orphans, etc.)
-          // Docusaurus default excludes: ['**/_*.{js,jsx,ts,tsx,md,mdx}', '**/_*/**', '**/__tests__/**']
-          // We want ALL folders and files visible, so we set exclude to empty array
-          exclude: [],
+          editUrl: undefined,
+          exclude: [${excludePatterns}],
           remarkPlugins: [],
           rehypePlugins: [],
           beforeDefaultRemarkPlugins: [],
           beforeDefaultRehypePlugins: [],
         },
-        blog: false, // Disable blog
+        blog: false,
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -70,43 +78,19 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      // Social card image (optional)
-      image: 'img/docusaurus-social-card.jpg',
-
       navbar: {
-        title: '${title}',
+        title: '${projectName} Docs',
         logo: {
-          alt: '${title} Logo',
+          alt: '${projectName} Logo',
           src: 'img/logo.svg',
         },
-        items: [
-          {
-            type: 'docSidebar',
-            sidebarId: 'docs',
-            position: 'left',
-            label: 'Documentation',
-          },
-        ],
+        items: [],
       },
 
       footer: {
         style: 'dark',
-        links: [
-          {
-            title: 'Documentation',
-            items: [
-              {
-                label: 'Strategy',
-                to: '/strategy',
-              },
-              {
-                label: 'Architecture',
-                to: '/architecture',
-              },
-            ],
-          },
-        ],
-        copyright: \`Copyright © \${new Date().getFullYear()} SpecWeave. Built with Docusaurus.\`,
+        links: ${footerLinksBlock},
+        copyright: \`Copyright \u00a9 \${new Date().getFullYear()} ${escapeQuotes(projectName)}. Built with Docusaurus.\`,
       },
 
       prism: {
@@ -114,13 +98,20 @@ const config = {
         darkTheme: prismThemes.dracula,
         additionalLanguages: ['bash', 'typescript', 'javascript', 'json', 'yaml'],
       },
+
+      colorMode: {
+        defaultMode: 'light',
+        respectPrefersColorScheme: true,
+      },
     }),
 
   // Mermaid diagrams support
-  // Use 'md' format since SpecWeave docs are .md files, not .mdx
   markdown: {
     mermaid: true,
     format: 'md',
+    hooks: {
+      onBrokenMarkdownLinks: 'warn',
+    },
   },
   themes: ['@docusaurus/theme-mermaid'],
 };
@@ -142,7 +133,7 @@ export async function writeDocusaurusConfig(targetDir, config) {
  */
 export function generatePackageJSON(title) {
     return JSON.stringify({
-        name: 'specweave-docs',
+        name: 'docs-site',
         version: '1.0.0',
         description: `${title} - Documentation Site`,
         private: true,
@@ -186,83 +177,340 @@ export async function writePackageJSON(targetDir, title) {
     await fs.writeFile(packagePath, content, 'utf-8');
 }
 /**
- * Generate custom CSS for theme customization
+ * Generate a professional SVG logo from project initials
+ */
+export function generateLogoSVG(initials, primaryColor = '#4f46e5') {
+    const darkerColor = darkenColor(primaryColor, 20);
+    const fontSize = initials.length > 1 ? 76 : 90;
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
+  <defs>
+    <linearGradient id="logo-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:${primaryColor}" />
+      <stop offset="100%" style="stop-color:${darkerColor}" />
+    </linearGradient>
+  </defs>
+  <rect x="8" y="8" width="184" height="184" rx="44" ry="44" fill="url(#logo-bg)" />
+  <text x="100" y="100" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif"
+        font-size="${fontSize}" font-weight="700" fill="white"
+        text-anchor="middle" dominant-baseline="central" letter-spacing="-2">${initials}</text>
+</svg>`;
+}
+/**
+ * Generate a favicon SVG (simplified, optimized for small sizes)
+ */
+export function generateFaviconSVG(initials, primaryColor = '#4f46e5') {
+    const firstChar = initials.charAt(0);
+    const darkerColor = darkenColor(primaryColor, 20);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <defs>
+    <linearGradient id="fav-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:${primaryColor}" />
+      <stop offset="100%" style="stop-color:${darkerColor}" />
+    </linearGradient>
+  </defs>
+  <rect x="1" y="1" width="30" height="30" rx="7" ry="7" fill="url(#fav-bg)" />
+  <text x="16" y="16" font-family="system-ui, sans-serif"
+        font-size="18" font-weight="700" fill="white"
+        text-anchor="middle" dominant-baseline="central">${firstChar}</text>
+</svg>`;
+}
+/**
+ * Generate custom CSS for professional theme
  */
 export function generateCustomCSS(theme) {
     const themes = {
-        default: `
+        default: {
+            light: `
+  --ifm-color-primary: #4f46e5;
+  --ifm-color-primary-dark: #4338ca;
+  --ifm-color-primary-darker: #3730a3;
+  --ifm-color-primary-darkest: #312e81;
+  --ifm-color-primary-light: #6366f1;
+  --ifm-color-primary-lighter: #818cf8;
+  --ifm-color-primary-lightest: #a5b4fc;`,
+            dark: `
+  --ifm-color-primary: #818cf8;
+  --ifm-color-primary-dark: #6366f1;
+  --ifm-color-primary-darker: #4f46e5;
+  --ifm-color-primary-darkest: #4338ca;
+  --ifm-color-primary-light: #a5b4fc;
+  --ifm-color-primary-lighter: #c7d2fe;
+  --ifm-color-primary-lightest: #e0e7ff;`,
+        },
+        classic: {
+            light: `
+  --ifm-color-primary: #2563eb;
+  --ifm-color-primary-dark: #1d4ed8;
+  --ifm-color-primary-darker: #1e40af;
+  --ifm-color-primary-darkest: #1e3a8a;
+  --ifm-color-primary-light: #3b82f6;
+  --ifm-color-primary-lighter: #60a5fa;
+  --ifm-color-primary-lightest: #93bbfd;`,
+            dark: `
+  --ifm-color-primary: #60a5fa;
+  --ifm-color-primary-dark: #3b82f6;
+  --ifm-color-primary-darker: #2563eb;
+  --ifm-color-primary-darkest: #1d4ed8;
+  --ifm-color-primary-light: #93bbfd;
+  --ifm-color-primary-lighter: #bfdbfe;
+  --ifm-color-primary-lightest: #dbeafe;`,
+        },
+        dark: {
+            light: `
+  --ifm-color-primary: #6366f1;
+  --ifm-color-primary-dark: #4f46e5;
+  --ifm-color-primary-darker: #4338ca;
+  --ifm-color-primary-darkest: #3730a3;
+  --ifm-color-primary-light: #818cf8;
+  --ifm-color-primary-lighter: #a5b4fc;
+  --ifm-color-primary-lightest: #c7d2fe;`,
+            dark: `
+  --ifm-color-primary: #a5b4fc;
+  --ifm-color-primary-dark: #818cf8;
+  --ifm-color-primary-darker: #6366f1;
+  --ifm-color-primary-darkest: #4f46e5;
+  --ifm-color-primary-light: #c7d2fe;
+  --ifm-color-primary-lighter: #e0e7ff;
+  --ifm-color-primary-lightest: #eef2ff;`,
+        },
+    };
+    const selected = themes[theme] || themes.default;
+    return `/**
+ * Professional documentation theme
+ * Auto-generated — customize as needed
+ */
+
+/* ===== Color Palette ===== */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+${selected.light}
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-heading-font-weight: 600;
+  --ifm-font-size-base: 16px;
+  --ifm-line-height-base: 1.65;
+  --docusaurus-highlighted-code-line-bg: rgba(79, 70, 229, 0.1);
 }
 
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
-`,
-        classic: `
-:root {
-  --ifm-color-primary: #0066cc;
-  --ifm-color-primary-dark: #005cb8;
-  --ifm-color-primary-darker: #0056ad;
-  --ifm-color-primary-darkest: #00478f;
-  --ifm-color-primary-light: #0070e0;
-  --ifm-color-primary-lighter: #0076eb;
-  --ifm-color-primary-lightest: #1a85ff;
-  --ifm-code-font-size: 95%;
+${selected.dark}
+  --docusaurus-highlighted-code-line-bg: rgba(99, 102, 241, 0.15);
 }
-`,
-        dark: `
-:root {
-  --ifm-color-primary: #1e1e1e;
-  --ifm-background-color: #0d1117;
-  --ifm-code-font-size: 95%;
+
+/* ===== Global ===== */
+* {
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-[data-theme='dark'] {
-  --ifm-color-primary: #58a6ff;
-  --ifm-background-color: #0d1117;
+html {
+  scroll-behavior: smooth;
 }
-`
-    };
-    return `/**
- * Custom CSS for SpecWeave documentation
- * Theme: ${theme}
- * Auto-generated by SpecWeave docs-preview plugin
- */
 
-${themes[theme]}
+/* ===== Navbar ===== */
+.navbar {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  backdrop-filter: blur(8px);
+}
+
+.navbar__title {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
 
-/* Custom styles */
+.navbar__logo img {
+  border-radius: 8px;
+}
+
+/* ===== Sidebar ===== */
+.theme-doc-sidebar-container {
+  border-right: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.menu__link {
+  border-radius: 6px;
+  font-size: 0.9rem;
+  padding: 0.4rem 0.75rem;
+  transition: all 0.15s ease;
+}
+
+.menu__link:hover {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.menu__link--active {
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  background: var(--ifm-color-primary-lightest);
+}
+
+[data-theme='dark'] .menu__link--active {
+  background: rgba(99, 102, 241, 0.12);
+}
+
+.menu__list-item-collapsible .menu__caret::before {
+  filter: var(--ifm-menu-color-active);
+}
+
+/* ===== Content ===== */
 .markdown {
   --ifm-h1-font-size: 2rem;
   --ifm-h2-font-size: 1.5rem;
   --ifm-h3-font-size: 1.25rem;
 }
 
-/* Code blocks */
+.markdown h1, .markdown h2, .markdown h3 {
+  letter-spacing: -0.02em;
+}
+
+.markdown h2 {
+  margin-top: 2.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* ===== Links ===== */
+.markdown a {
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s ease;
+}
+
+.markdown a:hover {
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+/* ===== Code Blocks ===== */
 .prism-code {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
+  border-radius: 8px;
+}
+
+pre {
+  border-radius: 8px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme='dark'] pre {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+code {
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+/* ===== Tables ===== */
+table {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+table thead tr {
+  background: var(--ifm-color-emphasis-100);
+}
+
+table thead th {
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.75rem 1rem;
+  border-bottom: 2px solid var(--ifm-color-emphasis-200);
+}
+
+table tbody td {
+  padding: 0.65rem 1rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+}
+
+table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+table tbody tr:hover {
+  background: var(--ifm-color-emphasis-50, rgba(0, 0, 0, 0.02));
+}
+
+/* ===== Blockquotes ===== */
+blockquote {
+  border-left: 4px solid var(--ifm-color-primary);
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 0 8px 8px 0;
+  padding: 1rem 1.25rem;
+  font-style: normal;
+}
+
+/* ===== Admonitions ===== */
+.admonition {
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+/* ===== Cards (prev/next navigation) ===== */
+.pagination-nav__link {
+  border-radius: 10px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all 0.2s ease;
+}
+
+.pagination-nav__link:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.1);
 }
 
-/* Mermaid diagrams */
+/* ===== Mermaid ===== */
 .docusaurus-mermaid-container {
   text-align: center;
   margin: 2rem 0;
+  padding: 1rem;
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 8px;
+}
+
+/* ===== Table of Contents ===== */
+.table-of-contents__link--active {
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+}
+
+/* ===== Footer ===== */
+.footer--dark {
+  background: #1e1e2e;
+}
+
+[data-theme='dark'] .footer--dark {
+  background: #111118;
+}
+
+/* ===== Scrollbar ===== */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ifm-color-emphasis-300);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ifm-color-emphasis-500);
+}
+
+/* ===== Responsive ===== */
+@media screen and (max-width: 996px) {
+  .markdown h2 {
+    margin-top: 2rem;
+  }
 }
 `;
 }
@@ -276,9 +524,21 @@ export async function writeCustomCSS(targetDir, theme) {
     await fs.writeFile(cssPath, content, 'utf-8');
 }
 /**
- * Generate index page (landing page)
+ * Generate index page (landing page) with dynamic categories
  */
-export function generateIndexPage(title, tagline) {
+export function generateIndexPage(title, tagline, categories, projectName) {
+    const firstCategoryLink = categories.length > 0 ? `/${categories[0].id}` : '/';
+    // Build category cards JSX
+    const categoryCards = categories.map(cat => {
+        const escapedDesc = escapeQuotes(cat.description);
+        return `          <a href="${cat.id}" className={styles.categoryCard} key="${cat.id}">
+            <span className={styles.categoryIcon}>${cat.icon}</span>
+            <h3>${cat.label}</h3>
+            <p>${escapedDesc}</p>
+            <span className={styles.docCount}>${cat.docCount} document${cat.docCount !== 1 ? 's' : ''}</span>
+          </a>`;
+    }).join('\n');
+    const brandName = projectName ? escapeQuotes(projectName) : '';
     return `import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
@@ -289,15 +549,15 @@ import styles from './index.module.css';
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <h1 className={styles.heroTitle}>${brandName ? `<span className={styles.brandName}>${brandName}</span> Documentation` : '{siteConfig.title}'}</h1>
+        <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
-            className="button button--secondary button--lg"
-            to="/strategy">
-            View Documentation
+            className="button button--primary button--lg"
+            to="${firstCategoryLink}">
+            Browse Documentation
           </Link>
         </div>
       </div>
@@ -309,31 +569,14 @@ export default function Home() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={\`\${siteConfig.title}\`}
-      description="${tagline}">
+      title={siteConfig.title}
+      description="${escapeQuotes(tagline)}">
       <HomepageHeader />
       <main>
-        <div className="container" style={{marginTop: '2rem', marginBottom: '2rem'}}>
-          <div className="row">
-            <div className="col col--12">
-              <h2>Welcome to ${title}</h2>
-              <p>
-                This is your SpecWeave documentation site, automatically generated from your
-                <code>.specweave/docs/</code> folder.
-              </p>
-              <p>
-                Use the sidebar to navigate through your documentation:
-              </p>
-              <ul>
-                <li><strong>Strategy</strong>: Business rationale, PRDs, OKRs</li>
-                <li><strong>Specs</strong>: Feature specifications and user stories</li>
-                <li><strong>Architecture</strong>: Technical design, ADRs, diagrams</li>
-                <li><strong>Delivery</strong>: Build & release processes</li>
-                <li><strong>Operations</strong>: Runbooks, SLOs, incidents</li>
-                <li><strong>Governance</strong>: Policies, security, compliance</li>
-              </ul>
-            </div>
-          </div>
+        <div className="container" style={{padding: '3rem 0'}}>
+${categories.length > 0 ? `          <div className={styles.categoryGrid}>
+${categoryCards}
+          </div>` : ''}
         </div>
       </main>
     </Layout>
@@ -344,9 +587,9 @@ export default function Home() {
 /**
  * Write index page to file
  */
-export async function writeIndexPage(targetDir, title, tagline) {
+export async function writeIndexPage(targetDir, title, tagline, categories = [], projectName) {
     const indexPath = path.join(targetDir, 'src', 'pages', 'index.js');
-    const content = generateIndexPage(title, tagline);
+    const content = generateIndexPage(title, tagline, categories, projectName);
     await fs.ensureDir(path.dirname(indexPath));
     await fs.writeFile(indexPath, content, 'utf-8');
 }
@@ -355,16 +598,38 @@ export async function writeIndexPage(targetDir, title, tagline) {
  */
 export function generateIndexModuleCSS() {
     return `.heroBanner {
-  padding: 4rem 0;
+  padding: 5rem 0 4rem;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
+  color: white;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+[data-theme='dark'] .heroBanner {
+  background: linear-gradient(135deg, #312e81 0%, #3730a3 50%, #4338ca 100%);
+}
+
+.heroTitle {
+  font-size: 3rem;
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  margin-bottom: 0.75rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.brandName {
+  font-weight: 800;
+  color: white;
+  letter-spacing: -0.04em;
+}
+
+.heroSubtitle {
+  font-size: 1.25rem;
+  opacity: 0.9;
+  max-width: 600px;
+  margin: 0 auto 1.5rem;
+  color: white;
 }
 
 .buttons {
@@ -374,6 +639,114 @@ export function generateIndexModuleCSS() {
   gap: 1rem;
   margin-top: 2rem;
 }
+
+.buttons a {
+  background: white;
+  color: #4f46e5;
+  border: none;
+  font-weight: 600;
+  padding: 0.75rem 2rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.buttons a:hover {
+  background: #f8fafc;
+  color: #4338ca;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+  text-decoration: none;
+}
+
+/* Category Grid */
+.categoryGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+  padding: 1rem 0 2rem;
+}
+
+.categoryCard {
+  background: var(--ifm-card-background-color, white);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  padding: 1.75rem;
+  transition: all 0.2s ease;
+  text-decoration: none !important;
+  color: inherit;
+  display: block;
+  cursor: pointer;
+}
+
+.categoryCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+  border-color: var(--ifm-color-primary);
+  text-decoration: none !important;
+  color: inherit;
+}
+
+[data-theme='dark'] .categoryCard:hover {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+}
+
+.categoryCard h3 {
+  margin: 0.5rem 0 0.25rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.categoryCard p {
+  margin: 0 0 0.75rem;
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.5;
+}
+
+.categoryIcon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 0.25rem;
+}
+
+.docCount {
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-500);
+  font-weight: 500;
+}
+
+/* Responsive */
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 3rem 1.5rem;
+  }
+
+  .heroTitle {
+    font-size: 2.25rem;
+  }
+
+  .categoryGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .heroTitle {
+    font-size: 1.75rem;
+  }
+
+  .brandName {
+    display: block;
+    font-size: 2rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .heroSubtitle {
+    font-size: 1rem;
+  }
+}
 `;
 }
 /**
@@ -385,4 +758,20 @@ export async function writeIndexModuleCSS(targetDir) {
     await fs.ensureDir(path.dirname(cssPath));
     await fs.writeFile(cssPath, content, 'utf-8');
 }
+/**
+ * Escape single quotes for template string safety
+ */
+function escapeQuotes(str) {
+    return str.replace(/'/g, "\\'").replace(/\n/g, ' ');
+}
+/**
+ * Darken a hex color by a percentage
+ */
+function darkenColor(hex, percent) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, (num >> 16) - Math.round(2.55 * percent));
+    const g = Math.max(0, ((num >> 8) & 0x00ff) - Math.round(2.55 * percent));
+    const b = Math.max(0, (num & 0x0000ff) - Math.round(2.55 * percent));
+    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+}
 //# sourceMappingURL=config-generator.js.map