From 74c2e8fa47e363775646d103933b99c9cdf84822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <dnalop.me@gmail.com>
Date: Wed, 26 Apr 2023 10:23:10 +0200
Subject: [PATCH] Create a custom Table Of Contents component

---
 src/components/TableOfContents.astro | 59 ++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/TableOfContents.astro

diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
new file mode 100644
index 0000000..f24d5a9
--- /dev/null
+++ b/src/components/TableOfContents.astro
@@ -0,0 +1,59 @@
+---
+import type { MarkdownHeading } from 'astro';
+
+type Props = {
+  headings: MarkdownHeading[];
+};
+
+type HeadingWithSubheadings = MarkdownHeading & {
+  subheadings: MarkdownHeading[];
+};
+
+const { headings } = Astro.props;
+
+const grouppedHeadings = headings.reduce((array, heading) => {
+  if (heading.depth === 2) {
+    array.push({ ...heading, subheadings: [] });
+  } else if (heading.depth === 3) {
+    array.at(-1)?.subheadings.push(heading);
+  }
+
+  return array;
+}, [] as HeadingWithSubheadings[]);
+---
+
+<nav id="table-of-contents" aria-label="Table of contents">
+  <h2>Table Of Contents</h2>
+  <ol>
+    {
+      grouppedHeadings.map((h) => (
+        <li>
+          <a href={`#${h.slug}`}>{h.text}</a>
+          {h.subheadings.length > 0 && (
+            <ol>
+              {h.subheadings.map((sub) => (
+                <li>
+                  <a href={`#${sub.slug}`}>{sub.text}</a>
+                </li>
+              ))}
+            </ol>
+          )}
+        </li>
+      ))
+    }
+  </ol>
+</nav>
+
+<style>
+  #table-of-contents {
+    margin: 1rem 0 2rem 0;
+    padding: 0.5rem;
+    border: 1px solid #fff;
+    border-left: none;
+    border-right: none;
+  }
+
+  li {
+    text-transform: lowercase;
+  }
+</style>