fix: fixes icons not getting asset prefix #18497

gatsbyjs · Dec 16, 2019 · 59067b3 · 59067b3
1 parent ce09fdc
commit 59067b3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git a/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-node.js.snap
@@ -1,13 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-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\\"}]}"`;
+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\\"}]}"`;
 
 exports[`Test plugin manifest options does file name based cache busting 1`] = `
 [MockFunction] {
   "calls": Array [
     Array [
       "public/manifest.webmanifest",
-      "{\\"name\\":\\"GatsbyJS\\",\\"short_name\\":\\"GatsbyJS\\",\\"start_url\\":\\"/\\",\\"background_color\\":\\"#f7f0eb\\",\\"theme_color\\":\\"#a2466c\\",\\"display\\":\\"standalone\\",\\"icons\\":[{\\"src\\":\\"icons/icon-48x48-contentDigest.png\\",\\"sizes\\":\\"48x48\\",\\"type\\":\\"image/png\\",\\"purpose\\":\\"all\\"},{\\"src\\":\\"icons/icon-128x128-contentDigest.png\\",\\"sizes\\":\\"128x128\\",\\"type\\":\\"image/png\\"}]}",
+      "{\\"name\\":\\"GatsbyJS\\",\\"short_name\\":\\"GatsbyJS\\",\\"start_url\\":\\"/\\",\\"background_color\\":\\"#f7f0eb\\",\\"theme_color\\":\\"#a2466c\\",\\"display\\":\\"standalone\\",\\"icons\\":[{\\"src\\":\\"/icons/icon-48x48-contentDigest.png\\",\\"sizes\\":\\"48x48\\",\\"type\\":\\"image/png\\",\\"purpose\\":\\"all\\"},{\\"src\\":\\"/icons/icon-128x128-contentDigest.png\\",\\"sizes\\":\\"128x128\\",\\"type\\":\\"image/png\\"}]}",
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`Test plugin manifest options properly prefixes icons in manifest with asset or path prefix 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      "public/manifest.webmanifest",
+      "{\\"name\\":\\"GatsbyJS\\",\\"short_name\\":\\"GatsbyJS\\",\\"start_url\\":\\"/\\",\\"background_color\\":\\"#f7f0eb\\",\\"theme_color\\":\\"#a2466c\\",\\"display\\":\\"standalone\\",\\"icons\\":[{\\"src\\":\\"/test-prefix/icons/icon-48x48.png\\",\\"sizes\\":\\"48x48\\",\\"type\\":\\"image/png\\",\\"purpose\\":\\"all\\"},{\\"src\\":\\"/test-prefix/icons/icon-128x128.png\\",\\"sizes\\":\\"128x128\\",\\"type\\":\\"image/png\\"}]}",
     ],
   ],
   "results": Array [

diff --git a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js
@@ -71,13 +71,13 @@ const manifestOptions = {
   display: `standalone`,
   icons: [
     {
-      src: `icons/icon-48x48.png`,
+      src: `/icons/icon-48x48.png`,
       sizes: `48x48`,
       type: `image/png`,
       purpose: `all`,
     },
     {
-      src: `icons/icon-128x128.png`,
+      src: `/icons/icon-128x128.png`,
       sizes: `128x128`,
       type: `image/png`,
     },
@@ -90,6 +90,7 @@ describe(`Test plugin manifest options`, () => {
     fs.mkdirSync.mockReset()
     fs.existsSync.mockReset()
     sharp.mockClear()
+    global.__PATH_PREFIX__ = ``
   })
 
   // the require of gatsby-node performs the invoking
@@ -123,12 +124,12 @@ describe(`Test plugin manifest options`, () => {
     const pluginSpecificOptions = {
       icons: [
         {
-          src: `icons/icon-48x48.png`,
+          src: `/icons/icon-48x48.png`,
           sizes: `${size}x${size}`,
           type: `image/png`,
         },
         {
-          src: `other-icons/icon-48x48.png`,
+          src: `/other-icons/icon-48x48.png`,
           sizes: `${size}x${size}`,
           type: `image/png`,
         },
@@ -142,11 +143,11 @@ describe(`Test plugin manifest options`, () => {
 
     const firstIconPath = path.join(
       `public`,
-      path.dirname(`icons/icon-48x48.png`)
+      path.dirname(`/icons/icon-48x48.png`)
     )
     const secondIconPath = path.join(
       `public`,
-      path.dirname(`other-icons/icon-48x48.png`)
+      path.dirname(`/other-icons/icon-48x48.png`)
     )
 
     expect(fs.mkdirSync).toHaveBeenNthCalledWith(1, firstIconPath)
@@ -163,7 +164,7 @@ describe(`Test plugin manifest options`, () => {
       icon: icon,
       icons: [
         {
-          src: `icons/icon-48x48.png`,
+          src: `/icons/icon-48x48.png`,
           sizes: `${size}x${size}`,
           type: `image/png`,
         },
@@ -257,6 +258,16 @@ describe(`Test plugin manifest options`, () => {
     )
   })
 
+  it(`properly prefixes icons in manifest with asset or path prefix`, async () => {
+    global.__PATH_PREFIX__ = `/test-prefix`
+
+    await onPostBootstrap(apiArgs, {
+      ...manifestOptions,
+    })
+
+    expect(fs.writeFileSync).toMatchSnapshot()
+  })
+
   it(`icon options iterator adds options and the icon array take precedence`, async () => {
     fs.statSync.mockReturnValueOnce({ isFile: () => true })
 

diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js
@@ -3,6 +3,10 @@ import path from "path"
 import sharp from "./safe-sharp"
 import { createContentDigest, cpuCoreCount } from "gatsby-core-utils"
 import { defaultIcons, doesIconExist, addDigestToPath } from "./common"
+import { withPrefix as fallbackWithPrefix, withAssetPrefix } from "gatsby"
+
+// TODO: remove for v3
+const withPrefix = withAssetPrefix || fallbackWithPrefix
 
 sharp.simd(true)
 
@@ -119,6 +123,11 @@ const makeManifest = async (cache, reporter, pluginOptions, shouldLocalize) => {
     manifest.icons = [...defaultIcons]
   }
 
+  //Fix #18497 by prefixing paths
+  manifest.icons = manifest.icons.map(icon => {
+    return { ...icon, src: withPrefix(icon.src) }
+  })
+
   // Specify extra options for each icon (if requested).
   if (pluginOptions.icon_options) {
     manifest.icons = manifest.icons.map(icon => {