@knowcode/doc-builder 1.4.11 → 1.4.14

package/CHANGELOG.md

@@ -5,6 +5,42 @@ All notable changes to @knowcode/doc-builder will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.14] - 2025-07-21
+
+### Fixed
+- Fixed subdirectories not showing on initial page load
+- Folders now expand by default when viewing index.html or root README
+- Improved navigation visibility for better user experience
+
+### Background
+- Previously, folders only expanded if they contained the active page
+- This caused subdirectories to be hidden on initial page load
+- Now folders expand automatically for better content discovery
+
+## [1.4.13] - 2025-07-21
+
+### Added
+- Created comprehensive DOCUMENT-STANDARDS.md defining documentation conventions
+- Added documentation index file for better navigation
+- Established docs/guides/ directory structure for organized documentation
+
+### Documentation
+- Document standards cover naming conventions, content guidelines, and quality standards
+- Includes templates for different document types (features, technical guides, API docs)
+- Defines metadata requirements and verification indicators (✅/❓)
+- Establishes changelog maintenance practices
+
+## [1.4.12] - 2025-07-21
+
+### Fixed
+- Fixed h1 title alignment to extend full width above the navigation menu
+- Added negative margins to h1 to counteract content padding
+- Adjusted mobile styles to maintain proper alignment on smaller screens
+
+### Background
+- The h1 title was appearing offset from the left due to content area padding
+- Now h1 elements extend to the full width of the content area for better visual hierarchy
+
 ## [1.4.11] - 2025-07-21
 
 ### Added

package/assets/css/notion-style.css

