@knowcode/doc-builder 1.5.12 → 1.5.14

package/CHANGELOG.md

@@ -5,6 +5,37 @@ 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.5.14] - 2025-07-22
+
+### Fixed
+- Fixed vertical alignment of Phosphor icons - they now properly center with text
+- Added CSS rules for proper icon positioning in different contexts (headings, lists, tables)
+- Icons no longer appear too high relative to the text baseline
+
+### Changed
+- Added comprehensive Phosphor icon CSS alignment rules at the end of notion-style.css
+- Fine-tuned icon positioning with `vertical-align: middle` and slight top offset adjustment
+
+## [1.5.13] - 2025-07-22
+
+### Added
+- **Phosphor Icons Integration** - Automatically convert Unicode emojis to beautiful Phosphor icons in generated HTML
+- Comprehensive emoji-to-icon mapping with 200+ supported emojis
+- Configurable icon weights (thin, light, regular, bold, fill, duotone)
+- Configurable icon size relative to text
+- Accessibility support with proper aria-labels for all icons
+- New `phosphor-icons-guide.md` documentation
+
+### Changed
+- HTML template now includes Phosphor Icons CDN when feature is enabled
+- Post-processing step to replace emojis with icon tags after markdown parsing
+
+### Technical Details
+- Added `lib/emoji-mapper.js` with comprehensive emoji mappings
+- Updated `core-builder.js` to process emojis during HTML generation
+- Added configuration options: `phosphorIcons`, `phosphorWeight`, `phosphorSize`
+- Icons inherit text color and can be styled with CSS
+
 ## [1.5.12] - 2025-07-22
 
 ### Documentation

package/assets/css/notion-style.css

@@ -1900,4 +1900,36 @@ tr:hover {
   background: #451a1a;
   border-color: #7f1d1d;
   color: #fca5a5;
+}
+
+/* Phosphor Icons Alignment */
+.ph {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  position: relative;
+  top: -0.05em; /* Fine-tune vertical centering */
+}
+
+/* Ensure icons in headings are properly sized */
+h1 .ph, h2 .ph, h3 .ph, h4 .ph, h5 .ph, h6 .ph {
+  vertical-align: baseline;
+  top: -0.1em;
+}
+
+/* Icons in lists need special handling */
+li .ph {
+  margin-right: 0.2em;
+}
+
+/* Icons in tables */
+td .ph, th .ph {
+  vertical-align: middle;
+}
+
+/* Icons in navigation */
+.nav-item .ph,
+.nav-title .ph {
+  vertical-align: middle;
+  top: 0; /* Navigation items are flex, so no adjustment needed */
 }

package/doc-builder.config.js

