Fix headings type issues

src/components/TableOfContents.astro

@@ -1,12 +1,17 @@
 ---
-const { headers } = Astro.props;
+import type { MarkdownHeading } from 'astro';
+
+interface Props {
+  headings: MarkdownHeading[];
+}
+const { headings } = Astro.props;
 ---
 
 <ul class="flex flex-col gap-4 mt-24">
   {
-    headers.map(({ slug, text }) => {
+    headings.map(({ slug, text }) => {
       return (
-        <li class="text-slate-400 hover:text-slate-900">
+        <li class="text-slate-400 hover:text-slate-f900">
           #<a href={`#${slug}`}>{text}</a>
         </li>
       );

src/layouts/Main.astro

@@ -5,10 +5,13 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Sidebar from "@components/Sidebar.astro";
 import TableOfContents from "@components/TableOfContents.astro";
+import type { MarkdownHeading } from "astro";
 
-type Props = CollectionEntry<"handbook">["data"];
+type Props = Pick<CollectionEntry<"handbook">["data"], "title" | "description"> & {
+  headings: MarkdownHeading[];
+};
 
-const { title, description, pubDate, lastModified, headers } = Astro.props;
+const { title, description, headings } = Astro.props;
 const currentPage = new URL(Astro.request.url).pathname;
 ---
 
@@ -29,11 +32,11 @@ const currentPage = new URL(Astro.request.url).pathname;
         <slot />
       </main>
       {
-        headers && headers.length > 0 && (
+        headings && headings.length > 0 && (
           <div class="col-span-3 sticky top-0 h-screen flex">
             <nav aria-labelledby="grid-right">
               <div class="px-8">
-                <TableOfContents headers={headers} />
+                <TableOfContents headings={headings} />
               </div>
             </nav>
           </div>

src/pages/[...slug].astro

@@ -14,10 +14,10 @@ type Props = CollectionEntry<'handbook'>;
 const isProd = import.meta.env.PROD;
 const {render, data} = Astro.props;
 const {title, lastModified} = data;
-const { Content } = await render();
+const { Content, headings } = await render();
 ---
 
-<Main {...data}>
+<Main {headings} { ...data}>
 	<h2 class="text-2xl font-semibold mb-2">{title}</h2>
 		<!-- lastModified can be undefined in some rare circumstances (usually development only), this might fail in production if something went wrong. -->
 		<span>{(lastModified ?? (isProd ? null : new Date()))!.toLocaleDateString('en-us', {

src/pages/index.astro

@@ -1,13 +1,15 @@
 ---
-import BaseHead from '@components/BaseHead.astro';
-import Header from '@components/Header.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
-import { getCollection } from 'astro:content';
+// import BaseHead from '@components/BaseHead.astro';
+// import Header from '@components/Header.astro';
+// import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
+// import { getCollection } from 'astro:content';
 import Main from '@layouts/Main.astro';
-import FormattedDate from '@components/FormattedDate.astro';
+// import FormattedDate from '@components/FormattedDate.astro';
 
-const posts = (await getCollection('handbook')).sort(
-	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
-);
+// const posts = (await getCollection('handbook')).sort(
+// 	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+// );
 ---
-<Main>asd</Main>
+<Main title="test" description='test' headings={[]}>
+	Nothing here yet.
+</Main>