feat: strapi provider (#406)

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

@@ -0,0 +1,56 @@
+---
+title: Strapi Provider
+description: 'Nuxt Image with Strapi integration'
+navigation:
+  title: Strapi
+---
+
+Integration between [Strapi](https://strapi.io) and the image module.
+
+No specific configuration is required. You just need to specify `strapi` in your configuration to make it the default:
+```js{}[nuxt.config.js]
+export default {
+  image: {
+    strapi: {}
+  }
+}
+```
+
+Override default options:
+```js{}[nuxt.config.js]	
+export default {
+  image: {
+    strapi: {
+      baseURL: 'http://localhost:1337/uploads/'
+    }
+  }
+}
+```
+
+## Modifiers
+The `breakpoint` modifier is used to specify the size of the image.
+
+By default, when the image is uploaded and **Enable responsive friendly upload** Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:
+
+|  Name   | Largest Dimension |
+| ------- | ----------------- |
+| `small` | 500px             |
+| `medium`| 750px             |
+| `large` | 1000px            |
+
+You can override the default breakpoints. See the [Upload configuration](https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration) in the Strapi documentation.
+
+If you don't set breakpoint modifier, the original image size will be used:
+
+```html
+<nuxt-img provider="strapi" src="..." />
+```
+
+Define breakpoint modifier:
+```html
+<nuxt-img provider="strapi" src="..." :modifiers="{ breakpoint: 'small' }" />
+```
+
+:::alert{type="info"}
+Only one breakpoint can be modified per image.
+:::

playground/nuxt.config.ts

@@ -55,6 +55,9 @@ export default <NuxtConfig> {
     sanity: {
       projectId: 'zp7mbokg'
     },
+    strapi: {
+      baseURL: 'http://localhost:1337/uploads/'
+    },
     unsplash: {},
     vercel: {
       baseURL: 'https://image-component.nextjs.gallery/_next/image'

playground/providers.ts

@@ -262,6 +262,36 @@ export const providers: Provider[] = [
       }
     ]
   },
+  // Strapi
+  {
+    name: 'strapi',
+    samples: [
+      {
+        src: '/4d9z1eiyo2gmf6gd7xhp_823ae510e8.png',
+        alt: 'Image 1'
+      },
+      {
+        src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png',
+        alt: 'Thumbnail image',
+        modifiers: { breakpoint: 'thumbnail' }
+      },
+      {
+        src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png',
+        alt: 'Small image',
+        modifiers: { breakpoint: 'small' }
+      },
+      {
+        src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png',
+        alt: 'Medium image',
+        modifiers: { breakpoint: 'medium' }
+      },
+      {
+        src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png',
+        alt: 'Large image',
+        modifiers: { breakpoint: 'large' }
+      }
+    ]
+  },
   // Storyblok
   {
     name: 'storyblok',

src/provider.ts

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

src/runtime/providers/strapi.ts

@@ -0,0 +1,20 @@
+import { ProviderGetImage } from 'src'
+import { withBase, withoutLeadingSlash } from 'ufo'
+
+// https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload
+
+export const getImage: ProviderGetImage = (src, { modifiers, baseURL = 'http://localhost:1337/uploads' } = {}) => {
+  const breakpoint = modifiers?.breakpoint ?? ''
+
+  if (!breakpoint) {
+    return {
+      url: withBase(src, baseURL)
+    }
+  }
+
+  return {
+    url: withBase(`${breakpoint}_${withoutLeadingSlash(src)}`, baseURL)
+  }
+}
+
+export const validateDomains = true

src/types/module.ts

@@ -21,6 +21,8 @@ export interface ImageProviders {
   imgix?: any
   prismic?: any
   twicpics?: any
+  storyblok?: any,
+  strapi?: any,
   storyblok?: any
   imageengine?: any,
   ipx?: Partial<IPXOptions>