PatAlcala9/fwt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-08-28 17:41:46 +08:00
parent 3600f46d03
commit 4cb2af8e9d
2 changed files with 15 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/pages/next.astro
View file

@ -3,18 +3,22 @@ import Layout from '../layouts/Layout.astro'
import Button from '../templates/components/Button/Button.tsx' import Button from '../templates/components/Button/Button.tsx'
import Image from '../templates/components/Image/Image' import Image from '../templates/components/Image/Image'
import Page from '../templates/components/Page/Page' 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'
--- ---
<Layout title="Home"> <Layout title="Home">
<Page alignment='column'> <Page alignment="column">
<h1>Built-in Components</h1> <h1>Built-in Components</h1>
<Button edges='rounded' label="Back to Home" to="/" /> <Button edges="rounded" label="Back to Home" to="/" />
<section class="image"> <section class="image">
<Image src="sample.png" alt="Example Image" size={400} /> <!-- <OptimizeImage src="sample.png" size={400} /> -->
<Image src="sample.png" alt="Example Image" size={400} /> <Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
<Image src="sample.png" alt="Example Image" size={400} /> <Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
<Image src="sample.png" alt="Example Image" size={400} /> <Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
<Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
</section> </section>
</Page> </Page>
</Layout> </Layout>

28
src/templates/components/Image/Image.tsx
View file

@ -1,35 +1,17 @@
import sharp from 'sharp'
import fs from 'fs'
interface Props { interface Props {
src: string avif: string
webp: string
size?: number size?: number
alt?: string alt?: string
} }
const convertImage = async (props: Props) => {
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 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) => { export default (props: Props) => {
const imageSrc = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
convertImage(props)
return ( return (
<> <>
<picture> <picture>
<source srcset={imageSrc.replace(/\.webp$/, '.avif')} type="image/avif" /> <source srcset={props.avif} type="image/avif" />
<source srcset={imageSrc} type="image/webp" /> <source srcset={props.webp} type="image/webp" />
<img src={imageSrc} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} /> <img width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
</picture> </picture>
</> </>
) )