fix: index root content + toc fixes

Author: abernier

src/app/[...slug]/layout.tsx

@@ -85,7 +85,7 @@ export default async function Layout({ params, children }: Props) {
               </>
             }
             nav={<Nav docs={docs} asPath={asPath} />}
-            aside={<Toc toc={doc.tableOfContents} />}
+            aside={<Toc toc={doc.tableOfContents.filter(({ level }) => level > 0)} />}
             footer={
               <>
                 {!!currentPage && (

src/components/Search/SearchItem.tsx

@@ -20,6 +20,7 @@ function sanitizeAllHtmlButMark(str: string) {
     allowedTags: ['mark'],
     allowedAttributes: false,
     disallowedTagsMode: 'escape',
+    parseStyleAttributes: false,
   })
 }
 

src/components/Search/SearchModalContainer.tsx

@@ -15,7 +15,7 @@ export const SearchModalContainer = ({ onClose }: SearchModalContainerProps) =>
   // const router = useRouter()
   // const boxes = useCSB()
   const { docs } = useDocs()
-  console.log('docs', docs)
+  // console.log('docs', docs)
   // const [lib] = router.query.slug as string[]
   const [query, setQuery] = React.useState('')
   const deferredQuery = React.useDeferredValue(query)

src/components/mdx/Toc/Toc.tsx

@@ -2,48 +2,67 @@
 
 import type { DocToC } from '@/app/[...slug]/DocsContext'
 import cn from '@/lib/cn'
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
 export function Toc({ toc }: { toc: DocToC[] }) {
   // console.log('toc', toc)
-  const [activeIndex, setActiveIndex] = React.useState(0)
 
-  React.useEffect(() => {
-    const headings = toc.map((heading) => document.getElementById(heading.id))
+  const [activeIndex, setActiveIndex] = useState<number | undefined>()
 
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.intersectionRatio > 0) {
-        const headingIndex = headings.indexOf(entry.target as HTMLElement)
-        setActiveIndex(headingIndex)
-      }
-    })
+  const updateActiveIndex = (hash: string) => {
+    const index = toc.findIndex((item) => item.id === hash.slice(1))
+    if (index !== -1) {
+      setActiveIndex(index)
+    }
+  }
+
+  useEffect(() => {
+    updateActiveIndex(window.location.hash)
+
+    const onHashChanged = (e: HashChangeEvent) => {
+      updateActiveIndex(new URL(e.newURL).hash)
+    }
 
-    for (const heading of headings) {
-      if (heading) observer.observe(heading)
+    window.addEventListener('hashchange', onHashChanged)
+    return () => {
+      window.removeEventListener('hashchange', onHashChanged)
     }
+  }, [])
 
-    return () => observer.disconnect()
-  }, [toc])
+  // React.useEffect(() => {
+  //   const headings = toc.map((heading) => document.getElementById(heading.id))
+
+  //   const observer = new IntersectionObserver(([entry]) => {
+  //     if (entry.intersectionRatio > 0) {
+  //       const headingIndex = headings.indexOf(entry.target as HTMLElement)
+  //       setActiveIndex(headingIndex)
+  //     }
+  //   })
+
+  //   for (const heading of headings) {
+  //     if (heading) observer.observe(heading)
+  //   }
+
+  //   return () => observer.disconnect()
+  // }, [toc])
 
   return (
     <div className="max-h-(screen-16) sticky top-16 flex flex-col justify-between overflow-y-auto pb-6">
-      <label className={cn('mb-2 mt-12 text-sm font-semibold uppercase tracking-wide lg:text-xs')}>
+      <label className="mb-2 mt-12 text-sm font-semibold uppercase tracking-wide text-on-surface-variant/50 lg:text-xs">
         On This Page
       </label>
-      {toc.map((item, index) => (
-        <h4 key={`${item.title}-${index}`}>
+      {toc.map(({ title, id, level }, index) => (
+        <h4 key={`${title}-${index}`}>
           <a
-            aria-label={item.title}
-            aria-current={index === activeIndex}
+            aria-label={title}
             className={cn(
               'block py-1 text-sm font-normal leading-6 text-on-surface-variant/50 hover:underline',
-
-              item.parent && 'ml-4',
               index === activeIndex && 'text-on-surface',
             )}
-            href={`#${item.id}`}
+            style={{ marginLeft: `${(level - 1) * 1}rem` }}
+            href={`#${id}`}
           >
-            {item.title}
+            {title}
           </a>
         </h4>
       ))}

src/components/mdx/Toc/rehypeToc.ts

@@ -36,7 +36,7 @@ export const rehypeToc = (target: DocToC[] = [], url: string, page: string) => {
       const node = root.children[i]
 
       if (isHeading(node)) {
-        const level = parseInt(node.tagName[1])
+        const level = parseInt(node.tagName[1]) - 1
 
         const title = toString(node)
         const id = slugify(title)

src/components/mdx/index.tsx

@@ -24,6 +24,7 @@ function Heading({ id, Tag, ...props }: { id?: string; Tag: Hn } & ComponentProp
     </a>
   )
 }
+export const h1 = (props: ComponentProps<'h1'>) => <h1 className="hidden" {...props} />
 export const h2 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>) => (
   <Heading id={id} Tag="h2" {...props} />
 )

src/utils/docs.tsx

@@ -146,7 +146,7 @@ async function _getDocs(
       const tableOfContents: DocToC[] = []
 
       const { content: jsx } = await compileMDX({
-        source: content,
+        source: `# ${title}\n ${content}`,
         options: {
           mdxOptions: {
             remarkPlugins: [remarkGFM],