diff --git a/apps/frontpage/app/docs/[[...slug]]/layout.tsx b/apps/frontpage/app/docs/[[...slug]]/layout.tsx
index 59136c0b..4cfd9d0d 100644
--- a/apps/frontpage/app/docs/[[...slug]]/layout.tsx
+++ b/apps/frontpage/app/docs/[[...slug]]/layout.tsx
@@ -56,7 +56,7 @@ export default async function Layout({
{children}
-
+
diff --git a/apps/frontpage/components/docs/table-of-content.tsx b/apps/frontpage/components/docs/table-of-content.tsx
index 8ae6a17e..aaffa2ec 100644
--- a/apps/frontpage/components/docs/table-of-content.tsx
+++ b/apps/frontpage/components/docs/table-of-content.tsx
@@ -7,26 +7,37 @@ import type { Dispatch, FC, SetStateAction } from 'react';
import { useEffect, useState } from 'react';
import { useScrollDirection } from 'react-use-scroll-direction';
import { ScrollArea } from '../ui/scroll-area';
+import { useDocs } from '../../app/docs/provider';
interface Heading {
- id: number;
- slug: string;
+ id: string;
title: string;
level: number;
}
-interface TableOfContentProps {
- headings?: Heading[];
-}
-
interface ElementProps {
heading: Heading;
isInView: string[];
setIsInView: Dispatch>;
}
-export const TableOfContent: FC = ({ headings }) => {
+export const TableOfContent: FC = () => {
+ const { activeRenderer } = useDocs();
const [isInView, setIsInView] = useState([]);
+ const [headings, setHeadings] = useState([]);
+
+ useEffect(() => {
+ const selectors = document.querySelectorAll(
+ 'h2, h3, h4',
+ ) as NodeListOf;
+
+ const elements = Array.from(selectors).map((elem) => ({
+ id: elem.id,
+ title: elem.innerText,
+ level: Number(elem.nodeName.charAt(1)),
+ }));
+ setHeadings(elements);
+ }, [activeRenderer]);
return (