nest toc h3 beneath h2

Author: katiegoines

src/components/Layout/Layout.tsx

@@ -147,8 +147,15 @@ export const Layout = ({
 
     pageHeadings.forEach((node) => {
       const { innerText, id, localName } = node as HTMLElement;
-      if (innerText && id && (localName == 'h2' || localName == 'h3')) {
+      if (innerText && id && localName == 'h2') {
         headings.push({
+          linkText: innerText,
+          hash: id,
+          level: localName,
+          subheadings: []
+        });
+      } else if (innerText && id && localName == 'h3') {
+        headings[headings.length - 1].subheadings.push({
           linkText: innerText,
           hash: id,
           level: localName

src/components/TableOfContents/TableOfContents.tsx

@@ -4,6 +4,7 @@ export interface HeadingInterface {
   linkText: string;
   hash: string;
   level: string;
+  subheadings: Array<object>;
 }
 interface TableOfContents {
   headers?: HeadingInterface[];
@@ -21,20 +22,57 @@ export const TableOfContents = ({ headers }) => {
       )}
       <View as="ul" className="toc-list">
         {headers.map(({ linkText, hash, level }, index) => {
-          return (
-            <View
-              as="li"
-              className={`toc-item toc-item--${level}`}
-              key={`toc-${index}`}
-            >
-              <Link
-                href={`#${hash}`}
-                className={`toc-item__link toc-item__link--${level}`}
+          if (headers[index].subheadings?.length === 0) {
+            return (
+              <View
+                as="li"
+                className={`toc-item toc-item--${level}`}
+                key={`toc-${index}`}
               >
-                {linkText}
-              </Link>
-            </View>
-          );
+                <Link
+                  href={`#${hash}`}
+                  className={`toc-item__link toc-item__link--${level}`}
+                >
+                  {linkText}
+                </Link>
+              </View>
+            );
+          } else {
+            return (
+              <View
+                as="li"
+                className={`toc-item toc-item--${level}`}
+                key={`toc-${index}`}
+              >
+                <Link
+                  href={`#${hash}`}
+                  className={`toc-item__link toc-item__link--${level}`}
+                >
+                  {linkText}
+                </Link>
+                <View as="ul" className="toc-list">
+                  {headers[index].subheadings?.map(
+                    ({ linkText, hash, level }, index) => {
+                      return (
+                        <View
+                          as="li"
+                          className={`toc-item toc-item--${level}`}
+                          key={`toc-${index}`}
+                        >
+                          <Link
+                            href={`#${hash}`}
+                            className={`toc-item__link toc-item__link--${level}`}
+                          >
+                            {linkText}
+                          </Link>
+                        </View>
+                      );
+                    }
+                  )}
+                </View>
+              </View>
+            );
+          }
         })}
       </View>
     </Flex>