Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(gatsby-plugin-manifest): make favicon link tag optional #11414

Merged
merged 7 commits into from
Jan 31, 2019
Merged

feat(gatsby-plugin-manifest): make favicon link tag optional #11414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
785bb63
feat(gatsby-plugin-manifest): make favicon link tag optional.
gurpreet-verimi Jan 30, 2019
b23b9e4
Fix failing test and add test for include_favicon
gurpreet-verimi Jan 30, 2019
3b1db17
Add default to true. Add corresponding test cases.
gurpreet-verimi Jan 30, 2019
b0baf4c
Update documention.
gurpreet-verimi Jan 30, 2019
dd6bcf8
Update packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js
wardpeet Jan 31, 2019
05d74b1
Update packages/gatsby-plugin-manifest/src/gatsby-ssr.js
wardpeet Jan 31, 2019
b824dec
fixed review comments and updated snapshot test
gurpreet-verimi Jan 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/gatsby-plugin-manifest/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ module.exports = {
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: `standalone`,
icon: `src/images/icon.png`, // This path is relative to the root of the site.
include_favicon: true, // Include favicon
wardpeet marked this conversation as resolved.
Show resolved Hide resolved
},
},
],
Expand Down Expand Up @@ -231,3 +232,28 @@ module.exports = {
],
}
```

## Exclude `favicon` link tag

Excludes `<link rel="shortcut icon" href="/favicon.png" />` link tag to html output. You can set `include_favicon` 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.
include_favicon: false, // This will exclude favicon link tag
},
},
],
}
```
155 changes: 155 additions & 0 deletions packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,112 @@ Array [
]
`;

exports[`gatsby-plugin-manifest Adds link favicon if "include_favicon" option is not provided 1`] = `
Array [
<link
href="/icons/icon-48x48.png"
rel="shortcut icon"
/>,
<link
href="/manifest.webmanifest"
rel="manifest"
/>,
<link
href="/icons/icon-48x48.png"
rel="apple-touch-icon"
sizes="48x48"
/>,
<link
href="/icons/icon-72x72.png"
rel="apple-touch-icon"
sizes="72x72"
/>,
<link
href="/icons/icon-96x96.png"
rel="apple-touch-icon"
sizes="96x96"
/>,
<link
href="/icons/icon-144x144.png"
rel="apple-touch-icon"
sizes="144x144"
/>,
<link
href="/icons/icon-192x192.png"
rel="apple-touch-icon"
sizes="192x192"
/>,
<link
href="/icons/icon-256x256.png"
rel="apple-touch-icon"
sizes="256x256"
/>,
<link
href="/icons/icon-384x384.png"
rel="apple-touch-icon"
sizes="384x384"
/>,
<link
href="/icons/icon-512x512.png"
rel="apple-touch-icon"
sizes="512x512"
/>,
]
`;

exports[`gatsby-plugin-manifest Adds link favicon tag if "include_favicon" is set to true 1`] = `
Array [
<link
href="/icons/icon-48x48.png"
rel="shortcut icon"
/>,
<link
href="/manifest.webmanifest"
rel="manifest"
/>,
<link
href="/icons/icon-48x48.png"
rel="apple-touch-icon"
sizes="48x48"
/>,
<link
href="/icons/icon-72x72.png"
rel="apple-touch-icon"
sizes="72x72"
/>,
<link
href="/icons/icon-96x96.png"
rel="apple-touch-icon"
sizes="96x96"
/>,
<link
href="/icons/icon-144x144.png"
rel="apple-touch-icon"
sizes="144x144"
/>,
<link
href="/icons/icon-192x192.png"
rel="apple-touch-icon"
sizes="192x192"
/>,
<link
href="/icons/icon-256x256.png"
rel="apple-touch-icon"
sizes="256x256"
/>,
<link
href="/icons/icon-384x384.png"
rel="apple-touch-icon"
sizes="384x384"
/>,
<link
href="/icons/icon-512x512.png"
rel="apple-touch-icon"
sizes="512x512"
/>,
]
`;

exports[`gatsby-plugin-manifest Creates legacy apple touch links Using default set of icons 1`] = `
Array [
<link
Expand Down Expand Up @@ -349,6 +455,55 @@ Array [
]
`;

exports[`gatsby-plugin-manifest Does not add a link favicon if "include_favicon" option is set to false 1`] = `
Array [
<link
href="/manifest.webmanifest"
rel="manifest"
/>,
<link
href="/icons/icon-48x48.png"
rel="apple-touch-icon"
sizes="48x48"
/>,
<link
href="/icons/icon-72x72.png"
rel="apple-touch-icon"
sizes="72x72"
/>,
<link
href="/icons/icon-96x96.png"
rel="apple-touch-icon"
sizes="96x96"
/>,
<link
href="/icons/icon-144x144.png"
rel="apple-touch-icon"
sizes="144x144"
/>,
<link
href="/icons/icon-192x192.png"
rel="apple-touch-icon"
sizes="192x192"
/>,
<link
href="/icons/icon-256x256.png"
rel="apple-touch-icon"
sizes="256x256"
/>,
<link
href="/icons/icon-384x384.png"
rel="apple-touch-icon"
sizes="384x384"
/>,
<link
href="/icons/icon-512x512.png"
rel="apple-touch-icon"
sizes="512x512"
/>,
]
`;

exports[`gatsby-plugin-manifest Does not create legacy apple touch links If "legacy" options is false and using default set of icons 1`] = `
Array [
<link
Expand Down
21 changes: 19 additions & 2 deletions packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// const { shallow } = require(`enzyme`)
const { onRenderBody } = require(`../gatsby-ssr`)

let headComponents
Expand Down Expand Up @@ -36,7 +35,25 @@ describe(`gatsby-plugin-manifest`, () => {
})

it(`Adds "shortcut icon" and "manifest" links and "theme_color" meta tag to head`, () => {
onRenderBody(ssrArgs, { icon: true, theme_color: `#000000` })
onRenderBody(ssrArgs, {
icon: true,
theme_color: `#000000`,
})
expect(headComponents).toMatchSnapshot()
})

it(`Adds link favicon tag if "include_favicon" is set to true`, () => {
onRenderBody(ssrArgs, { icon: true, include_favicon: true })
expect(headComponents).toMatchSnapshot()
})

it(`Adds link favicon if "include_favicon" option is not provided`, () => {
onRenderBody(ssrArgs, { icon: true })
expect(headComponents).toMatchSnapshot()
})

it(`Does not add a link favicon if "include_favicon" option is set to false`, () => {
onRenderBody(ssrArgs, { icon: true, include_favicon: false })
expect(headComponents).toMatchSnapshot()
})

Expand Down
9 changes: 7 additions & 2 deletions packages/gatsby-plugin-manifest/src/gatsby-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,16 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
const legacy =
typeof pluginOptions.legacy !== `undefined` ? pluginOptions.legacy : true

// If icons were generated, also add a favicon link.
// The user has an option to opt out of the favicon link tag being inserted into the head.
if (pluginOptions.icon) {
let favicon = icons && icons.length ? icons[0].src : null

if (favicon) {
const insertFaviconLinkTag =
typeof pluginOptions.include_favicon !== `undefined`
? pluginOptions.include_favicon
: true

if (favicon && insertFaviconLinkTag) {
headComponents.push(
<link
key={`gatsby-plugin-manifest-icon-link`}
Expand Down