Updated

frontend/@dasig/components/Image.tsx

@@ -0,0 +1,19 @@
+/** biome-ignore-all lint/complexity/noUselessFragments: <_> */
+
+interface Props {
+  name: string
+  size?: number
+  radius?: number | 0
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={`./@dasig/images/${props.name}.avif`} type="image/avif" />
+        <source srcset={`./@dasig/images/${props.name}.webp`} type="image/webp" />
+        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.name + ' image'} />
+      </picture>
+    </>
+  )
+}

frontend/@dasig/index.ts

@@ -1,4 +1,7 @@
-export { default as Column } from "./components/Column.tsx";
+/** biome-ignore-all assist/source/organizeImports: <_> */
-export { default as Display } from "./components/Display.tsx";
+
-export { default as HTML } from "./components/HTML.tsx";
+export { default as Column } from "./components/Column";
-export { default as Page } from "./components/Page.tsx";
+export { default as Display } from "./components/Display";
+export { default as HTML } from "./components/HTML";
+export { default as Page } from "./components/Page";
+export { default as Image } from "./components/Image";

frontend/@dasig/scripts/node/generateFavicon.ts

@@ -1,21 +1,109 @@
-// deno-lint-ignore-file no-explicit-any
+/** biome-ignore-all assist/source/organizeImports: <_> */
+/** biome-ignore-all lint/suspicious/noExplicitAny: <_> */
+/** biome-ignore-all lint/style/useTemplate: <_> */
+
 import { consola } from "consola";
 import * as fs from "node:fs";
 import * as path from "node:path";
 import sharp from "sharp";
+import * as toml from 'toml'
 
 try {
 	const dirPath = path.resolve("./public");
+  const config = toml.parse(fs.readFileSync("configs/config.site.toml", "utf8"));
   
 	if (fs.existsSync(dirPath)) {
 		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";
+		const apple = dirPath + "/apple-touch-icon.png";
+		const favicon16 = dirPath + "/favicon-16x16.png";
+		const favicon32 = dirPath + "/favicon-32x32.png";
+
 		const faviconBuffer = await sharp(inputSrc)
 			.png({ quality: 90 })
 			.resize(48)
 			.toBuffer();
 		await sharp(faviconBuffer).toFile(favicon);
 		consola.success("Favicon generated successfully");
+
+		const favicon32Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(32)
+			.toBuffer();
+		await sharp(favicon32Buffer).toFile(favicon32);
+		consola.success("Favicon-32x32 generated successfully");
+
+		const favicon16Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(16)
+			.toBuffer();
+		await sharp(favicon16Buffer).toFile(favicon16);
+		consola.success("Favicon-16x16 generated successfully");
+
+		const chrome512Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(512)
+			.toBuffer();
+		await sharp(chrome512Buffer).toFile(chrome512);
+		const chrome192Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(192)
+			.toBuffer();
+		await sharp(chrome192Buffer).toFile(chrome192);
+		consola.success("Android icon generated successfully");
+
+		const appleBuffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(180)
+			.toBuffer();
+		await sharp(appleBuffer).toFile(apple);
+		consola.success("iOS icon generated successfully");
+
+		const manifestPath = path.resolve(dirPath, "site.webmanifest");
+		const manifestContent = JSON.stringify(
+			{
+				name: config.website.name,
+				short_name: config.website.short_name,
+				start_url: "/",
+				display: "standalone",
+				background_color: "#ffffff",
+				theme_color: "#000000",
+				icons: [
+					{
+						src: "/android-chrome-192x192.png",
+						sizes: "192x192",
+						type: "image/png",
+					},
+					{
+						src: "/android-chrome-512x512.png",
+						sizes: "512x512",
+						type: "image/png",
+					},
+					{
+						src: "/apple-touch-icon.png",
+						sizes: "180x180",
+						type: "image/png",
+					},
+					{
+						src: "/favicon-32x32.png",
+						sizes: "32x32",
+						type: "image/png",
+					},
+					{
+						src: "/favicon-16x16.png",
+						sizes: "16x16",
+						type: "image/png",
+					},
+				],
+			},
+			null,
+			2,
+		);
+
+		fs.writeFileSync(manifestPath, manifestContent);
+		consola.success("Site Webmanifest file created successfully");
 	} else {
 		consola.error("Directory does not exist:", dirPath);
 	}

frontend/@dasig/scripts/node/optimizeImage.ts

@@ -1,4 +1,5 @@
-// deno-lint-ignore-file no-explicit-any
+/** biome-ignore-all assist/source/organizeImports: <_> */
+/** biome-ignore-all lint/suspicious/noExplicitAny: <_> */
 
 import { consola } from "consola";
 import process from "node:process";

frontend/bun.lock

@@ -22,6 +22,7 @@
       "devDependencies": {
         "@biomejs/biome": "^2.3.7",
         "@types/node": "^24.10.1",
+        "@types/yargs": "^17.0.35",
         "sass-embedded": "^1.93.3",
       },
     },
