Changed from astro to pure solidjs

src/components/Optimizers/OptimizeBackground.tsx

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const convertBackground = async () => {
+  const inputSrc = 'src/assets/images/background.png'
+  const webpOutput = 'src/assets/images/optimized/background.webp'
+  const avifOutput = 'src/assets/images/optimized/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()
+}

src/components/Optimizers/OptimizeImage.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+}
+
+const convertImage = async (props: Props) => {
+  const avifOutputPath = `src/assets/images/optimized/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `src/assets/images/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
+
+  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutputPath)
+
+  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutputPath)
+}
+
+export default (props: Props) => {
+  convertImage(props)
+}

src/components/Optimizers/OptimizeLogo.tsx

@@ -0,0 +1,45 @@
+import sharp from 'sharp'
+import { Image } from '../index'
+
+interface Props {
+  size?: number
+  favicon?: boolean
+}
+
+export default (props: Props) => {
+  const webpImage = 'src/assets/images/optimized/logo.webp'
+  const avifImage = 'src/assets/images/optimized/logo.avif'
+  const inputSrc = 'src/assets/images/logo.png'
+
+  const convertLogo = async (props: Props) => {
+    // const webpImage = 'src/assets/images/optimized/logo.webp'
+    // const avifImage = 'src/assets/images/optimized/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)
+  }
+
+  const generateFavicon = async () => {
+    const inputSrc = 'src/assets/images/logo.png'
+    const favicon = 'public/favicon.png'
+
+    const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
+    await sharp(faviconBuffer).toFile(favicon)
+  }
+
+  convertLogo(props)
+
+  if (props.favicon) {
+    generateFavicon()
+  }
+
+  return (
+    <>
+      {/* <Image avif={avifImage} webp={webpImage} size={props.size}></Image> */}
+      <h1>Hello</h1>
+    </>
+  )
+}