@knowcode/doc-builder 1.6.4 → 1.7.0

package/assets/css/notion-style.css

@@ -319,7 +319,7 @@ pre code {
   background: var(--color-bg-secondary);
   border-right: 1px solid var(--color-border-default);
   overflow: hidden;
-  transition: width var(--duration-normal);
+  transition: width var(--duration-normal), transform 0.3s ease, margin-left 0.3s ease;
   min-width: 200px;
   max-width: 500px;
   user-select: none;
@@ -330,6 +330,14 @@ pre code {
   height: 100%;
 }
 
+/* Desktop sidebar closed state */
+@media (min-width: 769px) {
+  .sidebar.closed {
+    transform: translateX(-100%);
+    margin-left: calc(var(--sidebar-width) * -1);
+  }
+}
+
 /* Banner adjustment no longer needed with relative positioning */
 
 
@@ -1958,31 +1966,33 @@ tr:hover {
 /* Phosphor Icons Alignment */
 .ph {
   display: inline-block;
-  vertical-align: text-top;
-  line-height: 0.8;
+  vertical-align: middle;
+  line-height: 1;
   position: relative;
-  top: 0.2em; /* Push down to align with x-height of text */
+  top: -0.05em; /* Slight upward adjustment for better baseline alignment */
 }
 
 /* Ensure icons in headings are properly aligned */
 h1 .ph, h2 .ph, h3 .ph, h4 .ph, h5 .ph, h6 .ph {
   font-size: 0.85em; /* Slightly smaller in headings */
-  line-height: 0.8;
-  top: 0.15em;
+  line-height: 1;
+  top: -0.05em;
 }
 
 /* Icons in lists need special handling */
 li .ph {
   margin-right: 0.3em;
-  font-size: 1.05em;
-  line-height: 0.85;
-  top: 0.15em;
+  font-size: 1.1em;
+  line-height: 1;
+  vertical-align: middle;
+  top: -0.05em;
 }
 
 /* Icons in tables */
 td .ph, th .ph {
-  line-height: 0.8;
-  top: 0.2em;
+  line-height: 1;
+  vertical-align: middle;
+  top: -0.05em;
 }
 
 /* Icons in navigation */
@@ -1995,7 +2005,7 @@ td .ph, th .ph {
 
 /* Icon size adjustments for better visual balance */
 .content p .ph {
-  font-size: 1.05em; /* Slightly larger than text for visual balance */
+  font-size: 1.1em; /* Slightly larger than text for visual balance */
 }
 
 /* Special handling for inline code with icons */
@@ -2008,5 +2018,5 @@ code .ph {
 
 /* Additional fine-tuning for specific contexts */
 .content-inner .ph {
-  transform: translateY(0.05em); /* Very slight additional adjustment */
+  /* Remove the transform as we're now using consistent vertical-align: middle */
 }

package/assets/js/main.js

@@ -494,6 +494,14 @@ function updateThemeIcon(theme) {
 const menuToggle = document.getElementById('menu-toggle');
 const sidebar = document.querySelector('.sidebar');
 
+// Set initial menu state based on configuration
+if (sidebar && window.innerWidth > 768) {
+  const menuDefaultOpen = window.docBuilderConfig?.features?.menuDefaultOpen !== false;
+  if (!menuDefaultOpen) {
+    sidebar.classList.add('closed');
+  }
+}
+
 // Create overlay element for mobile
 let overlay = document.querySelector('.sidebar-overlay');
 if (!overlay && window.innerWidth <= 768) {
@@ -504,7 +512,13 @@ if (!overlay && window.innerWidth <= 768) {
 
 if (menuToggle) {
   menuToggle.addEventListener('click', () => {
-    sidebar.classList.toggle('open');
+    if (window.innerWidth <= 768) {
+      // Mobile: toggle 'open' class
+      sidebar.classList.toggle('open');
+    } else {
+      // Desktop: toggle 'closed' class
+      sidebar.classList.toggle('closed');
+    }
     if (overlay) {
       overlay.classList.toggle('active');
     }
@@ -1278,6 +1292,10 @@ function exportToPDF() {
 
 // Add PDF export button functionality
 function addPDFExportButton() {
+  // Check configuration - default to true if not set
+  const showPdfDownload = window.docBuilderConfig?.features?.showPdfDownload !== false;
+  if (!showPdfDownload) return;
+  
   const headerActions = document.querySelector('.header-actions');
   if (headerActions) {
     const pdfButton = document.createElement('button');

package/cli.js

@@ -72,6 +72,8 @@ program
   .option('--legacy', 'use legacy mode for backward compatibility')
   .option('--no-auth', 'disable authentication even if configured')
   .option('--no-changelog', 'disable automatic changelog generation')
+  .option('--no-pdf', 'hide PDF download icon in header')
+  .option('--menu-closed', 'start with navigation menu closed')
   .addHelpText('after', `
 ${chalk.yellow('Examples:')}
   ${chalk.gray('$')} doc-builder build                        ${chalk.gray('# Build with defaults')}

package/html/README.html

@@ -63,8 +63,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-23T09:32:05.950Z",
-  "dateModified": "2025-07-23T09:32:05.950Z",
+  "datePublished": "2025-07-24T08:19:52.195Z",
+  "dateModified": "2025-07-24T08:19:52.195Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/README.html"
@@ -97,7 +97,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.6.3">Last updated: Jul 23, 2025, 09:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.6.5">Last updated: Jul 24, 2025, 08:19 AM UTC</span>
                 </div>
                 
                 
@@ -294,7 +294,7 @@ module.exports = {
   siteDescription: &#39;Transform markdown into beautiful documentation&#39;,
   docsDir: &#39;docs&#39;,
   outputDir: &#39;html&#39;,
-  favicon: &#39;<i class="ph ph-sparkle" aria-label="special"></i>&#39;  // Can be emoji or path to image
+  favicon: &#39;✨&#39;  // Can be emoji or path to image
 };
 </code></pre>
 <p><em>The CLI creates and updates this for you</em></p>
@@ -422,6 +422,15 @@ docBuilder.build({
     </div>
     
     <!-- Scripts -->
+    <script>
+    // Pass configuration to frontend
+    window.docBuilderConfig = {
+      features: {
+        showPdfDownload: true,
+        menuDefaultOpen: true
+      }
+    };
+    </script>
     <script src="/js/main.js"></script>
     
 </body>

package/html/css/notion-style.css

@@ -319,7 +319,7 @@ pre code {
   background: var(--color-bg-secondary);
   border-right: 1px solid var(--color-border-default);
   overflow: hidden;
-  transition: width var(--duration-normal);
+  transition: width var(--duration-normal), transform 0.3s ease, margin-left 0.3s ease;
   min-width: 200px;
   max-width: 500px;
   user-select: none;
@@ -330,6 +330,14 @@ pre code {
   height: 100%;
 }
 
+/* Desktop sidebar closed state */
+@media (min-width: 769px) {
+  .sidebar.closed {
+    transform: translateX(-100%);
+    margin-left: calc(var(--sidebar-width) * -1);
+  }
+}
+
 /* Banner adjustment no longer needed with relative positioning */
 
 
@@ -1958,31 +1966,33 @@ tr:hover {
 /* Phosphor Icons Alignment */
 .ph {
   display: inline-block;
-  vertical-align: text-top;
-  line-height: 0.8;
+  vertical-align: middle;
+  line-height: 1;
   position: relative;
-  top: 0.2em; /* Push down to align with x-height of text */
+  top: -0.05em; /* Slight upward adjustment for better baseline alignment */
 }
 
 /* Ensure icons in headings are properly aligned */
 h1 .ph, h2 .ph, h3 .ph, h4 .ph, h5 .ph, h6 .ph {
   font-size: 0.85em; /* Slightly smaller in headings */
-  line-height: 0.8;
-  top: 0.15em;
+  line-height: 1;
+  top: -0.05em;
 }
 
 /* Icons in lists need special handling */
 li .ph {
   margin-right: 0.3em;
-  font-size: 1.05em;
-  line-height: 0.85;
-  top: 0.15em;
+  font-size: 1.1em;
+  line-height: 1;
+  vertical-align: middle;
+  top: -0.05em;
 }
 
 /* Icons in tables */
 td .ph, th .ph {
-  line-height: 0.8;
-  top: 0.2em;
+  line-height: 1;
+  vertical-align: middle;
+  top: -0.05em;
 }
 
 /* Icons in navigation */
@@ -1995,7 +2005,7 @@ td .ph, th .ph {
 
 /* Icon size adjustments for better visual balance */
 .content p .ph {
-  font-size: 1.05em; /* Slightly larger than text for visual balance */
+  font-size: 1.1em; /* Slightly larger than text for visual balance */
 }
 
 /* Special handling for inline code with icons */
@@ -2008,5 +2018,5 @@ code .ph {
 
 /* Additional fine-tuning for specific contexts */
 .content-inner .ph {
-  transform: translateY(0.05em); /* Very slight additional adjustment */
+  /* Remove the transform as we're now using consistent vertical-align: middle */
 }

package/html/documentation-index.html

@@ -63,8 +63,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-23T09:32:05.971Z",
-  "dateModified": "2025-07-23T09:32:05.971Z",
+  "datePublished": "2025-07-24T08:19:52.206Z",
+  "dateModified": "2025-07-24T08:19:52.206Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/documentation-index.html"
@@ -97,7 +97,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.6.3">Last updated: Jul 23, 2025, 09:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.6.5">Last updated: Jul 24, 2025, 08:19 AM UTC</span>
                 </div>
                 
                 
@@ -302,7 +302,7 @@
 
 **Generated**: YYYY-MM-DD HH:MM UTC  
 **Status**: Draft/Complete  
-**Verified**: <i class="ph ph-check-circle" aria-label="checked"></i>/<i class="ph ph-question" aria-label="question"></i>
+**Verified**: ✅/❓
 
 ## Overview
 
@@ -362,6 +362,15 @@ Detailed information...
     </div>
     
     <!-- Scripts -->
+    <script>
+    // Pass configuration to frontend
+    window.docBuilderConfig = {
+      features: {
+        showPdfDownload: true,
+        menuDefaultOpen: true
+      }
+    };
+    </script>
     <script src="/js/main.js"></script>
     
 </body>

package/html/guides/authentication-guide.html

@@ -63,8 +63,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-23T09:32:05.981Z",
-  "dateModified": "2025-07-23T09:32:05.981Z",
+  "datePublished": "2025-07-24T08:19:52.210Z",
+  "dateModified": "2025-07-24T08:19:52.210Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
@@ -103,7 +103,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.6.3">Last updated: Jul 23, 2025, 09:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.6.5">Last updated: Jul 24, 2025, 08:19 AM UTC</span>
                 </div>
                 
                 
@@ -459,6 +459,15 @@ Please bookmark the site after logging in.
     </div>
     
     <!-- Scripts -->
+    <script>
+    // Pass configuration to frontend
+    window.docBuilderConfig = {
+      features: {
+        showPdfDownload: true,
+        menuDefaultOpen: true
+      }
+    };
+    </script>
     <script src="/js/main.js"></script>
     
 </body>

package/html/guides/claude-workflow-guide.html

@@ -63,8 +63,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-23T09:32:05.986Z",
-  "dateModified": "2025-07-23T09:32:05.986Z",
+  "datePublished": "2025-07-24T08:19:52.215Z",
+  "dateModified": "2025-07-24T08:19:52.215Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
@@ -103,7 +103,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.6.3">Last updated: Jul 23, 2025, 09:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.6.5">Last updated: Jul 24, 2025, 08:19 AM UTC</span>
                 </div>
                 
                 
@@ -230,7 +230,7 @@ This file provides comprehensive guidance for Claude Code when working in this p
 - Include metadata:
   - **Generated**: YYYY-MM-DD HH:MM UTC
   - **Status**: Draft/In Progress/Complete
-  - **Verified**: <i class="ph ph-check-circle" aria-label="checked"></i> (for verified information) / <i class="ph ph-question" aria-label="question"></i> (for speculated information)
+  - **Verified**: ✅ (for verified information) / ❓ (for speculated information)
 
 ### Document Structure
 - All documentation goes in the `/docs` directory
@@ -265,12 +265,12 @@ This file provides comprehensive guidance for Claude Code when working in this p
     </div>
 
 #### 2. Information Verification
-- Mark all information as either verified (<i class="ph ph-check-circle" aria-label="checked"></i>) or speculated (<i class="ph ph-question" aria-label="question"></i>)
+- Mark all information as either verified (✅) or speculated (❓)
 - Include sources for verified information
 - Clearly indicate assumptions
 - Example:
-  - <i class="ph ph-check-circle" aria-label="checked"></i> This API endpoint requires authentication (verified in auth.js:45)
-  - <i class="ph ph-question" aria-label="question"></i> Response time should be under 200ms (performance requirement assumed)
+  - ✅ This API endpoint requires authentication (verified in auth.js:45)
+  - ❓ Response time should be under 200ms (performance requirement assumed)
 
 #### 3. Code Examples
 - Use proper syntax highlighting with language identifiers
@@ -279,7 +279,7 @@ This file provides comprehensive guidance for Claude Code when working in this p
 - Add error handling in examples
 - Example:
 ```javascript
-// <i class="ph ph-check-circle" aria-label="checked"></i> Correct way to call the API
+// ✅ Correct way to call the API
 try {
   const response = await api.getData({ userId: 123 });
   console.log(&#39;Data:&#39;, response.data);
@@ -287,7 +287,7 @@ try {
   console.error(&#39;API Error:&#39;, error.message);
 }
 
-// <i class="ph ph-x-circle" aria-label="error"></i> Incorrect - missing error handling
+// ❌ Incorrect - missing error handling
 const response = await api.getData({ userId: 123 });
 </code></pre>
 <h4>4. Practical Examples</h4>
@@ -522,7 +522,7 @@ For Claude to generate accurate and consistent content, include key organization
 ### Branding Guidelines
 - **Company Tagline**: &quot;Beautiful documentation with the least effort possible&quot;
 - **Primary Color**: #0070f3 (Vercel blue)
-- **Logo**: <i class="ph ph-sparkle" aria-label="special"></i> (sparkle emoji)
+- **Logo**: ✨ (sparkle emoji)
 - **Font Family**: Inter, system-ui
 </code></pre>
 <p>When these facts are included in your CLAUDE.md, Claude will:</p>
@@ -550,8 +550,8 @@ For Claude to generate accurate and consistent content, include key organization
 
 ### Information Verification
 - Mark all verified vs. speculated information as a general document standard
-- Use <i class="ph ph-check-circle" aria-label="checked"></i> for verified information with source references
-- Use <i class="ph ph-question" aria-label="question"></i> for assumptions or unverified information
+- Use ✅ for verified information with source references
+- Use ❓ for assumptions or unverified information
 
 ### Development Practices
 - Use Docker V2 for containerization
@@ -650,15 +650,15 @@ For Claude to generate accurate and consistent content, include key organization
     </div>
 <h4>Example: Without Environment Facts</h4>
 <pre><code class="language-javascript">// Claude might generate:
-const API_URL = &#39;https://api.example.com&#39;;  // <i class="ph ph-question" aria-label="question"></i> Generic placeholder
-const author = &#39;Your Name&#39;;                 // <i class="ph ph-question" aria-label="question"></i> Placeholder
-const email = &#39;email@example.com&#39;;          // <i class="ph ph-question" aria-label="question"></i> Generic example
+const API_URL = &#39;https://api.example.com&#39;;  // ❓ Generic placeholder
+const author = &#39;Your Name&#39;;                 // ❓ Placeholder
+const email = &#39;email@example.com&#39;;          // ❓ Generic example
 </code></pre>
 <h4>Example: With Environment Facts</h4>
 <pre><code class="language-javascript">// Claude will generate:
-const API_URL = &#39;https://api.knowcode.tech&#39;;      // <i class="ph ph-check-circle" aria-label="checked"></i> Actual API URL
-const author = &#39;Lindsay Smith&#39;;                    // <i class="ph ph-check-circle" aria-label="checked"></i> Correct author
-const email = &#39;support@knowcode.tech&#39;;             // <i class="ph ph-check-circle" aria-label="checked"></i> Real contact email
+const API_URL = &#39;https://api.knowcode.tech&#39;;      // ✅ Actual API URL
+const author = &#39;Lindsay Smith&#39;;                    // ✅ Correct author
+const email = &#39;support@knowcode.tech&#39;;             // ✅ Real contact email
 </code></pre>
 <h2>Step 2: Initialize doc-builder</h2>
 <pre><code class="language-bash"># Install doc-builder
@@ -906,43 +906,43 @@ npm run deploy:docs
 ## Best Practices Summary
 
 ### Documentation Creation
-1. <i class="ph ph-check-circle" aria-label="checked"></i> Use CLAUDE.md to maintain consistency across all documentation
-2. <i class="ph ph-check-circle" aria-label="checked"></i> Include visual diagrams (Mermaid) for complex concepts and workflows
-3. <i class="ph ph-check-circle" aria-label="checked"></i> Provide practical, working examples that can be copy-pasted
-4. <i class="ph ph-check-circle" aria-label="checked"></i> Mark verification status (<i class="ph ph-check-circle" aria-label="checked"></i>/<i class="ph ph-question" aria-label="question"></i>) for all technical information
-5. <i class="ph ph-check-circle" aria-label="checked"></i> Keep documentation close to code in the /docs directory
-6. <i class="ph ph-check-circle" aria-label="checked"></i> Include metadata headers with timestamps and status
-7. <i class="ph ph-check-circle" aria-label="checked"></i> Add troubleshooting sections for common issues
-8. <i class="ph ph-check-circle" aria-label="checked"></i> Cross-reference related documentation
+1. ✅ Use CLAUDE.md to maintain consistency across all documentation
+2. ✅ Include visual diagrams (Mermaid) for complex concepts and workflows
+3. ✅ Provide practical, working examples that can be copy-pasted
+4. ✅ Mark verification status (✅/❓) for all technical information
+5. ✅ Keep documentation close to code in the /docs directory
+6. ✅ Include metadata headers with timestamps and status
+7. ✅ Add troubleshooting sections for common issues
+8. ✅ Cross-reference related documentation
 
 ### Claude Interaction
-1. <i class="ph ph-check-circle" aria-label="checked"></i> Provide clear, specific requests with expected output format
-2. <i class="ph ph-check-circle" aria-label="checked"></i> Reference existing patterns from CLAUDE.md
-3. <i class="ph ph-check-circle" aria-label="checked"></i> Request iterative improvements - review and refine
-4. <i class="ph ph-check-circle" aria-label="checked"></i> Verify technical accuracy of generated content
-5. <i class="ph ph-check-circle" aria-label="checked"></i> Ask for troubleshooting sections explicitly
-6. <i class="ph ph-check-circle" aria-label="checked"></i> Request examples with error handling
-7. <i class="ph ph-check-circle" aria-label="checked"></i> Specify diagram types needed (sequence, flow, state)
-8. <i class="ph ph-check-circle" aria-label="checked"></i> Ask Claude to check its own work against CLAUDE.md standards
+1. ✅ Provide clear, specific requests with expected output format
+2. ✅ Reference existing patterns from CLAUDE.md
+3. ✅ Request iterative improvements - review and refine
+4. ✅ Verify technical accuracy of generated content
+5. ✅ Ask for troubleshooting sections explicitly
+6. ✅ Request examples with error handling
+7. ✅ Specify diagram types needed (sequence, flow, state)
+8. ✅ Ask Claude to check its own work against CLAUDE.md standards
 
 ### Documentation Maintenance
-1. <i class="ph ph-check-circle" aria-label="checked"></i> Update docs when code changes
-2. <i class="ph ph-check-circle" aria-label="checked"></i> Archive outdated documentation
-3. <i class="ph ph-check-circle" aria-label="checked"></i> Maintain CHANGELOG.md
-4. <i class="ph ph-check-circle" aria-label="checked"></i> Review documentation quarterly
-5. <i class="ph ph-check-circle" aria-label="checked"></i> Test all code examples
-6. <i class="ph ph-check-circle" aria-label="checked"></i> Check for broken links
-7. <i class="ph ph-check-circle" aria-label="checked"></i> Update version references
+1. ✅ Update docs when code changes
+2. ✅ Archive outdated documentation
+3. ✅ Maintain CHANGELOG.md
+4. ✅ Review documentation quarterly
+5. ✅ Test all code examples
+6. ✅ Check for broken links
+7. ✅ Update version references
 
 ### Deployment
-1. <i class="ph ph-check-circle" aria-label="checked"></i> Test locally before deploying (npm run dev:docs)
-2. <i class="ph ph-check-circle" aria-label="checked"></i> Build and verify output (npm run build:docs)
-3. <i class="ph ph-check-circle" aria-label="checked"></i> Use preview deployments first
-4. <i class="ph ph-check-circle" aria-label="checked"></i> Configure custom domains if needed
-5. <i class="ph ph-check-circle" aria-label="checked"></i> Enable HTTPS (automatic with Vercel)
-6. <i class="ph ph-check-circle" aria-label="checked"></i> Monitor deployment health
-7. <i class="ph ph-check-circle" aria-label="checked"></i> Disable Vercel authentication for public docs
-8. <i class="ph ph-check-circle" aria-label="checked"></i> Commit documentation changes before deploying
+1. ✅ Test locally before deploying (npm run dev:docs)
+2. ✅ Build and verify output (npm run build:docs)
+3. ✅ Use preview deployments first
+4. ✅ Configure custom domains if needed
+5. ✅ Enable HTTPS (automatic with Vercel)
+6. ✅ Monitor deployment health
+7. ✅ Disable Vercel authentication for public docs
+8. ✅ Commit documentation changes before deploying
 
 ## Common Issues and Solutions
 
@@ -981,6 +981,15 @@ The key to success is iterative refinement of your CLAUDE.md file to capture you
     </div>
     
     <!-- Scripts -->
+    <script>
+    // Pass configuration to frontend
+    window.docBuilderConfig = {
+      features: {
+        showPdfDownload: true,
+        menuDefaultOpen: true
+      }
+    };
+    </script>
     <script src="/js/main.js"></script>
     
 </body>

package/html/guides/documentation-standards.html

@@ -63,8 +63,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-23T09:32:05.992Z",
-  "dateModified": "2025-07-23T09:32:05.992Z",
+  "datePublished": "2025-07-24T08:19:52.220Z",
+  "dateModified": "2025-07-24T08:19:52.220Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/guides/documentation-standards.html"
@@ -103,7 +103,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.6.3">Last updated: Jul 23, 2025, 09:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.6.5">Last updated: Jul 24, 2025, 08:19 AM UTC</span>
                 </div>
                 
                 
@@ -196,7 +196,7 @@
 
 **Generated**: YYYY-MM-DD HH:MM UTC
 **Status**: Draft/In Progress/Complete  
-**Verified**: <i class="ph ph-check-circle" aria-label="checked"></i> (for verified information) / <i class="ph ph-question" aria-label="question"></i> (for speculated information)
+**Verified**: ✅ (for verified information) / ❓ (for speculated information)
 
 ## Overview
 
@@ -261,9 +261,9 @@ Brief description of the document&#39;s contents and purpose.
 </ul>
 <p>Example:</p>
 <pre><code class="language-markdown">### Feature Status
-- <i class="ph ph-check-circle" aria-label="checked"></i> **Markdown parsing**: Fully implemented and tested
-- <i class="ph ph-question" aria-label="question"></i> **Performance impact**: Estimated 100ms for 50 files
-- <i class="ph ph-warning-circle" aria-label="warning"></i> **Large files**: May timeout on files &gt; 10MB
+- ✅ **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>
@@ -279,9 +279,9 @@ const config = {
 
 try {
   await build(config);
-  console.log(&#39;<i class="ph ph-check-circle" aria-label="checked"></i> Build successful&#39;);
+  console.log(&#39;✅ Build successful&#39;);
 } catch (error) {
-  console.error(&#39;<i class="ph ph-x-circle" aria-label="error"></i> Build failed:&#39;, error.message);
+  console.error(&#39;❌ Build failed:&#39;, error.message);
 }
 </code></pre>
 <p>Guidelines:</p>
@@ -371,9 +371,9 @@ npx doc-builder deploy --prod
 <p>Keep tables readable and well-formatted:</p>
 <pre><code class="language-markdown">| Feature | Status | Version | Notes |
 |---------|--------|---------|-------|
-| Mermaid | <i class="ph ph-check-circle" aria-label="checked"></i> Ready | 1.0.0 | Full support |
+| Mermaid | ✅ Ready | 1.0.0 | Full support |
 | Search | 🚧 WIP | 1.5.0 | In development |
-| Auth | <i class="ph ph-check-circle" aria-label="checked"></i> Ready | 1.3.0 | Optional feature |
+| Auth | ✅ Ready | 1.3.0 | Optional feature |
 </code></pre>
 <h3>Links</h3>
 <ul>
@@ -418,7 +418,7 @@ npx doc-builder deploy --prod
 
 **Generated**: [date]
 **Status**: Complete
-**Verified**: <i class="ph ph-check-circle" aria-label="checked"></i>
+**Verified**: ✅
 
 ## Overview
 What the feature does and why it exists
@@ -441,7 +441,7 @@ Common issues and solutions
 
 **Generated**: [date]
 **Status**: Complete
-**Verified**: <i class="ph ph-check-circle" aria-label="checked"></i>
+**Verified**: ✅
 
 ## Overview
 Technical context and goals
@@ -464,7 +464,7 @@ Benchmarks and optimization
 
 **Generated**: [date]
 **Status**: Complete
-**Verified**: <i class="ph ph-check-circle" aria-label="checked"></i>
+**Verified**: ✅
 
 ## Overview
 What the API does
@@ -601,6 +601,15 @@ open html/index.html
     </div>
     
     <!-- Scripts -->
+    <script>
+    // Pass configuration to frontend
+    window.docBuilderConfig = {
+      features: {
+        showPdfDownload: true,
+        menuDefaultOpen: true
+      }
+    };
+    </script>
     <script src="/js/main.js"></script>
     
 </body>