diff --git a/src/assets/images/background1.png b/src/assets/images/background1.png
new file mode 100644
index 0000000..da8aba0
Binary files /dev/null and b/src/assets/images/background1.png differ
diff --git a/src/assets/images/fwt.png b/src/assets/images/logo.png
similarity index 100%
rename from src/assets/images/fwt.png
rename to src/assets/images/logo.png
diff --git a/src/assets/optimized/background.avif b/src/assets/optimized/background.avif
deleted file mode 100644
index 70acab9..0000000
Binary files a/src/assets/optimized/background.avif and /dev/null differ
diff --git a/src/assets/optimized/background.webp b/src/assets/optimized/background.webp
deleted file mode 100644
index 5ab4880..0000000
Binary files a/src/assets/optimized/background.webp and /dev/null differ
diff --git a/src/assets/optimized/sample.avif b/src/assets/optimized/sample.avif
deleted file mode 100644
index 78c62db..0000000
Binary files a/src/assets/optimized/sample.avif and /dev/null differ
diff --git a/src/assets/optimized/sample.webp b/src/assets/optimized/sample.webp
deleted file mode 100644
index 0cb2279..0000000
Binary files a/src/assets/optimized/sample.webp and /dev/null differ
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e964c50..c2cc0e2 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,21 +4,21 @@ const { title } = Astro.props
const websiteName = 'Template'
const websiteDescription = 'This is just a template.'
-import Background from '../templates/Background/Background'
+import Background from '../templates/components/Background/Background'
---
-
+
{title}
-
+
diff --git a/src/templates/Background/Background.tsx b/src/templates/Background/Background.tsx
deleted file mode 100644
index c55c9c5..0000000
--- a/src/templates/Background/Background.tsx
+++ /dev/null
@@ -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 (
- <>
-
-
-
-
- 
-
-
-
-
-
-
-
- )
-}
diff --git a/src/templates/Background/Background.sass b/src/templates/components/Background/Background.sass
similarity index 100%
rename from src/templates/Background/Background.sass
rename to src/templates/components/Background/Background.sass
diff --git a/src/templates/components/Background/Background.tsx b/src/templates/components/Background/Background.tsx
new file mode 100644
index 0000000..e33e37d
--- /dev/null
+++ b/src/templates/components/Background/Background.tsx
@@ -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 (
+ <>
+
+
+
+
+
+
+ ![An image background]()
+
+
+
+
+
+ ![An alternative background if found no image background]()
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/templates/Button/Button.sass b/src/templates/components/Button/Button.sass
similarity index 100%
rename from src/templates/Button/Button.sass
rename to src/templates/components/Button/Button.sass
diff --git a/src/templates/Button/Button.tsx b/src/templates/components/Button/Button.tsx
similarity index 98%
rename from src/templates/Button/Button.tsx
rename to src/templates/components/Button/Button.tsx
index 156b29f..61b7e7a 100644
--- a/src/templates/Button/Button.tsx
+++ b/src/templates/components/Button/Button.tsx
@@ -1,4 +1,3 @@
-import { boolean } from 'astro:schema'
import './Button.sass'
import { Show, Switch, Match } from 'solid-js'
diff --git a/src/templates/Image/Image.tsx b/src/templates/components/Image/Image.tsx
similarity index 100%
rename from src/templates/Image/Image.tsx
rename to src/templates/components/Image/Image.tsx
diff --git a/src/templates/Link/Link.tsx b/src/templates/components/Link/Link.tsx
similarity index 100%
rename from src/templates/Link/Link.tsx
rename to src/templates/components/Link/Link.tsx
diff --git a/src/templates/components/Logo/Logo.tsx b/src/templates/components/Logo/Logo.tsx
new file mode 100644
index 0000000..d293b1a
--- /dev/null
+++ b/src/templates/components/Logo/Logo.tsx
@@ -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 (
+ <>
+
+
+
+ ![logo]()
+
+
+ )
+}
diff --git a/src/templates/components/Optimizer/OptimizeBackground.tsx b/src/templates/components/Optimizer/OptimizeBackground.tsx
new file mode 100644
index 0000000..2c004f5
--- /dev/null
+++ b/src/templates/components/Optimizer/OptimizeBackground.tsx
@@ -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()
+}
diff --git a/src/templates/components/Optimizer/OptimizeLogo.tsx b/src/templates/components/Optimizer/OptimizeLogo.tsx
new file mode 100644
index 0000000..fb39b0d
--- /dev/null
+++ b/src/templates/components/Optimizer/OptimizeLogo.tsx
@@ -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)
+}
diff --git a/src/templates/Page/Page.sass b/src/templates/components/Page/Page.sass
similarity index 100%
rename from src/templates/Page/Page.sass
rename to src/templates/components/Page/Page.sass
diff --git a/src/templates/Page/Page.tsx b/src/templates/components/Page/Page.tsx
similarity index 100%
rename from src/templates/Page/Page.tsx
rename to src/templates/components/Page/Page.tsx
diff --git a/src/templates/images/background.avif b/src/templates/images/background.avif
new file mode 100644
index 0000000..c002cfe
Binary files /dev/null and b/src/templates/images/background.avif differ
diff --git a/src/templates/images/background.webp b/src/templates/images/background.webp
new file mode 100644
index 0000000..c10b40b
Binary files /dev/null and b/src/templates/images/background.webp differ
diff --git a/src/assets/optimized/fwt.avif b/src/templates/images/logo.avif
similarity index 100%
rename from src/assets/optimized/fwt.avif
rename to src/templates/images/logo.avif
diff --git a/src/assets/optimized/fwt.webp b/src/templates/images/logo.webp
similarity index 100%
rename from src/assets/optimized/fwt.webp
rename to src/templates/images/logo.webp
diff --git a/src/templates/images/no-background.webp b/src/templates/images/no-background.webp
new file mode 100644
index 0000000..87c7f4c
Binary files /dev/null and b/src/templates/images/no-background.webp differ