@@ -8,7 +8,8 @@ module.exports = {
     "authentication": false,
     "changelog": true,
     "mermaid": true,
-    "darkMode": true
+    "darkMode": true,
+    "phosphorIcons": true
   },
   "seo": {
     "enabled": true,

package/html/README.html

@@ -36,6 +36,7 @@
     
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
     
     <!-- Mermaid -->
     <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
@@ -61,8 +62,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-22T08:32:13.098Z",
-  "dateModified": "2025-07-22T08:32:13.098Z",
+  "datePublished": "2025-07-22T11:08:51.999Z",
+  "dateModified": "2025-07-22T11:08:51.999Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/README.html"
@@ -95,7 +96,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.9">Last updated: Jul 22, 2025, 08:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.13">Last updated: Jul 22, 2025, 11:08 AM UTC</span>
                 </div>
                 
                 
@@ -146,8 +147,8 @@
         <div class="nav-content" >
         <a href="/README.html" class="nav-item active" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
         <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
-        <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
-        <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
+        <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
+        <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the streamlined Vercel deployment process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</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
@@ -157,6 +158,7 @@
         <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/google-site-verification-guide.html" class="nav-item" data-tooltip="Google Search Console verification allows you to: Monitor your site&#039;s performance in Google Search Submit sitemaps for better indexing View search..."><i class="fas fa-file-alt"></i> Google Site Verification Guide</a>
+        <a href="/guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="fas fa-file-alt"></i> Phosphor Icons Guide</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
@@ -172,7 +174,7 @@
 <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>
+<h2><i class="ph ph-rocket-launch" aria-label="launch"></i> Quick Start</h2>
 <p>Create stunning documentation sites in minutes:</p>
 <pre><code class="language-bash"># Install globally
 npm install -g @knowcode/doc-builder
@@ -180,45 +182,45 @@ npm install -g @knowcode/doc-builder
 # Or use with npx
 npx @knowcode/doc-builder@latest deploy
 </code></pre>
-<h2>✨ Features</h2>
-<h3>🎨 Beautiful Design</h3>
+<h2><i class="ph ph-sparkle" aria-label="special"></i> Features</h2>
+<h3><i class="ph ph-palette" aria-label="design"></i> 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>
+<h3><i class="ph ph-magnifying-glass" aria-label="search"></i> 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>
+<h3><i class="ph ph-chart-bar" aria-label="chart"></i> 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>
+<h3><i class="ph ph-rocket-launch" aria-label="launch"></i> 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>
+<h2><i class="ph ph-book-open" aria-label="reading"></i> 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>
+<h2><i class="ph ph-target" aria-label="goal"></i> 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>
+<h2><i class="ph ph-gear-six" aria-label="tools"></i> Simple Workflow</h2>
 <h3>1. Initialize Your Project</h3>
 <pre><code class="language-bash">npx @knowcode/doc-builder init
 </code></pre>
@@ -236,9 +238,9 @@ npm install amazing-package
 
 ## Features
 
-- ✅ Feature one
-- ✅ Feature two
-- ✅ Feature three
+- <i class="ph ph-check-circle" aria-label="checked"></i> Feature one
+- <i class="ph ph-check-circle" aria-label="checked"></i> Feature two
+- <i class="ph ph-check-circle" aria-label="checked"></i> Feature three
 </code></pre>
 <h3>3. Build &amp; Preview</h3>
 <pre><code class="language-bash"># Build your site
@@ -250,7 +252,7 @@ npx doc-builder serve
 <h3>4. Deploy to Vercel</h3>
 <pre><code class="language-bash">npx doc-builder deploy
 </code></pre>
-<h2>🎨 Customization</h2>
+<h2><i class="ph ph-palette" aria-label="design"></i> 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;,
@@ -262,7 +264,7 @@ npx doc-builder serve
   }
 };
 </code></pre>
-<h2>📊 Mermaid Diagram Support</h2>
+<h2><i class="ph ph-chart-bar" aria-label="chart"></i> Mermaid Diagram Support</h2>
 <p>Create beautiful diagrams in your markdown:</p>
 <div class="mermaid-wrapper">
       <div class="mermaid-title">Diagram</div>
@@ -274,13 +276,13 @@ npx doc-builder serve
     style A fill:#e1f5fe
     style D fill:#c8e6c9</div>
     </div>
-<h2>🔒 Optional Authentication</h2>
+<h2><i class="ph ph-lock" aria-label="locked"></i> 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>
+<h2><i class="ph ph-star-four" aria-label="sparkle"></i> 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>
@@ -289,13 +291,13 @@ npx doc-builder serve
 <li><strong>Version control</strong> - Track changes with Git</li>
 <li><strong>Open source</strong> - MIT licensed</li>
 </ul>
-<h2>🤝 Contributing</h2>
+<h2><i class="ph ph-handshake" aria-label="partnership"></i> 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>
+<h2><i class="ph ph-note-pencil" aria-label="edit"></i> License</h2>
 <p>MIT © KnowCode</p>
 <hr>
 <div align="center">
-  <p>Built with ❤️ by developers, for developers</p>
+  <p>Built with <i class="ph ph-heart" aria-label="love"></i> 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> •

package/html/css/notion-style.css

@@ -1900,4 +1900,36 @@ tr:hover {
   background: #451a1a;
   border-color: #7f1d1d;
   color: #fca5a5;
+}
+
+/* Phosphor Icons Alignment */
+.ph {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  position: relative;
+  top: -0.05em; /* Fine-tune vertical centering */
+}
+
+/* Ensure icons in headings are properly sized */
+h1 .ph, h2 .ph, h3 .ph, h4 .ph, h5 .ph, h6 .ph {
+  vertical-align: baseline;
+  top: -0.1em;
+}
+
+/* Icons in lists need special handling */
+li .ph {
+  margin-right: 0.2em;
+}
+
+/* Icons in tables */
+td .ph, th .ph {
+  vertical-align: middle;
+}
+
+/* Icons in navigation */
+.nav-item .ph,
+.nav-title .ph {
+  vertical-align: middle;
+  top: 0; /* Navigation items are flex, so no adjustment needed */
 }

