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 `
-
+
${doc.title}
@@ -209,10 +208,9 @@ class DOMService {
}
createFolderHeaderBasic(iconClass, doc) {
- const iconStyle = doc.color ? `color: ${doc.color};` : '';
return `
-
+
${doc.title}`;
}
@@ -346,6 +344,20 @@ class DocumentService {
}
return link.replace(/^ {
+ const escapedText = text.toLowerCase()
+ .replace(/[^\w\s-]/g, '')
+ .replace(/\s+/g, '-');
+
+ const id = escapedText;
+
+ return ``;
+ };
}
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