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

Updated background component

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-08-26 18:00:27 +08:00
parent aa50f18dc5
commit ff96ee6ace
1 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/builtin-components/Background/Background.tsx
View file

@ -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>