Compare commits
No commits in common. "c42380f53702c5b838331bbd34b4c2b02705ca0f" and "4d1b3589b6eb73ade53fad77eab25901c4256f35" have entirely different histories.
c42380f537
...
4d1b3589b6
|
Before Width: | Height: | Size: 23 MiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
BIN
src/assets/optimized/background.avif
Normal file
|
After Width: | Height: | Size: 86 KiB |
BIN
src/assets/optimized/background.webp
Normal file
|
After Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
BIN
src/assets/optimized/sample.avif
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/optimized/sample.webp
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -4,21 +4,21 @@ const { title } = Astro.props
|
|||
const websiteName = 'Template'
|
||||
const websiteDescription = 'This is just a template.'
|
||||
|
||||
import Background from '../templates/components/Background/Background'
|
||||
import Background from '../templates/Background/Background'
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="name" content={websiteName} />
|
||||
<meta name="description" content={websiteDescription} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<Background image />
|
||||
<Background color="#0c1b31" />
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
44
src/templates/Background/Background.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import './Background.sass'
|
||||
import { Show } from 'solid-js'
|
||||
import sharp from 'sharp'
|
||||
import fs from 'fs'
|
||||
|
||||
interface Props {
|
||||
image?: boolean
|
||||
color?: string
|
||||
}
|
||||
|
||||
const webpOutputPath = 'src/assets/optimized/background.webp'
|
||||
const avifOutputPath = 'src/assets/optimized/background.avif'
|
||||
|
||||
const convertBackground = async (props: Props) => {
|
||||
const inputPath = 'src/assets/images/background.png'
|
||||
|
||||
if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
|
||||
const avifBuffer = await sharp(inputPath).avif({ quality: 60 }).resize(1920).toBuffer()
|
||||
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) => {
|
||||
convertBackground(props)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={props.image}>
|
||||
<picture class="fullscreen">
|
||||
<source srcset={avifOutputPath} type="image/avif" />
|
||||
<source srcset={webpOutputPath} type="image/webp" />
|
||||
<img src={webpOutputPath} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
|
||||
</picture>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.image}>
|
||||
<div style={{ background: props.color }} class="fullscreen" />
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { boolean } from 'astro:schema'
|
||||
import './Button.sass'
|
||||
import { Show, Switch, Match } from 'solid-js'
|
||||
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import './Background.sass'
|
||||
import { Show, createSignal } from 'solid-js'
|
||||
import fs from 'fs'
|
||||
import webpPath from '../../../templates/images/background.webp'
|
||||
import avifPath from '../../../templates/images/background.avif'
|
||||
import noBackground from '../../../templates/images/no-background.webp'
|
||||
|
||||
interface Props {
|
||||
image?: boolean
|
||||
color?: string
|
||||
}
|
||||
|
||||
let [imageLoaded, setImageLoaded] = createSignal(false)
|
||||
|
||||
const checkBackground = () => {
|
||||
if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
|
||||
setImageLoaded(true)
|
||||
} else {
|
||||
setImageLoaded(false)
|
||||
}
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
checkBackground()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={props.image}>
|
||||
<Show when={imageLoaded()}>
|
||||
<picture class="fullscreen">
|
||||
<source srcset={avifPath.src} type="image/avif" />
|
||||
<source srcset={webpPath.src} type="image/webp" />
|
||||
<source srcset={noBackground.src} type="image/webp" />
|
||||
<img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
|
||||
</picture>
|
||||
</Show>
|
||||
<Show when={!imageLoaded()}>
|
||||
<picture class="fullscreen">
|
||||
<source srcset={noBackground.src} type="image/webp" />
|
||||
<img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
|
||||
</picture>
|
||||
</Show>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.image}>
|
||||
<div style={{ background: props.color }} class="fullscreen" />
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import webpPath from '../../../templates/images/logo.webp'
|
||||
import avifPath from '../../../templates/images/logo.avif'
|
||||
|
||||
interface Props {
|
||||
size?: number
|
||||
alt?: string
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<picture>
|
||||
<source srcset={avifPath.src} type="image/avif" />
|
||||
<source srcset={webpPath.src} type="image/webp" />
|
||||
<img width={props.size} height="auto" decoding="async" loading="lazy" alt="logo" />
|
||||
</picture>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import sharp from 'sharp'
|
||||
|
||||
const convertBackground = async () => {
|
||||
const inputSrc = 'src/assets/images/background.png'
|
||||
const webpOutput = 'src/templates/images/background.webp'
|
||||
const avifOutput = 'src/templates/images/background.avif'
|
||||
|
||||
const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
|
||||
await sharp(avifBuffer).toFile(avifOutput)
|
||||
|
||||
const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
|
||||
await sharp(webpBuffer).toFile(webpOutput)
|
||||
}
|
||||
|
||||
export default () => {
|
||||
convertBackground()
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import sharp from 'sharp'
|
||||
|
||||
interface Props {
|
||||
size?: number
|
||||
alt?: string
|
||||
}
|
||||
|
||||
const convertLogo = async (props: Props) => {
|
||||
const inputSrc = 'src/assets/images/logo.png'
|
||||
const webpImage = 'src/templates/images/logo.webp'
|
||||
const avifImage = 'src/templates/images/logo.avif'
|
||||
|
||||
const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(props.size).toBuffer()
|
||||
await sharp(avifBuffer).toFile(avifImage)
|
||||
|
||||
const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(props.size).toBuffer()
|
||||
await sharp(webpBuffer).toFile(webpImage)
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
convertLogo(props)
|
||||
}
|
||||
|
Before Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 11 KiB |