Re-organized files

fwt/components/Background.tsx

@@ -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 webpPath from '../images/background.webp'
-import avifPath from '../../images/background.avif'
+import avifPath from '../images/background.avif'
-import noBackground from '../../images/no-background.webp'
+import noBackground from '../images/no-background.webp'
 
 interface Props {
   image?: boolean

fwt/components/Box.tsx

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

fwt/components/Button.tsx

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

fwt/components/Column.tsx

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

fwt/components/Footer.tsx

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

fwt/components/Form.tsx

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

fwt/components/HTML.tsx

@@ -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 background1 from '../images/background.avif'
-import background2 from '../../images/background.webp'
+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>
 

fwt/components/Input.tsx

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

fwt/components/Link.tsx

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

fwt/components/Logo.tsx

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

fwt/components/Navbar.tsx

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

fwt/components/Page.tsx

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

fwt/components/Row.tsx

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

fwt/index.ts

@@ -0,0 +1,18 @@
+export { default as Background } from './components/Background'
+export { default as Box } from './components/Box'
+export { default as Button } from './components/Button'
+export { default as Column } from './components/Column'
+export { default as Copyright } from './components/Copyright'
+export { default as Footer } from './components/Footer'
+export { default as Form } from './components/Form'
+export { default as HTML } from './components/HTML'
+export { default as Image } from './components/Image'
+export { default as Link } from './components/Link'
+export { default as Logo } from './components/Logo'
+export { default as Navbar } from './components/Navbar'
+export { default as Page } from './components/Page'
+export { default as Row } from './components/Row'
+
+export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

package.json

@@ -9,12 +9,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^5.1.0",
+    "@astrojs/solid-js": "^5.1.1",
-    "@fontsource-variable/inter": "^5.2.5",
+    "@fontsource-variable/inter": "^5.2.6",
-    "@fontsource-variable/montserrat": "^5.2.5",
+    "@fontsource-variable/montserrat": "^5.2.7",
-    "@kobalte/core": "^0.13.10",
+    "@kobalte/core": "^0.13.11",
-    "astro": "^5.8.2",
+    "astro": "^5.13.7",
-    "astro-compressor": "^1.0.0",
+    "astro-compressor": "^1.1.2",
     "astro-robots-txt": "^1.0.0",
     "colord": "^2.9.3",
     "crypto-js": "^4.2.0",
@@ -22,12 +22,12 @@
     "lightningcss": "^1.30.1",
     "monaco-editor": "^0.52.2",
     "nanostores": "^1.0.1",
-    "sharp": "^0.34.2",
+    "sharp": "^0.34.3",
     "solid-icons": "^1.1.0",
-    "solid-js": "^1.9.7"
+    "solid-js": "^1.9.9"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.2",
-    "sass-embedded": "^1.89.1"
+    "sass-embedded": "^1.92.1"
   }
 }

podman.container

@@ -3,7 +3,7 @@ Description=AIO Tools
 
 [Container]
 ContainerName=aio-tools
-Image=localhost/aio-tools-_aio-tools
+Image=localhost/aio-tools_aio-tools
 PublishPort=8082:8080
 
 [Service]

src/components/Button/Button.sass

@@ -1,10 +1,10 @@
-@use '/src/assets/css/viewport.sass' as view
+@use '/src/styles/breakpoint.sass' as view
+@use '/src/styles/variables.sass' as vars
 @use 'sass:color'
 
 $backgroundColor: #1b7278
 $backgroundColorHover: color.adjust($backgroundColor, $blackness: 11%)
-$coffeeColor:rgb(24, 83, 131)
+
-$coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
 
 .button
   border: none
@@ -31,12 +31,12 @@ $coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
   padding: 0.5rem 2rem
   font-size: 1rem
   color: #ffffff
-  background-color: $coffeeColor
+  background-color: vars.$coffeeColor
   cursor: pointer
   transition: all 0.2s ease-out
 
   &:hover
