From b94f24bfc27df2ca6c64b7153e7627e08710da37 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Sun, 22 May 2022 23:21:38 +0200 Subject: [PATCH 01/17] feat(): Image creation with logo --- lib/splash.cjs | 43 +++++++++++++++++++++++++++++++++++++++++++ src/icon.ts | 19 +++++++++++++++++++ src/module.ts | 8 ++++++-- src/types.ts | 10 ++++++++-- 4 files changed, 76 insertions(+), 4 deletions(-) create mode 100644 lib/splash.cjs diff --git a/lib/splash.cjs b/lib/splash.cjs new file mode 100644 index 0000000..199d527 --- /dev/null +++ b/lib/splash.cjs @@ -0,0 +1,43 @@ +const { remove, mkdirp } = require('fs-extra') +const { join } = require('pathe') +const sharp = require('sharp') + +const devices = [ + { + name: 'iphone6', + width: 750, + height: 1334 + }, + { + name: 'iphone7-plus', + width: 1242, + height: 2208 + }, + // and so on for ALL devices +] + +async function splashCreation({ input, distDir, backgroundColor }) { + await remove(distDir) + await mkdirp(distDir) + await Promise.all(devices.map(device => + sharp({ + create: { + width: device.width, + height: device.height, + channels: 4, + background: backgroundColor + } + }).composite([ + {input} + ]) + .png() + .toFile(join(distDir, `${device.name}-splash-screen.png`)) + )) +} + +splashCreation(JSON.parse(process.argv[2])).then(() => { + process.exit(0) +}).catch((error) => { + console.error(error) // eslint-disable-line no-console + process.exit(1) +}) diff --git a/src/icon.ts b/src/icon.ts index 2bf6aef..0ab7e65 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -54,7 +54,16 @@ export default async (pwa: PWAContext) => { suffix: iconSuffix }) + + // DIRECT for DEV only + const iosSplashSreenOption = JSON.stringify({ + input: options.source, + distDir: join(pwa._assetsDir, pwa.manifest.iosSplashSreen.targetDir), + backgroundColor: pwa.manifest.iosSplashSreen.backgroundColor + }) + let generate: Promise + let generateIosSplashScreen: Promise // Start generation when Nuxt build dir (.nuxt) is available nuxt.hook('prepare:types', () => { @@ -63,14 +72,24 @@ export default async (pwa: PWAContext) => { // Generation Promise (generate in a child process using fork) generate = new Promise((resolve, reject) => { const child = fork(pwa._resolver.resolve('../lib/resize.cjs'), [resizeOptions]) + // launch splash screen generation child.on('exit', (code: number) => code ? reject(code) : resolve()) }).then(() => { consola.success(`PWA icons generated in ${Date.now() - start} ms`) }) + generateIosSplashScreen = new Promise((resolve, reject) => { + const child = fork(pwa._resolver.resolve('../lib/splash.cjs'), [iosSplashSreenOption]) + child.on('exit', (code: number) => code ? reject(code) : resolve()) + }).then(() => { + // inject ios splash screeen into head + // then + consola.success(`Splash Screen genrated in ${Date.now() - start} ms`) + }) }) // Ensure icons have been generated before Nitro build nuxt.hook('nitro:build:before', async () => { await generate + await generateIosSplashScreen }) } diff --git a/src/module.ts b/src/module.ts index c294592..6a371ec 100644 --- a/src/module.ts +++ b/src/module.ts @@ -15,7 +15,7 @@ export default defineNuxtModule({ source: null, sizes: [], fileName: 'icon.png', - targetDir: 'icons' + targetDir: 'icons', }, manifest: { name: process.env.npm_package_name!, @@ -26,7 +26,11 @@ export default defineNuxtModule({ display: 'standalone', background_color: '#ffffff', theme_color: '#000000', - icons: [] + icons: [], + iosSplashSreen: { + targetDir: 'splash', + backgroundColor: '#ffffff' + } }, meta: { name: process.env.npm_package_name!, diff --git a/src/types.ts b/src/types.ts index c8bbe98..10c49ac 100644 --- a/src/types.ts +++ b/src/types.ts @@ -24,7 +24,8 @@ export interface MetaOptions { ogUrl: boolean | string twitterCard: string | undefined twitterSite: string | undefined - twitterCreator: string | undefined + twitterCreator: string | undefined, + } export interface ManifestOptions { @@ -41,7 +42,12 @@ export interface ManifestOptions { type: string sizes: String purpose?: string - }> + }>, + iosSplashSreen: { + // fileName: string + targetDir: string, + backgroundColor: string + } } export interface WorkboxOptions { From c70d73b9a52c32b2aecb44d4cce68ca4acf79485 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Sun, 22 May 2022 23:26:20 +0200 Subject: [PATCH 02/17] feat(): Add width-heigth on name file for easy head inject --- lib/splash.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/splash.cjs b/lib/splash.cjs index 199d527..f334a0d 100644 --- a/lib/splash.cjs +++ b/lib/splash.cjs @@ -31,7 +31,7 @@ async function splashCreation({ input, distDir, backgroundColor }) { {input} ]) .png() - .toFile(join(distDir, `${device.name}-splash-screen.png`)) + .toFile(join(distDir, `${device.name}-${device.width}-${device.height}-splash-screen.png`)) )) } From a73c881be6d2e49ec58b3b3f8e6ddc28ab0ccf75 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Sun, 22 May 2022 23:37:22 +0200 Subject: [PATCH 03/17] feat(): Inject in Meta --- src/meta.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/meta.ts b/src/meta.ts index f83810f..8cb49be 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -37,7 +37,23 @@ export default (pwa: PWAContext) => { head.link.push({ rel: 'apple-touch-icon', href: iconBig.src, sizes: iconBig.sizes }) } - // TODO: Launch Screen Image (IOS) + } + // TODO: Launch Screen Image (IOS) + if (pwa.manifest.iosSplashSreen) { + // get all images name , split `-` , get w and h , then inject + head.link.push( + { href: `${pwa.manifest.iosSplashSreen.targetDir}/iphone6-splash-screen.png`, media: "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)", rel: "apple-touch-startup-image" } + // < link href = "splashscreens/iphone5_splash.png" media = "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel = "apple-touch-startup-image" /> + // + // + // + // + // + // + // + // + // + ) } // Title From 04f40d70f86721b2ce7d5d8e8282f8c605ba38dd Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Mon, 23 May 2022 17:20:39 +0200 Subject: [PATCH 04/17] feat: Generate and inject meta base on one Devices Array --- lib/splash.cjs | 43 ++++++++++++++++++++++++++++++------------- src/meta.ts | 47 +++++++++++++++++++++++++++++++++-------------- 2 files changed, 63 insertions(+), 27 deletions(-) diff --git a/lib/splash.cjs b/lib/splash.cjs index f334a0d..39a3177 100644 --- a/lib/splash.cjs +++ b/lib/splash.cjs @@ -2,20 +2,37 @@ const { remove, mkdirp } = require('fs-extra') const { join } = require('pathe') const sharp = require('sharp') + +// should be one ONE file const devices = [ - { - name: 'iphone6', - width: 750, - height: 1334 - }, - { - name: 'iphone7-plus', - width: 1242, - height: 2208 - }, - // and so on for ALL devices + { width: 2732, height: 2048, pixelRatio: 2, orientation: 'landscape' }, + { width: 1668, height: 2388, pixelRatio: 2, orientation: 'portrait' }, + { width: 2388, height: 1668, pixelRatio: 2, orientation: 'landscape' }, + { width: 1536, height: 2048, pixelRatio: 2, orientation: 'portrait' }, + { width: 2048, height: 1536, pixelRatio: 2, orientation: 'landscape' }, + { width: 1668, height: 2224, pixelRatio: 2, orientation: 'portrait' }, + { width: 2224, height: 1668, pixelRatio: 2, orientation: 'landscape' }, + { width: 1620, height: 2160, pixelRatio: 2, orientation: 'portrait' }, + { width: 2160, height: 1620, pixelRatio: 2, orientation: 'landscape' }, + { width: 1284, height: 2778, pixelRatio: 2, orientation: 'portrait' }, + { width: 2778, height: 1284, pixelRatio: 3, orientation: 'landscape' }, + { width: 1170, height: 2532, pixelRatio: 3, orientation: 'portrait' }, + { width: 2532, height: 1170, pixelRatio: 3, orientation: 'landscape' }, + { width: 1125, height: 2436, pixelRatio: 3, orientation: 'portrait' }, + { width: 2436, height: 1125, pixelRatio: 3, orientation: 'landscape' }, + { width: 1242, height: 2688, pixelRatio: 3, orientation: 'portrait' }, + { width: 2688, height: 1242, pixelRatio: 3, orientation: 'landscape' }, + { width: 828, height: 1792, pixelRatio: 2, orientation: 'portrait' }, + { width: 1792, height: 828, pixelRatio: 2, orientation: 'landscape' }, + { width: 1242, height: 2208, pixelRatio: 2, orientation: 'portrait' }, + { width: 2208, height: 1242, pixelRatio: 2, orientation: 'landscape' }, + { width: 750, height: 1334, pixelRatio: 2, orientation: 'portrait' }, + { width: 1334, height: 750, pixelRatio: 2, orientation: 'landscape' }, + { width: 640, height: 1136, pixelRatio: 2, orientation: 'portrait' }, + { width: 1136, height: 640, pixelRatio: 2, orientation: 'landscape' } ] + async function splashCreation({ input, distDir, backgroundColor }) { await remove(distDir) await mkdirp(distDir) @@ -28,10 +45,10 @@ async function splashCreation({ input, distDir, backgroundColor }) { background: backgroundColor } }).composite([ - {input} + { input } ]) .png() - .toFile(join(distDir, `${device.name}-${device.width}-${device.height}-splash-screen.png`)) + .toFile(join(distDir, `${device.width}-${device.height}-splash-screen.png`)) )) } diff --git a/src/meta.ts b/src/meta.ts index 8cb49be..eb9f960 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -40,20 +40,39 @@ export default (pwa: PWAContext) => { } // TODO: Launch Screen Image (IOS) if (pwa.manifest.iosSplashSreen) { - // get all images name , split `-` , get w and h , then inject - head.link.push( - { href: `${pwa.manifest.iosSplashSreen.targetDir}/iphone6-splash-screen.png`, media: "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)", rel: "apple-touch-startup-image" } - // < link href = "splashscreens/iphone5_splash.png" media = "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel = "apple-touch-startup-image" /> - // - // - // - // - // - // - // - // - // - ) + // Load from constat file + const devices = [ + { width: 2732, height: 2048, pixelRatio: 2, orientation: 'landscape' }, + { width: 1668, height: 2388, pixelRatio: 2, orientation: 'portrait' }, + { width: 2388, height: 1668, pixelRatio: 2, orientation: 'landscape' }, + { width: 1536, height: 2048, pixelRatio: 2, orientation: 'portrait' }, + { width: 2048, height: 1536, pixelRatio: 2, orientation: 'landscape' }, + { width: 1668, height: 2224, pixelRatio: 2, orientation: 'portrait' }, + { width: 2224, height: 1668, pixelRatio: 2, orientation: 'landscape' }, + { width: 1620, height: 2160, pixelRatio: 2, orientation: 'portrait' }, + { width: 2160, height: 1620, pixelRatio: 2, orientation: 'landscape' }, + { width: 1284, height: 2778, pixelRatio: 2, orientation: 'portrait' }, + { width: 2778, height: 1284, pixelRatio: 3, orientation: 'landscape' }, + { width: 1170, height: 2532, pixelRatio: 3, orientation: 'portrait' }, + { width: 2532, height: 1170, pixelRatio: 3, orientation: 'landscape' }, + { width: 1125, height: 2436, pixelRatio: 3, orientation: 'portrait' }, + { width: 2436, height: 1125, pixelRatio: 3, orientation: 'landscape' }, + { width: 1242, height: 2688, pixelRatio: 3, orientation: 'portrait' }, + { width: 2688, height: 1242, pixelRatio: 3, orientation: 'landscape' }, + { width: 828, height: 1792, pixelRatio: 2, orientation: 'portrait' }, + { width: 1792, height: 828, pixelRatio: 2, orientation: 'landscape' }, + { width: 1242, height: 2208, pixelRatio: 2, orientation: 'portrait' }, + { width: 2208, height: 1242, pixelRatio: 2, orientation: 'landscape' }, + { width: 750, height: 1334, pixelRatio: 2, orientation: 'portrait' }, + { width: 1334, height: 750, pixelRatio: 2, orientation: 'landscape' }, + { width: 640, height: 1136, pixelRatio: 2, orientation: 'portrait' }, + { width: 1136, height: 640, pixelRatio: 2, orientation: 'landscape' } + ] + for (const device of devices) { + head.link.push( + { href: `${device.width}-${device.height}-splash-screen.png`, media: `(device-width: ${device.width / 2}px) and (device-height: ${device.height / 2}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } + ) + } } // Title From ad7152c75f7a2bde771e082949b37340145edc15 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Mon, 23 May 2022 18:38:28 +0200 Subject: [PATCH 05/17] fix() No more iosSplasScreen - info base on icon + manifest --- lib/splash.cjs | 6 ++---- src/devices.ts | 27 +++++++++++++++++++++++++++ src/icon.ts | 9 ++------- src/meta.ts | 41 +++++++---------------------------------- src/module.ts | 8 ++------ src/types.ts | 7 +------ 6 files changed, 41 insertions(+), 57 deletions(-) create mode 100644 src/devices.ts diff --git a/lib/splash.cjs b/lib/splash.cjs index 39a3177..eabd3c0 100644 --- a/lib/splash.cjs +++ b/lib/splash.cjs @@ -2,9 +2,7 @@ const { remove, mkdirp } = require('fs-extra') const { join } = require('pathe') const sharp = require('sharp') - -// should be one ONE file -const devices = [ +const devices = [ { width: 2732, height: 2048, pixelRatio: 2, orientation: 'landscape' }, { width: 1668, height: 2388, pixelRatio: 2, orientation: 'portrait' }, { width: 2388, height: 1668, pixelRatio: 2, orientation: 'landscape' }, @@ -48,7 +46,7 @@ async function splashCreation({ input, distDir, backgroundColor }) { { input } ]) .png() - .toFile(join(distDir, `${device.width}-${device.height}-splash-screen.png`)) + .toFile(join(distDir, `${device.width}x${device.height}-splash-screen.png`)) )) } diff --git a/src/devices.ts b/src/devices.ts new file mode 100644 index 0000000..3bdbed0 --- /dev/null +++ b/src/devices.ts @@ -0,0 +1,27 @@ +export default [ + { width: 2732, height: 2048, pixelRatio: 2, orientation: 'landscape' }, + { width: 1668, height: 2388, pixelRatio: 2, orientation: 'portrait' }, + { width: 2388, height: 1668, pixelRatio: 2, orientation: 'landscape' }, + { width: 1536, height: 2048, pixelRatio: 2, orientation: 'portrait' }, + { width: 2048, height: 1536, pixelRatio: 2, orientation: 'landscape' }, + { width: 1668, height: 2224, pixelRatio: 2, orientation: 'portrait' }, + { width: 2224, height: 1668, pixelRatio: 2, orientation: 'landscape' }, + { width: 1620, height: 2160, pixelRatio: 2, orientation: 'portrait' }, + { width: 2160, height: 1620, pixelRatio: 2, orientation: 'landscape' }, + { width: 1284, height: 2778, pixelRatio: 2, orientation: 'portrait' }, + { width: 2778, height: 1284, pixelRatio: 3, orientation: 'landscape' }, + { width: 1170, height: 2532, pixelRatio: 3, orientation: 'portrait' }, + { width: 2532, height: 1170, pixelRatio: 3, orientation: 'landscape' }, + { width: 1125, height: 2436, pixelRatio: 3, orientation: 'portrait' }, + { width: 2436, height: 1125, pixelRatio: 3, orientation: 'landscape' }, + { width: 1242, height: 2688, pixelRatio: 3, orientation: 'portrait' }, + { width: 2688, height: 1242, pixelRatio: 3, orientation: 'landscape' }, + { width: 828, height: 1792, pixelRatio: 2, orientation: 'portrait' }, + { width: 1792, height: 828, pixelRatio: 2, orientation: 'landscape' }, + { width: 1242, height: 2208, pixelRatio: 2, orientation: 'portrait' }, + { width: 2208, height: 1242, pixelRatio: 2, orientation: 'landscape' }, + { width: 750, height: 1334, pixelRatio: 2, orientation: 'portrait' }, + { width: 1334, height: 750, pixelRatio: 2, orientation: 'landscape' }, + { width: 640, height: 1136, pixelRatio: 2, orientation: 'portrait' }, + { width: 1136, height: 640, pixelRatio: 2, orientation: 'landscape' } +] diff --git a/src/icon.ts b/src/icon.ts index 0ab7e65..f48e547 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -54,12 +54,10 @@ export default async (pwa: PWAContext) => { suffix: iconSuffix }) - - // DIRECT for DEV only const iosSplashSreenOption = JSON.stringify({ input: options.source, - distDir: join(pwa._assetsDir, pwa.manifest.iosSplashSreen.targetDir), - backgroundColor: pwa.manifest.iosSplashSreen.backgroundColor + distDir: join(pwa._assetsDir, options.targetDir), + backgroundColor: pwa.manifest.background_color }) let generate: Promise @@ -72,7 +70,6 @@ export default async (pwa: PWAContext) => { // Generation Promise (generate in a child process using fork) generate = new Promise((resolve, reject) => { const child = fork(pwa._resolver.resolve('../lib/resize.cjs'), [resizeOptions]) - // launch splash screen generation child.on('exit', (code: number) => code ? reject(code) : resolve()) }).then(() => { consola.success(`PWA icons generated in ${Date.now() - start} ms`) @@ -81,8 +78,6 @@ export default async (pwa: PWAContext) => { const child = fork(pwa._resolver.resolve('../lib/splash.cjs'), [iosSplashSreenOption]) child.on('exit', (code: number) => code ? reject(code) : resolve()) }).then(() => { - // inject ios splash screeen into head - // then consola.success(`Splash Screen genrated in ${Date.now() - start} ms`) }) }) diff --git a/src/meta.ts b/src/meta.ts index eb9f960..4aa762d 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -1,5 +1,7 @@ import { useNuxt } from '@nuxt/kit' import type { PWAContext } from './types' +import { join } from 'pathe' +import devices from './devices' export default (pwa: PWAContext) => { if (!pwa.meta || !pwa.manifest) { return } @@ -39,40 +41,11 @@ export default (pwa: PWAContext) => { } // TODO: Launch Screen Image (IOS) - if (pwa.manifest.iosSplashSreen) { - // Load from constat file - const devices = [ - { width: 2732, height: 2048, pixelRatio: 2, orientation: 'landscape' }, - { width: 1668, height: 2388, pixelRatio: 2, orientation: 'portrait' }, - { width: 2388, height: 1668, pixelRatio: 2, orientation: 'landscape' }, - { width: 1536, height: 2048, pixelRatio: 2, orientation: 'portrait' }, - { width: 2048, height: 1536, pixelRatio: 2, orientation: 'landscape' }, - { width: 1668, height: 2224, pixelRatio: 2, orientation: 'portrait' }, - { width: 2224, height: 1668, pixelRatio: 2, orientation: 'landscape' }, - { width: 1620, height: 2160, pixelRatio: 2, orientation: 'portrait' }, - { width: 2160, height: 1620, pixelRatio: 2, orientation: 'landscape' }, - { width: 1284, height: 2778, pixelRatio: 2, orientation: 'portrait' }, - { width: 2778, height: 1284, pixelRatio: 3, orientation: 'landscape' }, - { width: 1170, height: 2532, pixelRatio: 3, orientation: 'portrait' }, - { width: 2532, height: 1170, pixelRatio: 3, orientation: 'landscape' }, - { width: 1125, height: 2436, pixelRatio: 3, orientation: 'portrait' }, - { width: 2436, height: 1125, pixelRatio: 3, orientation: 'landscape' }, - { width: 1242, height: 2688, pixelRatio: 3, orientation: 'portrait' }, - { width: 2688, height: 1242, pixelRatio: 3, orientation: 'landscape' }, - { width: 828, height: 1792, pixelRatio: 2, orientation: 'portrait' }, - { width: 1792, height: 828, pixelRatio: 2, orientation: 'landscape' }, - { width: 1242, height: 2208, pixelRatio: 2, orientation: 'portrait' }, - { width: 2208, height: 1242, pixelRatio: 2, orientation: 'landscape' }, - { width: 750, height: 1334, pixelRatio: 2, orientation: 'portrait' }, - { width: 1334, height: 750, pixelRatio: 2, orientation: 'landscape' }, - { width: 640, height: 1136, pixelRatio: 2, orientation: 'portrait' }, - { width: 1136, height: 640, pixelRatio: 2, orientation: 'landscape' } - ] - for (const device of devices) { - head.link.push( - { href: `${device.width}-${device.height}-splash-screen.png`, media: `(device-width: ${device.width / 2}px) and (device-height: ${device.height / 2}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } - ) - } + for (const device of devices) { + const href = join(pwa._assetsDir, pwa.icon.targetDir, `${ device.width }x${ device.height }-splash-screen.png`) + head.link.push( + { href , media: `(device-width: ${device.width / 2}px) and (device-height: ${device.height / 2}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } + ) } // Title diff --git a/src/module.ts b/src/module.ts index 6a371ec..7b69c7e 100644 --- a/src/module.ts +++ b/src/module.ts @@ -26,11 +26,7 @@ export default defineNuxtModule({ display: 'standalone', background_color: '#ffffff', theme_color: '#000000', - icons: [], - iosSplashSreen: { - targetDir: 'splash', - backgroundColor: '#ffffff' - } + icons: [] }, meta: { name: process.env.npm_package_name!, @@ -38,7 +34,7 @@ export default defineNuxtModule({ description: process.env.npm_package_description!, favicon: true, mobileApp: true, - mobileAppIOS: false, + mobileAppIOS: true, appleStatusBarStyle: false, theme_color: undefined, lang: 'en', diff --git a/src/types.ts b/src/types.ts index 10c49ac..f709ea7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -42,12 +42,7 @@ export interface ManifestOptions { type: string sizes: String purpose?: string - }>, - iosSplashSreen: { - // fileName: string - targetDir: string, - backgroundColor: string - } + }> } export interface WorkboxOptions { From 513ac3ef0395b71e1ce239a44bde5e9098bda12f Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Mon, 23 May 2022 18:43:14 +0200 Subject: [PATCH 06/17] fix() Clean Types linting --- src/types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/types.ts b/src/types.ts index f709ea7..c8bbe98 100644 --- a/src/types.ts +++ b/src/types.ts @@ -24,8 +24,7 @@ export interface MetaOptions { ogUrl: boolean | string twitterCard: string | undefined twitterSite: string | undefined - twitterCreator: string | undefined, - + twitterCreator: string | undefined } export interface ManifestOptions { From 22af9e8916deb64f3641ad2be1a290238468e69a Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 08:54:21 +0200 Subject: [PATCH 07/17] fix() adjust pixelRatio on devices Array and meta inject --- lib/splash.cjs | 5 ++--- src/devices.ts | 10 +++++++--- src/meta.ts | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/lib/splash.cjs b/lib/splash.cjs index eabd3c0..1cb7f5a 100644 --- a/lib/splash.cjs +++ b/lib/splash.cjs @@ -22,15 +22,14 @@ const devices = [ { width: 2688, height: 1242, pixelRatio: 3, orientation: 'landscape' }, { width: 828, height: 1792, pixelRatio: 2, orientation: 'portrait' }, { width: 1792, height: 828, pixelRatio: 2, orientation: 'landscape' }, - { width: 1242, height: 2208, pixelRatio: 2, orientation: 'portrait' }, - { width: 2208, height: 1242, pixelRatio: 2, orientation: 'landscape' }, + { width: 1242, height: 2208, pixelRatio: 3, orientation: 'portrait' }, + { width: 2208, height: 1242, pixelRatio: 3, orientation: 'landscape' }, { width: 750, height: 1334, pixelRatio: 2, orientation: 'portrait' }, { width: 1334, height: 750, pixelRatio: 2, orientation: 'landscape' }, { width: 640, height: 1136, pixelRatio: 2, orientation: 'portrait' }, { width: 1136, height: 640, pixelRatio: 2, orientation: 'landscape' } ] - async function splashCreation({ input, distDir, backgroundColor }) { await remove(distDir) await mkdirp(distDir) diff --git a/src/devices.ts b/src/devices.ts index 3bdbed0..d3183a9 100644 --- a/src/devices.ts +++ b/src/devices.ts @@ -8,7 +8,7 @@ export default [ { width: 2224, height: 1668, pixelRatio: 2, orientation: 'landscape' }, { width: 1620, height: 2160, pixelRatio: 2, orientation: 'portrait' }, { width: 2160, height: 1620, pixelRatio: 2, orientation: 'landscape' }, - { width: 1284, height: 2778, pixelRatio: 2, orientation: 'portrait' }, + { width: 1284, height: 2778, pixelRatio: 2, orientation: 'portrait' }, { width: 2778, height: 1284, pixelRatio: 3, orientation: 'landscape' }, { width: 1170, height: 2532, pixelRatio: 3, orientation: 'portrait' }, { width: 2532, height: 1170, pixelRatio: 3, orientation: 'landscape' }, @@ -18,10 +18,14 @@ export default [ { width: 2688, height: 1242, pixelRatio: 3, orientation: 'landscape' }, { width: 828, height: 1792, pixelRatio: 2, orientation: 'portrait' }, { width: 1792, height: 828, pixelRatio: 2, orientation: 'landscape' }, - { width: 1242, height: 2208, pixelRatio: 2, orientation: 'portrait' }, - { width: 2208, height: 1242, pixelRatio: 2, orientation: 'landscape' }, + { width: 1242, height: 2208, pixelRatio: 3, orientation: 'portrait' }, + { width: 2208, height: 1242, pixelRatio: 3, orientation: 'landscape' }, { width: 750, height: 1334, pixelRatio: 2, orientation: 'portrait' }, { width: 1334, height: 750, pixelRatio: 2, orientation: 'landscape' }, { width: 640, height: 1136, pixelRatio: 2, orientation: 'portrait' }, { width: 1136, height: 640, pixelRatio: 2, orientation: 'landscape' } ] + +// https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/#device-screen-sizes-and-orientations + + diff --git a/src/meta.ts b/src/meta.ts index 4aa762d..52c5fcd 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -44,7 +44,7 @@ export default (pwa: PWAContext) => { for (const device of devices) { const href = join(pwa._assetsDir, pwa.icon.targetDir, `${ device.width }x${ device.height }-splash-screen.png`) head.link.push( - { href , media: `(device-width: ${device.width / 2}px) and (device-height: ${device.height / 2}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } + { href , media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } ) } From e79aaa11389204bd8109cd09db992f984acfb47e Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 09:12:13 +0200 Subject: [PATCH 08/17] feat(): Splash Screen generation base on icon.mobileAppIOS --- src/icon.ts | 5 ++++- src/meta.ts | 13 ++++++------- src/module.ts | 2 +- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/icon.ts b/src/icon.ts index f48e547..2e29584 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -85,6 +85,9 @@ export default async (pwa: PWAContext) => { // Ensure icons have been generated before Nitro build nuxt.hook('nitro:build:before', async () => { await generate - await generateIosSplashScreen + + if (pwa.icon.mobileAppIOS) { + await generateIosSplashScreen + } }) } diff --git a/src/meta.ts b/src/meta.ts index 52c5fcd..eb60ff8 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -18,6 +18,12 @@ export default (pwa: PWAContext) => { // mobileApp (IOS) if (options.mobileAppIOS) { head.meta.push({ name: 'apple-mobile-web-app-capable', content: 'yes' }) + for (const device of devices) { + const href = join(pwa._assetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`) + head.link.push( + { href, media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } + ) + } } // statusBarStyle (IOS) @@ -40,13 +46,6 @@ export default (pwa: PWAContext) => { } } - // TODO: Launch Screen Image (IOS) - for (const device of devices) { - const href = join(pwa._assetsDir, pwa.icon.targetDir, `${ device.width }x${ device.height }-splash-screen.png`) - head.link.push( - { href , media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } - ) - } // Title head.title = options.name diff --git a/src/module.ts b/src/module.ts index 7b69c7e..54f26b2 100644 --- a/src/module.ts +++ b/src/module.ts @@ -34,7 +34,7 @@ export default defineNuxtModule({ description: process.env.npm_package_description!, favicon: true, mobileApp: true, - mobileAppIOS: true, + mobileAppIOS: false, appleStatusBarStyle: false, theme_color: undefined, lang: 'en', From 8313707416dccd7378040191449d2d890553ff40 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 16:06:06 +0200 Subject: [PATCH 09/17] refacto() One source of truth of device list --- lib/splash.cjs | 30 +----------------------------- src/icon.ts | 5 ++++- 2 files changed, 5 insertions(+), 30 deletions(-) diff --git a/lib/splash.cjs b/lib/splash.cjs index 1cb7f5a..6aae39f 100644 --- a/lib/splash.cjs +++ b/lib/splash.cjs @@ -2,35 +2,7 @@ const { remove, mkdirp } = require('fs-extra') const { join } = require('pathe') const sharp = require('sharp') -const devices = [ - { width: 2732, height: 2048, pixelRatio: 2, orientation: 'landscape' }, - { width: 1668, height: 2388, pixelRatio: 2, orientation: 'portrait' }, - { width: 2388, height: 1668, pixelRatio: 2, orientation: 'landscape' }, - { width: 1536, height: 2048, pixelRatio: 2, orientation: 'portrait' }, - { width: 2048, height: 1536, pixelRatio: 2, orientation: 'landscape' }, - { width: 1668, height: 2224, pixelRatio: 2, orientation: 'portrait' }, - { width: 2224, height: 1668, pixelRatio: 2, orientation: 'landscape' }, - { width: 1620, height: 2160, pixelRatio: 2, orientation: 'portrait' }, - { width: 2160, height: 1620, pixelRatio: 2, orientation: 'landscape' }, - { width: 1284, height: 2778, pixelRatio: 2, orientation: 'portrait' }, - { width: 2778, height: 1284, pixelRatio: 3, orientation: 'landscape' }, - { width: 1170, height: 2532, pixelRatio: 3, orientation: 'portrait' }, - { width: 2532, height: 1170, pixelRatio: 3, orientation: 'landscape' }, - { width: 1125, height: 2436, pixelRatio: 3, orientation: 'portrait' }, - { width: 2436, height: 1125, pixelRatio: 3, orientation: 'landscape' }, - { width: 1242, height: 2688, pixelRatio: 3, orientation: 'portrait' }, - { width: 2688, height: 1242, pixelRatio: 3, orientation: 'landscape' }, - { width: 828, height: 1792, pixelRatio: 2, orientation: 'portrait' }, - { width: 1792, height: 828, pixelRatio: 2, orientation: 'landscape' }, - { width: 1242, height: 2208, pixelRatio: 3, orientation: 'portrait' }, - { width: 2208, height: 1242, pixelRatio: 3, orientation: 'landscape' }, - { width: 750, height: 1334, pixelRatio: 2, orientation: 'portrait' }, - { width: 1334, height: 750, pixelRatio: 2, orientation: 'landscape' }, - { width: 640, height: 1136, pixelRatio: 2, orientation: 'portrait' }, - { width: 1136, height: 640, pixelRatio: 2, orientation: 'landscape' } -] - -async function splashCreation({ input, distDir, backgroundColor }) { +async function splashCreation({ input, distDir, backgroundColor, devices }) { await remove(distDir) await mkdirp(distDir) await Promise.all(devices.map(device => diff --git a/src/icon.ts b/src/icon.ts index 2e29584..102342a 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -5,6 +5,8 @@ import hasha from 'hasha' import { join, resolve } from 'pathe' import { useNuxt } from '@nuxt/kit' import type { PWAContext } from './types' +import devices from './devices' + async function getFileHash (filePath: string): Promise { const hash = await hasha.fromFile(filePath, { algorithm: 'md5' }) @@ -57,7 +59,8 @@ export default async (pwa: PWAContext) => { const iosSplashSreenOption = JSON.stringify({ input: options.source, distDir: join(pwa._assetsDir, options.targetDir), - backgroundColor: pwa.manifest.background_color + backgroundColor: pwa.manifest.background_color, + devices }) let generate: Promise From 54b367ec38b1d05da02c498b69575efa09f2a58e Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 16:34:31 +0200 Subject: [PATCH 10/17] fix: Use `Array.push(...[])` to inject meta splash-screen --- src/meta.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/meta.ts b/src/meta.ts index eb60ff8..d16ff8a 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -18,12 +18,9 @@ export default (pwa: PWAContext) => { // mobileApp (IOS) if (options.mobileAppIOS) { head.meta.push({ name: 'apple-mobile-web-app-capable', content: 'yes' }) - for (const device of devices) { - const href = join(pwa._assetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`) - head.link.push( - { href, media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } - ) - } + head.link.push(...devices.map(device => ( + { href: `${join(nuxt.options.app.buildAssetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`)}`, media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } + ))) } // statusBarStyle (IOS) From 44fc55603a160337f0721bf864424ea6a5352983 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 16:36:57 +0200 Subject: [PATCH 11/17] doc: Add comment --- src/meta.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/meta.ts b/src/meta.ts index d16ff8a..3efa34c 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -18,6 +18,8 @@ export default (pwa: PWAContext) => { // mobileApp (IOS) if (options.mobileAppIOS) { head.meta.push({ name: 'apple-mobile-web-app-capable', content: 'yes' }) + + // inject splash-screen based on devices list head.link.push(...devices.map(device => ( { href: `${join(nuxt.options.app.buildAssetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`)}`, media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } ))) From 4b862cf923dbe28a6a10410dfabb51b93b0dcb8b Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 16:45:43 +0200 Subject: [PATCH 12/17] Fix() Lint base on package rules --- src/devices.ts | 2 -- src/icon.ts | 1 - src/meta.ts | 7 +++---- src/module.ts | 2 +- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/devices.ts b/src/devices.ts index d3183a9..71a3cf8 100644 --- a/src/devices.ts +++ b/src/devices.ts @@ -27,5 +27,3 @@ export default [ ] // https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/#device-screen-sizes-and-orientations - - diff --git a/src/icon.ts b/src/icon.ts index 102342a..60e39d5 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -7,7 +7,6 @@ import { useNuxt } from '@nuxt/kit' import type { PWAContext } from './types' import devices from './devices' - async function getFileHash (filePath: string): Promise { const hash = await hasha.fromFile(filePath, { algorithm: 'md5' }) return hash.slice(0, 8) diff --git a/src/meta.ts b/src/meta.ts index 3efa34c..5ff618c 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -1,6 +1,6 @@ import { useNuxt } from '@nuxt/kit' -import type { PWAContext } from './types' import { join } from 'pathe' +import type { PWAContext } from './types' import devices from './devices' export default (pwa: PWAContext) => { @@ -18,10 +18,10 @@ export default (pwa: PWAContext) => { // mobileApp (IOS) if (options.mobileAppIOS) { head.meta.push({ name: 'apple-mobile-web-app-capable', content: 'yes' }) - + // inject splash-screen based on devices list head.link.push(...devices.map(device => ( - { href: `${join(nuxt.options.app.buildAssetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`)}`, media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: "apple-touch-startup-image" } + { href: `${join(nuxt.options.app.buildAssetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`)}`, media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: 'apple-touch-startup-image' } ))) } @@ -43,7 +43,6 @@ export default (pwa: PWAContext) => { head.link.push({ rel: 'shortcut icon', href: iconSmall.src }) head.link.push({ rel: 'apple-touch-icon', href: iconBig.src, sizes: iconBig.sizes }) } - } // Title diff --git a/src/module.ts b/src/module.ts index 54f26b2..c294592 100644 --- a/src/module.ts +++ b/src/module.ts @@ -15,7 +15,7 @@ export default defineNuxtModule({ source: null, sizes: [], fileName: 'icon.png', - targetDir: 'icons', + targetDir: 'icons' }, manifest: { name: process.env.npm_package_name!, From 4b08c64676cd177e3e5e6b626313092e88a21146 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 21:03:13 +0200 Subject: [PATCH 13/17] refacto( resize ) Delete splash and move splash creation All image are create in `lib/resize` --- lib/resize.cjs | 20 +++++++++++++++++++- lib/splash.cjs | 29 ----------------------------- src/icon.ts | 21 +++------------------ 3 files changed, 22 insertions(+), 48 deletions(-) delete mode 100644 lib/splash.cjs diff --git a/lib/resize.cjs b/lib/resize.cjs index c11afc7..9005db8 100644 --- a/lib/resize.cjs +++ b/lib/resize.cjs @@ -2,14 +2,32 @@ const { remove, mkdirp } = require('fs-extra') const { join } = require('pathe') const sharp = require('sharp') -async function resize ({ input, distDir, sizes, suffix }) { +async function resize ({ input, distDir, sizes, suffix, backgroundColor, devices, mobileAppIOS }) { await remove(distDir) await mkdirp(distDir) + await Promise.all(sizes.map(size => sharp(input) .resize(size, size) .toFile(join(distDir, `${size}x${size}${suffix}.png`)) )) + + if (mobileAppIOS) { + await Promise.all(devices.map(device => + sharp({ + create: { + width: device.width, + height: device.height, + channels: 4, + background: backgroundColor + } + }).composite([ + { input } + ]) + .png() + .toFile(join(distDir, `${device.width}x${device.height}-splash-screen.png`)) + )) + } } resize(JSON.parse(process.argv[2])).then(() => { diff --git a/lib/splash.cjs b/lib/splash.cjs deleted file mode 100644 index 6aae39f..0000000 --- a/lib/splash.cjs +++ /dev/null @@ -1,29 +0,0 @@ -const { remove, mkdirp } = require('fs-extra') -const { join } = require('pathe') -const sharp = require('sharp') - -async function splashCreation({ input, distDir, backgroundColor, devices }) { - await remove(distDir) - await mkdirp(distDir) - await Promise.all(devices.map(device => - sharp({ - create: { - width: device.width, - height: device.height, - channels: 4, - background: backgroundColor - } - }).composite([ - { input } - ]) - .png() - .toFile(join(distDir, `${device.width}x${device.height}-splash-screen.png`)) - )) -} - -splashCreation(JSON.parse(process.argv[2])).then(() => { - process.exit(0) -}).catch((error) => { - console.error(error) // eslint-disable-line no-console - process.exit(1) -}) diff --git a/src/icon.ts b/src/icon.ts index 60e39d5..70ed534 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -52,18 +52,13 @@ export default async (pwa: PWAContext) => { input: options.source, distDir: join(pwa._assetsDir, options.targetDir), sizes: options.sizes, - suffix: iconSuffix - }) - - const iosSplashSreenOption = JSON.stringify({ - input: options.source, - distDir: join(pwa._assetsDir, options.targetDir), + suffix: iconSuffix, backgroundColor: pwa.manifest.background_color, + mobileAppIOS: options.mobileAppIOS, devices }) let generate: Promise - let generateIosSplashScreen: Promise // Start generation when Nuxt build dir (.nuxt) is available nuxt.hook('prepare:types', () => { @@ -74,22 +69,12 @@ export default async (pwa: PWAContext) => { const child = fork(pwa._resolver.resolve('../lib/resize.cjs'), [resizeOptions]) child.on('exit', (code: number) => code ? reject(code) : resolve()) }).then(() => { - consola.success(`PWA icons generated in ${Date.now() - start} ms`) - }) - generateIosSplashScreen = new Promise((resolve, reject) => { - const child = fork(pwa._resolver.resolve('../lib/splash.cjs'), [iosSplashSreenOption]) - child.on('exit', (code: number) => code ? reject(code) : resolve()) - }).then(() => { - consola.success(`Splash Screen genrated in ${Date.now() - start} ms`) + consola.success(`PWA icons and splash-screen generated in ${Date.now() - start} ms`) }) }) // Ensure icons have been generated before Nitro build nuxt.hook('nitro:build:before', async () => { await generate - - if (pwa.icon.mobileAppIOS) { - await generateIosSplashScreen - } }) } From ccb82c5f23512232ff060000104fe80fbf8bb4be Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 21:03:39 +0200 Subject: [PATCH 14/17] fix: Useless string interpolation --- src/meta.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/meta.ts b/src/meta.ts index 5ff618c..37ca841 100644 --- a/src/meta.ts +++ b/src/meta.ts @@ -21,7 +21,7 @@ export default (pwa: PWAContext) => { // inject splash-screen based on devices list head.link.push(...devices.map(device => ( - { href: `${join(nuxt.options.app.buildAssetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`)}`, media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: 'apple-touch-startup-image' } + { href: join(nuxt.options.app.buildAssetsDir, pwa.icon.targetDir, `${device.width}x${device.height}-splash-screen.png`), media: `(device-width: ${device.width / device.pixelRatio}px) and (device-height: ${device.height / device.pixelRatio}px) and (-webkit-device-pixel-ratio: ${device.pixelRatio}) and (orientation: ${device.orientation})`, rel: 'apple-touch-startup-image' } ))) } From ec2d6613ff42489e6fdf88dd69dd0f590a833a57 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Tue, 24 May 2022 21:53:55 +0200 Subject: [PATCH 15/17] feat: Devices array as modules option by default --- src/icon.ts | 3 +-- src/module.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/icon.ts b/src/icon.ts index 70ed534..1bb21c0 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -5,7 +5,6 @@ import hasha from 'hasha' import { join, resolve } from 'pathe' import { useNuxt } from '@nuxt/kit' import type { PWAContext } from './types' -import devices from './devices' async function getFileHash (filePath: string): Promise { const hash = await hasha.fromFile(filePath, { algorithm: 'md5' }) @@ -55,7 +54,7 @@ export default async (pwa: PWAContext) => { suffix: iconSuffix, backgroundColor: pwa.manifest.background_color, mobileAppIOS: options.mobileAppIOS, - devices + devices: options.splash.devices }) let generate: Promise diff --git a/src/module.ts b/src/module.ts index c294592..a635caa 100644 --- a/src/module.ts +++ b/src/module.ts @@ -5,6 +5,7 @@ import manifest from './manifest' import meta from './meta' import workbox from './workbox' import type { PWAOptions, PWAContext } from './types' +import devices from './devices' export default defineNuxtModule({ meta: { @@ -15,7 +16,13 @@ export default defineNuxtModule({ source: null, sizes: [], fileName: 'icon.png', - targetDir: 'icons' + targetDir: 'icons', + splash: { + devices + // backgroundColor, + // dedicate icon + // .. + } }, manifest: { name: process.env.npm_package_name!, From 9a23d4d25a008dcd4af458078ff1489b1650ded7 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Wed, 25 May 2022 10:32:59 +0200 Subject: [PATCH 16/17] feat() Add Device type definition --- src/types.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/types.ts b/src/types.ts index c8bbe98..e256d36 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,8 +1,22 @@ +enum Orientation { + landscape = 'landscape', + portrait = 'portrait' +} + +export interface Device { + width: number, + height: number, + pixelRatio: number, + orientation: Orientation +} + export interface IconOptions { source: string | null fileName: string sizes: number[] - targetDir: string + targetDir: string, + splash:{ + devices: Device[]} } export interface MetaOptions { From 8b87a9d93ad50bbba3e8fd8d0805826538f2d8d0 Mon Sep 17 00:00:00 2001 From: xlanex6 Date: Wed, 25 May 2022 12:54:46 +0200 Subject: [PATCH 17/17] Fix(): Simplify and consistancy on option declaration --- src/icon.ts | 5 +++++ src/module.ts | 3 +-- src/types.ts | 19 ++++++------------- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/icon.ts b/src/icon.ts index 1bb21c0..b10ec6e 100644 --- a/src/icon.ts +++ b/src/icon.ts @@ -5,6 +5,7 @@ import hasha from 'hasha' import { join, resolve } from 'pathe' import { useNuxt } from '@nuxt/kit' import type { PWAContext } from './types' +import devices from './devices' async function getFileHash (filePath: string): Promise { const hash = await hasha.fromFile(filePath, { algorithm: 'md5' }) @@ -47,6 +48,10 @@ export default async (pwa: PWAContext) => { }) } + if (options.splash.devices.length === 0) { + options.splash.devices = devices + } + const resizeOptions = JSON.stringify({ input: options.source, distDir: join(pwa._assetsDir, options.targetDir), diff --git a/src/module.ts b/src/module.ts index a635caa..f3caedb 100644 --- a/src/module.ts +++ b/src/module.ts @@ -5,7 +5,6 @@ import manifest from './manifest' import meta from './meta' import workbox from './workbox' import type { PWAOptions, PWAContext } from './types' -import devices from './devices' export default defineNuxtModule({ meta: { @@ -18,7 +17,7 @@ export default defineNuxtModule({ fileName: 'icon.png', targetDir: 'icons', splash: { - devices + devices: [] // backgroundColor, // dedicate icon // .. diff --git a/src/types.ts b/src/types.ts index e256d36..27a10ec 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,22 +1,15 @@ -enum Orientation { - landscape = 'landscape', - portrait = 'portrait' -} - -export interface Device { - width: number, - height: number, - pixelRatio: number, - orientation: Orientation -} - export interface IconOptions { source: string | null fileName: string sizes: number[] targetDir: string, splash:{ - devices: Device[]} + devices: Array<{ + width: number, + height: number, + pixelRatio: number, + orientation: string + }>} } export interface MetaOptions {