add auto image generation support, update docs

Author: AJ Moon

packages/gatsby-plugin-manifest/README.md

@@ -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.
+
+### 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:
+
 ```javascript
 // In your gatsby-config.js
 plugins: [
@@ -52,4 +57,62 @@ plugins: [
 ];
 ```
 
+### Hybrid configuration
+
+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:
+
+```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 ecept for the icons, you only provide a hi-res source icon to be used to auto generate the default set of icons. 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`.
+
+

packages/gatsby-plugin-manifest/package.json

@@ -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",

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

@@ -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()
+    }
   })

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

@@ -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`}