-    background-color: $coffeeColorHover
+    background-color: vars.$coffeeColorHover
     transform: scale(1.2)
     margin: 0 1rem 0 1rem
 
@@ -49,4 +49,4 @@ $coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
 .coffee-icon
   margin: 0 0.5rem 0 0
   font-size: 1.5rem
-  color:rgb(77, 107, 170)
+  color: rgb(230, 235, 246)

src/components/Content/Content.sass

@@ -0,0 +1,4 @@
+.content
+  display: flex
+  justify-content: center
+  align-items: center

src/components/Content/Content.tsx

@@ -0,0 +1,14 @@
+import './Content.sass'
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <section class="content">{props.children}</section>
+    </>
+  )
+}

src/components/Navbar/Navbar.sass

@@ -1,5 +1,5 @@
-@use '/src/assets/css/viewport.sass' as view
+@use '/src/styles/breakpoint.sass' as view
-@use '/src/assets/css/variables.sass' as vars
+@use '/src/styles/variables.sass' as vars
 @use 'sass:color'
 
 $text: vars.$textColor
@@ -31,16 +31,21 @@ $coffeeColor: #1a726e
 
   @media screen and (max-width: view.$tablet)
     display: block
-    border: 1px solid color.adjust($coffeeColor, $lightness: 20%)
+    border: 1px solid color.adjust(vars.$coffeeColor, $lightness: 10%)
     border-radius: 16px
     cursor: pointer
     padding: 0.5rem 1rem
     margin-left: auto
-    background-color: $coffeeColor
+    background-color: vars.$coffeeColor
     border-radius: 16px
+    transition: background-color 0.2s ease-out
 
     &:active
       transform: scale(0.9)
 
+    &:hover
+      background-color: color.adjust(vars.$coffeeColor, $blackness: 11%)
+      border: 1px solid color.adjust(vars.$coffeeColor, $blackness: 5%)
+
 .buymeacoffee-button
   display: none

src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass

@@ -1,5 +1,5 @@
-@use '/src/assets/css/variables.sass' as vars
+@use '/src/styles/variables.sass' as vars
-@use '/src/assets/css/viewport.sass' as view
+@use '/src/styles/breakpoint.sass' as view
 @use 'sass:color'
 
 $toggleOffColor: rgba(126, 206, 241, 0.286)

src/components/PageTitle/PageTitle.sass

@@ -1,4 +1,4 @@
-@use '/src/assets/css/variables.sass' as vars
+@use '/src/styles/variables.sass' as vars
 
 .title
   color: vars.$textColorTitle

src/layouts/Layout.astro

@@ -1,12 +1,10 @@
 ---
-import Navbar from '../components/Navbar/Navbar.tsx'
+import Navbar from '../components/Navbar/Navbar'
+import { Background, HTML } from '../../fwt'
 const { title } = Astro.props
 
 const websiteName = 'AIO Tools'
 const websiteDescription = 'All-in-One Tools for Everyone'
-
-import Background from '../../fwt/components/Background/Background'
-import HTML from '../../fwt/components/HTML/HTML'
 ---
 
 <HTML title={title} name={websiteName} description={websiteDescription} font="inter">

src/pages/about.astro

@@ -3,7 +3,7 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout title="About - AIO Tools">
-  <main class="page">
+  <main class="about-page">
     <h2 class="paragraph-title">About AIO Tools</h2>
     <p class="paragraph-content">This website aimed to provide useful tools for both offline and online usage.</p>
     <p class="paragraph-content">
@@ -12,8 +12,7 @@ import Layout from '../layouts/Layout.astro'
 
     <h2 class="paragraph-title">Technologies</h2>
     <p class="paragraph-content">
