@mgks/docmd 0.3.3 → 0.3.5

package/src/assets/js/docmd-main.js

@@ -0,0 +1,214 @@
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/* 
+ * Main client-side script for docmd UI interactions
+ */
+
+// --- Collapsible Navigation Logic ---
+function initializeCollapsibleNav() {
+  const nav = document.querySelector('.sidebar-nav');
+  if (!nav) return;
+
+  // We NO LONGER set initial state here. 
+  // The HTML arrives with style="display: block" and aria-expanded="true" 
+  // pre-rendered by the build process. This eliminates the FOUC/Jitter.
+
+  nav.querySelectorAll('li.collapsible').forEach(item => {
+    const anchor = item.querySelector('a');
+    const submenu = item.querySelector('.submenu');
+
+    if (!anchor || !submenu) return;
+
+    // Only handle CLICK events to toggle state
+    anchor.addEventListener('click', (e) => {
+      const href = anchor.getAttribute('href');
+      // If it's a placeholder link (#) OR the user clicked the arrow icon
+      const isToggleAction = !href || href === '#' || e.target.closest('.collapse-icon');
+
+      if (isToggleAction) {
+        e.preventDefault();
+        
+        // Toggle Logic
+        const isExpanded = item.getAttribute('aria-expanded') === 'true';
+        const newState = !isExpanded;
+        
+        item.setAttribute('aria-expanded', newState);
+        submenu.style.display = newState ? 'block' : 'none';
+      }
+    });
+  });
+}
+
+// --- Mobile Menu Logic ---
+function initializeMobileMenus() {
+  const sidebarBtn = document.querySelector('.sidebar-menu-button');
+  const sidebar = document.querySelector('.sidebar');
+  
+  if (sidebarBtn && sidebar) {
+    sidebarBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      sidebar.classList.toggle('mobile-expanded');
+    });
+  }
+
+  const tocBtn = document.querySelector('.toc-menu-button');
+  const tocContainer = document.querySelector('.toc-container');
+  const tocTitle = document.querySelector('.toc-title');
+
+  const toggleToc = (e) => {
+    if (window.getComputedStyle(tocBtn).display === 'none') return;
+    e.stopPropagation();
+    tocContainer.classList.toggle('mobile-expanded');
+  };
+
+  if (tocBtn && tocContainer) {
+    tocBtn.addEventListener('click', toggleToc);
+    if (tocTitle) tocTitle.addEventListener('click', toggleToc);
+  }
+}
+
+// --- Sidebar Scroll Preservation (Instant Center) ---
+function initializeSidebarScroll() {
+  const sidebar = document.querySelector('.sidebar');
+  if (!sidebar) return;
+
+  // Wait for the layout to be stable
+  requestAnimationFrame(() => {
+    // Find the active link
+    const activeElement = sidebar.querySelector('a.active');
+
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: 'auto', // INSTANT jump (prevents scrolling animation jitter)
+        block: 'center',  // Center it vertically in the sidebar
+        inline: 'nearest'
+      });
+    }
+  });
+}
+
+// --- Theme Toggle Logic ---
+function setupThemeToggleListener() {
+  const themeToggleButton = document.getElementById('theme-toggle-button');
+
+  function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    document.body.setAttribute('data-theme', theme);
+    localStorage.setItem('docmd-theme', theme);
+
+    const highlightThemeLink = document.getElementById('highlight-theme');
+    if (highlightThemeLink) {
+      const newHref = highlightThemeLink.getAttribute('data-base-href') + `docmd-highlight-${theme}.css`;
+      highlightThemeLink.setAttribute('href', newHref);
+    }
+  }
+
+  if (themeToggleButton) {
+    themeToggleButton.addEventListener('click', () => {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+      applyTheme(newTheme);
+    });
+  }
+}
+
+// --- Sidebar Collapse Logic ---
+function initializeSidebarToggle() {
+  const toggleButton = document.getElementById('sidebar-toggle-button');
+  const body = document.body;
+
+  if (!body.classList.contains('sidebar-collapsible') || !toggleButton) return;
+
+  const defaultConfigCollapsed = body.dataset.defaultCollapsed === 'true';
+  let isCollapsed = localStorage.getItem('docmd-sidebar-collapsed');
+
+  if (isCollapsed === null) isCollapsed = defaultConfigCollapsed;
+  else isCollapsed = isCollapsed === 'true';
+
+  if (isCollapsed) body.classList.add('sidebar-collapsed');
+
+  toggleButton.addEventListener('click', () => {
+    body.classList.toggle('sidebar-collapsed');
+    const currentlyCollapsed = body.classList.contains('sidebar-collapsed');
+    localStorage.setItem('docmd-sidebar-collapsed', currentlyCollapsed);
+  });
+}
+
+// --- Tabs Container Logic ---
+function initializeTabs() {
+  document.querySelectorAll('.docmd-tabs').forEach(tabsContainer => {
+    const navItems = tabsContainer.querySelectorAll('.docmd-tabs-nav-item');
+    const tabPanes = tabsContainer.querySelectorAll('.docmd-tab-pane');
+
+    navItems.forEach((navItem, index) => {
+      navItem.addEventListener('click', () => {
+        navItems.forEach(item => item.classList.remove('active'));
+        tabPanes.forEach(pane => pane.classList.remove('active'));
+
+        navItem.classList.add('active');
+        if (tabPanes[index]) tabPanes[index].classList.add('active');
+      });
+    });
+  });
+}
+
+// --- Copy Code Button Logic ---
+function initializeCopyCodeButtons() {
+  if (document.body.dataset.copyCodeEnabled !== 'true') return;
+
+  const copyIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`;
+  const checkIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+
+  document.querySelectorAll('pre').forEach(preElement => {
+    const codeElement = preElement.querySelector('code');
+    if (!codeElement) return;
+
+    const wrapper = document.createElement('div');
+    wrapper.style.position = 'relative';
+    wrapper.style.display = 'block';
+
+    preElement.parentNode.insertBefore(wrapper, preElement);
+    wrapper.appendChild(preElement);
+    preElement.style.position = 'static';
+
+    const copyButton = document.createElement('button');
+    copyButton.className = 'copy-code-button';
+    copyButton.innerHTML = copyIconSvg;
+    copyButton.setAttribute('aria-label', 'Copy code to clipboard');
+    wrapper.appendChild(copyButton);
+
+    copyButton.addEventListener('click', () => {
+      navigator.clipboard.writeText(codeElement.innerText).then(() => {
+        copyButton.innerHTML = checkIconSvg;
+        copyButton.classList.add('copied');
+        setTimeout(() => {
+          copyButton.innerHTML = copyIconSvg;
+          copyButton.classList.remove('copied');
+        }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy text: ', err);
+        copyButton.innerText = 'Error';
+      });
+    });
+  });
+}
+
+// --- Theme Sync Function ---
+function syncBodyTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme');
+  if (currentTheme && document.body) {
+    document.body.setAttribute('data-theme', currentTheme);
+  }
+}
+
+// --- Main Execution ---
+document.addEventListener('DOMContentLoaded', () => {
+  syncBodyTheme();
+  setupThemeToggleListener();
+  initializeSidebarToggle();
+  initializeTabs();
+  initializeCopyCodeButtons();
+  initializeCollapsibleNav();
+  initializeMobileMenus();
+  initializeSidebarScroll();
+});

package/src/assets/js/docmd-mermaid.js

@@ -0,0 +1,205 @@
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/*
+ * Mermaid diagram integration with theme support
+ */
+
+(function () {
+  'use strict';
+
+  // Configuration for mermaid based on current theme
+  function getMermaidConfig(theme) {
+    const isDark = theme === 'dark';
+
+    return {
+      startOnLoad: false,
+      theme: isDark ? 'dark' : 'default',
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true
+      },
+      sequence: {
+        useMaxWidth: true
+      },
+      gantt: {
+        useMaxWidth: true
+      }
+    };
+  }
+
+  // Initialize mermaid when DOM is ready
+  function initializeMermaid() {
+    if (typeof mermaid === 'undefined') {
+      console.warn('Mermaid library not loaded');
+      return;
+    }
+
+    const currentTheme = document.body.getAttribute('data-theme') || 'light';
+    const config = getMermaidConfig(currentTheme);
+
+    mermaid.initialize(config);
+
+    // Render all mermaid diagrams
+    renderMermaidDiagrams();
+  }
+
+  // Store for diagram codes
+  const diagramStore = new Map();
+
+  // Render all mermaid diagrams on the page
+  function renderMermaidDiagrams() {
+    if (typeof mermaid === 'undefined') {
+      return;
+    }
+
+    const mermaidElements = document.querySelectorAll('pre.mermaid');
+
+    mermaidElements.forEach((element, index) => {
+      // Skip if already rendered
+      if (element.getAttribute('data-processed') === 'true') {
+        return;
+      }
+
+      try {
+        // Get the diagram code
+        const code = element.textContent;
+
+        // Create a unique ID for this diagram
+        const id = `mermaid-diagram-${index}-${Date.now()}`;
+
+        // Store the original code for re-rendering
+        diagramStore.set(id, code);
+
+        // Create a container div
+        const container = document.createElement('div');
+        container.className = 'mermaid-container';
+        container.setAttribute('data-mermaid-id', id);
+        container.setAttribute('data-processed', 'true');
+
+        // Replace the pre element with the container
+        element.parentNode.replaceChild(container, element);
+
+        // Render the diagram
+        renderSingleDiagram(container, id, code);
+      } catch (error) {
+        console.error('Mermaid processing error:', error);
+      }
+    });
+  }
+
+  // Render a single diagram
+  function renderSingleDiagram(container, id, code) {
+    if (typeof mermaid === 'undefined') {
+      return;
+    }
+
+    // Process the code to handle theme overrides
+    const currentTheme = document.body.getAttribute('data-theme') || 'light';
+    const processedCode = processThemeInCode(code, currentTheme);
+
+    // Render the diagram
+    mermaid.render(id, processedCode).then(result => {
+      container.innerHTML = result.svg;
+    }).catch(error => {
+      console.error('Mermaid rendering error:', error);
+      container.innerHTML = `<pre class="mermaid-error">Error rendering diagram: ${error.message}</pre>`;
+    });
+  }
+
+  // Process mermaid code to inject or override theme
+  function processThemeInCode(code, theme) {
+    const isDark = theme === 'dark';
+    const targetTheme = isDark ? 'dark' : 'default';
+
+    // Check if code has %%{init: config - match the entire init block including nested objects
+    const initRegex = /%%\{init:\s*\{.*?\}\s*\}%%/s;
+    const match = code.match(initRegex);
+
+    if (match) {
+      // Code has init config, replace only the theme property
+      const initBlock = match[0];
+      let updatedBlock = initBlock;
+
+      // Try to replace theme property
+      if (initBlock.includes("'theme'")) {
+        updatedBlock = initBlock.replace(/'theme'\s*:\s*'[^']*'/, `'theme':'${targetTheme}'`);
+      } else if (initBlock.includes('"theme"')) {
+        updatedBlock = initBlock.replace(/"theme"\s*:\s*"[^"]*"/, `"theme":"${targetTheme}"`);
+      } else {
+        // Add theme to the config - insert after the first {
+        updatedBlock = initBlock.replace(/%%\{init:\s*\{/, `%%{init: {'theme':'${targetTheme}',`);
+      }
+
+      return code.replace(initRegex, updatedBlock);
+    }
+
+    // No init config, code will use global mermaid config
+    return code;
+  }
+
+  // Re-render mermaid diagrams when theme changes
+  function handleThemeChange() {
+    if (typeof mermaid === 'undefined') {
+      return;
+    }
+
+    const currentTheme = document.body.getAttribute('data-theme') || 'light';
+    const config = getMermaidConfig(currentTheme);
+
+    // Re-initialize mermaid with new theme
+    mermaid.initialize(config);
+
+    // Find all rendered diagrams and re-render them
+    const containers = document.querySelectorAll('.mermaid-container[data-processed="true"]');
+
+    containers.forEach((container) => {
+      const mermaidId = container.getAttribute('data-mermaid-id');
+      const code = diagramStore.get(mermaidId);
+
+      if (code) {
+        // Create a new unique ID for re-rendering
+        const newId = `${mermaidId}-${Date.now()}`;
+
+        // Clear the container and re-render
+        container.innerHTML = '';
+        renderSingleDiagram(container, newId, code);
+      }
+    });
+  }
+
+  // Setup theme change observer
+  function setupThemeObserver() {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+          handleThemeChange();
+        }
+      });
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () {
+      initializeMermaid();
+      setupThemeObserver();
+    });
+  } else {
+    initializeMermaid();
+    setupThemeObserver();
+  }
+
+  // Handle tab switches - render mermaid in newly visible tabs
+  document.addEventListener('click', function (e) {
+    if (e.target.classList.contains('docmd-tabs-nav-item')) {
+      // Wait a bit for tab content to be visible
+      setTimeout(renderMermaidDiagrams, 100);
+    }
+  });
+
+})();

package/src/assets/js/docmd-search.js

@@ -0,0 +1,218 @@
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/* 
+ * Client-side search functionality for docmd
+ */
+
+(function() {
+    let miniSearch = null;
+    let isIndexLoaded = false;
+    let selectedIndex = -1; // Track keyboard selection
+    
+    const searchModal = document.getElementById('docmd-search-modal');
+    const searchInput = document.getElementById('docmd-search-input');
+    const searchResults = document.getElementById('docmd-search-results');
+
+    const ROOT_PATH = window.DOCMD_ROOT || './';
+
+    if (!searchModal) return;
+
+    const emptyStateHtml = '<div class="search-initial">Type to start searching...</div>';
+
+    // 1. Open/Close Logic
+    function openSearch() {
+        searchModal.style.display = 'flex';
+        searchInput.focus();
+        
+        if (!searchInput.value.trim()) {
+            searchResults.innerHTML = emptyStateHtml;
+            selectedIndex = -1;
+        }
+        
+        if (!isIndexLoaded) loadIndex();
+    }
+
+    function closeSearch() {
+        searchModal.style.display = 'none';
+        selectedIndex = -1; // Reset selection
+    }
+
+    // 2. Keyboard Navigation & Shortcuts
+    document.addEventListener('keydown', (e) => {
+        // Open: Cmd+K / Ctrl+K
+        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+            e.preventDefault();
+            if (searchModal.style.display === 'flex') {
+                closeSearch();
+            } else {
+                openSearch();
+            }
+        }
+        
+        // Context: Only handle these if search is open
+        if (searchModal.style.display === 'flex') {
+            const items = searchResults.querySelectorAll('.search-result-item');
+            
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                closeSearch();
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (items.length === 0) return;
+                selectedIndex = (selectedIndex + 1) % items.length;
+                updateSelection(items);
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (items.length === 0) return;
+                selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+                updateSelection(items);
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (selectedIndex >= 0 && items[selectedIndex]) {
+                    items[selectedIndex].click();
+                } else if (items.length > 0) {
+                    // If nothing selected but results exist, click the first one on Enter
+                    items[0].click();
+                }
+            }
+        }
+    });
+
+    function updateSelection(items) {
+        items.forEach((item, index) => {
+            if (index === selectedIndex) {
+                item.classList.add('selected');
+                item.scrollIntoView({ block: 'nearest' });
+            } else {
+                item.classList.remove('selected');
+            }
+        });
+    }
+
+    // Click handlers
+    document.querySelectorAll('.docmd-search-trigger').forEach(btn => {
+        btn.addEventListener('click', openSearch);
+    });
+
+    searchModal.addEventListener('click', (e) => {
+        if (e.target === searchModal) closeSearch();
+    });
+
+    // 3. Index Loading Logic
+    async function loadIndex() {
+        try {
+
+            const indexUrl = `${ROOT_PATH}search-index.json`;
+            const response = await fetch(indexUrl);
+            if (!response.ok) throw new Error(response.status);
+
+            const jsonString = await response.text();
+            
+            miniSearch = MiniSearch.loadJSON(jsonString, {
+                fields: ['title', 'headings', 'text'],
+                storeFields: ['title', 'id', 'text'],
+                searchOptions: {
+                    fuzzy: 0.2,
+                    prefix: true,
+                    boost: { title: 2, headings: 1.5 }
+                }
+            });
+            
+            isIndexLoaded = true;
+            // console.log('Search index loaded');
+            
+            if (searchInput.value.trim()) {
+                searchInput.dispatchEvent(new Event('input'));
+            }
+
+        } catch (e) {
+            console.error('Failed to load search index', e);
+            searchResults.innerHTML = '<div class="search-error">Failed to load search index.</div>';
+        }
+    }
+
+    // Helper: Snippets (Same as before)
+    function getSnippet(text, query) {
+        if (!text) return '';
+        const terms = query.split(/\s+/).filter(t => t.length > 2);
+        const lowerText = text.toLowerCase();
+        let bestIndex = -1;
+        
+        for (const term of terms) {
+            const idx = lowerText.indexOf(term.toLowerCase());
+            if (idx >= 0) { bestIndex = idx; break; }
+        }
+        
+        const contextSize = 60;
+        let start = 0;
+        let end = 120;
+        
+        if (bestIndex >= 0) {
+            start = Math.max(0, bestIndex - contextSize);
+            end = Math.min(text.length, bestIndex + contextSize);
+        }
+        
+        let snippet = text.substring(start, end);
+        if (start > 0) snippet = '...' + snippet;
+        if (end < text.length) snippet = snippet + '...';
+        
+        const safeTerms = terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+        if (safeTerms) {
+            const highlightRegex = new RegExp(`(${safeTerms})`, 'gi');
+            snippet = snippet.replace(highlightRegex, '<mark>$1</mark>');
+        }
+        return snippet;
+    }
+
+    // 4. Search Execution
+    searchInput.addEventListener('input', (e) => {
+        const query = e.target.value.trim();
+        selectedIndex = -1; // Reset selection on new input
+        
+        if (!query) {
+            searchResults.innerHTML = emptyStateHtml;
+            return;
+        }
+        
+        if (!isIndexLoaded) return;
+
+        const results = miniSearch.search(query);
+        renderResults(results, query);
+    });
+
+    function renderResults(results, query) {
+        if (results.length === 0) {
+            searchResults.innerHTML = '<div class="search-no-results">No results found.</div>';
+            return;
+        }
+
+        const html = results.slice(0, 10).map((result, index) => {
+            const snippet = getSnippet(result.text, query);
+
+            const linkHref = `${ROOT_PATH}${result.id}`;
+
+            // Add data-index for mouse interaction tracking if needed
+            return `
+                <a href="${linkHref}" class="search-result-item" data-index="${index}" onclick="window.closeDocmdSearch()">
+                    <div class="search-result-title">${result.title}</div>
+                    <div class="search-result-preview">${snippet}</div>
+                </a>
+            `;
+        }).join('');
+
+        searchResults.innerHTML = html;
+        
+        // Optional: Allow mouse hover to update selectedIndex
+        searchResults.querySelectorAll('.search-result-item').forEach((item, idx) => {
+            item.addEventListener('mouseenter', () => {
+                selectedIndex = idx;
+                updateSelection(searchResults.querySelectorAll('.search-result-item'));
+            });
+        });
+    }
+    
+    window.closeDocmdSearch = closeSearch;
+})();

package/src/commands/build.js

@@ -66,6 +66,7 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
   const md = createMarkdownItInstance(config);
   const shouldMinify = !options.isDev && config.minify !== false;
   const searchIndexData = [];
+  const isOfflineMode = options.offline === true;
 
   if (!await fs.pathExists(SRC_DIR)) {
     throw new Error(`Source directory not found: ${formatPathForDisplay(SRC_DIR, CWD)}`);
@@ -287,10 +288,11 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
       const currentPagePathForNav = normalizedPath;
 
       const navigationHtml = await generateNavigationHtml(
-        config.navigation,
-        currentPagePathForNav,
-        relativePathToRoot,
-        config
+          config.navigation,
+          normalizedPath,
+          relativePathToRoot,
+          config,
+          isOfflineMode
       );
 
       // Find previous and next pages for navigation
@@ -320,9 +322,10 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
         nextPage: nextPage,
         currentPagePath: normalizedPath,
         headings: headings || [],
+        isOfflineMode,
       };
 
-      const pageHtml = await generateHtmlPage(pageDataForTemplate);
+      const pageHtml = await generateHtmlPage(pageDataForTemplate, isOfflineMode);
 
       await fs.ensureDir(path.dirname(finalOutputHtmlPath));
       await fs.writeFile(finalOutputHtmlPath, pageHtml);
@@ -369,7 +372,9 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
 
   // Generate search index if enabled
   if (config.search !== false) {
-    console.log('🔍 Generating search index...');
+    if (!options.isDev) {
+      console.log('🔍 Generating search index...');
+    }
 
     // Create MiniSearch instance
     const miniSearch = new MiniSearch({