From 067bd9141294cc9feb56ba41127a987e2fecc754 Mon Sep 17 00:00:00 2001
From: SkyfallWasTaken <mahadkalam1@proton.me>
Date: Sun, 7 Jul 2024 21:38:45 +0100
Subject: [PATCH] Formatting, use Image tag

---
 src/layouts/BlogPost.astro |  4 +++-
 src/pages/blog/index.astro | 21 ++++++++++++++-------
 tailwind.config.mjs        | 24 ++++++++++++------------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index c7efc67..a6768e2 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -4,6 +4,7 @@ import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import FormattedDate from "../components/FormattedDate.astro";
+import { Image } from "astro:assets";
 
 type Props = CollectionEntry<"blog">["data"];
 
@@ -38,10 +39,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
           <div class="w-[1/4] flex justify-center">
             {
               heroImage && (
-                <img
+                <Image
                   width={1280}
                   height={720}
                   src={heroImage}
+                  loading="eager"
                   class="article-banner my-10 aspect-ratio-[16/9] shadow-lg w-max rounded-lg"
                   alt=""
                 />
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 3bcc511..a489df1 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -5,6 +5,7 @@ import Footer from "../../components/Footer.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
 import { getCollection } from "astro:content";
 import FormattedDate from "../../components/FormattedDate.astro";
+import { Image } from "astro:assets";
 
 const posts = (await getCollection("blog")).sort(
   (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
@@ -25,13 +26,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}
-                    class="rounded-md mb-3"
-                    alt=""
-                  />
+                  {() => {
+                    if (post.data.heroImage) {
+                      return (
+                        <Image
+                          width={720}
+                          height={360}
+                          src={post.data.heroImage}
+                          class="rounded-md mb-3"
+                          alt=""
+                        />
+                      );
+                    }
+                  }}
                   <h4 class="text-2xl font-bold">{post.data.title}</h4>
                   <p class="text-text mb-2">{post.data.description}</p>
                   <p>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index e897245..3490616 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -6,22 +6,22 @@ export default {
       typography: ({ theme }) => ({
         DEFAULT: {
           css: {
-            '--tw-prose-body': theme('colors.pink[800]'),
-            '--tw-prose-headings': theme('colors.text'),
-            '--tw-prose-links': theme('colors.text'),
-            '--tw-prose-hr': theme('colors.pink[300]'),
-            '--tw-prose-quotes': theme('colors.text'),
-            '--tw-prose-kbd': theme("colors.text"),
+            "--tw-prose-body": theme("colors.pink[800]"),
+            "--tw-prose-headings": theme("colors.text"),
+            "--tw-prose-links": theme("colors.text"),
+            "--tw-prose-hr": theme("colors.pink[300]"),
+            "--tw-prose-quotes": theme("colors.text"),
+            "--tw-prose-kbd": theme("colors.text"),
 
-            '--tw-prose-quote-borders': theme('colors.pink[300]'),
-            '--tw-prose-captions': theme('colors.pink[700]'),
-            '--tw-prose-code': theme('colors.text'),
-            '--tw-prose-pre-code': theme('colors.text'),
-            '--tw-prose-pre-bg': theme('colors.pink[900]'),
+            "--tw-prose-quote-borders": theme("colors.pink[300]"),
+            "--tw-prose-captions": theme("colors.pink[700]"),
+            "--tw-prose-code": theme("colors.text"),
+            "--tw-prose-pre-code": theme("colors.text"),
+            "--tw-prose-pre-bg": theme("colors.pink[900]"),
           },
         },
       }),
-    }
+    },
   },
   plugins: [
     require("@catppuccin/tailwindcss")({