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 websiteName = 'Template'
|
||||||
const websiteDescription = 'This is just a template.'
|
const websiteDescription = 'This is just a template.'
|
||||||
|
|
||||||
import Background from '../templates/components/Background/Background'
|
import Background from '../templates/Background/Background'
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
<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="name" content={websiteName} />
|
||||||
<meta name="description" content={websiteDescription} />
|
<meta name="description" content={websiteDescription} />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="body">
|
<body id="body">
|
||||||
<Background image />
|
<Background color="#0c1b31" />
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 './Button.sass'
|
||||||
import { Show, Switch, Match } from 'solid-js'
|
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 |