feat: add hygraph provider

docs/content/3.providers/hygraph.md

@@ -0,0 +1,40 @@
+---
+title: Hygraph
+description: Nuxt Image with Hygraph integration.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/image/blob/main/src/runtime/providers/hygraph.ts
+    size: xs
+---
+
+Integration between [Hygraph](https://hygraph.com/) and the image module.
+
+To use this provider you just need to specify the base URL of your project.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  image: {
+    hygraph: {
+      // If not filled out, the provider will add this as a default.
+      baseURL: "https://media.graphassets.com",
+    },
+  },
+});
+```
+
+## Modifiers
+
+All the default modifiers from [Hygraph's documentation](https://hygraph.com/docs/api-reference/content-api/assets) are available, plus additionally `auto_image` which lets Hygraph decide what image format is best for the user's browser and `quality` 0-100.
+
+```vue
+<NuxtImg
+  provider="hygraph"
+  src="https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb"
+  height="512"
+  width="512"
+  fit="max"
+  format="jpg"
+  :quality="90"
+/>
+```

docs/pages/index.vue

@@ -16,7 +16,7 @@ useSeoMeta({
 const source = ref('npm i @nuxt/image')
 const { copy, copied } = useClipboard({ source })
 
-const providers = ['cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel']
+const providers = ['cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel']
 // 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

@@ -101,6 +101,9 @@ export default defineNuxtConfig({
     sirv: {
       baseURL: 'https://demo.sirv.com'
     },
+    hygraph: {
+      baseURL: 'https://media.graphassets.com'
+    },
     providers: {
       custom: {
         provider: '~/providers/custom',

playground/providers.ts

@@ -997,5 +997,31 @@ export const providers: Provider[] = [
         modifiers: { watermark: '/watermark-v1.png', watermarkPosition: 'center', watermarkWidth: '30%' }
       }
     ]
+  },
+  // Hygraph
+  {
+    name: 'hygraph',
+    samples: [
+      {
+        src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb',
+        width: 500,
+        height: 500,
+        fit: 'crop',
+        quality: 90
+      },
+      {
+        src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb',
+        width: 500,
+        fit: 'max',
+        format: 'auto_image'
+      },
+      {
+        src: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb',
+        width: 300,
+        height: 300,
+        fit: 'clip',
+        format: 'jpeg'
+      }
+    ]
   }
 ]

src/provider.ts

@@ -22,6 +22,7 @@ const BuiltInProviders = [
   'fastly',
   'glide',
   'gumlet',
+  'hygraph',
   'imageengine',
   'imagekit',
   'imgix',

src/runtime/providers/hygraph.ts

@@ -0,0 +1,65 @@
+import { joinURL } from 'ufo'
+import type { ProviderGetImage } from '@nuxt/image'
+
+type ImageOptimizations = {
+  width?: number
+  height?: number
+  fit?: string | 'clip' | 'crop' | 'scale' | 'max'
+  format?: string | 'jpg' | 'png' | 'webp' | 'avif' | 'auto_image',
+  quality?: number
+}
+
+export function getImageFormat (format?: string) {
+  let result = 'auto_image'
+
+  if (format && format !== 'auto_image') {
+    result = `output=format:${format === 'jpeg' ? 'jpg' : format}`
+  }
+
+  return result
+}
+
+export function optimizeHygraphImage (baseurl: string, url: string, optimizations: ImageOptimizations) {
+  baseurl = baseurl.replace(/\/+$/, '')
+  const imageId = url.split(`${baseurl}/`)[1]
+  const imageFormat = getImageFormat(optimizations.format)
+  const optimBase = 'resize'
+  const quality = optimizations.quality ? `quality=value:${optimizations.quality}/compress/` : ''
+
+  const optimList = []
+  for (const [key, value] of Object.entries(optimizations)) {
+    if (key !== 'format' && key !== 'quality' && value !== undefined) {
+      if (key === 'fit' && value === 'contain') {
+        optimList.push('fit:max')
+      } else {
+        optimList.push(`${key}:${value}`)
+      }
+    }
+  }
+
+  const optim = `${optimBase}=${optimList.join(',')}`
+  const result = joinURL(baseurl, imageFormat, optim, quality, imageId)
+
+  return result
+}
+
+export const getImage: ProviderGetImage = (
+  src,
+  { modifiers = {}, baseurl } = {}
+) => {
+  const {
+    width,
+    height,
+    fit,
+    format,
+    quality
+  } = modifiers
+
+  if (!baseurl) {
+    baseurl = 'https://media.graphassets.com'
+  }
+
+  return {
+    url: optimizeHygraphImage(baseurl, src, { width, height, fit, format, quality })
+  }
+}

test/e2e/__snapshots__/no-ssr.test.ts.snap

@@ -164,6 +164,22 @@ exports[`browser (ssr: false) > gumlet should render images 2`] = `
 ]
 `;
 
+exports[`browser (ssr: false) > hygraph should render images 1`] = `
+[
+  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+]
+`;
+
+exports[`browser (ssr: false) > hygraph should render images 2`] = `
+[
+  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+]
+`;
+
 exports[`browser (ssr: false) > imageengine should render images 1`] = `
 [
   "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box",

test/e2e/__snapshots__/ssr.test.ts.snap

@@ -164,6 +164,22 @@ exports[`browser (ssr: true) > gumlet should render images 2`] = `
 ]
 `;
 
+exports[`browser (ssr: true) > hygraph should render images 1`] = `
+[
+  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+]
+`;
+
+exports[`browser (ssr: true) > hygraph should render images 2`] = `
+[
+  "https://media.graphassets.com/auto_image/resize=width:500,height:500,fit:crop/quality=value:90/compress/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/auto_image/resize=width:500,fit:max/JL6e2yJERUyQtTiZIzPb",
+  "https://media.graphassets.com/output=format:jpg/resize=width:300,height:300,fit:clip/JL6e2yJERUyQtTiZIzPb",
+]
+`;
+
 exports[`browser (ssr: true) > imageengine should render images 1`] = `
 [
   "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box",

test/providers.ts

@@ -27,7 +27,8 @@ export const images = [
     wagtail: { url: '329944/original|format-webp|webpquality-70' },
     directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4' },
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/' },
-    sirv: { url: 'https://demo.sirv.com/test.png' }
+    sirv: { url: 'https://demo.sirv.com/test.png' },
+    hygraph: { url: 'https://media.graphassets.com/JL6e2yJERUyQtTiZIzPb' }
   },
   {
     args: ['/test.png', { width: 200 }],
@@ -57,7 +58,8 @@ export const images = [
     wagtail: { url: '329944/width-200|format-webp|webpquality-70' },
     directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200' },
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x/' },
-    sirv: { url: 'https://demo.sirv.com/test.png?w=200' }
+    sirv: { url: 'https://demo.sirv.com/test.png?w=200' },
+    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200/JL6e2yJERUyQtTiZIzPb' }
   },
   {
     args: ['/test.png', { height: 200 }],
@@ -87,7 +89,8 @@ export const images = [
     wagtail: { url: '329944/height-200|format-webp|webpquality-70' },
     directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?height=200' },
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/x200/' },
-    sirv: { url: 'https://demo.sirv.com/test.png?h=200' }
+    sirv: { url: 'https://demo.sirv.com/test.png?h=200' },
+    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=height:200/JL6e2yJERUyQtTiZIzPb' }
   },
   {
     args: ['/test.png', { width: 200, height: 200 }],
@@ -117,7 +120,8 @@ export const images = [
     wagtail: { url: '329944/fill-200x200-c0|format-webp|webpquality-70' },
     directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200' },
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/' },
-    sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200' }
+    sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200' },
+    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200,height:200/JL6e2yJERUyQtTiZIzPb' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
@@ -147,7 +151,8 @@ export const images = [
     wagtail: { url: '329944/fill-200x200-c0|format-webp|webpquality-70' },
     directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200&fit=contain' },
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/-/stretch/off/' },
-    sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit' }
+    sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit' },
+    hygraph: { url: 'https://media.graphassets.com/auto_image/resize=width:200,height:200,fit:max/JL6e2yJERUyQtTiZIzPb' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
@@ -177,7 +182,8 @@ export const images = [
     wagtail: { url: '329944/fill-200x200-c0|format-jpeg|jpegquality-70' },
     directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200&fit=contain&format=jpg' },
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/jpeg/-/resize/200x200/-/stretch/off/' },
-    sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit&format=jpg' }
+    sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit&format=jpg' },
+    hygraph: { url: 'https://media.graphassets.com/output=format:jpg/resize=width:200,height:200,fit:max/JL6e2yJERUyQtTiZIzPb' }
   }
 ] as const