From 3645f77ec7cf8de424b97a85c92b9180e5b360d0 Mon Sep 17 00:00:00 2001 From: Nicolas Payot Date: Thu, 16 Jan 2025 16:57:42 +0100 Subject: [PATCH] feat: add new provider filerobot --- docs/pages/index.vue | 2 +- playground/nuxt.config.ts | 3 ++ playground/providers.ts | 35 +++++++++++++++++++ src/provider.ts | 1 + src/runtime/providers/filerobot.ts | 48 ++++++++++++++++++++++++++ test/e2e/__snapshots__/filerobot.json5 | 14 ++++++++ test/providers.ts | 6 ++++ 7 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 src/runtime/providers/filerobot.ts create mode 100644 test/e2e/__snapshots__/filerobot.json5 diff --git a/docs/pages/index.vue b/docs/pages/index.vue index ae4a316f8..af902933f 100644 --- a/docs/pages/index.vue +++ b/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() diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index f6d088615..160c66ef2 100644 --- a/playground/nuxt.config.ts +++ b/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/', }, diff --git a/playground/providers.ts b/playground/providers.ts index a35bd80de..526e9cc34 100644 --- a/playground/providers.ts +++ b/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', diff --git a/src/provider.ts b/src/provider.ts index 1a61795eb..4f1ebfdd8 100644 --- a/src/provider.ts +++ b/src/provider.ts @@ -22,6 +22,7 @@ const BuiltInProviders = [ 'directus', 'edgio', 'fastly', + 'filerobot', 'glide', 'gumlet', 'hygraph', diff --git a/src/runtime/providers/filerobot.ts b/src/runtime/providers/filerobot.ts new file mode 100644 index 000000000..87e24bbb1 --- /dev/null +++ b/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] is required to build image URL`) + } + } + + if (hasProtocol(src)) { + return { + url: joinURL(src) + query, + } + } + + return { + url: joinURL(baseURL, src) + query, + } +} diff --git a/test/e2e/__snapshots__/filerobot.json5 b/test/e2e/__snapshots__/filerobot.json5 new file mode 100644 index 000000000..259572bc1 --- /dev/null +++ b/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", + ], +} \ No newline at end of file diff --git a/test/providers.ts b/test/providers.ts index 59af6e1e2..db1959658 100644 --- a/test/providers.ts +++ b/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' },