50 lines
1.3 KiB
Text
50 lines
1.3 KiB
Text
---
|
|
import * as fs from 'fs'
|
|
import webpPath from '../images/background.webp'
|
|
import avifPath from '../images/background.avif'
|
|
import noBackground from '../images/no-background.webp'
|
|
|
|
interface Props {
|
|
image?: boolean
|
|
}
|
|
|
|
const { image } = Astro.props
|
|
|
|
let imageLoaded = false
|
|
|
|
const checkBackground = () => {
|
|
if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
|
|
imageLoaded = true
|
|
} else {
|
|
imageLoaded = false
|
|
}
|
|
}
|
|
|
|
checkBackground()
|
|
---
|
|
|
|
{
|
|
image &&
|
|
(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>
|
|
) : (
|
|
<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>
|
|
))
|
|
}
|
|
|
|
<style lang="sass">
|
|
@use '../../configs/design/site.sass' as design
|
|
|
|
:root
|
|
color-scheme: light dark
|
|
background-color: light-dark(design.$light-background, design.$dark-background)
|
|
transition: background-color 0.6s ease-out
|
|
</style>
|