@docmd/live 0.4.0

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

@@ -0,0 +1,276 @@
+// Source file from the docmd project — https://github.com/docmd-io/docmd
+
+/* 
+ * Main client-side script for docmd UI interactions
+ */
+
+// --- Collapsible Navigation Logic ---
+function initializeCollapsibleNav() {
+  const nav = document.querySelector('.sidebar-nav');
+  if (!nav) return;
+
+  // 1. Initial Cleanup (ensure classes match aria states)
+  nav.querySelectorAll('li.collapsible').forEach(item => {
+      // If server rendered it as expanded, ensure aria matches
+      if (item.classList.contains('expanded')) {
+          item.setAttribute('aria-expanded', 'true');
+      } else {
+          item.setAttribute('aria-expanded', 'false');
+      }
+  });
+
+  // 2. Event Delegation
+  nav.addEventListener('click', (e) => {
+    // Check if the click target is the arrow or inside the arrow wrapper
+    const arrow = e.target.closest('.collapse-icon-wrapper');
+    
+    if (arrow) {
+      // STOP everything. Do not follow the link.
+      e.preventDefault();
+      e.stopPropagation();
+
+      const item = arrow.closest('li.collapsible');
+      if (item) {
+        // Toggle State
+        const isExpanded = item.classList.contains('expanded');
+        
+        if (isExpanded) {
+            item.classList.remove('expanded');
+            item.setAttribute('aria-expanded', 'false');
+        } else {
+            item.classList.add('expanded');
+            item.setAttribute('aria-expanded', 'true');
+        }
+      }
+      return false;
+    }
+  });
+}
+
+// --- 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 toggleButtons = document.querySelectorAll('.theme-toggle-button');
+
+  function applyTheme(theme) {
+    const validThemes = ['light', 'dark'];
+    const selectedTheme = validThemes.includes(theme) ? theme : 'light';
+
+    // 1. Update DOM & Storage
+    document.documentElement.setAttribute('data-theme', selectedTheme);
+    document.body.setAttribute('data-theme', selectedTheme);
+    localStorage.setItem('docmd-theme', selectedTheme);
+
+    // 2. Toggle Highlight.js Stylesheets
+    const lightLink = document.getElementById('hljs-light');
+    const darkLink = document.getElementById('hljs-dark');
+
+    if (lightLink && darkLink) {
+        if (selectedTheme === 'dark') {
+            lightLink.disabled = true;
+            darkLink.disabled = false;
+        } else {
+            lightLink.disabled = false;
+            darkLink.disabled = true;
+        }
+    }
+  }
+
+  toggleButtons.forEach(btn => {
+    // Clone button to remove old listeners if any (safety measure)
+    const newBtn = btn.cloneNode(true);
+    btn.parentNode.replaceChild(newBtn, btn);
+    
+    newBtn.addEventListener('click', () => {
+      const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+      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);
+  }
+}
+
+// --- Scroll Spy Logic ---
+function initializeScrollSpy() {
+  const tocLinks = document.querySelectorAll('.toc-link');
+  const headings = document.querySelectorAll('.main-content h2, .main-content h3');
+  
+  if (tocLinks.length === 0 || headings.length === 0) return;
+
+  const observerOptions = {
+    root: null,
+    // Trigger when heading crosses the top 10% of screen
+    rootMargin: '-10% 0px -80% 0px', 
+    threshold: 0
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        // 1. Clear current active state
+        tocLinks.forEach(link => link.classList.remove('active'));
+        
+        // 2. Find link corresponding to this heading
+        const id = entry.target.getAttribute('id');
+        const activeLink = document.querySelector(`.toc-link[href="#${id}"]`);
+        
+        if (activeLink) {
+            activeLink.classList.add('active');
+            
+            // Optional: Auto-scroll the TOC sidebar itself if needed
+            // activeLink.scrollIntoView({ block: 'nearest' });
+        }
+      }
+    });
+  }, observerOptions);
+
+  headings.forEach(heading => observer.observe(heading));
+}
+
+// --- Main Execution ---
+document.addEventListener('DOMContentLoaded', () => {
+  syncBodyTheme();
+  setupThemeToggleListener();
+  initializeSidebarToggle();
+  initializeTabs();
+  initializeCopyCodeButtons();
+  initializeCollapsibleNav();
+  initializeMobileMenus();
+  initializeSidebarScroll();
+  initializeScrollSpy();
+});

