Merge pull request #50 from birkir/feature/images

gatsby-image support

examples/arnaud/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "esm": "^3.2.18",
-    "gatsby": "^2.1.37",
+    "gatsby": "^2.13.8",
     "gatsby-image": "^2.0.34",
     "gatsby-plugin-manifest": "^2.0.24",
     "gatsby-plugin-offline": "^2.0.25",

examples/fragments/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "esm": "^3.2.18",
-    "gatsby": "^2.1.37",
+    "gatsby": "^2.13.8",
     "gatsby-image": "^2.0.34",
     "gatsby-plugin-manifest": "^2.0.24",
     "gatsby-plugin-offline": "^2.0.25",

examples/languages/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "esm": "^3.2.18",
-    "gatsby": "^2.1.37",
+    "gatsby": "^2.13.8",
     "gatsby-image": "^2.0.34",
     "gatsby-plugin-manifest": "^2.0.24",
     "gatsby-plugin-offline": "^2.0.25",

examples/pagination/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "esm": "^3.2.18",
-    "gatsby": "^2.1.37",
+    "gatsby": "^2.13.8",
     "gatsby-image": "^2.0.34",
     "gatsby-plugin-manifest": "^2.0.24",
     "gatsby-plugin-offline": "^2.0.25",

examples/static-query/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "esm": "^3.2.18",
-    "gatsby": "^2.1.37",
+    "gatsby": "^2.13.8",
     "gatsby-image": "^2.0.34",
     "gatsby-plugin-manifest": "^2.0.24",
     "gatsby-plugin-offline": "^2.0.25",

examples/static-query/src/components/articles.js

@@ -2,6 +2,17 @@ import React from 'react';
 import { graphql, StaticQuery } from 'gatsby';
 import { withPreview } from 'gatsby-source-prismic-graphql';
 import { RichText } from 'prismic-reactjs';
+import Img from 'gatsby-image';
+
+const Image = ({ source = {}, property, ...props }) => {
+  const sourceSharp = source[`${property}Sharp`];
+  if (sourceSharp && sourceSharp.childImageSharp) {
+    return <Img {...sourceSharp.childImageSharp} />;
+  } else if (source[property] && source[property].url) {
+    return <img src={source[property].url} {...props} />;
+  }
+  return null;
+};
 
 const query = graphql`
   query {
@@ -13,6 +24,14 @@ const query = graphql`
               uid
             }
             title
+            image
+            imageSharp {
+              childImageSharp {
+                fixed {
+                  ...GatsbyImageSharpFixed
+                }
+              }
+            }
           }
         }
       }
@@ -26,7 +45,10 @@ const renderArticles = data => {
       <h1>List of articles</h1>
       <ul>
         {data.prismic.allArticles.edges.map(({ node }) => (
-          <li key={node._meta.uid}>{RichText.render(node.title)}</li>
+          <li key={node._meta.uid}>
+            {RichText.render(node.title)}
+            <Image source={node} property="image" />
+          </li>
         ))}
       </ul>
     </>

package.json

@@ -53,7 +53,7 @@
     "typescript": "^3.3.3333"
   },
   "dependencies": {
-    "gatsby": "^2.1.37",
+    "gatsby": "2.13.8",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   }

packages/gatsby-source-prismic-graphql/README.md

@@ -34,6 +34,10 @@ Add plugin to `gatsby-config.js`:
       path: '/article',        // Placeholder page for unpublished documents
       component: require.resolve('./src/templates/article.js'),
     }],
+    sharpKeys: [
+      /image|photo|picture/, // (default)
+      'profilepic',
+    ],
   }
 }
 ```
@@ -223,6 +227,68 @@ export default function Example({ data, prismic }) {
 }
 ```
 
