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

Improved components

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-08-28 11:39:25 +08:00
parent cdffb7038b
commit 4d1b3589b6
2 changed files with 18 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/templates/Background/Background.tsx
View file

@ -1,7 +1,5 @@
import './Background.sass' import './Background.sass'
import { Show, createSignal } from 'solid-js' import { Show } from 'solid-js'
// import backgroundAvif from '../../assets/images/background.avif'
// import backgroundWebp from '../../assets/images/background.webp'
import sharp from 'sharp' import sharp from 'sharp'
import fs from 'fs' import fs from 'fs'
@ -10,31 +8,31 @@ interface Props {
color?: string color?: string
} }
const webpOutputPath = 'src/assets/optimized/background.webp'
const avifOutputPath = 'src/assets/optimized/background.avif'
const convertBackground = async (props: Props) => { 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' const inputPath = 'src/assets/images/background.png'
if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) { 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() const avifBuffer = await sharp(inputPath).avif({ quality: 60 }).resize(1920).toBuffer()
await sharp(avifBuffer).toFile(avifOutputPath) 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) => { export default (props: Props) => {
let [imageSrc] = createSignal('src/assets/compressed-images/background.webp')
convertBackground(props) convertBackground(props)
return ( return (
<> <>
<Show when={props.image}> <Show when={props.image}>
<picture class="fullscreen"> <picture class="fullscreen">
<source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" /> <source srcset={avifOutputPath} type="image/avif" />
<source srcset={imageSrc()} type="image/webp" /> <source srcset={webpOutputPath} type="image/webp" />
<img src={imageSrc()} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" /> <img src={webpOutputPath} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
</picture> </picture>
</Show> </Show>

17
src/templates/Image/Image.tsx
View file

@ -1,5 +1,4 @@
import sharp from 'sharp' import sharp from 'sharp'
import { createSignal } from 'solid-js'
import fs from 'fs' import fs from 'fs'
interface Props { interface Props {
@ -9,28 +8,28 @@ interface Props {
} }
const convertImage = async (props: 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 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)) { 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() const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
await sharp(avifBuffer).toFile(avifOutputPath) 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) => {
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) convertImage(props)
return ( return (
<> <>
<picture> <picture>
<source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" /> <source srcset={imageSrc.replace(/\.webp$/, '.avif')} type="image/avif" />
<source srcset={imageSrc()} type="image/webp" /> <source srcset={imageSrc} type="image/webp" />
<img src={imageSrc()} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} /> <img src={imageSrc} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
</picture> </picture>
</> </>
) )