feat(contentful): add traced SVGs to Contentful images

packages/gatsby-image/README.md

@@ -168,10 +168,12 @@ Their fragments are:
 
 * `GatsbyContentfulResolutions`
 * `GatsbyContentfulResolutions_noBase64`
+* `GatsbyContentfulResolutions_tracedSVG`
 * `GatsbyContentfulResolutions_withWebp`
 * `GatsbyContentfulResolutions_withWebp_noBase64`
 * `GatsbyContentfulSizes`
 * `GatsbyContentfulSizes_noBase64`
+* `GatsbyContentfulSizes_tracedSVG`
 * `GatsbyContentfulSizes_withWebp`
 * `GatsbyContentfulSizes_withWebp_noBase64`
 

packages/gatsby-source-contentful/package.json

@@ -7,13 +7,14 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "axios": "^0.16.1",
+    "axios": "^0.16.2",
     "babel-runtime": "^6.26.0",
     "base64-img": "^1.0.3",
     "bluebird": "^3.5.0",
     "contentful": "^6.1.0",
     "deep-map": "^1.5.0",
     "fs-extra": "^4.0.2",
+    "gatsby-plugin-sharp": "^1.6.46",
     "json-stringify-safe": "^5.0.1",
     "lodash": "^4.17.4",
     "qs": "^6.4.0"

packages/gatsby-source-contentful/src/cache-image.js

@@ -0,0 +1,61 @@
+const crypto = require(`crypto`)
+const { resolve, parse } = require(`path`)
+
+const axios = require(`axios`)
+const { pathExists, createWriteStream } = require(`fs-extra`)
+
+module.exports = async function cacheImage (store, image, options) {
+  const program = store.getState().program
+  const CACHE_DIR = resolve(`${program.directory}/.cache/contentful/assets/`)
+  const { file: { url, fileName, details } } = image
+  const { width, height, maxWidth, maxHeight, resizingBehavior, cropFocus, background } = options
+  const userWidth = maxWidth || width
+  const userHeight = maxHeight || height
+
+  const aspectRatio = details.image.height / details.image.width
+  const resultingWidth = Math.round(userWidth || 800)
+  const resultingHeight = Math.round(userHeight || resultingWidth * aspectRatio)
+
+  const params = [`w=${resultingWidth}`, `h=${resultingHeight}`]
+  if (resizingBehavior) {
+    params.push(`fit=${resizingBehavior}`)
+  }
+  if (cropFocus) {
+    params.push(`crop=${cropFocus}`)
+  }
+  if (background) {
+    params.push(`bg=${background}`)
+  }
+
+  const optionsHash = crypto
+    .createHash(`md5`)
+    .update(JSON.stringify([
+      url,
+      ...params,
+    ]))
+    .digest(`hex`)
+
+  const { name, ext } = parse(fileName)
+  const absolutePath = resolve(CACHE_DIR, `${name}-${optionsHash}${ext}`)
+
+  const alreadyExists = await pathExists(absolutePath)
+
+  if (!alreadyExists) {
+    const previewUrl = `http:${url}?${params.join(`&`)}`
+
+    const response = await axios({
+      method: `get`,
+      url: previewUrl,
+      responseType: `stream`,
+    })
+
+    await new Promise((resolve, reject) => {
+      const file = createWriteStream(absolutePath)
+      response.data.pipe(file)
+      file.on(`finish`, resolve)
+      file.on(`error`, reject)
+    })
+  }
+
+  return absolutePath
+}

packages/gatsby-source-contentful/src/extend-node-type.js