-      AIO Tools is made using <a target="_blank" href="https://astro.build/">AstroJS</a> and <a target="_blank" href="https://www.solidjs.com/">SolidJS</a> to achieve maximum performance and to provide a smooth user experience, and is styled with <a target="_blank" href="https://sass-lang.com/">SASS</a>. The UI Components are manually built from scratch for better flexibility. Third-party open-source libraries are used in some tools, you may find the complete list in the package.json file of the
+      AIO Tools is made using <strong>FWT (Fast Webapp Template)</strong>, a template that is built for performance, security, and flexibility. It was built on top of <a target="_blank" href="https://astro.build/">AstroJS</a> and <a target="_blank" href="https://www.solidjs.com/">SolidJS</a>. It provides a clean and modern design, with a focus on performance and user experience. The template includes a variety of components that can be used to build custom web applications quickly and easily.
-      repository.
     </p>
   </main>
 </Layout>
@@ -24,7 +23,7 @@ import Layout from '../layouts/Layout.astro'
   @use '/src/styles/fonts.sass' as fonts
   @use 'sass:color'
 
-  .page
+  .about-page
     padding: 4rem
     display: flex
     flex-direction: column

src/pages/color-converter.astro

@@ -2,34 +2,15 @@
 import Layout from '../layouts/Layout.astro'
 import ColorConverterComponent from '../components/PageComponents/Color-Converter/ColorConverterComponent.tsx'
 import PageTitle from '../components/PageTitle/PageTitle'
+import Content from '../components/Content/Content'
 ---
 
 <Layout title="Color Converter - AIO Tools">
   <main class="page">
     <PageTitle title="Color Converter" description="Convert colors to any format. Color picker provided inside." />
 
-    <section class="content">
+    <Content>
       <ColorConverterComponent client:visible />
-    </section>
+    </Content>
   </main>
 </Layout>
-
-<style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
-
-  .page
-    text-align: center
-    margin: 4rem 0 0 0
-    transition: margin 0.4s ease-in-out
-
-    @media screen and (max-width: view.$tablet)
-      margin-top: 1rem
-
-  .content
-    display: flex
-    justify-content: center
-    align-items: center
-    // border: 1px solid #ffffff
-    // padding: 2rem
-    // border-radius: 8px
-</style>

src/pages/hash-generator.astro

@@ -2,34 +2,15 @@
 import Layout from '../layouts/Layout.astro'
 import HashGeneratorComponent from '../components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx'
 import PageTitle from '../components/PageTitle/PageTitle'
+import Content from '../components/Content/Content'
 ---
 
 <Layout title="Hash Generator - AIO Tools">
   <main class="page">
     <PageTitle title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." />
 
-    <section class="content">
+    <Content>
       <HashGeneratorComponent client:visible />
-    </section>
+    </Content>
   </main>
 </Layout>
-
-<style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
-
-  .page
-    text-align: center
-    margin: 4rem 0 0 0
-    transition: margin 0.4s ease-in-out
-
-    @media screen and (max-width: view.$tablet)
-      margin-top: 1rem
-
-  .content
-    display: flex
-    justify-content: center
-    align-items: center
-    // border: 1px solid #ffffff
-    // padding: 2rem
-    // border-radius: 8px
-</style>

src/pages/index.astro

@@ -1,10 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Card from '../components/Card/Card.jsx'
-import Logo from '../../fwt/components/Logo/Logo'
+import { Logo, Link } from '../../fwt/'
-import Link from '../../fwt/components/Link/Link'
-import Footer from '../../fwt/components/Footer/Footer'
-import Copyright from '../../fwt/components/Copyright/Copyright'
 ---
 
 <Layout title="AIO Tools">

src/pages/password-generator.astro

@@ -2,31 +2,15 @@
 import Layout from '../layouts/Layout.astro'
 import PasswordGeneratorComponent from '../components/PageComponents/Password-Generator/PasswordGeneratorComponent.tsx'
 import PageTitle from '../components/PageTitle/PageTitle'
+import Content from '../components/Content/Content'
 ---
 
 <Layout title="Password Generator - AIO Tools">
   <main class="page">
     <PageTitle title="Password Generator" description="Generate a strong and secure password for your accounts online." />
 
