src/content/blog/20241219-mandelbrot-opengl.md

@@ -0,0 +1,7 @@
+---
+title: 'Mandelbrot Set rendered with OpenGL'
+description: 'Rendering the Mandelbrot Set in OpenGL.'
+pubDate: 'Dec 19 2024'
+heroImage: 'https://placehold.co/600x400'
+---
+

src/pages/blog/index.astro

@@ -1,13 +1,14 @@
 ---
-import BaseHead from '../../components/BaseHead.astro';
+import BaseHead from "../../components/BaseHead.astro";
-import Header from '../../components/Header.astro';
+import Header from "../../components/Header.astro";
-import Footer from '../../components/Footer.astro';
+import Footer from "../../components/Footer.astro";
-import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
+import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
-import { getCollection } from 'astro:content';
+import { getCollection } from "astro:content";
-import FormattedDate from '../../components/FormattedDate.astro';
+import FormattedDate from "../../components/FormattedDate.astro";
+import { Image } from "astro:assets";
 
-const posts = (await getCollection('blog')).sort(
+const posts = (await getCollection("blog")).sort((a, b) =>
-	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+    a.data.pubDate.valueOf() < b.data.pubDate.valueOf() ? 1 : -1,
 );
 ---
 
@@ -94,10 +95,19 @@ const posts = (await getCollection('blog')).sort(
                         posts.map((post) => (
                             <li>
                                 <a href={`/blog/${post.slug}/`}>
-									<img width={720} height={360} src={post.data.heroImage} alt="" />
+                                    {post.data.heroImage &&
+                                    <Image
+                                        width={720}
+                                        height={360}
+                                        src={post.data.heroImage}
+                                        loading=eager
+                                        alt=""
+                                        />}
                                     <h4 class="title">{post.data.title}</h4>
                                     <p class="date">
-										<FormattedDate date={post.data.pubDate} />
+                                        <FormattedDate
+                                            date={post.data.pubDate}
+                                        />
                                     </p>
                                 </a>
                             </li>