fixes bug & adds heading focusing

Author: palemoons

src/app/[category]/[slug]/page.tsx

@@ -22,9 +22,7 @@ export default function Page({ params }: { params: { category: string; slug: str
   );
   return (
     <div className={styles.pageWrapper}>
-      <div className={styles.tocWrapper}>
-        <TOC tocContent={tocContent} style={{ visibility: "hidden" }} className={styles.toc} />
-      </div>
+      <div className={styles.tocWrapper} />
       <div className={`${styles.postWrapper} container`}>
         <div className={styles.postHeader}>
           <div className={styles.postTitle} id="toc-title">

src/app/about/page.tsx

@@ -27,13 +27,13 @@ export default function AboutPage() {
   );
   return (
     <div className={styles.pageWrapper}>
-      <div className={styles.tocWrapper}>
-        <TOC tocContent={tocContent} style={{ visibility: "hidden" }} className={styles.toc} />
-      </div>
+      <div className={styles.tocWrapper} />
       <div className={`${styles.postWrapper} container`}>
         <div className={styles.header}>
           <div className={styles.titleContainer}>
-            <div className={styles.title} id="toc-title">{frontMatter.title}</div>
+            <div className={styles.title} id="toc-title">
+              {frontMatter.title}
+            </div>
             <div className={styles.description}>{frontMatter.description}</div>
             <div className={styles.postTime}>
               <span>

src/components/TOC.module.css

@@ -38,6 +38,10 @@
   display: none;
 }
 
+.active {
+  font-weight: 600;
+}
+
 .tocWrapper > * {
   display: block;
 }
@@ -74,10 +78,6 @@
   margin: 0 8px;
 }
 
-.toc_wrapper ul {
-  padding-left: 16px;
-}
-
 .toc_h1,
 .toc_h2,
 .toc_h3,
@@ -102,10 +102,6 @@
   text-decoration: underline;
 }
 
-.active {
-  font-weight: 600;
-}
-
 .toc_h2 {
   margin-left: 12px;
 }

src/components/TOC.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import Link from "next/link";
 import { Itoc } from "@/interfaces/Post";
 import styles from "./TOC.module.css";
@@ -9,6 +9,7 @@ const TOC = ({ tocContent, ...props }: { tocContent: Array<Itoc> } & React.HTMLA
   const stylesList = [styles.toc_h1, styles.toc_h2, styles.toc_h3, styles.toc_h4, styles.toc_h5];
   const { className, ...rest } = props;
   const [activeId, setActiveId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -19,8 +20,8 @@ const TOC = ({ tocContent, ...props }: { tocContent: Array<Itoc> } & React.HTMLA
       },
       {
         root: null,
-        rootMargin: "0px 0px -80% 0px",
-        threshold: 1.0,
+        rootMargin: "0px 0px -50% 0px",
+        threshold: 0,
       },
     );
     const headingElements = tocContent.map((toc) => document.getElementById(handleSlug(toc.slug)));
@@ -34,8 +35,26 @@ const TOC = ({ tocContent, ...props }: { tocContent: Array<Itoc> } & React.HTMLA
     };
   }, [tocContent]);
 
+  useEffect(() => {
+    if (containerRef.current && activeId) {
+      const element = document.getElementsByClassName(styles.active)[0] as HTMLElement;
+      if (element) {
+        const container = containerRef.current;
+        const containerHeight = container.clientHeight;
+        const elementOffsetTop = element.offsetTop;
+        const elementHeight = element.clientHeight;
+
+        const scrollTop = elementOffsetTop - (containerHeight / 2) + (elementHeight / 2);
+        container.scrollTo({
+          top: scrollTop,
+          behavior: "smooth",
+        });
+      }
+    }
+  }, [activeId]);
+
   return (
-    <div className={`${styles.tocWrapper} ${className || ""}`} {...rest}>
+    <div className={`${styles.tocWrapper} ${className || ""}`} ref={containerRef} {...rest}>
       <div className={styles.title}>目录</div>
       {tocContent.map((value, index) => {
         const slug = handleSlug(value.slug);