1function TocGeneration() {
2 const [pageOverview, setPageOverview] = useState<Overview | null>(null);
3
4 const sectionToString = (section: Overview["sections"][number], depth: number): string => {
5 const indent = " ".repeat(depth);
6 const subSections = section.subSections
7 .map((sub) => sectionToString(sub, depth + 1));
8 return deindent`
9 ${indent}level ${section.level}: #${section.id}
10 ${subSections.join("")}
11 `;
12 };
13
14 return (
15 <Box>
16 <PageOverview onOverviewChange={setPageOverview}>
17 <Box border="1px solid red">
18 <Paragraph body id="some-text">Some body.</Paragraph>
19 <Paragraph h1 id="h1-title">h1 title</Paragraph>
20 <Paragraph h1 id="another-h1-title">Another h1 title</Paragraph>
21 <Paragraph body id="some-other-text">Some other body.</Paragraph>
22 <Paragraph h2 id="h2-title">h2 title</Paragraph>
23 <Paragraph h3 id="h3-title">h3 title</Paragraph>
24 <Paragraph h2 id="another-h2-title">Another h2 title</Paragraph>
25 <Paragraph h2>h2 title without id</Paragraph>
26 </Box>
27 </PageOverview>
28
29 <Paragraph body>
30 <InlineCode whiteSpace="pre">
31 {pageOverview == null
32 ? "Loading..."
33 : pageOverview.sections.map(s => sectionToString(s, 0))}
34 </InlineCode>
35 </Paragraph>
36 </Box>
37 );
38}