@knowcode/doc-builder 1.9.14 → 1.9.16

package/.claude/settings.local.json

@@ -46,7 +46,8 @@
       "Bash(brew upgrade:*)",
       "Bash(psql:*)",
       "Bash(open /Users/lindsaysmith/Documents/lambda1.nosync/doc-builder/html/image-modal-test.html)",
-      "WebFetch(domain:nudge-campaign.vercel.app)"
+      "WebFetch(domain:nudge-campaign.vercel.app)",
+      "WebFetch(domain:mermaid.js.org)"
     ],
     "deny": []
   }

package/assets/css/notion-style.css

@@ -1129,6 +1129,82 @@ tr:hover {
   border-radius: var(--radius-lg);
   overflow-x: auto;
   margin: var(--space-2) 0;
+  transition: all var(--duration-normal);
+}
+
+/* Enhanced Mermaid SVG Styling */
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Enhanced Mermaid Styling - only applied when mermaidEnhanced is enabled */
+[data-mermaid-enhanced="true"] .mermaid .node rect,
+[data-mermaid-enhanced="true"] .mermaid .node polygon,
+[data-mermaid-enhanced="true"] .mermaid .node circle,
+[data-mermaid-enhanced="true"] .mermaid .node ellipse {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  transition: all 0.2s ease;
+}
+
+/* Enhanced rectangle shapes with rounded corners */
+[data-mermaid-enhanced="true"] .mermaid .node rect {
+  rx: 8px !important;
+  ry: 8px !important;
+}
+
+/* Enhanced flowchart nodes */
+[data-mermaid-enhanced="true"] .mermaid .flowchart-node {
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
+}
+
+/* Smoother connection lines */
+[data-mermaid-enhanced="true"] .mermaid .flowchart-link {
+  stroke-width: 2px;
+  fill: none;
+}
+
+/* Enhanced text styling */
+[data-mermaid-enhanced="true"] .mermaid .node text,
+[data-mermaid-enhanced="true"] .mermaid .edgeLabel {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+}
+
+/* Hover effects for interactive elements */
+[data-mermaid-enhanced="true"] .mermaid .node:hover rect,
+[data-mermaid-enhanced="true"] .mermaid .node:hover polygon,
+[data-mermaid-enhanced="true"] .mermaid .node:hover circle,
+[data-mermaid-enhanced="true"] .mermaid .node:hover ellipse {
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+  transform: translateY(-1px);
+}
+
+/* Enhanced cluster/subgraph styling */
+[data-mermaid-enhanced="true"] .mermaid .cluster rect {
+  rx: 12px !important;
+  ry: 12px !important;
+  stroke-dasharray: none;
+  opacity: 0.8;
+}
+
+/* Decision diamond improvements */
+[data-mermaid-enhanced="true"] .mermaid .flowchart-node polygon {
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
+}
+
+/* Process node styling */
+[data-mermaid-enhanced="true"] .mermaid .flowchart-node rect {
+  stroke-width: 1.5px;
+}
+
+/* Edge label background */
+[data-mermaid-enhanced="true"] .mermaid .edgeLabel .label {
+  background: var(--color-bg-card);
+  border-radius: var(--radius-sm);
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-border-default);
 }
 
 /* Mermaid Full Screen Viewer */

package/assets/js/main.js

@@ -54,6 +54,79 @@ document.addEventListener('DOMContentLoaded', function() {
   initializeMermaidFullScreen();
 });
 
