@knowcode/doc-builder 1.8.7 → 1.9.0

package/package/assets/js/main.js

@@ -79,9 +79,6 @@ function initializeMermaidFullScreen() {
     const toolbar = document.createElement('div');
     toolbar.className = 'mermaid-toolbar';
     
-    const title = document.createElement('div');
-    title.textContent = 'Mermaid Diagram';
-    
     const actions = document.createElement('div');
     actions.className = 'mermaid-actions';
     
@@ -91,23 +88,8 @@ function initializeMermaidFullScreen() {
     fullScreenBtn.innerHTML = '<i class="fas fa-expand"></i> Full Screen';
     fullScreenBtn.addEventListener('click', () => openMermaidFullScreen(mermaidDiv, index));
     
-    // Copy SVG button
-    const copyBtn = document.createElement('button');
-    copyBtn.className = 'mermaid-btn';
-    copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy SVG';
-    copyBtn.addEventListener('click', () => copyMermaidSVG(mermaidDiv));
-    
-    // Copy Mermaid source button
-    const copyMermaidBtn = document.createElement('button');
-    copyMermaidBtn.className = 'mermaid-btn';
-    copyMermaidBtn.innerHTML = '<i class="fas fa-code"></i> Copy Mermaid';
-    copyMermaidBtn.addEventListener('click', () => copyMermaidSource(mermaidDiv));
-    
     actions.appendChild(fullScreenBtn);
-    actions.appendChild(copyBtn);
-    actions.appendChild(copyMermaidBtn);
     
-    toolbar.appendChild(title);
     toolbar.appendChild(actions);
     
     // Create wrapper for the diagram
@@ -512,12 +494,147 @@ function updateThemeIcon(theme) {
 const menuToggle = document.getElementById('menu-toggle');
 const sidebar = document.querySelector('.sidebar');
 
+// Set initial menu state based on configuration
+const menuDefaultOpen = window.docBuilderConfig?.features?.menuDefaultOpen !== false;
+if (sidebar && window.innerWidth > 768) {
+  if (!menuDefaultOpen) {
+    sidebar.classList.add('closed');
+    // Add class to body to show menu toggle on desktop when menu starts closed
+    document.body.classList.add('menu-starts-closed');
+  }
+}
+
+// Create overlay element for mobile
+let overlay = document.querySelector('.sidebar-overlay');
+if (!overlay && window.innerWidth <= 768) {
+  overlay = document.createElement('div');
+  overlay.className = 'sidebar-overlay';
+  document.body.appendChild(overlay);
+}
+
 if (menuToggle) {
   menuToggle.addEventListener('click', () => {
+    if (window.innerWidth <= 768) {
+      // Mobile: toggle 'open' class
+      sidebar.classList.toggle('open');
+    } else {
+      // Desktop: toggle 'closed' class
+      sidebar.classList.toggle('closed');
+      // Update visibility of menu toggle based on sidebar state
+      updateMenuToggleVisibility();
+    }
+    if (overlay) {
+      overlay.classList.toggle('active');
+    }
+  });
+}
+
+// Function to update menu toggle visibility
+function updateMenuToggleVisibility() {
+  if (window.innerWidth > 768) {
+    if (!menuDefaultOpen || sidebar.classList.contains('closed')) {
+      document.body.classList.add('show-menu-toggle');
+    } else {
+      document.body.classList.remove('show-menu-toggle');
+    }
+  }
+}
+
+// Initial check
+updateMenuToggleVisibility();
+
+// Update on window resize
+window.addEventListener('resize', updateMenuToggleVisibility);
+
+// Close menu when clicking overlay
+if (overlay) {
+  overlay.addEventListener('click', () => {
+    sidebar.classList.remove('open');
+    overlay.classList.remove('active');
+  });
+}
+
+// Floating Menu Button for Mobile
+function initFloatingMenuButton() {
+  // Only initialize on mobile
+  if (window.innerWidth > 768) return;
+  
+  // Check if button already exists
+  if (document.getElementById('floating-menu-toggle')) return;
+  
+  // Create floating button
+  const floatingButton = document.createElement('button');
+  floatingButton.id = 'floating-menu-toggle';
+  floatingButton.className = 'floating-menu-toggle';
+  floatingButton.setAttribute('aria-label', 'Toggle menu');
+  floatingButton.innerHTML = '<i class="fas fa-bars"></i>';
+  floatingButton.style.display = 'flex'; // Always visible on mobile
+  floatingButton.classList.add('visible'); // Start visible
+  
+  // Add to body
+  document.body.appendChild(floatingButton);
+  
+  // Toggle sidebar on click
+  floatingButton.addEventListener('click', () => {
     sidebar.classList.toggle('open');
+    
+    // Handle overlay
+    let overlay = document.querySelector('.sidebar-overlay');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.className = 'sidebar-overlay';
+      document.body.appendChild(overlay);
+      
+      // Add overlay click handler
+      overlay.addEventListener('click', () => {
+        sidebar.classList.remove('open');
+        overlay.classList.remove('active');
+        floatingButton.querySelector('i').className = 'fas fa-bars';
+      });
+    }
+    
+    if (overlay) {
+      overlay.classList.toggle('active');
+    }
+    
+    // Update icon based on state
+    const icon = floatingButton.querySelector('i');
+    if (sidebar.classList.contains('open')) {
+      icon.className = 'fas fa-times';
+    } else {
+      icon.className = 'fas fa-bars';
+    }
+  });
+  
+  // Remove scroll-based visibility - button is always visible on mobile
+  
+  // Update icon when sidebar state changes from other sources
+  const observer = new MutationObserver(() => {
+    const icon = floatingButton.querySelector('i');
+    if (sidebar.classList.contains('open')) {
+      icon.className = 'fas fa-times';
+    } else {
+      icon.className = 'fas fa-bars';
+    }
+  });
+  
+  observer.observe(sidebar, {
+    attributes: true,
+    attributeFilter: ['class']
   });
 }
 
+// Initialize floating button on load and resize
+document.addEventListener('DOMContentLoaded', initFloatingMenuButton);
+window.addEventListener('resize', () => {
+  const existingButton = document.getElementById('floating-menu-toggle');
+  if (window.innerWidth > 768 && existingButton) {
+    existingButton.remove();
+  } else if (window.innerWidth <= 768 && !existingButton) {
+    initFloatingMenuButton();
+  }
+});
+
 // Prevent sidebar from closing when clicking nav items
 // Only close when clicking outside the sidebar or the close button
 document.addEventListener('click', (e) => {
@@ -525,11 +642,21 @@ document.addEventListener('click', (e) => {
   if (window.innerWidth <= 768) {
     const isClickInsideSidebar = sidebar && sidebar.contains(e.target);
     const isMenuToggle = e.target.closest('#menu-toggle');
+    const isFloatingButton = e.target.closest('#floating-menu-toggle');
     const isNavItem = e.target.closest('.nav-item, .nav-title');
+    const overlay = document.querySelector('.sidebar-overlay');
     
     // Close sidebar only if clicking outside AND not on menu toggle AND not on nav items
-    if (!isClickInsideSidebar && !isMenuToggle && !isNavItem && sidebar?.classList.contains('open')) {
+    if (!isClickInsideSidebar && !isMenuToggle && !isFloatingButton && !isNavItem && sidebar?.classList.contains('open')) {
       sidebar.classList.remove('open');
+      if (overlay) {
+        overlay.classList.remove('active');
+      }
+      // Update floating button icon if it exists
+      const floatingBtn = document.getElementById('floating-menu-toggle');
+      if (floatingBtn) {
+        floatingBtn.querySelector('i').className = 'fas fa-bars';
+      }
     }
   }
 });
@@ -538,12 +665,16 @@ document.addEventListener('click', (e) => {
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
   anchor.addEventListener('click', function (e) {
     e.preventDefault();
-    const target = document.querySelector(this.getAttribute('href'));
-    if (target) {
-      target.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start'
-      });
+    const href = this.getAttribute('href');
+    // Skip if href is just '#' (prevents querySelector error)
+    if (href && href !== '#') {
+      const target = document.querySelector(href);
+      if (target) {
+        target.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
     }
   });
 });
@@ -1186,6 +1317,10 @@ function exportToPDF() {
 
 // Add PDF export button functionality
 function addPDFExportButton() {
+  // Check configuration - default to true if not set
+  const showPdfDownload = window.docBuilderConfig?.features?.showPdfDownload !== false;
+  if (!showPdfDownload) return;
+  
   const headerActions = document.querySelector('.header-actions');
   if (headerActions) {
     const pdfButton = document.createElement('button');
@@ -1318,8 +1453,106 @@ function initTooltips() {
   });
 }
 
+// Handle .md link redirects
+function initMarkdownLinkRedirects() {
+  // Check if current URL ends with .md and redirect
+  if (window.location.pathname.endsWith('.md')) {
+    const htmlPath = window.location.pathname.replace(/\.md$/, '.html');
+    console.log(`Redirecting from .md to .html: ${htmlPath}`);
+    window.location.replace(htmlPath);
+    return; // Stop execution as we're redirecting
+  }
+  
+  // Intercept clicks on .md links
+  document.addEventListener('click', function(e) {
+    const link = e.target.closest('a');
+    if (link && link.href && link.href.endsWith('.md')) {
+      e.preventDefault();
+      const htmlUrl = link.href.replace(/\.md$/, '.html');
+      console.log(`Converting .md link to .html: ${htmlUrl}`);
+      window.location.href = htmlUrl;
+    }
+  });
+}
+
+// Image Modal System
+function initImageModal() {
+  // Create modal HTML structure
+  const modalHTML = `
+    <div class="image-modal" id="imageModal">
+      <div class="image-modal-content">
+        <div class="image-modal-close" id="imageModalClose">&times;</div>
+        <img class="image-modal-img" id="imageModalImg" src="" alt="">
+        <div class="image-modal-caption" id="imageModalCaption"></div>
+      </div>
+    </div>
+  `;
+  
+  // Add modal to document body
+  document.body.insertAdjacentHTML('beforeend', modalHTML);
+  
+  const modal = document.getElementById('imageModal');
+  const modalImg = document.getElementById('imageModalImg');
+  const modalCaption = document.getElementById('imageModalCaption');
+  const closeBtn = document.getElementById('imageModalClose');
+  
+  // Add click handlers to all content images
+  const contentImages = document.querySelectorAll('.content img');
+  contentImages.forEach(img => {
+    img.addEventListener('click', function() {
+      modal.classList.add('active');
+      modalImg.src = this.src;
+      modalImg.alt = this.alt;
+      modalCaption.textContent = this.alt;
+      
+      // Hide caption if no alt text
+      if (!this.alt) {
+        modalCaption.style.display = 'none';
+      } else {
+        modalCaption.style.display = 'block';
+      }
+      
+      // Prevent body scrolling
+      document.body.style.overflow = 'hidden';
+    });
+  });
+  
+  // Close modal functions
+  function closeModal() {
+    modal.classList.remove('active');
+    document.body.style.overflow = '';
+  }
+  
+  // Close on X button click
+  closeBtn.addEventListener('click', closeModal);
+  
+  // Close on overlay click (but not on image click)
+  modal.addEventListener('click', function(e) {
+    if (e.target === modal) {
+      closeModal();
+    }
+  });
+  
+  // Close on Escape key
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && modal.classList.contains('active')) {
+      closeModal();
+    }
+  });
+  
+  // Prevent modal content from closing modal when clicked
+  modalImg.addEventListener('click', function(e) {
+    e.stopPropagation();
+  });
+  
+  document.querySelector('.image-modal-content').addEventListener('click', function(e) {
+    e.stopPropagation();
+  });
+}
+
 // Initialize on DOM Load
 document.addEventListener('DOMContentLoaded', () => {
+  initMarkdownLinkRedirects();
   highlightNavigation();
   generateTableOfContents();
   initSidebarResize();
@@ -1327,5 +1560,6 @@ document.addEventListener('DOMContentLoaded', () => {
   initNavigationFilter();
   addPDFExportButton();
   generateBreadcrumbs();
+  initImageModal();
   initTooltips();
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowcode/doc-builder",
-  "version": "1.8.7",
+  "version": "1.9.0",
   "description": "Reusable documentation builder for markdown-based sites with Vercel deployment support",
   "main": "index.js",
   "bin": {