-    <section class="content">
+    <Content>
-      <PasswordGeneratorComponent client:load />
+      <PasswordGeneratorComponent client:visible />
-    </section>
+    </Content>
   </main>
 </Layout>
-
-<style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
-
-  .page
-    text-align: center
-    margin: 4rem 0 0 0
-    transition: margin 0.4s ease-in-out
-
-    @media screen and (max-width: view.$tablet)
-      margin-top: 1rem
-
-  .content
-    display: flex
-    justify-content: center
-    align-items: center
-</style>

src/pages/password-manager.astro

@@ -1,17 +1,18 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import PasswordManagerComponent from '../components/PageComponents/Password-Manager/PasswordManagerComponent.tsx'
-import PageTitle from '../components/PageTitle/PageTitle.tsx'
+import PageTitle from '../components/PageTitle/PageTitle'
+import Toolpage from '../components/Toolpage/Toolpage'
 ---
 
 <Layout title="Password Manager - AIO Tools">
-  <main class="page">
+  <Toolpage>
     <PageTitle title="Password Manager" description="Manage your passwords securely and privately. Recommended to be pair with Password Generator for best security." />
 
     <section class="content">
       <PasswordManagerComponent client:visible />
     </section>
-  </main>
+  </Toolpage>
 </Layout>
 
 <style lang="sass">

src/pages/text-comparison.astro

@@ -1,36 +1,16 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import TextComparisonComponent from '../components/PageComponents/Text-Comparison/TextComparisonComponent.tsx'
+import TextComparisonComponent from '../components/PageComponents/Text-Comparison/TextComparisonComponent'
-import PageTitle from '../components/PageTitle/PageTitle.tsx'
+import PageTitle from '../components/PageTitle/PageTitle'
+import Content from '../components/Content/Content'
 ---
 
 <Layout title="Text Comparison - AIO Tools">
   <main class="page">
     <PageTitle title="Text Comparison" description="Compare text side by side to detect changes easily." />
 
-    <section class="content">
+    <Content>
       <TextComparisonComponent client:visible />
-    </section>
+    </Content>
   </main>
 </Layout>
-
-<style lang="sass">
-  @use '/src/styles/breakpoint.sass' as view
-
-  .page
-    font-family: 'Inter', sans-serif
-    text-align: center
-    margin: 4rem 0 0 0
-    transition: margin 0.4s ease-in-out
-
-    @media screen and (max-width: view.$tablet)
-      margin-top: 1rem
-
-  .content
-    display: flex
-    justify-content: center
-    align-items: center
-    // border: 1px solid #ffffff
-    // padding: 2rem
-    // border-radius: 8px
-</style>

src/styles/classes.sass

@@ -69,3 +69,11 @@
 
   @media only screen and (max-width: view.$mobile)
     display: block
+
+.page
+  text-align: center
+  margin: 4rem 0 0 0
+  transition: margin 0.4s ease-in-out
+
+  @media screen and (max-width: view.$tablet)
+    margin-top: 1rem

src/styles/variables.sass

@@ -1,9 +1,21 @@
 @use 'sass:color'
+@use '/src/styles/fonts.sass' as fonts
 
-$fontFamily: 'Inter', sans-serif
+$fontFamily: fonts.$Inter
 $background: #0f1a28
 $textColor: color.adjust($background, $lightness: 80%)
 $textColorTitle: color.adjust($background, $lightness: 75%)
 $borderRadius: 16px
 $componentBorder: 2px solid color.adjust($background, $lightness: 6%)
 $componentBackground: color.adjust($background, $lightness: 1%)
+
+$coffeeColor: rgb(24, 83, 131)
+$coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
+
+$primaryColor: #0075BB
+$secondaryColor: #57687F
+$accentColor: #00887C
+$infoColor: #0082A4
+$successColor: #009435
+$warningColor: #E5B400
+$errorColor: #E8595C