diff --git a/src/api/apple-icons-helper.ts b/src/api/apple-icons-helper.ts index 2df8915..f22be15 100644 --- a/src/api/apple-icons-helper.ts +++ b/src/api/apple-icons-helper.ts @@ -13,7 +13,10 @@ export function resolveAppleSplashScreensInstructions( instructions: ImageAssetsInstructions, useAppleSplashScreens?: AppleSplashScreens, ) { - const appleSplashScreens = resolveAppleSplashScreens(useAppleSplashScreens) + const appleSplashScreens = resolveAppleSplashScreens( + imageAssets, + useAppleSplashScreens, + ) if (!appleSplashScreens || !appleSplashScreens.sizes.length) return @@ -114,8 +117,9 @@ export function resolveAppleSplashScreensInstructions( } for (const size of splashScreens) { + const basePath = linkMediaOptions.basePath const name = resolveName(size.landscape, size.size, size.dark) - const url = `${imageAssets.basePath}${name}` + const url = `${basePath}${name}` const promise = () => imageResolver(size.dark === true).then(i => generateMaskableAsset('png', i, size.size, { padding: size.padding, resizeOptions: { @@ -137,7 +141,7 @@ export function resolveAppleSplashScreensInstructions( addMediaScreen: linkMediaOptions.addMediaScreen, xhtml: linkMediaOptions.xhtml, name: resolveName, - basePath: linkMediaOptions.basePath, + basePath, dark: size.dark, includeId: imageAssets.htmlLinks.includeId, }), @@ -147,7 +151,7 @@ export function resolveAppleSplashScreensInstructions( addMediaScreen: linkMediaOptions.addMediaScreen, xhtml: linkMediaOptions.xhtml, name: resolveName, - basePath: linkMediaOptions.basePath, + basePath, dark: size.dark, includeId: imageAssets.htmlLinks.includeId, }), @@ -166,6 +170,7 @@ interface SplashScreenData { } function resolveAppleSplashScreens( + imageAssets: ImageAssets, useAppleSplashScreens?: AppleSplashScreens, ) { let appleSplashScreens: ResolvedAppleSplashScreens | undefined @@ -202,7 +207,7 @@ function resolveAppleSplashScreens( const { log = true, addMediaScreen = true, - basePath = '/', + basePath = imageAssets.basePath ?? '/', xhtml = false, } = useLinkMediaOptions appleSplashScreens = { diff --git a/test/__snapshots__/instructions.test.ts.snap b/test/__snapshots__/instructions.test.ts.snap index d5f5bff..995121f 100644 --- a/test/__snapshots__/instructions.test.ts.snap +++ b/test/__snapshots__/instructions.test.ts.snap @@ -246,3 +246,157 @@ exports[`instructions > resolve instructions with apple splash screen icons 1`] }, } `; + +exports[`instructions > resolve instructions with apple splash screen icons with custom base url 1`] = ` +{ + "apple": { + "/test/apple-touch-icon-180x180.png": { + "buffer": [Function], + "height": 180, + "link": "", + "linkObject": { + "href": "/test/apple-touch-icon-180x180.png", + "id": "ati-180-180", + "rel": "apple-touch-icon", + }, + "mimeType": "image/png", + "name": "apple-touch-icon-180x180.png", + "url": "/test/apple-touch-icon-180x180.png", + "width": 180, + }, + }, + "appleSplashScreen": { + "/test/apple-splash-landscape-dark-2048x1536.png": { + "buffer": [Function], + "height": 1536, + "link": "", + "linkObject": { + "href": "/test/apple-splash-landscape-dark-2048x1536.png", + "id": "atsi-1536-2048-2-dark", + "media": "screen and (prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)", + "rel": "apple-touch-startup-image", + }, + "mimeType": "image/png", + "name": "apple-splash-landscape-dark-2048x1536.png", + "url": "/test/apple-splash-landscape-dark-2048x1536.png", + "width": 2048, + }, + "/test/apple-splash-landscape-light-2048x1536.png": { + "buffer": [Function], + "height": 1536, + "link": "", + "linkObject": { + "href": "/test/apple-splash-landscape-light-2048x1536.png", + "id": "atsi-1536-2048-2-light", + "media": "screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)", + "rel": "apple-touch-startup-image", + }, + "mimeType": "image/png", + "name": "apple-splash-landscape-light-2048x1536.png", + "url": "/test/apple-splash-landscape-light-2048x1536.png", + "width": 2048, + }, + "/test/apple-splash-portrait-dark-1536x2048.png": { + "buffer": [Function], + "height": 2048, + "link": "", + "linkObject": { + "href": "/test/apple-splash-portrait-dark-1536x2048.png", + "id": "atsi-1536-2048-2-dark", + "media": "screen and (prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)", + "rel": "apple-touch-startup-image", + }, + "mimeType": "image/png", + "name": "apple-splash-portrait-dark-1536x2048.png", + "url": "/test/apple-splash-portrait-dark-1536x2048.png", + "width": 1536, + }, + "/test/apple-splash-portrait-light-1536x2048.png": { + "buffer": [Function], + "height": 2048, + "link": "", + "linkObject": { + "href": "/test/apple-splash-portrait-light-1536x2048.png", + "id": "atsi-1536-2048-2-light", + "media": "screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)", + "rel": "apple-touch-startup-image", + }, + "mimeType": "image/png", + "name": "apple-splash-portrait-light-1536x2048.png", + "url": "/test/apple-splash-portrait-light-1536x2048.png", + "width": 1536, + }, + }, + "favicon": { + "/test/favicon.ico": { + "buffer": [Function], + "height": 48, + "link": "", + "linkObject": { + "href": "/test/favicon.ico", + "id": "fav-48x48", + "rel": "icon", + "sizes": "48x48", + }, + "mimeType": "image/x-icon", + "name": "favicon.ico", + "url": "/test/favicon.ico", + "width": 48, + }, + "/test/favicon.svg": { + "buffer": [Function], + "height": 0, + "link": "", + "linkObject": { + "href": "/test/favicon.svg", + "id": "fav-svg", + "rel": "icon", + "sizes": "any", + "type": "image/svg+xml", + }, + "mimeType": "image/svg+xml", + "name": "favicon.svg", + "url": "/test/favicon.svg", + "width": 0, + }, + }, + "image": "playground/pwa/public/favicon.svg", + "maskable": { + "/test/maskable-icon-512x512.png": { + "buffer": [Function], + "height": 512, + "mimeType": "image/png", + "name": "maskable-icon-512x512.png", + "url": "/test/maskable-icon-512x512.png", + "width": 512, + }, + }, + "originalName": undefined, + "transparent": { + "/test/pwa-192x192.png": { + "buffer": [Function], + "height": 192, + "mimeType": "image/png", + "name": "pwa-192x192.png", + "url": "/test/pwa-192x192.png", + "width": 192, + }, + "/test/pwa-512x512.png": { + "buffer": [Function], + "height": 512, + "mimeType": "image/png", + "name": "pwa-512x512.png", + "url": "/test/pwa-512x512.png", + "width": 512, + }, + "/test/pwa-64x64.png": { + "buffer": [Function], + "height": 64, + "mimeType": "image/png", + "name": "pwa-64x64.png", + "url": "/test/pwa-64x64.png", + "width": 64, + }, + }, +} +`; diff --git a/test/instructions.test.ts b/test/instructions.test.ts index 6179208..0fd891c 100644 --- a/test/instructions.test.ts +++ b/test/instructions.test.ts @@ -34,7 +34,6 @@ describe('instructions', () => { linkMediaOptions: { log: true, addMediaScreen: true, - basePath: '/', xhtml: true, }, }, ['iPad Air 9.7"']), @@ -48,4 +47,31 @@ describe('instructions', () => { }) expect(instructions).toMatchSnapshot() }) + it ('resolve instructions with apple splash screen icons with custom base url', async () => { + const instructions = await resolveInstructions({ + imageResolver: () => readFile('playground/pwa/public/favicon.svg'), + imageName: 'playground/pwa/public/favicon.svg', + faviconPreset: '2023', + basePath: '/test/', + preset: { + ...minimal2023Preset, + appleSplashScreens: createAppleSplashScreens({ + padding: 0.3, + resizeOptions: { fit: 'contain', background: 'white' }, + darkResizeOptions: { fit: 'contain', background: 'black' }, + linkMediaOptions: { + log: true, + addMediaScreen: true, + xhtml: true, + }, + }, ['iPad Air 9.7"']), + }, + htmlLinks: { + xhtml: false, + includeId: false, + }, + resolveSvgName: name => basename(name), + }) + expect(instructions).toMatchSnapshot() + }) })