update resize and tests

gatsbyjs · Jan 20, 2018 · f9a69ea · f9a69ea
1 parent 232c50d
commit f9a69ea
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 70 deletions.
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
@@ -7,7 +7,7 @@ exports[`contentful extend node type createUrl ignores options it doesn't unders
 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=",
+  "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
   "height": 533,
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
   "width": 400,
@@ -17,7 +17,7 @@ Object {
 exports[`contentful extend node type resolveResize generates resized images using all options 1`] = `
 Object {
   "aspectRatio": 1.1278195488721805,
-  "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
+  "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
   "height": 399,
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill",
   "width": 450,

diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js
@@ -72,37 +72,6 @@ const isImage = image =>
     _.get(image, `file.contentType`)
   )
 
-const getBase64ImageOld = (imgUrl, args = {}) => {
-  const requestUrl = `https:${imgUrl}?w=20`
-  // TODO add caching.
-  return new Promise(resolve => {
-    base64Img.requestBase64(requestUrl, (a, b, body) => {
-      resolve(body)
-    })
-  })
-}
-
-const getBase64ImageAndBasicMeasurements = (image, args) =>
-  new Promise(resolve => {
-    getBase64ImageOld(image.file.url, args).then(base64Str => {
-      let aspectRatio
-      if (args.width && args.height) {
-        aspectRatio = args.width / args.height
-      } else {
-        aspectRatio =
-          image.file.details.image.width / image.file.details.image.height
-      }
-
-      resolve({
-        contentType: image.file.contentType,
-        base64Str,
-        aspectRatio,
-        width: image.file.details.image.width,
-        height: image.file.details.image.height,
-      })
-    })
-  })
-
 const getBase64Image = (imageProps) => {
   if (!imageProps) return null
 
@@ -312,39 +281,30 @@ exports.resolveResponsiveSizes = resolveResponsiveSizes
 const resolveResize = (image, options) => {
   if (!isImage(image)) return null
 
-  return new Promise(resolve => {
-    getBase64ImageAndBasicMeasurements(image, options).then(
-      ({ contentType, base64Str, width, height, aspectRatio }) => {
-        // If the user selected a height (so cropping) and fit option
-        // is not set, we'll set our defaults
-        if (options.height) {
-          if (!options.resizingBehavior) {
-            options.resizingBehavior = `fill`
-          }
-        }
-
-        if (options.base64) {
-          resolve(base64Str)
-          return
-        }
-
-        const pickedWidth = options.width
-        let pickedHeight
-        if (options.height) {
-          pickedHeight = options.height
-        } else {
-          pickedHeight = pickedWidth / aspectRatio
-        }
-        resolve({
-          src: createUrl(image.file.url, options),
-          width: Math.round(pickedWidth),
-          height: Math.round(pickedHeight),
-          aspectRatio,
-          base64: base64Str,
-        })
-      }
-    )
-  })
+  const { baseUrl, aspectRatio } = getBasicImageProps(image, options)
+
+  // If the user selected a height (so cropping) and fit option
+  // is not set, we'll set our defaults
+  if (options.height) {
+    if (!options.resizingBehavior) {
+      options.resizingBehavior = `fill`
+    }
+  }
+
+  const pickedWidth = options.width
+  let pickedHeight
+  if (options.height) {
+    pickedHeight = options.height
+  } else {
+    pickedHeight = pickedWidth / aspectRatio
+  }
+  return {
+    src: createUrl(image.file.url, options),
+    width: Math.round(pickedWidth),
+    height: Math.round(pickedHeight),
+    aspectRatio,
+    baseUrl,
+  }
 }
 
 exports.resolveResize = resolveResize
@@ -545,6 +505,12 @@ exports.extendNodeType = ({ type }) => {
       type: new GraphQLObjectType({
         name: `ContentfulResize`,
         fields: {
+          base64: {
+            type: GraphQLString,
+            resolve(imageProps) {
+              return getBase64Image(imageProps)
+            },
+          },
           src: { type: GraphQLString },
           width: { type: GraphQLInt },
           height: { type: GraphQLInt },
@@ -570,10 +536,6 @@ exports.extendNodeType = ({ type }) => {
         resizingBehavior: {
           type: ImageResizingBehavior,
         },
-        base64: {
-          type: GraphQLBoolean,
-          defaultValue: false,
-        },
         toFormat: {
           type: ImageFormatType,
           defaultValue: ``,