package/html/documentation-index.html

@@ -36,6 +36,7 @@
     
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
     
     <!-- Mermaid -->
     <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
@@ -61,8 +62,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-22T08:32:13.109Z",
-  "dateModified": "2025-07-22T08:32:13.109Z",
+  "datePublished": "2025-07-22T11:08:52.109Z",
+  "dateModified": "2025-07-22T11:08:52.109Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/documentation-index.html"
@@ -95,7 +96,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.9">Last updated: Jul 22, 2025, 08:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.13">Last updated: Jul 22, 2025, 11:08 AM UTC</span>
                 </div>
                 
                 
@@ -146,8 +147,8 @@
         <div class="nav-content" >
         <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
         <a href="/documentation-index.html" class="nav-item active" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
-        <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
-        <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
+        <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
+        <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the streamlined Vercel deployment process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</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
@@ -157,6 +158,7 @@
         <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/google-site-verification-guide.html" class="nav-item" data-tooltip="Google Search Console verification allows you to: Monitor your site&#039;s performance in Google Search Submit sitemaps for better indexing View search..."><i class="fas fa-file-alt"></i> Google Site Verification Guide</a>
+        <a href="/guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="fas fa-file-alt"></i> Phosphor Icons Guide</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
@@ -168,7 +170,7 @@
         <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>
+<p><strong>Generated</strong>: 2025-07-21 18:00 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: <i class="ph ph-check-circle" aria-label="checked"></i></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>
@@ -179,11 +181,13 @@
 └── guides/                      # How-to guides and standards
     ├── authentication-guide.md  # Authentication setup and usage
     ├── documentation-standards.md # Documentation standards
+    ├── phosphor-icons-guide.md  # Emoji to icon conversion
     ├── seo-guide.md            # SEO features and configuration
+    ├── seo-optimization-guide.md # SEO best practices
     └── troubleshooting-guide.md # Common issues and solutions
 </code></pre>
 <h2>Documentation Categories</h2>
-<h3>📚 Core Documentation</h3>
+<h3><i class="ph ph-books" aria-label="documentation"></i> Core Documentation</h3>
 <table>
 <thead>
 <tr>
@@ -208,7 +212,7 @@
 <td>Claude Code integration guide</td>
 </tr>
 </tbody></table>
-<h3>📖 Guides</h3>
+<h3><i class="ph ph-book-open" aria-label="reading"></i> Guides</h3>
 <table>
 <thead>
 <tr>
@@ -233,6 +237,16 @@
 <td>SEO features and configuration</td>
 </tr>
 <tr>
+<td>SEO Optimization Guide</td>
+<td><a href="./guides/seo-optimization-guide.md">guides/seo-optimization-guide.md</a></td>
+<td>Comprehensive SEO best practices</td>
+</tr>
+<tr>
+<td>Phosphor Icons Guide</td>
+<td><a href="./guides/phosphor-icons-guide.md">guides/phosphor-icons-guide.md</a></td>
+<td>Emoji to icon conversion feature</td>
+</tr>
+<tr>
 <td>Troubleshooting Guide</td>
 <td><a href="./guides/troubleshooting-guide.md">guides/troubleshooting-guide.md</a></td>
 <td>Common issues and solutions</td>
@@ -278,7 +292,7 @@
 
 **Generated**: YYYY-MM-DD HH:MM UTC  
 **Status**: Draft/Complete  
-**Verified**: ✅/❓
+**Verified**: <i class="ph ph-check-circle" aria-label="checked"></i>/<i class="ph ph-question" aria-label="question"></i>
 
 ## Overview
 

package/html/guides/authentication-guide.html

@@ -36,6 +36,7 @@
     
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
     
     <!-- Mermaid -->
     <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
@@ -61,8 +62,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-22T08:32:13.111Z",
-  "dateModified": "2025-07-22T08:32:13.111Z",
+  "datePublished": "2025-07-22T11:08:52.112Z",
+  "dateModified": "2025-07-22T11:08:52.112Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
@@ -101,7 +102,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.9">Last updated: Jul 22, 2025, 08:32 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.13">Last updated: Jul 22, 2025, 11:08 AM UTC</span>
                 </div>
                 
                 
@@ -152,8 +153,8 @@
         <div class="nav-content" >
         <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
         <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
