feat: add prismic provider (#269)

docs/content/en/3.providers.md

@@ -20,6 +20,7 @@ There are plenty of image service providers. Nuxt image has a generic way to wor
 - [`Fastly`](/providers/fastly)
 - [`Imgix`](/providers/imgix)
 - [`IPX`](/providers/ipx) (selfhosted)
+- [`Prismic`](/providers/prismic)
 - [`Sanity`](/providers/sanity)
 - [`Twicpics`](/providers/twicpics)
 - [`Storyblok`](/providers/storyblok)

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

@@ -0,0 +1,26 @@
+---
+menuTitle: Prismic
+title: Prismic Provider
+description: 'Nuxt Image has first class integration with Prismic'
+category: Providers
+---
+
+Integration between [Prismic](https://prismic.io/docs) and the image module.
+
+No specific configuration is required for Prismic support. You just need to specify `provider: 'prismic'` in your configuration to make it the default, or pass it directly when you need it, for example:
+```html
+<nuxt-img provider="prismic" src="..." />
+
+```js{}[nuxt.config.js]
+export default {
+  image: {
+    prismic: {}
+  }
+}
+```
+
+<alert type="info">
+
+Prismic allows content writer to manipulate images through its UI (cropping, rezising, etc.). To preserve that behavior this provider does not strip query parameters coming from Prismic. Instead it only overrides them when needed, keeping developers in control.
+
+</alert>

playground/nuxt.config.ts

@@ -42,6 +42,7 @@ export default <NuxtConfig> {
     imagekit: {
       baseURL: 'https://ik.imagekit.io/demo'
     },
+    prismic: {},
     sanity: {
       projectId: 'j1o4tmjp'
     },

playground/providers.ts

@@ -59,24 +59,34 @@ export const providers: Provider[] = [
       }
     ]
   },
-  // Sanity
+  // Fastly
   {
-    name: 'sanity',
+    name: 'fastly',
+    samples: [
+      { src: '/image.jpg' },
+      { src: '/plant.jpeg' }
+    ]
+  },
+  // Prismic
+  {
+    name: 'prismic',
     samples: [
       {
-        src: 'image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg'
+        src: 'https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900'
       },
       {
-        src: 'image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg',
-        width: 200,
-        height: 200,
-        fit: 'crop'
+        src: 'https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900',
+        width: 200
       },
       {
-        src: 'image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg',
+        src: 'https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900',
+        height: 200
+      },
+      {
+        src: 'https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900',
         width: 200,
         height: 200,
-        fit: 'min'
+        fit: 'crop'
       }
     ]
   },
@@ -88,12 +98,25 @@ export const providers: Provider[] = [
       { src: '/football.jpg', width: 250, height: 400, focus: 'auto' }
     ]
   },
-  // Fastly
+  // Sanity
   {
-    name: 'fastly',
+    name: 'sanity',
     samples: [
-      { src: '/image.jpg' },
-      { src: '/plant.jpeg' }
+      {
+        src: 'image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg'
+      },
+      {
+        src: 'image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg',
+        width: 200,
+        height: 200,
+        fit: 'crop'
+      },
+      {
+        src: 'image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg',
+        width: 200,
+        height: 200,
+        fit: 'min'
+      }
     ]
   },
   // Storyblok

src/provider.ts

@@ -10,6 +10,7 @@ const BuiltInProviders = [
   'imagekit',
   'imgix',
   'ipx',
+  'prismic',
   'sanity',
   'static',
   'twicpics',

src/runtime/providers/imgix.ts

@@ -2,7 +2,7 @@ import type { ProviderGetImage } from 'src'
 import { joinURL } from 'ufo'
 import { createOperationsGenerator } from '~image'
 
-const operationsGenerator = createOperationsGenerator({
+export const operationsGenerator = createOperationsGenerator({
   keyMap: {
     width: 'w',
     height: 'h',

src/runtime/providers/prismic.ts

@@ -0,0 +1,24 @@
+import type { ProviderGetImage } from 'src'
+import { joinURL, parseQuery, parseURL, stringifyQuery } from 'ufo'
+import { operationsGenerator } from './imgix'
+
+const PRISMIC_IMGIX_BUCKET = 'https://images.prismic.io'
+
+// Prismic image bucket is left configurable in order to test on other environments
+export const getImage: ProviderGetImage = (
+  src,
+  { modifiers = {}, baseURL = PRISMIC_IMGIX_BUCKET } = {}
+) => {
+  const operations = operationsGenerator(modifiers)
+
+  const parsedURL = parseURL(src)
+
+  return {
+    url: joinURL(
+      baseURL,
+      parsedURL.pathname + '?' +
+      // Remove duplicated keys, prioritizing override from developers
+      stringifyQuery(Object.assign(parseQuery(parsedURL.search), parseQuery(operations)))
+    )
+  }
+}

src/types/module.ts

@@ -17,6 +17,7 @@ export interface ImageProviders {
   fastly?: any
   imagekit?: any
   imgix?: any
+  prismic?: any
   twicpics?: any
   storyblok?: any,
   ipx?: Partial<IPXOptions>

test/providers.ts

@@ -6,7 +6,8 @@ export const images = [
     twicpics: { url: '/test.png' },
     fastly: { url: '/test.png' },
     imgix: { url: '/test.png' },
-    imagekit: { url: '/test.png' }
+    imagekit: { url: '/test.png' },
+    prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' }
   },
   {
     args: ['/test.png', { width: 200 }],
@@ -15,7 +16,8 @@ export const images = [
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
     fastly: { url: '/test.png?width=200' },
     imgix: { url: '/test.png?w=200' },
-    imagekit: { url: '/test.png?tr=w-200' }
+    imagekit: { url: '/test.png?tr=w-200' },
+    prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=100' }
   },
   {
     args: ['/test.png', { height: 200 }],
@@ -24,7 +26,8 @@ export const images = [
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
     fastly: { url: '/test.png?height=200' },
     imgix: { url: '/test.png?h=200' },
-    imagekit: { url: '/test.png?tr=h-200' }
+    imagekit: { url: '/test.png?tr=h-200' },
+    prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200 }],
@@ -33,7 +36,8 @@ export const images = [
     twicpics: { url: '/test.png?twic=v1/cover=200x200' },
     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' }
+    imagekit: { url: '/test.png?tr=w-200,h-200' },
+    prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
@@ -42,7 +46,8 @@ export const images = [
     twicpics: { url: '/test.png?twic=v1/contain=200x200' },
     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' }
+    imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize' },
+    prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
@@ -51,7 +56,8 @@ export const images = [
     twicpics: { url: '/test.png?twic=v1/output=jpeg/contain=200x200' },
     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' }
+    imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize,f-jpeg' },
+    prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill&fm=jpeg' }
   }
 ] as const
 

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 imgix from '~/runtime/providers/imgix'
 import * as imagekit from '~/runtime/providers/imagekit'
+import * as prismic from '~/runtime/providers/prismic'
 
 describe('Providers', () => {
   test('ipx', () => {
@@ -118,4 +119,19 @@ describe('Providers', () => {
       expect(generated).toMatchObject(image.imagekit)
     }
   })
+
+  test('prismic', () => {
+    const providerOptions = {
+      baseURL: '' // Use empty base URL for the sake of simplicity
+    }
+
+    const EXISTING_QUERY_PARAMETERS =
+      '?auto=compress,format&rect=0,0,200,200&w=100&h=100'
+
+    for (const image of images) {
+      const [src, modifiers] = image.args
+      const generated = prismic.getImage(`${src}${EXISTING_QUERY_PARAMETERS}`, { modifiers, ...providerOptions }, {} as any)
+      expect(generated).toMatchObject(image.prismic)
+    }
+  })
 })