From dde4360232f053485b298b40afd8a2900bc527d5 Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 00:17:45 +1000 Subject: [PATCH 1/9] feat(provider): glide https://glide.thephpleague.com/2.0/api/quick-reference/ --- src/runtime/providers/glide.ts | 32 ++++++++++++++++++++++++++++++++ test/providers.ts | 6 ++++++ test/unit/providers.test.ts | 12 ++++++++++++ 3 files changed, 50 insertions(+) create mode 100644 src/runtime/providers/glide.ts diff --git a/src/runtime/providers/glide.ts b/src/runtime/providers/glide.ts new file mode 100644 index 000000000..9c72d6d90 --- /dev/null +++ b/src/runtime/providers/glide.ts @@ -0,0 +1,32 @@ +// https://glide.thephpleague.com/2.0/api/quick-reference/ + +import { ProviderGetImage } from 'src' +import { joinURL, encodeQueryItem, encodePath, hasProtocol } from 'ufo' +import { createOperationsGenerator } from '~image' + +const operationsGenerator = createOperationsGenerator({ + keyMap: { + format: 'fm', + fit: 'fit', + width: 'w', + height: 'h', + quality: 'q', + background: 'bg' + }, + joinWith: '&', + formatter: (key, val) => encodeQueryItem(key, val) +}) + +export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/' } = {}) => { + const params = operationsGenerator(modifiers) + + if (hasProtocol(src)) { + return { + url: src + } + } + + return { + url: joinURL(baseURL, encodePath(src) + (params ? '?' + params : '')) + } +} diff --git a/test/providers.ts b/test/providers.ts index a813115ac..7d4a141ac 100644 --- a/test/providers.ts +++ b/test/providers.ts @@ -4,6 +4,7 @@ export const images = [ ipx: { url: '/_ipx/test.png' }, cloudinary: { url: '/f_auto,q_auto/test' }, twicpics: { url: '/test.png' }, + glide: { url: '/test.png' }, fastly: { url: '/test.png' }, imgix: { url: '/test.png' }, imagekit: { url: '/test.png' }, @@ -16,6 +17,7 @@ export const images = [ ipx: { url: '/_ipx/test.png?w=200' }, cloudinary: { url: '/f_auto,q_auto,w_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x-' }, + glide: { url: '/test.png?w=200' }, fastly: { url: '/test.png?width=200' }, imgix: { url: '/test.png?w=200' }, imagekit: { url: '/test.png?tr=w-200' }, @@ -28,6 +30,7 @@ export const images = [ ipx: { url: '/_ipx/test.png?h=200' }, cloudinary: { url: '/f_auto,q_auto,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=-x200' }, + glide: { url: '/test.png?h=200' }, fastly: { url: '/test.png?height=200' }, imgix: { url: '/test.png?h=200' }, imagekit: { url: '/test.png?tr=h-200' }, @@ -40,6 +43,7 @@ export const images = [ ipx: { url: '/_ipx/test.png?s=200_200' }, cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x200' }, + glide: { url: '/test.png?w=200&h=200' }, fastly: { url: '/test.png?width=200&height=200' }, imgix: { url: '/test.png?w=200&h=200' }, imagekit: { url: '/test.png?tr=w-200,h-200' }, @@ -52,6 +56,7 @@ export const images = [ ipx: { url: '/_ipx/test.png?fit=contain&s=200_200' }, cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/contain=200x200' }, + glide: { url: '/test.png?w=200&h=200&fit=contain' }, fastly: { url: '/test.png?width=200&height=200&fit=bounds' }, imgix: { url: '/test.png?w=200&h=200&fit=fill' }, imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize' }, @@ -64,6 +69,7 @@ export const images = [ ipx: { url: '/_ipx/test.png?fit=contain&f=jpeg&s=200_200' }, cloudinary: { url: '/f_jpg,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/output=jpeg/contain=200x200' }, + glide: { url: '/test.png?w=200&h=200&fit=contain&fm=jpeg' }, fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' }, imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }, imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize,f-jpeg' }, diff --git a/test/unit/providers.test.ts b/test/unit/providers.test.ts index 947cc2dbf..6cf8bb470 100644 --- a/test/unit/providers.test.ts +++ b/test/unit/providers.test.ts @@ -5,6 +5,7 @@ import * as ipx from '~/runtime/providers/ipx' import * as cloudinary from '~/runtime/providers/cloudinary' import * as twicpics from '~/runtime/providers/twicpics' import * as fastly from '~/runtime/providers/fastly' +import * as glide from '~/runtime/providers/glide' import * as imgix from '~/runtime/providers/imgix' import * as imagekit from '~/runtime/providers/imagekit' import * as netlify from '~/runtime/providers/netlify' @@ -87,6 +88,17 @@ describe('Providers', () => { } }) + test('glide', () => { + const providerOptions = { + baseURL: '' + } + for (const image of images) { + const [src, modifiers] = image.args + const generated = glide.getImage(src, { modifiers, ...providerOptions }, {} as any) + expect(generated).toMatchObject(image.glide) + } + }) + test('fastly', () => { const providerOptions = { baseURL: '' From b1b4787fd9de59f8c3cd33c61e0bc6432de95dd9 Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 11:13:55 +1000 Subject: [PATCH 2/9] style(test providers): move glide down --- test/providers.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/providers.ts b/test/providers.ts index 7d4a141ac..7dab60d1e 100644 --- a/test/providers.ts +++ b/test/providers.ts @@ -4,8 +4,8 @@ export const images = [ ipx: { url: '/_ipx/test.png' }, cloudinary: { url: '/f_auto,q_auto/test' }, twicpics: { url: '/test.png' }, - glide: { url: '/test.png' }, fastly: { url: '/test.png' }, + glide: { url: '/test.png' }, imgix: { url: '/test.png' }, imagekit: { url: '/test.png' }, netlify: { url: '/test.png' }, @@ -17,8 +17,8 @@ export const images = [ ipx: { url: '/_ipx/test.png?w=200' }, cloudinary: { url: '/f_auto,q_auto,w_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x-' }, - glide: { url: '/test.png?w=200' }, fastly: { url: '/test.png?width=200' }, + glide: { url: '/test.png?w=200' }, imgix: { url: '/test.png?w=200' }, imagekit: { url: '/test.png?tr=w-200' }, netlify: { url: '/test.png?w=200&nf_resize=fit' }, @@ -30,8 +30,8 @@ export const images = [ ipx: { url: '/_ipx/test.png?h=200' }, cloudinary: { url: '/f_auto,q_auto,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=-x200' }, - glide: { url: '/test.png?h=200' }, fastly: { url: '/test.png?height=200' }, + glide: { url: '/test.png?h=200' }, imgix: { url: '/test.png?h=200' }, imagekit: { url: '/test.png?tr=h-200' }, netlify: { url: '/test.png?h=200&nf_resize=fit' }, @@ -43,8 +43,8 @@ export const images = [ ipx: { url: '/_ipx/test.png?s=200_200' }, cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x200' }, - glide: { url: '/test.png?w=200&h=200' }, fastly: { url: '/test.png?width=200&height=200' }, + glide: { url: '/test.png?w=200&h=200' }, imgix: { url: '/test.png?w=200&h=200' }, imagekit: { url: '/test.png?tr=w-200,h-200' }, netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' }, @@ -56,8 +56,8 @@ export const images = [ ipx: { url: '/_ipx/test.png?fit=contain&s=200_200' }, cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/contain=200x200' }, - glide: { url: '/test.png?w=200&h=200&fit=contain' }, fastly: { url: '/test.png?width=200&height=200&fit=bounds' }, + glide: { url: '/test.png?w=200&h=200&fit=contain' }, imgix: { url: '/test.png?w=200&h=200&fit=fill' }, imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize' }, netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' }, @@ -69,8 +69,8 @@ export const images = [ ipx: { url: '/_ipx/test.png?fit=contain&f=jpeg&s=200_200' }, cloudinary: { url: '/f_jpg,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/output=jpeg/contain=200x200' }, - glide: { url: '/test.png?w=200&h=200&fit=contain&fm=jpeg' }, fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' }, + glide: { url: '/test.png?w=200&h=200&fit=contain&fm=jpeg' }, imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }, imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize,f-jpeg' }, netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' }, From 0da4c9affa56cd0268e2336f3b7e6f7e1ff3437f Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 11:49:39 +1000 Subject: [PATCH 3/9] docs(providers): glide --- docs/pages/en/4.providers/glide.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/pages/en/4.providers/glide.md diff --git a/docs/pages/en/4.providers/glide.md b/docs/pages/en/4.providers/glide.md new file mode 100644 index 000000000..f9007f76c --- /dev/null +++ b/docs/pages/en/4.providers/glide.md @@ -0,0 +1,20 @@ +--- +title: Glide Provider +description: 'Nuxt Image has first class integration with Glide' +navigation: + title: glide +--- + +Integration between [glide](https://glide.thephpleague.com/) and the image module. + +To use this provider you just need to specify the base url of your service in glide. + +```js{}[nuxt.config.js] +export default { + image: { + glide: { + baseURL: 'https://glide.example.com' + } + } +} +``` From 52edff16c660f289931de2b16881fa92e7eee64e Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 11:50:24 +1000 Subject: [PATCH 4/9] refactor(glide): remove unused has protocol --- src/runtime/providers/glide.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/runtime/providers/glide.ts b/src/runtime/providers/glide.ts index 9c72d6d90..cde91fe65 100644 --- a/src/runtime/providers/glide.ts +++ b/src/runtime/providers/glide.ts @@ -20,12 +20,6 @@ const operationsGenerator = createOperationsGenerator({ export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/' } = {}) => { const params = operationsGenerator(modifiers) - if (hasProtocol(src)) { - return { - url: src - } - } - return { url: joinURL(baseURL, encodePath(src) + (params ? '?' + params : '')) } From e566af77c389db164da7d01296a3c7ae76b554f7 Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 11:50:51 +1000 Subject: [PATCH 5/9] fix(glide): add to types --- src/provider.ts | 1 + src/types/module.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/provider.ts b/src/provider.ts index acebc9aa3..171514caf 100644 --- a/src/provider.ts +++ b/src/provider.ts @@ -8,6 +8,7 @@ import { ipxSetup } from './ipx' const BuiltInProviders = [ 'cloudinary', 'fastly', + 'glide', 'imagekit', 'imgix', 'ipx', diff --git a/src/types/module.ts b/src/types/module.ts index af101ddab..79a0fbc6f 100644 --- a/src/types/module.ts +++ b/src/types/module.ts @@ -15,6 +15,7 @@ export interface InputProvider { export interface ImageProviders { cloudinary?: any fastly?: any + glide?: any imagekit?: any imgix?: any prismic?: any From 466691cdd6b15e761df010713e8e5cddb0b10d64 Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 11:54:12 +1000 Subject: [PATCH 6/9] fix(glide): add keys --- src/runtime/providers/glide.ts | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/runtime/providers/glide.ts b/src/runtime/providers/glide.ts index cde91fe65..ad7966475 100644 --- a/src/runtime/providers/glide.ts +++ b/src/runtime/providers/glide.ts @@ -1,17 +1,37 @@ // https://glide.thephpleague.com/2.0/api/quick-reference/ import { ProviderGetImage } from 'src' -import { joinURL, encodeQueryItem, encodePath, hasProtocol } from 'ufo' +import { joinURL, encodeQueryItem, encodePath } from 'ufo' import { createOperationsGenerator } from '~image' const operationsGenerator = createOperationsGenerator({ keyMap: { - format: 'fm', - fit: 'fit', + orientation: 'or', + flip: 'flip', + crop: 'crop', width: 'w', height: 'h', + fit: 'fit', + dpr: 'dpr', + bri: 'bri', + con: 'con', + gam: 'gam', + sharp: 'sharp', + blur: 'blur', + pixel: 'pixel', + filt: 'filt', + mark: 'mark', + markw: 'markw', + markh: 'markh', + markx: 'markx', + marky: 'marky', + markpad: 'markpad', + markpos: 'markpos', + markalpha: 'markalpha', + background: 'bg', + border: 'border', quality: 'q', - background: 'bg' + format: 'fm' }, joinWith: '&', formatter: (key, val) => encodeQueryItem(key, val) From 28d890b71de04d62515149298da2ac96bd65be3c Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 11:54:25 +1000 Subject: [PATCH 7/9] fix(glide): add fit values --- src/runtime/providers/glide.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/runtime/providers/glide.ts b/src/runtime/providers/glide.ts index ad7966475..612429fe7 100644 --- a/src/runtime/providers/glide.ts +++ b/src/runtime/providers/glide.ts @@ -33,6 +33,15 @@ const operationsGenerator = createOperationsGenerator({ quality: 'q', format: 'fm' }, + valueMap: { + fit: { + fill: 'fill', + inside: 'max', + outside: 'stretch', + cover: 'crop', + contain: 'contain' + } + }, joinWith: '&', formatter: (key, val) => encodeQueryItem(key, val) }) From 62a2155d5008d63d6031e2066ca02eec1e902e7c Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Sat, 19 Jun 2021 11:55:00 +1000 Subject: [PATCH 8/9] chore(playground): glide --- playground/nuxt.config.ts | 3 +++ playground/providers.ts | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 4454ca7fd..a7b902767 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -34,6 +34,9 @@ export default { fastly: { baseURL: 'https://www.fastly.io' }, + glide: { + baseURL: 'https://media.caapp.com.au/' + }, imgix: { baseURL: 'https://assets.imgix.net' }, diff --git a/playground/providers.ts b/playground/providers.ts index 29700ec6e..7ad97216a 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -67,6 +67,13 @@ export const providers: Provider[] = [ { src: '/plant.jpeg' } ] }, + // Glide + { + name: 'glide', + samples: [ + { src: '/zs77ih', width: 720, quality: 70 } + ] + }, // Netlify { name: 'netlify', From 7cd80077267ddab4bf99fb1d133f710d8bf09011 Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Tue, 22 Jun 2021 11:18:33 +1000 Subject: [PATCH 9/9] chore(playground): use glide heroku example --- playground/nuxt.config.ts | 2 +- playground/providers.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index a7b902767..17e4107ef 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -35,7 +35,7 @@ export default { baseURL: 'https://www.fastly.io' }, glide: { - baseURL: 'https://media.caapp.com.au/' + baseURL: 'https://glide.herokuapp.com/1.0/' }, imgix: { baseURL: 'https://assets.imgix.net' diff --git a/playground/providers.ts b/playground/providers.ts index 7ad97216a..bc9c5b0b7 100644 --- a/playground/providers.ts +++ b/playground/providers.ts @@ -71,7 +71,7 @@ export const providers: Provider[] = [ { name: 'glide', samples: [ - { src: '/zs77ih', width: 720, quality: 70 } + { src: '/kayaks.jpg', width: 1000, quality: 70, modifiers: { gam: 0.9, sharp: 8 } } ] }, // Netlify