package/dist/docmd-live.css

@@ -0,0 +1,275 @@
+/* Source file from the docmd project — https://github.com/docmd-io/docmd */
+
+:root {
+    --header-height: 50px;
+    --border-color: #e0e0e0;
+    --bg-color: #f9fafb;
+    --primary-color: #007bff;
+    --resizer-width: 8px
+}
+
+body {
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    overflow: hidden
+}
+
+.top-bar {
+    height: var(--header-height);
+    background: #fff;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    flex-shrink: 0
+}
+
+.logo {
+    font-weight: 700;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 12px
+}
+
+.logo span {
+    background: var(--primary-color);
+    color: #fff;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: .75rem;
+    text-transform: uppercase
+}
+
+.back-link {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    background-color: #f0f0f0;
+    border-radius: 100%;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    transition: color 0.2s, transform .2s;
+    text-decoration: none;
+    padding: 4px;
+}
+
+.back-link:hover {
+    color: var(--primary-color);
+    background: #f0f0f0;
+    transform: translateX(-2px)
+}
+
+.logo .docmd-logo {
+    color: inherit;
+    text-decoration: none;
+    transition: .5s;
+}
+
+.logo .docmd-logo:hover {
+    color: var(--primary-color);
+}
+
+.view-switcher {
+    display: flex;
+    background: #f0f0f0;
+    padding: 3px;
+    border-radius: 8px;
+    gap: 0;
+}
+
+.view-btn {
+    border: none;
+    background: transparent;
+    padding: 6px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    color: #666;
+    font-weight: 500;
+    transition: background 0.15s, color 0.15s;
+}
+
+.view-btn:hover {
+    color: #333;
+}
+
+.view-btn.active {
+    background: #fff;
+    color: #000;
+    box-shadow: 0 1px 3px #0000001a;
+    font-weight: 600;
+}
+
+.workspace {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden
+}
+
+.pane {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    background: #fff
+}
+
+.pane-header {
+    padding: 8px 16px;
+    font-size: .75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #888;
+    background: var(--bg-color);
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0
+}
+
+.editor-pane {
+    width: 50%
+}
+
+textarea#input {
+    flex: 1;
+    border: none;
+    resize: none;
+    padding: 20px;
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    outline: none;
+    background: var(--bg-color)
+}
+
+.preview-pane {
+    flex: 1;
+    background: #fff
+}
+
+iframe#preview {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block
+}
+
+.resizer {
+    width: var(--resizer-width);
+    background: var(--bg-color);
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    cursor: col-resize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background .2s;
+    z-index: 10
+}
+
+.resizer:hover,
+.resizer.resizing {
+    background: #e0e0e0
+}
+
+.resizer::after {
+    content: "||";
+    color: #aaa;
+    font-size: 10px;
+    letter-spacing: 1px
+}
+
+body.mode-single .resizer {
+    display: none
+}
+
+body.mode-single .pane {
+    width: 100% !important;
+    min-width: 0
+}
+
+body.mode-single .editor-pane {
+    display: none
+}
+
+body.mode-single .preview-pane {
+    display: none
+}
+
+body.mode-single.show-editor .editor-pane {
+    display: flex
+}
+
+body.mode-single.show-preview .preview-pane {
+    display: flex
+}
+
+@media (max-width: 768px) {
+    .desktop-only {
+        display: none !important
+    }
+
+    .resizer {
+        display: none !important
+    }
+
+    .pane {
+        width: 100% !important
+    }
+
+    .editor-pane {
+        display: none
+    }
+
+    .preview-pane {
+        display: none
+    }
+
+    body.mobile-tab-editor .editor-pane {
+        display: flex
+    }
+
+    body.mobile-tab-preview .preview-pane {
+        display: flex
+    }
+
+    .mobile-tabs {
+        display: flex !important;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 50px;
+        background: #fff;
+        border-top: 1px solid var(--border-color);
+        z-index: 100
+    }
+
+    .mobile-tab-btn {
+        flex: 1;
+        border: none;
+        background: transparent;
+        font-weight: 600;
+        color: #888;
+        cursor: pointer
+    }
+
+    .mobile-tab-btn.active {
+        color: var(--primary-color);
+        border-top: 2px solid var(--primary-color)
+    }
+
+    .workspace {
+        padding-bottom: 50px
+    }
+}
+
+.mobile-tabs {
+    display: none
+}