Add the Project and Blog index pages (no pagination just yet)

astro/src/components/blogs/BlogIndex.astro

@@ -1,9 +1,52 @@
 ---
+import { getAllPaginatedBlogs } from '@/content/blogs/blogs';
+import { getSettings } from '@/content/settings/settings';
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { getBlogRoute } from '@/lib/routing';
+import { Image } from 'astro:assets';
+
 interface Props {
     page: BlogIndex;
 }
 
 const { page } = Astro.props;
+const { pageNumber } = page;
+
+const settings = await getSettings();
+const blogs = await getAllPaginatedBlogs(settings, pageNumber);
 ---
 
-<div>Blog Index</div>
+<div
+    id={`blogindex-${pageNumber}`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
+    <div class="flex flex-col justify-center items-center gap-2.5">
+        <h1 class="text-5xl font-bold">{ settings.blog.title }</h1>
+        { settings.blog.subtext !== null && (
+            <div set:html={markdownToHtml(settings.blog.subtext)}></div>
+        ) }
+    </div>
+
+    <div class="grid grid-cols-2 gap-6">
+        { blogs.map((blog) => (
+            <a href={getBlogRoute(settings.blog, blog)} class={`flex flex-col gap-2`}>
+                <Image
+                    src={getImageUrl(blog.searchEngine.thumbnail.url)}
+                    alt={blog.title}
+                    class="flex rounded-2xl shadow-md w-full"
+                    width={600}
+                    height={315}
+                />
+                <div class="flex flex-col gap-1">
+                    <h4 class="font-semibold text-[28px]">{blog.title}</h4>
+                    <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>
+            </a>
+        )) }
+    </div>
+</div>