@mgks/docmd 0.3.2 → 0.3.3

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

@@ -1,285 +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.
-        });*/
-  });
-}
-
-// --- Mobile Menu Logic ---
-function initializeMobileMenus() {
-  // 1. Sidebar Toggle
-  const sidebarBtn = document.querySelector('.sidebar-menu-button');
-  const sidebar = document.querySelector('.sidebar');
-  
-  if (sidebarBtn && sidebar) {
-    sidebarBtn.addEventListener('click', (e) => {
-      e.stopPropagation(); // Prevent bubbling
-      sidebar.classList.toggle('mobile-expanded');
-    });
-  }
-
-  // 2. TOC Toggle
-  const tocBtn = document.querySelector('.toc-menu-button');
-  const tocContainer = document.querySelector('.toc-container');
-  // Also allow clicking the title text to toggle
-  const tocTitle = document.querySelector('.toc-title');
-
-  const toggleToc = (e) => {
-    // Only engage on mobile view (check if button is visible)
-    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 ---
-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();
-  initializeMobileMenus();
-  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);
-    }
-  });
-
-})();