feat: glide provider (#328)

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'
+    }
+  }
+}
+```

playground/nuxt.config.ts

@@ -34,6 +34,9 @@ export default <NuxtConfig> {
     fastly: {
       baseURL: 'https://www.fastly.io'
     },
+    glide: {
+      baseURL: 'https://glide.herokuapp.com/1.0/'
+    },
     imgix: {
       baseURL: 'https://assets.imgix.net'
     },

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',

src/provider.ts

@@ -8,6 +8,7 @@ import { ipxSetup } from './ipx'
 const BuiltInProviders = [
   'cloudinary',
   'fastly',
+  'glide',
   'imagekit',
   'imgix',
   'ipx',

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 : ''))
+  }
+}

src/types/module.ts

@@ -15,6 +15,7 @@ export interface InputProvider<T = any> {
 export interface ImageProviders {
   cloudinary?: any
   fastly?: any
+  glide?: any
   imagekit?: any
   imgix?: any
   prismic?: any

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' },

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: ''