components/MDX/TableOfContents.tsx

"use client";

import useActualPathname from "@/hooks/useActualPathname";
import { FC, useEffect, useRef, useState } from "react";

const selector = ":is(h1, h2, h3, h4, h5, h6)[id]";

export default function TableOfContents({
    as,
}: {
    as?: keyof JSX.IntrinsicElements | FC;
}) {
    const [headings, setHeadings] = useState<
        {
            id: string;
            title: string;
        }[]
    >([]);
    const observer = useRef<IntersectionObserver>();
    const [activeId, setActiveId] = useState("");
    const Root = as ?? "div";
    const pathname = useActualPathname();

    useEffect(() => {
        const headingElements = Array.from(
            document.querySelectorAll(selector) as Iterable<HTMLElement>,
        );

        if (
            headingElements.length > 1 &&
            headingElements[0]?.tagName === "H1"
        ) {
            headingElements.shift();
        }

        const headings = headingElements.map(element => ({
            title: element.innerText.replaceAll("&amp;", "&"),
            id: element.id,
        }));

        setHeadings(headings);
        setActiveId(headings[0].id);
    }, [pathname]);

    useEffect(() => {
        observer.current = new IntersectionObserver(
            entries => {
                for (const entry of entries) {
                    if (entry?.isIntersecting) {
                        setActiveId(entry.target.id);
                    }
                }
            },
            {
                rootMargin: "-30% 0% -30% 0%",
            },
        );

        const elements = document.querySelectorAll(selector);
        elements.forEach(element => observer.current?.observe(element));

        return () => {
            observer.current?.disconnect();
            setActiveId("");
        };
    }, [pathname]);

    const onlyOne = headings.length === 1;

    return (
        <Root>
            <h4 className="pl-[15px] mb-3 mt-4 uppercase font-bold tracking-wider text-[15px]">
                On this page
            </h4>
            <ul className="list-none pr-2.5">
                {headings.map(heading => (
                    <li key={heading.id}>
                        <a
                            className={`my-2 block pl-[15px] ${
                                activeId === heading.id || onlyOne
                                    ? "text-blue-500 after:[content:'●'] after:ml-2 after:inline-block after:text-blue-500"
                                    : "hover:text-blue-500"
                            }`}
                            href={`#${heading.id}`}
                            onClick={event => {
                                event.preventDefault();

                                const element = document.getElementById(
                                    heading.id,
                                );

                                element?.scrollIntoView({
                                    behavior: "smooth",
                                    block: "center",
                                    inline: "center",
                                });
                            }}
                        >
                            {heading.title}
                        </a>
                    </li>
                ))}
            </ul>
        </Root>
    );
}
1	"use client";
2
3	import useActualPathname from "@/hooks/useActualPathname";
4	import { FC, useEffect, useRef, useState } from "react";
5
6	const selector = ":is(h1, h2, h3, h4, h5, h6)[id]";
7
8	export default function TableOfContents({
9	as,
10	}: {
11	as?: keyof JSX.IntrinsicElements \| FC;
12	}) {
13	const [headings, setHeadings] = useState<
14	{
15	id: string;
16	title: string;
17	}[]
18	>([]);
19	const observer = useRef<IntersectionObserver>();
20	const [activeId, setActiveId] = useState("");
21	const Root = as ?? "div";
22	const pathname = useActualPathname();
23
24	useEffect(() => {
25	const headingElements = Array.from(
26	document.querySelectorAll(selector) as Iterable<HTMLElement>,
27	);
28
29	if (
30	headingElements.length > 1 &&
31	headingElements[0]?.tagName === "H1"
32	) {
33	headingElements.shift();
34	}
35
36	const headings = headingElements.map(element => ({
37	title: element.innerText.replaceAll("&", "&"),
38	id: element.id,
39	}));
40
41	setHeadings(headings);
42	setActiveId(headings[0].id);
43	}, [pathname]);
44
45	useEffect(() => {
46	observer.current = new IntersectionObserver(
47	entries => {
48	for (const entry of entries) {
49	if (entry?.isIntersecting) {
50	setActiveId(entry.target.id);
51	}
52	}
53	},
54	{
55	rootMargin: "-30% 0% -30% 0%",
56	},
57	);
58
59	const elements = document.querySelectorAll(selector);
60	elements.forEach(element => observer.current?.observe(element));
61
62	return () => {
63	observer.current?.disconnect();
64	setActiveId("");
65	};
66	}, [pathname]);
67
68	const onlyOne = headings.length === 1;
69
70	return (
71	<Root>
72	<h4 className="pl-[15px] mb-3 mt-4 uppercase font-bold tracking-wider text-[15px]">
73	On this page
74	</h4>
75	<ul className="list-none pr-2.5">
76	{headings.map(heading => (
77	<li key={heading.id}>
78	<a
79	className={`my-2 block pl-[15px] ${
80	activeId === heading.id \|\| onlyOne
81	? "text-blue-500 after:[content:'●'] after:ml-2 after:inline-block after:text-blue-500"
82	: "hover:text-blue-500"
83	}`}
84	href={`#${heading.id}`}
85	onClick={event => {
86	event.preventDefault();
87
88	const element = document.getElementById(
89	heading.id,
90	);
91
92	element?.scrollIntoView({
93	behavior: "smooth",
94	block: "center",
95	inline: "center",
96	});
97	}}
98	>
99	{heading.title}
100	</a>
101	</li>
102	))}
103	</ul>
104	</Root>
105	);
106	}