Skip to content

Commit 0e8ed07

Browse files
moonmeisterGatsbyJS Botwardpeet
committed
fix(gatsby-plugin-manifest): fixes icons not getting asset pre… (#20142)
Modifies any path provided for a manifest icon to be prefixed with appropriate path or asset prefix. Co-authored-by: GatsbyJS Bot <[email protected]> Co-authored-by: Ward Peeters <[email protected]>
1 parent 32c8ec3 commit 0e8ed07

File tree

4 files changed

+123
-12
lines changed

4 files changed

+123
-12
lines changed

‎packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-node.js.snap

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
exports[`Test plugin manifest options correctly works with default parameters 1`] = `"{\\"name\\":\\"GatsbyJS\\",\\"short_name\\":\\"GatsbyJS\\",\\"start_url\\":\\"/\\",\\"background_color\\":\\"#f7f0eb\\",\\"theme_color\\":\\"#a2466c\\",\\"display\\":\\"standalone\\",\\"icons\\":[{\\"src\\":\\"icons/icon-48x48.png\\",\\"sizes\\":\\"48x48\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-72x72.png\\",\\"sizes\\":\\"72x72\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-96x96.png\\",\\"sizes\\":\\"96x96\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-144x144.png\\",\\"sizes\\":\\"144x144\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-192x192.png\\",\\"sizes\\":\\"192x192\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-256x256.png\\",\\"sizes\\":\\"256x256\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-384x384.png\\",\\"sizes\\":\\"384x384\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-512x512.png\\",\\"sizes\\":\\"512x512\\",\\"type\\":\\"image/png\\"}]}"`;
44

5+
exports[`Test plugin manifest options correctly works with pathPrefix 1`] = `"{\\"name\\":\\"GatsbyJS\\",\\"short_name\\":\\"GatsbyJS\\",\\"start_url\\":\\"/blog/\\",\\"background_color\\":\\"#f7f0eb\\",\\"theme_color\\":\\"#a2466c\\",\\"display\\":\\"standalone\\",\\"icons\\":[{\\"src\\":\\"/blog/icons/icon-48x48.png\\",\\"sizes\\":\\"48x48\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"/blog/icons/icon-72x72.png\\",\\"sizes\\":\\"72x72\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"/blog/icons/icon-96x96.png\\",\\"sizes\\":\\"96x96\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"/blog/icons/icon-144x144.png\\",\\"sizes\\":\\"144x144\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"/blog/icons/icon-192x192.png\\",\\"sizes\\":\\"192x192\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"/blog/icons/icon-256x256.png\\",\\"sizes\\":\\"256x256\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"/blog/icons/icon-384x384.png\\",\\"sizes\\":\\"384x384\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"/blog/icons/icon-512x512.png\\",\\"sizes\\":\\"512x512\\",\\"type\\":\\"image/png\\"}]}"`;
6+
57
exports[`Test plugin manifest options does file name based cache busting 1`] = `
68
[MockFunction] {
79
"calls": Array [

‎packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js

+75-4
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ jest.mock(`sharp`, () => {
3939
})
4040

4141
jest.mock(`gatsby-core-utils`, () => {
42+
const originalCoreUtils = jest.requireActual(`gatsby-core-utils`)
4243
return {
44+
slash: originalCoreUtils.slash,
4345
cpuCoreCount: jest.fn(() => `1`),
4446
createContentDigest: jest.fn(() => `contentDigest`),
4547
}
@@ -278,9 +280,31 @@ describe(`Test plugin manifest options`, () => {
278280
expect(content.icons[1].purpose).toEqual(`maskable`)
279281
})
280282

283+
it(`correctly works with pathPrefix`, async () => {
284+
await onPostBootstrap(
285+
{ ...apiArgs, basePath: `/blog` },
286+
{
287+
name: `GatsbyJS`,
288+
short_name: `GatsbyJS`,
289+
start_url: `/`,
290+
background_color: `#f7f0eb`,
291+
theme_color: `#a2466c`,
292+
display: `standalone`,
293+
}
294+
)
295+
const contents = fs.writeFileSync.mock.calls[0][1]
296+
expect(fs.writeFileSync).toHaveBeenCalledWith(
297+
path.join(`public`, `manifest.webmanifest`),
298+
expect.anything()
299+
)
300+
expect(sharp).toHaveBeenCalledTimes(0)
301+
expect(contents).toMatchSnapshot()
302+
})
303+
281304
it(`generates all language versions`, async () => {
282305
fs.statSync.mockReturnValueOnce({ isFile: () => true })
283306
const pluginSpecificOptions = {
307+
...manifestOptions,
284308
localize: [
285309
{
286310
...manifestOptions,
@@ -292,10 +316,6 @@ describe(`Test plugin manifest options`, () => {
292316
start_url: `/es/`,
293317
lang: `es`,
294318
},
295-
{
296-
...manifestOptions,
297-
start_url: `/`,
298-
},
299319
],
300320
}
301321
const { localize, ...manifest } = pluginSpecificOptions
@@ -318,6 +338,57 @@ describe(`Test plugin manifest options`, () => {
318338
JSON.stringify(expectedResults[2])
319339
)
320340
})
341+
it(`generates all language versions with pathPrefix`, async () => {
342+
fs.statSync.mockReturnValueOnce({ isFile: () => true })
343+
const pluginSpecificOptions = {
344+
...manifestOptions,
345+
localize: [
346+
{
347+
...manifestOptions,
348+
start_url: `/de/`,
349+
lang: `de`,
350+
},
351+
{
352+
...manifestOptions,
353+
start_url: `/es/`,
354+
lang: `es`,
355+
},
356+
],
357+
}
358+
359+
const { localize, ...manifest } = pluginSpecificOptions
360+
const expectedResults = [manifest].concat(localize).map(x => {
361+
return {
362+
...manifest,
363+
...x,
364+
start_url: path.posix.join(`/blog`, x.start_url),
365+
icons: manifest.icons.map(icon => {
366+
return {
367+
...icon,
368+
src: path.posix.join(`/blog`, icon.src),
369+
}
370+
}),
371+
}
372+
})
373+
374+
await onPostBootstrap(
375+
{ ...apiArgs, basePath: `/blog` },
376+
pluginSpecificOptions
377+
)
378+
379+
expect(fs.writeFileSync).toHaveBeenCalledWith(
380+
expect.anything(),
381+
JSON.stringify(expectedResults[0])
382+
)
383+
expect(fs.writeFileSync).toHaveBeenCalledWith(
384+
expect.anything(),
385+
JSON.stringify(expectedResults[1])
386+
)
387+
expect(fs.writeFileSync).toHaveBeenCalledWith(
388+
expect.anything(),
389+
JSON.stringify(expectedResults[2])
390+
)
391+
})
321392

322393
it(`merges default and language options`, async () => {
323394
fs.statSync.mockReturnValueOnce({ isFile: () => true })

‎packages/gatsby-plugin-manifest/src/gatsby-node.js

+38-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import fs from "fs"
22
import path from "path"
33
import sharp from "./safe-sharp"
4-
import { createContentDigest, cpuCoreCount } from "gatsby-core-utils"
4+
import { createContentDigest, cpuCoreCount, slash } from "gatsby-core-utils"
55
import { defaultIcons, doesIconExist, addDigestToPath } from "./common"
66

77
sharp.simd(true)
@@ -58,7 +58,7 @@ async function checkCache(cache, icon, srcIcon, srcIconDigest, callback) {
5858
}
5959

6060
exports.onPostBootstrap = async (
61-
{ reporter, parentSpan },
61+
{ reporter, parentSpan, basePath },
6262
{ localize, ...manifest }
6363
) => {
6464
const activity = reporter.activityTimer(`Build manifest and related icons`, {
@@ -68,7 +68,7 @@ exports.onPostBootstrap = async (
6868

6969
let cache = new Map()
7070

71-
await makeManifest(cache, reporter, manifest)
71+
await makeManifest({ cache, reporter, pluginOptions: manifest, basePath })
7272

7373
if (Array.isArray(localize)) {
7474
const locales = [...localize]
@@ -84,23 +84,44 @@ exports.onPostBootstrap = async (
8484
cacheModeOverride = { cache_busting_mode: `name` }
8585
}
8686

87-
return makeManifest(
87+
return makeManifest({
8888
cache,
8989
reporter,
90-
{
90+
pluginOptions: {
9191
...manifest,
9292
...locale,
9393
...cacheModeOverride,
9494
},
95-
true
96-
)
95+
shouldLocalize: true,
96+
basePath,
97+
})
9798
})
9899
)
99100
}
100101
activity.end()
101102
}
102103

103-
const makeManifest = async (cache, reporter, pluginOptions, shouldLocalize) => {
104+
/**
105+
* The complete Triforce, or one or more components of the Triforce.
106+
* @typedef {Object} makeManifestArgs
107+
* @property {Object} cache - from gatsby-node api
108+
* @property {Object} reporter - from gatsby-node api
109+
* @property {Object} pluginOptions - from gatsby-node api/gatsby config
110+
* @property {boolean?} shouldLocalize
111+
* @property {string?} basePath - string of base path frpvided by gatsby node
112+
*/
113+
114+
/**
115+
* Build manifest
116+
* @param {makeManifestArgs}
117+
*/
118+
const makeManifest = async ({
119+
cache,
120+
reporter,
121+
pluginOptions,
122+
shouldLocalize = false,
123+
basePath = ``,
124+
}) => {
104125
const { icon, ...manifest } = pluginOptions
105126
const suffix =
106127
shouldLocalize && pluginOptions.lang ? `_${pluginOptions.lang}` : ``
@@ -198,6 +219,15 @@ const makeManifest = async (cache, reporter, pluginOptions, shouldLocalize) => {
198219
}
199220
}
200221

222+
//Fix #18497 by prefixing paths
223+
manifest.icons = manifest.icons.map(icon => {
224+
return {
225+
...icon,
226+
src: slash(path.join(basePath, icon.src)),
227+
}
228+
})
229+
manifest.start_url = path.posix.join(basePath, manifest.start_url)
230+
201231
//Write manifest
202232
fs.writeFileSync(
203233
path.join(`public`, `manifest${suffix}.webmanifest`),

‎yarn.lock

+8
Original file line numberDiff line numberDiff line change
@@ -10605,6 +10605,14 @@ gather-stream@^1.0.0:
1060510605
version "1.0.0"
1060610606
resolved "https://registry.yarnpkg.com/gather-stream/-/gather-stream-1.0.0.tgz#b33994af457a8115700d410f317733cbe7a0904b"
1060710607

10608+
gatsby-core-utils@^1.0.26:
10609+
version "1.0.26"
10610+
resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-1.0.26.tgz#e1cbdfad498d58d677d9d74f21a1ede661b49d6f"
10611+
integrity sha512-NPflmXmyTcg3x2mp6cqp/51QeAHRKepfbf0X4erDsnVlewFJuGTe+25ZJvWkkwU2g1cPAxuwzlPe0jOL92iU4A==
10612+
dependencies:
10613+
ci-info "2.0.0"
10614+
node-object-hash "^2.0.0"
10615+
1060810616
gatsby-node-helpers@^0.3.0:
1060910617
version "0.3.0"
1061010618
resolved "https://registry.yarnpkg.com/gatsby-node-helpers/-/gatsby-node-helpers-0.3.0.tgz#3bdca3b7902a702a5834fef280ad66d51099d57c"

0 commit comments

Comments
 (0)