Adjust table of contents heading depth

src/components/HomePage.js

@@ -68,7 +68,7 @@ export function Docset({
 }) {
   return (
     <Flex align="flex-start" p="6" rounded="md" borderWidth="1px">
-      <Flex direction="column" h="full">
+      <Flex align="flex-start" direction="column" h="full">
         <Heading as="h3" size="lg" mb="4">
           {title}
         </Heading>

src/components/TableOfContents.js

@@ -4,19 +4,25 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {Link, List, ListItem} from '@chakra-ui/react';
 import {useAccentColor} from '../utils';
 
+const MIN_HEADING_DEPTH = 2;
+const MAX_HEADING_DEPTH = 3;
+
 export default function TableOfContents({headings}) {
   const activeColor = useAccentColor();
   const [activeId, setActiveId] = useState(null);
 
   const toc = useMemo(() => {
     const slugger = new GithubSlugger();
-    const depths = headings.map(heading => heading.depth);
-    const minDepth = Math.min(...depths);
-    return headings.map(({depth, value}) => ({
-      value,
-      depth: depth - minDepth,
-      id: slugger.slug(value)
-    }));
+    return headings
+      .filter(
+        heading =>
+          heading.depth >= MIN_HEADING_DEPTH &&
+          heading.depth <= MAX_HEADING_DEPTH
+      )
+      .map(heading => ({
+        ...heading,
+        id: slugger.slug(heading.value)
+      }));
   }, [headings]);
 
   useEffect(() => {
@@ -42,7 +48,11 @@ export default function TableOfContents({headings}) {
   return (
     <List overflow="auto" spacing="2.5">
       {toc.map(({id, value, depth}, index) => (
-        <ListItem key={index} pl={depth * 2} lineHeight="normal">
+        <ListItem
+          key={index}
+          pl={(depth - MIN_HEADING_DEPTH) * 4}
+          lineHeight="normal"
+        >
           <Link href={'#' + id} color={id === activeId && activeColor}>
             {value}
           </Link>