@@ -158,6 +158,9 @@ h1 {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   margin-bottom: var(--space-6);
+  margin-left: calc(-1 * var(--space-8));
+  margin-right: calc(-1 * var(--space-8));
+  padding: 0 var(--space-8);
 }
 
 h2 {
@@ -1620,6 +1623,12 @@ tr:hover {
     max-width: none;
   }
   
+  h1 {
+    margin-left: calc(-1 * var(--space-4));
+    margin-right: calc(-1 * var(--space-4));
+    padding: 0 var(--space-4);
+  }
+  
   .preview-banner {
     position: relative;
     top: 0;

package/html/README.html

@@ -29,7 +29,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.4.10">Last updated: Jul 21, 2025, 12:11 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.4.13">Last updated: Jul 21, 2025, 12:43 PM UTC</span>
                 </div>
                 
                 
@@ -79,7 +79,14 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item active" data-tooltip="&gt; Transform your markdown documentation into beautiful, searchable websites with Notion-inspired styling Create stunning documentation sites in minute..."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 10:00 UTC **Status**: Complete **Verified**: ✅ This guide demonstrates an efficient workflow for using Claude Code with a re..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a></div></div>
+        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 10:00 UTC **Status**: Complete **Verified**: ✅ This guide demonstrates an efficient workflow for using Claude Code with a re..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
+        <a href="/documentation-index.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This directory contains additional documentation for the @knowcode/doc-builde..."><i class="fas fa-file-alt"></i> Documentation Index</a></div></div>
+      <div class="nav-section" data-level="1">
+        <a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
+          <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
+        </a>
+        <div class="nav-content" id="nav-guides-1">
+        <a href="/guides/document-standards.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This document defines the documentation standards and conventions for the @kn..."><i class="fas fa-file-alt"></i> Document Standards</a></div></div>
             </nav>
             <div class="resize-handle"></div>
         </aside>

package/html/claude-workflow-guide.html

@@ -29,7 +29,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.4.10">Last updated: Jul 21, 2025, 12:11 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.4.13">Last updated: Jul 21, 2025, 12:43 PM UTC</span>
                 </div>
                 
                 
@@ -79,7 +79,14 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item" data-tooltip="&gt; Transform your markdown documentation into beautiful, searchable websites with Notion-inspired styling Create stunning documentation sites in minute..."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item active" data-tooltip="**Generated**: 2025-07-21 10:00 UTC **Status**: Complete **Verified**: ✅ This guide demonstrates an efficient workflow for using Claude Code with a re..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a></div></div>
+        <a href="/claude-workflow-guide.html" class="nav-item active" data-tooltip="**Generated**: 2025-07-21 10:00 UTC **Status**: Complete **Verified**: ✅ This guide demonstrates an efficient workflow for using Claude Code with a re..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
+        <a href="/documentation-index.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This directory contains additional documentation for the @knowcode/doc-builde..."><i class="fas fa-file-alt"></i> Documentation Index</a></div></div>
+      <div class="nav-section" data-level="1">
+        <a class="nav-title collapsible" href="#" data-target="nav-guides-1" >
+          <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
+        </a>
+        <div class="nav-content collapsed" id="nav-guides-1">
+        <a href="/guides/document-standards.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This document defines the documentation standards and conventions for the @kn..."><i class="fas fa-file-alt"></i> Document Standards</a></div></div>
             </nav>
             <div class="resize-handle"></div>
         </aside>

package/html/css/notion-style.css

@@ -158,6 +158,9 @@ h1 {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   margin-bottom: var(--space-6);
+  margin-left: calc(-1 * var(--space-8));
+  margin-right: calc(-1 * var(--space-8));
+  padding: 0 var(--space-8);
 }
 
 h2 {
@@ -1620,6 +1623,12 @@ tr:hover {
     max-width: none;
   }
   
+  h1 {
+    margin-left: calc(-1 * var(--space-4));
+    margin-right: calc(-1 * var(--space-4));
+    padding: 0 var(--space-4);
+  }
+  
   .preview-banner {
     position: relative;
     top: 0;

package/html/documentation-index.html

@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Documentation site built with @knowcode/doc-builder">
+    <title>Documentation Index - Documentation</title>
+    
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Mermaid -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
+    
+    <!-- Styles -->
+    <link rel="stylesheet" href="/css/notion-style.css">
+    
+    <!-- Favicon -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-content">
+            <a href="/index.html" class="logo">Documentation</a>
+            
+            <div class="header-actions">
+                <div class="deployment-info">
+                    <span class="deployment-date" title="Built with doc-builder v1.4.13">Last updated: Jul 21, 2025, 12:43 PM UTC</span>
+                </div>
+                
+                
+                
+                <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+                    <i class="fas fa-moon"></i>
+                </button>
+                
+                <button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    
+    <!-- Preview Banner -->
+    <div id="preview-banner" class="preview-banner">
+        <div class="banner-content">
+            <i class="fas fa-exclamation-triangle banner-icon"></i>
+            <span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
+            <button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </div>
+    
+    <!-- Breadcrumbs -->
+    <nav class="breadcrumbs" id="breadcrumbs">
+        <!-- Breadcrumbs will be generated by JavaScript -->
+    </nav>
+    
+    <!-- Main Content -->
+    <div class="main-wrapper">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <div class="filter-box">
+                    <input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
+                    <i class="fas fa-search filter-icon"></i>
+                </div>
+            </div>
+            <nav class="navigation">
+                
+      <div class="nav-section" data-level="0">
+        <a class="nav-title expanded" href="/README.html"  >
+          <i class="fas fa-home"></i> Documentation
+        </a>
+        <div class="nav-content" >
+        <a href="/README.html" class="nav-item" data-tooltip="&gt; Transform your markdown documentation into beautiful, searchable websites with Notion-inspired styling Create stunning documentation sites in minute..."><i class="fas fa-file-alt"></i> Overview</a>
+        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 10:00 UTC **Status**: Complete **Verified**: ✅ This guide demonstrates an efficient workflow for using Claude Code with a re..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
+        <a href="/documentation-index.html" class="nav-item active" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This directory contains additional documentation for the @knowcode/doc-builde..."><i class="fas fa-file-alt"></i> Documentation Index</a></div></div>
+      <div class="nav-section" data-level="1">
+        <a class="nav-title collapsible" href="#" data-target="nav-guides-1" >
+          <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
+        </a>
+        <div class="nav-content collapsed" id="nav-guides-1">
+        <a href="/guides/document-standards.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This document defines the documentation standards and conventions for the @kn..."><i class="fas fa-file-alt"></i> Document Standards</a></div></div>
+            </nav>
+            <div class="resize-handle"></div>
+        </aside>
+        
+        <!-- Content Area -->
+        <main class="content">
+            <div class="content-inner">
+                <h1>Documentation Index</h1>
+<p><strong>Generated</strong>: 2025-07-21 18:00 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: ✅</p>
+<h2>Overview</h2>
+<p>This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose.</p>
+<h2>Directory Structure</h2>
+<pre><code>docs/
+├── README.md                    # NPM readme (auto-generated)
+├── documentation-index.md       # This file - documentation map
+├── claude-workflow-guide.md     # AI workflow guide
+└── guides/                      # How-to guides and standards
+    └── DOCUMENT-STANDARDS.md    # Documentation standards
+</code></pre>
+<h2>Documentation Categories</h2>
+<h3>📚 Core Documentation</h3>
+<table>
+<thead>
+<tr>
+<th>Document</th>
+<th>Location</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Project Overview</td>
+<td><a href="../README.md">../README.md</a></td>
+<td>Main project documentation</td>
+</tr>
+<tr>
+<td>Change Log</td>
+<td><a href="../CHANGELOG.md">../CHANGELOG.md</a></td>
+<td>Version history and updates</td>
+</tr>
+<tr>
+<td>AI Assistant Guide</td>
+<td><a href="../CLAUDE.md">../CLAUDE.md</a></td>
+<td>Claude Code integration guide</td>
+</tr>
+</tbody></table>
+<h3>📖 Guides</h3>
+<table>
+<thead>
+<tr>
+<th>Document</th>
+<th>Location</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Document Standards</td>
+<td><a href="./guides/DOCUMENT-STANDARDS.md">guides/DOCUMENT-STANDARDS.md</a></td>
+<td>How to write docs for this project</td>
+</tr>
+<tr>
+<td>Claude Workflow</td>
+<td><a href="./claude-workflow-guide.md">claude-workflow-guide.md</a></td>
+<td>Using Claude with doc-builder</td>
+</tr>
+</tbody></table>
+<h3>🔜 Coming Soon</h3>
+<ul>
+<li><strong>API Reference</strong> - Detailed API documentation</li>
+<li><strong>Architecture Guide</strong> - System design and components</li>
+<li><strong>Troubleshooting</strong> - Common issues and solutions</li>
+<li><strong>Plugin Development</strong> - Extending doc-builder</li>
+<li><strong>Migration Guide</strong> - Upgrading from older versions</li>
+</ul>
+<h2>Quick Start Guides</h2>
+<h3>For Users</h3>
+<ol>
+<li><strong>Installation</strong>: See <a href="../README.md#quick-start">README.md</a></li>
+<li><strong>Configuration</strong>: Check <a href="../CLAUDE.md#configuration">CLAUDE.md</a></li>
+<li><strong>Deployment</strong>: Follow <a href="../README.md#deployment">README.md</a></li>
+</ol>
+<h3>For Contributors</h3>
+<ol>
+<li><strong>Standards</strong>: Read <a href="./guides/DOCUMENT-STANDARDS.md">DOCUMENT-STANDARDS.md</a></li>
+<li><strong>Development</strong>: See <a href="../CLAUDE.md#development-guidelines">CLAUDE.md</a></li>
+<li><strong>Testing</strong>: Check <a href="../CLAUDE.md#testing-changes">CLAUDE.md</a></li>
+</ol>
+<h2>Contributing Documentation</h2>
+<p>When adding new documentation:</p>
+<ol>
+<li><strong>Follow Standards</strong>: Use <a href="./guides/DOCUMENT-STANDARDS.md">DOCUMENT-STANDARDS.md</a></li>
+<li><strong>Choose Location</strong>: Place in appropriate subdirectory</li>
+<li><strong>Update Index</strong>: Add to this file</li>
+<li><strong>Include Metadata</strong>: Add headers as per standards</li>
+<li><strong>Test Examples</strong>: Verify all code snippets work</li>
+</ol>
+<h3>Documentation Template</h3>
+<pre><code class="language-markdown"># Document Title
+
+**Generated**: YYYY-MM-DD HH:MM UTC  
+**Status**: Draft/Complete  
+**Verified**: ✅/❓
+
+## Overview
+
+Brief description...
+
+## Main Content
+
+Detailed information...
+
+## Document History
+
+| Date | Version | Author | Changes |
+|------|---------|--------|---------|
+| YYYY-MM-DD | 1.0 | Name | Initial creation |
+</code></pre>
+<h2>Maintenance</h2>
+<p>Documentation should be reviewed:</p>
+<ul>
+<li>With each minor version release</li>
+<li>When features change</li>
+<li>Quarterly for accuracy</li>
+<li>When issues are reported</li>
+</ul>
+<hr>
+<h2>Document History</h2>
+<table>
+<thead>
+<tr>
+<th>Date</th>
+<th>Version</th>
+<th>Author</th>
+<th>Changes</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>2025-07-21</td>
+<td>1.0</td>
+<td>System</td>
+<td>Initial documentation index</td>
+</tr>
+</tbody></table>
+
+            </div>
+        </main>
+    </div>
+    
+    <!-- Scripts -->
+    <script src="/js/main.js"></script>
+    
+</body>
+</html>

package/html/guides/document-standards.html

@@ -0,0 +1,517 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Documentation site built with @knowcode/doc-builder">
+    <title>Document Standards for @knowcode/doc-builder - Documentation</title>
+    
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Mermaid -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
+    
+    <!-- Styles -->
+    <link rel="stylesheet" href="/css/notion-style.css">
+    
+    <!-- Favicon -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-content">
+            <a href="/index.html" class="logo">Documentation</a>
+            
+            <div class="header-actions">
+                <div class="deployment-info">
+                    <span class="deployment-date" title="Built with doc-builder v1.4.13">Last updated: Jul 21, 2025, 12:43 PM UTC</span>
+                </div>
+                
+                
+                
+                <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+                    <i class="fas fa-moon"></i>
+                </button>
+                
+                <button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    
+    <!-- Preview Banner -->
+    <div id="preview-banner" class="preview-banner">
+        <div class="banner-content">
+            <i class="fas fa-exclamation-triangle banner-icon"></i>
+            <span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
+            <button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </div>
+    
+    <!-- Breadcrumbs -->
+    <nav class="breadcrumbs" id="breadcrumbs">
+        <!-- Breadcrumbs will be generated by JavaScript -->
+    </nav>
+    
+    <!-- Main Content -->
+    <div class="main-wrapper">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <div class="filter-box">
+                    <input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
+                    <i class="fas fa-search filter-icon"></i>
+                </div>
+            </div>
+            <nav class="navigation">
+                
+      <div class="nav-section" data-level="0">
+        <a class="nav-title" href="/README.html"  >
+          <i class="fas fa-home"></i> Documentation
+        </a>
+        <div class="nav-content" >
+        <a href="/README.html" class="nav-item" data-tooltip="&gt; Transform your markdown documentation into beautiful, searchable websites with Notion-inspired styling Create stunning documentation sites in minute..."><i class="fas fa-file-alt"></i> Overview</a>
+        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 10:00 UTC **Status**: Complete **Verified**: ✅ This guide demonstrates an efficient workflow for using Claude Code with a re..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
+        <a href="/documentation-index.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This directory contains additional documentation for the @knowcode/doc-builde..."><i class="fas fa-file-alt"></i> Documentation Index</a></div></div>
+      <div class="nav-section" data-level="1">
+        <a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
+          <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
+        </a>
+        <div class="nav-content" id="nav-guides-1">
+        <a href="/guides/document-standards.html" class="nav-item active" data-tooltip="**Generated**: 2025-07-21 18:00 UTC **Status**: Complete **Verified**: ✅ This document defines the documentation standards and conventions for the @kn..."><i class="fas fa-file-alt"></i> Document Standards</a></div></div>
+            </nav>
+            <div class="resize-handle"></div>
+        </aside>
+        
+        <!-- Content Area -->
+        <main class="content">
+            <div class="content-inner">
+                <h1>Document Standards for @knowcode/doc-builder</h1>
+<p><strong>Generated</strong>: 2025-07-21 18:00 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: ✅</p>
+<h2>Overview</h2>
+<p>This document defines the documentation standards and conventions for the @knowcode/doc-builder project. All documentation created for or by this project should follow these guidelines to ensure consistency, clarity, and maintainability.</p>
+<h2>Document Structure Standards</h2>
+<h3>Document Header Format</h3>
+<p>Every document MUST include the following metadata at the top:</p>
+<pre><code class="language-markdown"># Document Title
+
+**Generated**: YYYY-MM-DD HH:MM UTC
+**Status**: Draft/In Progress/Complete  
+**Verified**: ✅ (for verified information) / ❓ (for speculated information)
+
+## Overview
+
+Brief description of the document&#39;s contents and purpose.
+</code></pre>
+<h3>Section Organization</h3>
+<ol>
+<li><strong>Title</strong> (H1) - Single, descriptive title</li>
+<li><strong>Metadata</strong> - Generation date, status, verification</li>
+<li><strong>Overview</strong> - Brief summary of document purpose</li>
+<li><strong>Main Content</strong> - Organized with clear headings</li>
+<li><strong>Document History</strong> - Track significant changes</li>
+</ol>
+<h2>Naming Conventions</h2>
+<h3>Document File Names</h3>
+<p>Use lowercase with hyphens, following these patterns:</p>
+<ul>
+<li><strong>Feature Documentation</strong>: <code>feature-{name}-guide.md</code></li>
+<li><strong>API Documentation</strong>: <code>api-{endpoint}-reference.md</code></li>
+<li><strong>Technical Guides</strong>: <code>{component}-{topic}-guide.md</code></li>
+<li><strong>Architecture Documents</strong>: <code>architecture-{system}-overview.md</code></li>
+<li><strong>Implementation Plans</strong>: <code>plan-{feature}-implementation.md</code></li>
+<li><strong>Analysis Documents</strong>: <code>analysis-{topic}-{specifics}.md</code></li>
+<li><strong>Troubleshooting Guides</strong>: <code>troubleshoot-{issue}-guide.md</code></li>
+<li><strong>Change Logs</strong>: <code>CHANGELOG.md</code> (always uppercase)</li>
+</ul>
+<h3>Special Files</h3>
+<ul>
+<li><code>README.md</code> - Project overview and getting started</li>
+<li><code>CHANGELOG.md</code> - Version history following Keep a Changelog format</li>
+<li><code>CLAUDE.md</code> - AI assistant guidance (project-specific)</li>
+<li><code>DOCUMENT-STANDARDS.md</code> - This file</li>
+</ul>
+<h2>Content Standards</h2>
+<h3>1. Mermaid Diagrams</h3>
+<p>Include diagrams wherever they help explain complex concepts:</p>
+<pre><code class="language-markdown"><div class="mermaid-wrapper">
+      <div class="mermaid-title">Diagram</div>
+      <div class="mermaid">graph TD
+    A[User Input] --> B{Valid?}
+    B -->|Yes| C[Process]
+    B -->|No| D[Error]
+    C --> E[Output]
+    
+    style A fill:#f9f,stroke:#333,stroke-width:2px
+    style E fill:#9f9,stroke:#333,stroke-width:2px</div>
+    </div>
+</code></pre>
+<p>Guidelines:</p>
+<ul>
+<li>Use consistent node naming</li>
+<li>Add clear labels and descriptions</li>
+<li>Apply styling for better visual hierarchy</li>
+<li>Include diagram titles where appropriate</li>
+</ul>
+<h3>2. Information Verification</h3>
+<p>Mark all information with verification status:</p>
+<ul>
+<li>✅ <strong>Verified</strong>: Information confirmed through testing or official sources</li>
+<li>❓ <strong>Speculated</strong>: Assumptions or unconfirmed information</li>
+<li>⚠️ <strong>Warning</strong>: Important caveats or potential issues</li>
+<li>🚧 <strong>In Progress</strong>: Features or documentation under development</li>
+</ul>
+<p>Example:</p>
+<pre><code class="language-markdown">### Feature Status
+- ✅ **Markdown parsing**: Fully implemented and tested
+- ❓ **Performance impact**: Estimated 100ms for 50 files
+- ⚠️ **Large files**: May timeout on files &gt; 10MB
+- 🚧 **Search feature**: Currently in development
+</code></pre>
+<h3>3. Code Examples</h3>
+<p>Always include practical, tested examples:</p>
+<pre><code class="language-javascript">// Good example - with context and error handling
+const { build } = require(&#39;@knowcode/doc-builder&#39;);
+
+const config = {
+  siteName: &#39;My Documentation&#39;,
+  docsDir: &#39;./docs&#39;,
+  outputDir: &#39;./dist&#39;
+};
+
+try {
+  await build(config);
+  console.log(&#39;✅ Build successful&#39;);
+} catch (error) {
+  console.error(&#39;❌ Build failed:&#39;, error.message);
+}
+</code></pre>
+<p>Guidelines:</p>
+<ul>
+<li>Use syntax highlighting</li>
+<li>Include error handling</li>
+<li>Add helpful comments</li>
+<li>Show both correct and incorrect usage</li>
+<li>Test all examples before documenting</li>
+</ul>
+<h3>4. Command Examples</h3>
+<p>Format commands clearly with descriptions:</p>
+<pre><code class="language-bash"># Install the package
+npm install -D @knowcode/doc-builder
+
+# Build documentation
+npx doc-builder build
+
+# Start development server
+npx doc-builder dev --port 3000
+
+# Deploy to Vercel
+npx doc-builder deploy --prod
+</code></pre>
+<h2>Version Control Standards</h2>
+<h3>Changelog Management</h3>
+<p>ALWAYS maintain <code>CHANGELOG.md</code> for all significant or material changes:</p>
+<pre><code class="language-markdown">## [1.4.12] - 2025-07-21
+
+### Fixed
+- Fixed h1 title alignment to extend full width
+- Added negative margins to counteract padding
+
+### Background
+- The h1 was appearing offset due to content padding
+- Now extends full width for better hierarchy
+</code></pre>
+<p>Categories:</p>
+<ul>
+<li><strong>Added</strong> - New features</li>
+<li><strong>Changed</strong> - Changes to existing functionality</li>
+<li><strong>Deprecated</strong> - Soon-to-be removed features</li>
+<li><strong>Removed</strong> - Removed features</li>
+<li><strong>Fixed</strong> - Bug fixes</li>
+<li><strong>Security</strong> - Security fixes</li>
+<li><strong>Background</strong> - Context for the changes</li>
+</ul>
+<h3>Commit Messages</h3>
+<p>Follow conventional commits:</p>
+<ul>
+<li><code>feat:</code> New features</li>
+<li><code>fix:</code> Bug fixes</li>
+<li><code>docs:</code> Documentation changes</li>
+<li><code>chore:</code> Maintenance tasks</li>
+<li><code>refactor:</code> Code refactoring</li>
+<li><code>test:</code> Test additions/changes</li>
+</ul>
+<h2>Markdown Best Practices</h2>
+<h3>Headers</h3>
+<pre><code class="language-markdown"># Main Title (H1 - one per document)
+
+## Major Section (H2)
+
+### Subsection (H3)
+
+#### Detail Level (H4)
+</code></pre>
+<ul>
+<li>Use hierarchical structure</li>
+<li>Don&#39;t skip levels</li>
+<li>Keep headers concise but descriptive</li>
+</ul>
+<h3>Lists</h3>
+<p>Unordered lists for non-sequential items:</p>
+<pre><code class="language-markdown">- First item
+- Second item
+  - Nested item
+  - Another nested item
+- Third item
+</code></pre>
+<p>Numbered lists for sequential steps:</p>
+<pre><code class="language-markdown">1. First step
+2. Second step
+3. Third step
+</code></pre>
+<h3>Tables</h3>
+<p>Keep tables readable and well-formatted:</p>
+<pre><code class="language-markdown">| Feature | Status | Version | Notes |
+|---------|--------|---------|-------|
+| Mermaid | ✅ Ready | 1.0.0 | Full support |
+| Search | 🚧 WIP | 1.5.0 | In development |
+| Auth | ✅ Ready | 1.3.0 | Optional feature |
+</code></pre>
+<h3>Links</h3>
+<ul>
+<li>Use descriptive link text: <code>[View deployment guide](./deploy.md)</code></li>
+<li>Avoid: <code>[click here](./deploy.md)</code></li>
+<li>Prefer relative links for internal docs</li>
+<li>Use absolute URLs for external resources</li>
+</ul>
+<h2>Quality Standards</h2>
+<h3>Clarity</h3>
+<ul>
+<li>Write for your target audience</li>
+<li>Define technical terms on first use</li>
+<li>Use simple language where possible</li>
+<li>Include examples for complex concepts</li>
+</ul>
+<h3>Completeness</h3>
+<ul>
+<li>Cover all aspects of the topic</li>
+<li>Include edge cases and limitations</li>
+<li>Document prerequisites</li>
+<li>Provide troubleshooting guidance</li>
+</ul>
+<h3>Accuracy</h3>
+<ul>
+<li>Verify all technical details</li>
+<li>Test code examples</li>
+<li>Update when implementation changes</li>
+<li>Mark speculation clearly</li>
+</ul>
+<h3>Consistency</h3>
+<ul>
+<li>Use same terminology throughout</li>
+<li>Follow naming conventions</li>
+<li>Maintain style consistency</li>
+<li>Cross-reference related documents</li>
+</ul>
+<h2>Document Types</h2>
+<h3>1. Feature Documentation</h3>
+<p>Structure:</p>
+<pre><code class="language-markdown"># Feature Name
+
+**Generated**: [date]
+**Status**: Complete
+**Verified**: ✅
+
+## Overview
+What the feature does and why it exists
+
+## Usage
+How to use the feature with examples
+
+## Configuration
+Available options and settings
+
+## Examples
+Practical use cases
+
+## Troubleshooting
+Common issues and solutions
+</code></pre>
+<h3>2. Technical Guides</h3>
+<p>Structure:</p>
+<pre><code class="language-markdown"># Technical Guide: [Topic]
+
+**Generated**: [date]
+**Status**: Complete
+**Verified**: ✅
+
+## Overview
+Technical context and goals
+
+## Architecture
+System design and components
+
+## Implementation
+Step-by-step technical details
+
+## Testing
+How to verify functionality
+
+## Performance
+Benchmarks and optimization
+</code></pre>
+<h3>3. API Documentation</h3>
+<p>Structure:</p>
+<pre><code class="language-markdown"># API: [Endpoint/Function Name]
+
+**Generated**: [date]
+**Status**: Complete
+**Verified**: ✅
+
+## Overview
+What the API does
+
+## Parameters
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+
+## Response
+Expected response format
+
+## Examples
+Request/response examples
+
+## Error Handling
+Possible errors and meanings
+</code></pre>
+<h2>File Organization</h2>
+<h3>Directory Structure</h3>
+<pre><code>doc-builder/
+├── README.md                    # Project overview
+├── CHANGELOG.md                 # Version history
+├── CLAUDE.md                    # AI assistant guide
+├── DOCUMENT-STANDARDS.md        # This file
+├── docs/                        # Additional documentation
+│   ├── guides/                  # How-to guides
+│   ├── api/                     # API documentation
+│   ├── architecture/            # System design docs
+│   └── troubleshooting/         # Problem-solving guides
+</code></pre>
+<h3>File Management</h3>
+<ul>
+<li>Keep active documentation in appropriate directories</li>
+<li>Archive outdated docs with date suffix: <code>old-guide-2025-01-15.md</code></li>
+<li>Remove unused files after archiving</li>
+<li>Maintain README.md in each directory explaining contents</li>
+</ul>
+<h2>Special Considerations</h2>
+<h3>Security</h3>
+<ul>
+<li>Never include credentials or API keys</li>
+<li>Use placeholders for sensitive data: <code>API_KEY=&lt;your-api-key-here&gt;</code></li>
+<li>Document security implications</li>
+<li>Include security warnings where relevant</li>
+</ul>
+<h3>Performance</h3>
+<ul>
+<li>Document performance characteristics</li>
+<li>Include benchmarks where applicable</li>
+<li>Note resource requirements</li>
+<li>Provide optimization tips</li>
+</ul>
+<h3>Accessibility</h3>
+<ul>
+<li>Use clear, simple language</li>
+<li>Provide alt text for images</li>
+<li>Structure documents logically</li>
+<li>Consider screen reader users</li>
+</ul>
+<h2>Document Maintenance</h2>
+<h3>Review Schedule</h3>
+<ul>
+<li>Technical docs: Review with each minor version</li>
+<li>API docs: Review with any API change</li>
+<li>Guides: Review quarterly</li>
+<li>README: Update with significant changes</li>
+</ul>
+<h3>Update Process</h3>
+<ol>
+<li>Check document metadata</li>
+<li>Verify technical accuracy</li>
+<li>Update examples</li>
+<li>Test code snippets</li>
+<li>Update changelog</li>
+<li>Commit with descriptive message</li>
+</ol>
+<h3>Document History</h3>
+<p>Include at the bottom of long-lived documents:</p>
+<pre><code class="language-markdown">## Document History
+
+| Date | Version | Author | Changes |
+|------|---------|--------|---------|
+| 2025-07-21 | 1.0 | System | Initial creation |
+| 2025-07-22 | 1.1 | Dev | Added examples |
+</code></pre>
+<h2>Tools and Automation</h2>
+<h3>Building Documentation</h3>
+<p>The doc-builder automatically:</p>
+<ul>
+<li>Generates navigation from folder structure</li>
+<li>Extracts summaries for tooltips</li>
+<li>Renders mermaid diagrams</li>
+<li>Applies syntax highlighting</li>
+<li>Creates responsive layouts</li>
+</ul>
+<h3>Preview Changes</h3>
+<pre><code class="language-bash"># Preview documentation locally
+npx doc-builder dev
+
+# Build and check output
+npx doc-builder build
+open html/index.html
+</code></pre>
+<h2>Conclusion</h2>
+<p>Following these standards ensures:</p>
+<ul>
+<li>Consistent, professional documentation</li>
+<li>Easy navigation and discovery</li>
+<li>Clear communication of technical concepts</li>
+<li>Maintainable documentation over time</li>
+</ul>
+<p>Remember: Good documentation is as important as good code. It enables others (including your future self) to understand, use, and maintain the project effectively.</p>
+<hr>
+<h2>Document History</h2>
+<table>
+<thead>
+<tr>
+<th>Date</th>
+<th>Version</th>
+<th>Author</th>
+<th>Changes</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>2025-07-21</td>
+<td>1.0</td>
+<td>System</td>
+<td>Initial creation from project standards</td>
+</tr>
+</tbody></table>
+
+            </div>
+        </main>
+    </div>
+    
+    <!-- Scripts -->
+    <script src="/js/main.js"></script>
+    
+</body>
+</html>

package/html/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Documentation site built with @knowcode/doc-builder">
-    <title>Test Documentation - Documentation</title>
+    <title>@knowcode/doc-builder - Documentation</title>
     
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -29,7 +29,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.4.6">Last updated: Jul 21, 2025, 11:05 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.4.11">Last updated: Jul 21, 2025, 12:17 PM UTC</span>
                 </div>
                 
                 
@@ -78,7 +78,8 @@
           <i class="fas fa-home"></i> Documentation
         </a>
         <div class="nav-content" >
-        <a href="/README.html" class="nav-item active" data-tooltip="This is a test document to verify the doc-builder version tooltip."><i class="fas fa-file-alt"></i> Overview</a></div></div>
+        <a href="/README.html" class="nav-item active" data-tooltip="&gt; Transform your markdown documentation into beautiful, searchable websites with Notion-inspired styling Create stunning documentation sites in minute..."><i class="fas fa-file-alt"></i> Overview</a>
+        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="**Generated**: 2025-07-21 10:00 UTC **Status**: Complete **Verified**: ✅ This guide demonstrates an efficient workflow for using Claude Code with a re..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a></div></div>
             </nav>
             <div class="resize-handle"></div>
         </aside>
@@ -86,8 +87,141 @@
         <!-- Content Area -->
         <main class="content">
             <div class="content-inner">
-                <h1>Test Documentation</h1>
-<p>This is a test document to verify the doc-builder version tooltip.</p>
+                <h1>@knowcode/doc-builder</h1>
+<blockquote>
+<p>Transform your markdown documentation into beautiful, searchable websites with Notion-inspired styling</p>
+</blockquote>
+<p><a href="https://www.npmjs.com/package/@knowcode/doc-builder"><img src="https://img.shields.io/npm/v/@knowcode/doc-builder" alt="npm version"></a><br><a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT"></a></p>
+<h2>🚀 Quick Start</h2>
+<p>Create stunning documentation sites in minutes:</p>
+<pre><code class="language-bash"># Install globally
+npm install -g @knowcode/doc-builder
+
+# Or use with npx
+npx @knowcode/doc-builder@latest init
+</code></pre>
+<h2>✨ Features</h2>
+<h3>🎨 Beautiful Design</h3>
+<ul>
+<li><strong>Notion-inspired UI</strong> - Clean, modern interface that users love</li>
+<li><strong>Dark mode support</strong> - Automatic theme switching</li>
+<li><strong>Responsive layout</strong> - Perfect on desktop and mobile</li>
+<li><strong>Syntax highlighting</strong> - Beautiful code blocks with language support</li>
+</ul>
+<h3>🔍 Powerful Search &amp; Navigation</h3>
+<ul>
+<li><strong>Full-text search</strong> - Find anything instantly</li>
+<li><strong>Smart navigation</strong> - Hierarchical folder structure</li>
+<li><strong>Breadcrumbs</strong> - Always know where you are</li>
+<li><strong>Keyboard shortcuts</strong> - Navigate like a pro</li>
+</ul>
+<h3>📊 Rich Content Support</h3>
+<ul>
+<li><strong>Mermaid diagrams</strong> - Flowcharts, sequence diagrams, and more</li>
+<li><strong>GitHub-flavored markdown</strong> - Tables, task lists, and strikethrough</li>
+<li><strong>Interactive tooltips</strong> - Document summaries on hover</li>
+<li><strong>Version tracking</strong> - Know which version built your docs</li>
+</ul>
+<h3>🚀 Easy Deployment</h3>
+<ul>
+<li><strong>One-command deploy</strong> - Push to Vercel instantly</li>
+<li><strong>Static site generation</strong> - Fast, secure, and scalable</li>
+<li><strong>Custom domains</strong> - Your docs, your brand</li>
+<li><strong>Preview deployments</strong> - Test before going live</li>
+</ul>
+<h2>📖 Documentation</h2>
+<p>Visit our <a href="https://www.npmjs.com/package/@knowcode/doc-builder">official documentation</a> for detailed guides and API reference.</p>
+<h2>🎯 Perfect For</h2>
+<ul>
+<li><strong>Open source projects</strong> - Beautiful docs for your community</li>
+<li><strong>Technical teams</strong> - Internal documentation that developers actually use</li>
+<li><strong>API documentation</strong> - Clear, searchable API references</li>
+<li><strong>Knowledge bases</strong> - Organize and share team knowledge</li>
+</ul>
+<h2>🛠️ Simple Workflow</h2>
+<h3>1. Initialize Your Project</h3>
+<pre><code class="language-bash">npx @knowcode/doc-builder init
+</code></pre>
+<h3>2. Write Your Documentation</h3>
+<p>Create markdown files in your <code>docs</code> folder:</p>
+<pre><code class="language-markdown"># Getting Started
+
+Welcome to our documentation!
+
+## Installation
+
+\`\`\`bash
+npm install amazing-package
+\`\`\`
+
+## Features
+
+- ✅ Feature one
+- ✅ Feature two
+- ✅ Feature three
+</code></pre>
+<h3>3. Build &amp; Preview</h3>
+<pre><code class="language-bash"># Build your site
+npx doc-builder build
+
+# Preview locally
+npx doc-builder serve
+</code></pre>
+<h3>4. Deploy to Vercel</h3>
+<pre><code class="language-bash">npx doc-builder deploy
+</code></pre>
+<h2>🎨 Customization</h2>
+<p>Configure your site with <code>doc-builder.config.js</code>:</p>
+<pre><code class="language-javascript">module.exports = {
+  siteName: &#39;Your Amazing Docs&#39;,
+  siteDescription: &#39;Documentation that developers love&#39;,
+  features: {
+    mermaid: true,
+    darkMode: true,
+    authentication: false
+  }
+};
+</code></pre>
+<h2>📊 Mermaid Diagram Support</h2>
+<p>Create beautiful diagrams in your markdown:</p>
+<div class="mermaid-wrapper">
+      <div class="mermaid-title">Diagram</div>
+      <div class="mermaid">graph LR
+    A[Write Docs] --> B[Build Site]
+    B --> C[Deploy]
+    C --> D[Share Knowledge]
+    
+    style A fill:#e1f5fe
+    style D fill:#c8e6c9</div>
+    </div>
+<h2>🔒 Optional Authentication</h2>
+<p>Protect sensitive documentation with built-in authentication:</p>
+<pre><code class="language-javascript">features: {
+  authentication: true
+}
+</code></pre>
+<h2>🌟 Why doc-builder?</h2>
+<ul>
+<li><strong>Zero configuration</strong> - Works out of the box</li>
+<li><strong>Lightning fast</strong> - Static site generation for instant loading</li>
+<li><strong>SEO friendly</strong> - Optimized for search engines</li>
+<li><strong>Accessible</strong> - WCAG compliant</li>
+<li><strong>Version control</strong> - Track changes with Git</li>
+<li><strong>Open source</strong> - MIT licensed</li>
+</ul>
+<h2>🤝 Contributing</h2>
+<p>We welcome contributions! Check out our <a href="https://github.com/knowcode/doc-builder">contribution guide</a> to get started.</p>
+<h2>📝 License</h2>
+<p>MIT © KnowCode</p>
+<hr>
+<div align="center">
+  <p>Built with ❤️ by developers, for developers</p>
+  <p>
+    <a href="https://www.npmjs.com/package/@knowcode/doc-builder">npm</a> •
+    <a href="https://github.com/knowcode/doc-builder">GitHub</a> •
+    <a href="https://knowcode.com">Website</a>
+  </p>
+</div>
 
             </div>
         </main>

package/lib/core-builder.js

@@ -332,15 +332,17 @@ function buildNavigationStructure(files, currentFile) {
     const folderDescription = folderDescriptions[folderName] || '';
     const tooltipAttr = folderDescription ? `data-tooltip="${escapeHtml(folderDescription)}"` : '';
     
-    // Start all sections collapsed by default (JavaScript will expand sections containing active items)
+    // Check if this folder has active child or if we're on index page
     const hasActiveChild = checkActiveChild(folderData, currentFile);
+    // Expand all folders by default on initial page load (index.html or root README)
+    const shouldExpand = hasActiveChild || currentFile === 'index.html' || (currentFile === 'README.html' && level === 1);
     
     let html = `
       <div class="nav-section" data-level="${level}">
-        <a class="nav-title${isCollapsible ? ' collapsible' : ''}${hasActiveChild ? ' expanded' : ''}" ${folderLink} ${isCollapsible ? `data-target="${sectionId}"` : ''} ${tooltipAttr}>
+        <a class="nav-title${isCollapsible ? ' collapsible' : ''}${shouldExpand ? ' expanded' : ''}" ${folderLink} ${isCollapsible ? `data-target="${sectionId}"` : ''} ${tooltipAttr}>
           ${collapseIcon}<i class="${icon}"></i> ${displayName}
         </a>
-        <div class="nav-content${isCollapsible ? (hasActiveChild ? '' : ' collapsed') : ''}" ${isCollapsible ? `id="${sectionId}"` : ''}>`;
+        <div class="nav-content${isCollapsible ? (shouldExpand ? '' : ' collapsed') : ''}" ${isCollapsible ? `id="${sectionId}"` : ''}>`;
     
     // Sort and render files
     const sortedFiles = [...folderData.files].sort((a, b) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowcode/doc-builder",
-  "version": "1.4.11",
+  "version": "1.4.14",
   "description": "Reusable documentation builder for markdown-based sites with Vercel deployment support",
   "main": "index.js",
   "bin": {