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";
-export { default as Display } from "./components/Display.tsx";
-export { default as HTML } from "./components/HTML.tsx";
-export { default as Page } from "./components/Page.tsx";
+/** biome-ignore-all assist/source/organizeImports: <_> */
+
+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";
+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";