From 86ffa2a66dfbe40b69c30807adb620f61e790c0b Mon Sep 17 00:00:00 2001
From: Martin DONADIEU <martindonadieu@gmail.com>
Date: Mon, 19 Dec 2022 05:12:39 +0000
Subject: [PATCH] feat: add supabase provider

---
 docs/content/5.providers/supabase.md | 22 +++++++++++++
 playground/nuxt.config.ts            |  3 ++
 playground/providers.ts              | 17 ++++++++++
 src/provider.ts                      |  1 +
 src/runtime/providers/supabase.ts    | 48 ++++++++++++++++++++++++++++
 src/types/module.ts                  |  1 +
 6 files changed, 92 insertions(+)
 create mode 100644 docs/content/5.providers/supabase.md
 create mode 100644 src/runtime/providers/supabase.ts

diff --git a/docs/content/5.providers/supabase.md b/docs/content/5.providers/supabase.md
new file mode 100644
index 000000000..957d327b9
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 18ee7ebf5..87790d13e 100644
--- a/playground/nuxt.config.ts
+++ b/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: {
diff --git a/playground/providers.ts b/playground/providers.ts
index 67585da4c..bd4fe8683 100644
--- a/playground/providers.ts
+++ b/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',
diff --git a/src/provider.ts b/src/provider.ts
index 59ad952db..ec75e64a0 100644
--- a/src/provider.ts
+++ b/src/provider.ts
@@ -20,6 +20,7 @@ const BuiltInProviders = [
   'imgix',
   'ipx',
   'netlify',
+  'supabase',
   'layer0',
   'prismic',
   'sanity',
diff --git a/src/runtime/providers/supabase.ts b/src/runtime/providers/supabase.ts
new file mode 100644
index 000000000..ce0c2f238
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/types/module.ts b/src/types/module.ts
index 8eb3eecfc..7522c6717 100644
--- a/src/types/module.ts
+++ b/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>