adding stuff

static/js/page.js

@@ -1 +1,38 @@
-function getActiveTocElement(e){return[...e].find(e=>e.getBoundingClientRect().y<=0)}function findCorrespondingTocTitle(n){return[...document.querySelectorAll("#toc li a")].find(e=>e.href.substring(e.href.indexOf("#"))==="#"+n.id)}document.addEventListener("DOMContentLoaded",function(){if(null!==document.getElementById("toc")){var e=document.querySelectorAll("#toc li a");let n=[],t=([...e].forEach(e=>{n.push(e.href.substring(e.href.indexOf("#")))}),document.querySelectorAll(n.join(","))),i=[...t].reverse();var e=getActiveTocElement(i)||t[0],o=(findCorrespondingTocTitle(e).classList.add("bg-blue-700"),e);window.addEventListener("scroll",()=>{var e=getActiveTocElement(i)||t[0];e!==o&&(findCorrespondingTocTitle(o).classList.remove("bg-blue-700"),findCorrespondingTocTitle(e).classList.add("bg-blue-700"),o=e)})}});
+document.addEventListener("DOMContentLoaded", function() {
+  // ---------------- TOC Scrollspy --------------------
+  if (document.getElementById('toc') !== null) {
+
+    const table_of_content_links = document.querySelectorAll('#toc li a')
+
+    let page_titles_ids = [];
+    [...table_of_content_links].forEach((item)=> {
+      page_titles_ids.push(item.href.substring(item.href.indexOf("#")))
+    })
+    const page_titles_elements = document.querySelectorAll(page_titles_ids.join(','));
+
+    let reversed_title_elements = [...page_titles_elements].reverse();
+    let elem = getActiveTocElement(reversed_title_elements) || page_titles_elements[0]; //If no element has gone outside of viewport on y axis
+    findCorrespondingTocTitle(elem).classList.add('bg-blue-700') //page load
+    var previous_elem = elem
+
+    window.addEventListener('scroll', () => {
+      let element = getActiveTocElement(reversed_title_elements) || page_titles_elements[0];
+
+      if (element !== previous_elem) {
+        findCorrespondingTocTitle(previous_elem).classList.remove('bg-blue-700')
+        findCorrespondingTocTitle(element).classList.add('bg-blue-700')
+        previous_elem = element
+      }
+    })
+  }
+});
+function getActiveTocElement(elements) {
+  return [...elements].find((item) => {
+    return (item.getBoundingClientRect().y <= 0)
+  })
+}
+function findCorrespondingTocTitle(element) {
+  return [...document.querySelectorAll('#toc li a')].find((item) => {
+    return item.href.substring(item.href.indexOf("#")) === `#${element.id}`
+  })
+}