From b34d6b8b971f652cedb8ee40a7ac136fb8facfae Mon Sep 17 00:00:00 2001
From: Dan Kimberley <danielkimberley@gmail.com>
Date: Tue, 30 Jul 2024 13:20:37 +0100
Subject: [PATCH] moved toc into separate component

---
 components/Overlay.tsx          | 61 +---------------------------
 components/TableOfContents.tsx  | 70 +++++++++++++++++++++++++++++++++
 lib/hooks/useHeadingObserver.ts |  6 +--
 3 files changed, 75 insertions(+), 62 deletions(-)
 create mode 100644 components/TableOfContents.tsx

diff --git a/components/Overlay.tsx b/components/Overlay.tsx
index fb46ef6..f823144 100644
--- a/components/Overlay.tsx
+++ b/components/Overlay.tsx
@@ -16,6 +16,7 @@ import useWindowSize from "lib/hooks/useWindowSize"
 import DeleteUserOnEventModal, { deleteUserOnEventModalState } from "./dialogs/deleteUserOnEventModal"
 import ReactMarkdown from "react-markdown"
 import { useHeadingObserver } from "lib/hooks/useHeadingObserver"
+import TableOfContents from "./TableOfContents"
 
 interface Props {
   material: Material
@@ -90,43 +91,6 @@ const Overlay: NextPage<Props> = ({
     setSidebarOpen(!sidebarOpen)
   }
 
-  const { activeId } = useHeadingObserver()
-
-  const HeadingRenderer = ({ level, children }: { level: number; children: React.ReactNode }) => {
-    const Tag = `h${level}`
-    const [href, setHref] = useState("")
-
-    useEffect(() => {
-      const headingContent = String(children)?.replaceAll(" ", "-")
-      if (typeof window !== "undefined") {
-        setHref((window.location.href.split("#")[0] + "#" + headingContent).replaceAll(" ", "-"))
-      }
-    }, [children])
-
-    let headingContent = String(children)?.replaceAll(" ", "-")
-    return (
-      <li
-        key={headingContent}
-        className={
-          activeId === headingContent
-            ? "border-l-2 border-purple-600 bg-slate-600 pl-2 py-1 text-sm list-none bg-transparent rounded-r-lg"
-            : "border-l-2 pl-2 py-1 text-sm list-none bg-transparent"
-        }
-      >
-        <a
-          className={
-            activeId === headingContent
-              ? "font-bold text-slate-200 hover:text-slate-50"
-              : "font-normal text-slate-200  hover:text-slate-50"
-          }
-          href={href}
-        >
-          {children}
-        </a>
-      </li>
-    )
-  }
-
   const attribution = section ? section.attribution : course ? course.attribution : []
 
   return (
@@ -158,28 +122,7 @@ const Overlay: NextPage<Props> = ({
                   .filter((link) => link.direction === "next")
                   .map((link) => <LinkedSection key={link.url} {...link} />)}
             </Stack>
-            {section && (
-              <nav className="absolute top-32 right-0 w-48  p-2 ml-4 overflow-scroll font-bold pointer-events-auto bg-transparent">
-                <ReactMarkdown
-                  components={{
-                    h1: () => null,
-                    h2: HeadingRenderer,
-                    h3: () => null,
-                    h4: () => null,
-                    h5: () => null,
-                    h6: () => null,
-                    p: () => null,
-                    ul: () => null,
-                    ol: () => null,
-                    table: () => null,
-                    blockquote: () => null,
-                    code: () => null,
-                  }}
-                >
-                  {section?.markdown || ""}
-                </ReactMarkdown>
-              </nav>
-            )}
+            {section && <TableOfContents markdown={section.markdown} />}
           </>
         )}
         <AttributionDialog citations={attribution} isOpen={showAttribution} onClose={closeAttribution} />
diff --git a/components/TableOfContents.tsx b/components/TableOfContents.tsx
new file mode 100644
index 0000000..8f0d1a6
--- /dev/null
+++ b/components/TableOfContents.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react"
+import ReactMarkdown from "react-markdown"
+import { useHeadingObserver } from "lib/hooks/useHeadingObserver"
+import { Section } from "lib/material"
+
+const TableOfContents = (markdown: any) => {
+  console.log(markdown.markdown)
+
+  const { activeId } = useHeadingObserver()
+
+  const HeadingRenderer = ({ level, children }: { level: number; children: React.ReactNode }) => {
+    const Tag = `h${level}`
+    const [href, setHref] = useState("")
+
+    useEffect(() => {
+      const headingContent = String(children)?.replaceAll(" ", "-")
+      if (typeof window !== "undefined") {
+        setHref((window.location.href.split("#")[0] + "#" + headingContent).replaceAll(" ", "-"))
+      }
+    }, [children])
+
+    let headingContent = String(children)?.replaceAll(" ", "-")
+    return (
+      <li
+        key={headingContent}
+        className={
+          activeId === headingContent
+            ? "transition-all border-l-2 border-purple-600 dark:bg-gray-800 bg-slate-300 pl-2 py-1 text-sm list-none bg-transparent rounded-r-lg"
+            : "transition-all border-l-2 pl-2 py-1 text-sm list-none bg-transparent"
+        }
+      >
+        <a
+          className={
+            activeId === headingContent
+              ? "font-bold dark:text-slate-200 hover:text-slate-50"
+              : "font-normal dark:text-slate-200  dark:hover:text-slate-50"
+          }
+          href={href}
+        >
+          {children}
+        </a>
+      </li>
+    )
+  }
+
+  return (
+    <nav className="absolute top-32 right-0 w-48  p-2 ml-4 max-h-96 overflow-scroll font-bold pointer-events-auto bg-transparent">
+      <ReactMarkdown
+        components={{
+          h1: () => null,
+          h2: HeadingRenderer,
+          h3: () => null,
+          h4: () => null,
+          h5: () => null,
+          h6: () => null,
+          p: () => null,
+          ul: () => null,
+          ol: () => null,
+          table: () => null,
+          blockquote: () => null,
+          code: () => null,
+        }}
+      >
+        {markdown.markdown || ""}
+      </ReactMarkdown>
+    </nav>
+  )
+}
+
+export default TableOfContents
diff --git a/lib/hooks/useHeadingObserver.ts b/lib/hooks/useHeadingObserver.ts
index 6c164ec..67297f6 100644
--- a/lib/hooks/useHeadingObserver.ts
+++ b/lib/hooks/useHeadingObserver.ts
@@ -17,9 +17,9 @@ export function useHeadingObserver() {
 
     const initializeObserver = () => {
       observer.current = new IntersectionObserver(handleObserver, {
-        root: null, // Use viewport as the root
-        rootMargin: "-110px 0px -40% 0px",
-        threshold: 1, // Adjusted thresholds
+        root: null,
+        rootMargin: "-0px 0px -40% 0px",
+        threshold: 1,
       })
 
       headings.forEach((heading) => {