Skip to content

Updating gatsby-plugin-manifest #4382

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

Merged
merged 8 commits into from
Apr 5, 2018
Merged

Updating gatsby-plugin-manifest #4382

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5cb3eb2
add auto image generation support, update docs
Mar 28, 2018
ccc5a76
fix spelling error and clarify wording
Mar 28, 2018
590a14f
Update docs with shannon's feedback
Apr 4, 2018
348e96e
rewrite since I forgot to save
Apr 4, 2018
ef7e10a
Update README.md
KyleAMathews Apr 4, 2018
04070fa
Update gatsby-node.js
KyleAMathews Apr 4, 2018
acb7374
I made some of the language consistent like shannon requested but usi…
Apr 4, 2018
07f8c96
Update package.json
KyleAMathews Apr 5, 2018
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
63 changes: 63 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 @@ -19,6 +19,11 @@ the created manifest.json.

## How to use

There are three configurations in which this plugin will function: manual, hybrid, and auto. What config options you include will determine how the plugin functions.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd stay consistent with naming things, so either auto here and in the header below, or automatic in both cases. Not a huge deal, just makes it easier to scan the document for relevant information.

Might also make sense to stick with config or configuration and stay consistent.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, will people know generally what this plugin is about? A brief description before the how to use section could be handy.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about also rewording the last sentence to read "These three configuration options are explained below. The plugin functions differently depending on which of the three you choose." This would clearly link this paragraph with the following paragraph, and linking is nearly always a great thing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All sound good


### Manual configuration
In the manual configuration you are responsible for defining the entire web app manifest and providing the defined icons in the static directory. See the example below:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be really cool to see a 1-2 sentence use-case explained for each config option. Why would l choose manual vs. hybrid vs. automatic?

Copy link
Contributor Author

@moonmeister moonmeister Apr 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

YES! And I'll reorder cause auto should be first since it'll be the default most people want.


```javascript
// In your gatsby-config.js
plugins: [
Expand Down Expand Up @@ -52,4 +57,62 @@ plugins: [
];
```

### Hybrid configuration
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does including a "hybrid" configuration make sense? Wouldn't you just do one or the other? Or is the idea that you could want different icons at larger sizes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. It was going to be more code to eliminate this option then it was to leave it in. I figured it was useful if people wanted to not create all the icons or wanted to create different or larger icons. It's also useful if they just didn't like my naming conventions and wanted to modify path or name. I also believe it'd allow them to use webp or jpeg instead of png if they so desired (I believe the default output image is set to match the input. So if they gave it a jpeg it'd spit out a jpeg).

Basically it gives more options and without adding any code complications and little to no config complications.


In the hybrid configuration you are responsible for defining the entire web app manifest but instead of manually generating the defined icons you provide a hi-res source icon to be used to auto generate your defined icons. See the example below:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"to be used to" caught my eye and I had to read it a few times (passive voice, which is necessary in technical writing sometimes). Is there a way to make it active? "this plugin will use the hi-res source icon you provide to auto generate your defined icons"? Hm, not sure that's clear. What I'm really curious about is what is a source icon? Will people know what that is?

Also a couple commas could be useful "...manifest, but instead of manually generating the defined icons, you..."

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I rewrote this whole thing cause I reordered stuff


```javascript
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "GatsbyJS",
short_name: "GatsbyJS",
start_url: "/",
background_color: "#f7f0eb",
theme_color: "#a2466c",
display: "minimal-ui",
icon: src/images/icon.png
icons: [
{
src: `/favicons/android-chrome-192x192.png`,
sizes: `192x192`,
type: `image/png`,
},
{
src: `/favicons/android-chrome-512x512.png`,
sizes: `512x512`,
type: `image/png`,
},
],
},
},
];
```

### Automatic configuration

In the automatic configuration you are responsible for defining the entire web app manifest except for the icons. You only provide a hi-res source icon. The icons themselves and the needed configuration will be generated. See the example below:

```javascript
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "GatsbyJS",
short_name: "GatsbyJS",
start_url: "/",
background_color: "#f7f0eb",
theme_color: "#a2466c",
display: "minimal-ui",
icon: src/images/icon.png
},
},
];
```

To create `manifest.json`, you need to run `gatsby build`.


3 changes: 2 additions & 1 deletion packages/gatsby-plugin-manifest/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
},
"dependencies": {
"babel-runtime": "^6.26.0",
"bluebird": "^3.5.0"
"bluebird": "^3.5.0",
"sharp": "^0.20.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
Expand Down
92 changes: 90 additions & 2 deletions packages/gatsby-plugin-manifest/src/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,98 @@
const fs = require(`fs`)
const Promise = require(`bluebird`)
const sharp = require(`sharp`)

// default icons for generating icons
const defaultIcons = [
{
"src": `icons/icon-48x48.png`,
"sizes": `48x48`,
"type": `image/png`,
},
{
"src": `icons/icon-72x72.png`,
"sizes": `72x72`,
"type": `image/png`,
},
{
"src": `icons/icon-96x96.png`,
"sizes": `96x96`,
"type": `image/png`,
},
{
"src": `icons/icon-144x144.png`,
"sizes": `144x144`,
"type": `image/png`,
},
{
"src": `icons/icon-192x192.png`,
"sizes": `192x192`,
"type": `image/png`,
},
{
"src": `icons/icon-256x256.png`,
"sizes": `256x256`,
"type": `image/png`,
},
{
"src": `icons/icon-384x384.png`,
"sizes": `384x384`,
"type": `image/png`,
},
{
"src": `icons/icon-512x512.png`,
"sizes": `512x512`,
"type": `image/png`,
},
]

sharp.simd(true)

function generateIcons(icons, srcIcon) {
return Promise.map(icons, icon => {
const size = parseInt(icon.sizes.substring(0, icon.sizes.lastIndexOf(`x`)))
const imgPath = `./public/` + icon.src

return sharp(srcIcon)
.resize(size)
.toFile(imgPath)
.then(() => {
})
})
}

exports.onPostBuild = (args, pluginOptions) =>
new Promise(resolve => {
const { icon } = pluginOptions
const manifest = { ...pluginOptions }

//cleanup non manifest config from manifest
delete manifest.plugins
fs.writeFileSync(`./public/manifest.json`, JSON.stringify(manifest))
resolve()
delete manifest.icon

//if icons are not manually defined use default icon set
if (!manifest.icons) {
manifest.icons = defaultIcons
}

//determine destination path for icons and
const iconPath = `./public/` + manifest.icons[0].src.substring(0, manifest.icons[0].src.lastIndexOf(`/`))

//create destination directory if it doesn't exist
if (!fs.existsSync(iconPath)){
fs.mkdirSync(iconPath)
}

fs.writeFileSync(`${iconPath}/manifest.json`, JSON.stringify(manifest))

// only auto-generate if a src icon is defined
if (icon !== undefined) {
generateIcons(manifest.icons, icon).then(() => {
//images have been generated
console.log(`done`)
resolve()
})
} else {
resolve()
}
})
6 changes: 5 additions & 1 deletion 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 @@ -2,11 +2,15 @@ import React from "react"
import { withPrefix } from "gatsby-link"

exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {

const { icons } = pluginOptions
const iconPath = icons[0].src.substring(0, icons[0].src.lastIndexOf(`/`))

setHeadComponents([
<link
key={`gatsby-plugin-manifest-link`}
rel="manifest"
href={withPrefix(`/manifest.json`)}
href={withPrefix(`${iconPath}/manifest.json`)}
/>,
<meta
key={`gatsby-plugin-manifest-meta`}
Expand Down