feat: track images with git lfs

src/layouts/Post.astro

@@ -1,20 +1,63 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import Layout from "./Layout.astro";
+import { useTranslatedPath } from "@i18n/utils";
+import { getLocale } from "astro-i18n-aut";
 
 type Props = CollectionEntry<"blog">["data"];
 
-const { title } = Astro.props;
+const { title, date } = Astro.props;
+const path = useTranslatedPath(getLocale(Astro.url));
 ---
 
 <Layout title={title}>
   <article>
-    <div class="prose">
-      <div class="title">
-        <h1>{title}</h1>
-        <hr />
+    <div class="top-info">
+      <a href={path("/blog")}>← overview</a>
+      <div class="date">
+        {
+          date.toLocaleString("en-US", {
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+          })
+        }
       </div>
-      <slot />
     </div>
+    <h1>{title}</h1>
+    <slot />
   </article>
 </Layout>
+
+<style>
+  article {
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+    background: var(--background);
+  }
+
+  .top-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1em;
+    color: var(--outline);
+  }
+
+  .top-info a {
+    text-decoration: none;
+    color: var(--outline);
+  }
+
+  article :global(p) {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  article :global(img) {
+    margin-bottom: 2em;
+  }
+</style>