Merge branch 'master' into gatsby-plugin-compression

Author: sebastienfi

docs/docs/adding-images-fonts-files.md

@@ -53,11 +53,11 @@ This mechanism provides a number of benefits:
 
 However there is an **escape hatch** that you can use to add an asset outside of the module system.
 
-If you put a file into the `static` folder, it will **not** be processed by Webpack. Instead it will be copied into the public folder untouched. E.g. if you add a file named `sun.jpg` to the static folder, it'll be copied to `public/sun.jpg`. To reference assets in the `static` folder, you need to use a special variable called `__PATH_PREFIX__`. You will need to make sure you set `pathPrefix` in your gatsby-config.js for this to work (set it to `/` if you don't have a path prefix).
-
-In JavaScript code, you can use `__PATH_PREFIX__` for similar purposes:
+If you put a file into the `static` folder, it will **not** be processed by Webpack. Instead it will be copied into the public folder untouched. E.g. if you add a file named `sun.jpg` to the static folder, it'll be copied to `public/sun.jpg`. To reference assets in the `static` folder, you'll need to [import a helper function from `gatsby-link` named `withPrefix`](/packages/gatsby-link/#prefixed-paths-helper). You will need to make sure [you set `pathPrefix` in your gatsby-config.js for this to work](/docs/path-prefix/).
 
 ```js
+import { withPrefix } from 'gatsby-link'
+
 render() {
   // Note: this is an escape hatch and should be used sparingly!
   // Normally we recommend using `import` for getting asset URLs

examples/image-processing/package.json

@@ -5,23 +5,20 @@
   "version": "1.0.0",
   "author": "Florian Kissling <[email protected]>",
   "dependencies": {
-    "gatsby": "^1.9.52",
-    "gatsby-image": "^1.0.5",
-    "gatsby-link": "^1.6.20",
-    "gatsby-plugin-google-analytics": "^1.0.8",
+    "gatsby": "^1.9.112",
+    "gatsby-image": "^1.0.24",
+    "gatsby-link": "^1.6.27",
+    "gatsby-plugin-google-analytics": "^1.0.12",
     "gatsby-plugin-offline": "latest",
-    "gatsby-plugin-sharp": "^1.6.8",
+    "gatsby-plugin-sharp": "^1.6.20",
     "gatsby-source-drupal": "^1.3.7",
-    "gatsby-source-filesystem": "^1.5.2",
-    "gatsby-transformer-sharp": "^1.6.8",
+    "gatsby-source-filesystem": "^1.5.8",
+    "gatsby-transformer-sharp": "^1.6.13",
     "react-typography": "^0.15.0",
     "typography": "^0.15.8",
     "typography-theme-bootstrap": "^0.15.10"
   },
-  "keywords": [
-    "gatsby",
-    "sharp"
-  ],
+  "keywords": ["gatsby", "sharp"],
   "license": "MIT",
   "main": "n/a",
   "scripts": {

examples/image-processing/src/pages/index.js

@@ -12,6 +12,11 @@ class Index extends React.Component {
     const cropBottomLeft = this.props.data.cropBottomLeft.resize
     const cropEntropy = this.props.data.cropEntropy.resize
     const cropCenter = this.props.data.cropCenter.resize
+    const sizesDuotoneOriginal = this.props.data.sizesDuotoneOriginal.sizes
+    const sizesDuotone25 = this.props.data.sizesDuotone25.sizes
+    const sizesDuotone50 = this.props.data.sizesDuotone50.sizes
+    const sizesDuotone75 = this.props.data.sizesDuotone75.sizes
+    const sizesDuotone = this.props.data.sizesDuotone.sizes
 
     return (
       <div>
@@ -83,9 +88,9 @@ class Index extends React.Component {
           </code>
         </h3>
 
-        <ul style={styles.ul}>
+        <ul style={{ ...styles.ul, ...styles.row }}>
           {images.map(image => (
-            <li style={styles.thumbnail} key={image.node.resize.src}>
+            <li style={styles.column20} key={image.node.resize.src}>
               <img src={image.node.resize.src} />
             </li>
           ))}
@@ -114,27 +119,27 @@ class Index extends React.Component {
           see Mr. Gatsby toasting to us in the first thumbnail:
         </p>
 
-        <ul style={styles.ul}>
-          <li style={styles.thumbnail}>
+        <ul style={{ ...styles.ul, ...styles.row }}>
+          <li style={styles.column25}>
             <img src={cropDefault.src} />
           </li>
-          <li style={styles.thumbnail}>
+          <li style={styles.column25}>
             <img src={cropBottomLeft.src} />
             <p>
               <small>
                 <code>cropFocus: SOUTHWEST</code>
               </small>
             </p>
           </li>
-          <li style={styles.thumbnail}>
+          <li style={styles.column25}>
             <img src={cropEntropy.src} />
             <p>
               <small>
                 <code>cropFocus: ENTROPY</code>
               </small>
             </p>
           </li>
-          <li style={styles.thumbnail}>
+          <li style={styles.column25}>
             <img src={cropCenter.src} />
             <p>
               <small>
@@ -231,7 +236,44 @@ class Index extends React.Component {
             highlight: "#f00e2e", shadow: "#192550" {`}`}, toFormat: PNG)
           </small>
         </h3>
+
         <Img sizes={sizes} />
+
+        <h3 style={{ marginTop: rhythm(2) }}>
+          <small>
+            sizes(duotone:
+            {` `}
+            {`{ `}
+            highlight: "#0ec4f1", shadow: "#192550", opacity: 50 {`}`})
+          </small>
+        </h3>
+
+        <div style={styles.row}>
+          <div style={styles.column20}>
+            <Img sizes={sizesDuotoneOriginal} />
+          </div>
+          <div style={styles.column20}>
+            <Img sizes={sizesDuotone25} />
+          </div>
+          <div style={styles.column20}>
+            <Img sizes={sizesDuotone50} />
+          </div>
+          <div style={styles.column20}>
+            <Img sizes={sizesDuotone75} />
+          </div>
+          <div style={styles.column20}>
+            <Img sizes={sizesDuotone} />
+          </div>
+        </div>
+
+        <p>
+          By setting an optional third parameter{` `}
+          <code>opacity</code> for <code>duotone</code>, a semi-transparent
+          version of the duotone{`'`}d image will be composited over the
+          original allowing the original image and its colors to partially {`"`}shine
+          through{`"`}.
+        </p>
+
         <h2
           style={{
             paddingTop: rhythm(2),
@@ -273,19 +315,33 @@ class Index extends React.Component {
 
 const styles = {}
 
+styles.row = {
+  display: `flex`,
+  flexWrap: `wrap`,
+  margin: `8px -4px 1rem`,
+}
+
 styles.ul = {
-  marginLeft: rhythm(-3 / 4),
-  marginRight: rhythm(-3 / 4),
   padding: `0`,
   listStyle: `none`,
 }
 
-styles.thumbnail = {
+styles.column20 = {
+  flexShrink: 0,
+  flexGrow: 0,
+  color: `#999`,
+  width: `20%`,
+  padding: `0 4px`,
+  margin: 0,
+}
+
+styles.column25 = {
+  flexShrink: 0,
+  flexGrow: 0,
   color: `#999`,
-  float: `left`,
-  marginLeft: rhythm(3 / 4),
-  marginRight: rhythm(3 / 4),
-  marginBottom: rhythm(6 / 4),
+  width: `25%`,
+  padding: `0 4px`,
+  margin: 0,
 }
 
 export default Index
@@ -316,6 +372,55 @@ export const pageQuery = graphql`
         ...GatsbyImageSharpSizes_tracedSVG
       }
     }
+    sizesDuotone: imageSharp(id: { regex: "/fecolormatrix-kanye-west.jpg/" }) {
+      sizes(
+        maxWidth: 120
+        duotone: { highlight: "#0ec4f1", shadow: "#192550" }
+        traceSVG: { color: "#1E2151" }
+      ) {
+        ...GatsbyImageSharpSizes_tracedSVG
+      }
+    }
+    sizesDuotone50: imageSharp(
+      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    ) {
+      sizes(
+        maxWidth: 120
+        duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 50 }
+        traceSVG: { color: "#A7DEF6" }
+      ) {
+        ...GatsbyImageSharpSizes_tracedSVG
+      }
+    }
+    sizesDuotone75: imageSharp(
+      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    ) {
+      sizes(
+        maxWidth: 120
+        duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 75 }
+        traceSVG: { color: "#0ec4f1" }
+      ) {
+        ...GatsbyImageSharpSizes_tracedSVG
+      }
+    }
+    sizesDuotone25: imageSharp(
+      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    ) {
+      sizes(
+        maxWidth: 120
+        traceSVG: { color: "#D1EFFB" }
+        duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 25 }
+      ) {
+        ...GatsbyImageSharpSizes_tracedSVG
+      }
+    }
+    sizesDuotoneOriginal: imageSharp(
+      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    ) {
+      sizes(maxWidth: 120, traceSVG: { color: "#e7f7fe" }, toFormat: PNG) {
+        ...GatsbyImageSharpSizes_tracedSVG
+      }
+    }
     resolution: imageSharp(id: { regex: "/lol.jpg/" }) {
       resolutions(grayscale: true, width: 500) {
         ...GatsbyImageSharpResolutions_withWebp

packages/gatsby-link/README.md

@@ -59,6 +59,8 @@ Gatsby allows you to [automatically prefix links](/docs/path-prefix/) for sites
 
 This can create problems during development as pathnames won't be prefixed. To handle both, gatsby-link exports a helper function `withPrefix` that prepends the prefix during production but doesn't in development.
 
+This is only for pathnames you're constructing manually. The `<Link>` component handles prefixing automatically.
+
 ```jsx
 import { withPrefix } from "gatsby-link"
 

packages/gatsby-plugin-sharp/README.md

@@ -143,8 +143,8 @@ allImageSharp {
 #### duotone
 
 Applys a "duotone" effect (see [I][1], [II][2], [III][3]) to the source image if
- given two hex colors `shadow` and `highlight` defining start and end color of
- the duotone gradient, e.g.
+given two hex colors `shadow` and `highlight` defining start and end color of
+the duotone gradient, e.g.
 
 ```javascript
 responsiveResolution(
@@ -161,9 +161,36 @@ responsiveResolution(
 ```
 
 the source image colors will be converted to match a gradient color chosen based
-on each pixel's [relative luminance][4].
+on each pixel's [relative luminance][4].  
 Logic is borrowed from [react-duotone][5].
 
+You can pass a third optional parameter, `opacity`:
+
+```javascript
+responsiveResolution(
+  width: 800,
+  duotone: {
+    highlight: "#f00e2e",
+    shadow: "#192550",
+    opacity: 50
+  }
+) {
+  src
+  srcSet
+  base64
+}
+```
+
+If set, a semi-transparent version of duotone'd image will be composited over
+the original image, allowing the original image and its colors to partially
+"shine through". _Heads up_: If the original image contains an alpha
+channel it will be [flattened][15] before creating the composite.
+
+This works by adding an alpha channel to the duotone'd image - then we let Sharp
+do its magic via [`overlayWith`](http://sharp.dimens.io/en/stable/api-composite/#overlaywith); quoting the Sharp documentation:
+
+> If the overlay image contains an alpha channel then composition with <a href="https://en.wikipedia.org/wiki/Alpha_compositing">premultiplication</a> will occur.
+
 #### tracedSVG
 
 Generates a traced SVG of the image (see [the original GitHub issue][9]) and
@@ -214,3 +241,4 @@ responsiveResolution(
 [12]: https://github.com/svg/svgo
 [13]: https://github.com/tooolbox/node-potrace#parameters
 [14]: https://github.com/oliver-moran/jimp
+[15]: http://sharp.dimens.io/en/stable/api-operation/#flatten

packages/gatsby-plugin-sharp/src/duotone.js

@@ -13,7 +13,7 @@ module.exports = async function duotone(duotone, format, clonedPipeline) {
     format = `jpeg`
   }
 
-  return await clonedPipeline
+  const duotoneImage = await clonedPipeline
     .raw()
     .toBuffer({ resolveWithObject: true })
     .then(({ data, info }) => {
@@ -34,6 +34,12 @@ module.exports = async function duotone(duotone, format, clonedPipeline) {
         raw: info,
       }).toFormat(format)
     })
+
+  if (duotone.opacity) {
+    return overlayDuotone(duotoneImage, clonedPipeline, duotone, format)
+  } else {
+    return duotoneImage
+  }
 }
 
 // @see https://github.com/nagelflorian/react-duotone/blob/master/src/hex-to-rgb.js
@@ -69,3 +75,34 @@ function createDuotoneGradient(primaryColorRGB, secondaryColorRGB) {
 
   return duotoneGradient
 }
+
+async function overlayDuotone(duotoneImage, originalImage, duotone, format) {
+  const info = await duotoneImage
+    .flatten()
+    .metadata()
+    .then(info => info)
+  // see https://github.com/lovell/sharp/issues/859#issuecomment-311319149
+  const percentGrey = Math.round(duotone.opacity / 100 * 255)
+  const percentTransparency = Buffer.alloc(
+    info.width * info.height,
+    percentGrey
+  )
+
+  const duotoneWithTransparency = await duotoneImage
+    .joinChannel(percentTransparency, {
+      raw: { width: info.width, height: info.height, channels: 1 },
+    })
+    .raw()
+    .toBuffer()
+
+  return await originalImage
+    .overlayWith(duotoneWithTransparency, {
+      raw: { width: info.width, height: info.height, channels: 4 },
+    })
+    .toBuffer({ resolveWithObject: true })
+    .then(({ data, info }) =>
+      sharp(data, {
+        raw: info,
+      }).toFormat(format)
+    )
+}

packages/gatsby-transformer-sharp/src/extend-node-type.js

@@ -55,6 +55,7 @@ const DuotoneGradientType = new GraphQLInputObjectType({
     return {
       highlight: { type: GraphQLString },
       shadow: { type: GraphQLString },
+      opacity: { type: GraphQLInt },
     }
   },
 })