refactor: use markdown layouts

src/components/LanguagePicker.astro

@@ -16,14 +16,24 @@ function translatePath(lang: string) {
   return `/${[lang, ...split].join("/")}`;
 }
 
+const flags = {
+  de: "🇩🇪",
+  en: "🇬🇧",
+};
+
 const t = useTranslations(Astro.url);
 ---
 
-<ul>
+<ul class="flex items-center gap-4">
   {
     Object.entries(locales).map(([lang, label]) => (
       <li>
-        <a href={translatePath(lang)} data-astro-prefetch>
+        <a
+          class="flex gap-2 items-center"
+          href={translatePath(lang)}
+          data-astro-prefetch
+        >
+          <span class="text-xs">{flags[label as keyof typeof flags]}</span>
           {t(label as "de")}
         </a>
       </li>

src/content/projects/plantarium/index.mdx

@@ -6,6 +6,7 @@ featured: true
 links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
 tags: ["Web", "3D", "Svelte", "Node-Systeme"]
 draft: false
+toc: true
 ---
 
 # Einführung

src/layouts/Layout.astro

@@ -65,7 +65,9 @@ const { title, width = "compact" } = Astro.props;
         --neutral-000: #f1f1f4;
         --fill: #cb5a5a;
 
+        --border-radius-sm: 10px;
         --border-radius-md: 20px;
+        --border-radius-lg: 30px;
 
         --spacing-sm: 10px;
         --spacing-md: 20px;
@@ -99,15 +101,6 @@ const { title, width = "compact" } = Astro.props;
         --text: var(--neutral-100);
         --text-light: white;
       }
-
-      /* .dark .icon-tabler-sun, */
-      /* .light .icon-tabler-moon { */
-      /*   display: none; */
-      /* } */
-      /* .dark .icon-tabler-moon, */
-      /* .light .icon-tabler-sun { */
-      /*   display: block; */
-      /* } */
     </style>
     <script>
       (function () {
@@ -130,7 +123,9 @@ const { title, width = "compact" } = Astro.props;
     <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
       <slot />
     </main>
-    <LanguagePicker />
+    <footer>
+      <LanguagePicker />
+    </footer>
     <style>
       .layout-compact {
         max-width: 600px;

src/layouts/Post.astro

@@ -1,24 +1,31 @@
 ---
-import type { CollectionEntry } from "astro:content";
 import Layout from "./Layout.astro";
-import { useTranslatedPath } from "@i18n/utils";
+import { useTranslatedPath, useTranslations } from "@i18n/utils";
+import type { MarkdownLayoutProps } from "astro";
 
-type CustomProps = {
-  layout?: "normal" | "transparent";
-  backlink?: string;
-};
-type Props = CollectionEntry<"blog" | "photos" | "videos" | "projects"> &
-  CustomProps;
+type Props = MarkdownLayoutProps<{
+  title: string;
+  date: Date;
+  links?: string[][];
+  toc?: boolean;
+}>;
 
-const { data, backlink = "/" } = Astro.props;
-const { title, date, links, _layout } = data;
+const { frontmatter } = Astro.props;
+const t = useTranslations(Astro.url);
+const { title, url, date: dateString, links, toc } = frontmatter;
+const collection = url?.split("/")[2];
+const date = new Date(dateString);
 const path = useTranslatedPath(Astro.url);
+
+//@ts-ignore
+const backlinkContent = t(`nav.${collection}`).toLowerCase();
 ---
 
 <Layout title={title}>
   <div class="top-info flex items-center place-content-between m-y-2">
-    <a class="flex items-center gap-1 opacity-50" href={path(backlink)}
-      ><span class="i-tabler-arrow-left"></span> overview</a
+    <a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}
+      ><span class="i-tabler-arrow-left"></span>
+      {backlinkContent}</a
     >
 
     {
@@ -48,13 +55,11 @@ const path = useTranslatedPath(Astro.url);
       }
     </div>
   </div>
-  <article class={`layout-${_layout} flex flex-col gap-4`}>
+  <article class={`flex flex-col gap-4 ${toc ? "show-toc" : ""}`}>
     <div class="mb-4 flex flex-col gap-1">
       <h1 class="text-4xl">
         {title}
       </h1>
-
-      <div class="toc"></div>
     </div>
     <slot />
   </article>
@@ -65,4 +70,32 @@ const path = useTranslatedPath(Astro.url);
     padding: 20px;
     background: var(--background);
   }
+
+  article :global(picture) {
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+  }
+
+  article :global(.toc-post) {
+    display: none;
+  }
+
+  article.show-toc :global(.toc-post) {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  article :global(.toc-post > ol ol) {
+    margin-left: 20px;
+  }
+
+  @media (min-width: 1200px) {
+    :global(.toc-post) {
+      position: fixed;
+      top: 0;
+      height: 80vh;
+      left: 10px;
+    }
+  }
 </style>

src/pages/blog/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import Post from "@layouts/Post.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection, parseSlug } from "@i18n/utils";
 
@@ -32,6 +31,4 @@ if (!page) {
 const { Content } = await page.render();
 ---
 
-<Post {...page} backlink="/blog">
-  <Content />
-</Post>
+<Content />

src/pages/photos/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import Post from "@layouts/Post.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection, parseSlug } from "@i18n/utils";
 
@@ -32,6 +31,4 @@ if (!page) {
 const { Content } = await page.render();
 ---
 
-<Post {...page} backlink="/photos">
-  <Content />
-</Post>
+<Content />

src/pages/projects/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import Post from "@layouts/Post.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection, parseSlug } from "@i18n/utils";
 
@@ -32,6 +31,4 @@ if (!page) {
 const { Content } = await page.render();
 ---
 
-<Post {...page} backlink="/projects">
-  <Content />
-</Post>
+<Content />