+// Mermaid Theme Configuration
+function configureMermaidTheme() {
+  // Check if enhanced styling is enabled (passed from config)
+  const enhancedStyling = window.docBuilderConfig?.features?.mermaidEnhanced !== false;
+  
+  // Set data attribute for CSS styling
+  document.documentElement.setAttribute('data-mermaid-enhanced', enhancedStyling.toString());
+  
+  // Get current theme (light/dark mode)
+  const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+  
+  // Notion-inspired color palette
+  const lightTheme = {
+    primaryColor: '#F7F6F3',           // Light background for shapes
+    primaryTextColor: '#37352F',       // Dark text
+    primaryBorderColor: '#E3E2E0',     // Subtle borders
+    lineColor: '#787774',              // Connection lines
+    secondaryColor: '#EDEBE9',         // Secondary backgrounds
+    tertiaryColor: '#E9E9E7',          // Tertiary elements
+    background: '#FFFFFF',             // Diagram background
+    fontSize: '16px',                  // Text size
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  };
+  
+  const darkTheme = {
+    primaryColor: '#2F2F2F',           // Dark background for shapes
+    primaryTextColor: '#E3E2E0',       // Light text
+    primaryBorderColor: '#454545',     // Darker borders
+    lineColor: '#9B9A97',              // Lighter connection lines
+    secondaryColor: '#404040',         // Secondary backgrounds
+    tertiaryColor: '#4A4A4A',          // Tertiary elements
+    background: '#1A1A1A',             // Dark diagram background
+    fontSize: '16px',                  // Text size
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  };
+  
+  const currentTheme = isDarkMode ? darkTheme : lightTheme;
+  
+  // Initialize Mermaid with custom theme (only if enhanced styling is enabled)
+  const mermaidConfig = {
+    startOnLoad: true,
+    theme: enhancedStyling ? 'base' : 'default',
+    ...(enhancedStyling && { themeVariables: currentTheme }),
+    flowchart: {
+      curve: 'basis',                  // Smoother curves
+      padding: 20,                     // More padding around elements
+      nodeSpacing: 50,                 // Space between nodes
+      rankSpacing: 50,                 // Space between ranks
+      marginX: 20,                     // Horizontal margins
+      marginY: 20                      // Vertical margins
+    },
+    sequence: {
+      actorMargin: 50,
+      width: 150,
+      height: 65,
+      boxMargin: 10,
+      boxTextMargin: 5,
+      noteMargin: 10,
+      messageMargin: 35
+    },
+    ...(enhancedStyling && {
+      gantt: {
+        leftPadding: 75,
+        gridLineStartPadding: 35,
+        fontSize: 12,
+        sectionFontSize: 24
+      }
+    })
+  };
+  
+  mermaid.initialize(mermaidConfig);
+}
+
 // Mermaid Full Screen Viewer
 function initializeMermaidFullScreen() {
   // Wait for Mermaid to initialize
@@ -62,6 +135,9 @@ function initializeMermaidFullScreen() {
     return;
   }
 
+  // Configure Mermaid with enhanced styling
+  configureMermaidTheme();
+
   // Find all Mermaid diagrams and wrap them with full-screen controls
   const mermaidDivs = document.querySelectorAll('.mermaid');
   

package/doc-builder.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  "configVersion": "1.9.11",
+  "configVersion": "1.9.15",
   "docsDir": "docs",
   "outputDir": "html",
   "siteName": "@knowcode/doc-builder",
@@ -9,6 +9,7 @@ module.exports = {
     "authentication": false,
     "changelog": true,
     "mermaid": true,
+    "mermaidEnhanced": true,
     "tooltips": true,
     "search": false,
     "darkMode": true,
@@ -21,7 +22,8 @@ module.exports = {
     "attachments": true,
     "dynamicNavIcons": true,
     "subtleColors": true,
-    "privateDirectoryAuth": false
+    "privateDirectoryAuth": false,
+    "banner": false
   },
   "auth": {
     "supabaseUrl": "https://xcihhnfcitjrwbynxmka.supabase.co",
@@ -31,6 +33,13 @@ module.exports = {
     "daysBack": 14,
     "enabled": true
   },
+  "banner": {
+    "enabled": false,
+    "text": "This documentation is a preview version - some content may be incomplete",
+    "icon": "fas fa-exclamation-triangle",
+    "type": "warning",
+    "dismissible": true
+  },
   "folderOrder": [],
   "folderDescriptions": {},
   "folderIcons": {},

package/doc-builder.config.js.backup.1754059241330

@@ -0,0 +1,115 @@
+module.exports = {
+  "configVersion": "1.9.11",
+  "docsDir": "docs",
+  "outputDir": "html",
+  "siteName": "@knowcode/doc-builder",
+  "siteDescription": "Beautiful documentation with the least effort possible",
+  "favicon": "✨",
+  "features": {
+    "authentication": false,
+    "changelog": true,
+    "mermaid": true,
+    "tooltips": true,
+    "search": false,
+    "darkMode": true,
+    "phosphorIcons": true,
+    "phosphorWeight": "regular",
+    "phosphorSize": "1.2em",
+    "normalizeTitle": true,
+    "showPdfDownload": true,
+    "menuDefaultOpen": false,
+    "attachments": true,
+    "dynamicNavIcons": true,
+    "subtleColors": true,
+    "privateDirectoryAuth": false
+  },
+  "auth": {
+    "supabaseUrl": "https://xcihhnfcitjrwbynxmka.supabase.co",
+    "supabaseAnonKey": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhjaWhobmZjaXRqcndieW54bWthIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM0Mzc2MzcsImV4cCI6MjA2OTAxMzYzN30.zvWp3JFIR8fBIiwuFF5gqOR_Kxb42baZS5fsBz60XOY"
+  },
+  "changelog": {
+    "daysBack": 14,
+    "enabled": true
+  },
+  "folderOrder": [],
+  "folderDescriptions": {},
+  "folderIcons": {},
+  "deployment": {
+    "platform": "vercel",
+    "outputDirectory": "html"
+  },
+  "seo": {
+    "enabled": true,
+    "siteUrl": "https://doc-builder-delta.vercel.app",
+    "author": "Lindsay Smith",
+    "twitterHandle": "@planbbackups",
+    "language": "en-US",
+    "keywords": [
+      "documentation",
+      "markdown",
+      "static site generator",
+      "vercel",
+      "notion-style"
+    ],
+    "titleTemplate": "{pageTitle} | {siteName}",
+    "autoKeywords": true,
+    "keywordLimit": 7,
+    "descriptionFallback": "smart",
+    "organization": {
+      "name": "Knowcode Ltd",
+      "url": "https://knowcode.tech",
+      "logo": ""
+    },
+    "ogImage": "/og-default.png",
+    "generateSitemap": true,
+    "generateRobotsTxt": true,
+    "customMetaTags": [
+      {
+        "name": "google-site-verification",
+        "content": "FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ"
+      },
+      {
+        "name": "msvalidate.01",
+        "content": "B2D8C4C12C530D47AA962B24CAA09630"
+      }
+    ]
+  },
+  "attachmentTypes": [
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".xls",
+    ".xlsx",
+    ".csv",
+    ".ppt",
+    ".pptx",
+    ".txt",
+    ".rtf",
+    ".html",
+    ".htm",
+    ".zip",
+    ".tar",
+    ".gz",
+    ".7z",
+    ".rar",
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".svg",
+    ".webp",
+    ".ico",
+    ".bmp",
+    ".json",
+    ".xml",
+    ".yaml",
+    ".yml",
+    ".toml",
+    ".mp4",
+    ".mp3",
+    ".wav",
+    ".avi",
+    ".mov"
+  ],
+  "productionUrl": "https://doc-builder-delta.vercel.app"
+};

package/doc-builder.config.js.backup.1754119567787

@@ -0,0 +1,123 @@
+module.exports = {
+  "configVersion": "1.9.14",
+  "docsDir": "docs",
+  "outputDir": "html",
+  "siteName": "@knowcode/doc-builder",
+  "siteDescription": "Beautiful documentation with the least effort possible",
+  "favicon": "✨",
+  "features": {
+    "authentication": false,
+    "changelog": true,
+    "mermaid": true,
+    "tooltips": true,
+    "search": false,
+    "darkMode": true,
+    "phosphorIcons": true,
+    "phosphorWeight": "regular",
+    "phosphorSize": "1.2em",
+    "normalizeTitle": true,
+    "showPdfDownload": true,
+    "menuDefaultOpen": false,
+    "attachments": true,
+    "dynamicNavIcons": true,
+    "subtleColors": true,
+    "privateDirectoryAuth": false,
+    "banner": false
+  },
+  "auth": {
+    "supabaseUrl": "https://xcihhnfcitjrwbynxmka.supabase.co",
+    "supabaseAnonKey": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhjaWhobmZjaXRqcndieW54bWthIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM0Mzc2MzcsImV4cCI6MjA2OTAxMzYzN30.zvWp3JFIR8fBIiwuFF5gqOR_Kxb42baZS5fsBz60XOY"
+  },
+  "changelog": {
+    "daysBack": 14,
+    "enabled": true
+  },
+  "banner": {
+    "enabled": false,
+    "text": "This documentation is a preview version - some content may be incomplete",
+    "icon": "fas fa-exclamation-triangle",
+    "type": "warning",
+    "dismissible": true
+  },
+  "folderOrder": [],
+  "folderDescriptions": {},
+  "folderIcons": {},
+  "deployment": {
+    "platform": "vercel",
+    "outputDirectory": "html"
+  },
+  "seo": {
+    "enabled": true,
+    "siteUrl": "https://doc-builder-delta.vercel.app",
+    "author": "Lindsay Smith",
+    "twitterHandle": "@planbbackups",
+    "language": "en-US",
+    "keywords": [
+      "documentation",
+      "markdown",
+      "static site generator",
+      "vercel",
+      "notion-style"
+    ],
+    "titleTemplate": "{pageTitle} | {siteName}",
+    "autoKeywords": true,
+    "keywordLimit": 7,
+    "descriptionFallback": "smart",
+    "organization": {
+      "name": "Knowcode Ltd",
+      "url": "https://knowcode.tech",
+      "logo": ""
+    },
+    "ogImage": "/og-default.png",
+    "generateSitemap": true,
+    "generateRobotsTxt": true,
+    "customMetaTags": [
+      {
+        "name": "google-site-verification",
+        "content": "FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ"
+      },
+      {
+        "name": "msvalidate.01",
+        "content": "B2D8C4C12C530D47AA962B24CAA09630"
+      }
+    ]
+  },
+  "attachmentTypes": [
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".xls",
+    ".xlsx",
+    ".csv",
+    ".ppt",
+    ".pptx",
+    ".txt",
+    ".rtf",
+    ".html",
+    ".htm",
+    ".zip",
+    ".tar",
+    ".gz",
+    ".7z",
+    ".rar",
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".svg",
+    ".webp",
+    ".ico",
+    ".bmp",
+    ".json",
+    ".xml",
+    ".yaml",
+    ".yml",
+    ".toml",
+    ".mp4",
+    ".mp3",
+    ".wav",
+    ".avi",
+    ".mov"
+  ],
+  "productionUrl": "https://doc-builder-delta.vercel.app"
+};

package/html/README.html

@@ -99,8 +99,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-31T07:08:27.327Z",
-  "dateModified": "2025-07-31T07:08:27.327Z",
+  "datePublished": "2025-08-02T07:26:07.875Z",
+  "dateModified": "2025-08-02T07:26:07.875Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/README.html"
@@ -133,7 +133,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.9.11">Last updated: Jul 31, 2025, 07:08 AM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.9.15">Last updated: Aug 2, 2025, 07:26 AM UTC</span>
                 </div>
                 
                 
@@ -153,16 +153,7 @@
         </div>
     </header>
     
-    <!-- Preview Banner -->
-    <div id="preview-banner" class="preview-banner">
-        <div class="banner-content">
-            <i class="fas fa-exclamation-triangle banner-icon"></i>
-            <span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
-            <button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-    </div>
+    
     
     <!-- Breadcrumbs -->
     <nav class="breadcrumbs" id="breadcrumbs">
@@ -175,7 +166,7 @@
         <aside class="sidebar">
             <div class="sidebar-header">
                 <div class="filter-box">
-                    <input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
+                    <input type="text" placeholder="Search menu..." class="filter-input" id="nav-filter">
                     <i class="fas fa-search filter-icon"></i>
                 </div>
             </div>
@@ -187,8 +178,10 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item active" 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: #059669;"></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="/test-mermaid-enhanced.html" class="nav-item" data-tooltip="Mermaid Enhanced Styling Test."><i class="ph ph-x-circle" style="color: #dc2626;"></i> Test Mermaid Enhanced</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: #059669;"></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: #059669;"></i> Vercel First Time Setup Guide</a></div></div>
       <div class="nav-section" data-level="1">
@@ -243,7 +236,8 @@
         </a>
         <div class="nav-content" 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: #059669;"></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></div></div>
+        <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>
             </nav>
             <div class="resize-handle"></div>
         </aside>
@@ -505,7 +499,8 @@ docBuilder.build({
     window.docBuilderConfig = {
       features: {
         showPdfDownload: true,
-        menuDefaultOpen: false
+        menuDefaultOpen: false,
+        mermaidEnhanced: true
       }
     };
     </script>