feat(provider): unsplash (#357)

docs/content/en/4.providers/glide.md

@@ -2,18 +2,19 @@
 title: Glide Provider
 description: 'Nuxt Image has first class integration with Glide'
 navigation:
-  title: glide
+  title: Glide
 ---
 
-Integration between [glide](https://glide.thephpleague.com/) and the image module.
+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'
+      // baseURL of your laravel application
+      baseURL: 'https://glide.herokuapp.com/1.0/'
     }
   }
 }

docs/content/en/4.providers/unsplash.md

@@ -0,0 +1,32 @@
+---
+title: Unsplash Provider
+description: 'Nuxt Image has first class integration with Unsplash'
+navigation:
+  title: Unsplash
+---
+
+Integration between [Unsplash](https://unsplash.com/documentation#dynamically-resizable-images) and the image module. See [Unsplash License](Unsplash photos are made to be used freely.) for what usage is permitted.
+
+## Dynamically resizable images
+
+Every image returned by the Unsplash API is a dynamic image URL, which means that it can be manipulated to create new transformations of the image by simply adjusting the query parameters of the image URL.
+
+This enables resizing, cropping, compression, and changing the format of the image in realtime client-side, without any API calls.
+
+Under the hood, Unsplash uses [Imgix](/providers/imgix), a powerful image manipulation service to provide dynamic image URLs.
+
+## Supported parameters
+
+Unsplash officially support the parameters:
+
+`w, h`: for adjusting the width and height of a photo
+`crop`: for applying cropping to the photo
+`fm`: for converting image format
+`auto=format`: for automatically choosing the optimal image format depending on user browser
+`q`: for changing the compression quality when using lossy file formats
+`fit`: for changing the fit of the image within the specified dimensions
+`dpr`: for adjusting the device pixel ratio of the image
+The other parameters offered by Imgix can be used, but we don’t officially support them and may remove support for them at any time in the future.
+
+>💫 Tip
+>The API returns image URLs containing an ixid parameter. All resizing and manipulations of image URLs must keep this parameter as it allows for your application to report photo views and be compliant with the API Guidelines.

playground/nuxt.config.ts

@@ -54,6 +54,7 @@ export default <NuxtConfig> {
     sanity: {
       projectId: 'zp7mbokg'
     },
+    unsplash: {},
     vercel: {
       baseURL: 'https://image-component.nextjs.gallery/_next/image'
     },

playground/providers.ts

@@ -296,6 +296,23 @@ export const providers: Provider[] = [
       }
     ]
   },
+  // Unsplash
+  {
+    name: 'unsplash',
+    samples: [
+      {
+        src: '/photo-1606112219348-204d7d8b94ee',
+        width: 300,
+        height: 300,
+        fit: 'cover',
+        quality: 75,
+        format: 'auto',
+        from: 'Photo by Omid Armin',
+        link: 'https://unsplash.com/@omidarmin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
+
+      }
+    ]
+  },
   // Vercel
   {
     name: 'vercel',

src/provider.ts

@@ -17,6 +17,7 @@ const BuiltInProviders = [
   'static',
   'twicpics',
   'storyblok',
+  'unsplash',
   'vercel'
 ]
 

src/runtime/providers/unsplash.ts

@@ -0,0 +1,14 @@
+// https://unsplash.com/documentation#dynamically-resizable-images
+
+import { joinURL, withBase } from 'ufo'
+import type { ProviderGetImage } from 'src'
+import { operationsGenerator } from './imgix'
+
+const unsplashCDN = 'https://images.unsplash.com/'
+
+export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = unsplashCDN } = {}) => {
+  const operations = operationsGenerator(modifiers)
+  return {
+    url: withBase(joinURL(src + (operations ? ('?' + operations) : '')), baseURL)
+  }
+}

test/providers.ts

@@ -7,6 +7,7 @@ export const images = [
     fastly: { url: '/test.png' },
     glide: { url: '/test.png' },
     imgix: { url: '/test.png' },
+    unsplash: { url: '/photo-1606112219348-204d7d8b94ee' },
     imagekit: { url: '/test.png' },
     netlify: { url: '/test.png' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' },
@@ -20,6 +21,7 @@ export const images = [
     fastly: { url: '/test.png?width=200' },
     glide: { url: '/test.png?w=200' },
     imgix: { url: '/test.png?w=200' },
+    unsplash: { url: '/photo-1606112219348-204d7d8b94ee?w=200' },
     imagekit: { url: '/test.png?tr=w-200' },
     netlify: { url: '/test.png?w=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=100' },
@@ -33,6 +35,7 @@ export const images = [
     fastly: { url: '/test.png?height=200' },
     glide: { url: '/test.png?h=200' },
     imgix: { url: '/test.png?h=200' },
+    unsplash: { url: '/photo-1606112219348-204d7d8b94ee?h=200' },
     imagekit: { url: '/test.png?tr=h-200' },
     netlify: { url: '/test.png?h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=200' },
@@ -46,6 +49,7 @@ export const images = [
     fastly: { url: '/test.png?width=200&height=200' },
     glide: { url: '/test.png?w=200&h=200' },
     imgix: { url: '/test.png?w=200&h=200' },
+    unsplash: { url: '/photo-1606112219348-204d7d8b94ee?w=200&h=200' },
     imagekit: { url: '/test.png?tr=w-200,h-200' },
     netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200' },
@@ -59,6 +63,7 @@ export const images = [
     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' },
+    unsplash: { url: '/photo-1606112219348-204d7d8b94ee?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' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill' },
@@ -72,6 +77,7 @@ export const images = [
     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' },
+    unsplash: { url: '/photo-1606112219348-204d7d8b94ee?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' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill&fm=jpeg' },

test/unit/providers.test.ts

@@ -7,6 +7,7 @@ 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 unsplash from '~/runtime/providers/unsplash'
 import * as imagekit from '~/runtime/providers/imagekit'
 import * as netlify from '~/runtime/providers/netlify'
 import * as prismic from '~/runtime/providers/prismic'
@@ -135,6 +136,18 @@ describe('Providers', () => {
     }
   })
 
+  test('unsplash', () => {
+    const providerOptions = {
+      baseURL: ''
+    }
+
+    for (const image of images) {
+      const [src, modifiers] = image.args
+      const generated = unsplash.getImage(src, { modifiers, ...providerOptions }, emptyContext)
+      expect(generated).toMatchObject(image.unsplash)
+    }
+  })
+
   test('imagekit', () => {
     const providerOptions = {
       baseURL: ''