@@ -9,6 +9,9 @@ const {
 const qs = require(`qs`)
 const base64Img = require(`base64-img`)
 const _ = require(`lodash`)
+const path = require(`path`)
+
+const cacheImage = require(`./cache-image`)
 
 const {
   ImageFormatType,
@@ -260,11 +263,40 @@ const resolveResize = (image, options) => {
 
 exports.resolveResize = resolveResize
 
-exports.extendNodeType = ({ type }) => {
+exports.extendNodeType = ({ type, store }) => {
   if (type.name !== `ContentfulAsset`) {
     return {}
   }
 
+  const getTracedSVG = async (args) =>
+  {
+    const {
+      traceSVG,
+    } = require(`gatsby-plugin-sharp`)
+
+    const { image, options } = args
+    const {
+      file: { contentType },
+    } = image
+
+    if (contentType.indexOf(`image/`) !== 0) {
+      return null
+    }
+
+    const absolutePath = await cacheImage(store, image, options)
+    const extension = path.extname(absolutePath)
+
+    return traceSVG({
+      file: {
+        internal: image.internal,
+        name: image.file.fileName,
+        extension,
+        absolutePath,
+      },
+      args: { toFormat: `` },
+      fileArgs: options,
+    })}
+
   return {
     resolutions: {
       type: new GraphQLObjectType({
@@ -276,6 +308,10 @@ exports.extendNodeType = ({ type }) => {
               return getBase64Image(imageProps)
             },
           },
+          tracedSVG: {
+            type: GraphQLString,
+            resolve: getTracedSVG,
+          },
           aspectRatio: { type: GraphQLFloat },
           width: { type: GraphQLFloat },
           height: { type: GraphQLFloat },
@@ -367,6 +403,10 @@ exports.extendNodeType = ({ type }) => {
               return getBase64Image(imageProps)
             },
           },
+          tracedSVG: {
+            type: GraphQLString,
+            resolve: getTracedSVG,
+          },
           aspectRatio: { type: GraphQLFloat },
           src: { type: GraphQLString },
           srcSet: { type: GraphQLString },
@@ -459,6 +499,10 @@ exports.extendNodeType = ({ type }) => {
               return getBase64Image(imageProps)
             },
           },
+          tracedSVG: {
+            type: GraphQLString,
+            resolve: getTracedSVG,
+          },
           aspectRatio: { type: GraphQLFloat },
           width: { type: GraphQLFloat },
           height: { type: GraphQLFloat },
@@ -509,6 +553,10 @@ exports.extendNodeType = ({ type }) => {
               return getBase64Image(imageProps)
             },
           },
+          tracedSVG: {
+            type: GraphQLString,
+            resolve: getTracedSVG,
+          },
           aspectRatio: { type: GraphQLFloat },
           src: { type: GraphQLString },
           srcSet: { type: GraphQLString },
@@ -560,6 +608,10 @@ exports.extendNodeType = ({ type }) => {
               return getBase64Image(imageProps)
             },
           },
+          tracedSVG: {
+            type: GraphQLString,
+            resolve: getTracedSVG,
+          },
           src: { type: GraphQLString },
           width: { type: GraphQLInt },
           height: { type: GraphQLInt },

packages/gatsby-source-contentful/src/fragments.js

@@ -9,6 +9,16 @@ export const contentfulAssetResolutions = graphql`
   }
 `
 
+export const contentfulAssetResolutionsTracedSVG = graphql`
+  fragment GatsbyContentfulResolutions_tracedSVG on ContentfulResolutions {
+    tracedSVG
+    width
+    height
+    src
+    srcSet
+  }
+`
+
 export const contentfulAssetResolutionsNoBase64 = graphql`
   fragment GatsbyContentfulResolutions_noBase64 on ContentfulResolutions {
     width
@@ -51,6 +61,16 @@ export const contentfulAssetSizes = graphql`
   }
 `
 
+export const contentfulAssetSizesTracedSVG = graphql`
+  fragment GatsbyContentfulSizes_tracedSVG on ContentfulSizes {
+    tracedSVG
+    aspectRatio
+    src
+    srcSet
+    sizes
+  }
+`
+
 export const contentfulAssetSizesNoBase64 = graphql`
   fragment GatsbyContentfulSizes_noBase64 on ContentfulSizes {
     aspectRatio

packages/gatsby-source-contentful/src/gatsby-node.js

@@ -1,3 +1,5 @@
+const path = require(`path`)
+
 const _ = require(`lodash`)
 const fs = require(`fs-extra`)
 
@@ -181,6 +183,12 @@ exports.sourceNodes = async (
   return
 }
 
+exports.onPreBootstrap = async ({ store }) => {
+  const program = store.getState().program
+  const CACHE_DIR = path.resolve(`${program.directory}/.cache/contentful/assets/`)
+  await fs.ensureDir(CACHE_DIR)
+}
+
 // Check if there are any ContentfulAsset nodes and if gatsby-image is installed. If so,
 // add fragments for ContentfulAsset and gatsby-image. The fragment will cause an error
 // if there's not ContentfulAsset nodes and without gatsby-image, the fragment is useless.