The source code for my personal website
fix: only highlight toc on larger screens
+23
-21
+23
-21
src/pages/blog/[slug].astro
+23
-21
src/pages/blog/[slug].astro
···
89
89
});
90
90
});
91
91
92
-
const tocMap = new Map<string, HTMLAnchorElement>();
92
+
if (!mobile) {
93
+
const tocMap = new Map<string, HTMLAnchorElement>();
93
94
94
-
tocLinks?.forEach((link) => {
95
-
const href = link.getAttribute("href")?.slice(1);
96
-
if (href) tocMap.set(href, link);
97
-
});
95
+
tocLinks?.forEach((link) => {
96
+
const href = link.getAttribute("href")?.slice(1);
97
+
if (href) tocMap.set(href, link);
98
+
});
98
99
99
-
const observer = new IntersectionObserver(
100
-
(entries) => {
101
-
entries.forEach((entry) => {
102
-
if (!entry.isIntersecting) return;
103
-
tocLinks?.forEach((link) => link.classList.remove("active"));
104
-
tocMap.get(entry.target.id)?.classList.add("active");
105
-
});
106
-
},
107
-
{
108
-
rootMargin: "-80px 0px -70% 0px",
109
-
threshold: 0,
110
-
},
111
-
);
100
+
const observer = new IntersectionObserver(
101
+
(entries) => {
102
+
entries.forEach((entry) => {
103
+
if (!entry.isIntersecting) return;
104
+
tocLinks?.forEach((link) => link.classList.remove("active"));
105
+
tocMap.get(entry.target.id)?.classList.add("active");
106
+
});
107
+
},
108
+
{
109
+
rootMargin: "-80px 0px -70% 0px",
110
+
threshold: 0,
111
+
},
112
+
);
112
113
113
-
document
114
-
.querySelectorAll(".article h2, .article h3")
115
-
.forEach((h) => observer.observe(h));
114
+
document
115
+
.querySelectorAll(".article h2, .article h3")
116
+
.forEach((h) => observer.observe(h));
117
+
}
116
118
</script>
117
119
118
120
<style>