added ImageMod component for image optimization

src/layouts/components/AuthorCard.astro

@@ -1,6 +1,6 @@
 ---
 import { plainify } from "@/lib/utils/textConverter";
-import { Image } from "astro:assets";
+import ImageMod from "./ImageMod.astro";
 import Social from "./Social.astro";
 
 const { data } = Astro.props;
@@ -12,7 +12,7 @@ const { title, image, social } = data.data;
 >
   {
     image && (
-      <Image
+      <ImageMod
         class="mx-auto mb-6 rounded"
         src={image}
         alt={title}

src/layouts/components/BlogCard.astro

@@ -2,8 +2,8 @@
 import config from "@/config/config.json";
 import dateFormat from "@/lib/utils/dateFormat";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
-import { Image } from "astro:assets";
 import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";
+import ImageMod from "./ImageMod.astro";
 
 const {
   summary_length,
@@ -16,7 +16,7 @@ const { title, image, date, author, categories } = data.data;
 <div class="bg-body dark:bg-darkmode-body">
   {
     image && (
-      <Image
+      <ImageMod
         class="mb-6 w-full rounded"
         src={image}
         alt={title}

src/layouts/components/ImageMod.astro

@@ -0,0 +1,60 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+// Props interface for the component
+interface Props {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  loading?: "eager" | "lazy" | null | undefined;
+  decoding?: "async" | "auto" | "sync" | null | undefined;
+  format?: "auto" | "avif" | "jpeg" | "png" | "svg" | "webp";
+  class?: string;
+  style?: any;
+}
+
+// Destructuring Astro.props to get the component's props
+let {
+  src,
+  alt,
+  width,
+  height,
+  loading,
+  decoding,
+  class: className,
+  format,
+  style,
+} = Astro.props;
+
+src = `/public${src}`;
+
+// Glob pattern to load images from the /public/images folder
+const images = import.meta.glob("/public/images/**/*.{jpeg,jpg,png,gif}");
+
+// Check if the source path is valid
+const isValidPath = images[src] ? true : false;
+
+// Log a warning message in red if the image is not found
+!isValidPath &&
+  console.error(
+    `\x1b[31mImage not found - ${src}.\x1b[0m Make sure the image is in the /public/images folder.`,
+  );
+---
+
+{
+  isValidPath && (
+    <Image
+      src={images[src]() as Promise<{ default: ImageMetadata }>}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={loading}
+      decoding={decoding}
+      class={className}
+      format={format}
+      style={style}
+    />
+  )
+}

src/layouts/components/Logo.astro

@@ -1,6 +1,6 @@
 ---
 import config from "@/config/config.json";
-import { Image } from "astro:assets";
+import ImageMod from "./ImageMod.astro";
 
 const { src, srcDarkmode }: { src?: string; srcDarkmode?: string } =
   Astro.props;
@@ -27,7 +27,7 @@ const { theme_switcher }: { theme_switcher: boolean } = config.settings;
   {
     src || srcDarkmode || logo || logo_darkmode ? (
       <>
-        <Image
+        <ImageMod
           src={src ? src : logo}
           class={`inline-block ${theme_switcher && "dark:hidden"}`}
           width={logo_width.replace("px", "") * 2}
@@ -40,7 +40,7 @@ const { theme_switcher }: { theme_switcher: boolean } = config.settings;
           format="webp"
         />
         {theme_switcher && (
-          <Image
+          <ImageMod
             src={srcDarkmode ? srcDarkmode : logo_darkmode}
             class={"hidden dark:inline-block"}
             width={logo_width.replace("px", "") * 2}