From 7cc35865686d732c15ad656019d514b8029ed86f Mon Sep 17 00:00:00 2001 From: Ivor Padilla Date: Wed, 12 Dec 2018 16:25:06 -0400 Subject: [PATCH 1/5] Added option to remove the "theme color" meta tag --- .../__snapshots__/gatsby-ssr.js.snap | 35 +++++++++++++++++++ .../src/__tests__/gatsby-ssr.js | 21 +++++++++++ .../gatsby-plugin-manifest/src/gatsby-node.js | 2 ++ .../gatsby-plugin-manifest/src/gatsby-ssr.js | 21 +++++++---- 4 files changed, 72 insertions(+), 7 deletions(-) diff --git a/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap b/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap index 3259b64444848..70608a72129f6 100644 --- a/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap +++ b/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap @@ -1,5 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`gatsby-plugin-manifest Add a "theme color" meta tag if "theme_color_in_head" is set to true 1`] = ` +Array [ + , + , +] +`; + exports[`gatsby-plugin-manifest Adds "shortcut icon" and "manifest" links and "theme_color" meta tag to head 1`] = ` Array [ , + , +] +`; + exports[`gatsby-plugin-manifest Creates legacy apple touch links if opted in Using default set of icons 1`] = ` Array [ , +] +`; + exports[`gatsby-plugin-manifest Does not add a "theme_color" meta tag to head if "theme_color" option is not provided or is an empty string 1`] = ` Array [ { headComponents = [] }) + it(`Adds a "theme color" meta tag to head if "theme_color_in_head" is not provided`, () => { + onRenderBody(ssrArgs, { theme_color: `#000000` }) + expect(headComponents).toMatchSnapshot() + }) + + it(`Does not add a "theme color" meta tag if "theme_color_in_head" is set to false`, () => { + onRenderBody(ssrArgs, { + theme_color: `#000000`, + theme_color_in_head: false, + }) + expect(headComponents).toMatchSnapshot() + }) + + it(`Add a "theme color" meta tag if "theme_color_in_head" is set to true`, () => { + onRenderBody(ssrArgs, { + theme_color: `#000000`, + theme_color_in_head: true, + }) + expect(headComponents).toMatchSnapshot() + }) + it(`Adds "shortcut icon" and "manifest" links and "theme_color" meta tag to head`, () => { onRenderBody(ssrArgs, { icon: true, theme_color: `#000000` }) expect(headComponents).toMatchSnapshot() diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js index 5d26997e93b3b..3771358ff5685 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-node.js +++ b/packages/gatsby-plugin-manifest/src/gatsby-node.js @@ -23,8 +23,10 @@ exports.onPostBootstrap = (args, pluginOptions) => const { icon, ...manifest } = pluginOptions // Delete options we won't pass to the manifest.webmanifest. + delete manifest.plugins delete manifest.legacy + delete manifest.theme_color_in_head // If icons are not manually defined, use the default icon set. if (!manifest.icons) { diff --git a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js index d4c68c70570cd..8fe19cdf39e9f 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js +++ b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js @@ -31,16 +31,23 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => { href={withPrefix(`/manifest.webmanifest`)} /> ) - // The user has an option to opt out of the theme_color meta tag being inserted into the head. if (pluginOptions.theme_color) { - headComponents.push( - + let theme_color = !Object.keys(pluginOptions).includes( + `theme_color_in_head` ) + ? pluginOptions.theme_color + : pluginOptions.theme_color && pluginOptions.theme_color_in_head + + if (theme_color) { + headComponents.push( + + ) + } } if (pluginOptions.legacy) { From 77dc959ab77e6dbc4600af6e6d2d91ed7b4dbf29 Mon Sep 17 00:00:00 2001 From: Ivor Padilla Date: Thu, 13 Dec 2018 09:21:50 -0400 Subject: [PATCH 2/5] Improved logic and incorporated the changes requested to the test --- .../gatsby-plugin-manifest/src/__tests__/gatsby-node.js | 1 + packages/gatsby-plugin-manifest/src/gatsby-ssr.js | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js index 39a2695968b28..fe87c89557637 100644 --- a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js @@ -71,6 +71,7 @@ describe(`Test plugin manifest options`, () => { icon: undefined, legacy: true, plugins: [], + theme_color_in_head: false, } await onPostBootstrap([], { ...manifestOptions, diff --git a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js index 8fe19cdf39e9f..e1654a54dd4a3 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js +++ b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js @@ -33,13 +33,13 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => { ) // The user has an option to opt out of the theme_color meta tag being inserted into the head. if (pluginOptions.theme_color) { - let theme_color = !Object.keys(pluginOptions).includes( + let insertMetaTag = Object.keys(pluginOptions).includes( `theme_color_in_head` ) - ? pluginOptions.theme_color - : pluginOptions.theme_color && pluginOptions.theme_color_in_head + ? pluginOptions.theme_color_in_head + : true - if (theme_color) { + if (insertMetaTag) { headComponents.push( Date: Fri, 21 Dec 2018 00:49:12 -0400 Subject: [PATCH 3/5] Documented how to use theme_color_in_head --- docs/docs/add-a-manifest-file.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/docs/add-a-manifest-file.md b/docs/docs/add-a-manifest-file.md index e6ab0773253ff..97933c54ff5d8 100644 --- a/docs/docs/add-a-manifest-file.md +++ b/docs/docs/add-a-manifest-file.md @@ -37,6 +37,10 @@ npm install --save gatsby-plugin-manifest start_url: "/", background_color: "#6b37bf", theme_color: "#6b37bf", + // Optional: If is set to false then the meta theme-color won't be added to the head of the document + // Set it to false if you want to programmatically change color schemes + // See: https://developers.google.com/web/fundamentals/web-app-manifest/#theme-color + theme_color_in_head: true, // Enables "Add to Homescreen" prompt and disables browser UI (including back button) // see https://developers.google.com/web/fundamentals/web-app-manifest/#display display: "standalone", From 2c65d8cc2f31e28e9f3d178243cdbdc23c1037f2 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Fri, 28 Dec 2018 13:19:57 +0100 Subject: [PATCH 4/5] move docs to readme --- docs/docs/add-a-manifest-file.md | 4 ---- packages/gatsby-plugin-manifest/README.md | 26 +++++++++++++++++++++++ 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/docs/docs/add-a-manifest-file.md b/docs/docs/add-a-manifest-file.md index 97933c54ff5d8..e6ab0773253ff 100644 --- a/docs/docs/add-a-manifest-file.md +++ b/docs/docs/add-a-manifest-file.md @@ -37,10 +37,6 @@ npm install --save gatsby-plugin-manifest start_url: "/", background_color: "#6b37bf", theme_color: "#6b37bf", - // Optional: If is set to false then the meta theme-color won't be added to the head of the document - // Set it to false if you want to programmatically change color schemes - // See: https://developers.google.com/web/fundamentals/web-app-manifest/#theme-color - theme_color_in_head: true, // Enables "Add to Homescreen" prompt and disables browser UI (including back button) // see https://developers.google.com/web/fundamentals/web-app-manifest/#display display: "standalone", diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md index b1693b6094849..78306c63672c6 100644 --- a/packages/gatsby-plugin-manifest/README.md +++ b/packages/gatsby-plugin-manifest/README.md @@ -207,3 +207,29 @@ module.exports = { ], } ``` + +## Removing `theme-color` meta tag + +By default `gatsby-plugin-manifest` inserts `` tag to html output. This can be problematic if you want to programatically control that tag - for example when implementing light/dark themes in your project. You can set `theme_color_in_head` plugin option to `false` to opt-out of this behaviour. + +```javascript:title=gatsby-config.js +module.exports = { + plugins: [ + { + resolve: `gatsby-plugin-manifest`, + options: { + name: `GatsbyJS`, + short_name: `GatsbyJS`, + start_url: `/`, + background_color: `#f7f0eb`, + theme_color: `#a2466c`, + display: `standalone`, + icon: `src/images/icon.png`, // This path is relative to the root of the site. + theme_color_in_head: false, // This will avoid adding theme-color meta tag. + }, + }, + ], +} +``` + + From 888702ffe47229699114bc46b3069cac1074c455 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Fri, 28 Dec 2018 13:22:53 +0100 Subject: [PATCH 5/5] format, ops --- packages/gatsby-plugin-manifest/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md index 78306c63672c6..b72e370eca224 100644 --- a/packages/gatsby-plugin-manifest/README.md +++ b/packages/gatsby-plugin-manifest/README.md @@ -210,7 +210,7 @@ module.exports = { ## Removing `theme-color` meta tag -By default `gatsby-plugin-manifest` inserts `` tag to html output. This can be problematic if you want to programatically control that tag - for example when implementing light/dark themes in your project. You can set `theme_color_in_head` plugin option to `false` to opt-out of this behaviour. +By default `gatsby-plugin-manifest` inserts `` tag to html output. This can be problematic if you want to programatically control that tag - for example when implementing light/dark themes in your project. You can set `theme_color_in_head` plugin option to `false` to opt-out of this behaviour. ```javascript:title=gatsby-config.js module.exports = { @@ -231,5 +231,3 @@ module.exports = { ], } ``` - -