Add scrollspy and responsive TOC; theme-init tweaks

Enable smooth scrolling and top padding; make the TOC sidebar sticky with a max-height and add .toc-link.active styling. Add a responsive media query to collapse the TOC into the content flow on smaller screens. Implement a ScrollSpy using IntersectionObserver in docmd-main.js to set active TOC links based on visible headings and wire it into DOMContentLoaded. Update theme-init.js to resolve the 'system' mode to an effective light/dark value and ensure the Highlight.js stylesheet is loaded for the resolved theme; also simplify HTML attribute handling. Removed an overflow:hidden on the main content wrapper to avoid clipping.

Author: mgks

src/assets/css/docmd-main.css

@@ -51,6 +51,11 @@
     --lightbox-text: #fff
 }
 
+html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 80px;
+}
+
 body {
     font-family: var(--font-family-sans);
     background-color: var(--bg-color);
@@ -212,7 +217,6 @@ body.sidebar-collapsed .main-content-wrapper {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-    overflow: hidden
 }
 
 .header-left,
@@ -886,11 +890,36 @@ details[open]>.collapsible-summary .collapsible-arrow svg {
 }
 
 .toc-sidebar {
-    width: 180px;
+    position: -webkit-sticky;
     position: sticky;
     top: 2rem;
+    max-height: calc(100vh - 15rem);
     overflow-y: auto;
-    align-self: flex-start
+}
+
+.toc-link.active {
+    font-weight: 700;
+    color: var(--link-color);
+    border-left: 2px solid var(--link-color);
+    padding-left: 8px;
+    margin-left: -10px;
+}
+
+@media (max-width: 1024px) {
+    .content-layout {
+        flex-direction: column-reverse;
+    }
+
+    .toc-sidebar {
+        position: static; 
+        width: 100%;
+        max-height: none;
+        margin-bottom: 2rem;
+        border-left: none;
+        border-bottom: 1px solid var(--border-color);
+        padding-left: 0;
+        padding-bottom: 1rem;
+    }
 }
 
 .docmd-tabs,

src/assets/js/docmd-main.js

@@ -209,6 +209,43 @@ function syncBodyTheme() {
   }
 }
 
+// --- 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();
@@ -219,4 +256,5 @@ document.addEventListener('DOMContentLoaded', () => {
   initializeCollapsibleNav();
   initializeMobileMenus();
   initializeSidebarScroll();
+  initializeScrollSpy();
 });

src/templates/partials/theme-init.js

@@ -1,27 +1,27 @@
-// Source file from the docmd project — https://github.com/docmd-io/docmd
-
-/*
- * Initialize the theme from localStorage
- */
+/* Source file from the docmd project — https://github.com/docmd-io/docmd */
 
 (function() {
   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)
+    // Set HTML Attribute
     document.documentElement.setAttribute('data-theme', theme);
 
-    // Handle Highlight.js Theme (if present)
+    // Resolve 'system' to actual mode for Highlight.js
+    var effectiveTheme = theme;
+    if (theme === 'system') {
+      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Handle Highlight.js Theme
     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';
+      if (baseHref) {
+        // Force load the resolved theme (light/dark)
+        highlightLink.href = baseHref + 'docmd-highlight-' + effectiveTheme + '.css';
       }
     }
   } catch (e) {