forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1<script>
2 function bindFootnoteEvents() {
3 const footnoteLinks = document.querySelectorAll('[data-footnote-ref], [data-footnote-backref]')
4
5 footnoteLinks.forEach((link) => {
6 // Skip if already bound
7 if (link.dataset.footnoteBound) return
8 link.dataset.footnoteBound = 'true'
9
10 link.addEventListener('click', (e) => {
11 e.preventDefault()
12 const href = link.getAttribute('href')
13 if (!href) return
14
15 const target = document.querySelector(href)
16 if (!target) return
17
18 // Use fixed offset of 128px
19 const offset = 128
20
21 const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset
22
23 window.scrollTo({
24 top: targetPosition
25 })
26
27 // Highlight effect
28 const highlightTarget = target.closest('cite') || target.closest('sup') || target
29 highlightTarget.classList.add('footnote-highlight')
30 highlightTarget.addEventListener(
31 'animationend',
32 () => {
33 highlightTarget.classList.remove('footnote-highlight')
34 },
35 { once: true }
36 )
37 })
38 })
39 }
40
41 // Use only astro:page-load as it fires on initial load and navigation
42 document.addEventListener('astro:page-load', bindFootnoteEvents)
43</script>