feat: add sanity provider (#164)

docs/content/en/3.providers.md

@@ -20,6 +20,7 @@ There are plenty of image service providers. Nuxt image has a generic way to wor
 - [`Fastly`](/providers/fastly)
 - [`Imgix`](/providers/imgix)
 - [`IPX`](/providers/ipx) (selfhosted)
+- [`Sanity`](/providers/sanity)
 - [`Twicpics`](/providers/twicpics)
 - [`Storyblok`](/providers/storyblok)
 

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

@@ -0,0 +1,22 @@
+---
+menuTitle: Sanity
+title: Sanity Provider
+description: 'Nuxt Image has first class integration with Sanity'
+category: Providers
+---
+
+Integration between [Sanity](https://www.sanity.io/docs/image-urls) and the image module.
+
+To use this provider you just need to specify the `projectId` of your project in Sanity.
+
+```js{}[nuxt.config.js]
+export default {
+  image: {
+    sanity: {
+      projectId: 'yourprojectid',
+      // Defaults to 'production'
+      // dataset: 'development'
+    }
+  }
+}
+```

playground/nuxt.config.ts

@@ -39,6 +39,9 @@ export default <NuxtConfig> {
     imagekit: {
       baseURL: 'https://ik.imagekit.io/demo'
     },
+    sanity: {
+      projectId: 'j1o4tmjp'
+    },
     vercel: {
       baseURL: 'https://image-component.nextjs.gallery/_next/image'
     },

playground/pages/index.vue

@@ -46,6 +46,17 @@
         :operations="{ roundCorner: 'max' }"
       />
 
+      <h2>JPEG image on Sanity</h2>
+      <NuxtImg provider="sanity" src="image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg" />
+      <NuxtImg provider="sanity" src="image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg" width="200" height="200" fit="crop" />
+      <NuxtImg
+        provider="sanity"
+        src="image-7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170-jpg"
+        width="200"
+        height="200"
+        fit="min"
+      />
+
       <h2>JPEG image on TwicPics</h2>
       <NuxtImg provider="twicpics" src="/football.jpg" />
       <NuxtImg

src/provider.ts

@@ -10,6 +10,7 @@ const BuiltInProviders = [
   'imagekit',
   'imgix',
   'ipx',
+  'sanity',
   'static',
   'twicpics',
   'storyblok',

src/runtime/providers/sanity.ts

@@ -0,0 +1,29 @@
+import type { ProviderGetImage } from 'src'
+import { joinURL } from 'ufo'
+import { createOperationsGenerator } from '~image'
+
+const sanityCDN = 'https://cdn.sanity.io/images'
+
+const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    background: 'b',
+    height: 'h',
+    quality: 'q',
+    width: 'w'
+  },
+  joinWith: '&',
+  formatter: (key, value) => `${key}=${value}`
+})
+
+export const getImage: ProviderGetImage = (src, { modifiers = {}, projectId, dataset = 'production' } = {}) => {
+  const operations = operationsGenerator(modifiers)
+
+  const parts = src.split('-').slice(1)
+  const format = parts.pop()
+
+  const filenameAndQueries = parts.join('-') + '.' + format + (operations ? ('?' + operations) : '')
+
+  return {
+    url: joinURL(sanityCDN, projectId, dataset, filenameAndQueries)
+  }
+}