The source code for my personal website
refactor: highlight current section in toc
+24
-1
+24
-1
src/pages/blog/[slug].astro
+24
-1
src/pages/blog/[slug].astro
···
78
78
}
79
79
});
80
80
});
81
+
82
+
const headings = document.querySelectorAll('.article h2, .article h3');
83
+
const tocMap = new Map<string, HTMLAnchorElement>();
84
+
85
+
tocLinks?.forEach(link => {
86
+
const href = link.getAttribute('href');
87
+
if (href) tocMap.set(href.slice(1), link);
88
+
});
89
+
90
+
const observer = new IntersectionObserver(
91
+
(entries) => {
92
+
for (const entry of entries) {
93
+
if (entry.isIntersecting) {
94
+
tocLinks?.forEach(link => link.classList.remove('active'));
95
+
tocMap.get(entry.target.id)?.classList.add('active');
96
+
}
97
+
}
98
+
},
99
+
{ rootMargin: '-80px 0px -70% 0px', threshold: 0 }
100
+
);
101
+
102
+
headings.forEach(heading => observer.observe(heading));
81
103
</script>
82
104
83
105
<style>
···
206
228
text-overflow: ellipsis;
207
229
}
208
230
209
-
& a:hover {
231
+
& a:hover,
232
+
& a.active {
210
233
color: var(--accent-blue);
211
234
}
212
235