feat: add auto-generated toc

Author: metonym

src/index.js

@@ -1,2 +1,2 @@
 export { preprocessReadme } from "./preprocessReadme";
-export { default as default } from "./createConfig";
+export { default } from "./createConfig";

src/preprocessReadme.js

@@ -55,13 +55,24 @@ export function preprocessReadme(opts) {
   return {
     markup: ({ content, filename }) => {
       if (/node_modules/.test(filename) || !filename.endsWith(".md")) return null;
+
+      content = content.replace(
+        "<!-- TOC -->",
+        `
+## Table of Contents
+      `
+      );
+
       let script_content = "";
       let style_content = "";
       let result = md.render(content);
       let cursor = 0;
 
       const ast = parse(result);
 
+      let headings = [];
+      let prev;
+
       walk(ast, {
         enter(node, parent) {
           if (node.type === "Attribute" && node.name === "href") {
@@ -81,6 +92,34 @@ export function preprocessReadme(opts) {
             cursor -= replace_style.length;
           }
 
+          if (node.type === "Element" && node.name === "h2") {
+            const id = node.attributes.find((attr) => attr.name === "id").value[0].raw;
+
+            if (id === "table-of-contents") return;
+
+            const text = node.children[0].raw;
+            if (prev === "h3") {
+              headings.push(`</ul><li><a href="#${id}">${text}</a></li>`);
+            } else {
+              headings.push(`<li><a href="#${id}">${text}</a></li>`);
+            }
+
+            prev = "h2";
+          }
+
+          if (node.type === "Element" && node.name === "h3") {
+            const id = node.attributes.find((attr) => attr.name === "id").value[0].raw;
+            const text = node.children[0].raw;
+
+            if (prev === "h2") {
+              headings.push(`<ul><li><a href="#${id}">${text}</a></li>`);
+            } else {
+              headings.push(`<li><a href="#${id}">${text}</a></li>`);
+            }
+
+            prev = "h3";
+          }
+
           if (node.type === "Attribute" && node.name === "data-svelte") {
             const raw_value = node.value[0].raw;
             const value = decodeURI(raw_value);
@@ -102,6 +141,15 @@ export function preprocessReadme(opts) {
         },
       });
 
+      if (prev === "h3") {
+        headings.push("</ul>");
+      }
+
+      result = result.replace(
+        `<h2 id="table-of-contents">Table of Contents</h2>`,
+        `<p><strong>Table of Contents</strong></p><ul>${headings.join("\n")}</ul>`
+      );
+
       return {
         code: `
             <script>${script_content}</script>

test/README.md

@@ -1,5 +1,7 @@
 # my-svelte-component
 
+<!-- TOC -->
+
 Relative URL: [Readme](./) 
 
 Relative URL (anchor): [Usage](#usage)
@@ -8,8 +10,13 @@ Absolute URL: [svelte-readme](https://github.com/metonym/svelte-readme)
 
 Check out my cool component library.
 
+- level 1
+  - level 2
+
 ## Usage
 
+### Basic
+
 ```svelte
 <script>
   import Button from "my-svelte-component";
@@ -31,10 +38,19 @@ Check out my cool component library.
 {/each}
 ```
 
+### Usage with X
+
+## Local storage
+
+**Note**
+
 ```js
 localStorage.getItem("custom-theme-key");
 ```
 
+
 [package.json](package.json)
 
+## License
+
 [MIT](../LICENSE)