Adds notes.

src/components/NoteHierarchy.astro

@@ -0,0 +1,65 @@
+---
+import { type Hierarchy } from "../lib/hierarchy.ts";
+
+interface Props {
+  prefix: string;
+	hierarchy: Hierarchy;
+}
+
+const { prefix, hierarchy } = Astro.props;
+
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '/');
+
+---
+{
+  Object.entries(hierarchy).map(([leader, node]) => {
+    const notePath = `${prefix}/${leader}`;
+    const isActive = pathname === notePath;
+    const linkClasses = isActive ? "active" : "";
+
+    if (node.children) {
+        return (
+        <details open={pathname.startsWith(notePath) && "true"}>
+          <summary>
+            { node.id
+              ? <a href={notePath} class={linkClasses}>{node.title || leader}</a>
+              : <span class="header-only">{node.title || leader}</span>
+            }
+          </summary>
+          <div class="child-notes">
+            { <Astro.self prefix={notePath} hierarchy={node.children} /> }
+          </div>
+        </details>
+      );
+    }
+
+    return (
+      <div>
+        <a href={notePath} class={linkClasses}>
+          {node.title || leader}
+        </a>
+      </div>
+      );
+  })
+}
+
+<style>
+.active {
+  font-weight: bold;
+}
+
+.child-notes {
+  margin-left: 1em;
+}
+
+summary {
+  .header-only {
+    color: var(--color-gray)
+  }
+
+  &:hover {
+    color: var(--color-gold);
+  }
+}
+
+</style>