feat: image and file cdn url generator adapter implementation

packages/gatsby-plugin-utils/src/polyfill-remote-file/jobs/dispatchers.ts

@@ -8,7 +8,8 @@ export function shouldDispatch(): boolean {
   return (
     !(
       process.env.GATSBY_CLOUD_IMAGE_CDN === `1` ||
-      process.env.GATSBY_CLOUD_IMAGE_CDN === `true`
+      process.env.GATSBY_CLOUD_IMAGE_CDN === `true` ||
+      process.env.NETLIFY_IMAGE_CDN === `true`
     ) && process.env.NODE_ENV === `production`
   )
 }

packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/__tests__/url-generator.ts

@@ -5,6 +5,7 @@ import url from "url"
 import {
   generateFileUrl,
   generateImageUrl,
+  generateImageUrlAlt,
   ImageCDNUrlKeys,
 } from "../url-generator"
 
@@ -343,3 +344,126 @@ describe(`url-generator`, () => {
     )
   })
 })
+
+describe(`generateImageUrlAlt`, () => {
+  beforeEach(() => {
+    process.env.NETLIFY_IMAGE_CDN = `true`
+  })
+
+  afterEach(() => {
+    delete process.env.NETLIFY_IMAGE_CDN
+  })
+
+  const source = {
+    url: `https://example.com/image.jpg`,
+    filename: `image.jpg`,
+    mimeType: `image/jpeg`,
+    internal: {
+      contentDigest: `1234`,
+    },
+  }
+
+  it(`should return an image based url`, () => {
+    expect(
+      generateImageUrlAlt(source, {
+        width: 100,
+        height: 100,
+        cropFocus: `top`,
+        format: `webp`,
+        quality: 80,
+      })
+    ).toMatchInlineSnapshot(
+      `"/.netlify/images?w=100&h=100&fit=crop&crop=top&fm=webp&q=80&url=https%3A%2F%2Fexample.com%2Fimage.jpg&cd=1234"`
+    )
+  })
+
+  it(`should handle special characters`, () => {
+    const source = {
+      url: `https://example.com/image-éà.jpg`,
+      filename: `image-éà.jpg`,
+      mimeType: `image/jpeg`,
+      internal: {
+        contentDigest: `1234`,
+      },
+    }
+
+    expect(
+      generateImageUrlAlt(source, {
+        width: 100,
+        height: 100,
+        cropFocus: `top`,
+        format: `webp`,
+        quality: 80,
+      })
+    ).toMatchInlineSnapshot(
+      `"/.netlify/images?w=100&h=100&fit=crop&crop=top&fm=webp&q=80&url=https%3A%2F%2Fexample.com%2Fimage-%C3%A9%C3%A0.jpg&cd=1234"`
+    )
+  })
+
+  it(`should handle spaces`, () => {
+    const source = {
+      url: `https://example.com/image test.jpg`,
+      filename: `image test.jpg`,
+      mimeType: `image/jpeg`,
+      internal: {
+        contentDigest: `1234`,
+      },
+    }
+
+    expect(
+      generateImageUrlAlt(source, {
+        width: 100,
+        height: 100,
+        cropFocus: `top`,
+        format: `webp`,
+        quality: 80,
+      })
+    ).toMatchInlineSnapshot(
+      `"/.netlify/images?w=100&h=100&fit=crop&crop=top&fm=webp&q=80&url=https%3A%2F%2Fexample.com%2Fimage+test.jpg&cd=1234"`
+    )
+  })
+
+  it(`should handle encoded urls`, () => {
+    const source = {
+      url: `https://example.com/image%20test.jpg`,
+      filename: `image test.jpg`,
+      mimeType: `image/jpeg`,
+      internal: {
+        contentDigest: `1234`,
+      },
+    }
+
+    expect(
+      generateImageUrlAlt(source, {
+        width: 100,
+        height: 100,
+        cropFocus: `top`,
+        format: `webp`,
+        quality: 80,
+      })
+    ).toMatchInlineSnapshot(
+      `"/.netlify/images?w=100&h=100&fit=crop&crop=top&fm=webp&q=80&url=https%3A%2F%2Fexample.com%2Fimage%2520test.jpg&cd=1234"`
+    )
+  })
+
+  it.each([
+    [`width`, `w`, 100],
+    [`height`, `h`, 50],
+    [`cropFocus`, `crop`, `center,right`],
+    [`format`, `fm`, `webp`],
+    [`quality`, `q`, 60],
+  ] as Array<[keyof ImageArgs, string, ImageArgs[keyof ImageArgs]]>)(
+    `should set %s in image args`,
+    (key, queryKey, value) => {
+      const url = new URL(
+        // @ts-ignore remove typings
+        `https://netlify.com${generateImageUrlAlt(source, {
+          format: `webp`,
+          [key]: value,
+        })}`
+      )
+
+      expect(url.searchParams.get(queryKey)).toEqual(value.toString())
+    }
+  )
+})

packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts

@@ -93,6 +93,9 @@ export function generateImageUrl(
   imageArgs: Parameters<typeof generateImageArgs>[0],
   store?: Store
 ): string {
+  if (process.env.NETLIFY_IMAGE_CDN) {
+    return generateImageUrlAlt(source, imageArgs, store)
+  }
   const filenameWithoutExt = basename(source.filename, extname(source.filename))
   const queryStr = generateImageArgs(imageArgs)
 
@@ -172,3 +175,75 @@ function generateImageArgs({
 
   return args.join(`&`)
 }
+
+export function generateImageUrlAlt(
+  source: {
+    url: string
+    filename: string
+    mimeType: string
+    internal: { contentDigest: string }
+  },
+  imageArgs: Parameters<typeof generateImageArgs>[0],
+  store?: Store
+): string {
+  const placeholderOrigin = `http://netlify.com`
+  const imageParams = generateImageArgsAlt(imageArgs)
+
+  const baseURL = new URL(`${placeholderOrigin}/${generateRoutePrefix(store)}`)
+
+  baseURL.search = imageParams.toString()
+  baseURL.searchParams.append(`url`, source.url)
+  baseURL.searchParams.append(`cd`, source.internal.contentDigest)
+
+  return `${baseURL.pathname}${baseURL.search}`
+}
+
+function generateRoutePrefix(store?: Store): string {
+  const state = store?.getState()
+
+  const pathPrefix = state?.program?.prefixPaths
+    ? state?.config?.pathPrefix
+    : ``
+
+  return pathPrefix + `.netlify/images`
+}
+
+export function generateImageArgsAlt({
+  width,
+  height,
+  format,
+  cropFocus,
+  quality,
+}: WidthOrHeight & {
+  format: string
+  cropFocus?: ImageCropFocus | Array<ImageCropFocus>
+  quality: number
+}): URLSearchParams {
+  const params = new URLSearchParams()
+
+  if (width) {
+    params.append(`w`, width.toString())
+  }
+  if (height) {
+    params.append(`h`, height.toString())
+  }
+  if (cropFocus) {
+    params.append(`fit`, `crop`)
+    if (Array.isArray(cropFocus)) {
+      // For array of cropFocus values, append them as comma-separated string
+      params.append(`crop`, cropFocus.join(`,`))
+    } else {
+      params.append(`crop`, cropFocus)
+    }
+  }
+
+  if (format) {
+    params.append(`fm`, format)
+  }
+
+  if (quality) {
+    params.append(`q`, quality.toString())
+  }
+
+  return params
+}