Updated

frontend/src/@dasig/components/Copyright.tsx

@@ -1,4 +1,4 @@
-import { $companyName, $copyRightYear } from "configs/config.site"
+import { $companyName, $copyRightYear } from "../../../configs/config.site"
 
 export default () => {
   return (

frontend/src/@dasig/components/Display.tsx

@@ -0,0 +1,41 @@
+import { type JSXElement, Match, Switch } from 'solid-js'
+import '../styles/Display.sass'
+
+interface Props {
+  children: JSXElement
+  desktop?: boolean
+  tablet?: boolean
+  mobile?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Switch>
+        <Match when={props.desktop && !props.tablet && !props.mobile}>
+          <div class="on-desktop-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && !props.mobile}>
+          <div class="on-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && !props.tablet && props.mobile}>
+          <div class="on-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && props.tablet && !props.mobile}>
+          <div class="on-desktop-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && !props.tablet && props.mobile}>
+          <div class="on-desktop-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && props.mobile}>
+          <div class="on-tablet-mobile-only">{props.children}</div>
+        </Match>
+      </Switch>
+    </>
+  )
+}

frontend/src/@dasig/components/HTML.tsx

@@ -30,7 +30,7 @@ export default (props: Props) => {
           <meta name="developer" content={props.author} />
           <meta property="og:description" content={props.description} />
           <meta property="og:type" content="website" />
-          <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
           <Show when={$fontSource.get() === 'cdn'}>
             <link rel="preconnect" href="https://cdn.jsdelivr.net" />
           </Show>

frontend/src/@dasig/components/Padding.tsx

@@ -0,0 +1,13 @@
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  left: number
+  right: number
+  top: number
+  bottom: number
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
+}

frontend/src/@dasig/index.ts

@@ -1,3 +1,5 @@
 export { default as Column } from './components/Column'
+export { default as Display } from './components/Display'
 export { default as HTML } from './components/HTML'
 export { default as Page } from './components/Page'
+

frontend/src/@dasig/scripts/node/generateFavicon.js

@@ -0,0 +1,23 @@
+import { consola } from 'consola';
+import * as fs from 'fs';
+import * as path from 'path';
+import sharp from 'sharp';
+
+try {
+  const dirPath = path.resolve('./public')
+
+  if (fs.existsSync(dirPath)) {
+    const inputSrc = './src/images/favicon.png'
+    const favicon = dirPath + '/favicon.png'
+    const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(48).toBuffer()
+    await sharp(faviconBuffer).toFile(favicon)
+    consola.success('Favicon generated successfully')
+  } else {
+    consola.error('Directory does not exist:', dirPath)
+  }
+
+} catch (error) {
+  if (error.message.includes('missing')) {
+    consola.error('Source favicon does not exist')
+  }
+}

frontend/src/@dasig/scripts/node/optimizeImage.js

@@ -0,0 +1,41 @@
+import { consola } from 'consola';
+import sharp from 'sharp';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+(async () => {
+  const argv = yargs(hideBin(process.argv))
+  .option('name', {
+    alias: 'n',
+    describe: 'Specify the name of the image',
+    type: 'string',
+    demandOption: true,
+  })
+  .option('size', {
+    alias: 's',
+    describe: 'Specify the size of the image',
+    type: 'number',
+    demandOption: true,
+  })
+  .argv;
+
+  const name = argv.name;
+  const size = argv.size;
+
+  try {
+    const avifOutputPath = `./src/@dasig/images/${name.toString().split('.').slice(0, -1).join('.')}.avif`
+    const webpOutputPath = `./src/@dasig/images/${name.toString().split('.').slice(0, -1).join('.')}.webp`
+
+    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/images/${name}`).webp({ quality: 75 }).resize(size).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutputPath)
+    consola.success(`${name} successfully optimized in Webp`)
+  } catch (error) {
+    consola.error('Error optimizing image:', error)
+    if (error.message.includes('missing')) consola.error(`${name} could not be found on image folder`)
+  }
+})()
+

frontend/src/@dasig/scripts/node/optimizeLogo.js

@@ -0,0 +1,33 @@
+import { consola } from 'consola';
+import sharp from 'sharp';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+(async () => {
+  const argv = yargs(hideBin(process.argv))
+  .option('size', {
+    alias: 's',
+    describe: 'Specify the size of the logo',
+    type: 'number',
+    demandOption: true,
+  })
+  .argv;
+
+  const size = argv.size;
+
+  try {
+    const webpImage = './src/@dasig/images/logo.webp'
+    const avifImage = './src/@dasig/images/logo.avif'
+    const inputSrc = './src/images/logo.png'
+
+    const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(size).toBuffer()
+    await sharp(avifBuffer).toFile(avifImage)
+    consola.success('Logo successfully optimized in Avif')
+
+    const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(size).toBuffer()
+    await sharp(webpBuffer).toFile(webpImage)
+    consola.success('Logo successfully optimized in Webp')
+  } catch (error) {
+    consola.error('Error generating favicon:', error)
+  }
+})()

frontend/src/@dasig/styles/Display.sass

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

frontend/src/components/Counter.sass

@@ -1,6 +1,6 @@
 @use 'sass:color'
-@use '../../../configs/design.site' as design
-@use '../../styles/functions' as func
+@use '../../configs/design.site' as design
+@use '../styles/functions' as func
 
 .counter
   font-family: inherit
@@ -20,7 +20,7 @@
 
   &__display
     font-size: 1.75rem
-    font-weight: 200
+    font-weight: 300
 
   &__buttons
     display: flex

frontend/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { Column, Page } from '~/@dasig'
-import Counter from '~/components/Counter/Counter'
+import Counter from '~/components/Counter'
 import './index.sass'
 
 export default () => {

frontend/src/styles/breakpoint.sass

@@ -1,51 +1,49 @@
-$mobile: 575.98px
-$tablet: 768px
-$desktop: 1440px
+@use '../../configs/design.site' as design
 
 .on-desktop-only
-  @media only screen and (min-width: 0px) and (max-width: $desktop)
+  @media only screen and (min-width: 0px) and (max-width: design.$desktop)
     display: none
 
-  @media only screen and (min-width: $desktop)
+  @media only screen and (min-width: design.$desktop)
     display: block
 
 .on-tablet-only
-  @media only screen and (min-width: 0px) and (max-width: $tablet)
+  @media only screen and (min-width: 0px) and (max-width: design.$tablet)
     display: none
 
-  @media only screen and (min-width: $tablet) and (max-width: $desktop)
+  @media only screen and (min-width: design.$tablet) and (max-width: design.$desktop)
     display: block
 
-  @media only screen and (min-width: $desktop)
+  @media only screen and (min-width: design.$desktop)
     display: none
 
 .on-mobile-only
-  @media only screen and (max-width: $mobile)
+  @media only screen and (max-width: design.$mobile)
     display: block
 
-  @media only screen and (min-width: $tablet)
+  @media only screen and (min-width: design.$tablet)
     display: none
 
 .on-desktop-tablet-only
-  @media only screen and (min-width: 0px) and (max-width: $tablet)
+  @media only screen and (min-width: 0px) and (max-width: design.$tablet)
     display: none
 
-  @media only screen and (min-width: $tablet)
+  @media only screen and (min-width: design.$tablet)
     display: block
 
 .on-desktop-mobile-only
-  @media only screen and (min-width: 0px) and (max-width: $mobile)
+  @media only screen and (min-width: 0px) and (max-width: design.$mobile)
     display: block
 
-  @media only screen and (min-width: $mobile) and (max-width: $desktop)
+  @media only screen and (min-width: design.$mobile) and (max-width: design.$desktop)
     display: none
 
-  @media only screen and (min-width: $desktop)
+  @media only screen and (min-width: design.$desktop)
     display: block
 
 .on-tablet-mobile-only
-  @media only screen and (min-width: 0px) and (max-width: $desktop)
+  @media only screen and (min-width: 0px) and (max-width: design.$desktop)
     display: block
 
-  @media only screen and (min-width: $desktop)
+  @media only screen and (min-width: design.$desktop)
     display: none

frontend/src/styles/functions.sass

@@ -1,5 +1,7 @@
+@use 'sass:color'
+
 @function lighten-color($hex, $amount)
-  @return mix(white, $hex, $amount)
+  @return color.mix(white, $hex, $amount)
 
 @function darken-color($hex, $amount)
-  @return mix(black, $hex, $amount)
+  @return color.mix(black, $hex, $amount)