From 1d8504297e9917efbd7c6df0391507e5e79ead3f Mon Sep 17 00:00:00 2001 From: Damien Robinson Date: Tue, 22 Jun 2021 20:00:05 +1000 Subject: [PATCH] feat: glide provider (#328) --- docs/pages/en/4.providers/glide.md | 20 +++++++++++ playground/nuxt.config.ts | 3 ++ playground/providers.ts | 7 ++++ src/provider.ts | 1 + src/runtime/providers/glide.ts | 55 ++++++++++++++++++++++++++++++ src/types/module.ts | 1 + test/providers.ts | 6 ++++ test/unit/providers.test.ts | 12 +++++++ 8 files changed, 105 insertions(+) create mode 100644 docs/pages/en/4.providers/glide.md create mode 100644 src/runtime/providers/glide.ts 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' + } + } +} +``` diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 4454ca7fd..17e4107ef 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://glide.herokuapp.com/1.0/' + }, imgix: { baseURL: 'https://assets.imgix.net' }, diff --git a/playground/providers.ts b/playground/providers.ts index 29700ec6e..bc9c5b0b7 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: '/kayaks.jpg', width: 1000, quality: 70, modifiers: { gam: 0.9, sharp: 8 } } + ] + }, // Netlify { name: 'netlify', 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/runtime/providers/glide.ts b/src/runtime/providers/glide.ts new file mode 100644 index 000000000..612429fe7 --- /dev/null +++ b/src/runtime/providers/glide.ts @@ -0,0 +1,55 @@ +// https://glide.thephpleague.com/2.0/api/quick-reference/ + +import { ProviderGetImage } from 'src' +import { joinURL, encodeQueryItem, encodePath } from 'ufo' +import { createOperationsGenerator } from '~image' + +const operationsGenerator = createOperationsGenerator({ + keyMap: { + 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', + format: 'fm' + }, + valueMap: { + fit: { + fill: 'fill', + inside: 'max', + outside: 'stretch', + cover: 'crop', + contain: 'contain' + } + }, + joinWith: '&', + formatter: (key, val) => encodeQueryItem(key, val) +}) + +export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/' } = {}) => { + const params = operationsGenerator(modifiers) + + return { + url: joinURL(baseURL, encodePath(src) + (params ? '?' + params : '')) + } +} 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 diff --git a/test/providers.ts b/test/providers.ts index a813115ac..7dab60d1e 100644 --- a/test/providers.ts +++ b/test/providers.ts @@ -5,6 +5,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto/test' }, twicpics: { url: '/test.png' }, fastly: { url: '/test.png' }, + glide: { url: '/test.png' }, imgix: { url: '/test.png' }, imagekit: { url: '/test.png' }, netlify: { url: '/test.png' }, @@ -17,6 +18,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,w_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x-' }, 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' }, @@ -29,6 +31,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=-x200' }, 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' }, @@ -41,6 +44,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x200' }, 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' }, @@ -53,6 +57,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/contain=200x200' }, 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' }, @@ -65,6 +70,7 @@ export const images = [ cloudinary: { url: '/f_jpg,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/output=jpeg/contain=200x200' }, 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' }, 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: ''