diff --git a/.gitignore b/.gitignore index 6d1f429..57b10a5 100644 --- a/.gitignore +++ b/.gitignore @@ -29,6 +29,7 @@ dist.tar.gz # auto-generated build file for PWA dev-dist/sw.js +public/icons/ aio-shadcn-vite.code-workspace dev-dist .specstory/history diff --git a/package.json b/package.json index 4fea5ac..0b56888 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "type": "module", "main": "electron/main.cjs", "scripts": { + "generate-pwa-assets": "pwa-assets-generator", "dev": "vite --host", "build": "vue-tsc -b && vite build", "preview": "vite preview --host", @@ -92,6 +93,7 @@ "@types/node": "^22.18.1", "@types/qrcode": "^1.5.5", "@types/rollup-plugin-visualizer": "^4.2.3", + "@vite-pwa/assets-generator": "^1.0.2", "@vitejs/plugin-vue": "^5.2.1", "@vue/tsconfig": "^0.7.0", "concurrently": "^8.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1a8b7c..c242e32 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -150,6 +150,9 @@ importers: '@types/rollup-plugin-visualizer': specifier: ^4.2.3 version: 4.2.4 + '@vite-pwa/assets-generator': + specifier: ^1.0.2 + version: 1.0.2 '@vitejs/plugin-vue': specifier: ^5.2.1 version: 5.2.4(vite@6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0))(vue@3.5.34(typescript@5.6.3)) @@ -188,7 +191,7 @@ importers: version: 0.8.9(rollup@4.60.4)(vite@6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)) vite-plugin-pwa: specifier: ^0.21.1 - version: 0.21.2(vite@6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0))(workbox-build@7.4.1)(workbox-window@7.4.1) + version: 0.21.2(@vite-pwa/assets-generator@1.0.2)(vite@6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0))(workbox-build@7.4.1)(workbox-window@7.4.1) vue-tsc: specifier: ^2.2.0 version: 2.2.12(typescript@5.6.3) @@ -711,6 +714,9 @@ packages: resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==} engines: {node: '>=6.9.0'} + '@canvas/image-data@1.1.0': + resolution: {integrity: sha512-QdObRRjRbcXGmM1tmJ+MrHcaz1MftF2+W7YI+MsphnsCrmtyfS0d5qJbk0MeSbUeyM/jCb0hmnkXPsy026L7dA==} + '@electron-forge/cli@7.11.2': resolution: {integrity: sha512-c+C4ndLfHbxwZuCn9G8iT9wD/woLdaVkoSVjAIbj+0nJhi8UmiVsz/+Gxlj4cvhMRTzBMBxudstLU7RocMikfg==} engines: {node: '>= 16.4.0'} @@ -1283,6 +1289,9 @@ packages: '@polka/url@1.0.0-next.29': resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} + '@quansync/fs@1.0.0': + resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==} + '@rollup/plugin-babel@6.1.0': resolution: {integrity: sha512-dFZNuFD2YRcoomP4oYf+DvQNSUA9ih+A3vUqopQx5EdtPGo3WBnQcI/S8pwpz91UsGfL0HsMSOlaMld8HrbubA==} engines: {node: '>=14.0.0'} @@ -1697,6 +1706,11 @@ packages: peerDependencies: zod: ^3.24.0 + '@vite-pwa/assets-generator@1.0.2': + resolution: {integrity: sha512-MCbrb508JZHqe7bUibmZj/lyojdhLRnfkmyXnkrCM2zVrjTgL89U8UEfInpKTvPeTnxsw2hmyZxnhsdNR6yhwg==} + engines: {node: '>=16.14.0'} + hasBin: true + '@vitejs/plugin-vue@5.2.4': resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==} engines: {node: ^18.0.0 || >=20.0.0} @@ -2121,6 +2135,10 @@ packages: resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==} engines: {node: '>=18'} + cac@6.7.14: + resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} + engines: {node: '>=8'} + cacache@16.1.3: resolution: {integrity: sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} @@ -2267,6 +2285,10 @@ packages: engines: {node: ^14.13.0 || >=16.0.0} hasBin: true + consola@3.4.2: + resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==} + engines: {node: ^14.18.0 || >=16.10.0} + convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} @@ -2366,6 +2388,14 @@ packages: resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==} engines: {node: '>=0.10.0'} + decode-bmp@0.2.1: + resolution: {integrity: sha512-NiOaGe+GN0KJqi2STf24hfMkFitDUaIoUU3eKvP/wAbLe8o6FuW5n/x7MHPR0HKvBokp6MQY/j7w8lewEeVCIA==} + engines: {node: '>=8.6.0'} + + decode-ico@0.4.1: + resolution: {integrity: sha512-69NZfbKIzux1vBOd31al3XnMnH+2mqDhEgLdpygErm4d60N+UwA5Sq5WFjmEDQzumgB9fElojGwWG0vybVfFmA==} + engines: {node: '>=8.6'} + decompress-response@6.0.0: resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==} engines: {node: '>=10'} @@ -2890,6 +2920,9 @@ packages: humanize-ms@1.2.1: resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==} + ico-endec@0.1.6: + resolution: {integrity: sha512-ZdLU38ZoED3g1j3iEyzcQj+wAkY2xfWNkymszfJPoxucIUhK7NayQ+/C4Kv0nDFMIsbtbEHldv3V8PU494/ueQ==} + iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -3800,6 +3833,9 @@ packages: engines: {node: '>=10.13.0'} hasBin: true + quansync@1.0.0: + resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==} + queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} @@ -4020,6 +4056,9 @@ packages: resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==} engines: {node: '>= 0.4'} + sharp-ico@0.1.5: + resolution: {integrity: sha512-a3jODQl82NPp1d5OYb0wY+oFaPk7AvyxipIowCHk7pBsZCWgbe0yAkU2OOXdoH0ENyANhyOQbs9xkAiRHcF02Q==} + sharp@0.33.5: resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -4322,6 +4361,9 @@ packages: resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==} engines: {node: '>=14.14'} + to-data-view@1.1.0: + resolution: {integrity: sha512-1eAdufMg6mwgmlojAx3QeMnzB/BTVp7Tbndi3U7ftcT2zCZadjxkkmLmd97zmaxWi+sgGcgWrokmpEoy0Dn0vQ==} + to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -4397,6 +4439,12 @@ packages: resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==} engines: {node: '>= 0.4'} + unconfig-core@7.5.0: + resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==} + + unconfig@7.5.0: + resolution: {integrity: sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==} + undici-types@6.21.0: resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==} @@ -5456,6 +5504,8 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.28.5 + '@canvas/image-data@1.1.0': {} + '@electron-forge/cli@7.11.2(encoding@0.1.13)(lightningcss@1.32.0)': dependencies: '@electron-forge/core': 7.11.2(encoding@0.1.13)(lightningcss@1.32.0) @@ -6234,6 +6284,10 @@ snapshots: '@polka/url@1.0.0-next.29': {} + '@quansync/fs@1.0.0': + dependencies: + quansync: 1.0.0 + '@rollup/plugin-babel@6.1.0(@babel/core@7.29.0)(rollup@4.60.4)': dependencies: '@babel/core': 7.29.0 @@ -6559,6 +6613,15 @@ snapshots: transitivePeerDependencies: - vue + '@vite-pwa/assets-generator@1.0.2': + dependencies: + cac: 6.7.14 + colorette: 2.0.20 + consola: 3.4.2 + sharp: 0.33.5 + sharp-ico: 0.1.5 + unconfig: 7.5.0 + '@vitejs/plugin-vue@5.2.4(vite@6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0))(vue@3.5.34(typescript@5.6.3))': dependencies: vite: 6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0) @@ -7030,6 +7093,8 @@ snapshots: dependencies: run-applescript: 7.1.0 + cac@6.7.14: {} + cacache@16.1.3: dependencies: '@npmcli/fs': 2.1.2 @@ -7193,6 +7258,8 @@ snapshots: tree-kill: 1.2.2 yargs: 17.7.2 + consola@3.4.2: {} + convert-source-map@2.0.0: {} copy-anything@4.0.5: @@ -7287,6 +7354,17 @@ snapshots: decamelize@1.2.0: {} + decode-bmp@0.2.1: + dependencies: + '@canvas/image-data': 1.1.0 + to-data-view: 1.1.0 + + decode-ico@0.4.1: + dependencies: + '@canvas/image-data': 1.1.0 + decode-bmp: 0.2.1 + to-data-view: 1.1.0 + decompress-response@6.0.0: dependencies: mimic-response: 3.1.0 @@ -7973,6 +8051,8 @@ snapshots: dependencies: ms: 2.1.3 + ico-endec@0.1.6: {} + iconv-lite@0.4.24: dependencies: safer-buffer: 2.1.2 @@ -8769,6 +8849,8 @@ snapshots: pngjs: 5.0.0 yargs: 15.4.1 + quansync@1.0.0: {} + queue-microtask@1.2.3: {} quick-lru@5.1.1: {} @@ -9058,6 +9140,12 @@ snapshots: es-errors: 1.3.0 es-object-atoms: 1.1.2 + sharp-ico@0.1.5: + dependencies: + decode-ico: 0.4.1 + ico-endec: 0.1.6 + sharp: 0.33.5 + sharp@0.33.5: dependencies: color: 4.2.3 @@ -9387,6 +9475,8 @@ snapshots: tmp@0.2.5: optional: true + to-data-view@1.1.0: {} + to-regex-range@5.0.1: dependencies: is-number: 7.0.0 @@ -9462,6 +9552,19 @@ snapshots: has-symbols: 1.1.0 which-boxed-primitive: 1.1.1 + unconfig-core@7.5.0: + dependencies: + '@quansync/fs': 1.0.0 + quansync: 1.0.0 + + unconfig@7.5.0: + dependencies: + '@quansync/fs': 1.0.0 + defu: 6.1.7 + jiti: 2.7.0 + quansync: 1.0.0 + unconfig-core: 7.5.0 + undici-types@6.21.0: {} unicode-canonical-property-names-ecmascript@2.0.1: {} @@ -9543,7 +9646,7 @@ snapshots: - rollup - supports-color - vite-plugin-pwa@0.21.2(vite@6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0))(workbox-build@7.4.1)(workbox-window@7.4.1): + vite-plugin-pwa@0.21.2(@vite-pwa/assets-generator@1.0.2)(vite@6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0))(workbox-build@7.4.1)(workbox-window@7.4.1): dependencies: debug: 4.4.3 pretty-bytes: 6.1.1 @@ -9551,6 +9654,8 @@ snapshots: vite: 6.4.2(@types/node@22.19.19)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0) workbox-build: 7.4.1 workbox-window: 7.4.1 + optionalDependencies: + '@vite-pwa/assets-generator': 1.0.2 transitivePeerDependencies: - supports-color diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts new file mode 100644 index 0000000..93fee71 --- /dev/null +++ b/pwa-assets.config.ts @@ -0,0 +1,54 @@ +import { defineConfig } from '@vite-pwa/assets-generator/config' +import { copyFileSync, existsSync, mkdirSync } from 'node:fs' +import { join, resolve } from 'node:path' + +const BRAND_DIR = process.env.BRAND_DIR ?? './branding/default' +const BRAND_APP = process.env.BRAND_APP ?? '' + +const candidates: string[] = [] +if (BRAND_APP) { + candidates.push( + join(BRAND_DIR, 'icons', BRAND_APP, 'logo.svg'), + join(BRAND_DIR, 'icons', BRAND_APP, 'logo.png'), + ) +} +candidates.push( + join(BRAND_DIR, 'logo.svg'), + join(BRAND_DIR, 'logo.png'), +) + +const source = candidates.find((p) => existsSync(p)) +if (!source) { + throw new Error( + `No brand logo found. Tried:\n ${candidates.join('\n ')}\n` + + `See branding/README.md for the brand kit contract.`, + ) +} + +// The CLI emits next to the source. Stage into public/icons/ so generated +// PNGs are served at /icons/.png and a single .gitignore line covers +// the whole tree. +const stagingDir = resolve('public/icons') +mkdirSync(stagingDir, { recursive: true }) +const sourceExt = source.toLowerCase().endsWith('.svg') ? '.svg' : '.png' +const stagedSource = join(stagingDir, `.brand-source${sourceExt}`) +copyFileSync(source, stagedSource) + +export default defineConfig({ + headLinkOptions: { preset: '2023' }, + preset: { + transparent: { + sizes: [192, 512], + favicons: [[48, 'favicon.ico']], + }, + maskable: { sizes: [192, 512] }, + apple: { sizes: [180] }, + assetName: (type, size) => { + if (type === 'transparent') return `icon-${size.width}.png` + if (type === 'maskable') return `icon-maskable-${size.width}.png` + if (type === 'apple') return 'apple-touch-icon.png' + throw new Error(`Unknown asset type: ${type}`) + }, + }, + images: [stagedSource], +})