package.json

@@ -7,7 +7,7 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "test": "playwright clear-cache && playwright test"
+    "test": "playwright test"
   },
   "dependencies": {
     "@astrojs/solid-js": "^5.1.0",

src/builtin-components/Background/Background.tsx

@@ -1,40 +1,21 @@
 import './Background.sass'
-import { Show, createSignal } from 'solid-js'
+import { Show } from 'solid-js'
-// import backgroundAvif from '../../assets/images/background.avif'
+import backgroundAvif from '../../assets/images/background.avif'
-// import backgroundWebp from '../../assets/images/background.webp'
+import backgroundWebp from '../../assets/images/background.webp'
-import sharp from 'sharp'
-import fs from 'fs'
 
 interface Props {
   image?: boolean
   color?: string
 }
 
-const convertBackground = async (props: Props) => {
-  const webpOutputPath = 'src/assets/compressed-images/background.webp'
-  const avifOutputPath = 'src/assets/compressed-images/background.avif'
-  const inputPath = 'src/assets/images/background.png'
-
-  if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
-    const webpBuffer = await sharp(inputPath).webp({ quality: 75 }).resize(1920).toBuffer()
-    await sharp(webpBuffer).toFile(webpOutputPath)
-
-    const avifBuffer = await sharp(inputPath).avif({ quality: 60 }).resize(1920).toBuffer()
-    await sharp(avifBuffer).toFile(avifOutputPath)
-  }
-}
-
 export default (props: Props) => {
-  let [imageSrc] = createSignal('src/assets/compressed-images/background.webp')
-  convertBackground(props)
-
   return (
     <>
       <Show when={props.image}>
         <picture class="fullscreen">
-          <source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" />
+          <source srcset={backgroundAvif.src} type="image/avif" />
-          <source srcset={imageSrc()} type="image/webp" />
+          <source srcset={backgroundWebp.src} type="image/webp" />
-          <img src={imageSrc()} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+          <img src={backgroundWebp.src} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
         </picture>
       </Show>
 

src/builtin-components/Button/Button.sass

@@ -10,7 +10,7 @@
   text-align: center
   text-decoration: none
   display: inline-block
-  font-size: 0.75rem
+  font-size: 1rem
   font-weight: 700
   cursor: pointer
   transition: all 0.2s ease-out

src/builtin-components/Image/Image.tsx

@@ -1,6 +1,4 @@
 import sharp from 'sharp'
-import { createSignal } from 'solid-js'
-import fs from 'fs'
 
 interface Props {
   src: string
@@ -9,28 +7,22 @@ interface Props {
 }
 
 const convertImage = async (props: Props) => {
-  const webpOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`
+  const webp = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
-  const avifOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  await sharp(webp).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
 
-  if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
+  const avif = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
-    const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(avif).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`)
-    await sharp(webpBuffer).toFile(webpOutputPath)
-
-    const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
-    await sharp(avifBuffer).toFile(avifOutputPath)
-  }
 }
 
 export default (props: Props) => {
-  let [imageSrc] = createSignal(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
   convertImage(props)
 
   return (
     <>
-      <picture >
+      <picture class="fullscreen">
-        <source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" />
+        <source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`} type="image/avif" />
-        <source srcset={imageSrc()} type="image/webp" />
+        <source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} type="image/webp" />
-        <img src={imageSrc()} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+        <img src={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
       </picture>
     </>
   )

src/builtin-components/Link/Link.tsx

@@ -1,9 +1,11 @@
+
 interface Props {
   to: string
   children?: any
 }
 
 export default (props: Props) => {
+
   return (
     <>
       <a href={props.to} aria-label={`Go to ${props.to}`}>

src/components/Counter.sass

@@ -1,47 +0,0 @@
-.counter
-  display: flex
-  flex-direction: column
-  align-items: center
-  gap: 1rem
-  margin: 2rem
-  color: white
-  border: 1px solid rgba(22, 34, 60, 0.5)
-  padding: 1rem 2rem
-  border-radius: 16px
-  background: rgba(134, 152, 217, 0.1)
-
-  &__display
-    font-size: 1.75rem
-    font-weight: bold
-
-  &__buttons
-    display: flex
-    justify-content: center
-    gap: 0.25rem
-
-    // &:hover
-    // background: color.adjust(vars.$primaryColor, $blackness: 20%)
-
-
-  &__decrement
-    width: 2rem
-    height: 2.25rem
-    padding: auto
-    font-size: 1rem
-    font-weight: bold
-    cursor: pointer
-    text-decoration: none
-    background-color: rgba(86, 14, 14, 0.915)
-    border-radius: 8px
-    color: white
-    border: 1px solid rgba(255,255,255,0.2)
-
-    &:active
-      transform: scale(0.95)
-
-  &__increment
-    @extend .counter__decrement
-    background-color: rgb(14, 42, 86, 0.915)
-
-    &:active
-      transform: scale(0.95)

src/components/Counter.tsx

@@ -1,30 +0,0 @@
-import './Counter.sass'
-import { createSignal } from 'solid-js'
-
-let [count, setCount] = createSignal(0)
-
-const increment = () => {
-  setCount(count() + 1)
-}
-
-const decrement = () => {
-  setCount(count() - 1)
-}
-
-export default () => {
-  return (
-    <>
-      <section class="counter">
-        <div class="counter__display">{count()}</div>
-        <div class="counter__buttons">
-          <button class="counter__decrement" onClick={decrement}>
-            -
-          </button>
-          <button class="counter__increment" onClick={increment}>
-            +
-          </button>
-        </div>
-      </section>
-    </>
-  )
-}

src/pages/index.astro

@@ -2,18 +2,15 @@
 import Layout from '../layouts/Layout.astro'
 import Button from '../builtin-components/Button/Button.tsx'
 import Image from '../builtin-components/Image/Image'
-import Link from '../builtin-components/Link/Link'
-import Counter from '../components/Counter.tsx'
 ---
 
-<Layout title="FWT">
+<Layout title="Home">
   <main class="page">
-    <Link to="https://git.patalcala.com/patalcala9/fwt">
+    <!-- <section class="image"> -->
       <Image src="fwt.png" size={250} />
-    </Link>
+    <!-- </section> -->
 
     <h1>Fast WebApp Template</h1>
-    <Counter client:load/>
     <Button label="Next Page" to="/next" />
   </main>
 
@@ -27,5 +24,7 @@ import Counter from '../components/Counter.tsx'
       align-content: center
       margin: 2rem
       height: 90vh
+
+    
   </style>
 </Layout>