@mgks/docmd 0.3.9 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgks/docmd",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Generate beautiful, lightweight static documentation sites directly from your Markdown files. Zero clutter, just content.",
   "main": "src/index.js",
   "exports": {

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

@@ -852,13 +852,6 @@ details[open]>.collapsible-summary .collapsible-arrow svg {
     margin-bottom: .5rem
 }
 
-.toc-title {
-    margin-top: 0;
-    font-size: 1rem;
-    font-weight: 700;
-    color: var(--text-muted)
-}
-
 .toc-list {
     list-style: none;
     padding-left: 0;
@@ -870,39 +863,67 @@ details[open]>.collapsible-summary .collapsible-arrow svg {
     line-height: 1.4
 }
 
+/* Base Link State */
 .toc-link {
-    text-decoration: none;
-    color: var(--link-color);
-    display: inline-block;
-    padding: .1rem 0;
-    font-size: .9rem;
-    font-weight: 500
+    display: block;
+    padding: 0.3rem 1rem;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    /* Pre-allocate border space to prevent jumping */
+    border-left: 2px solid transparent;
+    margin-left: -1px; /* Overlap the sidebar's border-left */
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.toc-level-3 {
-    margin-left: .75rem;
-    font-size: .85rem
+.toc-link:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-surface);
 }
 
-.toc-level-4 {
-    margin-left: 1.5rem;
-    font-size: .8rem
+/* Active State - Only changes color, no layout shift */
+.toc-link.active {
+    color: var(--primary);
+    border-left-color: var(--primary);
+    background-color: var(--primary-light);
 }
 
+/* Nesting Levels */
+.toc-level-3 { padding-left: 2rem; }
+.toc-level-4 { padding-left: 3rem; }
+
+/* Handle Dark Mode specifics for the trail */
+:root[data-theme="dark"] .toc-link.active {
+    background-color: rgba(59, 130, 246, 0.1);
+}
+
+/* TOC Sidebar Container */
 .toc-sidebar {
     position: -webkit-sticky;
     position: sticky;
-    top: 2rem;
+    top: 5rem;
     max-height: calc(100vh - 15rem);
     overflow-y: auto;
+    align-self: flex-start;
+    /* Create the vertical guide rail */
+    border-left: 1px solid var(--border-color);
+    padding-left: 0; 
+    margin-left: 1rem;
 }
 
-.toc-link.active {
-    font-weight: 700;
-    color: var(--link-color);
-    border-left: 2px solid var(--link-color);
-    padding-left: 8px;
-    margin-left: -10px;
+.toc-container {
+    padding: 0;
+}
+
+.toc-title {
+    padding-left: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 @media (max-width: 1024px) {

package/src/core/html-generator.js

@@ -24,7 +24,8 @@ let themeInitScript = '';
 // Basic whitespace cleanup (keep this simple version)
 function cleanupHtml(html) {
     if (!html) return '';
-    return html.replace(/^\s*[\r\n]/gm, '').trim();
+    // return html.replace(/^\s*[\r\n]/gm, '').trim(); // Remove leading/trailing blank lines from each line
+    return html.trim(); // Only trim the start/end of the whole document
 }
 
 function fixHtmlLinks(htmlContent, relativePathToRoot, isOfflineMode, configBase = '/') {

package/src/templates/navigation.ejs

@@ -1,5 +1,6 @@
 <%# Source file from the docmd project — https://github.com/docmd-io/docmd %>
 
+<%# src/templates/navigation.ejs %>
 <nav class="sidebar-nav" aria-label="Main navigation">
   <ul>
     <%
@@ -33,19 +34,28 @@
           let itemPath = item.path || '#';
           const isAbsoluteUrl = itemPath.startsWith('http://') || itemPath.startsWith('https://');
           const normalizedItemPath = (isExplicitExternal || isAbsoluteUrl) ? itemPath : normalizePath(itemPath);
+          
           const isActive = !isExplicitExternal && !isAbsoluteUrl && currentPagePath === normalizedItemPath;
           const isParentOfActive = !isActive && hasActiveChild(item, currentPagePath);
-          const isCollapsible = item.children && item.collapsible;
+          
+          // Logic: An item is only "collapsible" if children exist AND collapsible flag is true
+          const isCollapsible = item.children && item.collapsible === true;
+          
+          // Logic: It should be open if it's the active parent or it's simply not a collapsible menu
           const shouldBeOpen = isParentOfActive || (isActive && item.children && item.children.length > 0);
+
           const liClasses = [];
           if (isActive) liClasses.push('active');
           if (isParentOfActive) liClasses.push('active-parent');
           if (isCollapsible) liClasses.push('collapsible');
+          
           let liAttributes = `class="${liClasses.join(' ')}"`;
           if (isCollapsible) {
               liAttributes += ` data-nav-id="${item.path}"`;
               if (shouldBeOpen) liAttributes += ` aria-expanded="true"`;
+              else liAttributes += ` aria-expanded="false"`;
           }
+
           let finalHref = item.path;
           if (!isExplicitExternal && !isAbsoluteUrl) {
              if (!itemPath || itemPath === '#') {
@@ -77,7 +87,7 @@
         <% if (isExplicitExternal) { %> <%- renderIcon('external-link', { class: 'nav-external-icon' }) %> <% } %>
       </a>
       <% if (item.children) { %>
-        <ul class="submenu" style="<%= (isCollapsible && shouldBeOpen) ? 'display: block;' : 'display: none;' %>">
+        <ul class="submenu" style="display: <%= (!isCollapsible || shouldBeOpen) ? 'block' : 'none' %>;">
           <% renderNav(item.children); %>
         </ul>
       <% } %>

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

@@ -6,22 +6,28 @@
     var configValue = window.DOCMD_DEFAULT_MODE || 'light'; 
     var theme = localValue ? localValue : configValue;
     
-    // Set HTML Attribute
-    document.documentElement.setAttribute('data-theme', theme);
-
-    // Resolve 'system' to actual mode for Highlight.js
-    var effectiveTheme = theme;
+    // Resolve system preference immediately
     if (theme === 'system') {
-      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
 
+    // Apply to HTML and Body to ensure all CSS selectors catch it
+    document.documentElement.setAttribute('data-theme', theme);
+    
+    // We use a small interval to ensure body exists (since this script is in head)
+    var checkBody = setInterval(function() {
+      if (document.body) {
+        document.body.setAttribute('data-theme', theme);
+        clearInterval(checkBody);
+      }
+    }, 10);
+
     // Handle Highlight.js Theme
     var highlightLink = document.getElementById('highlight-theme');
     if (highlightLink) {
       var baseHref = highlightLink.getAttribute('data-base-href');
       if (baseHref) {
-        // Force load the resolved theme (light/dark)
-        highlightLink.href = baseHref + 'docmd-highlight-' + effectiveTheme + '.css';
+        highlightLink.href = baseHref + 'docmd-highlight-' + theme + '.css';
       }
     }
   } catch (e) {