From 4d1b3589b6eb73ade53fad77eab25901c4256f35 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Thu, 28 Aug 2025 11:39:25 +0800
Subject: [PATCH] Improved components

---
 src/templates/Background/Background.tsx | 22 ++++++++++------------
 src/templates/Image/Image.tsx           | 17 ++++++++---------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/templates/Background/Background.tsx b/src/templates/Background/Background.tsx
index e27992d..c55c9c5 100644
--- a/src/templates/Background/Background.tsx
+++ b/src/templates/Background/Background.tsx
@@ -1,7 +1,5 @@
 import './Background.sass'
-import { Show, createSignal } from 'solid-js'
-// import backgroundAvif from '../../assets/images/background.avif'
-// import backgroundWebp from '../../assets/images/background.webp'
+import { Show } from 'solid-js'
 import sharp from 'sharp'
 import fs from 'fs'
 
@@ -10,31 +8,31 @@ interface Props {
   color?: string
 }
 
+const webpOutputPath = 'src/assets/optimized/background.webp'
+const avifOutputPath = 'src/assets/optimized/background.avif'
+
 const convertBackground = async (props: Props) => {
-  const webpOutputPath = 'src/assets/compressed-images/background.webp'
-  const avifOutputPath = 'src/assets/compressed-images/background.avif'
   const inputPath = 'src/assets/images/background.png'
 
   if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
-    const webpBuffer = await sharp(inputPath).webp({ quality: 75 }).resize(1920).toBuffer()
-    await sharp(webpBuffer).toFile(webpOutputPath)
-
     const avifBuffer = await sharp(inputPath).avif({ quality: 60 }).resize(1920).toBuffer()
     await sharp(avifBuffer).toFile(avifOutputPath)
+
+    const webpBuffer = await sharp(inputPath).webp({ quality: 75 }).resize(1920).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutputPath)
   }
 }
 
 export default (props: Props) => {
-  let [imageSrc] = createSignal('src/assets/compressed-images/background.webp')
   convertBackground(props)
 
   return (
     <>
       <Show when={props.image}>
         <picture class="fullscreen">
-          <source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" />
-          <source srcset={imageSrc()} type="image/webp" />
-          <img src={imageSrc()} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+          <source srcset={avifOutputPath} type="image/avif" />
+          <source srcset={webpOutputPath} type="image/webp" />
+          <img src={webpOutputPath} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
         </picture>
       </Show>
 
diff --git a/src/templates/Image/Image.tsx b/src/templates/Image/Image.tsx
index b59fb2a..bfb3b19 100644
--- a/src/templates/Image/Image.tsx
+++ b/src/templates/Image/Image.tsx
@@ -1,5 +1,4 @@
 import sharp from 'sharp'
-import { createSignal } from 'solid-js'
 import fs from 'fs'
 
 interface Props {
@@ -9,28 +8,28 @@ interface Props {
 }
 
 const convertImage = async (props: Props) => {
-  const webpOutputPath = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
   const avifOutputPath = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
 
   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)
+
+    const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutputPath)
   }
 }
 
 export default (props: Props) => {
-  let [imageSrc] = createSignal(`src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`)
+  const imageSrc = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
   convertImage(props)
 
   return (
     <>
       <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} />
+        <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>
     </>
   )