+### Working with gatsby-image
+
+Latest version of the plugin supports gatsby-image by adding a new property to graphql types that contain fields that match the `sharpKeys` array (this defaults to `/image|photo|picture/`) with the `Sharp` suffix.
+
+**Note:** When querying, make sure to also query the source field, eg.
+
+```gql
+query {
+  prismic {
+    Article(id: "123") {
+      title
+      articlePhoto
+      articlePhotoSharp {
+        childImageSharp {
+          fluid(maxWidth: 400, maxHeight: 250) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+You can also get access to specific crop sizes from Prismic by passing the `crop` argument:
+
+```gql
+query {
+  prismic {
+    Author(id: "123") {
+      name
+      profile_picture
+      profile_pictureSharp(crop: "face") {
+        childImageSharp {
+          fluid(maxWidth: 500, maxHeight: 500) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**NOTE** Does not transform images in preview mode, so make sure to fallback to the default image when the sharp image is null.
+
+```tsx
+import Img from 'gatsby-image';
+import get from 'lodash/get';
+
+// ...
+
+const sharpImage = get(data, 'prismic.Author.profile_pictureShap.childImageSharp.fluid');
+return sharpImage ? (
+  <Img fluid={sharpImage} />
+) : (
+  <img src={get(data, 'prismic.Author.profile_picture.url')} />
+);
+```
+
+Later we may add a Image component that does this for you, and leverages the new Prismic Image API as fallback for preview modes.
+
 ### Prismic.io content a/b experiments integration
 
 You can use this plugin in combination with Prismic's built-in experiments functionality, and a hosting service like Netlify, to run content a/b tests.

packages/gatsby-source-prismic-graphql/package.json

@@ -1,47 +1,38 @@
 {
   "private": false,
   "name": "gatsby-source-prismic-graphql",
-  "version": "3.2.0",
   "description": "Source data from Prismic with GraphQL",
-  "main": "index.js",
-  "types": "./types/index.d.ts",
-  "scripts": {
-    "start": "babel src --out-dir ./ --extensions '.ts,.tsx' --watch",
-    "clean": "rimraf {interfaces,types,components,utils,*.js}",
-    "build": "tsc --emitDeclarationOnly && babel src --out-dir ./ --extensions '.ts,.tsx'",
-    "prepare": "yarn clean && cross-env NODE_ENV=production yarn build"
-  },
+  "license": "MIT",
+  "author": "Birkir Gudjonsson <[email protected]>",
+  "homepage": "https://github.com/birkir/gatsby-source-prismic-graphql#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/birkir/gatsby-source-prismic-graphql.git"
   },
+  "bugs": {
+    "url": "https://github.com/birkir/gatsby-source-prismic-graphql/issues"
+  },
+  "version": "3.2.0",
+  "main": "index.js",
   "files": [
     "*.js",
     "components",
-    "utils",
     "interfaces",
-    "types"
-  ],
-  "keywords": [
-    "gatsby",
-    "gatsby-plugin",
-    "prismic",
-    "graphql",
-    "preview"
+    "types",
+    "utils"
   ],
-  "author": "Birkir Gudjonsson <[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/birkir/gatsby-source-prismic-graphql/issues"
-  },
-  "homepage": "https://github.com/birkir/gatsby-source-prismic-graphql#readme",
-  "peerDependencies": {
-    "gatsby": ">2.0.0-alpha",
-    "react": "^16.0.0"
+  "scripts": {
+    "build": "tsc --emitDeclarationOnly && babel src --out-dir ./ --extensions '.ts,.tsx'",
+    "clean": "rimraf {interfaces,types,components,utils,*.js}",
+    "prepare": "yarn clean && cross-env NODE_ENV=production yarn build",
+    "start": "babel src --out-dir ./ --extensions '.ts,.tsx' --watch"
   },
+  "types": "./types/index.d.ts",
   "dependencies": {
     "apollo-boost": "^0.3.1",
     "apollo-link-context": "^1.0.17",
+    "gatsby-image": "^2.2.4",
+    "gatsby-source-filesystem": "^2.1.2",
     "gatsby-source-graphql": "^2.0.15",
     "gatsby-source-graphql-universal": "^3.1.3",
     "path-to-regexp": "^3.0.0",
@@ -50,6 +41,10 @@
     "traverse": "^0.6.6",
     "url-pattern": "^1.0.3"
   },
+  "peerDependencies": {
+    "gatsby": ">2.0.0-alpha",
+    "react": "^16.0.0"
+  },
   "devDependencies": {
     "@babel/cli": "7.2.3",
     "@babel/core": "7.3.3",
@@ -67,7 +62,14 @@
     "@types/styled-components": "^4.1.12",
     "@types/traverse": "^0.6.32",
     "cross-env": "^5.2.0",
-    "gatsby": "^2.1.37",
+    "gatsby": "^2.13.9",
     "prettier": "^1.16.4"
-  }
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "graphql",
+    "preview",
+    "prismic"
+  ]
 }

packages/gatsby-source-prismic-graphql/src/components/WrapPage.tsx

@@ -3,6 +3,7 @@ import { pick, get } from 'lodash';
 import pathToRegexp from 'path-to-regexp';
 import Prismic from 'prismic-javascript';
 import React from 'react';
+import traverse from 'traverse';
 import { fieldName, getCookies, typeName } from '../utils';
 import { createLoadingScreen } from '../utils/createLoadingScreen';
 import { getApolloClient } from '../utils/getApolloClient';
@@ -17,6 +18,20 @@ const queryOrSource = (obj: any) => {
   return null;
 };
 
+const stripSharp = (query: any) => {
+  return traverse(query).map(function(x) {
+    if (
+      typeof x === 'object' &&
+      x.kind == 'Name' &&
+      this.parent &&
+      this.parent.node.kind === 'Field' &&
+      x.value.match(/Sharp$/)
+    ) {
+      this.parent.remove();
+    }
+  });
+};
+
 interface WrapPageState {
   data: any;
   loading: boolean;
@@ -116,7 +131,7 @@ export class WrapPage extends React.PureComponent<any, WrapPageState> {
 
     return getApolloClient(this.props.options).then(client => {
       return client.query({
-        query: getIsolatedQuery(query, fieldName, typeName) || query,
+        query: stripSharp(getIsolatedQuery(query, fieldName, typeName)),
         fetchPolicy: 'network-only',
         variables,
         ...rest,