From c8a649d2229f9d3420b96ff05b0e50bcd54b0e07 Mon Sep 17 00:00:00 2001
From: Stephen Tse <Stephen-X@users.noreply.github.com>
Date: Sat, 12 Oct 2024 13:20:11 -0700
Subject: [PATCH] Fixed second ToC element not collapsible or highlight-able

---
 quartz/components/scripts/toc.inline.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
index 2cfb3f9218703..bcf7b8ab45d8d 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@@ -2,13 +2,13 @@ const bufferPx = 150
 const observer = new IntersectionObserver((entries) => {
   for (const entry of entries) {
     const slug = entry.target.id
-    const tocEntryElement = document.querySelector(`a[data-for="${slug}"]`)
+    const tocEntryElements = document.querySelectorAll(`a[data-for="${slug}"]`)
     const windowHeight = entry.rootBounds?.height
-    if (windowHeight && tocEntryElement) {
+    if (windowHeight && tocEntryElements.length > 0) {
       if (entry.boundingClientRect.y < windowHeight) {
-        tocEntryElement.classList.add("in-view")
+        tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.add("in-view"))
       } else {
-        tocEntryElement.classList.remove("in-view")
+        tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.remove("in-view"))
       }
     }
   }
@@ -26,14 +26,14 @@ function toggleToc(this: HTMLElement) {
 }
 
 function setupToc() {
-  const toc = document.getElementById("toc")
-  if (toc) {
+  const tocs = document.querySelectorAll("[id=toc]")
+  tocs.forEach((toc) => {
     const collapsed = toc.classList.contains("collapsed")
     const content = toc.nextElementSibling as HTMLElement | undefined
     if (!content) return
     toc.addEventListener("click", toggleToc)
     window.addCleanup(() => toc.removeEventListener("click", toggleToc))
-  }
+  })
 }
 
 window.addEventListener("resize", setupToc)