feat: some stuff

Dockerfile

@@ -13,6 +13,7 @@ RUN npm install -g pnpm
 # Display installed versions
 RUN node --version && \
     npm --version && \
+    tar --version && \
     git --version && \
     git-lfs version && \
     pnpm --version

src/content/config.ts

@@ -7,7 +7,9 @@ const blogCollection = defineCollection({
     cover: image().refine((img) => img.width >= 720, {
       message: "Cover image must be at least 720 pixels wide!",
     }).optional(),
+    links: z.array(z.array(z.string())).optional(),
     coverAlt: z.string().optional(),
+    toc: z.boolean().optional(),
     description: z.string().optional(),
     icon: z.string().optional(),
     draft: z.boolean().optional(),

src/content/projects/invoice/index.mdx

@@ -4,13 +4,14 @@ date: 2023-08-21
 cover: ./images/bg.jpg
 icon: "/projects/invoice.svg"
 tags: ["sveltekit", "unocss", "prisma", "sqlite"]
-draft: true
+toc: true
 links:
   [
     ["live", "https://invoice.app.max-richter.dev"],
     ["git", "https://git.max-richter.dev/max/invoice"],
   ]
 ---
+
 In meiner Freizeit übernehme ich gerne kleinere Aufträge und erledige Botengänge, Aufbauten und Abholungen für andere.  
   
 Ein unvermeidlicher Bestandteil dieser Tätigkeiten ist das Erstellen von Rechnungen im PDF-Format. Anfangs habe ich mich dem manuellen Prozess hingegeben und die ersten Rechnungen in Figma erstellt. Doch wie es unter Programmierer*innen oft heißt:

src/content/projects/plantarium/index.mdx

@@ -5,13 +5,11 @@ cover: ./images/plantarium.png
 featured: true
 links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
 tags: ["Web", "3D", "Svelte", "Node-Systeme"]
-draft: true
+draft: false
 ---
 
 # Einführung
 
-Plantarium ist wohl das Hobby Projekt, mit dem ich am meisten Zeit verbracht habe. Als Waldorfschüler und Dorfkind ein bisschen Klischeemäßig, ich weiß, aber der Aufbau und die Ästhetik von Pflanzen haben mich schon immer begeistert. Außerdem bin ich bekennender [Blender](https://blender.org) (das 3D Programm) Fan und aus diesen beiden Interessen entstand dieses Projekt.
-
 Plantarium ist eine WebApp mit der Nutzer 3D Model von Pflanzen generieren können. Der erste Prototyp war innerhalb von zwei Wochen intensiver Arbeit fertig und sah ungefähr so aus:
 
 import ImageSlider from "@components/ImageSlider.svelte"

src/layouts/Post.astro

@@ -7,19 +7,22 @@ type CustomProps = {
   layout?: "normal" | "transparent";
   backlink?: string;
 };
-type Props = CollectionEntry<"blog">["data"] & CustomProps;
+type Props = CollectionEntry<"blog"> & CustomProps;
 
-const { title, date, _layout, backlink = "/blog" } = Astro.props;
+const { headings, data } = Astro.props;
+console.log(Astro.props);
+const { title, date, links, _layout, backlink = "/blog" } = data;
 const path = useTranslatedPath(Astro.url);
 ---
 
 <Layout title={title}>
   <div
-    class="top-info flex items-center place-content-between opacity-50 m-y-4"
+    class="top-info flex items-center place-content-between opacity-50 m-y-2"
   >
     <a class="flex items-center gap-1" href={path(backlink)}
       ><span class="i-tabler-arrow-left"></span> overview</a
     >
+
     <div class="date">
       {
         date.toLocaleString("en-US", {
@@ -30,8 +33,31 @@ const path = useTranslatedPath(Astro.url);
       }
     </div>
   </div>
-  <article class={`layout-${_layout} flex flex-col gap-2`}>
+  <article class={`layout-${_layout} flex flex-col gap-4`}>
-    <h1 class="text-4xl my-4">{title}</h1>
+    <div class="mb-4 flex flex-col gap-4">
+      <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>

src/pages/blog/[slug].astro

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

src/pages/photos/[slug].astro

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

src/pages/projects/[slug].astro

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