@knowcode/doc-builder 1.8.7 → 1.9.1

package/html/css/notion-style.css

@@ -289,8 +289,7 @@ pre code {
   }
 }
 
-.logout-btn,
-.auth-btn {
+.logout-btn {
   background: none;
   border: none;
   font-size: var(--text-lg);
@@ -313,13 +312,6 @@ pre code {
   transform: translateY(-1px);
 }
 
-.auth-btn:hover {
-  background: var(--color-bg-tertiary);
-  opacity: 1;
-  color: var(--color-text-primary);
-  transform: translateY(-1px);
-}
-
 /* Sidebar */
 .sidebar {
   position: relative;
@@ -327,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), transform 0.3s ease, margin-left 0.3s ease;
+  transition: width var(--duration-normal);
   min-width: 200px;
   max-width: 500px;
   user-select: none;
@@ -338,14 +330,6 @@ 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 */
 
 
@@ -698,65 +682,12 @@ th {
   background: var(--color-bg-secondary);
   border-bottom: 1px solid var(--color-border-default);
   color: var(--color-text-primary);
-  vertical-align: top !important;
 }
 
 td {
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border-default);
   color: var(--color-text-primary);
-  vertical-align: top !important;
-}
-
-/* Ensure all table cell content is top-aligned */
-table th,
-table td {
-  vertical-align: top !important;
-}
-
-/* Ensure nested elements in table cells don't affect alignment */
-table td > *,
-table th > * {
-  vertical-align: top;
-}
-
-/* Remove top margin from first element in table cells */
-td > *:first-child,
-th > *:first-child {
-  margin-top: 0 !important;
-}
-
-/* Remove bottom margin from last element in table cells */
-td > *:last-child,
-th > *:last-child {
-  margin-bottom: 0 !important;
-}
-
-/* Specifically target common block elements that might be first in cells */
-td > h1:first-child,
-td > h2:first-child,
-td > h3:first-child,
-td > h4:first-child,
-td > h5:first-child,
-td > h6:first-child,
-td > p:first-child,
-td > ul:first-child,
-td > ol:first-child,
-td > blockquote:first-child,
-td > pre:first-child,
-th > h1:first-child,
-th > h2:first-child,
-th > h3:first-child,
-th > h4:first-child,
-th > h5:first-child,
-th > h6:first-child,
-th > p:first-child,
-th > ul:first-child,
-th > ol:first-child,
-th > blockquote:first-child,
-th > pre:first-child {
-  margin-top: 0 !important;
-  padding-top: 0 !important;
 }
 
 tr:last-child td {
@@ -1011,20 +942,6 @@ tr:hover {
   cursor: pointer;
   color: var(--color-text-primary);
   padding: var(--space-2);
-  border-radius: var(--radius-small);
-  transition: all var(--duration-fast) var(--easing-out);
-}
-
-.menu-toggle:hover {
-  background: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-}
-
-/* Show menu toggle on desktop when menu starts closed or is closed */
-@media (min-width: 769px) {
-  body.menu-starts-closed .menu-toggle {
-    display: block;
-  }
 }
 
 /* Responsive Design */
@@ -1037,39 +954,19 @@ tr:hover {
   
   /* Hide sidebar on mobile */
   .sidebar {
-    position: fixed;
+    position: absolute;
     top: calc(var(--header-height) + var(--breadcrumb-height));
     left: 0;
     height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
-    z-index: 1002; /* Above header and floating button */
+    z-index: 999;
     transform: translateX(-100%);
     transition: transform var(--duration-normal) var(--easing-out);
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); /* Add shadow for depth */
   }
   
   .sidebar.open {
     transform: translateX(0);
   }
   
-  /* Mobile menu overlay */
-  .sidebar-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 1001; /* Below sidebar but above content */
-    opacity: 0;
-    transition: opacity var(--duration-normal);
-  }
-  
-  .sidebar-overlay.active {
-    display: block;
-    opacity: 1;
-  }
-  
   .main-wrapper {
     margin-left: 0;
     margin-top: var(--header-height); /* Only account for fixed header on mobile */
@@ -1077,7 +974,7 @@ tr:hover {
   
   .content {
     margin-left: 0;
-    padding: var(--space-3) var(--space-4); /* Reduced top/bottom padding on mobile */
+    padding: var(--space-6) var(--space-4);
   }
   
   .menu-toggle {
@@ -1091,13 +988,13 @@ tr:hover {
   padding: var(--space-4);
   border-radius: var(--radius-lg);
   overflow-x: auto;
-  margin: var(--space-2) 0;
+  margin: var(--space-4) 0;
 }
 
 /* Mermaid Full Screen Viewer */
 .mermaid-container {
   position: relative;
-  margin: var(--space-3) 0;
+  margin: var(--space-6) 0;
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
   overflow: hidden;
@@ -1159,7 +1056,7 @@ tr:hover {
 }
 
 .mermaid-wrapper {
-  padding: var(--space-3);
+  padding: var(--space-6);
   overflow: auto;
   max-height: 600px;
 }
@@ -1681,62 +1578,6 @@ tr:hover {
 
 /* Remove custom positioning variables - tooltips always go right */
 
-/* Floating Menu Button */
-.floating-menu-toggle {
-  position: fixed;
-  bottom: var(--space-6);
-  right: var(--space-6);
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: var(--color-accent-blue);
-  color: white;
-  border: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  cursor: pointer;
-  z-index: 1001; /* Above sidebar */
-  opacity: 0;
-  transform: scale(0.8) translateY(20px);
-  transition: all var(--duration-normal) var(--easing-out);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.floating-menu-toggle.visible {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-}
-
-.floating-menu-toggle:hover {
-  transform: scale(1.1) translateY(0);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
-}
-
-.floating-menu-toggle:active {
-  transform: scale(0.95) translateY(0);
-}
-
-.floating-menu-toggle i {
-  transition: transform var(--duration-fast) var(--easing-out);
-}
-
-.floating-menu-toggle:hover i {
-  transform: rotate(90deg);
-}
-
-/* Dark mode styles for floating button */
-.dark-mode .floating-menu-toggle {
-  background: var(--color-accent-blue);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.dark-mode .floating-menu-toggle:hover {
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
-}
-
 /* Mobile adjustments */
 @media (max-width: 768px) {
   /* Disable tooltips on mobile to prevent overlap issues */
@@ -1755,7 +1596,7 @@ tr:hover {
   /* Sidebar positioning handled in earlier media query */
   
   .content {
-    padding: var(--space-3) var(--space-4); /* Consistent reduced padding on mobile */
+    padding: var(--space-4);
   }
   
   .content-inner {
@@ -1768,7 +1609,10 @@ tr:hover {
     padding: 0 var(--space-4);
   }
   
-  /* Keep preview banner fixed on mobile */
+  .preview-banner {
+    position: relative;
+    top: 0;
+  }
   
   /* Keep breadcrumbs fixed on mobile to prevent double spacing */
 }
@@ -1983,88 +1827,4 @@ 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; /* 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: 1;
-  top: -0.05em;
-}
-
-/* Icons in lists need special handling */
-li .ph {
-  margin-right: 0.3em;
-  font-size: 1.1em;
-  line-height: 1;
-  vertical-align: middle;
-  top: -0.05em;
-}
-
-/* Icons in tables */
-td .ph, th .ph {
-  line-height: 1;
-  vertical-align: middle;
-  top: -0.05em;
-}
-
-/* Icons in navigation */
-.nav-item .ph,
-.nav-title .ph {
-  vertical-align: middle;
-  line-height: 1;
-  top: 0; /* Navigation items are flex, so no adjustment needed */
-}
-
-/* Icon size adjustments for better visual balance */
-.content p .ph {
-  font-size: 1.1em; /* Slightly larger than text for visual balance */
-}
-
-/* Special handling for inline code with icons */
-code .ph {
-  font-size: 0.9em;
-  vertical-align: middle;
-  line-height: 1;
-  top: 0;
-}
-
-/* Additional fine-tuning for specific contexts */
-.content-inner .ph {
-  /* Remove the transform as we're now using consistent vertical-align: middle */
-}
-
-/* ============================================================================
-   Private Navigation Visibility
-   ============================================================================ */
-
-/* Hide private navigation sections by default */
-.private-nav {
-  display: none;
-}
-
-/* Show private navigation when user is authenticated */
-body.authenticated .private-nav {
-  display: block;
-}
-
-/* Smooth transition for authentication state changes */
-.nav-section {
-  transition: opacity 0.2s ease-in-out;
-}
-
-/* Optional: Add a lock icon to private sections */
-.private-nav .nav-title::after {
-  content: ' 🔒';
-  font-size: 0.8em;
-  opacity: 0.6;
 }

package/html/documentation-index.html

@@ -3,41 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose.">
-    <title>Documentation Index | @knowcode/doc-builder</title>
-    
-    <meta name="author" content="Lindsay Smith">
-    <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, guide, claude">
-    <meta name="robots" content="index, follow">
-    <link rel="canonical" href="https://doc-builder-delta.vercel.app/documentation-index.html">
-    
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="article">
-    <meta property="og:url" content="https://doc-builder-delta.vercel.app/documentation-index.html">
-    <meta property="og:title" content="Documentation Index | @knowcode/doc-builder">
-    <meta property="og:description" content="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose.">
-    <meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
-    <meta property="og:site_name" content="@knowcode/doc-builder">
-    <meta property="og:locale" content="en_US">
-    
-    <!-- Twitter Card -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@planbbackups">
-    <meta name="twitter:creator" content="@planbbackups">
-    <meta name="twitter:title" content="Documentation Index | @knowcode/doc-builder">
-    <meta name="twitter:description" content="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose.">
-    <meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
-    
-    <!-- Custom Meta Tags -->
-    <meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
-    <meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
+    <meta name="description" content="Beautiful documentation with the least effort possible">
+    <title>Documentation Index - @knowcode/doc-builder</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">
-    <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>
@@ -45,84 +18,8 @@
     <!-- Styles -->
     <link rel="stylesheet" href="/css/notion-style.css">
     
-    
-    <!-- Hide content until auth check -->
-    <style>
-      body { 
-        visibility: hidden; 
-        opacity: 0; 
-        transition: opacity 0.3s ease;
-      }
-      body.authenticated { 
-        visibility: visible; 
-        opacity: 1; 
-      }
-      /* Show login/logout pages immediately */
-      body.auth-page {
-        visibility: visible;
-        opacity: 1;
-      }
-      /* Style auth button consistently */
-      .auth-btn {
-        background: none;
-        border: none;
-        color: var(--text-secondary);
-        cursor: pointer;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        transition: all 0.2s;
-        font-size: 1.1rem;
-      }
-      .auth-btn:hover {
-        background: var(--bg-secondary);
-        color: var(--text-primary);
-      }
-    </style>
-    
-    
     <!-- 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>">
-    
-    <script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "TechArticle",
-  "headline": "Documentation Index",
-  "description": "This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose.",
-  "author": {
-    "@type": "Person",
-    "name": "Lindsay Smith"
-  },
-  "publisher": {
-    "@type": "Organization",
-    "name": "Knowcode Ltd",
-    "url": "https://knowcode.tech"
-  },
-  "datePublished": "2025-07-26T16:10:10.581Z",
-  "dateModified": "2025-07-26T16:10:10.581Z",
-  "mainEntityOfPage": {
-    "@type": "WebPage",
-    "@id": "https://doc-builder-delta.vercel.app/documentation-index.html"
-  },
-  "breadcrumb": {
-    "@type": "BreadcrumbList",
-    "itemListElement": [
-      {
-        "@type": "ListItem",
-        "position": 1,
-        "name": "@knowcode/doc-builder",
-        "item": "https://doc-builder-delta.vercel.app"
-      },
-      {
-        "@type": "ListItem",
-        "position": 2,
-        "name": "Documentation Index",
-        "item": "https://doc-builder-delta.vercel.app/documentation-index.html"
-      }
-    ]
-  }
-}
-</script>
+    <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 -->
@@ -132,14 +29,10 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.8.6">Last updated: Jul 26, 2025, 04:10 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.4.21">Last updated: Jul 27, 2025, 08:32 AM UTC</span>
                 </div>
                 
                 
-                <a href="../login.html" class="auth-btn" title="Login/Logout">
-                    <i class="fas fa-sign-in-alt"></i>
-                </a>
-                
                 
                 <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
                     <i class="fas fa-moon"></i>
@@ -181,12 +74,13 @@
             <nav class="navigation">
                 
       <div class="nav-section" data-level="0">
-        <a class="nav-title" href="/README.html"  >
+        <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="@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="/image-modal-test.html" class="nav-item" data-tooltip="This document tests the new image modal functionality in doc-builder."><i class="fas fa-file-alt"></i> Image Modal Test</a>
         <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 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">
@@ -198,6 +92,7 @@
         <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase - a secure, scalable authentication platform."><i class="fas fa-file-alt"></i> Authentication Guide</a>
         <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/image-modal-guide.html" class="nav-item" data-tooltip="When users click on any image in your generated documentation, it opens in a professional modal overlay with: Full-screen viewing experience Smooth..."><i class="fas fa-file-alt"></i> Image Modal 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/private-directory-authentication.html" class="nav-item" data-tooltip="The @knowcode/doc-builder provides flexible authentication options to protect your documentation."><i class="fas fa-file-alt"></i> Private Directory Authentication</a>
         <a href="/guides/public-site-deployment.html" class="nav-item" data-tooltip="The @knowcode/doc-builder now supports deploying public documentation sites without authentication."><i class="fas fa-file-alt"></i> Public Site Deployment</a>
@@ -206,7 +101,7 @@
         <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>
         <a href="/guides/windows-setup-guide.html" class="nav-item" data-tooltip="This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel."><i class="fas fa-file-alt"></i> Windows Setup Guide</a></div></div>
-      <div class="nav-section private-nav" data-level="1">
+      <div class="nav-section" data-level="1">
         <a class="nav-title collapsible" href="#" data-target="nav-private-1" >
           <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
         </a>
@@ -219,7 +114,7 @@
         <a href="/private/supabase-auth-setup-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase."><i class="fas fa-file-alt"></i> Supabase Auth Setup Guide</a>
         <a href="/private/test-private-doc.html" class="nav-item" data-tooltip="Test Private Document."><i class="fas fa-file-alt"></i> Test Private Doc</a>
         <a href="/private/user-management-tooling.html" class="nav-item" data-tooltip="The user management system is a set of tools designed to manage user access to Supabase-authenticated documentation sites built with."><i class="fas fa-file-alt"></i> User Management Tooling</a></div></div>
-      <div class="nav-section private-nav" data-level="2">
+      <div class="nav-section" data-level="2">
         <a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
           <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
         </a>
@@ -230,6 +125,12 @@
         <a href="/private/launch/go-to-market-strategy.html" class="nav-item" data-tooltip="Go-to-Market Strategy &amp; Product Launch Plan."><i class="fas fa-file-alt"></i> Go To Market Strategy</a>
         <a href="/private/launch/launch-announcements.html" class="nav-item" data-tooltip="This document contains ready-to-use announcement templates for launching @knowcode/doc-builder across various platforms and channels."><i class="fas fa-file-alt"></i> Launch Announcements</a>
         <a href="/private/launch/vercel-deployment-auth-setup.html" class="nav-item" data-tooltip="Vercel Deployment Authentication Setup Guide."><i class="fas fa-file-alt"></i> Vercel Deployment Auth Setup</a></div></div>
+      <div class="nav-section" data-level="1">
+        <a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
+          <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Prompts
+        </a>
+        <div class="nav-content collapsed" id="nav-prompts-1">
+        <a href="/prompts/markdown-document-standards.html" class="nav-item" data-tooltip="Detailed introduction to the topic..."><i class="fas fa-file-alt"></i> Markdown Document Standards</a></div></div>
             </nav>
             <div class="resize-handle"></div>
         </aside>
@@ -248,13 +149,14 @@
 └── guides/                      # How-to guides and standards
     ├── authentication-guide.md  # Authentication setup and usage
     ├── documentation-standards.md # Documentation standards
+    ├── image-modal-guide.md     # Image modal feature guide
     ├── 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><i class="ph ph-books" aria-label="documentation"></i> Core Documentation</h3>
+<h3>📚 Core Documentation</h3>
 <table>
 <thead>
 <tr>
@@ -279,7 +181,7 @@
 <td>Claude Code integration guide</td>
 </tr>
 </tbody></table>
-<h3><i class="ph ph-book-open" aria-label="reading"></i> Guides</h3>
+<h3>📖 Guides</h3>
 <table>
 <thead>
 <tr>
@@ -299,6 +201,11 @@
 <td>Setting up password protection</td>
 </tr>
 <tr>
+<td>Image Modal Guide</td>
+<td><a href="./guides/image-modal-guide.md">guides/image-modal-guide.md</a></td>
+<td>Full-screen image viewing feature</td>
+</tr>
+<tr>
 <td>SEO Guide</td>
 <td><a href="./guides/seo-guide.md">guides/seo-guide.md</a></td>
 <td>SEO features and configuration</td>
@@ -419,17 +326,7 @@ Detailed information...
     </div>
     
     <!-- Scripts -->
-    <script>
-    // Pass configuration to frontend
-    window.docBuilderConfig = {
-      features: {
-        showPdfDownload: true,
-        menuDefaultOpen: false
-      }
-    };
-    </script>
     <script src="/js/main.js"></script>
-    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
-    <script src="/js/auth.js"></script>
+    
 </body>
 </html>