-        <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
-        <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
+        <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
+        <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the streamlined Vercel deployment process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</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
@@ -163,6 +164,7 @@
         <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/google-site-verification-guide.html" class="nav-item" data-tooltip="Google Search Console verification allows you to: Monitor your site&#039;s performance in Google Search Submit sitemaps for better indexing View search..."><i class="fas fa-file-alt"></i> Google Site Verification Guide</a>
+        <a href="/guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="fas fa-file-alt"></i> Phosphor Icons Guide</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
@@ -174,25 +176,25 @@
         <main class="content">
             <div class="content-inner">
                 <h1>Authentication Guide for @knowcode/doc-builder</h1>
-<p><strong>Generated</strong>: 2025-07-21 18:30 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: ✅</p>
+<p><strong>Generated</strong>: 2025-07-21 18:30 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: <i class="ph ph-check-circle" aria-label="checked"></i></p>
 <h2>Overview</h2>
 <p>This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic username/password access control.</p>
 <h2>What is Authentication?</h2>
 <p>The authentication feature in doc-builder provides a simple way to protect your documentation from unauthorized access. When enabled, users must log in with a username and password before viewing any documentation pages.</p>
 <h3>Features</h3>
 <ul>
-<li>✅ <strong>Client-side authentication</strong> - Works with static site hosting</li>
-<li>✅ <strong>Cookie-based sessions</strong> - Users stay logged in across pages</li>
-<li>✅ <strong>Redirect handling</strong> - Returns users to requested page after login</li>
-<li>✅ <strong>Logout functionality</strong> - Clear session and return to login</li>
-<li>✅ <strong>Customizable credentials</strong> - Set your own username/password</li>
+<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Client-side authentication</strong> - Works with static site hosting</li>
+<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Cookie-based sessions</strong> - Users stay logged in across pages</li>
+<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Redirect handling</strong> - Returns users to requested page after login</li>
+<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Logout functionality</strong> - Clear session and return to login</li>
+<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Customizable credentials</strong> - Set your own username/password</li>
 </ul>
 <h3>Limitations</h3>
 <ul>
-<li>⚠️ <strong>Basic security</strong> - Suitable for casual protection only</li>
-<li>⚠️ <strong>Client-side validation</strong> - Not suitable for highly sensitive data</li>
-<li>⚠️ <strong>Single user</strong> - No multi-user or role-based access</li>
-<li>⚠️ <strong>Credentials in JavaScript</strong> - Visible in browser developer tools</li>
+<li><i class="ph ph-warning-circle" aria-label="warning"></i> <strong>Basic security</strong> - Suitable for casual protection only</li>
+<li><i class="ph ph-warning-circle" aria-label="warning"></i> <strong>Client-side validation</strong> - Not suitable for highly sensitive data</li>
+<li><i class="ph ph-warning-circle" aria-label="warning"></i> <strong>Single user</strong> - No multi-user or role-based access</li>
+<li><i class="ph ph-warning-circle" aria-label="warning"></i> <strong>Credentials in JavaScript</strong> - Visible in browser developer tools</li>
 </ul>
 <h2>How Authentication Works</h2>
 <div class="mermaid-wrapper">
@@ -298,7 +300,7 @@
 <li><strong>Logout</strong>: Click logout link in header (when available)</li>
 </ol>
 <h2>Security Considerations</h2>
-<h3>⚠️ Important Warnings</h3>
+<h3><i class="ph ph-warning-circle" aria-label="warning"></i> Important Warnings</h3>
 <ol>
 <li><strong>Client-Side Only</strong>: Authentication happens in the browser, making it unsuitable for truly sensitive data</li>
 <li><strong>Visible Credentials</strong>: Username/password are embedded in JavaScript and visible to anyone who views page source</li>
@@ -306,7 +308,7 @@
 <li><strong>Static Files</strong>: All documentation files are still publicly accessible if URLs are known</li>
 </ol>
 <h3>When to Use</h3>
-<p>✅ <strong>Good for:</strong></p>
+<p><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Good for:</strong></p>
 <ul>
 <li>Internal team documentation</li>
 <li>Preview deployments</li>
@@ -314,7 +316,7 @@
 <li>Preventing search engine indexing</li>
 <li>Client presentations</li>
 </ul>
-<p>❌ <strong>Not suitable for:</strong></p>
+<p><i class="ph ph-x-circle" aria-label="error"></i> <strong>Not suitable for:</strong></p>
 <ul>
 <li>Highly confidential information</li>
 <li>Personal data (GDPR/privacy)</li>