@knowcode/doc-builder 1.9.1 → 1.9.2

package/html/js/auth.js

@@ -1,10 +1,7 @@
+
 /**
- * Simple Client-Side Authentication for Documentation
- * This runs on every page load to check authentication
- * 
- * IMPORTANT: This is a basic authentication system suitable for
- * protecting documentation from casual access. For production
- * use with sensitive data, implement server-side authentication.
+ * Supabase Authentication for Documentation Site
+ * Generated by @knowcode/doc-builder
  */
 
 (function() {
@@ -12,56 +9,138 @@
     
     // Skip auth check on login and logout pages
     const currentPage = window.location.pathname;
-    if (currentPage === '/login.html' || currentPage === '/logout.html' || currentPage.includes('login') || currentPage.includes('logout')) {
+    if (currentPage === '/login.html' || currentPage === '/logout.html' || 
+        currentPage.includes('login') || currentPage.includes('logout')) {
         return;
     }
     
-    // Check if user is authenticated
-    function isAuthenticated() {
-        const authToken = getCookie('doc-auth');
-        if (!authToken) return false;
-        
+    // Initialize Supabase client
+    const { createClient } = supabase;
+    const supabaseClient = createClient('https://xcihhnfcitjrwbynxmka.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhjaWhobmZjaXRqcndieW54bWthIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM0Mzc2MzcsImV4cCI6MjA2OTAxMzYzN30.zvWp3JFIR8fBIiwuFF5gqOR_Kxb42baZS5fsBz60XOY', {
+        auth: {
+            persistSession: true,
+            autoRefreshToken: true,
+            detectSessionInUrl: true
+        }
+    });
+    
+    // Check authentication and site access
+    async function checkAuth() {
         try {
-            // Simple token validation - just check if it exists and has expected format
-            // The actual validation happens server-side (or in login page for static sites)
-            const decoded = atob(authToken);
-            return decoded && decoded.includes(':');
+            // Check if current page is in private directory
+            const currentPath = window.location.pathname;
+            const isPrivatePage = currentPath.includes('/private/');
+            
+            // Get current user session
+            const { data: { user }, error: userError } = await supabaseClient.auth.getUser();
+            
+            if (userError || !user) {
+                // Only redirect if we're on a private page
+                if (isPrivatePage) {
+                    redirectToLogin();
+                } else {
+                    // Public page, just show it
+                    document.body.classList.add('authenticated'); // Use same class to show body
+                    updateAuthButton(false);
+                }
+                return;
+            }
+            
+            // Check if user has access to this site (using domain)
+            const { data: access, error: accessError } = await supabaseClient
+                .from('docbuilder_access')
+                .select('*')
+                .eq('user_id', user.id)
+                .eq('domain', window.location.host)
+                .single();
+            
+            if (accessError || !access) {
+                if (isPrivatePage) {
+                    showAccessDenied();
+                } else {
+                    // Public page, just show it
+                    document.body.classList.add('authenticated');
+                    updateAuthButton(false);
+                }
+                return;
+            }
+            
+            // User is authenticated and has access
+            console.log('User authenticated and authorized');
+            document.body.classList.add('authenticated');
+            updateAuthButton(true);
+            
         } catch (error) {
-            return false;
+            console.error('Auth check failed:', error);
+            if (window.location.pathname.includes('/private/')) {
+                redirectToLogin();
+            } else {
+                // Public page, show it anyway
+                document.body.classList.add('authenticated');
+                updateAuthButton(false);
+            }
         }
     }
     
-    // Get cookie value
-    function getCookie(name) {
-        const value = `; ${document.cookie}`;
-        const parts = value.split(`; ${name}=`);
-        if (parts.length === 2) return parts.pop().split(';').shift();
-        return null;
-    }
-    
-    // Redirect to login if not authenticated
+    // Redirect to login page
     function redirectToLogin() {
         const currentUrl = window.location.pathname + window.location.search;
         const loginUrl = '/login.html' + (currentUrl !== '/' ? '?redirect=' + encodeURIComponent(currentUrl) : '');
         window.location.href = loginUrl;
     }
     
-    // Check authentication on page load
-    if (!isAuthenticated()) {
-        redirectToLogin();
+    // Show access denied message
+    function showAccessDenied() {
+        document.body.classList.add('authenticated'); // Show the body
+        document.body.innerHTML = `
+            <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Inter, sans-serif;">
+                <div style="text-align: center; max-width: 400px;">
+                    <h1 style="color: #ef4444; margin-bottom: 1rem;">Access Denied</h1>
+                    <p style="color: #6b7280; margin-bottom: 2rem;">You don't have permission to view this documentation site.</p>
+                    <a href="/login.html" style="background: #3b82f6; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none;">Try Different Account</a>
+                </div>
+            </div>
+        `;
     }
     
-    // Add logout functionality to logout buttons
+    // Function to update auth button
+    function updateAuthButton(isAuthenticated) {
+        const authBtn = document.querySelector('.auth-btn');
+        if (authBtn) {
+            const icon = authBtn.querySelector('i');
+            if (icon) {
+                if (isAuthenticated) {
+                    icon.className = 'fas fa-sign-out-alt';
+                    authBtn.title = 'Logout';
+                    authBtn.href = '/logout.html';
+                } else {
+                    icon.className = 'fas fa-sign-in-alt';
+                    authBtn.title = 'Login';
+                    authBtn.href = '/login.html';
+                }
+            }
+        }
+    }
+    
+    // Add auth button functionality
     document.addEventListener('DOMContentLoaded', function() {
-        const logoutLinks = document.querySelectorAll('a[href*="logout"]');
-        logoutLinks.forEach(link => {
-            link.addEventListener('click', function(e) {
-                e.preventDefault();
-                // Clear auth cookie
-                document.cookie = 'doc-auth=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-                window.location.href = '/logout.html';
+        const authBtn = document.querySelector('.auth-btn');
+        if (authBtn) {
+            authBtn.addEventListener('click', async function(e) {
+                // Check if we're logged in
+                const { data: { user } } = await supabaseClient.auth.getUser();
+                if (user) {
+                    // Logged in - sign out
+                    e.preventDefault();
+                    await supabaseClient.auth.signOut();
+                    window.location.href = '/logout.html';
+                }
+                // If not logged in, normal navigation to login page will occur
             });
-        });
+        }
     });
     
-})();
+    // Run auth check
+    checkAuth();
+    
+})();

package/html/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();
 });