feat: improve table of content (#1553)

Author: iyu88

src/components/page-container.tsx

@@ -92,7 +92,7 @@ function PageContainer(props: PageContainerProps) {
                       </Badge>
                     )}
                     {children}
-                    <Box mt='40px'>
+                    <Box mt='40vh'>
                       <Box>{editUrl && <EditPageLink href={editUrl} />}</Box>
                       {pagination || null}
                     </Box>

src/components/table-of-content.tsx

@@ -21,7 +21,7 @@ function TableOfContent(props: TableOfContentProps) {
   const activeId = useScrollSpy(
     headings.map(({ id }) => `[id="${id}"]`),
     {
-      rootMargin: '0% 0% -24% 0%',
+      rootMargin: '-10% 0% -24% 0%',
     },
   )
   const linkColor = useColorModeValue('gray.600', 'gray.400')

src/hooks/use-scrollspy.ts

@@ -6,22 +6,34 @@ export function useScrollSpy(
 ) {
   const [activeId, setActiveId] = React.useState<string>()
   const observer = React.useRef<IntersectionObserver | null>(null)
-  React.useEffect(() => {
-    const elements = selectors.map((selector) =>
-      document.querySelector(selector),
-    )
-    observer.current?.disconnect()
+  const headerRef = React.useRef<{[key:string] : IntersectionObserverEntry}>({});
+
+  React.useEffect(() => {  
+    const elements = selectors.map((selector) => document.querySelector(`h2${selector}, h3${selector}`))
+
+    observer.current?.disconnect();
+
     observer.current = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry?.isIntersecting) {
-          setActiveId(entry.target.getAttribute('id'))
-        }
-      })
-    }, options)
+      for (const entry of entries) {
+        headerRef.current[entry.target.id] = entry;
+      }
+
+      const topElement = Object.values(headerRef.current).find((entry) => entry.isIntersecting);
+
+      if (topElement) {
+        setActiveId(topElement.target.id);
+      }
+
+    }, options);
+
     elements.forEach((el) => {
       if (el) observer.current?.observe(el)
-    })
-    return () => observer.current?.disconnect()
+    });
+
+    return () => { 
+      observer.current?.disconnect()
+      headerRef.current = {};
+    }
   }, [selectors, options])
 
   return activeId

src/utils/contentlayer-utils.ts

@@ -81,21 +81,21 @@ export function getComponentTabsData(slug: MixedArray) {
 
   const data = [
     {
-      id: 'usage',
+      id: 'usage-wrapper',
       match: _slug.endsWith('/usage') || params.length === 2,
       href: { query: { slug: usageSlug.slice(1) } },
       label: 'Usage',
       doc: getDocDoc(getSlug('usage')),
     },
     {
-      id: 'props',
+      id: 'props-wrapper',
       match: _slug.endsWith('/props'),
       href: { query: { slug: propsSlug.slice(1) } },
       label: 'Props',
       doc: getDocDoc(getSlug('props')),
     },
     {
-      id: 'theming',
+      id: 'theming-wrapper',
       match: _slug.endsWith('/theming'),
       label: 'Theming',
       href: { query: { slug: themingSlug.slice(1) } },