From 7802470c647db77ec6340a22fce80818bb2eee1e Mon Sep 17 00:00:00 2001 From: Daniel Zuzevich Date: Wed, 21 Nov 2018 16:14:07 -0500 Subject: [PATCH] feat(gatsby-plugin-manifest): don't output `theme-color` meta tag if it's not defiened (#10069) Not really sure how I go about submitting a PR here. This addition references issue https://github.com/gatsbyjs/gatsby/issues/9977 Any guidance would be greatly appreciated. --- .../__snapshots__/gatsby-ssr.js.snap | 13 ++++ .../src/__tests__/gatsby-ssr.js | 5 ++ .../gatsby-plugin-manifest/src/gatsby-ssr.js | 54 ++++++++------ packages/gatsby-source-faker/README.md | 74 +++++++++---------- 4 files changed, 88 insertions(+), 58 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 b35baa328e7c9..3259b64444848 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 @@ -100,3 +100,16 @@ 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 [ + , + , +] +`; diff --git a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js index 1b578fec00ee2..34d626d7021d5 100644 --- a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js +++ b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js @@ -19,6 +19,11 @@ describe(`gatsby-plugin-manifest`, () => { expect(headComponents).toMatchSnapshot() }) + it(`Does not add a "theme_color" meta tag to head if "theme_color" option is not provided or is an empty string`, () => { + onRenderBody(ssrArgs, { icon: true }) + expect(headComponents).toMatchSnapshot() + }) + describe(`Creates legacy apple touch links if opted in`, () => { it(`Using default set of icons`, () => { onRenderBody(ssrArgs, { diff --git a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js index 8f01b191883cb..d4c68c70570cd 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js +++ b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js @@ -3,6 +3,9 @@ import { withPrefix } from "gatsby" import { defaultIcons } from "./common.js" exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => { + // We use this to build a final array to pass as the argument to setHeadComponents at the end of onRenderBody. + let headComponents = [] + const icons = pluginOptions.icons || defaultIcons // If icons were generated, also add a favicon link. @@ -10,39 +13,48 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => { let favicon = icons && icons.length ? icons[0].src : null if (favicon) { - setHeadComponents([ + headComponents.push( , - ]) + /> + ) } } - setHeadComponents([ + // Add manifest link tag. + headComponents.push( , - , - ]) + /> + ) - if (pluginOptions.legacy) { - setHeadComponents( - icons.map(icon => ( - - )) + // 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( + ) } + + if (pluginOptions.legacy) { + const iconLinkTags = icons.map(icon => ( + + )) + + headComponents = [...headComponents, ...iconLinkTags] + } + + setHeadComponents(headComponents) } diff --git a/packages/gatsby-source-faker/README.md b/packages/gatsby-source-faker/README.md index 4c09186a44993..40f5c66c88364 100644 --- a/packages/gatsby-source-faker/README.md +++ b/packages/gatsby-source-faker/README.md @@ -1,37 +1,37 @@ -## gatsby-source-faker - -This is a plugin that allows you to use [faker.js](https://github.com/marak/Faker.js/) to generate fake data for gatsby sites. This could come in handy for creating example sites, documentation, or just to experiment with Gatsby.js - -### To use it - -Install `gatsby-source-faker` - -``` - npm install --save gatsby-source-faker -``` - -or - -``` - npm install gatsby-source-faker -``` - -Add `gatsby-source-faker` to the `gatsby-config.js` as follows - -```javascript -plugins: [ - { - resolve: `gatsby-source-faker`, - // derive schema from faker's options - options: { - schema: { - name: ["firstName", "lastName"], - }, - count: 3, // how many fake objects you need - type: "NameData", // Name of the graphql query node - }, - }, -] -``` - -Example: [Using Faker](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-faker) +## gatsby-source-faker + +This is a plugin that allows you to use [faker.js](https://github.com/marak/Faker.js/) to generate fake data for gatsby sites. This could come in handy for creating example sites, documentation, or just to experiment with Gatsby.js + +### To use it + +Install `gatsby-source-faker` + +``` + npm install --save gatsby-source-faker +``` + +or + +``` + npm install gatsby-source-faker +``` + +Add `gatsby-source-faker` to the `gatsby-config.js` as follows + +```javascript +plugins: [ + { + resolve: `gatsby-source-faker`, + // derive schema from faker's options + options: { + schema: { + name: ["firstName", "lastName"], + }, + count: 3, // how many fake objects you need + type: "NameData", // Name of the graphql query node + }, + }, +] +``` + +Example: [Using Faker](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-faker)