feat: add table of content (#115)

Author: Valerioageno

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@mdx-js/react": "3.1.0",
+    "@radix-ui/react-scroll-area": "1.2.9",
     "clsx": "2.1.1",
     "modern-normalize": "3.0.1",
     "posthog-js": "1.248.0",

pnpm-lock.yaml

@@ -81,8 +81,13 @@ export function Heading({
   order,
   ...props
 }: TitleProps & { order: Order }): JSX.Element {
-  props.id = getIdFrom(props.children)
+  const headingId = getIdFrom(props.children)
+  props.id = headingId
   props.className = cx(`title-${Math.min(order, 4)}`, styles.title)
+  // @ts-expect-error -- custom data attribute
+  props['data-heading'] = order > 0 ? headingId : undefined
+  // @ts-expect-error -- custom data attribute
+  props['data-order'] = order > 0 ? order : undefined
 
   switch (order) {
     case 1:

src/components/Mdx/Title/Title.tsx

@@ -45,10 +45,6 @@
 .tableOfContents {
   @include sidecontent;
 
-  & {
-    background-color: lightgray;
-  }
-
   @include up-to-xl {
     display: none;
   }

src/components/ResponsiveLayout/ResponsiveLayout.module.scss

@@ -4,6 +4,9 @@ import { SideNavigation } from '@/components/SideNavigation'
 
 import { Breadcrumbs } from '../Breadcrumbs'
 
+import { TableOfContents } from '../TableOfContents'
+import { ScrollArea } from '../ScrollArea'
+
 import styles from './ResponsiveLayout.module.scss'
 
 interface ResponsiveLayoutProps {
@@ -28,11 +31,15 @@ export function ResponsiveLayout({
           <SideNavigation />
         </aside>
       )}
-      <article className={styles.body}>
+      <article className={styles.body} id="mdx-root">
         {withBreadcrumbs && <Breadcrumbs />}
         {children}
       </article>
-      <div className={styles.tableOfContents} />
+      <div className={styles.tableOfContents}>
+        <ScrollArea>
+          <TableOfContents />
+        </ScrollArea>
+      </div>
     </div>
   )
 }

src/components/ResponsiveLayout/ResponsiveLayout.tsx

@@ -0,0 +1,12 @@
+.scrollArea {
+  width: 100%;
+  height: calc(100vh - 90px);
+  overflow: hidden;
+  --scrollbar-size: 10px;
+
+  .viewport {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+}

src/components/ScrollArea/ScrollArea.module.scss

@@ -0,0 +1,24 @@
+import type { JSX, ReactNode } from 'react'
+import {
+  ScrollArea as ScrollAreaRoot,
+  ScrollAreaCorner,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@radix-ui/react-scroll-area'
+
+import styles from './ScrollArea.module.scss'
+
+export function ScrollArea({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <ScrollAreaRoot className={styles.scrollArea}>
+      <ScrollAreaViewport className={styles.viewport}>
+        {children}
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation="vertical">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner />
+    </ScrollAreaRoot>
+  )
+}

src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1 @@
+export { ScrollArea } from './ScrollArea'

src/components/ScrollArea/index.ts

@@ -0,0 +1,22 @@
+.title {
+  margin: 0 0 12px;
+}
+
+.list {
+  border-left: 1px solid var(--border-primary);
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+
+  .link {
+    color: var(--content-secondary);
+    text-decoration: none;
+  }
+
+  .activeLink {
+    color: var(--content-accent) !important;
+  }
+}