feat(storyblok): update to the new service

[jorgemartins-uon]

Updates the storyblok provider to use their new Image Service API.

Linked to #474.

[Baroshem]

Hey,

I think you have covered the changes pretty well!

I am giving an approval but wait for Pio with the final decision :)

[atinux]

Checked the playground, looks good for me. Thanks @jorgemartins-uon

[jorgemartins-uon]

Thanks @Baroshem @atinux. @pi0 please let me know if there's anything left before we can have a final review and merge it? Thanks!

[sam-g-roberts]

Would be sweet if this could get merged @atinux @pi0

[venux92]

Any timeframe on when this PR will be merged?

[Saurou]

While we wait for this to be checked and merged, this could be a temporary solution:

new file ~/providers/custom.js

import { joinURL } from 'ufo'

export function getImage(src, { modifiers = {} }, { nuxtContext, $img }) {
  const {
    fit,
    smart,
    width = '0',
    height = '0',
    filters = {},
    format,
    quality
  } = modifiers

  const doResize = width !== '0' || height !== '0'

  if (format) {
    filters.format = format + ''
  }

  if (quality) {
    filters.quality = quality + ''
  }

  const _filters = Object.entries(filters || {})
    .map((e) => `${e[0]}(${e[1]})`)
    .join(':')

  const options = joinURL(
    fit ? `fit-${fit}` : '',
    doResize ? `${width}x${height}` : '',
    smart ? 'smart' : '',
    _filters ? 'filters:' + _filters : ''
  )

  return {
    url: joinURL(src, '/m/', options)
  }
}

then in nuxt.config.js

  image: {
      provider: 'customStoryblok',
      providers: {
        customProvider: {
          name: 'customStoryblok', // optional value to overrider provider name
          provider: '~/providers/custom', // Path to custom provider
          options: {
            // ... provider options
          }
        }
      }
    },

Please let me know if this is unnecessary or overkill, but it seems to be working on changing the url structure

[pi0]

LGTM. Thanks for working on this <3