git.iko.soy/urbit.org
on roller-tutorial help sign in
urbit.org/components/TableOfContents.js
120 lines 3.6 kB history raw
1import { useState, useEffect, useRef } from "react";
3export const TableOfContents = ({ staticPosition, noh3s }) => {
4 const { nestedHeadings } = useHeadingsData(noh3s);
5 const [activeId, setActiveId] = useState();
6 useIntersectionObserver(setActiveId);
7 return (
8 <nav
9 className={
10 (staticPosition ? "static" : "sticky") +
11 " min-h-0 overflow-y-auto w-52 flex-shrink-0 pb-24 hidden lg:block pl-4"
12 }
13 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
14 >
15 <Headings headings={nestedHeadings} activeId={activeId} />
16 </nav>
17 );
18};
20const getNestedHeadings = (headingElements) => {
21 const nestedHeadings = [];
23 headingElements.forEach((heading, index) => {
24 const { innerText: title, id } = heading;
26 if (heading.nodeName === "H2") {
27 nestedHeadings.push({ id, title, items: [] });
28 } else if (heading.nodeName === "H3" && nestedHeadings.length > 0) {
29 nestedHeadings[nestedHeadings.length - 1].items.push({
30 id,
31 title,
32 });
33 }
34 });
36 return nestedHeadings;
37};
39const useHeadingsData = (noh3s) => {
40 const [nestedHeadings, setNestedHeadings] = useState([]);
42 const query = noh3s ? "h2" : "h2, h3";
43 useEffect(() => {
44 const headingElements = Array.from(document.querySelectorAll(query));
46 const newNestedHeadings = getNestedHeadings(headingElements);
47 setNestedHeadings(newNestedHeadings);
48 }, []);
50 return { nestedHeadings };
51};
53const Headings = ({ headings, activeId }) => (
54 <ul>
55 {headings.map((heading, index) => (
56 <li key={heading.id}>
57 <a
58 className={index === 0 ? "font-bold" : "font-medium"}
59 href={`#${heading.id}`}
60 >
61 {heading.title}
62 </a>
63 {heading.items.length > 0 && (
64 <ul className="pl-2">
65 {heading.items.map((child) => (
66 <li
67 key={child.id}
68 className={
69 child.id === activeId ? "text-green-400" : "text-wall-500"
70 }
71 >
72 <a href={`#${child.id}`}>{child.title}</a>
73 </li>
74 ))}
75 </ul>
76 )}
77 </li>
78 ))}
79 </ul>
80);
82const useIntersectionObserver = (setActiveId) => {
83 const headingElementsRef = useRef({});
84 useEffect(() => {
85 const callback = (headings) => {
86 headingElementsRef.current = headings.reduce((map, headingElement) => {
87 map[headingElement.target.id] = headingElement;
88 return map;
89 }, headingElementsRef.current);
91 const visibleHeadings = [];
92 Object.keys(headingElementsRef.current).forEach((key) => {
93 const headingElement = headingElementsRef.current[key];
94 if (headingElement.isIntersecting) visibleHeadings.push(headingElement);
95 });
97 const getIndexFromId = (id) =>
98 headingElements.findIndex((heading) => heading.id === id);
100 if (visibleHeadings.length === 1) {
101 setActiveId(visibleHeadings[0].target.id);
102 } else if (visibleHeadings.length > 1) {
103 const sortedVisibleHeadings = visibleHeadings.sort(
104 (a, b) => getIndexFromId(a.target.id) > getIndexFromId(b.target.id)
105 );
106 setActiveId(sortedVisibleHeadings[0].target.id);
107 }
108 };
110 const observer = new IntersectionObserver(callback, {
111 rootMargin: "0px 0px -50% 0px",
112 });
114 const headingElements = Array.from(document.querySelectorAll("h2, h3"));
116 headingElements.forEach((element) => observer.observe(element));
118 return () => observer.disconnect();
119 }, [setActiveId]);
120};