chore: generacion dinamica de favicons para PWA

.github/workflows/deploy.yml

@@ -39,6 +39,9 @@ jobs:
         env:
             GH_PAT: ${{ secrets.GH_PAT }}
 
+      - name: 🎨 Build Icons
+        run: bun run build:icons
+
       - name: 🏗️ Build
         run: bun run build
         env:

.github/workflows/security.yml

@@ -22,14 +22,6 @@ jobs:
       - name: 📥 Checkout Repository
         uses: actions/checkout@v4
 
-      - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@v2
-
-      - name: 🧶 Install Dependencies
-        run: bun install --frozen-lockfile
-        env:
-            GH_PAT: ${{ secrets.GH_PAT }}
-
       - name: 🚀 Initialize CodeQL
         uses: github/codeql-action/init@v3
         with:

.github/workflows/verify.yml

@@ -33,6 +33,9 @@ jobs:
       - name: 🛡️ Type Check
         run: bun run check
 
+      - name: 🎨 Build Icons
+        run: bun run build:icons
+
       - name: 🏗️ Build
         run: bun run build
         env:

.gitignore

@@ -23,3 +23,11 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 dev-dist/
+
+# dinamic favicons
+apple-icon-180.png
+favicon-196.png
+manifest-icon-192.png
+manifest-icon-192.maskable.png
+manifest-icon-512.png
+manifest-icon-512.maskable.png

.prettierrc

@@ -11,6 +11,5 @@
 				"parser": "svelte"
 			}
 		}
-	],
-	"tailwindStylesheet": "./src/routes/layout.css"
+	]
 }

README.md

@@ -12,20 +12,20 @@ Ahora integrando [GradeSolver](https://github.com/madmti/GradeSolver) como modul
 1. Clona el repositorio
 
 ```bash
-git clone https://github.com/Ramo-Libre/Web.git
+git clone https://github.com/Ramo-Libre/Web.git Ramo-Libre-Web
 cd Ramo-Libre-Web
 ```
 
 2. Instala las dependencias
 
 ```bash
-pnpm install
+bun install
 ```
 
 3. Inicia el servidor local de supabase
 
 ```bash
-pnpx supabase start
+bunx supabase start
 ```
 
 4. Configura las variables de entorno
@@ -37,7 +37,7 @@ cp .env.example .env
 Edita el archivo `.env` con tus credenciales de Supabase y cualquier otra configuración necesaria. Asegúrate de configurar correctamente la URL y la publishable key de Supabase. 5. Inicia el servidor de desarrollo
 
 ```bash
-pnpm run dev
+bun run dev
 ```
 
 5. Abre tu navegador en `http://localhost:5173` para ver la aplicación en acción.

package.json

@@ -9,6 +9,7 @@
 	},
 	"scripts": {
 		"dev": "vite dev",
+		"build:icons": "bunx pwa-asset-generator node_modules/@ramo-libre/ui-themes/src/assets/web.svg static --icon-only --opaque=false --name pwa && bunx pwa-asset-generator node_modules/@ramo-libre/ui-themes/src/assets/web.svg static --icon-only --type=png --background=#ffffff --name maskable-icon",
 		"build": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import '@ramo-libre/ui-themes/tailwind.css';
+	import '@ramo-libre/ui-themes/tailwind.css';
 	import './custom.css';
 	import { onMount } from 'svelte';
 	import { pwaInfo } from 'virtual:pwa-info';

vite.config.ts

@@ -22,37 +22,44 @@ export default defineConfig({
 				display_override: ['window-controls-overlay'],
 				icons: [
 					{
-						src: 'pwa-64x64.png',
-						sizes: '64x64',
+						src: 'apple-icon-180.png',
+						sizes: '180x180',
 						type: 'image/png'
 					},
 					{
-						src: 'pwa-192x192.png',
-						sizes: '192x192',
+						src: 'favicon-196.png',
+						sizes: '196x196',
 						type: 'image/png'
 					},
 					{
-						src: 'pwa-512x512.png',
-						sizes: '512x512',
+						src: 'manifest-icon-192.maskable.png',
+						sizes: '192x192',
+						type: 'image/png',
+						purpose: 'maskable'
+					},
+					{
+						src: 'manifest-icon-192.png',
+						sizes: '192x192',
 						type: 'image/png',
 						purpose: 'any'
 					},
 					{
-						src: 'maskable-icon-512x512.png',
+						src: 'manifest-icon-512.maskable.png',
 						sizes: '512x512',
 						type: 'image/png',
 						purpose: 'maskable'
 					},
 					{
-						src: 'apple-touch-icon-180x180.png',
-						sizes: '180x180',
-						type: 'image/png'
+						src: 'manifest-icon-512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'any'
 					}
 				]
 			},
 			workbox: {
-                globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
-                globIgnores: ['**/stats.html']
+				globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+				globIgnores: ['**/stats.html']
 			},
 			devOptions: {
 				enabled: true