feat: add new provider filerobot

docs/pages/index.vue

@@ -16,7 +16,7 @@ useSeoMeta({
 const source = ref('npx nuxi@latest module add image')
 const { copy, copied } = useClipboard({ source })
 
-const providers = ['caisy', 'bunny', 'cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel', 'weserv']
+const providers = ['caisy', 'bunny', 'cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'filerobot', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel', 'weserv']
 // Disabling because svg to png does not work now with SSG
 // Related issue: https://github.com/unjs/ipx/issues/160
 // const img = useImage()

playground/nuxt.config.ts

@@ -68,6 +68,9 @@ export default defineNuxtConfig({
     fastly: {
       baseURL: 'https://www.fastly.io',
     },
+    filerobot: {
+      baseURL: 'https://fesrinkeb.filerobot.com/',
+    },
     glide: {
       baseURL: 'https://glide.herokuapp.com/1.0/',
     },

playground/providers.ts

@@ -244,6 +244,41 @@ export const providers: Provider[] = [
       { src: '/plant.jpeg' },
     ],
   },
+  // Filerobot
+  {
+    name: 'filerobot',
+    samples: [
+      {
+        src: 'https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b',
+        width: 400,
+        height: 250,
+        densities: 'x1 x2',
+        fit: 'contain',
+        quality: 65,
+        format: 'webp',
+      },
+      {
+        src: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b',
+        width: 500,
+        height: 500,
+        fit: 'contain',
+      },
+      {
+        src: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b',
+        width: 800,
+        height: 800,
+        quality: 75,
+        fit: 'cover',
+      },
+      {
+        src: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b',
+        width: 300,
+        height: 300,
+        format: 'webp',
+        fit: 'fill',
+      },
+    ],
+  },
   // ImageKit
   {
     name: 'imagekit',

src/provider.ts

@@ -22,6 +22,7 @@ const BuiltInProviders = [
   'directus',
   'edgio',
   'fastly',
+  'filerobot',
   'glide',
   'gumlet',
   'hygraph',

src/runtime/providers/filerobot.ts

@@ -0,0 +1,48 @@
+import { joinURL, hasProtocol } from 'ufo'
+import type { ProviderGetImage } from '../../module'
+import { createOperationsGenerator } from '#image'
+
+const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    fit: 'func',
+    format: 'force_format',
+    quality: 'q',
+    width: 'w',
+    height: 'h',
+  },
+  valueMap: {
+    fit: {
+      cover: 'crop',
+      contain: 'fit',
+      fill: 'cover',
+      inside: 'bound',
+      outside: 'boundmin',
+    },
+  },
+  joinWith: '&',
+  formatter: (key, value) => `${key}=${value}`,
+})
+
+export const getImage: ProviderGetImage = (src, {
+  modifiers = {},
+  baseURL = '',
+} = {}) => {
+  const operations = operationsGenerator(modifiers)
+  const query = (operations ? ('?' + operations) : '')
+
+  if (import.meta.dev) {
+    if (!baseURL) {
+      console.warn(`[fielrobot] <baseURL> is required to build image URL`)
+    }
+  }
+
+  if (hasProtocol(src)) {
+    return {
+      url: joinURL(src) + query,
+    }
+  }
+
+  return {
+    url: joinURL(baseURL, src) + query,
+  }
+}

test/e2e/__snapshots__/filerobot.json5

@@ -0,0 +1,14 @@
+{
+  "requests": [
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=300&h=300&force_format=webp&func=cover",
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=400&h=250&force_format=webp&q=65&func=fit",
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=500&h=500&func=fit",
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=800&h=800&q=75&func=crop",
+  ],
+  "sources": [
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=400&h=250&force_format=webp&q=65&func=fit",
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=500&h=500&func=fit",
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=800&h=800&q=75&func=crop",
+    "https://fesrinkeb.filerobot.com/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=300&h=300&force_format=webp&func=cover",
+  ],
+}

test/providers.ts

@@ -9,6 +9,7 @@ export const images = [
     cloudinary: { url: '/f_auto,q_auto/test' },
     twicpics: { url: '/test.png' },
     fastly: { url: '/test.png' },
+    filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b' },
     glide: { url: '/test.png' },
     gumlet: { url: '/test.png' },
     imgix: { url: '/test.png' },
@@ -45,6 +46,7 @@ export const images = [
     cloudinary: { url: '/f_auto,q_auto,w_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
     fastly: { url: '/test.png?width=200' },
+    filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200' },
     glide: { url: '/test.png?w=200' },
     gumlet: { url: '/test.png?w=200' },
     imgix: { url: '/test.png?w=200' },
@@ -81,6 +83,7 @@ export const images = [
     cloudinary: { url: '/f_auto,q_auto,h_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
     fastly: { url: '/test.png?height=200' },
+    filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?h=200' },
     glide: { url: '/test.png?h=200' },
     gumlet: { url: '/test.png?h=200' },
     imgix: { url: '/test.png?h=200' },
@@ -117,6 +120,7 @@ export const images = [
     cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x200' },
     fastly: { url: '/test.png?width=200&height=200' },
+    filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200' },
     glide: { url: '/test.png?w=200&h=200' },
     gumlet: { url: '/test.png?w=200&h=200' },
     imgix: { url: '/test.png?w=200&h=200' },
@@ -153,6 +157,7 @@ export const images = [
     cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' },
     twicpics: { url: '/test.png?twic=v1/inside=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds' },
+    filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200&func=fit' },
     glide: { url: '/test.png?w=200&h=200&fit=contain' },
     gumlet: { url: '/test.png?w=200&h=200&fit=fill' },
     imgix: { url: '/test.png?w=200&h=200&fit=fill' },
@@ -189,6 +194,7 @@ export const images = [
     cloudinary: { url: '/f_jpg,q_auto,w_200,h_200,c_scale/test' },
     twicpics: { url: '/test.png?twic=v1/output=jpeg/inside=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' },
+    filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200&func=fit&force_format=jpeg' },
     glide: { url: '/test.png?w=200&h=200&fit=contain&fm=jpeg' },
     gumlet: { url: '/test.png?w=200&h=200&fit=fill&format=jpeg' },
     imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' },