Compare commits
7 commits
4d1b3589b6
...
c42380f537
| Author | SHA1 | Date | |
|---|---|---|---|
| c42380f537 | |||
| 39d01e7a55 | |||
| 0e6ed89a08 | |||
| e91d0c8f35 | |||
| 8bae1b0bbb | |||
| 4664e26f2e | |||
| 23e8de15fd |
BIN
src/assets/images/background1.png
Normal file
|
After Width: | Height: | Size: 23 MiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before 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/Background/Background'
|
import Background from '../templates/components/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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
||||||
<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 color="#0c1b31" />
|
<Background image />
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
50
src/templates/components/Background/Background.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
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,4 +1,3 @@
|
||||||
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'
|
||||||
|
|
||||||
19
src/templates/components/Logo/Logo.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
17
src/templates/components/Optimizer/OptimizeBackground.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
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()
|
||||||
|
}
|
||||||
22
src/templates/components/Optimizer/OptimizeLogo.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
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)
|
||||||
|
}
|
||||||
BIN
src/templates/images/background.avif
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
src/templates/images/background.webp
Normal file
|
After Width: | Height: | Size: 84 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/templates/images/no-background.webp
Normal file
|
After Width: | Height: | Size: 11 KiB |