elk-zone · userquin · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 5, 2024
diff --git a/modules/pwa/i18n.ts b/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',

diff --git a/public-dev/apple-touch-icon.png b/public-dev/apple-touch-icon.png
diff --git a/public-dev/maskable-icon.png b/public-dev/maskable-icon.png
diff --git a/public-dev/monochrome-192x192.png b/public-dev/monochrome-192x192.png
diff --git a/public-dev/monochrome-512x512.png b/public-dev/monochrome-512x512.png
diff --git a/public-dev/monochrome-64x64.png b/public-dev/monochrome-64x64.png
diff --git a/public-dev/pwa-192x192.png b/public-dev/pwa-192x192.png
diff --git a/public-dev/pwa-512x512.png b/public-dev/pwa-512x512.png
diff --git a/public-dev/pwa-64x64.png b/public-dev/pwa-64x64.png
diff --git a/public-staging/apple-touch-icon.png b/public-staging/apple-touch-icon.png
diff --git a/public-staging/maskable-icon.png b/public-staging/maskable-icon.png
diff --git a/public-staging/monochrome-192x192.png b/public-staging/monochrome-192x192.png
diff --git a/public-staging/monochrome-512x512.png b/public-staging/monochrome-512x512.png
diff --git a/public-staging/monochrome-64x64.png b/public-staging/monochrome-64x64.png
diff --git a/public-staging/pwa-192x192.png b/public-staging/pwa-192x192.png
diff --git a/public-staging/pwa-512x512.png b/public-staging/pwa-512x512.png
diff --git a/public-staging/pwa-64x64.png b/public-staging/pwa-64x64.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/maskable-icon.png b/public/maskable-icon.png
diff --git a/public/monochrome-192x192.png b/public/monochrome-192x192.png
diff --git a/public/monochrome-512x512.png b/public/monochrome-512x512.png
diff --git a/public/monochrome-64x64.png b/public/monochrome-64x64.png
diff --git a/public/monochrome-logo.svg b/public/monochrome-logo.svg
diff --git a/public/pwa-192x192.png b/public/pwa-192x192.png
diff --git a/public/pwa-512x512.png b/public/pwa-512x512.png
diff --git a/public/pwa-64x64.png b/public/pwa-64x64.png
diff --git a/scripts/generate-pwa-icons.ts b/scripts/generate-pwa-icons.ts
@@ -1,4 +1,4 @@
-import { rm, writeFile } from 'node:fs/promises'
+import { copyFile, rm, writeFile } from 'node:fs/promises'
 import process from 'node:process'
 import { resolve } from 'pathe'
 import type { PngOptions, ResizeOptions } from 'sharp'
@@ -189,6 +189,34 @@ 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])
+
+  // copy monochrome png files to public dev and staging folders
+  await Promise.all(folders.slice(1).map(async (folder) => {
+    await Promise.all(transparent.sizes.map(size => copyFile(
+      resolve(folders[0], `monochrome-${size}x${size}.png`),
+      resolve(folder, `monochrome-${size}x${size}.png`),
+    )))
+  }))
 }
 
 console.log('Generating Elk PWA Icons...')