From ff96ee6ace6f84850697dd520d9d6afe8d20634b Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 26 Aug 2025 18:00:27 +0800
Subject: [PATCH] Updated background component

---
 .../Background/Background.tsx                 | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/builtin-components/Background/Background.tsx b/src/builtin-components/Background/Background.tsx
index 40d93c7..e27992d 100644
--- a/src/builtin-components/Background/Background.tsx
+++ b/src/builtin-components/Background/Background.tsx
@@ -1,21 +1,40 @@
 import './Background.sass'
-import { Show } from 'solid-js'
-import backgroundAvif from '../../assets/images/background.avif'
-import backgroundWebp from '../../assets/images/background.webp'
+import { Show, createSignal } from 'solid-js'
+// import backgroundAvif from '../../assets/images/background.avif'
+// import backgroundWebp from '../../assets/images/background.webp'
+import sharp from 'sharp'
+import fs from 'fs'
 
 interface Props {
   image?: boolean
   color?: string
 }
 
+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)
+  }
+}
+
 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={backgroundAvif.src} type="image/avif" />
-          <source srcset={backgroundWebp.src} type="image/webp" />
-          <img src={backgroundWebp.src} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+          <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" />
         </picture>
       </Show>