Generate nested table of contents

nix/module.nix

@@ -164,9 +164,6 @@ in
               alias = "/var/www/archtika-websites/previews/";
               index = "index.html";
               tryFiles = "$uri $uri/ $uri/index.html =404";
-              extraConfig = ''
-                autoindex on;
-              '';
             };
             "/api/" = {
               proxyPass = "http://localhost:${toString cfg.port}/";

web-app/src/lib/utils.ts

@@ -94,20 +94,41 @@ const createMarkdownParser = (showToc = true) => {
         postprocess(html: string) {
           const closingRemainingSection = "</section>".repeat(sectionStack.length);
 
-          const tableOfContents =
+          let tableOfContents = "";
-            showToc && headings.length > 0
+          if (showToc && headings.length > 0) {
-              ? `<details class="table-of-contents">
+            const tocItems = [];
+            let currentLevel = 0;
+
+            for (const { id, text, level } of headings) {
+              while (currentLevel < level - 1) {
+                tocItems.push("<ul>");
+                currentLevel++;
+              }
+              while (currentLevel > level - 1) {
+                tocItems.push("</ul>");
+                currentLevel--;
+              }
+              tocItems.push(`<li><a href="#${id}">${text}</a>`);
+              if (level > currentLevel) {
+                tocItems.push("<ul>");
+                currentLevel = level;
+              } else {
+                tocItems.push("</li>");
+              }
+            }
+
+            while (currentLevel > 0) {
+              tocItems.push("</ul></li>");
+              currentLevel--;
+            }
+
+            tableOfContents = `
+              <details class="table-of-contents">
                 <summary>Table of contents</summary>
-                <ul>
+                ${tocItems.join("")}
-                  ${headings
+              </details>
-                    .map(
+            `;
-                      ({ id, text, level }) => `
+          }
-                      <li><a href="#${id}" class="h${level}">${text}</a></li>`
-                    )
-                    .join("")}
-                </ul>
-              </details>`
-              : "";
 
           return `
             ${tableOfContents}