From ea1c78b941b4e0740ced204103d765a49aa653b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20Poduszl=C3=B3?= Date: Sat, 23 Mar 2019 17:50:41 +0100 Subject: [PATCH 1/4] [plugin-favicon] Add user-specifiable icon options Resolves #12793 --- packages/gatsby-plugin-manifest/src/gatsby-node.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js index b7a0c8252e016..f2a845a758080 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-node.js +++ b/packages/gatsby-plugin-manifest/src/gatsby-node.js @@ -54,6 +54,11 @@ exports.onPostBootstrap = async (args, pluginOptions) => { manifest.icons = defaultIcons } + // Specify extra options for each icon (if requested). + manifest.icons.forEach(icon => { + Object.assign(icon, pluginOptions.icon_options) + }) + // Determine destination path for icons. const iconPath = path.join(`public`, path.dirname(manifest.icons[0].src)) From 8986c5504e7583e038e75231ecff66265555773c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20Poduszl=C3=B3?= Date: Sat, 23 Mar 2019 18:07:00 +0100 Subject: [PATCH 2/4] [plugin-manifest] Add docs for #12793 --- packages/gatsby-plugin-manifest/README.md | 29 +++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md index be32c6d9f238c..750aa920672d5 100644 --- a/packages/gatsby-plugin-manifest/README.md +++ b/packages/gatsby-plugin-manifest/README.md @@ -188,6 +188,35 @@ module.exports = { } ``` +## Custom icon options + +In order to specify manifest options merged with each item of the `icons` array, `icon_options` may be used as follows: + +```js +// in 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. + icon_options: { + // For all the options available, please see: + // https://www.w3.org/TR/appmanifest/#imageresource-and-its-members + purpose: `maskable`, + }, + }, + }, + ], +} +``` + ## Legacy option iOS 11.3 added support for service workers but not the complete webmanifest spec. Therefore iOS won't recognize the icons defined in the webmanifest and the creation of `apple-touch-icon` links in `` is needed. This plugin creates them by default. If you don't want those icons to be generated you can set the `legacy` option to `false` in plugin configuration: From eb767a475b0e06816ff4df0c9df6d4d8834d353d Mon Sep 17 00:00:00 2001 From: Sidhartha Chatterjee Date: Mon, 25 Mar 2019 15:25:03 +0100 Subject: [PATCH 3/4] Update packages/gatsby-plugin-manifest/README.md Co-Authored-By: kripod --- packages/gatsby-plugin-manifest/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md index 750aa920672d5..504bd461d4cd6 100644 --- a/packages/gatsby-plugin-manifest/README.md +++ b/packages/gatsby-plugin-manifest/README.md @@ -208,7 +208,7 @@ module.exports = { icon: `src/images/icon.png`, // This path is relative to the root of the site. icon_options: { // For all the options available, please see: - // https://www.w3.org/TR/appmanifest/#imageresource-and-its-members + // https://developer.mozilla.org/en-US/docs/Web/Manifest purpose: `maskable`, }, }, From dc4c76164508aef6af2394fbf2d3a9efc31b77fc Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Wed, 27 Mar 2019 11:38:26 +0100 Subject: [PATCH 4/4] Update packages/gatsby-plugin-manifest/README.md --- packages/gatsby-plugin-manifest/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md index 504bd461d4cd6..989249ab7353c 100644 --- a/packages/gatsby-plugin-manifest/README.md +++ b/packages/gatsby-plugin-manifest/README.md @@ -209,6 +209,7 @@ module.exports = { icon_options: { // For all the options available, please see: // https://developer.mozilla.org/en-US/docs/Web/Manifest + // https://w3c.github.io/manifest/#purpose-member purpose: `maskable`, }, },