Updated

@dasig/Optimizers/OptimizeBackground.tsx

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

@dasig/Optimizers/OptimizeImage.tsx

@@ -1,21 +0,0 @@
-import sharp from 'sharp'
-
-interface Props {
-  src: string
-  size?: number
-}
-
-const convertImage = async (props: Props) => {
-  const avifOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.avif`
-  const webpOutputPath = `fwt/images/${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)
-}

@dasig/Optimizers/OptimizeLogo.tsx

@@ -1,34 +0,0 @@
-import sharp from 'sharp'
-
-interface Props {
-  size?: number
-  favicon?: boolean
-}
-
-const convertLogo = async (props: Props) => {
-  const inputSrc = 'src/assets/images/logo.png'
-  const webpImage = 'fwt/images/logo.webp'
-  const avifImage = 'fwt/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)
-}
-
-const generateFavicon = async (props: Props) => {
-  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)
-}
-
-export default (props: Props) => {
-  convertLogo(props)
-
-  if (props.favicon) {
-    generateFavicon(props)
-  }
-}

@dasig/components/Box.tsx

@@ -9,7 +9,7 @@ interface Props {
 }
 
 export default (props: Props) => {
-  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
+  const boxClass = createMemo(() => (props.curved ? 'dasig-curvedbox' : 'dasig-box'))
 
   return (
     <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>

@dasig/components/Button.tsx

@@ -40,7 +40,7 @@ export default (props: Props) => {
           </Match>
           <Match when={!props.design}>
             <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
-              <button class="button" style={borderRadius}>
+              <button class="dasig-button" style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </a>
@@ -65,13 +65,13 @@ export default (props: Props) => {
           </Match>
           <Match when={!props.design}>
             <Show when={props.submit}>
-              <button class="button" type="submit" style={borderRadius}>
+              <button class="dasig-button" type="submit" style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
-              <button class="button" onClick={props.onClick} style={borderRadius}>
+              <button class="dasig-button" onClick={props.onClick} style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>

@dasig/components/Column.tsx

@@ -10,7 +10,7 @@ interface Props {
 export default (props: Props) => {
   return (
     <>
-      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+      <section class={`dasig-column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
         {props.children}
       </section>
     </>

@dasig/components/Footer.tsx

@@ -8,7 +8,7 @@ interface Props {
 export default (props: Props) => {
   return (
     <>
-      <footer class="footer">
+      <footer class="dasig-footer">
         <small>{props.children}</small>
       </footer>
     </>

@dasig/components/Image.tsx

@@ -8,12 +8,10 @@ interface Props {
 
 export default (props: Props) => {
   return (
-    <>
+    <picture>
-      <picture>
+      <source srcset={props.avif} type="image/avif" />
-        <source srcset={props.avif} type="image/avif" />
+      <source srcset={props.webp} type="image/webp" />
-        <source srcset={props.webp} type="image/webp" />
+      <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
-        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+    </picture>
-      </picture>
-    </>
   )
 }

@dasig/components/Input.tsx

@@ -21,7 +21,7 @@ export default (props: Props) => {
 
   return (
     <>
-      <input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+      <input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
     </>
   )
 }

@dasig/components/Padding.tsx

@@ -1,4 +1,4 @@
-import { type JSXElement } from 'solid-js'
+import type { JSXElement } from 'solid-js'
 
 interface Props {
   left: number

@dasig/components/Page.tsx

@@ -3,7 +3,7 @@ import { Show } from 'solid-js'
 
 interface Props {
   children?: any
-  alignment?: 'row' | 'column'
+  alignment?: 'dasig-page-row' | 'dasig-page-column'
 }
 
 export default (props: Props) => {
@@ -13,7 +13,7 @@ export default (props: Props) => {
         <main class={props.alignment}>{props.children}</main>
       </Show>
       <Show when={!props.alignment}>
-        <main class="page">{props.children}</main>
+        <main class="dasig-page">{props.children}</main>
       </Show>
     </>
   )

@dasig/components/Row.tsx

@@ -11,13 +11,13 @@ export default (props: Props) => {
   return (
     <>
       <Show when={props.gap}>
-        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        <section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
           {props.children}
         </section>
       </Show>
 
       <Show when={!props.gap}>
-        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
+        <section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
       </Show>
     </>
   )

@dasig/index.ts

@@ -16,6 +16,6 @@ export { default as Display } from './components/Display'
 export { default as Padding } from './components/Padding'
 export { default as Modal } from './components/Modal'
 
-export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
-export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
-export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'
+// export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

@dasig/scripts/node/generateFavicon.ts

@@ -9,7 +9,7 @@ try {
   const config = toml.parse(fs.readFileSync("configs/config.site.toml", "utf8"));
 
 	if (fs.existsSync(dirPath)) {
-		const inputSrc = "./src/assets/images/favicon.png";
+		const inputSrc = "./src/images/favicon.png";
 		const favicon = dirPath + "/favicon.png";
 		const chrome192 = dirPath + "/android-chrome-192x192.png";
 		const chrome512 = dirPath + "/android-chrome-512x512.png";

@dasig/scripts/node/optimizeBackground.ts

@@ -0,0 +1,23 @@
+import { consola } from "consola";
+import sharp from "sharp";
+
+(async () => {
+	try {
+    const inputSrc = 'src/images/background.png'
+    const webpOutput = "./@dasig/images/background.webp"
+    const avifOutput = "./@dasig/images/background.avif"
+
+    const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
+    await sharp(avifBuffer).toFile(avifOutput)
+    consola.success('Background successfully optimized in Avif');
+
+    const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutput)
+    consola.success('Background successfully optimized in Webp');
+
+	} catch (error: any) {
+		consola.error("Error optimizing background:", error);
+		if (error.message.includes("missing"))
+			consola.error(`${name} could not be found on image folder`);
+	}
+})();

@dasig/scripts/node/optimizeImage.ts

@@ -26,14 +26,14 @@ import { hideBin } from "yargs/helpers";
 		const avifOutputPath = `./@dasig/images/${name.toString().split(".").slice(0, -1).join(".")}.avif`;
 		const webpOutputPath = `./@dasig/images/${name.toString().split(".").slice(0, -1).join(".")}.webp`;
 
-		const avifBuffer = await sharp(`./src/assets/images/${name}`)
+		const avifBuffer = await sharp(`./src/images/${name}`)
 			.avif({ quality: 60 })
 			.resize(size)
 			.toBuffer();
 		await sharp(avifBuffer).toFile(avifOutputPath);
 		consola.success(`${name} successfully optimized in Avif`);
 
-		const webpBuffer = await sharp(`./src/assets/images/${name}`)
+		const webpBuffer = await sharp(`./src/images/${name}`)
 			.webp({ quality: 75 })
 			.resize(size)
 			.toBuffer();

@dasig/scripts/node/optimizeLogo.ts

@@ -15,7 +15,7 @@ import { hideBin } from "yargs/helpers";
 	try {
 		const webpImage = "./@dasig/images/logo.webp";
 		const avifImage = "./@dasig/images/logo.avif";
-		const inputSrc = "./src/assets/images/logo.png";
+		const inputSrc = "./src/images/logo.png";
 
 		const avifBuffer = await sharp(inputSrc)
 			.avif({ quality: 60 })

@dasig/styles/Box.sass

@@ -1,6 +1,6 @@
-.box
+.dasig-box
   padding: 1rem
 
-.curvedbox
+.dasig-curvedbox
-  @extend .box
+  @extend .dasig-box
   border-radius: 8px

@dasig/styles/Button.sass

@@ -36,7 +36,7 @@ $bootstrapInfo: rgb(49, 210, 242)
 $bootstrapLight: rgb(211, 212, 213)
 $bootstrapDark: rgb(33, 37, 41)
 
-.button
+.dasig-button
   background-color: $primaryColor
   border: none
   color: white
@@ -56,7 +56,7 @@ $bootstrapDark: rgb(33, 37, 41)
     transform: scale(0.95)
 
 .bu-primary
-  @extend .button
+  @extend .dasig-button
   font-family: fonts.$Inter
   background-color: $bulmaPrimary
   color: $bulmaPrimaryText
@@ -145,7 +145,7 @@ $bootstrapDark: rgb(33, 37, 41)
     text-decoration: underline
 
 .bo-primary
-  @extend .button
+  @extend .dasig-button
   font-family: 'Segoe UI', fonts.$Roboto
   background-color: $bootstrapPrimary
   color: $bootstrapTextLight

@dasig/styles/Column.sass

@@ -1,4 +1,4 @@
-.column-top
+.dasig-column-top
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.column-center
+.dasig-column-center
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.column-right
+.dasig-column-right
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.column-split
+.dasig-column-split
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.column-spaced
+.dasig-column-spaced
   display: flex
   flex-direction: column
   flex-wrap: wrap

@dasig/styles/Footer.sass

@@ -1,6 +1,6 @@
 @use '../../configs/design/sizes' as view
 
-.footer
+.dasig-footer
   padding: 1rem 0
   margin: 0 2rem
   position: fixed

@dasig/styles/Input.sass

@@ -1,4 +1,4 @@
-.input
+.dasig-input
   font-size: 1rem
   padding: 0.5rem 1rem
   width: 100%

@dasig/styles/Page.sass

@@ -1,13 +1,13 @@
-.page
+.dasig-page
   margin: 2rem
   height: auto
   min-height: 90vh
 
-.column
+.dasig-page-column
-  @extend .page
+  @extend .dasig-page
   display: flex
   flex-direction: column
 
-.row
+.dasig-page-row
-  @extend .column
+  @extend .dasig-page
   flex-direction: row

@dasig/styles/Row.sass

@@ -1,4 +1,4 @@
-.row-left
+.dasig-row-left
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.row-center
+.dasig-row-center
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.row-right
+.dasig-row-right
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.row-split
+.dasig-row-split
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.row-spaced
+.dasig-row-spaced
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -38,7 +38,7 @@
   align-items: center
   align-content: center
 
-.row-even
+.dasig-row-even
   display: flex
   flex-direction: row
   flex-wrap: wrap

Makefile

@@ -26,3 +26,6 @@ logo:
 
 image:
 	node ./@dasig/scripts/node/optimizeImage.ts --name $(name) --size $(size)
+
+background:
+	node ./@dasig/scripts/node/optimizeBackground.ts

README.md

@@ -1,100 +1,7 @@
-![FWT Logo](fwt/images/logo.avif)
+<div align=center>
 
-# Fast WebApp Template
+# DASIG - ASTRO
 
-## How to Use
+An architecture framework for pure speed static website developemnt
 
-#### Clone the Repo
+</div>
-
-```
-git clone --depth 1 https://git.patalcala.com/patalcala9/fwt.git <project-name>
-```
-
-#### Navigate to the project
-
-```
-cd <project-name>
-```
-
-#### Refresh GIT
-
-```
-sudo rm -rf .git
-git init
-```
-
-#### Install Depedencies
-
-```
-pnpm install
-```
-
-#### Make sure to update the dependencies first
-
-```
-pnpm update
-```
-
-## To Use Background
-
-Place your background image in `assets/images/background.avif` or `assets/images/background.webp`.
-
-Then, enable by adding `<Background image />` or `<Background color="#123456">`
-
-## How to Run
-
-```
-pnpm dev
-```
-
-## How to Deploy
-
-### Standard
-
-```
-pnpm build
-```
-
-### Docker
-
-#### Edit name and port on docker-compose.yml
-
-```
-sudo vim docker-compose.yml
-```
-
-#### Run Docker Compose
-
-```
-docker compose up -d
-```
-
-### Podman
-
-#### Run Podman Compose
-
-```
-podman-compose up -d
-```
-
-### Podman Quadlet
-
-#### Edit Quadlet Container
-
-```
-sudo vim quadlet/quadlet.container
-```
-
-#### Copy and Rename the Quadlet to proper directory
-
-```
-mkdir -p ~/.config/containers/systemd/
-sudo cp quadlet/quadlet.container ~/.config/containers/systemd/<name>.container
-```
-
-#### Start at Systemd
-
-```
-systemctl --user daemon-reload
-systemctl --user start <name>
-```

podman.container

@@ -1,10 +1,10 @@
 [Unit]
-Description=FWT
+Description=DASIG-ASTRO
 
 [Container]
-ContainerName=fwt
+ContainerName=dasig-astro
-Image=localhost/fwt
+Image=localhost/dasig-astro
-PublishPort=8080:8080
+PublishPort=4321:4321
 
 [Service]
 Restart=always