feat: add table of content element

2024-04-07 02:36:02 +02:00
parent f76477db98
commit 0ab1e1068d
10 changed files with 86 additions and 21 deletions
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -118,11 +118,11 @@ const { title, width = "compact" } = Astro.props;
      })();
    </script>
  </head>
-  <body class=`layout-${width} bg-dark text-neutral p-2`>
+  <body class="bg-dark text-neutral p-2 flex flex-col gap-4">
    <header>
      <Nav />
    </header>
-    <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
+    <main id="main-content" class="flex flex-col gap-4">
      <slot />
    </main>
    <footer class="px-4 flex gap-8 mb-4">
@@ -135,7 +135,7 @@ const { title, width = "compact" } = Astro.props;
      </a>
    </footer>
    <style>
-      .layout-compact {
+      body {
        max-width: 600px;
        margin: 0 auto;
      }
--- a/src/layouts/Post.astro
+++ b/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>