PatAlcala9/dasig-static
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-01-30 14:45:20 +08:00
parent 8e724b166a
commit b5e92165c8
33 changed files with 82 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

17
@dasig/Optimizers/OptimizeBackground.tsx
View file

@ -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()
}

21
@dasig/Optimizers/OptimizeImage.tsx
View file

@ -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)
}

34
@dasig/Optimizers/OptimizeLogo.tsx
View file

@ -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)
}
}

2
@dasig/components/Box.tsx
View file

@ -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'}` }}>

6
@dasig/components/Button.tsx
View file

@ -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>

2
@dasig/components/Column.tsx
View file

@ -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>
</>

2
@dasig/components/Footer.tsx
View file

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

12
@dasig/components/Image.tsx
View file

@ -8,12 +8,10 @@ interface Props {
export default (props: Props) => {
return (
<>
<picture>
<source srcset={props.avif} type="image/avif" />
<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} />
</picture>
</>
<picture>
<source srcset={props.avif} type="image/avif" />
<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} />
</picture>
)
}

2
@dasig/components/Input.tsx
View file

@ -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} />
</>
)
}

2
@dasig/components/Padding.tsx
View file

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

4
@dasig/components/Page.tsx
View file

@ -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>
</>
)

4
@dasig/components/Row.tsx
View file

@ -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>
</>
)

BIN
@dasig/images/logo.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
@dasig/images/logo.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

6
@dasig/index.ts
View file

@ -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 OptimizeImage } from './Optimizers/OptimizeImage'
export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'
// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
// export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

2
@dasig/scripts/node/generateFavicon.ts
View file

@ -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";

23
@dasig/scripts/node/optimizeBackground.ts Normal file
View file

@ -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`);
}
})();

4
@dasig/scripts/node/optimizeImage.ts
View file

@ -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();

2
@dasig/scripts/node/optimizeLogo.ts
View file

@ -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 })

6
@dasig/styles/Box.sass
View file

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

6
@dasig/styles/Button.sass
View file

@ -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

10
@dasig/styles/Column.sass
View file

@ -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

2
@dasig/styles/Footer.sass
View file

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

2
@dasig/styles/Input.sass
View file

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

10
@dasig/styles/Page.sass
View file

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

12
@dasig/styles/Row.sass
View file

@ -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

3
Makefile
View file

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

101
README.md
View file

@ -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
```
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>
```
</div>

8
podman.container
View file

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

BIN
src/images/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 MiB

BIN
src/images/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/images/sample.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB