[1.0] [source-contentful] Add graphql fields for creating responsive …

…images using Contentful image API (#1228) * Add graphql fields for creating responsive images using Contentful image API * Run format
gatsbyjs · Jun 22, 2017 · 404a27c · 404a27c
1 parent 6cfa0e7
commit 404a27c
Show file tree

Hide file tree

Showing 12 changed files with 581 additions and 71 deletions.
diff --git a/examples/using-contentful/src/layouts/index.js b/examples/using-contentful/src/layouts/index.js
@@ -27,7 +27,7 @@ class DefaultLayout extends React.Component {
           </h3>
         </Link>
         {this.props.children()}
-        <hr />
+        <hr style={{ marginTop: rhythm(3) }} />
         <p>
           The src for this website is at
           {` `}

diff --git a/examples/using-contentful/src/pages/index.js b/examples/using-contentful/src/pages/index.js
@@ -1,6 +1,7 @@
 import React from "react"
 import Link from "gatsby-link"
 import * as PropTypes from "prop-types"
+import { rhythm } from "../utils/typography"
 
 const propTypes = {
   data: PropTypes.object.isRequired,
@@ -10,20 +11,39 @@ class IndexPage extends React.Component {
   render() {
     const productEdges = this.props.data.allContentfulProduct.edges
     return (
-      <div>
+      <div style={{ marginBottom: rhythm(2) }}>
+        <h1>Products</h1>
         {productEdges.map((productEdge, i) => {
           const product = productEdge.node
           return (
             <div key={product.id}>
-              <Link to={`/products/${product.id}/`}>
-                <h4>
-                  {
-                    product.childContentfulProductProductNameTextNode
-                      .productName
-                  }
-                </h4>
-                {product.image[0].file.url &&
-                  <img src={product.image[0].file.url} />}
+              <Link
+                style={{ color: `inherit`, textDecoration: `none` }}
+                to={`/products/${product.id}/`}
+              >
+                <div
+                  style={{
+                    display: `flex`,
+                    alignItems: `center`,
+                    borderBottom: `1px solid lightgray`,
+                    paddingBottom: rhythm(1 / 2),
+                    marginBottom: rhythm(1 / 2),
+                  }}
+                >
+                  <div style={{ marginRight: rhythm(1 / 2) }}>
+                    {product.image[0].responsiveResolution.src &&
+                      <img
+                        style={{ margin: 0 }}
+                        width={product.image[0].responsiveResolution.width}
+                        height={product.image[0].responsiveResolution.height}
+                        src={product.image[0].responsiveResolution.src}
+                        srcSet={product.image[0].responsiveResolution.srcSet}
+                      />}
+                  </div>
+                  <div style={{ flex: 1 }}>
+                    {product.productName.productName}
+                  </div>
+                </div>
               </Link>
             </div>
           )
@@ -43,10 +63,13 @@ query PageQuery {
     edges {
       node {
         id
-        childContentfulProductProductNameTextNode { productName }
+        productName { productName }
         image {
-          file {
-            url
+          responsiveResolution(width: 75) {
+            src
+            srcSet
+            height
+            width
           }
         }
       }

diff --git a/examples/using-contentful/src/templates/category.js b/examples/using-contentful/src/templates/category.js
@@ -11,27 +11,27 @@ const propTypes = {
 class CategoryTemplate extends React.Component {
   render() {
     const category = this.props.data.contentfulCategory
-    const { childContentfulCategoryTitleTextNode, product, icon } = category
-    const { title } = childContentfulCategoryTitleTextNode
-    const imageUrl = icon.file.url
+    const { title: { title }, product, icon } = category
+    const iconImg = icon.responsiveResolution
     return (
       <div>
-        <div style={{ display: `flex`, marginBottom: rhythm(1 / 2) }}>
-          <div style={{ height: rhythm(2), width: rhythm(2) }}>
-            <img
-              style={{
-                height: `auto`,
-                width: `auto`,
-                maxWidth: rhythm(2),
-                maxHeight: rhythm(2),
-                marginRight: rhythm(1 / 2),
-              }}
-              src={imageUrl}
-            />
-          </div>
-          <div style={{ display: `flex`, flexDirection: `column` }}>
-            <h4 style={{ marginBottom: 0 }}>{title}</h4>
-          </div>
+        <div
+          style={{
+            display: `flex`,
+            alignItems: `center`,
+            marginBottom: rhythm(1 / 2),
+          }}
+        >
+          <img
+            style={{
+              height: iconImg.height,
+              width: iconImg.width,
+              marginRight: rhythm(1 / 2),
+            }}
+            src={iconImg.src}
+            srcSet={iconImg.srcSet}
+          />
+          <h4 style={{ marginBottom: 0 }}>{title}</h4>
         </div>
         <h1>{title}</h1>
         <div>
@@ -41,7 +41,7 @@ class CategoryTemplate extends React.Component {
               product.map((p, i) =>
                 <li key={i}>
                   <Link to={`/products/${p.id}`}>
-                    {p.childContentfulProductProductNameTextNode.productName}
+                    {p.productName.productName}
                   </Link>
                 </li>
               )}
@@ -59,15 +59,18 @@ export default CategoryTemplate
 export const pageQuery = graphql`
   query categoryQuery($id: String!) {
     contentfulCategory(id: { eq: $id }) {
-      childContentfulCategoryTitleTextNode { title }
+      title { title }
       icon {
-        file {
-          url
+        responsiveResolution(width: 75) {
+          src
+          srcSet
+          height
+          width
         }
       }
       product {
         id
-        childContentfulProductProductNameTextNode { productName }
+        productName { productName }
       }
     }
   }

diff --git a/examples/using-contentful/src/templates/product.js b/examples/using-contentful/src/templates/product.js
@@ -12,44 +12,40 @@ class ProductTemplate extends React.Component {
   render() {
     const product = this.props.data.contentfulProduct
     const {
-      childContentfulProductProductNameTextNode,
-      childContentfulProductProductDescriptionTextNode,
+      productName: { productName },
+      productDescription,
       price,
       image,
       brand,
       categories,
     } = product
-    const { productName } = childContentfulProductProductNameTextNode
     return (
       <div>
-        <div style={{ display: `flex`, marginBottom: rhythm(1 / 2) }}>
-          <div style={{ height: rhythm(2), width: rhythm(2) }}>
-            <img
-              style={{
-                height: `auto`,
-                width: `auto`,
-                maxWidth: rhythm(2),
-                maxHeight: rhythm(2),
-                marginRight: rhythm(1 / 2),
-              }}
-              src={image[0].file.url}
-            />
-          </div>
-          <div style={{ display: `flex`, flexDirection: `column` }}>
-            <h4 style={{ marginBottom: 0 }}>{productName}</h4>
-          </div>
+        <div
+          style={{
+            display: `flex`,
+            alignItems: `center`,
+          }}
+        >
+          <img
+            style={{
+              height: image[0].responsiveResolution.height,
+              width: image[0].responsiveResolution.width,
+            }}
+            src={image[0].responsiveResolution.src}
+            srcSet={image[0].responsiveResolution.srcSet}
+          />
+          <h4>{productName}</h4>
         </div>
         <h1>{productName}</h1>
         <h4>
-          Made by {brand.childContentfulBrandCompanyNameTextNode.companyName}
+          Made by {brand.companyName.companyName}
         </h4>
         <div>
           <span>Price: ${price}</span>
           <div
             dangerouslySetInnerHTML={{
-              __html:
-                childContentfulProductProductDescriptionTextNode
-                  .childMarkdownRemark.html,
+              __html: productDescription.childMarkdownRemark.html,
             }}
           />
           <div>
@@ -58,7 +54,7 @@ class ProductTemplate extends React.Component {
               {categories.map((category, i) =>
                 <li key={i}>
                   <Link key={i} to={`/categories/${category.id}`}>
-                    {category.childContentfulCategoryTitleTextNode.title}
+                    {category.title.title}
                   </Link>
                 </li>
               )}
@@ -77,24 +73,27 @@ export default ProductTemplate
 export const pageQuery = graphql`
   query productQuery($id: String!) {
     contentfulProduct(id: { eq: $id }) {
-      childContentfulProductProductNameTextNode { productName }
-      childContentfulProductProductDescriptionTextNode {
+      productName { productName }
+      productDescription {
         childMarkdownRemark {
           html
         }
       }
       price
       image {
-        file {
-          url
+        responsiveResolution(width: 50, height: 50) {
+          src
+          srcSet
+          height
+          width
         }
       }
       brand {
-        childContentfulBrandCompanyNameTextNode { companyName }
+        companyName { companyName }
       }
       categories {
         id
-        childContentfulCategoryTitleTextNode { title }
+        title { title }
       }
     }
   }

diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json
@@ -11,7 +11,6 @@
     "imagemin-pngquant": "^5.0.0",
     "lodash": "^4.17.4",
     "progress": "^1.1.8",
-    "qs": "^6.3.0",
     "sharp": "^0.17.3"
   },
   "devDependencies": {

diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js
@@ -517,7 +517,7 @@ async function responsiveResolution({ file, args = {} }) {
       }
       return `${image.src} ${resolution}`
     })
-    .join(`,`)
+    .join(`,\n`)
 
   return {
     base64: base64Image.src,

diff --git a/packages/gatsby-source-contentful/.gitignore b/packages/gatsby-source-contentful/.gitignore
@@ -1,2 +1,4 @@
 /gatsby-node.js
+/extend-node-type.js
+/__tests__
 /yarn.lock
diff --git a/packages/gatsby-source-contentful/package.json b/packages/gatsby-source-contentful/package.json
@@ -15,9 +15,12 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.16.1",
+    "base64-img": "^1.0.3",
     "bluebird": "^3.4.6",
     "contentful": "^4.3.0",
+    "graphql": "^0.10.3",
     "json-stringify-safe": "^5.0.1",
-    "lodash": "^4.17.4"
+    "lodash": "^4.17.4",
+    "qs": "^6.4.0"
   }
 }
diff --git a/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap b/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`contentful extend node type createUrl allows you to create URls 1`] = `"//images.contentful.com/dsf/bl.jpg?w=100"`;
+
+exports[`contentful extend node type createUrl ignores options it doesn't understand 1`] = `"//images.contentful.com/dsf/bl.jpg?"`;
+
+exports[`contentful extend node type resolveResize generates resized images 1`] = `
+Object {
+  "aspectRatio": 0.75,
+  "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
+  "height": 533.3333333333334,
+  "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
+  "width": 400,
+}
+`;
+
+exports[`contentful extend node type resolveResponsiveResolution generates responsive resolution data for images 1`] = `
+Object {
+  "aspectRatio": 0.75,
+  "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
+  "height": 533.3333333333334,
+  "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
+  "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400 1x",
+  "width": 400,
+}
+`;
+
+exports[`contentful extend node type resolveResponsiveSizes generates responsive size data for images 1`] = `
+Object {
+  "aspectRatio": 0.75,
+  "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
+  "sizes": "(max-width: 400px) 100vw, 400px",
+  "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
+  "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=100 100w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=200 200w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400 400w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450 450w",
+}
+`;