feat: add table of content element

src/layouts/Post.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "./Layout.astro";
+import TOC from "@components/TOC.astro";
 import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import type { MarkdownLayoutProps } from "astro";
 
@@ -10,7 +11,7 @@ type Props = MarkdownLayoutProps<{
   toc?: boolean;
 }>;
 
-const { frontmatter } = Astro.props;
+const { frontmatter, headings } = Astro.props;
 const t = useTranslations(Astro.url);
 const { title, url, date: dateString, links, toc } = frontmatter;
 const collection = url?.split("/")[2];
@@ -56,11 +57,12 @@ const backlinkContent = t(`nav.${collection}`).toLowerCase();
     </div>
   </div>
   <article class={`flex flex-col gap-4 ${toc ? "show-toc" : ""}`}>
-    <div class="mb-4 flex flex-col gap-1">
+    <div class="flex flex-col gap-1">
       <h1 class="text-4xl">
         {title}
       </h1>
     </div>
+    {toc && <TOC headings={headings} />}
     <slot />
   </article>
 </Layout>