feat(runtime): add imgix provider (#29)

docs/content/en/providers.md

@@ -77,3 +77,19 @@ export default {
   }
 }
 ```
+
+## 'imgix'
+
+Integration between [imgix](https://docs.imgix.com/) and the image module. To use this provider you just need to specify the base url of your service in imgix.
+
+```js{}[nuxt.config.js]
+export default {
+  image: {
+    providers: {
+      imgix: {
+        baseURL: 'https://assets.imgix.net'
+      }
+    }
+  }
+}
+```

playground/nuxt.config.ts

@@ -27,6 +27,9 @@ export default {
       },
       fastly: {
         baseURL: 'https://www.fastly.io'
+      },
+      imgix: {
+        baseURL: 'https://assets.imgix.net'
       }
     }
   }

playground/pages/index.vue

@@ -33,6 +33,7 @@ export default {
       images: [
         { src: 'cloudinary:/remote/nuxt-org/blog/going-full-static/main.png', alt: 'Cloudinary' },
         { src: 'fastly:/image.jpg', alt: 'fastify' },
+        { src: 'imgix:/examples/bluehat.jpg', alt: 'imgix' },
         // { src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Aconcagua2016.jpg/600px-Aconcagua2016.jpg', alt: 'Aconcagua Argentina' },
         { src: '/images/2000px-Everest_kalapatthar.jpg', alt: 'Mount Everest Nepal' },
         { src: '/images/2000px-Mont-Blanc_from_Planpraz_station.jpg', alt: 'Mount Kilimanjaro Tanzania' },

src/providers/imgix/index.ts

@@ -0,0 +1,8 @@
+import { ProviderFactory } from 'types'
+
+export default <ProviderFactory> function (providerOptions) {
+  return {
+    runtime: require.resolve('./runtime'),
+    runtimeOptions: providerOptions
+  }
+}

src/providers/imgix/runtime.ts

@@ -0,0 +1,30 @@
+import { RuntimeProvider, ImageModifiers } from 'types'
+import { cleanDoubleSlashes, createOperationsGenerator } from '../../runtime/provider-utils'
+
+const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    width: 'w',
+    height: 'h',
+    format: 'fm'
+  },
+  valueMap: {
+    fit: {
+      fill: 'scale',
+      inside: 'fit-max',
+      outside: 'fit-min',
+      cover: 'crop',
+      contain: 'fill'
+    }
+  },
+  joinWith: '&',
+  formatter: (key, value) => `${key}=${value}`
+})
+
+export default <RuntimeProvider> {
+  generateURL (src: string, modifiers: ImageModifiers, options: any) {
+    const operations = operationsGenerator(modifiers)
+    return {
+      url: cleanDoubleSlashes(options.baseURL + src + '?' + operations)
+    }
+  }
+}

test/providers.test.ts

@@ -3,35 +3,40 @@ import local from '../src/providers/local'
 import cloudinary from '../src/providers/cloudinary'
 import twicpics from '../src/providers/twicpics'
 import fastly from '../src/providers/fastly'
+import imgix from '../src/providers/imgix'
 
 const images = [
   {
     args: ['/test.png', {}],
     local: { isStatic: true, url: '/_image/local/_/_/test.png' },
     cloudinary: { url: '/test.png' },
     twicpics: { url: '/test.png?twic=v1/' },
-    fastly: { url: '/test.png?' }
+    fastly: { url: '/test.png?' },
+    imgix: { url: '/test.png?' }
   },
   {
     args: ['/test.png', { width: 200 }],
     local: { isStatic: true, url: '/_image/local/_/w_200/test.png' },
     cloudinary: { url: '/w_200/test.png' },
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
-    fastly: { url: '/test.png?width=200' }
+    fastly: { url: '/test.png?width=200' },
+    imgix: { url: '/test.png?w=200' }
   },
   {
     args: ['/test.png', { height: 200 }],
     local: { isStatic: true, url: '/_image/local/_/h_200/test.png' },
     cloudinary: { url: '/h_200/test.png' },
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
-    fastly: { url: '/test.png?height=200' }
+    fastly: { url: '/test.png?height=200' },
+    imgix: { url: '/test.png?h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200 }],
     local: { isStatic: true, url: '/_image/local/_/s_200_200/test.png' },
     cloudinary: { url: '/w_200,h_200/test.png' },
     twicpics: { url: '/test.png?twic=v1/cover=200x200' },
-    fastly: { url: '/test.png?width=200&height=200' }
+    fastly: { url: '/test.png?width=200&height=200' },
+    imgix: { url: '/test.png?w=200&h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
@@ -45,7 +50,8 @@ const images = [
     local: { isStatic: true, url: '/_image/local/jpeg/s_200_200_contain/test.png' },
     cloudinary: { url: '/w_200,h_200,c_scale,f_jpeg/test.png' },
     twicpics: { url: '/test.png?twic=v1/format=jpeg/contain=200x200' },
-    fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=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' }
   }
 ]
 
@@ -138,4 +144,26 @@ describe('Providers', () => {
       expect(generated).toEqual(image.fastly)
     }
   })
+
+  test('imgix', async () => {
+    const providerOptions = {
+      baseURL: ''
+    }
+    const providerDataExpectedkeys = ['runtime', 'runtimeOptions']
+    const providerData = imgix(providerOptions)
+
+    expect(Object.keys(providerData)).toEqual(expect.arrayContaining(providerDataExpectedkeys))
+
+    const isRuntimeExists = await fs.exists(providerData.runtime)
+    expect(isRuntimeExists).toEqual(true)
+
+    const runtime = (await import(providerData.runtime)).default
+    expect(typeof runtime).toEqual('object')
+    expect(typeof runtime.generateURL).toEqual('function')
+
+    for (const image of images) {
+      const generated = runtime.generateURL.call(null, ...image.args, providerData.runtimeOptions)
+      expect(generated).toEqual(image.imgix)
+    }
+  })
 })