From 578af482d9e7e25009290cdfb7dd04f8251c4240 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 26 Aug 2025 17:59:33 +0800
Subject: [PATCH] Updated image component

---
 src/builtin-components/Image/Image.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/builtin-components/Image/Image.tsx b/src/builtin-components/Image/Image.tsx
index 7c897e6..438eae0 100644
--- a/src/builtin-components/Image/Image.tsx
+++ b/src/builtin-components/Image/Image.tsx
@@ -1,4 +1,6 @@
 import sharp from 'sharp'
+import { createSignal } from 'solid-js'
+import fs from 'fs'
 
 interface Props {
   src: string
@@ -7,22 +9,28 @@ interface Props {
 }
 
 const convertImage = async (props: Props) => {
-  const webp = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
-  await sharp(webp).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
+  const webpOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`
+  const avifOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`
 
-  const avif = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
-  await sharp(avif).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`)
+  if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
+    const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutputPath)
+
+    const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+    await sharp(avifBuffer).toFile(avifOutputPath)
+  }
 }
 
 export default (props: Props) => {
+  let [imageSrc] = createSignal(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
   convertImage(props)
 
   return (
     <>
-      <picture class="fullscreen">
-        <source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`} type="image/avif" />
-        <source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} type="image/webp" />
-        <img src={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+      <picture >
+        <source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" />
+        <source srcset={imageSrc()} type="image/webp" />
+        <img src={imageSrc()} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
       </picture>
     </>
   )