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

Re-organized files

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-15 10:43:56 +08:00
parent ea7be8fb39
commit 621faea4c2
53 changed files with 1434 additions and 1059 deletions
Download patch file Download diff file Expand all files Collapse all files

8
fwt/components/Background/Background.tsx → fwt/components/Background.tsx
View file

@ -1,9 +1,9 @@
import './Background.sass'
import '../styles/Background.sass'
import { Show, createSignal } from 'solid-js'
import fs from 'fs'
import webpPath from '../../images/background.webp'
import avifPath from '../../images/background.avif'
import noBackground from '../../images/no-background.webp'
import webpPath from '../images/background.webp'
import avifPath from '../images/background.avif'
import noBackground from '../images/no-background.webp'
interface Props {
image?: boolean

1
fwt/components/Background/Background.sass
View file

@ -1 +0,0 @@
@use '/src/styles/classes.sass'

5
fwt/components/Box/Box.tsx → fwt/components/Box.tsx
View file

@ -1,6 +1,5 @@
import type { ImageMetadata } from 'astro'
import './Box.sass'
import { Show, type JSXElement, createMemo } from 'solid-js'
import '../styles/Box.sass'
import { type JSXElement, createMemo } from 'solid-js'
interface Props {
thickness: number

6
fwt/components/Box/Box.sass
View file

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

2
fwt/components/Button/Button.tsx → fwt/components/Button.tsx
View file

@ -1,4 +1,4 @@
import './Button.sass'
import '../styles/Button.sass'
import { Show, Switch, Match } from 'solid-js'
interface Props {

223
fwt/components/Button/Button.sass
View file

@ -1,223 +0,0 @@
@use '/src/styles/variables.sass' as vars
@use '/src/styles/fonts.sass' as fonts
@use 'sass:color'
$bulmaPrimary: rgb(0, 235, 199)
$bulmaPrimaryText: rgb(0, 31, 26)
$bulmaLink: rgb(92, 111, 255)
$bulmaLinkText: rgb(245, 246, 255)
$bulmaInfo: rgb(128, 217, 255)
$bulmaInfoText: rgb(0, 36, 51)
$bulmaSuccess: rgb(91, 205, 154)
$bulmaSuccessText: rgb(10, 31, 21)
$bulmaWarning: rgb(255, 191, 41)
$bulmaWarningText: rgb(41, 29, 0)
$bulmaDanger: rgb(255, 128, 153)
$bulmaDangerText: rgb(26, 0, 5)
$bulmaLight: rgb(255, 255, 255)
$bulmaLightText: rgb(46, 51, 61)
$bulmaDark: rgb(57, 63, 76)
$bulmaDarkText: rgb(243, 244, 246)
$bulmaText: rgb(31, 34, 41)
$bulmaTextText: rgb(235, 236, 240)
$bulmaGhost: rgba(0,0,0,0)
$bulmaGhostText: rgb(66, 88, 255)
$bootstrapTextLight: rgb(255, 255, 253)
$bootstrapTextDark: rgb(0, 0, 2)
$bootstrapTextLink: rgb(139, 185, 254)
$bootstrapPrimary: rgb(13, 110, 253)
$bootstrapSecondary: rgb(92, 99, 106)
$bootstrapSuccess: rgb(21, 115, 71)
$bootstrapDanger: rgb(187, 45, 59)
$bootstrapWarning: rgb(255, 202, 44)
$bootstrapInfo: rgb(49, 210, 242)
$bootstrapLight: rgb(211, 212, 213)
$bootstrapDark: rgb(33, 37, 41)
.button
background-color: vars.$primaryColor
border: none
color: white
padding: 0.5rem 1.25rem
text-align: center
text-decoration: none
display: inline-block
font-size: 1rem
font-weight: 500
cursor: pointer
transition: all 0.2s ease-out
&:hover
background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
&:active
transform: scale(0.95)
.bu-primary
@extend .button
font-family: fonts.$Inter
background-color: $bulmaPrimary
color: $bulmaPrimaryText
border: none
font-size: 1rem
border-radius: 0.375rem
font-weight: 500
padding: 0.5rem 1.25rem
height: 2.5rem
&:hover
background-color: color.adjust($bulmaPrimary, $lightness: 10%)
.bu-link
@extend .bu-primary
background-color: $bulmaLink
color: $bulmaLinkText
&:hover
background-color: color.adjust($bulmaLink, $lightness: 5%)
.bu-info
@extend .bu-primary
background-color: $bulmaInfo
color: $bulmaInfoText
&:hover
background-color: color.adjust($bulmaInfo, $lightness: 5%)
.bu-success
@extend .bu-primary
background-color: $bulmaSuccess
color: $bulmaSuccessText
&:hover
background-color: color.adjust($bulmaSuccess, $lightness: 5%)
.bu-warning
@extend .bu-primary
background-color: $bulmaWarning
color: $bulmaWarningText
&:hover
background-color: color.adjust($bulmaWarning, $lightness: 5%)
.bu-danger
@extend .bu-primary
background-color: $bulmaDanger
color: $bulmaDangerText
&:hover
background-color: color.adjust($bulmaDanger, $lightness: 5%)
.bu-light
@extend .bu-primary
background-color: $bulmaLight
color: $bulmaLightText
&:hover
background-color: color.adjust($bulmaLight, $lightness: 5%)
.bu-dark
@extend .bu-primary
background-color: $bulmaDark
color: $bulmaDarkText
&:hover
background-color: color.adjust($bulmaDark, $lightness: 5%)
.bu-text
@extend .bu-primary
background-color: rgba(0,0,0,0)
color: $bulmaTextText
text-decoration: underline
&:hover
background-color: hsl(221,14%,14%)
.bu-ghost
@extend .bu-primary
background-color: $bulmaGhost
color: $bulmaGhostText
&:hover
background-color: transparent
text-decoration: underline
.bo-primary
@extend .button
font-family: 'Segoe UI', fonts.$Roboto
background-color: $bootstrapPrimary
color: $bootstrapTextLight
border: none
font-size: 1rem
border-radius: 0.375rem
font-weight: 400
padding: 0.5rem 1.25rem
height: 2.5rem
margin: 0.25rem 0.125rem
&:hover
background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
.bo-secondary
@extend .bo-primary
background-color: $bootstrapSecondary
&:hover
background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
.bo-success
@extend .bo-primary
background-color: $bootstrapSuccess
&:hover
background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
.bo-danger
@extend .bo-primary
background-color: $bootstrapDanger
&:hover
background-color: color.adjust($bootstrapDanger, $blackness: 10%)
.bo-warning
@extend .bo-primary
background-color: $bootstrapWarning
color: $bootstrapTextDark
&:hover
background-color: color.adjust($bootstrapWarning, $lightness: 5%)
.bo-info
@extend .bo-primary
background-color: $bootstrapInfo
color: $bootstrapTextDark
&:hover
background-color: color.adjust($bootstrapInfo, $lightness: 5%)
.bo-light
@extend .bo-primary
background-color: $bootstrapLight
color: $bootstrapTextDark
&:hover
background-color: color.adjust($bootstrapLight, $blackness: 10%)
.bo-dark
@extend .bo-primary
background-color: $bootstrapDark
// color: $bootstrapTextDark
&:hover
background-color: color.adjust($bootstrapDark, $lightness: 10%)
.bo-link
@extend .bo-primary
background-color: transparent
color: $bootstrapTextLink
text-decoration: underline
&:hover
color: color.adjust($bootstrapTextLink, $lightness: 5%)
background-color: transparent

2
fwt/components/Column/Column.tsx → fwt/components/Column.tsx
View file

@ -1,5 +1,5 @@
import '../styles/Column.sass'
import type { JSXElement } from 'solid-js'
import './Column.sass'
interface Props {
children: JSXElement

39
fwt/components/Column/Column.sass
View file

@ -1,39 +0,0 @@
.column-top
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-items: center
align-content: center
.column-center
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: center
align-items: center
align-content: center
.column-right
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-end
align-items: center
align-content: center
.column-split
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: space-between
align-items: center
align-content: center
.column-spaced
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: space-around
align-items: center
align-content: center

0
fwt/components/Copyright/Copyright.tsx → fwt/components/Copyright.tsx
View file

2
fwt/components/Footer/Footer.tsx → fwt/components/Footer.tsx
View file

@ -1,4 +1,4 @@
import './Footer.sass'
import '../styles/Footer.sass'
import type { JSXElement } from 'solid-js'
interface Props {

7
fwt/components/Footer/Footer.sass
View file

@ -1,7 +0,0 @@
.footer
padding: 1rem 0
margin: 0 2rem
position: fixed
bottom: 0
width: 100%
opacity: 0.8

2
fwt/components/Form/Form.tsx → fwt/components/Form.tsx
View file

@ -1,4 +1,4 @@
import './Form.sass'
import '../styles/Form.sass'
import type { JSXElement } from 'solid-js'
interface Props {

0
fwt/components/Form/Form.sass
View file

13
fwt/components/HTML/HTML.tsx → fwt/components/HTML.tsx
View file

@ -1,7 +1,7 @@
import './HTML.sass'
import '../styles/HTML.sass'
import { type JSXElement, Show } from 'solid-js'
import background1 from '../../images/background.avif'
import background2 from '../../images/background.webp'
import background1 from '../images/background.avif'
import background2 from '../images/background.webp'
interface Props {
title: string
@ -22,15 +22,18 @@ export default (props: Props) => {
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="name" content={props.name} />
<meta name="description" content={props.description} />
<meta property="og:title" content={props.name} />
<meta name="title" property="og:title" content={props.name} />
<meta property="og:description" content={props.description} />
<meta property="og:type" content="website" />
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<Show when={props.font}>
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
</Show>
<Show when={props.preloadBackground}>
<link rel="preload" href={background1.src} as="image" type="image/svg+xml" />
<link rel="preload" href={background2.src} as="image" type="image/svg+xml" />
</Show>
<title>{props.title}</title>
</head>

25
fwt/components/HTML/HTML.sass
View file

@ -1,25 +0,0 @@
@use '/src/styles/variables.sass' as vars
@use '/src/styles/fonts.sass' as fonts
.body
color: vars.$textColor
.inter
@extend .body
font-family: fonts.$Inter
.roboto
@extend .body
font-family: fonts.$Roboto
.montserrat
@extend .body
font-family: fonts.$Montserrat
.open-sans
@extend .body
font-family: fonts.$OpenSans
.public-sans
@extend .body
font-family: fonts.$PublicSans

0
fwt/components/Image/Image.tsx → fwt/components/Image.tsx
View file

2
fwt/components/Input/Input.tsx → fwt/components/Input.tsx
View file

@ -1,4 +1,4 @@
import './Input.sass'
import '../styles/Input.sass'
import { createSignal } from 'solid-js'
interface Props {

27
fwt/components/Input/Input.sass
View file

@ -1,27 +0,0 @@
.input
font-size: 1rem
padding: 0.5rem 1rem
width: 100%
border: 2px solid #ccc
border-radius: 4px
outline: none
transition: border-color 0.3s, box-shadow 0.3s
&:focus
border-color: #3377AC
box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
&::placeholder
color: #888
font-style: italic
&:disabled
background-color: #f0f0f0
border-color: #ddd
&--error
border-color: #ff4d4f
box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
&:focus
border-color: #e81123

2
fwt/components/Link/Link.tsx → fwt/components/Link.tsx
View file

@ -1,4 +1,4 @@
import './Link.sass'
import '../styles/Link.sass'
interface Props {
to: string

3
fwt/components/Link/Link.sass
View file

@ -1,3 +0,0 @@
a
text-decoration: none
color: inherit

4
fwt/components/Logo/Logo.tsx → fwt/components/Logo.tsx
View file

@ -1,5 +1,5 @@
import webpPath from '../../images/logo.webp'
import avifPath from '../../images/logo.avif'
import webpPath from '../images/logo.webp'
import avifPath from '../images/logo.avif'
interface Props {
size?: number

5
fwt/components/Navbar/Navbar.tsx → fwt/components/Navbar.tsx
View file

@ -1,6 +1,5 @@
import './Navbar.sass'
import { Show } from 'solid-js'
import Row from '../Row/Row'
import '../styles/Navbar.sass'
import Row from './Row'
interface Props {
transparent?: boolean

7
fwt/components/Navbar/Navbar.sass
View file

@ -1,7 +0,0 @@
.nav
position: fixed
top: 0
width: 100%
padding: 1rem 0
// margin: 5rem

17
fwt/components/Optimizer/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
fwt/components/Optimizer/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)
}

21
fwt/components/Optimizer/OptimizeLogo.tsx
View file

@ -1,21 +0,0 @@
import sharp from 'sharp'
interface Props {
size?: number
}
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)
}
export default (props: Props) => {
convertLogo(props)
}

2
fwt/components/Page/Page.tsx → fwt/components/Page.tsx
View file

@ -1,4 +1,4 @@
import './Page.sass'
import '../styles/Page.sass'
import { Show } from 'solid-js'
interface Props {

14
fwt/components/Page/Page.sass
View file

@ -1,14 +0,0 @@
.page
margin: 2rem
height: auto
min-height: 90vh
.column
@extend .page
display: flex
flex-direction: column
align-items: center
.row
@extend .column
flex-direction: row

2
fwt/components/Row/Row.tsx → fwt/components/Row.tsx
View file

@ -1,4 +1,4 @@
import './Row.sass'
import '../styles/Row.sass'
import { Show, type JSXElement } from 'solid-js'
interface Props {

47
fwt/components/Row/Row.sass
View file

@ -1,47 +0,0 @@
.row-left
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: flex-start
align-items: center
align-content: center
.row-center
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: center
align-items: center
align-content: center
.row-right
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: flex-end
align-items: center
align-content: center
.row-split
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: space-between
align-items: center
align-content: center
.row-spaced
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: space-around
align-items: center
align-content: center
.row-even
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: space-evenly
align-items: center
align-content: center