@@ -86,23 +87,23 @@
 
     "@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],
 
-    "@biomejs/biome": ["@biomejs/biome@2.3.7", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.7", "@biomejs/cli-darwin-x64": "2.3.7", "@biomejs/cli-linux-arm64": "2.3.7", "@biomejs/cli-linux-arm64-musl": "2.3.7", "@biomejs/cli-linux-x64": "2.3.7", "@biomejs/cli-linux-x64-musl": "2.3.7", "@biomejs/cli-win32-arm64": "2.3.7", "@biomejs/cli-win32-x64": "2.3.7" }, "bin": { "biome": "bin/biome" } }, "sha512-CTbAS/jNAiUc6rcq94BrTB8z83O9+BsgWj2sBCQg9rD6Wkh2gjfR87usjx0Ncx0zGXP1NKgT7JNglay5Zfs9jw=="],
+    "@biomejs/biome": ["@biomejs/biome@2.3.8", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.8", "@biomejs/cli-darwin-x64": "2.3.8", "@biomejs/cli-linux-arm64": "2.3.8", "@biomejs/cli-linux-arm64-musl": "2.3.8", "@biomejs/cli-linux-x64": "2.3.8", "@biomejs/cli-linux-x64-musl": "2.3.8", "@biomejs/cli-win32-arm64": "2.3.8", "@biomejs/cli-win32-x64": "2.3.8" }, "bin": { "biome": "bin/biome" } }, "sha512-Qjsgoe6FEBxWAUzwFGFrB+1+M8y/y5kwmg5CHac+GSVOdmOIqsAiXM5QMVGZJ1eCUCLlPZtq4aFAQ0eawEUuUA=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.3.7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-LirkamEwzIUULhXcf2D5b+NatXKeqhOwilM+5eRkbrnr6daKz9rsBL0kNZ16Hcy4b8RFq22SG4tcLwM+yx/wFA=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.3.8", "", { "os": "darwin", "cpu": "arm64" }, "sha512-HM4Zg9CGQ3txTPflxD19n8MFPrmUAjaC7PQdLkugeeC0cQ+PiVrd7i09gaBS/11QKsTDBJhVg85CEIK9f50Qww=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.3.7", "", { "os": "darwin", "cpu": "x64" }, "sha512-Q4TO633kvrMQkKIV7wmf8HXwF0dhdTD9S458LGE24TYgBjSRbuhvio4D5eOQzirEYg6eqxfs53ga/rbdd8nBKg=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.3.8", "", { "os": "darwin", "cpu": "x64" }, "sha512-lUDQ03D7y/qEao7RgdjWVGCu+BLYadhKTm40HkpJIi6kn8LSv5PAwRlew/DmwP4YZ9ke9XXoTIQDO1vAnbRZlA=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.3.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-inHOTdlstUBzgjDcx0ge71U4SVTbwAljmkfi3MC5WzsYCRhancqfeL+sa4Ke6v2ND53WIwCFD5hGsYExoI3EZQ=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.3.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-Uo1OJnIkJgSgF+USx970fsM/drtPcQ39I+JO+Fjsaa9ZdCN1oysQmy6oAGbyESlouz+rzEckLTF6DS7cWse95g=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.3.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-/afy8lto4CB8scWfMdt+NoCZtatBUF62Tk3ilWH2w8ENd5spLhM77zKlFZEvsKJv9AFNHknMl03zO67CiklL2Q=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.3.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-PShR4mM0sjksUMyxbyPNMxoKFPVF48fU8Qe8Sfx6w6F42verbwRLbz+QiKNiDPRJwUoMG1nPM50OBL3aOnTevA=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.3.7", "", { "os": "linux", "cpu": "x64" }, "sha512-fJMc3ZEuo/NaMYo5rvoWjdSS5/uVSW+HPRQujucpZqm2ZCq71b8MKJ9U4th9yrv2L5+5NjPF0nqqILCl8HY/fg=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.3.8", "", { "os": "linux", "cpu": "x64" }, "sha512-QDPMD5bQz6qOVb3kiBui0zKZXASLo0NIQ9JVJio5RveBEFgDgsvJFUvZIbMbUZT3T00M/1wdzwWXk4GIh0KaAw=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.3.7", "", { "os": "linux", "cpu": "x64" }, "sha512-CQUtgH1tIN6e5wiYSJqzSwJumHYolNtaj1dwZGCnZXm2PZU1jOJof9TsyiP3bXNDb+VOR7oo7ZvY01If0W3iFQ=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.3.8", "", { "os": "linux", "cpu": "x64" }, "sha512-YGLkqU91r1276uwSjiUD/xaVikdxgV1QpsicT0bIA1TaieM6E5ibMZeSyjQ/izBn4tKQthUSsVZacmoJfa3pDA=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.3.7", "", { "os": "win32", "cpu": "arm64" }, "sha512-aJAE8eCNyRpcfx2JJAtsPtISnELJ0H4xVVSwnxm13bzI8RwbXMyVtxy2r5DV1xT3WiSP+7LxORcApWw0LM8HiA=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.3.8", "", { "os": "win32", "cpu": "arm64" }, "sha512-H4IoCHvL1fXKDrTALeTKMiE7GGWFAraDwBYFquE/L/5r1927Te0mYIGseXi4F+lrrwhSWbSGt5qPFswNoBaCxg=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.7", "", { "os": "win32", "cpu": "x64" }, "sha512-pulzUshqv9Ed//MiE8MOUeeEkbkSHVDVY5Cz5wVAnH1DUqliCQG3j6s1POaITTFqFfo7AVIx2sWdKpx/GS+Nqw=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.8", "", { "os": "win32", "cpu": "x64" }, "sha512-RguzimPoZWtBapfKhKjcWXBVI91tiSprqdBYu7tWhgN8pKRZhw24rFeNZTNf6UiBfjCYCi9eFQs/JzJZIhuK4w=="],
 
     "@bufbuild/protobuf": ["@bufbuild/protobuf@2.10.1", "", {}, "sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg=="],
 
@@ -396,6 +397,10 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/yargs": ["@types/yargs@17.0.35", "", { "dependencies": { "@types/yargs-parser": "*" } }, "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg=="],
+
+    "@types/yargs-parser": ["@types/yargs-parser@21.0.3", "", {}, "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="],
+
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
     "@vercel/nft": ["@vercel/nft@0.30.4", "", { "dependencies": { "@mapbox/node-pre-gyp": "^2.0.0", "@rollup/pluginutils": "^5.1.3", "acorn": "^8.6.0", "acorn-import-attributes": "^1.9.5", "async-sema": "^3.1.1", "bindings": "^1.4.0", "estree-walker": "2.0.2", "glob": "^10.5.0", "graceful-fs": "^4.2.9", "node-gyp-build": "^4.2.2", "picomatch": "^4.0.2", "resolve-from": "^5.0.0" }, "bin": { "nft": "out/cli.js" } }, "sha512-wE6eAGSXScra60N2l6jWvNtVK0m+sh873CpfZW4KI2v8EHuUQp+mSEi4T+IcdPCSEDgCdAS/7bizbhQlkjzrSA=="],

frontend/configs/config.site.toml

@@ -1,5 +1,6 @@
 [website]
 name = "Dasig"
+short_name = "Dasig"
 description = "An architectural framework for pure speed fullstack development"
 
 [font]
@@ -9,3 +10,4 @@ source = "cdn" # cdn or local
 [copyright]
 name = "Pat Alcala"
 year = 2025
+color = "#ffffffff"

frontend/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.4",
-    "@solidjs/start": "^1.1.0",
+    "@solidjs/start": "^1.2.0",
     "consola": "^3.4.2",
     "dayjs": "^1.11.19",
     "jsencrypt": "^3.5.4",
@@ -20,15 +20,16 @@
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.10",
     "toml": "^3.0.0",
-    "vinxi": "^0.5.7",
+    "vinxi": "^0.5.8",
     "yargs": "^18.0.0"
   },
   "engines": {
     "node": ">=22"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.7",
+    "@biomejs/biome": "^2.3.8",
     "@types/node": "^24.10.1",
+    "@types/yargs": "^17.0.35",
     "sass-embedded": "^1.93.3"
   },
   "trustedDependencies": [

frontend/public/site.webmanifest

@@ -0,0 +1,35 @@
+{
+  "name": "Dasig",
+  "short_name": "Dasig",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    }
+  ]
+}

frontend/src/components/Counter.sass

@@ -14,7 +14,7 @@
   border: 1px solid rgba(22, 34, 60, 0.5)
   padding: 1rem 2rem
   border-radius: 16px
-  background-color: light-dark(rgba(func.darken-color(design.$lightBackground, 10%), 0.8), rgba(func.lighten-color(design.$darkBackground, 10%), 0.8))
+  background-color: light-dark(rgba(func.darken-color(design.$light-background, 10%), 0.8), rgba(func.lighten-color(design.$dark-background, 10%), 0.8))
   transition: background-color 0.6s ease-out
   width: 3rem
 

frontend/src/routes/index.tsx

@@ -1,5 +1,7 @@
-import { Column, Page } from "../../@dasig/index.ts";
+/** biome-ignore-all assist/source/organizeImports: <_> */
-import Counter from "../components/Counter.tsx";
+
+import { Column, Page, Image } from "../../@dasig";
+import Counter from "../components/Counter";
 import "./index.sass";
 
 export default () => {
@@ -11,6 +13,7 @@ export default () => {
           An architectural framework for pure speed fullstack development
         </h4>
         <Counter />
+        <Image name="sample" size={500}></Image>
       </Column>
     </Page>
   );