From 55b56d4d1a23ee3ff5768190fc3a184ca6ad7e71 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 28 Aug 2025 17:40:06 +0800 Subject: [PATCH 1/5] Updated gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index cb8cc80..07f94c5 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,6 @@ pnpm-debug.log* /playwright-report/ /blob-report/ /playwright/.cache/ + +# Custom +src/assets/ From 4e33f96a447e2a364df8f2869565ac47c38fbf03 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 28 Aug 2025 17:41:03 +0800 Subject: [PATCH 2/5] Removed unnecessary props --- src/templates/components/Optimizer/OptimizeLogo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/templates/components/Optimizer/OptimizeLogo.tsx b/src/templates/components/Optimizer/OptimizeLogo.tsx index fb39b0d..83172d8 100644 --- a/src/templates/components/Optimizer/OptimizeLogo.tsx +++ b/src/templates/components/Optimizer/OptimizeLogo.tsx @@ -2,7 +2,6 @@ import sharp from 'sharp' interface Props { size?: number - alt?: string } const convertLogo = async (props: Props) => { From bf6570cad7fed4bd5665d3209a68c21e2ffb8fff Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 28 Aug 2025 17:41:24 +0800 Subject: [PATCH 3/5] Added converted sample image --- src/templates/images/sample.avif | Bin 0 -> 3017 bytes src/templates/images/sample.webp | Bin 0 -> 3978 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/templates/images/sample.avif create mode 100644 src/templates/images/sample.webp diff --git a/src/templates/images/sample.avif b/src/templates/images/sample.avif new file mode 100644 index 0000000000000000000000000000000000000000..78c62db8e9a25d314aded7d0bd30e050e076a817 GIT binary patch literal 3017 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 kpgbYnVGExm1gW|D5pF literal 0 HcmV?d00001 From 3600f46d03040744c9bdd70b450c2cef4cad8cc2 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 28 Aug 2025 17:41:40 +0800 Subject: [PATCH 4/5] Fixed optimzied images --- .../components/Optimizer/OptimizeImage.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/templates/components/Optimizer/OptimizeImage.tsx diff --git a/src/templates/components/Optimizer/OptimizeImage.tsx b/src/templates/components/Optimizer/OptimizeImage.tsx new file mode 100644 index 0000000..4edf349 --- /dev/null +++ b/src/templates/components/Optimizer/OptimizeImage.tsx @@ -0,0 +1,21 @@ +import sharp from 'sharp' + +interface Props { + src: string + size?: number +} + +const convertImage = async (props: Props) => { + const avifOutputPath = `src/templates/images/${props.src.split('.').slice(0, -1).join('.')}.avif` + const webpOutputPath = `src/templates/images/${props.src.split('.').slice(0, -1).join('.')}.webp` + + 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) => { + convertImage(props) +} From 4cb2af8e9d54ffed5db48c6a56eeb87676ae6e6e Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 28 Aug 2025 17:41:46 +0800 Subject: [PATCH 5/5] Updated --- src/pages/next.astro | 16 +++++++++----- src/templates/components/Image/Image.tsx | 28 +++++------------------- 2 files changed, 15 insertions(+), 29 deletions(-) diff --git a/src/pages/next.astro b/src/pages/next.astro index e6c1c0f..587781a 100644 --- a/src/pages/next.astro +++ b/src/pages/next.astro @@ -3,18 +3,22 @@ import Layout from '../layouts/Layout.astro' import Button from '../templates/components/Button/Button.tsx' import Image from '../templates/components/Image/Image' import Page from '../templates/components/Page/Page' +import sampleA from '../templates/images/sample.avif' +import sampleW from '../templates/images/sample.avif' +import OptimizeImage from '../templates/components/Optimizer/OptimizeImage' --- - +

Built-in Components

-