Generate table of contents (css is wip)

Kale-Ko · Jun 28, 2024 · 6e06eb5 · 6e06eb5
1 parent 55ec5dc
commit 6e06eb5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -53,6 +53,10 @@
         </div>
     </nav>
 
+    <nav id="table-of-contents-parent">
+        <div id="table-of-contents"></div>
+    </nav>
+
     <main id="main"></main>
 
     <script src="/scripts/lib/marked.js"></script>

diff --git a/scripts/main.js b/scripts/main.js
@@ -96,9 +96,10 @@ async function fetchJsonCached(url, options) {
         console.log("Selected language is " + language + ".");
         console.log("Selected page is " + page + ".");
         async function displayMarkdown(element, data) {
-            marked.use({ gfm: true });
-            marked.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
-            marked.use({
+            let markedInstance = new marked.Marked();
+            markedInstance.use({ gfm: true });
+            markedInstance.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
+            markedInstance.use({
                 walkTokens: (token) => {
                     if (token.type !== "link") {
                         return;
@@ -114,7 +115,7 @@ async function fetchJsonCached(url, options) {
                     }
                 }
             });
-            let markdown = marked.parse(data);
+            let markdown = markedInstance.parse(data);
             let sanitized = DOMPurify.sanitize(markdown);
             element.innerHTML = sanitized;
             {
@@ -156,10 +157,29 @@ async function fetchJsonCached(url, options) {
         }
         async function displayPage(data) {
             await displayMarkdown(document.querySelector("#main"), data);
+            await displayTableOfContents(generateTableOfContents(data));
         }
         async function displaySidebar(data) {
             await displayMarkdown(document.querySelector("#sidebar"), data);
         }
+        function generateTableOfContents(data) {
+            let markedInstance = new marked.Marked();
+            markedInstance.use({ gfm: true });
+            markedInstance.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
+            markedInstance.parse(data);
+            let tokens = markedGfmHeadingId.getHeadingList();
+            let output = "";
+            for (let token of tokens) {
+                if (token.level <= 1) {
+                    continue;
+                }
+                output += "\t".repeat(token.level - 2) + "* " + "[" + token.text + "]" + "(" + "#" + token.id + ")" + "\n";
+            }
+            return output;
+        }
+        async function displayTableOfContents(data) {
+            await displayMarkdown(document.querySelector("#table-of-contents"), data);
+        }
         async function markDone() {
             if ("fonts" in document) { // Prevent font flicker
                 await document.fonts.load("1ex Roboto Slab");

diff --git a/scripts/main.ts b/scripts/main.ts
@@ -133,9 +133,10 @@ interface VersionInfo {
         console.log("Selected page is " + page + ".");
 
         async function displayMarkdown(element: HTMLElement, data: string): Promise<void> {
-            marked.use({ gfm: true });
-            marked.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
-            marked.use({
+            let markedInstance = new marked.Marked();
+            markedInstance.use({ gfm: true });
+            markedInstance.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
+            markedInstance.use({
                 walkTokens: (token: any): void => {
                     if (token.type !== "link") {
                         return;
@@ -152,7 +153,7 @@ interface VersionInfo {
                 }
             });
 
-            let markdown: string = marked.parse(data);
+            let markdown: string = markedInstance.parse(data);
             let sanitized: string = DOMPurify.sanitize(markdown);
             element.innerHTML = sanitized;
 
@@ -210,12 +211,39 @@ interface VersionInfo {
 
         async function displayPage(data: string): Promise<void> {
             await displayMarkdown(document.querySelector("#main") as HTMLElement, data);
+
+            await displayTableOfContents(generateTableOfContents(data));
         }
 
         async function displaySidebar(data: string): Promise<void> {
             await displayMarkdown(document.querySelector("#sidebar") as HTMLElement, data);
         }
 
+        function generateTableOfContents(data: string): string {
+            let markedInstance = new marked.Marked();
+            markedInstance.use({ gfm: true });
+            markedInstance.use(markedGfmHeadingId.gfmHeadingId({ prefix: "" }));
+            markedInstance.parse(data);
+
+            let tokens: any[] = markedGfmHeadingId.getHeadingList();
+
+            let output: string = "";
+
+            for (let token of tokens) {
+                if (token.level <= 1) {
+                    continue;
+                }
+
+                output += "\t".repeat(token.level - 2) + "* " + "[" + token.text + "]" + "(" + "#" + token.id + ")" + "\n";
+            }
+
+            return output;
+        }
+
+        async function displayTableOfContents(data: string): Promise<void> {
+            await displayMarkdown(document.querySelector("#table-of-contents") as HTMLElement, data);
+        }
+
         async function markDone(): Promise<void> {
             if ("fonts" in document) {  // Prevent font flicker
                 await document.fonts.load("1ex Roboto Slab");