@mgks/docmd 0.2.8 → 0.3.0

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

@@ -3,6 +3,7 @@
 /* 
  * Main client-side script for docmd UI interactions
  */
+
 // --- Collapsible Navigation Logic ---
 function initializeCollapsibleNav() {
   const nav = document.querySelector('.sidebar-nav');
@@ -20,7 +21,7 @@ function initializeCollapsibleNav() {
     const submenu = item.querySelector('.submenu');
 
     if (!navId || !anchor || !submenu) return;
-    
+
     const isParentActive = item.classList.contains('active-parent');
     // Default to expanded if it's a parent of the active page, otherwise check stored state.
     let isExpanded = isParentActive || (navStates[navId] === true);
@@ -51,19 +52,19 @@ function initializeCollapsibleNav() {
       }
     });
 
-/*    anchor.addEventListener('click', (e) => {
-      // If the click target is the icon, ALWAYS prevent navigation and toggle.
-      if (e.target.closest('.collapse-icon')) {
-        e.preventDefault();
-        toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
-      } 
-      // If the link is just a placeholder, also prevent navigation and toggle.
-      else if (anchor.getAttribute('href') === '#') {
-        e.preventDefault();
-        toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
-      }
-      // Otherwise, let the click proceed to navigate to the link.
-    });*/
+    /*    anchor.addEventListener('click', (e) => {
+          // If the click target is the icon, ALWAYS prevent navigation and toggle.
+          if (e.target.closest('.collapse-icon')) {
+            e.preventDefault();
+            toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
+          } 
+          // If the link is just a placeholder, also prevent navigation and toggle.
+          else if (anchor.getAttribute('href') === '#') {
+            e.preventDefault();
+            toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
+          }
+          // Otherwise, let the click proceed to navigate to the link.
+        });*/
   });
 }
 
@@ -101,7 +102,7 @@ function setupThemeToggleListener() {
     document.documentElement.setAttribute('data-theme', theme);
     document.body.setAttribute('data-theme', theme);
     localStorage.setItem('docmd-theme', theme);
-    
+
     // Switch highlight.js theme
     const highlightThemeLink = document.getElementById('highlight-theme');
     if (highlightThemeLink) {
@@ -131,7 +132,7 @@ function initializeSidebarToggle() {
 
   const defaultConfigCollapsed = body.dataset.defaultCollapsed === 'true';
   let isCollapsed = localStorage.getItem('docmd-sidebar-collapsed');
-  
+
   if (isCollapsed === null) {
     isCollapsed = defaultConfigCollapsed;
   } else {
@@ -161,8 +162,8 @@ function initializeTabs() {
         tabPanes.forEach(pane => pane.classList.remove('active'));
 
         navItem.classList.add('active');
-        if(tabPanes[index]) {
-            tabPanes[index].classList.add('active');
+        if (tabPanes[index]) {
+          tabPanes[index].classList.add('active');
         }
       });
     });
@@ -186,16 +187,16 @@ function initializeCopyCodeButtons() {
     const wrapper = document.createElement('div');
     wrapper.style.position = 'relative';
     wrapper.style.display = 'block';
-    
+
     // Insert the wrapper before the pre element
     preElement.parentNode.insertBefore(wrapper, preElement);
-    
+
     // Move the pre element into the wrapper
     wrapper.appendChild(preElement);
-    
+
     // Remove the relative positioning from pre since wrapper handles it
     preElement.style.position = 'static';
-    
+
     const copyButton = document.createElement('button');
     copyButton.className = 'copy-code-button';
     copyButton.innerHTML = copyIconSvg;
@@ -224,7 +225,7 @@ function syncBodyTheme() {
   if (currentTheme && document.body) {
     document.body.setAttribute('data-theme', currentTheme);
   }
-  
+
   // Also ensure highlight CSS matches the current theme
   const highlightThemeLink = document.getElementById('highlight-theme');
   if (highlightThemeLink && currentTheme) {

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

@@ -1,13 +1,16 @@
 // Source file from the docmd project — https://github.com/mgks/docmd
-// Mermaid diagram integration with theme support
 
-(function() {
+/*
+ * 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',
@@ -33,16 +36,16 @@
 
     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') {
@@ -50,7 +53,7 @@
     }
 
     const mermaidElements = document.querySelectorAll('pre.mermaid');
-    
+
     mermaidElements.forEach((element, index) => {
       // Skip if already rendered
       if (element.getAttribute('data-processed') === 'true') {
@@ -60,22 +63,22 @@
       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) {
@@ -83,17 +86,17 @@
       }
     });
   }
-  
+
   // 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;
@@ -102,21 +105,21 @@
       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}'`);
@@ -126,10 +129,10 @@
         // 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;
   }
@@ -142,21 +145,21 @@
 
     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);
@@ -182,7 +185,7 @@
 
   // Initialize when DOM is ready
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
       initializeMermaid();
       setupThemeObserver();
     });
@@ -192,12 +195,11 @@
   }
 
   // Handle tab switches - render mermaid in newly visible tabs
-  document.addEventListener('click', function(e) {
+  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,212 @@
+// 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');
+
+    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 basePath = document.documentElement.getAttribute('data-base-url') || '/';
+            const response = await fetch(`${basePath}search-index.json`);
+            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);
+            // Add data-index for mouse interaction tracking if needed
+            return `
+                <a href="/${result.id}" 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;
+})();