From c583002f01bb1c6e6a77686c2a7b52be8c613cd5 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 01:43:04 -0500 Subject: [PATCH 01/20] Add subset of Sanity Image Pipeline arguments to getGatsbyImageProps --- src/images/getGatsbyImageProps.ts | 49 ++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 10 deletions(-) diff --git a/src/images/getGatsbyImageProps.ts b/src/images/getGatsbyImageProps.ts index 5b4778e7..e0296650 100644 --- a/src/images/getGatsbyImageProps.ts +++ b/src/images/getGatsbyImageProps.ts @@ -66,17 +66,36 @@ type ImageObject = { asset: ImageRef | ImageAsset } +// A subset of the options available for Sanity Image Transformations. We dont +// supply definition for the full list of options due to much of the work in +// these functions being specific to resizing and anticipating the widths. +// That is, we don't want to allow customization here that may impact expected +// image ratios when generating the fixed/fluid images for Gatsby. +// +// See more at https://www.sanity.io/docs/image-urls. +export type SanityImagePipelineArgs = { + bg?: string, + blur?: number, + fm?: string, + invert?: boolean, + q?: number, + sat?: number, + sharpen?: number +} + export type FluidArgs = { maxWidth?: number maxHeight?: number sizes?: string - toFormat?: ImageFormat + toFormat?: ImageFormat, + imagePipelineArgs?: SanityImagePipelineArgs } export type FixedArgs = { width?: number height?: number - toFormat?: ImageFormat + toFormat?: ImageFormat, + imagePipelineArgs?: SanityImagePipelineArgs } type SanityLocation = { @@ -193,13 +212,18 @@ export function getFixedGatsbyImage( forceConvert = 'jpg' } + const sanityImagePipelineArgs = args.imagePipelineArgs || {} + const sanityImagePipelineParams = Object.keys(sanityImagePipelineArgs).map( + key => key + '=' + sanityImagePipelineArgs[key] + ).join('&') + const hasOriginalRatio = desiredAspectRatio === dimensions.aspectRatio const outputHeight = Math.round(height ? height : width / desiredAspectRatio) const imgUrl = isOriginalSize(width, outputHeight) || (hasOriginalRatio && width > dimensions.width && outputHeight > dimensions.height) - ? url - : `${url}?w=${width}&h=${outputHeight}&fit=crop` + ? `${url}?${sanityImagePipelineParams}` + : `${url}?w=${width}&h=${outputHeight}&fit=crop&${sanityImagePipelineParams}` const widths = sizeMultipliersFixed.map((scale) => Math.round(width * scale)) const initial = {webp: [] as string[], base: [] as string[]} @@ -209,8 +233,8 @@ export function getFixedGatsbyImage( const resolution = `${sizeMultipliersFixed[i]}x` const currentHeight = Math.round(currentWidth / desiredAspectRatio) const imgUrl = isOriginalSize(currentWidth, currentHeight) - ? url - : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop` + ? `${url}?${sanityImagePipelineParams}` + : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop&${sanityImagePipelineParams}` const webpUrl = convertToFormat(imgUrl, 'webp') const baseUrl = convertToFormat(imgUrl, forceConvert || props.extension) @@ -267,11 +291,16 @@ export function getFluidGatsbyImage( forceConvert = 'jpg' } + const sanityImagePipelineArgs = args.imagePipelineArgs || {}; + const sanityImagePipelineParams = Object.keys(sanityImagePipelineArgs).map( + key => key + '=' + sanityImagePipelineArgs[key] + ).join('&'); + const baseSrc = isOriginalSize(maxWidth, maxHeight) || (maxWidth >= dimensions.width && maxHeight >= dimensions.height) - ? url - : `${url}?w=${maxWidth}&h=${maxHeight}&fit=crop` + ? `${url}?${sanityImagePipelineParams}` + : `${url}?w=${maxWidth}&h=${maxHeight}&fit=crop&${sanityImagePipelineParams}` const src = convertToFormat(baseSrc, forceConvert || extension) const srcWebp = convertToFormat(baseSrc, 'webp') @@ -288,8 +317,8 @@ export function getFluidGatsbyImage( .reduce((acc, currentWidth) => { const currentHeight = Math.round(currentWidth / desiredAspectRatio) const imgUrl = isOriginalSize(currentWidth, currentHeight) - ? url - : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop` + ? `${url}?${sanityImagePipelineParams}` + : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop&${sanityImagePipelineParams}` const webpUrl = convertToFormat(imgUrl, 'webp') const baseUrl = convertToFormat(imgUrl, forceConvert || props.extension) From 804e99a4c9efc1e9146454d1feaadf42ada61a4e Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 02:00:33 -0500 Subject: [PATCH 02/20] Add prepare to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 3de7e224..1e4bb6d5 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "build": "tsc && tsc -t ES5 --outDir lib-es5", "format": "prettier --write src/**/*.{ts,tsx}", "watch": "tsc --watch", + "prepare": "npm run build", "prepublishOnly": "npm run build && npm test" }, "dependencies": { From afa671014edcab7dfa9a52fc9d37395a5271215a Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 02:12:17 -0500 Subject: [PATCH 03/20] Fix build issues --- package.json | 2 +- src/images/getGatsbyImageProps.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 1e4bb6d5..913684fa 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "build": "tsc && tsc -t ES5 --outDir lib-es5", "format": "prettier --write src/**/*.{ts,tsx}", "watch": "tsc --watch", - "prepare": "npm run build", "prepublishOnly": "npm run build && npm test" }, "dependencies": { @@ -58,6 +57,7 @@ "@types/lodash": "^4.14.162", "@types/node": "^14.14.3", "@types/pump": "^1.0.1", + "@types/react-dom": "^16.9.9", "@types/split2": "^2.1.6", "@types/through2": "^2.0.36", "eslint": "^7.12.0", diff --git a/src/images/getGatsbyImageProps.ts b/src/images/getGatsbyImageProps.ts index e0296650..1a1249de 100644 --- a/src/images/getGatsbyImageProps.ts +++ b/src/images/getGatsbyImageProps.ts @@ -214,7 +214,7 @@ export function getFixedGatsbyImage( const sanityImagePipelineArgs = args.imagePipelineArgs || {} const sanityImagePipelineParams = Object.keys(sanityImagePipelineArgs).map( - key => key + '=' + sanityImagePipelineArgs[key] + key => key + '=' + (sanityImagePipelineArgs as any)[key] ).join('&') const hasOriginalRatio = desiredAspectRatio === dimensions.aspectRatio @@ -293,7 +293,7 @@ export function getFluidGatsbyImage( const sanityImagePipelineArgs = args.imagePipelineArgs || {}; const sanityImagePipelineParams = Object.keys(sanityImagePipelineArgs).map( - key => key + '=' + sanityImagePipelineArgs[key] + key => key + '=' + (sanityImagePipelineArgs as any)[key] ).join('&'); const baseSrc = From 61ed5faea0fda7c2ef09748b224c3f149789d3e2 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 02:26:54 -0500 Subject: [PATCH 04/20] Fix prepare script issues --- .npmignore | 10 ---------- package.json | 1 + 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/.npmignore b/.npmignore index ec8bf1b9..e69de29b 100644 --- a/.npmignore +++ b/.npmignore @@ -1,10 +0,0 @@ -test -.eslintrc -.gitignore -.editorconfig -.prettierrc -.travis.yml -jest-config.js -package-lock.json -yarn.lock -tsconfig.json diff --git a/package.json b/package.json index 913684fa..8193d21f 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "build": "tsc && tsc -t ES5 --outDir lib-es5", "format": "prettier --write src/**/*.{ts,tsx}", "watch": "tsc --watch", + "prepare": "npm run build", "prepublishOnly": "npm run build && npm test" }, "dependencies": { From 3bcc7f0cc934033a98302e3edad55d0aa1f4cf2b Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 02:30:23 -0500 Subject: [PATCH 05/20] Undo prepare changes --- .npmignore | 10 ++++++++++ package.json | 1 - 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/.npmignore b/.npmignore index e69de29b..ec8bf1b9 100644 --- a/.npmignore +++ b/.npmignore @@ -0,0 +1,10 @@ +test +.eslintrc +.gitignore +.editorconfig +.prettierrc +.travis.yml +jest-config.js +package-lock.json +yarn.lock +tsconfig.json diff --git a/package.json b/package.json index 8193d21f..913684fa 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "build": "tsc && tsc -t ES5 --outDir lib-es5", "format": "prettier --write src/**/*.{ts,tsx}", "watch": "tsc --watch", - "prepare": "npm run build", "prepublishOnly": "npm run build && npm test" }, "dependencies": { From 5d0a27d45fefa541e19329268ecfa3a6aaa64c46 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 02:33:11 -0500 Subject: [PATCH 06/20] Add scope to package --- package.json | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 913684fa..6f026815 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,18 @@ { - "name": "gatsby-source-sanity", + "name": "@bradleygriffith/gatsby-source-sanity", "description": "Gatsby source plugin for building websites using Sanity.io as a backend.", "version": "6.0.4", "author": "Sanity.io ", "contributors": [ - { - "name": "Henrique Doro", - "email": "opensource@hdoro.dev" - } + "Henrique Doro " ], "engines": { "node": ">=8.0.0" }, - "repository": "https://github.com/sanity-io/gatsby-source-sanity", + "repository": { + "type": "git", + "url": "git+https://github.com/sanity-io/gatsby-source-sanity.git" + }, "homepage": "https://github.com/sanity-io/gatsby-source-sanity#readme", "license": "MIT", "bugs": { @@ -71,5 +71,9 @@ }, "peerDependencies": { "gatsby": "^2.2.0" + }, + "directories": { + "lib": "lib", + "test": "test" } } From c529c72cfdb1c6a230c3b53005aa5bffb7038382 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 02:42:35 -0500 Subject: [PATCH 07/20] Fix tests --- src/images/getGatsbyImageProps.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/images/getGatsbyImageProps.ts b/src/images/getGatsbyImageProps.ts index 1a1249de..dd3137ff 100644 --- a/src/images/getGatsbyImageProps.ts +++ b/src/images/getGatsbyImageProps.ts @@ -222,8 +222,8 @@ export function getFixedGatsbyImage( const imgUrl = isOriginalSize(width, outputHeight) || (hasOriginalRatio && width > dimensions.width && outputHeight > dimensions.height) - ? `${url}?${sanityImagePipelineParams}` - : `${url}?w=${width}&h=${outputHeight}&fit=crop&${sanityImagePipelineParams}` + ? `${url}${sanityImagePipelineParams ? ("?" + sanityImagePipelineParams) : ""}` + : `${url}?w=${width}&h=${outputHeight}&fit=crop${sanityImagePipelineParams ? ("&" + sanityImagePipelineParams) : ""}` const widths = sizeMultipliersFixed.map((scale) => Math.round(width * scale)) const initial = {webp: [] as string[], base: [] as string[]} @@ -233,8 +233,8 @@ export function getFixedGatsbyImage( const resolution = `${sizeMultipliersFixed[i]}x` const currentHeight = Math.round(currentWidth / desiredAspectRatio) const imgUrl = isOriginalSize(currentWidth, currentHeight) - ? `${url}?${sanityImagePipelineParams}` - : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop&${sanityImagePipelineParams}` + ? `${url}${sanityImagePipelineParams ? ("?" + sanityImagePipelineParams) : ""}` + : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop${sanityImagePipelineParams ? ("&" + sanityImagePipelineParams) : ""}` const webpUrl = convertToFormat(imgUrl, 'webp') const baseUrl = convertToFormat(imgUrl, forceConvert || props.extension) @@ -299,8 +299,8 @@ export function getFluidGatsbyImage( const baseSrc = isOriginalSize(maxWidth, maxHeight) || (maxWidth >= dimensions.width && maxHeight >= dimensions.height) - ? `${url}?${sanityImagePipelineParams}` - : `${url}?w=${maxWidth}&h=${maxHeight}&fit=crop&${sanityImagePipelineParams}` + ? `${url}${sanityImagePipelineParams ? ("?" + sanityImagePipelineParams) : ""}` + : `${url}?w=${maxWidth}&h=${maxHeight}&fit=crop${sanityImagePipelineParams ? ("&" + sanityImagePipelineParams) : ""}` const src = convertToFormat(baseSrc, forceConvert || extension) const srcWebp = convertToFormat(baseSrc, 'webp') @@ -317,8 +317,8 @@ export function getFluidGatsbyImage( .reduce((acc, currentWidth) => { const currentHeight = Math.round(currentWidth / desiredAspectRatio) const imgUrl = isOriginalSize(currentWidth, currentHeight) - ? `${url}?${sanityImagePipelineParams}` - : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop&${sanityImagePipelineParams}` + ? `${url}${sanityImagePipelineParams ? ("?" + sanityImagePipelineParams) : ""}` + : `${url}?w=${currentWidth}&h=${currentHeight}&fit=crop${sanityImagePipelineParams ? ("&" + sanityImagePipelineParams) : ""}` const webpUrl = convertToFormat(imgUrl, 'webp') const baseUrl = convertToFormat(imgUrl, forceConvert || props.extension) From 871b9569daf38daa17cdc8c849106439c2acafb0 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:01:15 -0500 Subject: [PATCH 08/20] Add type for graphql usage --- src/images/extendImageNode.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index 076c7e12..3df28f24 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -15,6 +15,7 @@ import { ImageNode, FixedArgs, FluidArgs, + SanityImagePipelineArgs, DEFAULT_FLUID_MAX_WIDTH, DEFAULT_FIXED_WIDTH, } from './getGatsbyImageProps' @@ -72,6 +73,10 @@ function getExtension(config: PluginConfig) { type: ImageFormatType, defaultValue: '', }, + imagePipelineArgs: { + type: SanityImagePipelineArgs, + defaultValue: {} + }, }, resolve: (image: ImageNode, args: FixedArgs) => getFixedGatsbyImage(image, args, location), } @@ -104,6 +109,10 @@ function getExtension(config: PluginConfig) { type: ImageFormatType, defaultValue: '', }, + imagePipelineArgs: { + type: SanityImagePipelineArgs, + defaultValue: {} + }, }, resolve: (image: ImageNode, args: FluidArgs) => getFluidGatsbyImage(image, args, location), } From ee23f08065ef3305491bb01c6c8d66f6aa36dda6 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:02:55 -0500 Subject: [PATCH 09/20] Add type for graphql usage --- src/images/extendImageNode.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index 3df28f24..825c34b7 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -74,8 +74,7 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: SanityImagePipelineArgs, - defaultValue: {} + type: SanityImagePipelineArgs }, }, resolve: (image: ImageNode, args: FixedArgs) => getFixedGatsbyImage(image, args, location), @@ -110,8 +109,7 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: SanityImagePipelineArgs, - defaultValue: {} + type: SanityImagePipelineArgs }, }, resolve: (image: ImageNode, args: FluidArgs) => getFluidGatsbyImage(image, args, location), From 130fbbe6042e9c3635a5831abd74a68150605e60 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:06:10 -0500 Subject: [PATCH 10/20] Add type for graphql usage --- src/images/extendImageNode.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index 825c34b7..3a4fd9d7 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -5,6 +5,7 @@ import { GraphQLInt, GraphQLEnumType, GraphQLNonNull, + GraphQLObjectType, GraphQLFieldConfig, } from 'gatsby/graphql' import {PluginConfig} from '../gatsby-node' @@ -15,7 +16,6 @@ import { ImageNode, FixedArgs, FluidArgs, - SanityImagePipelineArgs, DEFAULT_FLUID_MAX_WIDTH, DEFAULT_FIXED_WIDTH, } from './getGatsbyImageProps' @@ -74,7 +74,7 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: SanityImagePipelineArgs + type: GraphQLObjectType }, }, resolve: (image: ImageNode, args: FixedArgs) => getFixedGatsbyImage(image, args, location), @@ -109,7 +109,7 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: SanityImagePipelineArgs + type: GraphQLObjectType }, }, resolve: (image: ImageNode, args: FluidArgs) => getFluidGatsbyImage(image, args, location), From 8d8e95fc924915454afc633e0692b0552e1fa2e1 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:06:44 -0500 Subject: [PATCH 11/20] Add type for graphql usage --- src/images/extendImageNode.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index 3a4fd9d7..3c626911 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -5,7 +5,6 @@ import { GraphQLInt, GraphQLEnumType, GraphQLNonNull, - GraphQLObjectType, GraphQLFieldConfig, } from 'gatsby/graphql' import {PluginConfig} from '../gatsby-node' From 084d025bfd8c25a8f49596c3435125f958c09863 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:08:07 -0500 Subject: [PATCH 12/20] Add type for graphql usage --- src/images/extendImageNode.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index 3c626911..f803dcef 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -73,7 +73,8 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: GraphQLObjectType + type: GraphQLObjectType, + defaultValue: {} }, }, resolve: (image: ImageNode, args: FixedArgs) => getFixedGatsbyImage(image, args, location), @@ -108,7 +109,8 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: GraphQLObjectType + type: GraphQLObjectType, + defaultValue: {} }, }, resolve: (image: ImageNode, args: FluidArgs) => getFluidGatsbyImage(image, args, location), From 16ffabf49ec64f4d1ea75f190189d3af751a4a09 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:11:47 -0500 Subject: [PATCH 13/20] Add type for graphql usage --- src/images/extendImageNode.ts | 47 ++++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index f803dcef..69ffbd6d 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -1,4 +1,5 @@ import { + GraphQLBoolean, GraphQLObjectType, GraphQLString, GraphQLFloat, @@ -73,8 +74,27 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: GraphQLObjectType, - defaultValue: {} + bg: { + type: GraphQLString, + }, + blur: { + type: GraphQLInt, + }, + fm: { + type: GraphQLString, + }, + invert: { + type: GraphQLBoolean, + }, + q: { + type: GraphQLInt, + }, + sat: { + type: GraphQLInt, + }, + sharpen: { + type: GraphQLInt, + }, }, }, resolve: (image: ImageNode, args: FixedArgs) => getFixedGatsbyImage(image, args, location), @@ -109,8 +129,27 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: GraphQLObjectType, - defaultValue: {} + bg: { + type: GraphQLString, + }, + blur: { + type: GraphQLInt, + }, + fm: { + type: GraphQLString, + }, + invert: { + type: GraphQLBoolean, + }, + q: { + type: GraphQLInt, + }, + sat: { + type: GraphQLInt, + }, + sharpen: { + type: GraphQLInt, + }, }, }, resolve: (image: ImageNode, args: FluidArgs) => getFluidGatsbyImage(image, args, location), From 19db02905c196e3ae34b721a0d4f3a4307916ceb Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:19:53 -0500 Subject: [PATCH 14/20] Add type for graphql usage --- src/images/getGatsbyImageProps.ts | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/images/getGatsbyImageProps.ts b/src/images/getGatsbyImageProps.ts index dd3137ff..30a411ff 100644 --- a/src/images/getGatsbyImageProps.ts +++ b/src/images/getGatsbyImageProps.ts @@ -73,29 +73,36 @@ type ImageObject = { // image ratios when generating the fixed/fluid images for Gatsby. // // See more at https://www.sanity.io/docs/image-urls. -export type SanityImagePipelineArgs = { - bg?: string, - blur?: number, - fm?: string, - invert?: boolean, - q?: number, - sat?: number, - sharpen?: number -} export type FluidArgs = { maxWidth?: number maxHeight?: number sizes?: string toFormat?: ImageFormat, - imagePipelineArgs?: SanityImagePipelineArgs + imagePipelineArgs?: { + bg?: string, + blur?: number, + fm?: string, + invert?: boolean, + q?: number, + sat?: number, + sharpen?: number + } } export type FixedArgs = { width?: number height?: number toFormat?: ImageFormat, - imagePipelineArgs?: SanityImagePipelineArgs + imagePipelineArgs?: { + bg?: string, + blur?: number, + fm?: string, + invert?: boolean, + q?: number, + sat?: number, + sharpen?: number + } } type SanityLocation = { From 6f5455fefa0a8d7b92035b94014fb07942b6ba21 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:43:59 -0500 Subject: [PATCH 15/20] Add type for graphql usage --- src/images/extendImageNode.ts | 97 +++++++++++++++++-------------- src/images/getGatsbyImageProps.ts | 29 ++++----- 2 files changed, 65 insertions(+), 61 deletions(-) diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index 69ffbd6d..f66a975f 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -7,6 +7,7 @@ import { GraphQLEnumType, GraphQLNonNull, GraphQLFieldConfig, + GraphQLInputObjectType, } from 'gatsby/graphql' import {PluginConfig} from '../gatsby-node' import {getCacheKey, CACHE_KEYS} from '../util/cache' @@ -74,28 +75,33 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - bg: { - type: GraphQLString, - }, - blur: { - type: GraphQLInt, - }, - fm: { - type: GraphQLString, - }, - invert: { - type: GraphQLBoolean, - }, - q: { - type: GraphQLInt, - }, - sat: { - type: GraphQLInt, - }, - sharpen: { - type: GraphQLInt, - }, - }, + type: new GraphQLInputObjectType({ + name: "SanityImagePipelineArgs", + fields: { + bg: { + type: GraphQLString, + }, + blur: { + type: GraphQLInt, + }, + fm: { + type: GraphQLString, + }, + invert: { + type: GraphQLBoolean, + }, + q: { + type: GraphQLInt, + }, + sat: { + type: GraphQLInt, + }, + sharpen: { + type: GraphQLInt, + }, + } + }) + } }, resolve: (image: ImageNode, args: FixedArgs) => getFixedGatsbyImage(image, args, location), } @@ -129,27 +135,32 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - bg: { - type: GraphQLString, - }, - blur: { - type: GraphQLInt, - }, - fm: { - type: GraphQLString, - }, - invert: { - type: GraphQLBoolean, - }, - q: { - type: GraphQLInt, - }, - sat: { - type: GraphQLInt, - }, - sharpen: { - type: GraphQLInt, - }, + type: new GraphQLInputObjectType({ + name: "SanityImagePipelineArgs", + fields: { + bg: { + type: GraphQLString, + }, + blur: { + type: GraphQLInt, + }, + fm: { + type: GraphQLString, + }, + invert: { + type: GraphQLBoolean, + }, + q: { + type: GraphQLInt, + }, + sat: { + type: GraphQLInt, + }, + sharpen: { + type: GraphQLInt, + }, + } + }) }, }, resolve: (image: ImageNode, args: FluidArgs) => getFluidGatsbyImage(image, args, location), diff --git a/src/images/getGatsbyImageProps.ts b/src/images/getGatsbyImageProps.ts index 30a411ff..dd3137ff 100644 --- a/src/images/getGatsbyImageProps.ts +++ b/src/images/getGatsbyImageProps.ts @@ -73,36 +73,29 @@ type ImageObject = { // image ratios when generating the fixed/fluid images for Gatsby. // // See more at https://www.sanity.io/docs/image-urls. +export type SanityImagePipelineArgs = { + bg?: string, + blur?: number, + fm?: string, + invert?: boolean, + q?: number, + sat?: number, + sharpen?: number +} export type FluidArgs = { maxWidth?: number maxHeight?: number sizes?: string toFormat?: ImageFormat, - imagePipelineArgs?: { - bg?: string, - blur?: number, - fm?: string, - invert?: boolean, - q?: number, - sat?: number, - sharpen?: number - } + imagePipelineArgs?: SanityImagePipelineArgs } export type FixedArgs = { width?: number height?: number toFormat?: ImageFormat, - imagePipelineArgs?: { - bg?: string, - blur?: number, - fm?: string, - invert?: boolean, - q?: number, - sat?: number, - sharpen?: number - } + imagePipelineArgs?: SanityImagePipelineArgs } type SanityLocation = { From 5903e470943fa6620652e3ae5fa2867748d0695f Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:49:59 -0500 Subject: [PATCH 16/20] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6f026815..2564361c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@bradleygriffith/gatsby-source-sanity", "description": "Gatsby source plugin for building websites using Sanity.io as a backend.", - "version": "6.0.4", + "version": "6.0.4-patched", "author": "Sanity.io ", "contributors": [ "Henrique Doro " From 45433c44dd954b0b9b4df5088e2fdd6c935e4c3c Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 03:55:42 -0500 Subject: [PATCH 17/20] Fix type definition --- package.json | 2 +- src/images/extendImageNode.ts | 81 +++++++++++++---------------------- 2 files changed, 30 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 2564361c..9ebd2d09 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@bradleygriffith/gatsby-source-sanity", "description": "Gatsby source plugin for building websites using Sanity.io as a backend.", - "version": "6.0.4-patched", + "version": "6.0.4-patch2", "author": "Sanity.io ", "contributors": [ "Henrique Doro " diff --git a/src/images/extendImageNode.ts b/src/images/extendImageNode.ts index f66a975f..3e7c0a27 100644 --- a/src/images/extendImageNode.ts +++ b/src/images/extendImageNode.ts @@ -31,6 +31,33 @@ const ImageFormatType = new GraphQLEnumType({ }, }) +const ImagePipelineType = new GraphQLInputObjectType({ + name: "SanityImagePipelineArgsFormat", + fields: { + bg: { + type: GraphQLString, + }, + blur: { + type: GraphQLInt, + }, + fm: { + type: GraphQLString, + }, + invert: { + type: GraphQLBoolean, + }, + q: { + type: GraphQLInt, + }, + sat: { + type: GraphQLInt, + }, + sharpen: { + type: GraphQLInt, + }, + } +}) + const extensions = new Map() export function extendImageNode( @@ -75,32 +102,7 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: new GraphQLInputObjectType({ - name: "SanityImagePipelineArgs", - fields: { - bg: { - type: GraphQLString, - }, - blur: { - type: GraphQLInt, - }, - fm: { - type: GraphQLString, - }, - invert: { - type: GraphQLBoolean, - }, - q: { - type: GraphQLInt, - }, - sat: { - type: GraphQLInt, - }, - sharpen: { - type: GraphQLInt, - }, - } - }) + type: ImagePipelineType } }, resolve: (image: ImageNode, args: FixedArgs) => getFixedGatsbyImage(image, args, location), @@ -135,32 +137,7 @@ function getExtension(config: PluginConfig) { defaultValue: '', }, imagePipelineArgs: { - type: new GraphQLInputObjectType({ - name: "SanityImagePipelineArgs", - fields: { - bg: { - type: GraphQLString, - }, - blur: { - type: GraphQLInt, - }, - fm: { - type: GraphQLString, - }, - invert: { - type: GraphQLBoolean, - }, - q: { - type: GraphQLInt, - }, - sat: { - type: GraphQLInt, - }, - sharpen: { - type: GraphQLInt, - }, - } - }) + type: ImagePipelineType }, }, resolve: (image: ImageNode, args: FluidArgs) => getFluidGatsbyImage(image, args, location), From 70ecd9ffc58ddbae1f0e0e229979b7ab9fb6dbe2 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 14:12:08 -0500 Subject: [PATCH 18/20] Prepare for PR into base --- README.md | 53 ++++++++++++++++++++++++++++++- package.json | 4 +-- src/images/getGatsbyImageProps.ts | 7 ---- 3 files changed, 54 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 5455dff7..de5005b0 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Source plugin for pulling data from [Sanity.io](https://www.sanity.io/) into [Gatsby](https://www.gatsbyjs.org/) websites. Develop with real-time preview of all content changes. Compatible with `gatsby-image`. -Get up and running in minutes with a fully configured starter project: +Get up and running in minutes with a fully configured starter project: * [Blog with Gatsby](https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-blog) * [Portfolio with Gatsby](https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-portfolio). @@ -197,6 +197,57 @@ const fluidProps = getFluidGatsbyImage(imageAssetId, {maxWidth: 1024}, sanityCon ``` +### Interacting with the Image Pipeline + +As part of its [Image Pipeline](https://www.sanity.io/docs/presenting-images),Sanity provides many useful [options for transforming images](https://www.sanity.io/docs/image-urls) by manipulating their URL when requesting them from the Sanity CDN. + +In this package we expose a subset of the options available for Sanity Image Transformations. We dont supply definition for the full list of options due to much of the work in these functions being specific to resizing and anticipating the widths. That is, we don't want to allow customization here that may impact expected image ratios when generating the fixed/fluid images for Gatsby. + +The exposed options are: `bg`, `blur`, `fm`, `invert`, `q`, `sat`, and `sharpen`. You can read more about each of these options in the [Image URL documentation](https://www.sanity.io/docs/image-urls). + +##### Usage with GraphQL + +To pass these arguments using the GraphQL API, you may include an additional argument, `imagePipelineArgs`, block when calling both `fixed` and `fluid`. For example, the following query will add Image Pipeline arguments, passing `q` to specify an image quality: + +```js +export const query = graphql` + query PersonQuery { + sanityPerson { + name + profileImage { + asset { + fixed( + width: 400 + imagePipelineArgs: { + q: 30 + } + ) { + ...GatsbySanityImageFixed + } + } + } + } + } +` +``` + +##### Usage outside of GraphQL + +Likewise, to pass Image Pipeline arguments with using `getFixedGatsbyImage` or `getFluidGatsbyImage`, you may include an additional argument, `imagePipelineArgs`, block when calling either utility function. For example, the following query will add Image Pipeline arguments, passing `q` to specify an image quality: + +```js +const fluidProps = getFluidGatsbyImage( + imageAssetId, + { + maxWidth: 1024, + imagePipelineArgs: { + q: 30 + } + }, + sanityConfig +) +``` + ## Generating pages Sanity does not have any concept of a "page", since it's built to be totally agnostic to how you want to present your content and in which medium, but since you're using Gatsby, you'll probably want some pages! diff --git a/package.json b/package.json index 9ebd2d09..d67de776 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "@bradleygriffith/gatsby-source-sanity", + "name": "gatsby-source-sanity", "description": "Gatsby source plugin for building websites using Sanity.io as a backend.", - "version": "6.0.4-patch2", + "version": "6.0.4", "author": "Sanity.io ", "contributors": [ "Henrique Doro " diff --git a/src/images/getGatsbyImageProps.ts b/src/images/getGatsbyImageProps.ts index dd3137ff..414fb395 100644 --- a/src/images/getGatsbyImageProps.ts +++ b/src/images/getGatsbyImageProps.ts @@ -66,13 +66,6 @@ type ImageObject = { asset: ImageRef | ImageAsset } -// A subset of the options available for Sanity Image Transformations. We dont -// supply definition for the full list of options due to much of the work in -// these functions being specific to resizing and anticipating the widths. -// That is, we don't want to allow customization here that may impact expected -// image ratios when generating the fixed/fluid images for Gatsby. -// -// See more at https://www.sanity.io/docs/image-urls. export type SanityImagePipelineArgs = { bg?: string, blur?: number, From 2e2288c5faa8a571a5f63700e40314d40fdbeed2 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 14:27:28 -0500 Subject: [PATCH 19/20] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index de5005b0..679b83f4 100644 --- a/README.md +++ b/README.md @@ -201,7 +201,7 @@ const fluidProps = getFluidGatsbyImage(imageAssetId, {maxWidth: 1024}, sanityCon As part of its [Image Pipeline](https://www.sanity.io/docs/presenting-images),Sanity provides many useful [options for transforming images](https://www.sanity.io/docs/image-urls) by manipulating their URL when requesting them from the Sanity CDN. -In this package we expose a subset of the options available for Sanity Image Transformations. We dont supply definition for the full list of options due to much of the work in these functions being specific to resizing and anticipating the widths. That is, we don't want to allow customization here that may impact expected image ratios when generating the fixed/fluid images for Gatsby. +In this package we expose a subset of the options available for Sanity Image Transformations. We dont supply definition for the full list of options due to much of the work in these functions being specific to resizing and anticipating image dimensions for responsive sizing. That is, we don't want to allow customization here that may impact expected image ratios when generating the fixed/fluid images for Gatsby. The exposed options are: `bg`, `blur`, `fm`, `invert`, `q`, `sat`, and `sharpen`. You can read more about each of these options in the [Image URL documentation](https://www.sanity.io/docs/image-urls). From ac16a1268b2b0efe98eea36111585322d472c861 Mon Sep 17 00:00:00 2001 From: bradley Date: Thu, 12 Nov 2020 14:37:07 -0500 Subject: [PATCH 20/20] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 679b83f4..19854852 100644 --- a/README.md +++ b/README.md @@ -199,7 +199,7 @@ const fluidProps = getFluidGatsbyImage(imageAssetId, {maxWidth: 1024}, sanityCon ### Interacting with the Image Pipeline -As part of its [Image Pipeline](https://www.sanity.io/docs/presenting-images),Sanity provides many useful [options for transforming images](https://www.sanity.io/docs/image-urls) by manipulating their URL when requesting them from the Sanity CDN. +As part of its [Image Pipeline](https://www.sanity.io/docs/presenting-images), Sanity provides many useful [options for transforming images](https://www.sanity.io/docs/image-urls) by manipulating their URL when requesting them from the Sanity CDN. In this package we expose a subset of the options available for Sanity Image Transformations. We dont supply definition for the full list of options due to much of the work in these functions being specific to resizing and anticipating image dimensions for responsive sizing. That is, we don't want to allow customization here that may impact expected image ratios when generating the fixed/fluid images for Gatsby.