@mgks/docmd 0.3.1 → 0.3.3

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

@@ -1,249 +0,0 @@
-// 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;
-
-  let navStates = {};
-  try {
-    // Use sessionStorage to remember state only for the current session
-    navStates = JSON.parse(sessionStorage.getItem('docmd-nav-states')) || {};
-  } catch (e) { /* silent fail */ }
-
-  nav.querySelectorAll('li.collapsible').forEach(item => {
-    const navId = item.dataset.navId;
-    const anchor = item.querySelector('a');
-    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);
-
-    const toggleSubmenu = (expand) => {
-      item.setAttribute('aria-expanded', expand);
-      submenu.style.display = expand ? 'block' : 'none';
-      navStates[navId] = expand;
-      sessionStorage.setItem('docmd-nav-states', JSON.stringify(navStates));
-    };
-
-    // Set initial state on page load
-    toggleSubmenu(isExpanded);
-
-    anchor.addEventListener('click', (e) => {
-      const currentExpanded = item.getAttribute('aria-expanded') === 'true';
-      const href = anchor.getAttribute('href');
-      const isPlaceholder = !href || href === '#' || href === '';
-
-      if (!currentExpanded) {
-        toggleSubmenu(true);
-      } else if (isPlaceholder || e.target.closest('.collapse-icon')) {
-        toggleSubmenu(false);
-      }
-
-      if (isPlaceholder || e.target.closest('.collapse-icon')) {
-        e.preventDefault();
-      }
-    });
-
-    /*    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.
-        });*/
-  });
-}
-
-// --- Sidebar Scroll Preservation ---
-function initializeSidebarScroll() {
-  const sidebar = document.querySelector('.sidebar');
-  if (!sidebar) return;
-
-  setTimeout(() => {
-    const activeElement = sidebar.querySelector('a.active') || sidebar.querySelector('.active-parent > a');
-
-    if (activeElement) {
-      const sidebarRect = sidebar.getBoundingClientRect();
-      const elementRect = activeElement.getBoundingClientRect();
-
-      // Check if the element's top or bottom is outside the sidebar's visible area
-      const isNotInView = elementRect.top < sidebarRect.top || elementRect.bottom > sidebarRect.bottom;
-
-      if (isNotInView) {
-        activeElement.scrollIntoView({
-          behavior: 'auto',
-          block: 'center',
-          inline: 'nearest'
-        });
-      }
-    }
-  }, 10);
-}
-
-// --- 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);
-
-    // Switch highlight.js theme
-    const highlightThemeLink = document.getElementById('highlight-theme');
-    if (highlightThemeLink) {
-      const newHref = highlightThemeLink.getAttribute('data-base-href') + `docmd-highlight-${theme}.css`;
-      highlightThemeLink.setAttribute('href', newHref);
-    }
-  }
-
-  // Add click listener to the toggle button
-  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;
-
-    // Create a wrapper div around the pre element
-    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;
-    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);
-  }
-
-  // Also ensure highlight CSS matches the current theme
-  const highlightThemeLink = document.getElementById('highlight-theme');
-  if (highlightThemeLink && currentTheme) {
-    const baseHref = highlightThemeLink.getAttribute('data-base-href');
-    if (baseHref) {
-      const newHref = baseHref + `docmd-highlight-${currentTheme}.css`;
-      highlightThemeLink.setAttribute('href', newHref);
-    }
-  }
-}
-
-// --- Main Execution ---
-document.addEventListener('DOMContentLoaded', () => {
-  syncBodyTheme(); // Sync body theme with html theme
-  setupThemeToggleListener();
-  initializeSidebarToggle();
-  initializeTabs();
-  initializeCopyCodeButtons();
-  initializeCollapsibleNav();
-  initializeSidebarScroll();
-});

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

@@ -1,205 +0,0 @@
-// 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

@@ -1,218 +0,0 @@
-// 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;
-})();