feat: layer0 provider (#501)

Co-authored-by: Pooya Parsa <[email protected]>

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

@@ -0,0 +1,30 @@
+---
+title: Layer0 Provider
+description: Optimize images with Layer0's optimization service
+navigation:
+  title: Layer0
+---
+
+Layer0 provides a simple HTTP service for optimizing images.
+
+:::alert{type="info"}
+The image optimizer will only return an optimized image for mobile browsers. Desktop browsers are served the original image.
+:::
+
+This integration works out of the box without need to configure!  See the [Documentation](https://docs.layer0.co/guides/image_optimization) for more information.
+
+**Example:**
+
+```vue
+<nuxt-img provider="layer0" src="https://i.imgur.com/LFtQeX2.jpeg" width="200" height="200" quality="80" />
+```
+
+## Modifiers
+
+Layer0 supports the following modifiers: `height`, `width` and `quality`
+
+## Options
+
+### `baseURL`
+
+- Defalt: `https://opt.moovweb.net`

playground/nuxt.config.ts

@@ -58,6 +58,7 @@ export default <NuxtConfig> {
     netlify: {
       baseURL: 'https://netlify-photo-gallery.netlify.app'
     },
+    layer0: {},
     prismic: {},
     sanity: {
       projectId: 'zp7mbokg'

playground/pages/provider/_provider.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <div v-if="provider">
-      <h1>{{ provider.name }}</h1><br>
+      <h1>{{ provider.name }}</h1>
+      <br>
       <div class="providerShowcase">
         <div v-for="sample of provider.samples" :key="sample.src">
           <nuxt-img :provider="provider.name" v-bind="sample" />
@@ -24,7 +25,9 @@ export default {
     provider () {
       const providerName = this.$route.params.provider || 'default'
       const p = providers.find(p => p.name === providerName)
-      if (!p) { return null }
+      if (!p) {
+        return null
+      }
       return p
     }
   }

playground/providers.ts

@@ -202,7 +202,12 @@ export const providers: Provider[] = [
   {
     name: 'glide',
     samples: [
-      { src: '/kayaks.jpg', width: 1000, quality: 70, modifiers: { gam: 0.9, sharp: 8 } }
+      {
+        src: '/kayaks.jpg',
+        width: 1000,
+        quality: 70,
+        modifiers: { gam: 0.9, sharp: 8 }
+      }
     ]
   },
   // Netlify
@@ -222,6 +227,15 @@ export const providers: Provider[] = [
       }
     ]
   },
+  // Layer0
+  {
+    name: 'layer0',
+    samples: [
+      { src: 'https://i.imgur.com/LFtQeX2.jpeg', height: 200 },
+      { src: 'https://i.imgur.com/LFtQeX2.jpeg', width: 50 },
+      { src: 'https://i.imgur.com/LFtQeX2.jpeg', quality: 10 }
+    ]
+  },
   // Prismic
   {
     name: 'prismic',
@@ -279,9 +293,9 @@ export const providers: Provider[] = [
       {
         src: 'cat_1x1.jpg',
         width: 300,
-        height:600,
+        height: 600,
         fit: 'inside',
-        background: 'red',
+        background: 'red'
       }, // ratio
       {
         src: '/football.jpg',
@@ -637,7 +651,6 @@ export const providers: Provider[] = [
         format: 'auto',
         from: 'Photo by Omid Armin',
         link: 'https://unsplash.com/@omidarmin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
-
       }
     ]
   },

src/provider.ts

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

src/runtime/providers/layer0.ts

@@ -0,0 +1,24 @@
+import { joinURL } from 'ufo'
+import type { ProviderGetImage } from 'src'
+import { createOperationsGenerator } from '~image'
+
+const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    height: 'height',
+    quality: 'quality',
+    width: 'width'
+  },
+  joinWith: '&',
+  formatter: (key, value) => String(value) === 'true' ? key : `${key}=${value}`
+})
+
+export const getImage: ProviderGetImage = (src, {
+  modifiers = {},
+  baseURL = 'https://opt.moovweb.net'
+} = {}) => {
+  const operations = operationsGenerator(modifiers)
+
+  return {
+    url: joinURL(baseURL, '?img=' + src + (operations ? ('&' + operations) : ''))
+  }
+}

src/types/module.ts

@@ -48,6 +48,7 @@ export interface ImageProviders {
   gumlet?: any
   imagekit?: any
   imgix?: any
+  layer0?: any
   prismic?: any
   twicpics?: any
   storyblok?: any,