- {{ tag.name }}
+ class="bg-primary-500 dark:bg-primary-900 py-1 text-primary-200 dark:text-primary-400 items-center px-2 rounded-md flex flex-row gap-2 h-fit text-xs">
+ {{ tag }}
{% endfor %}
@@ -146,7 +146,7 @@
function updateOriginalPosition() {
toc.style.position = 'static';
toc.querySelector('h4').style.display = 'none';
- toc.querySelectorAll('h4')[1].style.display = 'block';
+ // toc.querySelectorAll('h4')[1].style.display = 'block';
toc.style.transform = 'none';
placeholder.style.display = 'none';
diff --git a/assets/js/scrollspy.js b/assets/js/scrollspy.js
index b5351cd..cff0d84 100644
--- a/assets/js/scrollspy.js
+++ b/assets/js/scrollspy.js
@@ -3,11 +3,11 @@
* Highlights the current section in the table of contents
*/
function initTocScrollSpy() {
- const headings = document.querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id]');
+ const headings = document.querySelector('.content').querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id]');
const tocLinks = document.querySelectorAll('.toc-link');
-
+
if (headings.length === 0 || tocLinks.length === 0) return;
-
+
const idToTocLink = {};
tocLinks.forEach(link => {
const href = link.getAttribute('href');
@@ -15,41 +15,41 @@ function initTocScrollSpy() {
idToTocLink[href.substring(1)] = link;
}
});
-
+
const headingPositions = Array.from(headings).map(heading => {
return {
id: heading.id,
top: heading.getBoundingClientRect().top + window.pageYOffset - 100
};
});
-
+
function updateToc() {
const scrollPosition = window.pageYOffset;
-
- let currentHeadingIndex = headingPositions.findIndex(heading =>
+
+ let currentHeadingIndex = headingPositions.findIndex(heading =>
heading.top > scrollPosition
) - 1;
-
+
if (currentHeadingIndex === -2) {
currentHeadingIndex = headingPositions.length - 1;
} else if (currentHeadingIndex < 0) {
currentHeadingIndex = 0;
}
-
+
tocLinks.forEach(link => link.classList.remove('font-bold', 'text-primary-800', 'dark:text-primary-300'));
-
+
const currentId = headingPositions[currentHeadingIndex]?.id;
if (currentId && idToTocLink[currentId]) {
idToTocLink[currentId].classList.add('font-bold', 'text-primary-800', 'dark:text-primary-300');
}
}
-
+
updateToc();
-
+
let ticking = false;
- window.addEventListener('scroll', function() {
+ window.addEventListener('scroll', function () {
if (!ticking) {
- window.requestAnimationFrame(function() {
+ window.requestAnimationFrame(function () {
updateToc();
ticking = false;
});