npm - @knowcode/doc-builder - Versions diffs - 1.9.30 → 1.10.0 - Mend

@knowcode/doc-builder 1.9.30 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/lib/core-builder.js +164 -174
package/lib/emoji-mapper.js +27 -12
package/package.json +12 -2
package/.claude/settings.local.json +0 -56
package/CACHE-BUSTING-GUIDE.md +0 -82
package/CLAUDE.md +0 -86
package/CONTRIBUTING.md +0 -148
package/GITHUB_SETUP.md +0 -203
package/RELEASE-NOTES-1.7.5.md +0 -64
package/Screenshot 2025-07-22 at 19.51.21.png +0 -0
package/Screenshot 2025-07-26 at 17.06.49.png +0 -0
package/add-user-clive.sql +0 -35
package/add-user-lindsay-fixed.sql +0 -85
package/add-user-lindsay.sql +0 -68
package/add-user-pmorgan.sql +0 -35
package/add-user-robbie.sql +0 -35
package/add-wru-users.sql +0 -105
package/debug-login.sql +0 -30
package/doc-builder.config.js +0 -126
package/doc-builder.config.js.backup.1753793768283 +0 -47
package/doc-builder.config.js.backup.1753803964423 +0 -114
package/doc-builder.config.js.backup.1753945707032 +0 -115
package/doc-builder.config.js.backup.1754059241330 +0 -115
package/doc-builder.config.js.backup.1754119567787 +0 -123
package/doc-builder.config.js.backup.1754120048862 +0 -124
package/doc-builder.config.js.backup.1754120529913 +0 -124
package/doc-builder.config.js.backup.1754218469785 +0 -124
package/doc-builder.config.js.backup.1754384764054 +0 -124
package/doc-builder.config.js.backup.1754567425847 +0 -124
package/doc-builder.config.js.backup.1754568137859 +0 -126
package/doc-builder.config.js.backup.1754569388252 +0 -126
package/doc-builder.config.js.backup.1754576694123 +0 -126
package/doc-builder.config.js.backup.1755031374829 +0 -126
package/doc-builder.config.js.backup.1755034500990 +0 -126
package/doc-builder.config.js.backup.1755034809236 +0 -126
package/grant-access.sql +0 -15
package/html/11.png +0 -0
package/html/404.html +0 -115
package/html/README.html +0 -522
package/html/Screenshot 2025-08-12 at 21.35.07.png +0 -0
package/html/about-doc-builder.html +0 -491
package/html/auth.js +0 -157
package/html/claude-workflow-guide.html +0 -525
package/html/css/notion-style.css +0 -2502
package/html/documentation-index.html +0 -471
package/html/guides/authentication-default-change.html +0 -370
package/html/guides/authentication-guide.html +0 -509
package/html/guides/cache-control-anti-pattern.html +0 -361
package/html/guides/claude-workflow-guide.html +0 -1074
package/html/guides/configuration-guide.html +0 -472
package/html/guides/document-standards.html +0 -518
package/html/guides/documentation-standards.html +0 -694
package/html/guides/html-embedding-guide.html +0 -461
package/html/guides/image-modal-guide.html +0 -515
package/html/guides/next-steps-walkthrough.html +0 -638
package/html/guides/phosphor-icons-guide.html +0 -584
package/html/guides/private-directory-authentication-troubleshooting.html +0 -555
package/html/guides/private-directory-authentication.html +0 -541
package/html/guides/public-site-deployment.html +0 -431
package/html/guides/search-engine-verification-guide.html +0 -542
package/html/guides/seo-guide.html +0 -661
package/html/guides/seo-optimization-guide.html +0 -887
package/html/guides/supabase-auth-implementation-plan.html +0 -543
package/html/guides/supabase-auth-integration-plan.html +0 -671
package/html/guides/supabase-auth-setup-guide.html +0 -498
package/html/guides/supabase-authentication-complete-guide.html +0 -866
package/html/guides/troubleshooting-guide.html +0 -633
package/html/guides/vercel-deployment-auth-setup.html +0 -337
package/html/guides/windows-setup-guide.html +0 -859
package/html/image-modal-test.html +0 -318
package/html/index.html +0 -522
package/html/js/auth.js +0 -157
package/html/js/main.js +0 -1754
package/html/launch/README.html +0 -297
package/html/launch/bubble-plugin-specification.html +0 -933
package/html/launch/go-to-market-strategy.html +0 -663
package/html/launch/launch-announcements.html +0 -593
package/html/login.html +0 -102
package/html/logout.html +0 -18
package/html/private/cache-control-anti-pattern.html +0 -429
package/html/private/launch/README.html +0 -371
package/html/private/launch/auth-cleanup-summary.html +0 -361
package/html/private/launch/bubble-plugin-specification.html +0 -1007
package/html/private/launch/go-to-market-strategy.html +0 -737
package/html/private/launch/launch-announcements.html +0 -667
package/html/private/launch/vercel-deployment-auth-setup.html +0 -417
package/html/private/next-steps-walkthrough.html +0 -679
package/html/private/supabase-auth-implementation-completed.html +0 -454
package/html/private/supabase-auth-implementation-plan.html +0 -594
package/html/private/supabase-auth-integration-plan.html +0 -704
package/html/private/supabase-auth-setup-guide.html +0 -555
package/html/private/test-private-doc.html +0 -302
package/html/private/user-management-tooling.html +0 -601
package/html/prompts/Screenshot 2025-08-02 at 08.49.55.png +0 -0
package/html/prompts/beautiful-documentation-design.html +0 -784
package/html/prompts/markdown-document-standards.html +0 -422
package/html/prompts/project-rename-strategy-sasha-publish.html +0 -530
package/html/robots.txt +0 -9
package/html/sitemap.xml +0 -357
package/html/test-questions/how-does-it-work%3F.html +0 -294
package/html/test-questions/step-1%3A%20getting-started.html +0 -289
package/html/test-questions/what-is-the-purpose.html +0 -293
package/html/test-status.html +0 -281
package/html/vercel-cli-setup-guide.html +0 -495
package/html/vercel-first-time-setup-guide.html +0 -454
package/html/vercel.json +0 -29
package/html-static/11.png +0 -0
package/html-static/404.html +0 -115
package/html-static/README.html +0 -609
package/html-static/Screenshot 2025-08-12 at 21.35.07.png +0 -0
package/html-static/about-doc-builder.html +0 -578
package/html-static/css/notion-style.css +0 -2502
package/html-static/documentation-index.html +0 -558
package/html-static/guides/authentication-default-change.html +0 -457
package/html-static/guides/authentication-guide.html +0 -596
package/html-static/guides/claude-workflow-guide.html +0 -1161
package/html-static/guides/configuration-guide.html +0 -559
package/html-static/guides/documentation-standards.html +0 -781
package/html-static/guides/html-embedding-guide.html +0 -548
package/html-static/guides/image-modal-guide.html +0 -602
package/html-static/guides/phosphor-icons-guide.html +0 -671
package/html-static/guides/private-directory-authentication-troubleshooting.html +0 -642
package/html-static/guides/private-directory-authentication.html +0 -628
package/html-static/guides/public-site-deployment.html +0 -518
package/html-static/guides/search-engine-verification-guide.html +0 -629
package/html-static/guides/seo-guide.html +0 -748
package/html-static/guides/seo-optimization-guide.html +0 -974
package/html-static/guides/supabase-authentication-complete-guide.html +0 -953
package/html-static/guides/troubleshooting-guide.html +0 -720
package/html-static/guides/windows-setup-guide.html +0 -946
package/html-static/image-modal-test.html +0 -405
package/html-static/index.html +0 -609
package/html-static/js/main.js +0 -1754
package/html-static/prompts/Screenshot 2025-08-02 at 08.49.55.png +0 -0
package/html-static/prompts/beautiful-documentation-design.html +0 -871
package/html-static/prompts/markdown-document-standards.html +0 -509
package/html-static/prompts/project-rename-strategy-sasha-publish.html +0 -617
package/html-static/robots.txt +0 -5
package/html-static/sitemap.xml +0 -195
package/html-static/test-questions/how-does-it-work%3F.html +0 -381
package/html-static/test-questions/step-1%3A%20getting-started.html +0 -376
package/html-static/test-questions/what-is-the-purpose.html +0 -380
package/html-static/vercel-cli-setup-guide.html +0 -582
package/html-static/vercel-first-time-setup-guide.html +0 -541
package/manage-users.sql +0 -191
package/migrate-to-domain-auth.sql +0 -47
package/package/CACHE-BUSTING-GUIDE.md +0 -82
package/package/CHANGELOG.md +0 -902
package/package/README.md +0 -248
package/package/assets/css/notion-style.css +0 -2211
package/package/assets/js/auth.js +0 -67
package/package/assets/js/main.js +0 -1565
package/package/cli.js +0 -764
package/package/index.js +0 -38
package/package/knowcode-doc-builder-1.3.15.tgz +0 -0
package/package/lib/builder.js +0 -32
package/package/lib/config.js +0 -278
package/package/lib/core-builder.js +0 -957
package/package/lib/deploy.js +0 -497
package/package/lib/dev-server.js +0 -96
package/package/package.json +0 -34
package/package/scripts/npx-runner.js +0 -27
package/package/scripts/setup.js +0 -56
package/package/test-cache-bust.sh +0 -43
package/public-config.js +0 -22
package/public-html/404.html +0 -115
package/public-html/README.html +0 -149
package/public-html/css/notion-style.css +0 -2036
package/public-html/index.html +0 -149
package/public-html/js/auth.js +0 -67
package/public-html/js/main.js +0 -1485
package/quick-test-commands.md +0 -40
package/recordings/Screenshot 2025-07-24 at 18.22.01.png +0 -0
package/recordings/mh-ls-22jul.txt +0 -2305
package/screenshot.png +0 -0
package/scripts/Screenshot 2025-07-23 at 15.39.41.png +0 -0
package/setup-database-v2.sql +0 -53
package/setup-database.sql +0 -41
package/test-auth-config.js +0 -17
package/test-cache-bust.sh +0 -43
package/test-docs/README.md +0 -39
package/test-html/404.html +0 -115
package/test-html/README.html +0 -172
package/test-html/auth.js +0 -97
package/test-html/css/notion-style.css +0 -2036
package/test-html/index.html +0 -172
package/test-html/js/auth.js +0 -97
package/test-html/js/main.js +0 -1485
package/test-html/login.html +0 -102
package/test-html/logout.html +0 -18
package/update-domain.sql +0 -9
package/user-access-view.sql +0 -49
package/user-management/README.md +0 -301
package/user-management/add-users.sh +0 -776
package/user-management/create-user.js +0 -65
package/user-management/users.txt +0 -15
package/view-all-users.sql +0 -40
package/wru-auth-config.js +0 -17

