nibbles-and-bites 0.1.3 → 0.1.5

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "nibbles-and-bites",
   "description": "A composable and accessible component framework",
-  "version": "0.1.3",
-  "homepage": "https://github.com/AliciaBytes/nibbles-and-bites#readme",
+  "version": "0.1.5",
+  "homepage": "https://nibbles-and-bites.polycule.li",
+  "repository": "AliciaBytes/nibbles-and-bites",
   "type": "module",
   "exports": {
     ".": "./src/components/index.js",

package/src/components/astro/SectionDivider.astro

@@ -1,8 +1,8 @@
 ---
-
+let { class: className } = Astro.props;
 ---
 
-<hr />
+<hr class={className} />
 
 <style>
   @layer nb.component {

package/src/components/astro/Toc.astro

@@ -0,0 +1,30 @@
+---
+import generateTocStructure from "../../util/generateTocStructure";
+import type { MarkdownHeading } from "astro";
+import TocLevel from "./TocLevel.astro";
+export interface Props {
+  headings: MarkdownHeading[];
+}
+
+let { headings } = Astro.props;
+const toc = generateTocStructure(
+  headings.filter((heading) => heading.depth > 1 && heading.depth < 4)
+)!;
+
+const hasToc = toc && toc.length !== 0;
+---
+
+{
+  hasToc && (
+    <details>
+      <summary>Table of Contents</summary>
+      <TocLevel items={toc} />
+    </details>
+  )
+}
+
+<style>
+  li {
+    list-style-type: none;
+  }
+</style>

package/src/components/astro/TocLevel.astro

@@ -0,0 +1,29 @@
+---
+import type { TocItem } from "@src/util/generateTocStructure.ts";
+export interface Props {
+  items: TocItem[];
+}
+
+const { items } = Astro.props;
+---
+
+{
+  items && items.length > 0 && (
+    <ul>
+      {items.map((item) => (
+        <>
+          <li>
+            <a href={`#${item.slug}`}>{item.text}</a>
+          </li>
+          {item.children && <Astro.self items={item.children} />}
+        </>
+      ))}
+    </ul>
+  )
+}
+
+<style>
+  li {
+    list-style-type: none;
+  }
+</style>

package/src/components/astro.js

@@ -9,4 +9,6 @@ export { default as SectionDivider } from "./astro/SectionDivider.astro"
 export { default as Spoiler } from "./astro/Spoiler.astro"
 export { default as ThemeSwitcher } from "./astro/ThemeSwitcher.astro"
 export { default as ThemeToggle } from "./astro/ThemeToggle.astro"
+export { default as Toc } from "./astro/Toc.astro"
+export { default as TocLevel } from "./astro/TocLevel.astro"
 export { default as Warning } from "./astro/Warning.astro"

package/src/util/generateTocStructure.ts

@@ -0,0 +1,62 @@
+import type { MarkdownHeading } from "astro";
+export interface TocItem extends MarkdownHeading {
+  children: TocItem[];
+}
+
+function findCorrectChildrenLevel(item: TocItem, depth: number): TocItem[] {
+  if (depth <= 0) {
+    throw new Error("Invalid ToC levels.");
+  }
+
+  if (depth === 1) {
+    return item.children;
+  }
+
+  return findCorrectChildrenLevel(
+    item.children[item.children.length - 1],
+    depth - 1,
+  );
+}
+
+export default function generateTocStructure(headings: MarkdownHeading[]) {
+  let toc: TocItem[] = [];
+
+  if (headings.length < 1) {
+    return toc;
+  }
+
+  const firstItem = headings.shift()!;
+
+  if (headings.some((heading) => heading.depth < firstItem.depth)) {
+    throw new Error(
+      "Problewm in the structure of the ToC, check the heading levels.",
+    );
+  }
+
+  toc.push({
+    ...firstItem,
+    children: [],
+  });
+
+  for (const heading of headings) {
+    if (heading.depth === firstItem.depth) {
+      toc.push({
+        ...heading,
+        children: [],
+      });
+    } else {
+      const lastItem = toc[toc.length - 1];
+      const target = findCorrectChildrenLevel(
+        lastItem,
+        heading.depth - firstItem.depth,
+      );
+
+      target.push({
+        ...heading,
+        children: [],
+      });
+    }
+  }
+
+  return toc;
+}