feat: add supabase provider

docs/content/5.providers/supabase.md

@@ -0,0 +1,22 @@
+# Supabase
+
+Optimize images with Supabase's storage transformation service
+
+Supabase offers storage image transformation for all JPEG, PNG, and GIF files you have set to be tracked with [Supabase Storage](https://supabase.com/docs/guides/storage/image-transformations/).
+
+
+## Modifiers
+
+In addition to `height` and `width`, the Supabase provider supports the following modifiers:
+
+### `fit`
+
+* **Default**: `cover`
+* **Valid options**: `cover` (equivalent to `resize=cover`), `contain` (equivalent to `resize=contain`) and `fill` (equivalent to `resize=fill`)
+
+
+## Limits
+
+- Width and height must be an integer value between 1-2500.
+- The image size cannot exceed 25MB.
+- The image resolution cannot exceed 50MP.

playground/nuxt.config.ts

@@ -52,6 +52,9 @@ export default defineNuxtConfig({
     netlify: {
       baseURL: 'https://netlify-photo-gallery.netlify.app'
     },
+    supabase: {
+      baseURL: 'https://demo.supabase.co/storage/v1/render/image/public/bucket/'
+    },
     layer0: {},
     prismic: {},
     sanity: {

playground/providers.ts

@@ -238,6 +238,23 @@ export const providers: Provider[] = [
       }
     ]
   },
+  // Supabase
+  {
+    name: 'supabase',
+    samples: [
+      {
+        src: '/images/apple.jpg',
+        width: 101,
+        fit: 'contain'
+      },
+      {
+        src: '/images/apple.jpg',
+        width: 200,
+        height: 200,
+        fit: 'fill'
+      }
+    ]
+  },
   // Layer0
   {
     name: 'layer0',

src/provider.ts

@@ -20,6 +20,7 @@ const BuiltInProviders = [
   'imgix',
   'ipx',
   'netlify',
+  'supabase',
   'layer0',
   'prismic',
   'sanity',

src/runtime/providers/supabase.ts

@@ -0,0 +1,48 @@
+import { joinURL, encodeQueryItem } from 'ufo'
+import type { ProviderGetImage } from '../../types'
+import { createOperationsGenerator } from '#image'
+
+const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    width: 'width',
+    height: 'height',
+    fit: 'resize'
+  },
+  valueMap: {
+    fit: {
+      cover: 'cover',
+      contain: 'contain',
+      fill: 'fill'
+    }
+  },
+  joinWith: ',',
+  formatter: (key, val) => encodeQueryItem(key, val)
+})
+
+const defaultModifiers = {}
+
+const isDev = process.env.NODE_ENV === 'development'
+
+// https://supabase.com/blog/storage-image-resizing-smart-cdn
+export const getImage: ProviderGetImage = (src, {
+  modifiers = {},
+  baseURL = '/'
+} = {}) => {
+  if (modifiers.format) {
+    // Not currently supported
+    if (isDev) {
+      // eslint-disable-next-line
+      console.warn(`Delete format is not supported in this provider. Warning originated from \`${src}\`.`)
+    }
+    delete modifiers.format
+  }
+  const mergeModifiers = { ...defaultModifiers, ...modifiers }
+  const operations = operationsGenerator(mergeModifiers as any)
+  // GET https://project_id.supabase.co/storage/v1/render/image/public/bucket/image.jpg?width=500&height=600
+  // https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
+  const url = operations ? joinURL(baseURL, 'cdn-cgi/image', operations, src) : joinURL(baseURL, src)
+
+  return {
+    url
+  }
+}

src/types/module.ts

@@ -55,6 +55,7 @@ export interface ImageProviders {
   twicpics?: any
   storyblok?: any,
   strapi?: any,
+  supabase?: any,
   imageengine?: any,
   ipx?: Partial<IPXOptions>
   static?: Partial<IPXOptions>