fix: some astro type errors

astro.config.mjs

@@ -4,6 +4,7 @@ import sitemap from "@astrojs/sitemap";
 import Icons from 'unplugin-icons/vite'
 import mdx from '@astrojs/mdx';
 import glsl from 'vite-plugin-glsl';
+import remarkToc from 'remark-toc'
 
 import svelte from "@astrojs/svelte";
 import UnoCSS from 'unocss/astro'
@@ -31,7 +32,11 @@ export default defineConfig({
     ],
   },
   integrations: [
-    mdx(),
+    mdx({
+      remarkPlugins: [
+        remarkToc
+      ]
+    }),
     svelte(),
     UnoCSS({
       injectReset: true

package.json

@@ -17,6 +17,7 @@
     "astro": "^4.5.5",
     "astro-i18n-aut": "^0.7.0",
     "astro-imagetools": "^0.9.0",
+    "remark-toc": "^9.0.0",
     "svelte": "^4.2.12",
     "svelte-gestures": "^4.0.0",
     "tailwindcss": "^3.4.1",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ dependencies:
   astro-imagetools:
     specifier: ^0.9.0
     version: 0.9.0(astro@4.5.5)
+  remark-toc:
+    specifier: ^9.0.0
+    version: 9.0.0
   svelte:
     specifier: ^4.2.12
     version: 4.2.12
@@ -1909,6 +1912,10 @@ packages:
       '@types/node': 17.0.45
     dev: true
 
+  /@types/ungap__structured-clone@0.3.3:
+    resolution: {integrity: sha512-RNmhIPwoip6K/zZOv3ypksTAqaqLEXvlNSXKyrC93xMSOAHZCR7PifW6xKZCwkbbnbM9dwB9X56PPoNTlNwEqw==}
+    dev: false
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -3988,6 +3995,18 @@ packages:
     dependencies:
       '@types/mdast': 4.0.3
 
+  /mdast-util-toc@7.0.0:
+    resolution: {integrity: sha512-C28UcSqjmnWuvgT8d97qpaItHKvySqVPAECUzqQ51xuMyNFFJwcFoKW77KoMjtXrclTidLQFDzLUmTmrshRweA==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      '@types/ungap__structured-clone': 0.3.3
+      '@ungap/structured-clone': 1.2.0
+      github-slugger: 2.0.0
+      mdast-util-to-string: 4.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit: 5.0.0
+    dev: false
+
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
@@ -5041,6 +5060,13 @@ packages:
       mdast-util-to-markdown: 2.1.0
       unified: 11.0.4
 
+  /remark-toc@9.0.0:
+    resolution: {integrity: sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==}
+    dependencies:
+      '@types/mdast': 4.0.3
+      mdast-util-toc: 7.0.0
+    dev: false
+
   /request-light@0.7.0:
     resolution: {integrity: sha512-lMbBMrDoxgsyO+yB3sDcrDuX85yYt7sS8BfQd11jtbW/z5ZWgLZRcEGLsLoYw7I0WSUGQBs8CC8ScIxkTX1+6Q==}
     dev: false

public/app.css

@@ -20,7 +20,8 @@ article>h3 {
 }
 
 article>p>a,
-article a {
+article a,
+.top-info>.links a {
   color: var(--fill) !important;
 }
 

src/layouts/Post.astro

@@ -7,23 +7,38 @@ type CustomProps = {
   layout?: "normal" | "transparent";
   backlink?: string;
 };
-type Props = CollectionEntry<"blog"> & CustomProps;
+type Props = CollectionEntry<"blog" | "photos" | "videos" | "projects"> &
+  CustomProps;
 
-const { headings, data } = Astro.props;
+const { data, backlink = "/" } = Astro.props;
-console.log(Astro.props);
+const { title, date, links, _layout } = data;
-const { title, date, links, _layout, backlink = "/blog" } = data;
 const path = useTranslatedPath(Astro.url);
 ---
 
 <Layout title={title}>
-  <div
+  <div class="top-info flex items-center place-content-between m-y-2">
-    class="top-info flex items-center place-content-between opacity-50 m-y-2"
+    <a class="flex items-center gap-1 opacity-50" href={path(backlink)}
-  >
-    <a class="flex items-center gap-1" href={path(backlink)}
       ><span class="i-tabler-arrow-left"></span> overview</a
     >
 
-    <div class="date">
+    {
+      links?.length && (
+        <div class="links flex gap-4">
+          {links.map(([title, url]: string[]) => (
+            <a href={url} class="flex external items-center gap-[4px]">
+              {title}
+              {title === "git" ? (
+                <span class="i-tabler-brand-git w-4 h-4" />
+              ) : (
+                <span class="i-tabler-external-link w-4 h-3" />
+              )}
+            </a>
+          ))}
+        </div>
+      )
+    }
+
+    <div class="date opacity-50">
       {
         date.toLocaleString("en-US", {
           month: "long",
@@ -34,51 +49,18 @@ const path = useTranslatedPath(Astro.url);
     </div>
   </div>
   <article class={`layout-${_layout} flex flex-col gap-4`}>
-    <div class="mb-4 flex flex-col gap-4">
+    <div class="mb-4 flex flex-col gap-1">
       <h1 class="text-4xl">
         {title}
       </h1>
 
       <div class="toc"></div>
-
-      {
-        links?.length && (
-          <div class="flex gap-4">
-            {links.map(([title, url]: string[]) => (
-              <a href={url} class="flex external items-center gap-[4px]">
-                {title}
-                {title === "git" ? (
-                  <span class="i-tabler-brand-git w-4 h-4" />
-                ) : (
-                  <span class="i-tabler-external-link w-4 h-3" />
-                )}
-              </a>
-            ))}
-          </div>
-        )
-      }
     </div>
     <slot />
   </article>
 </Layout>
 
 <style>
-  article :global(h2) {
-    @apply text-3xl;
-  }
-
-  article :global(h3) {
-    @apply text-2xl;
-  }
-
-  article :global(h4) {
-    @apply text-xl;
-  }
-
-  article :global(img) {
-    border-radius: 0.5rem;
-  }
-
   article.layout-transparent {
     padding: 20px;
     background: var(--background);

src/pages/blog/[slug].astro

@@ -32,6 +32,6 @@ if (!page) {
 const { Content } = await page.render();
 ---
 
-<Post {...page}>
+<Post {...page} backlink="/blog">
   <Content />
 </Post>