@mgks/docmd 0.3.0 → 0.3.2

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

@@ -68,6 +68,41 @@ function initializeCollapsibleNav() {
   });
 }
 
+// --- 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');
@@ -245,5 +280,6 @@ document.addEventListener('DOMContentLoaded', () => {
   initializeTabs();
   initializeCopyCodeButtons();
   initializeCollapsibleNav();
+  initializeMobileMenus();
   initializeSidebarScroll();
 });

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

@@ -13,6 +13,8 @@
     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>';
@@ -102,8 +104,9 @@
     // 3. Index Loading Logic
     async function loadIndex() {
         try {
-            const basePath = document.documentElement.getAttribute('data-base-url') || '/';
-            const response = await fetch(`${basePath}search-index.json`);
+
+            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();
@@ -188,9 +191,12 @@
 
         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="/${result.id}" class="search-result-item" data-index="${index}" onclick="window.closeDocmdSearch()">
+                <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>

package/src/core/config-validator.js

@@ -6,7 +6,8 @@ const chalk = require('chalk');
 const KNOWN_KEYS = [
   'siteTitle', 'siteUrl', 'srcDir', 'outputDir', 'logo', 
   'sidebar', 'theme', 'customJs', 'autoTitleFromH1', 
-  'copyCode', 'plugins', 'navigation', 'footer', 'sponsor', 'favicon'
+  'copyCode', 'plugins', 'navigation', 'footer', 'sponsor', 'favicon',
+  'search', 'minify', 'editLink', 'pageNavigation'
 ];
 
 // Common typos mapping

package/src/templates/layout.ejs

@@ -13,14 +13,19 @@
 
     <%- faviconLinkHtml || '' %> <%# Favicon %>
 
-    <%- themeInitScript %>
-
-    <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css">
+    <!-- Define Default Mode (Variable for script) -->
+    <script>
+      window.DOCMD_DEFAULT_MODE = "<%= defaultMode %>";
+    </script>
 
+    <!-- Highlight.js Theme -->
     <% if (config.theme?.codeHighlight !== false) { %>
         <link rel="stylesheet" id="highlight-theme" href="<%= relativePathToRoot %>assets/css/docmd-highlight-<%= defaultMode === 'dark' ? 'dark' : 'light' %>.css" data-base-href="<%= relativePathToRoot %>assets/css/">
     <% } %>
 
+    <!-- Main Theme -->
+    <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css">
+    
     <%- themeCssLinkHtml || '' %> <%# For theme.name specific CSS %>
 
     <% (customCssFiles || []).forEach(cssFile => { %>
@@ -29,10 +34,13 @@
 
     <%- pluginStylesHtml || '' %> <%# Plugin specific CSS %>
 
-    <%- pluginHeadScriptsHtml || '' %> <%# Plugin specific head scripts (e.g., Analytics) %>
+    <!-- This checks storage and updates HTML attr + Highlight CSS before final paint -->
+    <%- themeInitScript %>
+
+    <%- pluginHeadScriptsHtml || '' %> <%# Plugin specific head scripts %>
 </head>
 <body class="<%= sidebarConfig.collapsible ? 'sidebar-collapsible' : 'sidebar-not-collapsible' %>"
-    data-theme="<%= defaultMode %>" data-default-collapsed="<%= sidebarConfig.defaultCollapsed %>"
+    data-default-collapsed="<%= sidebarConfig.defaultCollapsed %>"
     data-copy-code-enabled="<%= config.copyCode === true %>">
     <aside class="sidebar">
         <div class="sidebar-header">
@@ -44,11 +52,13 @@
             <% } else { %>
                 <h1><a href="<%= relativePathToRoot %>index.html"><%= siteTitle %></a></h1>
             <% } %>
+                <span class="mobile-view sidebar-menu-button float-right">
+                    <%- renderIcon("ellipsis-vertical") %>
+                </span>
         </div>
         <%- navigationHtml %>
         <% if (theme && theme.enableModeToggle && theme.positionMode !== 'top') { %>
           <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button">
-            <%# renderIcon is available in the global EJS scope from html-generator %>
             <%- renderIcon('sun', { class: 'icon-sun' }) %>
             <%- renderIcon('moon', { class: 'icon-moon' }) %>
           </button>
@@ -174,6 +184,10 @@
     </div>
     <% } %>
 
+    <script>
+      window.DOCMD_ROOT = "<%= relativePathToRoot %>";
+    </script>
+
     <script src="<%= relativePathToRoot %>assets/js/docmd-main.js"></script>
 
     <% if (config.search !== false) { %>

package/src/templates/no-style.ejs

@@ -17,7 +17,7 @@
     <% } %>
 
     <% if (frontmatter.components?.themeMode !== false) { %>
-        <%- themeInitScript %>
+        <script>window.DOCMD_DEFAULT_MODE = "<%= defaultMode %>";</script>
     <% } %>
 
     <% if (frontmatter.components?.css !== false) { %>
@@ -27,6 +27,10 @@
         <% } %>
     <% } %>
 
+    <% if (frontmatter.components?.themeMode !== false) { %>
+        <%- themeInitScript %>
+    <% } %>
+
     <% if (frontmatter.components?.theme !== false) { %>
         <%- themeCssLinkHtml || '' %>
     <% } %>

package/src/templates/partials/theme-init.js

@@ -5,22 +5,26 @@
  */
 
 (function() {
-    try {
-      const storedTheme = localStorage.getItem('docmd-theme');
-      if (storedTheme) {
-        document.documentElement.setAttribute('data-theme', storedTheme);
-        
-        // Also update highlight CSS link to match the stored theme
-        const highlightThemeLink = document.getElementById('highlight-theme');
-        if (highlightThemeLink) {
-          const baseHref = highlightThemeLink.getAttribute('data-base-href');
-          if (baseHref) {
-            const newHref = baseHref + `docmd-highlight-${storedTheme}.css`;
-            highlightThemeLink.setAttribute('href', newHref);
-          }
-        }
+  try {
+    // Determine Theme
+    var localValue = localStorage.getItem('docmd-theme');
+    var configValue = window.DOCMD_DEFAULT_MODE || 'light'; 
+    var theme = localValue ? localValue : configValue;
+    
+    // Set HTML Attribute (for main CSS variables)
+    document.documentElement.setAttribute('data-theme', theme);
+
+    // Handle Highlight.js Theme (if present)
+    var highlightLink = document.getElementById('highlight-theme');
+    if (highlightLink) {
+      var baseHref = highlightLink.getAttribute('data-base-href');
+      // Check if the current href matches the desired theme
+      // If not, swap it immediately before the browser renders code blocks
+      if (baseHref && !highlightLink.href.includes('docmd-highlight-' + theme)) {
+        highlightLink.href = baseHref + 'docmd-highlight-' + theme + '.css';
       }
-    } catch (e) {
-      console.error('Error applying theme from localStorage', e);
     }
+  } catch (e) {
+    console.error('Theme init failed', e);
+  }
 })();

package/src/templates/toc.ejs

@@ -54,7 +54,7 @@ if (shouldShowToc && !frontmatter?.toc || frontmatter?.toc !== 'false') {
   if (tocHeadings.length > 1) { 
 %>
   <div class="toc-container">
-    <h2 class="toc-title">On This Page</h2>
+    <h2 class="toc-title">On This Page<span class="mobile-view toc-menu-button float-right"><%- renderIcon("chevrons-down-up") %></span></h2>
     <ul class="toc-list">
       <% tocHeadings.forEach(heading => { %>
         <li class="toc-item toc-level-<%= heading.level %>">