feat: added TOC (#198)

src/components/widget/SideBar.astro

@@ -2,15 +2,29 @@
 import Profile from './Profile.astro'
 import Tag from './Tags.astro'
 import Categories from './Categories.astro'
+import type { MarkdownHeading } from 'astro'
+import TOC from './TOC.astro'
+
+interface Props {
+    class? : string
+    headings? : MarkdownHeading[]
+}
 
 const className = Astro.props.class
+const headings = Astro.props.headings
+
 ---
 <div id="sidebar" class:list={[className, "w-full"]}>
     <div class="flex flex-col w-full gap-4 mb-4">
         <Profile></Profile>
     </div>
-    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
-        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
-        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
+    <div id="sidebar-sticky" class="sticky top-4">
+        <div id="toc" class="transition-all duration-700 flex flex-col w-full gap-4">
+            {headings && headings.length > 0 && <TOC class="mb-4 onload-animation" style="animation-delay: 150ms" headings={headings}/>}
+        </div>
+        <div class="transition-all duration-700 flex flex-col w-full gap-4">
+            <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
+            <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
+        </div>
     </div>
 </div>