diff --git a/_includes/toc-card.html b/_includes/toc-card.html index 2c290ea..815f3bc 100644 --- a/_includes/toc-card.html +++ b/_includes/toc-card.html @@ -72,8 +72,8 @@ {% for tag in page.tags %}
- {{ 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; });