migrate to astro

src/layouts/BlogPost.astro

@@ -0,0 +1,78 @@
+---
+import type { CollectionEntry } from "astro:content";
+import FormattedDate from "../components/FormattedDate.astro";
+import BaseLayout from "./BaseLayout.astro";
+import { Picture } from "astro:assets";
+
+type Props = CollectionEntry<"blog">["data"];
+
+const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+    <article>
+        <div class="hero-image">
+            {
+                heroImage && (
+                    <Picture src={heroImage} alt="" width={1020} height={510} />
+                )
+            }
+        </div>
+        <div class="prose">
+            <div class="title">
+                <div class="date">
+                    <FormattedDate date={pubDate} />
+                    {
+                        updatedDate && (
+                            <div class="last-updated-on">
+                                Last updated on{" "}
+                                <FormattedDate date={updatedDate} />
+                            </div>
+                        )
+                    }
+                </div>
+                <h1>{title}</h1>
+                <hr />
+            </div>
+            <slot />
+        </div>
+    </article>
+</BaseLayout>
+
+<style>
+    main {
+        width: calc(100% - 2em);
+        max-width: 100%;
+        margin: 0;
+    }
+    .hero-image {
+        width: 100%;
+    }
+    .hero-image img {
+        display: block;
+        margin: 0 auto;
+        border-radius: 12px;
+        box-shadow: var(--box-shadow);
+    }
+    .prose {
+        width: 768px;
+        max-width: calc(100% - 2em);
+        color: rgb(var(--gray-dark));
+    }
+    .title {
+        margin-bottom: 1em;
+        padding: 1em 0;
+        text-align: center;
+        line-height: 1;
+    }
+    .title h1 {
+        margin: 0 0 0.5em 0;
+    }
+    .date {
+        margin-bottom: 0.5em;
+        color: rgb(var(--gray));
+    }
+    .last-updated-on {
+        font-style: italic;
+    }
+</style>