feat(pwa): add monochrome manifest icons

modules/pwa/i18n.ts

@@ -83,11 +83,23 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
         sizes: '64x64',
         type: 'image/png',
       },
+      {
+        src: 'monochrome-64x64.png',
+        sizes: '64x64',
+        type: 'image/png',
+        purpose: 'monochrome',
+      },
       {
         src: 'pwa-192x192.png',
         sizes: '192x192',
         type: 'image/png',
       },
+      {
+        src: 'monochrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+        purpose: 'monochrome',
+      },
       {
         src: 'pwa-512x512.png',
         sizes: '512x512',
@@ -100,6 +112,12 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
         type: 'image/png',
         purpose: 'maskable',
       },
+      {
+        src: 'monochrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'monochrome',
+      },
     ],
     share_target: {
       action: '/web-share-target',

package.json

@@ -134,7 +134,7 @@
     "lint-staged": "^15.2.2",
     "nuxt": "^3.11.2",
     "prettier": "^3.2.5",
-    "sharp": "^0.33.3",
+    "sharp": "0.32.6",
     "sharp-ico": "^0.1.5",
     "simple-git-hooks": "^2.11.1",
     "tsx": "^4.7.2",

public/monochrome-logo.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="250"
+   height="250"
+   fill="none"
+   version="1.1"
+   id="svg30"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs34" />
+  <mask
+     id="a"
+     width="240"
+     height="234"
+     x="4"
+     y="1"
+     maskUnits="userSpaceOnUse"
+     style="mask-type:alpha">
+    <path
+       fill="white"
+       d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
+       id="path19" />
+  </mask>
+  <g
+     mask="url(#a)"
+     id="g28"
+     transform="matrix(0.90923731,0,0,1.0049564,13.520015,-3.1040835)">
+    <path
+       fill="#4b4b4b"
+       d="m 116.94,88.1 c -13.344,1.552 -20.436,-2.019 -24.706,10.71 0,0 14.336,21.655 52.54,21.112 -2.135,8.848 -1.144,15.368 -1.144,23.207 0,26.079 -20.589,48.821 -65.961,48.821 -23.03,0 -51.015,4.191 -72.367,15.911 -15.175,8.305 -27.048,20.336 -32.302,37.023 l 5.956,8.461 11.4,0.155 v 47.889 l -13.91,21.966 3.998,63.645 H -6.364 L -5.22,335.773 C 1.338,331.892 16.36,321.802 29.171,306.279 46.557,285.4 59.902,255.052 44.193,217.486 l 11.744,-5.045 c 12.887,30.814 8.388,57.514 -2.898,79.013 21.58,-0.698 40.11,-2.095 55.819,-4.734 l -3.584,-43.698 12.659,-1.087 L 129.98,387 h 13.116 l 2.212,-94.459 c 10.447,-4.502 34.239,-21.034 45.372,-78.47 1.372,-6.986 2.135,-12.885 2.516,-17.93 1.754,-12.806 2.745,-27.243 3.051,-43.698 l -18.683,-5.976 h 57.42 l 5.567,-12.807 c -5.414,0.233 -11.896,-2.639 -11.896,-2.639 l 1.297,-6.209 H 242 L 176.801,90.428 c -7.244,2.794 -14.87,6.442 -20.208,10.866 -4.27,-3.105 -19.063,-12.807 -39.653,-13.195 z"
+       id="path22" />
+    <path
+       fill="#4b4b4b"
+       d="M 6.217,24.493 18.494,21 c 5.948,21.577 13.345,33.375 22.648,39.352 8.388,5.099 19.75,5.239 31.799,4.579 C 69.433,63.767 66.154,62.137 63.104,59.886 56.317,54.841 50.522,46.458 46.175,31.246 l 12.201,-3.649 c 3.279,11.488 7.092,18.085 12.201,21.888 5.11,3.726 11.286,4.657 18.606,5.433 13.726,1.553 30.884,2.174 52.312,12.264 2.898,1.086 5.872,2.483 8.769,4.036 -0.381,-0.776 -0.762,-1.553 -1.296,-2.406 -3.66,-5.822 -10.828,-11.953 -24.097,-16.92 l 4.27,-12.109 c 21.581,7.917 30.121,19.171 33.553,28.097 3.965,10.168 1.525,18.124 1.525,18.124 -3.05,1.009 -6.1,2.406 -9.608,3.492 -6.634,-4.579 -12.887,-8.033 -18.835,-10.75 C 113.814,70.442 92.31,76.108 73.246,77.893 58.91,79.213 45.794,78.591 34.432,71.295 23.222,64.155 13.385,50.495 6.217,24.493 Z"
+       id="path24" />
+    <path
+       fill="#4b4b4b"
+       d="M 90.098,45.294 C 87.582,39.55 86.057,32.487 86.743,23.794 l 12.659,0.932 c -0.763,10.555 2.897,17.696 7.015,22.353 -5.338,-0.931 -10.447,-1.04 -16.319,-1.785 z m 80.069,-1.32 8.312,-9.702 c 21.58,19.094 8.159,46.415 8.159,46.415 l -11.819,-1.32 c -0.382,-6.24 -1.144,-17.836 -6.635,-24.371 3.584,1.84 6.635,3.865 9.99,6.908 0,-5.666 -1.754,-12.341 -8.007,-17.93 z"
+       id="path26" />
+  </g>
+</svg>

scripts/generate-pwa-icons.ts

@@ -90,6 +90,7 @@ async function generateTransparentIcons(icons: ResolvedIcons, svgLogo: string, f
   const { sizes, padding, resizeOptions } = icons.transparent
   await Promise.all(sizes.map(async (size) => {
     const filePath = resolve(folder, icons.iconName('transparent', size))
+    console.log(filePath)
     await sharp({
       create: {
         width: size,
@@ -189,6 +190,26 @@ async function generatePWAIcons(folders: string[], icons: Icons) {
     apple,
     ico,
   })))
+
+  const svgLogo = resolve(folders[0], 'monochrome-logo.svg')
+
+  await generateTransparentIcons({
+    png: { compressionLevel: 9, quality: 60 },
+    iconName: (type, size) => {
+      switch (type) {
+        case 'transparent':
+          return `monochrome-${size}x${size}-temp.png`
+        case 'maskable':
+          return `maskable-icon-${size}x${size}.png`
+        case 'apple':
+          return `apple-touch-icon-${size}x${size}.png`
+      }
+    },
+    transparent,
+    maskable,
+    apple,
+    ico,
+  }, svgLogo, folders[0])
 }
 
 console.log('Generating Elk PWA Icons...')