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 #9977

Any guidance would be greatly appreciated.

Author: DZuz14

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 [
+  <link
+    href="/icons/icon-48x48.png"
+    rel="shortcut icon"
+  />,
+  <link
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+]
+`;

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, {

packages/gatsby-plugin-manifest/src/gatsby-ssr.js

@@ -3,46 +3,58 @@ 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.
   if (pluginOptions.icon) {
     let favicon = icons && icons.length ? icons[0].src : null
 
     if (favicon) {
-      setHeadComponents([
+      headComponents.push(
         <link
           key={`gatsby-plugin-manifest-icon-link`}
           rel="shortcut icon"
           href={withPrefix(favicon)}
-        />,
-      ])
+        />
+      )
     }
   }
 
-  setHeadComponents([
+  // Add manifest link tag.
+  headComponents.push(
     <link
       key={`gatsby-plugin-manifest-link`}
       rel="manifest"
       href={withPrefix(`/manifest.webmanifest`)}
-    />,
-    <meta
-      key={`gatsby-plugin-manifest-meta`}
-      name="theme-color"
-      content={pluginOptions.theme_color}
-    />,
-  ])
+    />
+  )
 
-  if (pluginOptions.legacy) {
-    setHeadComponents(
-      icons.map(icon => (
-        <link
-          key={`gatsby-plugin-manifest-apple-touch-icon-${icon.sizes}`}
-          rel="apple-touch-icon"
-          sizes={icon.sizes}
-          href={withPrefix(`${icon.src}`)}
-        />
-      ))
+  // 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(
+      <meta
+        key={`gatsby-plugin-manifest-meta`}
+        name="theme-color"
+        content={pluginOptions.theme_color}
+      />
     )
   }
+
+  if (pluginOptions.legacy) {
+    const iconLinkTags = icons.map(icon => (
+      <link
+        key={`gatsby-plugin-manifest-apple-touch-icon-${icon.sizes}`}
+        rel="apple-touch-icon"
+        sizes={icon.sizes}
+        href={withPrefix(`${icon.src}`)}
+      />
+    ))
+
+    headComponents = [...headComponents, ...iconLinkTags]
+  }
+
+  setHeadComponents(headComponents)
 }

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)