refactor: use markdown layouts

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>