migrate website to astro

src/pages/blog/[...slug].astro

@@ -0,0 +1,38 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import components from "@/components/mdx/wrapper";
+import formatDate from "@/utils/format-date";
+
+interface Props {
+    post: CollectionEntry<"blog">;
+}
+
+export async function getStaticPaths() {
+    const allBlogPosts = await getCollection(
+        "blog",
+        ({ data }) => data.draft !== true,
+    );
+
+    return allBlogPosts.map((post) => ({
+        params: { slug: post.slug },
+        props: { post },
+    }));
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+---
+
+<Layout title={post.data.title} description={post.data.description}>
+    <article class="prose prose-invert">
+        <h1>{post.data.title}</h1>
+        <Content components={{ ...components }} />
+        <hr />
+        <p>
+            <strong>Posted: </strong>
+            {post.data.date && formatDate(new Date(post.data.date))}
+        </p>
+    </article>
+</Layout>

src/pages/blog/index.astro

@@ -0,0 +1,32 @@
+---
+import PostItem from "@/components/post-item";
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+
+const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
+allPosts.sort(
+    (a, b) =>
+        Date.parse(b.data.date.toString()) - Date.parse(a.data.date.toString()),
+);
+---
+
+<Layout title="Blog" description="Check my projects.">
+    <section class="prose prose-invert">
+        <h1>Blog</h1>
+        <p>Long format about thoughts and other topics.</p>
+    </section>
+    <ul class="mt-4 flex flex-col gap-4">
+        {
+            allPosts.map((blogpost) => (
+                <li>
+                    <PostItem
+                        type="blog"
+                        slug={blogpost.slug}
+                        date={blogpost.data.date!}
+                        title={blogpost.data.title!}
+                    />
+                </li>
+            ))
+        }
+    </ul>
+</Layout>