fix JS and CSS linting errors

Author: 2bndy5

docs/theme/pagetoc.css

@@ -1,16 +1,18 @@
-
 @media only screen {
     main {
         position: relative;
     }
+
     .sidetoc {
         margin-left: auto;
         margin-right: auto;
     }
+
     .pagetoc {
         width: auto;
         word-wrap: normal;
     }
+
     .pagetoc a {
         color: var(--sidebar-fg) !important;
         display: block;
@@ -19,32 +21,41 @@
         text-decoration: none;
         margin-block-start: 0.6em;
     }
+
     .pagetoc a:hover,
     .pagetoc a.active {
         color: var(--sidebar-active) !important;
     }
+
     .pagetoc .active {
         color: var(--sidebar-active);
     }
+
     .pagetoc .pagetoc-H2 {
         padding-left: 20px;
     }
+
     .pagetoc .pagetoc-H3 {
         padding-left: 40px;
     }
+
     .pagetoc .pagetoc-H4 {
         padding-left: 60px;
     }
+
     .pagetoc .pagetoc-H5 {
         display: none;
     }
+
     .pagetoc .pagetoc-H6 {
         display: none;
     }
+
     ol.chapter a {
         color: var(--sidebar-fg);
         text-decoration: none;
     }
+
     ol.chapter a.active {
         color: var(--sidebar-active);
         text-decoration: none;

docs/theme/pagetoc.js

@@ -2,10 +2,10 @@ let scrollTimeout;
 
 const listenActive = () => {
   const elems = document.querySelector(".pagetoc").children;
-  [...elems].forEach(el => {
-    el.addEventListener("click", (event) => {
+  [...elems].forEach((el) => {
+    el.addEventListener("click", () => {
       clearTimeout(scrollTimeout);
-      [...elems].forEach(el => el.classList.remove("active"));
+      [...elems].forEach((el) => el.classList.remove("active"));
       el.classList.add("active");
       // Prevent scroll updates for a short period
       scrollTimeout = setTimeout(() => {
@@ -15,16 +15,24 @@ const listenActive = () => {
   });
 };
 
-const getPagetoc = () => document.querySelector(".pagetoc") || autoCreatePagetoc();
+const getPagetoc = () => {
+  return document.querySelector(".pagetoc") || autoCreatePagetoc();
+};
 
 const autoCreatePagetoc = () => {
-  const chapter = document.querySelector("body nav#sidebar.sidebar li.chapter-item.expanded a.active");
+  const chapter = document.querySelector(
+    "body nav#sidebar.sidebar li.chapter-item.expanded a.active"
+  );
   const content = Object.assign(document.createElement("div"), {
-    className: "content-wrap"
+    className: "content-wrap",
   });
   content.appendChild(chapter.cloneNode(true));
-  const divAddedToc = Object.assign(document.createElement("div"), { className: "sidetoc" });
-  const navAddedToc = Object.assign(document.createElement("nav"), { className: "pagetoc" });
+  const divAddedToc = Object.assign(document.createElement("div"), {
+    className: "sidetoc",
+  });
+  const navAddedToc = Object.assign(document.createElement("nav"), {
+    className: "pagetoc",
+  });
   divAddedToc.appendChild(navAddedToc);
   content.appendChild(divAddedToc);
   chapter.replaceWith(content);
@@ -35,34 +43,34 @@ const updateFunction = () => {
   if (scrollTimeout) return; // Skip updates if within the cooldown period from a click
   const headers = [...document.getElementsByClassName("header")];
   const scrolledY = window.scrollY;
-  let lastHeader = null;
 
   // Find the last header that is above the current scroll position
-  for (let i = headers.length - 1; i >= 0; i--) {
-    if (scrolledY >= headers[i].offsetTop) {
-      lastHeader = headers[i];
-      break;
-    }
-  }
+  let headerOffsets = headers.filter((el) => {
+    return scrolledY >= el.offsetTop;
+  });
+  const lastHeader = headerOffsets.reverse().shift();
 
   const pagetocLinks = [...document.querySelector(".pagetoc").children];
-  pagetocLinks.forEach(link => link.classList.remove("active"));
+  pagetocLinks.forEach((link) => link.classList.remove("active"));
 
   if (lastHeader) {
-    const activeLink = pagetocLinks.find(link => lastHeader.href === link.href);
+    const activeLink = pagetocLinks.find(
+      (link) => lastHeader.href === link.href
+    );
     if (activeLink) activeLink.classList.add("active");
   }
 };
 
-window.addEventListener('load', () => {
+window.addEventListener("load", () => {
   const pagetoc = getPagetoc();
+  console.log(pagetoc);
   var headers = [...document.getElementsByClassName("header")];
   headers.shift();
-  headers.forEach(header => {
+  headers.forEach((header) => {
     const link = Object.assign(document.createElement("a"), {
       textContent: header.text,
       href: header.href,
-      className: `pagetoc-${header.parentElement.tagName}`
+      className: `pagetoc-${header.parentElement.tagName}`,
     });
     pagetoc.appendChild(link);
   });