feat: add support for query param url syntax of IMAGE CDN (#566)

* chore: add IMAGE_CDN setup to demo-v5 site

* feat: support query params style IMAGE CDN url syntax

* build deploy preview when there are changes in plugin or in demo site

* chore: resolve some linting errors

* chore: refactor handling of multiple url structures

* fix: preserve 'filename' on redirect

* chore: update ignore in netlify.toml for demo sites

* chore: update demo-v5 image cdn page

* chore: update ignore commands

* chore: add IMAGE_CDN setup to demo site

* chore: add image-cdn link to demo index

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: pieh

demo-v5/gatsby-config.js

@@ -18,5 +18,8 @@ module.exports = {
       },
     },
     'gatsby-plugin-netlify',
+    `gatsby-plugin-image`,
+    `gatsby-plugin-sharp`,
+    'gatsby-plugin-image-cdn-test',
   ],
 }

demo-v5/netlify.toml

@@ -1,7 +1,8 @@
 [build]
 command = "npm run build"
 publish = "public/"
-# ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../plugin/"
+environment = { GATSBY_CLOUD_IMAGE_CDN = "true" }
+ignore = "if [ $CACHED_COMMIT_REF == $COMMIT_REF ]; then (exit 1); else git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ..; fi;"
 
 [[plugins]]
 package = "../plugin/src/index.ts"

demo-v5/package-lock.json

@@ -22,6 +22,8 @@
   "dependencies": {
     "@sindresorhus/slugify": "^1.1.2",
     "gatsby": "next",
+    "gatsby-plugin-image": "next",
+    "gatsby-plugin-sharp": "next",
     "gatsby-source-filesystem": "next",
     "gatsby-transformer-remark": "next",
     "react": "^18.0.0",

demo-v5/package.json

@@ -0,0 +1,25 @@
+exports.createSchemaCustomization = function createSchemaCustomization({
+  actions,
+}) {
+  actions.createTypes(`
+    type UnsplashImage implements Node & RemoteFile {
+      id: ID!
+    }
+  `)
+}
+
+exports.sourceNodes = function sourceNodes({ actions }) {
+  const imageURL = `https://images.unsplash.com/photo-1672823841196-3ec078a2befd`
+  actions.createNode({
+    id: 'unsplash-image-1',
+    internal: {
+      type: 'UnsplashImage',
+      contentDigest: `1`,
+    },
+    url: imageURL,
+    filename: imageURL,
+    mimeType: `image/jpeg`,
+    width: 1940,
+    height: 3118,
+  })
+}

demo-v5/plugins/gatsby-plugin-image-cdn-test/gatsby-node.js

@@ -0,0 +1 @@
+{}

demo-v5/plugins/gatsby-plugin-image-cdn-test/package.json

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import { graphql } from 'gatsby'
+import { GatsbyImage } from 'gatsby-plugin-image'
+import { Layout } from '../layout/default'
+
+const ImageCDNPage = ({ data }) => (
+  <Layout>
+    <h1>Image CDN</h1>
+    <ul>
+      {data.allUnsplashImage.nodes.map((node) => (
+        <>
+          <li key={node.id + '-400'}>
+            <figure>
+              <GatsbyImage image={node.gatsbyImage400} alt="400px wide image" />
+              <figcaption>400px wide image</figcaption>
+            </figure>
+          </li>
+          <li key={node.id + '-200'}>
+            <figure>
+              <GatsbyImage image={node.gatsbyImage200} alt="200px wide image" />
+              <figcaption>200px wide image</figcaption>
+            </figure>
+          </li>
+          <li key={node.id + '-public'}>
+            <figure>
+              <img src={node.publicUrl} alt="Public URL" />
+              <figcaption>Public URL</figcaption>
+            </figure>
+          </li>
+        </>
+      ))}
+    </ul>
+    <h2>Old url structure</h2>
+    <figure>
+      <img
+        src="/_gatsby/image/aHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MTc4NDk4NDU1MzctNGQyNTc5MDI0NTRhP2l4bGliPXJiLTEuMi4xJml4aWQ9TW53eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDgmYXV0bz1mb3JtYXQmZml0PWNyb3Amdz0yMDAwJnE9ODA=/dz0zMDAmaD00MDAmZm09YXZpZg==/name.avif"
+        alt="Gatsby Image"
+      />
+      <figcaption>
+        /_gatsby/image/aHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MTc4NDk4NDU1MzctNGQyNTc5MDI0NTRhP2l4bGliPXJiLTEuMi4xJml4aWQ9TW53eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDgmYXV0bz1mb3JtYXQmZml0PWNyb3Amdz0yMDAwJnE9ODA=/dz0zMDAmaD00MDAmZm09YXZpZg==.avif
+      </figcaption>
+    </figure>
+    <figure>
+      <img
+        src="/_gatsby/file/aHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MTc4NDk4NDU1MzctNGQyNTc5MDI0NTRhP2l4bGliPXJiLTEuMi4xJml4aWQ9TW53eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDgmYXV0bz1mb3JtYXQmZml0PWNyb3Amdz0yMDAwJnE9ODA=/name.avif"
+        alt="Gatsby File"
+      />
+      <figcaption>
+        /_gatsby/file/aHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MTc4NDk4NDU1MzctNGQyNTc5MDI0NTRhP2l4bGliPXJiLTEuMi4xJml4aWQ9TW53eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDgmYXV0bz1mb3JtYXQmZml0PWNyb3Amdz0yMDAwJnE9ODA=/name.avif
+      </figcaption>
+    </figure>
+  </Layout>
+)
+
+export default ImageCDNPage
+
+export const query = graphql`
+  {
+    allUnsplashImage {
+      nodes {
+        id
+        gatsbyImage200: gatsbyImage(width: 200)
+        gatsbyImage400: gatsbyImage(width: 400)
+        publicUrl
+      }
+    }
+  }
+`

demo-v5/src/pages/image-cdn.js

@@ -113,6 +113,11 @@ const links = [
     url: 'api/users/123/hello world',
     description: 'Captures named path params',
   },
+  {
+    text: 'IMAGE CDN',
+    url: 'image-cdn',
+    description: 'Image CDN demo',
+  },
 ]
 
 // markup

demo-v5/src/pages/index.js

@@ -17,5 +17,8 @@ module.exports = {
       },
     },
     'gatsby-plugin-netlify',
+    `gatsby-plugin-image`,
+    `gatsby-plugin-sharp`,
+    'gatsby-plugin-image-cdn-test',
   ],
 }

demo/gatsby-config.js

@@ -1,7 +1,8 @@
 [build]
 command = "npm run build"
 publish = "public/"
-# ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../plugin/"
+environment = { GATSBY_CLOUD_IMAGE_CDN = "true" }
+ignore = "if [ $CACHED_COMMIT_REF == $COMMIT_REF ]; then (exit 1); else git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ..; fi;"
 
 [[plugins]]
 package = "../plugin/src/index.ts"