From 1c37a825fc46adb8cf7256020809cec8022dd652 Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Fri, 7 Mar 2025 15:19:26 +1100
Subject: [PATCH] Refactor header rendering and add clickable headers with
 highlight effect

---
 index.js   | 48 +++++++++++++++++++++++++++++++++---------------
 styles.css | 18 ++++++++++++++++--
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/index.js b/index.js
index 83eb5ed..3d6bc60 100644
--- a/index.js
+++ b/index.js
@@ -197,10 +197,9 @@ class DOMService {
     }
 
     createFolderHeaderWithFile(iconClass, doc) {
-        const iconStyle = doc.color ? `color: ${doc.color};` : '';
         return `
             <div class="folder-icons">
-                <i class="${iconClass} folder-icon" style="${iconStyle}"></i>
+                <i class="${iconClass} folder-icon"></i>
             </div>
             <span>${doc.title}</span>
             <a href="?${doc.slug}" class="folder-link" title="View folder page">
@@ -209,10 +208,9 @@ class DOMService {
     }
 
     createFolderHeaderBasic(iconClass, doc) {
-        const iconStyle = doc.color ? `color: ${doc.color};` : '';
         return `
             <div class="folder-icons">
-                <i class="${iconClass} folder-icon" style="${iconStyle}"></i>
+                <i class="${iconClass} folder-icon"></i>
             </div>
             <span>${doc.title}</span>`;
     }
@@ -346,6 +344,20 @@ class DocumentService {
             }
             return link.replace(/^<a /, `<a${attrs} `);
         };
+        
+        // Add custom heading renderer to make headers clickable - without link icon
+        const originalHeading = renderer.heading.bind(renderer);
+        renderer.heading = (text, level) => {
+            const escapedText = text.toLowerCase()
+                .replace(/[^\w\s-]/g, '')
+                .replace(/\s+/g, '-');
+                
+            const id = escapedText;
+            
+            return `<h${level} id="${id}" class="clickable-header">
+                ${text}
+            </h${level}>`;
+        };
     }
 
     renderCode(code, language) {
@@ -540,17 +552,6 @@ class Documentation {
             const data = await response.json();
             this.indexData = data;
             window._indexData = data;
-
-            // Load custom CSS files if specified
-            if (data.customCSS) {
-                const cssFiles = Array.isArray(data.customCSS) ? data.customCSS : [data.customCSS];
-                cssFiles.forEach(cssFile => {
-                    const link = document.createElement('link');
-                    link.rel = 'stylesheet';
-                    link.href = cssFile;
-                    document.head.appendChild(link);
-                });
-            }
             
             this.populateAuthorInfo(data.author);
             window.originalDocTitle = data.metadata.site_name || 'Documentation';
@@ -636,6 +637,23 @@ class Documentation {
             const headings = document.querySelectorAll('h2, h3, h4, h5, h6');
             const headingLinks = this.domService.createOutline(headings);
             
+            // Add click handlers to all headers
+            headings.forEach(heading => {
+                heading.addEventListener('click', (e) => {
+                    // Don't trigger if clicking on fold toggle
+                    if (e.target.closest('svg') || e.target.closest('.header-anchor')) return;
+                    
+                    const id = heading.id;
+                    if (id) {
+                        history.pushState(null, '', `${window.location.pathname}${window.location.search}#${id}`);
+                        this.domService.scrollToElement(heading);
+                        heading.classList.remove('highlight');
+                        void heading.offsetWidth;
+                        heading.classList.add('highlight');
+                    }
+                });
+            });
+            
             this.setupScrollObserver(headings, headingLinks);
             
             window._currentPath = path;
diff --git a/styles.css b/styles.css
index 092ca0e..ebdd362 100644
--- a/styles.css
+++ b/styles.css
@@ -261,10 +261,9 @@ body {
     color: var(--ifm-color-content-secondary);
     font-size: 1.2rem;
     transition: color 0.2s;
-    padding: 0.5rem;
 }
 
-.social-links a:hover {
+social-links a:hover {
     color: var(--ifm-color-primary);
 }
 
@@ -568,3 +567,18 @@ body {
 .github-link a:hover {
     color: var(--ifm-color-primary);
 }
+
+.clickable-header {
+    cursor: pointer;
+    position: relative;
+}
+.clickable-header:hover {
+    color: #3498db;
+}
+.clickable-header.highlight {
+    animation: highlight-fade 1.5s;
+}
+@keyframes highlight-fade {
+    0% { background-color: rgba(52, 152, 219, 0.2); }
+    100% { background-color: transparent; }
+}
\ No newline at end of file