Add Blog Posts to website

astro/src/components/blogs/BlogPost.astro

@@ -0,0 +1,39 @@
+---
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+
+interface Props {
+    blog: BlogPost;
+}
+
+const { blog } = Astro.props;
+---
+
+<div
+    id={`blog-${blog.id}`}
+    class="flex flex-row justify-center items-center"
+>
+    <div class="flex lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[67%] w-full">
+        <div class="flex flex-col gap-3">
+            <h1 class="font-semibold text-5xl">{blog.title}</h1>
+            <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                <CalendarIcon width={20} height={20} />
+                <div>{blog.date}</div>
+            </div>
+        </div>
+
+        <div>
+            <Image
+                src={getImageUrl(blog.searchEngine.thumbnail.url)}
+                width="1200"
+                height="630"
+                alt={blog.title}
+                class="rounded-2xl shadow-md object-cover"
+            />
+        </div>
+
+        <div set:html={markdownToHtml(blog.content)}></div>
+    </div>
+</div>

astro/src/pages/[...route].astro

@@ -8,6 +8,7 @@ import ProjectLayout from "@/layouts/ProjectLayout.astro";
 import BlogIndex from "@/components/blogs/BlogIndex.astro";
 import ProjectIndex from "@/components/projects/ProjectIndex.astro";
 import Webpage from "@/components/webpage/Webpage.astro";
+import BlogPost from "@/components/blogs/BlogPost.astro";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -92,7 +93,7 @@ console.log(page);
         tags: []
     }}>
         <Fragment slot="content">
-            <dib>BlogPost</dib>
+            <BlogPost blog={page.page} />
         </Fragment>
     </BlogLayout>
 ) }