Add Netlify Image CDN provider [code provided]

[hrishikesh-k]

Netlify Large Media has been deprecarted, but Netlify now provides Netlify Image CDN for working with images. Thus, I have written a custom provider that seems to work:

import {createOperationsGenerator} from '#image'
import {joinURL} from 'ufo'
import type {ProviderGetImage} from '@nuxt/image'
export const getImage : ProviderGetImage = (src, options = {}) => {
  if (!options.baseURL) {
    options.baseURL = '/.netlify/images'
  }
  const supportedFits = [
    'contain',
    'cover',
    'fill'
  ] as const
  const supportedFormats = [
    'avif',
    'blurhash',
    'gif',
    'jpg',
    'png',
    'webp'
  ] as const
  const supportedModifiers = [
    'fit',
    'format',
    'height',
    'position',
    'quality',
    'width'
  ] as const
  function checkSupport(supportArray : ReadonlyArray<string>, stringToCheck : string, typeOfCheck : 'fit' | 'format' | 'modifier', callback? : () => void) {
    if (!supportArray.includes(stringToCheck)) {
      console.error(`${typeOfCheck}: ${stringToCheck} is not supported by Netlify Image CDN.`)
    } else if (callback) {
      callback()
    }
  }
  function generateValueMap(arrayOfValues : ReadonlyArray<string>) : Record<string, string> {
    return arrayOfValues.reduce((generatedConfig, currentConfigItem) => {
      const currentConfig = generatedConfig
      currentConfig[currentConfigItem] = currentConfigItem
      return currentConfig
    }, {} as Record<string, string>)
  }
  if (options.modifiers) {
    Object.keys(options.modifiers).forEach(modifier => {
      checkSupport(supportedModifiers, modifier.toLowerCase(), 'modifier')
    })
    if (options.modifiers.fit) {
      checkSupport(supportedFits, options.modifiers.fit.toLowerCase(), 'fit', () => {
        console.warn('fit in Nuxt Image and Netlify Image CDN works differently. Please refer to appropriate docs to find the correct value.')
      })
    }
    if (options.modifiers.format) {
      checkSupport(supportedFormats, options.modifiers.format.toLowerCase(), 'format')
    }
  }
  return {
    url: joinURL(options.baseURL, `?url=${src}&${createOperationsGenerator({
      formatter: (key : string, value : string) => {
        return `${key}=${value}`
      },
      joinWith: '&',
      keyMap: {
        fit: 'fit',
        format: 'fm',
        height: 'h',
        quality: 'q',
        width: 'w'
      },
      valueMap: {
        fit: generateValueMap(supportedFormats),
        format: generateValueMap(supportedFormats)
      }
    })(options.modifiers)}`)
  }
}

The reason I am not submitting a PR is because I'm not confident writing the tests (I don't fully understand how tests are written for this module). Here's the Netlify Image CDN docs: https://docs.netlify.com/image-cdn/overview/

For the docs, the following note would be needed:

• If someone wishes to transform an image from a 3rd party service using Netlify Image CDN, they'd have to add the relevant config to their netlify.toml: https://docs.netlify.com/image-cdn/overview/#remote-path

[danielkellyio]

thanks @hrishikesh-k this worked when nothing else did!

[hrishikesh-k]

Closing in favour of: #1234