package/html-static/guides/image-modal-guide.html DELETED Viewed

@@ -1,602 +0,0 @@
-<!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="The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...">
-    <title>Image Modal Guide | @knowcode/doc-builder</title>
-    <meta name="generator" content="@knowcode/doc-builder by Knowcode Ltd">
-    <meta name="author" content="Lindsay Smith">
-    <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, images, modal">
-    <meta name="robots" content="index, follow">
-    <link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/image-modal-guide.html">
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="article">
-    <meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/image-modal-guide.html">
-    <meta property="og:title" content="Image Modal Guide | @knowcode/doc-builder">
-    <meta property="og:description" content="The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...">
-    <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="Image Modal Guide | @knowcode/doc-builder">
-    <meta name="twitter:description" content="The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...">
-    <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">
-    <!-- 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>
-    <!-- Styles -->
-    <link rel="stylesheet" href="../css/notion-style.css">
-    <!-- Blue theme and white background overrides for static output -->
-    <style>
-      /* Override green colors with blue */
-      :root {
-        --primary: #2563eb;
-        --primary-dark: #1d4ed8;
-        --primary-light: #dbeafe;
-        --accent: #3b82f6;
-        --color-accent-green: #2563eb;
-        --color-accent-emerald: #3b82f6;
-        /* White backgrounds for cleaner appearance */
-        --color-bg-secondary: #FFFFFF;
-        --color-bg-tertiary: #FAFAFA;
-        --color-bg-hover: #F8F9FA;
-      }
-      /* Override green status colors with blue variants */
-      .nav-item.active {
-        background-color: #dbeafe !important;
-        color: #1d4ed8 !important;
-      }
-      .nav-item:hover {
-        background-color: #eff6ff !important;
-      }
-      /* Override complete/success icons to blue */
-      .ph-check-circle[style*="color: #059669"] {
-        color: #2563eb !important;
-      }
-      /* Override README/home icon color */
-      .ph-house[style*="color: #059669"] {
-        color: #2563eb !important;
-      }
-      /* Override links */
-      a {
-        color: #2563eb;
-      }
-      a:hover {
-        color: #1d4ed8;
-      }
-      /* Override buttons and interactive elements */
-      .theme-toggle:hover,
-      .menu-toggle:hover {
-        background-color: #dbeafe;
-        color: #1d4ed8;
-      }
-      /* Override nav title hover */
-      .nav-title:hover {
-        background-color: #eff6ff;
-      }
-      /* White backgrounds for sidebar and navigation */
-      body:not(.dark-mode) .sidebar {
-        background: #FFFFFF !important;
-        background-color: #FFFFFF !important;
-        border-right: 1px solid #E5E7EB !important;
-      }
-      body:not(.dark-mode) .nav-section {
-        background: #FFFFFF !important;
-        background-color: #FFFFFF !important;
-      }
-      body:not(.dark-mode) .nav-content {
-        background: #FFFFFF !important;
-        background-color: #FFFFFF !important;
-      }
-      body:not(.dark-mode) .navigation {
-        background: #FFFFFF !important;
-        background-color: #FFFFFF !important;
-      }
-      /* Subtle separation for nav sections */
-      body:not(.dark-mode) .nav-section + .nav-section {
-        border-top: 1px solid #F3F4F6;
-      }
-      /* Adjust hover states for white backgrounds */
-      body:not(.dark-mode) .nav-item:hover {
-        background-color: #F8F9FA !important;
-      }
-      body:not(.dark-mode) .nav-title.collapsible:hover {
-        background-color: #F8F9FA !important;
-      }
-      /* Header stays white (already is) but ensure consistency */
-      body:not(.dark-mode) .header {
-        background: #FFFFFF !important;
-        background-color: #FFFFFF !important;
-        border-bottom: 1px solid #E5E7EB !important;
-      }
-      /* Ensure search box looks good on white */
-      body:not(.dark-mode) .filter-input,
-      body:not(.dark-mode) .sidebar-search {
-        background: #F8F9FA !important;
-        background-color: #F8F9FA !important;
-        border: 1px solid #E5E7EB !important;
-      }
-      body:not(.dark-mode) .filter-input:focus,
-      body:not(.dark-mode) .sidebar-search:focus {
-        background: #FFFFFF !important;
-        background-color: #FFFFFF !important;
-        border-color: #2563eb !important;
-      }
-      /* Override breadcrumbs */
-      .breadcrumbs a {
-        color: #2563eb;
-      }
-      .breadcrumbs a:hover {
-        color: #1d4ed8;
-        background-color: #dbeafe;
-      }
-      /* Override filter icon */
-      .filter-icon {
-        color: #2563eb;
-      }
-      /* Override deployment info on hover */
-      .deployment-date:hover {
-        color: #2563eb;
-      }
-      /* Dark mode adjustments */
-      body.dark-mode {
-        --primary: #3b82f6;
-        --primary-dark: #2563eb;
-        --primary-light: #1e3a8a;
-        --accent: #60a5fa;
-      }
-      body.dark-mode .nav-item.active {
-        background-color: rgba(59, 130, 246, 0.1) !important;
-        color: #60a5fa !important;
-      }
-      body.dark-mode .nav-item:hover {
-        background-color: rgba(59, 130, 246, 0.05) !important;
-      }
-      body.dark-mode a {
-        color: #60a5fa;
-      }
-      body.dark-mode a:hover {
-        color: #93bbfc;
-      }
-    </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": "Image Modal Guide",
-  "description": "The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...",
-  "author": {
-    "@type": "Person",
-    "name": "Lindsay Smith"
-  },
-  "publisher": {
-    "@type": "Organization",
-    "name": "Knowcode Ltd",
-    "url": "https://knowcode.tech"
-  },
-  "datePublished": "2025-08-12T21:40:09.513Z",
-  "dateModified": "2025-08-12T21:40:09.513Z",
-  "mainEntityOfPage": {
-    "@type": "WebPage",
-    "@id": "https://doc-builder-delta.vercel.app/guides/image-modal-guide.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": "Guides",
-        "item": "https://doc-builder-delta.vercel.app/guides/"
-      },
-      {
-        "@type": "ListItem",
-        "position": 3,
-        "name": "Image Modal Guide",
-        "item": "https://doc-builder-delta.vercel.app/guides/image-modal-guide.html"
-      }
-    ]
-  }
-}
-</script>
-</head>
-<body>
-    <!-- Breadcrumbs -->
-    <nav class="breadcrumbs breadcrumbs-static" id="breadcrumbs" data-build-date="Aug 12, 2025, 09:40 PM UTC" data-doc-builder-version="1.9.29">
-        <!-- Pre-rendered breadcrumb content for static builds -->
-        <div class="breadcrumbs-content breadcrumbs-homepage">
-          <div class="breadcrumbs-right">
-            <span class="breadcrumb-date" title="Built with doc-builder v1.9.29">Last updated: Aug 12, 2025, 09:40 PM UTC</span>
-            <button class="breadcrumb-pdf-btn" onclick="if(typeof exportToPDF !== 'undefined') exportToPDF(); else window.print();" title="Export to PDF" aria-label="Export to PDF">
-              <i class="fas fa-file-pdf"></i>
-            </button>
-          </div>
-        </div>
-    </nav>
-    <!-- Main Content -->
-    <div class="main-wrapper">
-        <!-- Sidebar -->
-        <aside class="sidebar">
-            <div class="sidebar-header">
-                <div class="filter-box">
-                    <input type="text" placeholder="Search menu..." 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 toggle-all-nav expanded" href="#" id="nav-toggle-all" title="Collapse/Expand All">
-          <i class="ph ph-caret-down" id="toggle-all-icon"></i> Documentation
-        </a>
-        <div class="nav-content">
-        <a href="README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="ph ph-file-text"></i> Overview</a>
-        <a href="about-doc-builder.html" class="nav-item" data-tooltip="About @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #2563eb;"></i> About Doc Builder</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="ph ph-pencil-simple" style="color: #d97706;"></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="ph ph-file-text"></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="ph ph-check-circle" style="color: #2563eb;"></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="ph ph-check-circle" style="color: #2563eb;"></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="ph ph-caret-right collapse-icon"></i><i class="ph ph-book"></i> Guides
-        </a>
-        <div class="nav-content" id="nav-guides-1">
-        <a href="guides/authentication-default-change.html" class="nav-item" data-tooltip="Starting from version 1.7.4, @knowcode/doc-builder now defaults to no authentication for all documentation sites."><i class="ph ph-file-text"></i> Authentication Default Change</a>
-        <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="ph ph-check-circle" style="color: #2563eb;"></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="ph ph-pencil-simple" style="color: #d97706;"></i> Claude Workflow Guide</a>
-        <a href="guides/configuration-guide.html" class="nav-item" data-tooltip="This guide explains how @knowcode/doc-builder handles configuration files and settings."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Configuration 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="ph ph-pencil-simple" style="color: #d97706;"></i> Documentation Standards</a>
-        <a href="guides/html-embedding-guide.html" class="nav-item" data-tooltip="Starting from version 1.9.2, doc-builder treats HTML files ( and ) as attachments that are automatically copied to your output directory during the..."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Html Embedding Guide</a>
-        <a href="guides/image-modal-guide.html" class="nav-item active" 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="ph ph-check-circle" style="color: #2563eb;"></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="ph ph-pencil-simple" style="color: #d97706;"></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="ph ph-check-circle" style="color: #2563eb;"></i> Private Directory Authentication</a>
-        <a href="guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Private Directory Authentication Troubleshooting</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="ph ph-check-circle" style="color: #2563eb;"></i> Public Site Deployment</a>
-        <a href="guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Search Engine Verification 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="ph ph-check-circle" style="color: #2563eb;"></i> Seo Guide</a>
-        <a href="guides/seo-optimization-guide.html" class="nav-item" data-tooltip="Comprehensive guide to optimizing documentation for search engines. Learn SEO best practices, use built-in features, and improve your rankings."><i class="ph ph-check-circle" style="color: #2563eb;"></i> SEO Optimization Guide for @knowcode/doc-builder</a>
-        <a href="guides/supabase-authentication-complete-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes built-in Supabase authentication that provides enterprise-grade security with zero configuration."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Supabase Authentication Complete 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="ph ph-check-circle" style="color: #2563eb;"></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="ph ph-check-circle" style="color: #2563eb;"></i> Windows Setup Guide</a></div></div>
-      <div class="nav-section" data-level="1">
-        <a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
-          <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-chat-circle-dots"></i> Prompts
-        </a>
-        <div class="nav-content collapsed" id="nav-prompts-1">
-        <a href="prompts/beautiful-documentation-design.html" class="nav-item" data-tooltip="🎨 Beautiful Documentation Design Guide."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Beautiful Documentation Design</a>
-        <a href="prompts/markdown-document-standards.html" class="nav-item" data-tooltip="Detailed introduction to the topic..."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Markdown Document Standards</a>
-        <a href="prompts/project-rename-strategy-sasha-publish.html" class="nav-item" data-tooltip="This document outlines the comprehensive strategy for renaming the @knowcode/doc-builder project to &quot;sasha-publish&quot;, including all package references,..."><i class="ph ph-x-circle" style="color: #dc2626;"></i> Project Rename Strategy Sasha Publish</a></div></div>
-      <div class="nav-section" data-level="1">
-        <a class="nav-title collapsible" href="#" data-target="nav-test-questions-1" >
-          <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-folder"></i> Test Questions
-        </a>
-        <div class="nav-content collapsed" id="nav-test-questions-1">
-        <a href="test-questions/how-does-it-work%3F.html" class="nav-item" data-tooltip="This is a test file to verify that question marks work properly in filenames."><i class="ph ph-file-text"></i> How Does It Work?</a>
-        <a href="test-questions/step-1%3A%20getting-started.html" class="nav-item" data-tooltip="Step 1: Getting Started."><i class="ph ph-file-text"></i> Step 1: Getting Started</a>
-        <a href="test-questions/what-is-the-purpose.html" class="nav-item" data-tooltip="Understanding the purpose of our documentation system"><i class="ph ph-file-text"></i> What Is The Purpose?</a></div></div>
-            </nav>
-            <div class="resize-handle"></div>
-        </aside>
-        <!-- Content Area -->
-        <main class="content">
-            <div class="content-inner">
-                <h1>Image Modal Guide</h1>
-<p>The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen experiences.</p>
-<h2>Overview</h2>
-<p>When users click on any image in your generated documentation, it opens in a professional modal overlay with:</p>
-<ul>
-<li>Full-screen viewing experience</li>
-<li>Smooth animations and transitions</li>
-<li>Multiple close methods</li>
-<li>Alt text displayed as captions</li>
-<li>Responsive design for all devices</li>
-<li>Dark theme support</li>
-</ul>
-<h2>Features</h2>
-<h3>Automatic Enhancement</h3>
-<ul>
-<li><strong>Zero Configuration</strong>: All content images automatically become clickable</li>
-<li><strong>Hover Effects</strong>: Images show subtle hover animations to indicate they&#39;re interactive</li>
-<li><strong>Professional Styling</strong>: Rounded corners, shadows, and smooth transitions</li>
-</ul>
-<h3>Modal Experience</h3>
-<ul>
-<li><strong>Full-Screen Display</strong>: Images scale to fit the screen while maintaining aspect ratio</li>
-<li><strong>Professional Overlay</strong>: Dark backdrop with blur effects</li>
-<li><strong>Caption Support</strong>: Alt text appears as captions below the modal image</li>
-<li><strong>Responsive Design</strong>: Optimized for desktop, tablet, and mobile devices</li>
-</ul>
-<h3>Accessibility</h3>
-<ul>
-<li><strong>Keyboard Navigation</strong>: Press Escape to close the modal</li>
-<li><strong>Multiple Close Methods</strong>: Click X button, click outside image, or press Escape</li>
-<li><strong>Alt Text Integration</strong>: Screen readers can access image descriptions</li>
-<li><strong>Focus Management</strong>: Proper focus handling when modal opens/closes</li>
-</ul>
-<h2>How to Use</h2>
-<h3>Basic Usage</h3>
-<p>Simply include images in your markdown files as normal:</p>
-<pre><code class="language-markdown">![Screenshot of the dashboard showing analytics and metrics](images/dashboard-screenshot.png)
-![Architecture diagram illustrating the data flow between components](diagrams/system-architecture.svg)
-</code></pre>
-<h3>Best Practices for Alt Text</h3>
-<p>Since alt text becomes the modal caption, write descriptive, meaningful descriptions:</p>
-<p><strong><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Good Alt Text:</strong></p>
-<pre><code class="language-markdown">![User profile settings page with form fields for name, email, and password](images/profile-settings.png)
-![Mermaid diagram showing the authentication flow from login to dashboard access](diagrams/auth-flow.png)
-![Screenshot of Vercel deployment dashboard with project settings highlighted](images/vercel-deployment.png)
-</code></pre>
-<p><strong><i style="font-size: 1.2em" class="ph ph-x-circle" aria-label="error"></i> Poor Alt Text:</strong></p>
-<pre><code class="language-markdown">![Screenshot](img1.png)
-![Image](picture.jpg)
-![](diagram.svg)
-</code></pre>
-<h3>Image Organization</h3>
-<p>Organize your images in dedicated folders for better maintenance:</p>
-<pre><code>docs/
-├── images/
-│   ├── screenshots/
-│   │   ├── dashboard.png
-│   │   └── settings.png
-│   └── diagrams/
-│       ├── architecture.svg
-│       └── workflow.png
-└── guides/
-    └── setup-guide.md
-</code></pre>
-<p>Then reference them in your markdown:</p>
-<pre><code class="language-markdown">![Dashboard overview with analytics charts](../images/screenshots/dashboard.png)
-</code></pre>
-<h2>Styling and Theming</h2>
-<h3>CSS Customization</h3>
-<p>The modal system uses CSS variables that you can customize:</p>
-<pre><code class="language-css">:root {
-  /* Modal overlay background */
-  --color-bg-overlay: rgba(0, 0, 0, 0.9);
-  /* Animation timing */
-  --duration-normal: 0.3s;
-  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
-  /* Border radius for modal image */
-  --radius-lg: 12px;
-}
-</code></pre>
-<h3>Dark Theme Support</h3>
-<p>The modal automatically adapts to dark theme:</p>
-<ul>
-<li>Darker overlay background</li>
-<li>Adjusted close button styling</li>
-<li>Proper contrast for captions</li>
-</ul>
-<h2>Technical Implementation</h2>
-<h3>Automatic Initialization</h3>
-<p>The modal system initializes automatically when the page loads:</p>
-<pre><code class="language-javascript">// Automatically called on DOM ready
-initImageModal();
-</code></pre>
-<h3>Event Handling</h3>
-<p>The system uses efficient event delegation:</p>
-<ul>
-<li>Single event listener on the document</li>
-<li>Dynamically handles all current and future images</li>
-<li>Proper cleanup when modal closes</li>
-</ul>
-<h3>Performance Optimizations</h3>
-<ul>
-<li><strong>CSS-First Approach</strong>: Minimal JavaScript for better performance</li>
-<li><strong>Event Delegation</strong>: Efficient handling of multiple images</li>
-<li><strong>Smooth Animations</strong>: Hardware-accelerated CSS transitions</li>
-<li><strong>Memory Management</strong>: Proper event cleanup</li>
-</ul>
-<h2>Supported Image Formats</h2>
-<p>The modal works with all web-compatible image formats:</p>
-<ul>
-<li><strong>Raster Images</strong>: PNG, JPG, JPEG, GIF, WEBP</li>
-<li><strong>Vector Images</strong>: SVG</li>
-<li><strong>Animated Images</strong>: Animated GIFs, WEBP animations</li>
-</ul>
-<h2>Mobile Experience</h2>
-<h3>Touch-Friendly Interface</h3>
-<ul>
-<li><strong>Large Close Button</strong>: Easy to tap on mobile devices</li>
-<li><strong>Gesture Support</strong>: Tap outside image to close</li>
-<li><strong>Responsive Sizing</strong>: Images scale appropriately for screen size</li>
-<li><strong>Optimized Layout</strong>: Adjusted button and caption sizes for mobile</li>
-</ul>
-<h3>Performance on Mobile</h3>
-<ul>
-<li><strong>Lightweight Implementation</strong>: Minimal impact on mobile performance</li>
-<li><strong>Touch Optimizations</strong>: Proper touch event handling</li>
-<li><strong>Viewport Considerations</strong>: Respects device viewport settings</li>
-</ul>
-<h2>Examples</h2>
-<h3>Documentation Screenshots</h3>
-<pre><code class="language-markdown"># Setup Guide
-Follow these steps to configure your application:
-1. **Access Settings**
-   ![Settings page with configuration options and form fields for API keys](images/setup/settings-page.png)
-2. **Configure API Keys**
-   ![API configuration panel showing input fields for various service keys](images/setup/api-config.png)
-3. **Save and Deploy**
-   ![Deployment confirmation screen with success message and next steps](images/setup/deployment-success.png)
-</code></pre>
-<h3>Technical Diagrams</h3>
-<pre><code class="language-markdown"># System Architecture
-Our system follows a microservices architecture:
-![High-level architecture diagram showing API gateway, microservices, and database layers](diagrams/system-overview.png)
-The authentication flow works as follows:
-![Sequence diagram illustrating the OAuth authentication process between client, server, and identity provider](diagrams/auth-sequence.png)
-</code></pre>
-<h3>Before/After Comparisons</h3>
-<pre><code class="language-markdown"># UI Improvements
-We&#39;ve redesigned the dashboard for better usability:
-**Before:**
-![Old dashboard interface with cluttered layout and poor visual hierarchy](images/comparison/dashboard-before.png)
-**After:**
-![New dashboard with clean design, improved spacing, and intuitive navigation](images/comparison/dashboard-after.png)
-</code></pre>
-<h2>Troubleshooting</h2>
-<h3>Images Not Clickable</h3>
-<p><strong>Problem</strong>: Images don&#39;t show hover effects or modal<br><strong>Solution</strong>: Ensure images are within content areas with the <code>.content</code> class</p>
-<h3>Modal Not Opening</h3>
-<p><strong>Problem</strong>: Clicking images doesn&#39;t open modal<br><strong>Solution</strong>: Check that main.js is properly loaded and no JavaScript errors exist</p>
-<h3>Caption Not Showing</h3>
-<p><strong>Problem</strong>: Alt text doesn&#39;t appear as caption<br><strong>Solution</strong>: Verify alt text is present in the markdown image syntax</p>
-<h3>Styling Issues</h3>
-<p><strong>Problem</strong>: Modal appears broken or unstyled<br><strong>Solution</strong>: Ensure notion-style.css is properly loaded</p>
-<h2>Advanced Usage</h2>
-<h3>Custom Image Classes</h3>
-<p>Add custom classes to images for special styling:</p>
-<pre><code class="language-markdown">![Large hero image of the product dashboard](){.hero-image}
-</code></pre>
-<h3>Image Galleries</h3>
-<p>Create image galleries with multiple related images:</p>
-<pre><code class="language-markdown">## Product Screenshots
-![Dashboard home page with overview widgets](gallery/dashboard-home.png)
-![Analytics page showing detailed metrics and charts](gallery/analytics-view.png)
-![Settings panel with configuration options](gallery/settings-panel.png)
-![User management interface with role assignments](gallery/user-management.png)
-</code></pre>
-<h2>Integration with Other Features</h2>
-<h3>Mermaid Diagrams</h3>
-<p>Mermaid diagrams can also benefit from the modal system when exported as images:</p>
-<pre><code class="language-markdown"><div class="mermaid-wrapper">
-      <div class="mermaid">graph TD
-    A[User Request] --> B{Authentication}
-    B -->|Valid| C[Process Request]
-    B -->|Invalid| D[Return Error]
-    C --> E[Return Response]</div>
-    </div>
-### PDF Export
-When using PDF export features, images maintain their quality and alt text information.
-### Search Integration
-Alt text content is indexed for search functionality, making images discoverable.
-## Best Practices Summary
-1. **Write Descriptive Alt Text**: Use meaningful descriptions that work as captions
-2. **Organize Images**: Keep images in dedicated folders with logical structure
-3. **Optimize File Sizes**: Use appropriate image compression for web delivery
-4. **Consider Accessibility**: Ensure alt text provides value for screen readers
-5. **Test Responsiveness**: Verify images work well on different device sizes
-6. **Use Appropriate Formats**: Choose the right image format for your content type
-## Conclusion
-The image modal system in @knowcode/doc-builder provides a professional, accessible way to showcase images in your documentation. With zero configuration required, it automatically enhances the user experience while maintaining excellent performance and accessibility standards.
-For more advanced customization options or troubleshooting, refer to the main documentation or reach out to the community for support.
-</code></pre>
-            </div>
-        </main>
-    </div>
-    <!-- Scripts -->
-    <script>
-    // Pass configuration to frontend
-    window.docBuilderConfig = {
-      features: {
-        showPdfDownload: true,
-        menuDefaultOpen: false,
-        mermaidEnhanced: true
-      }
-    };
-    </script>
-    <script src="../js/main.js"></script>
-</body>
-</html>