fix

aaronlifton · Mar 14, 2024 · afc91ea · afc91ea
1 parent d4d028f
commit afc91ea
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 61 deletions.
diff --git a/src/components/react/TOCIndicator.tsx b/src/components/react/TOCIndicator.tsx
@@ -61,7 +61,9 @@ const CircleIndicator: FC = () => {
 		if (height && toc) {
 			const ballHeight = 13.5;
 			const firstHeader = toc.querySelector("a");
-			const firstHeaderHeight = firstHeader?.getBoundingClientRect().height;
+			const firstHeaderHeight = firstHeader
+				? Number.parseInt(window.getComputedStyle(firstHeader).lineHeight)
+				: 27;
 
 			if (firstHeaderHeight !== undefined) {
 				const textOffset = firstHeaderHeight - ballHeight + 2.5;

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -22,14 +22,14 @@ import "$/styles/shaku.css";
 
 type Props = CollectionEntry<"blog">["data"] & { headings: MarkdownHeading[] };
 const {
-  title,
-  description,
-  pubDate,
-  updatedDate,
-  cover,
-  coverAlt,
-  tags,
-  headings,
+	title,
+	description,
+	pubDate,
+	updatedDate,
+	cover,
+	coverAlt,
+	tags,
+	headings,
 } = Astro.props;
 
 const slug = getSlugFromPathname(Astro.url.pathname);
@@ -177,59 +177,59 @@ const tocEmpty = headings.length === 0;
     const blogPostContainer = document.querySelector(
       "[data-blog-post-container]",
     ) as HTMLElement;
-    const toggleTocButton = document.querySelector(
-      "[data-toggle-toc]",
-    ) as HTMLElement;
-    const tocContainer = document.querySelector(
-      "[data-blog-post-toc-container]",
-    );
-
-    const storedTocState = localStorage.getItem("__preferred_toc_state");
-    if (storedTocState !== null) {
-      if (storedTocState === "open") {
-        openToc();
-      } else {
-        closeToc();
-      }
-    }
-
-    function openToc() {
-      blogPostContainer?.setAttribute("data-toc", "open");
-      toggleTocButton.setAttribute("data-state", "open");
-      saveState("open");
-      toggleTocButton.setAttribute(
-        "aria-label",
-        toggleTocButton.dataset.offLabel ?? "",
-      );
-    }
+    // const toggleTocButton = document.querySelector(
+    //   "[data-toggle-toc]",
+    // ) as HTMLElement;
+    // const tocContainer = document.querySelector(
+    //   "[data-blog-post-toc-container]",
+    // );
+    //
+    // const storedTocState = localStorage.getItem("__preferred_toc_state");
+    // if (storedTocState !== null) {
+    //   if (storedTocState === "open") {
+    //     openToc();
+    //   } else {
+    //     closeToc();
+    //   }
+    // }
 
-    function closeToc() {
-      blogPostContainer?.setAttribute("data-toc", "closed");
-      saveState("closed");
-      toggleTocButton.setAttribute(
-        "aria-label",
-        toggleTocButton.dataset.openTocLabel ?? "",
-      );
-    }
-
-    toggleTocButton?.addEventListener("click", () => {
-      const tocIsOpen = blogPostContainer.dataset.toc === "open";
-      if (tocIsOpen) {
-        closeToc();
-        tocContainer?.addEventListener(
-          "transitionend",
-          () => {
-            tocContainer.classList.add("invisible");
-          },
-          {
-            once: true,
-          },
-        );
-      } else {
-        openToc();
-        tocContainer?.classList.remove("invisible");
-      }
-    });
+    // function openToc() {
+    //   blogPostContainer?.setAttribute("data-toc", "open");
+    //   toggleTocButton.setAttribute("data-state", "open");
+    //   saveState("open");
+    //   toggleTocButton.setAttribute(
+    //     "aria-label",
+    //     toggleTocButton.dataset.offLabel ?? "",
+    //   );
+    // }
+    //
+    // function closeToc() {
+    //   blogPostContainer?.setAttribute("data-toc", "closed");
+    //   saveState("closed");
+    //   toggleTocButton.setAttribute(
+    //     "aria-label",
+    //     toggleTocButton.dataset.openTocLabel ?? "",
+    //   );
+    // }
+    //
+    // toggleTocButton?.addEventListener("click", () => {
+    //   const tocIsOpen = blogPostContainer.dataset.toc === "open";
+    //   if (tocIsOpen) {
+    //     closeToc();
+    //     tocContainer?.addEventListener(
+    //       "transitionend",
+    //       () => {
+    //         tocContainer.classList.add("invisible");
+    //       },
+    //       {
+    //         once: true,
+    //       },
+    //     );
+    //   } else {
+    //     openToc();
+    //     tocContainer?.classList.remove("invisible");
+    //   }
+    // });
 
     type TocState = "open" | "closed";