feat: add configurations for TOC component

src/components/widget/TOC.astro

@@ -1,23 +1,33 @@
 ---
 import type { MarkdownHeading } from 'astro';
+import { siteConfig } from "../../config";
 
 interface Props {
   class?: string
   headings: MarkdownHeading[]
 }
 
-const { headings = []  } = Astro.props;
+let { headings = []  } = Astro.props;
 
 // generate random headings, for testing
-/*
+// headings = [
-for (let i = 0; i < 50; i++) {
+//     { text: 'Heading 1', depth: 1, slug: 'heading-1' },
-    headings.push({
+//     { text: 'Heading 2', depth: 2, slug: 'heading-2' },
-        text: `Heading ${i + 1}`,
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
-        depth: Math.floor(Math.random() * 3) + 1,
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
-        slug: `heading-${i + 1}`
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
-    })
+//     { text: 'Heading 2', depth: 2, slug: 'heading-2' },
-}
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
-*/
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
+//     { text: 'Heading 1', depth: 1, slug: 'heading-1' },
+//     { text: 'Heading 2', depth: 2, slug: 'heading-2' },
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
+//     { text: 'Heading 2', depth: 2, slug: 'heading-2' },
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
+//     { text: 'Heading 3', depth: 3, slug: 'heading-3' },
+// ]
 
 let minDepth = 10;
 for (const heading of headings) {
@@ -36,9 +46,11 @@ const removeTailingHash = (text: string) => {
 }
 
 let heading1Count = 1;
+
+const maxLevel = siteConfig.toc.depth;
 ---
 <div class:list={[className]}>
-    {headings.filter((heading) => heading.depth <= minDepth + 1).map((heading) =>
+    {headings.filter((heading) => heading.depth < minDepth + maxLevel).map((heading) =>
             <a href={`#${heading.slug}`} class="px-2 transition flex w-full gap-2 h-9 rounded-xl items-center
         hover:bg-[var(--toc-btn-hover)] active:bg-[var(--toc-btn-active)]
     ">
@@ -46,15 +58,17 @@ let heading1Count = 1;
                     {
                         "bg-[var(--toc-badge-bg)] text-[var(--btn-content)]": heading.depth == minDepth,
                         "ml-4": heading.depth == minDepth + 1,
+                        "ml-8": heading.depth == minDepth + 2,
                     }
                 ]}
                 >
                     {heading.depth == minDepth && heading1Count++}
-                    {heading.depth == minDepth + 1 && <div class="w-1.5 h-1.5 rounded-sm bg-black/5 dark:bg-white/10"></div>}
+                    {heading.depth == minDepth + 1 && <div class="w-2 h-2 rounded-[0.1875rem] bg-[var(--toc-badge-bg)]"></div>}
+                    {heading.depth == minDepth + 2 && <div class="w-1.5 h-1.5 rounded-sm bg-black/5 dark:bg-white/10"></div>}
                 </div>
                 <div class:list={["text-sm", {
-                    "text-50": heading.depth == minDepth,
+                    "text-50": heading.depth == minDepth || heading.depth == minDepth + 1,
-                    "text-30": heading.depth == minDepth + 1,
+                    "text-30": heading.depth == minDepth + 2,
                 }]}>{removeTailingHash(heading.text)}</div>
             </a>
     )}

src/config.ts

@@ -24,6 +24,10 @@ export const siteConfig: SiteConfig = {
       url: ''                // (Optional) URL link to the original artwork or artist's page
     }
   },
+  toc: {
+    enable: true,           // Display the table of contents on the right side of the post
+    depth: 2                // Maximum heading depth to show in the table, from 1 to 3
+  },
   favicon: [    // Leave this array empty to use the default favicon
     // {
     //   src: '/favicon/icon.png',    // Path of the favicon, relative to the /public directory

src/layouts/MainGridLayout.astro

@@ -93,7 +93,7 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
 <div class="absolute w-full z-0">
     <div class="relative max-w-[var(--page-width)] mx-auto">
         <!-- TOC component -->
-        <div id="toc-wrapper" class="transition absolute top-0 -right-[30rem] w-[30rem] flex items-center toc-hide">
+        {siteConfig.toc.enable && <div id="toc-wrapper" class="transition absolute top-0 -right-[30rem] w-[30rem] flex items-center toc-hide">
             <div id="toc-inner-wrapper" class="fixed top-14 w-96 h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
                 <div id="toc" class="w-full h-full transition-swup-fade">
                     <div class="h-8 w-full"></div>
@@ -101,7 +101,10 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
                     <div class="h-8 w-full"></div>
                 </div>
             </div>
-        </div>
+        </div>}
+
+        <!-- #toc needs to exist for Swup to work normally -->
+        {!siteConfig.toc.enable && <div id="toc"></div>}
     </div>
 </div>
 </Layout>

src/types/config.ts

@@ -20,6 +20,10 @@ export type SiteConfig = {
       url?: string
     }
   }
+  toc: {
+    enable: boolean
+    depth: 1 | 2 | 3
+  }
 
   favicon: Favicon[]
 }