From 8ff9cc30edd8db3fcbb3726cb3441a768299abbd Mon Sep 17 00:00:00 2001
From: Esteban Ramos <elessar29@gmail.com>
Date: Thu, 11 Nov 2021 12:47:28 +0100
Subject: [PATCH] feat(contentful): modifying schemes to add support for AVIF
 images (#33903)

* feat(contentful): modifying schemes to add support for AVIF images

* add avif to the missing parts of the image processing code

* extend e2e tests to check for custom image formats

Co-authored-by: Esteban Ramos Coronado <esteban@Mac-mini-de-Esteban.local>
Co-authored-by: axe312ger <opensource@axe312.dev>
---
 .../integration/gatsby-plugin-image.js        | 12 +++++++++++
 .../src/pages/gatsby-plugin-image.js          | 20 +++++++++++++++++++
 .../src/gatsby-plugin-image.js                |  2 +-
 .../src/image-helpers.js                      |  3 ++-
 .../gatsby-source-contentful/src/schemes.js   |  1 +
 5 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js b/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js
index 98ae486d7f9e8..351da44f35c86 100644
--- a/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js
+++ b/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js
@@ -79,6 +79,18 @@ describe(`gatsby-plugin-image`, () => {
   it(`blurred`, testConfig, () =>
     testGatsbyPluginImage(`blurred`, hasBase64Placeholder)
   )
+  it(`Custom Image Formats`, testConfig, () => {
+    cy.get(`[data-cy="customImageFormats"] picture source[type="image/webp"]`)
+      .invoke(`attr`, `srcset`)
+      .should("contain", "fm=webp")
+    cy.get(`[data-cy="customImageFormats"] picture source[type="image/avif"]`)
+      .invoke(`attr`, `srcset`)
+      .should("contain", "fm=avif")
+    cy.get(`[data-cy="customImageFormats"] picture img`)
+      .invoke(`attr`, `srcset`)
+      .should("not.contain", "fm=webp")
+      .should("not.contain", "fm=avif")
+  })
   it(`sqip`, testConfig, () => testGatsbyPluginImage(`sqip`, hasSVGPlaceholder))
 
   it(`english`, testConfig, () => {
diff --git a/e2e-tests/contentful/src/pages/gatsby-plugin-image.js b/e2e-tests/contentful/src/pages/gatsby-plugin-image.js
index 38f11874aa32f..98d3ea31eb993 100644
--- a/e2e-tests/contentful/src/pages/gatsby-plugin-image.js
+++ b/e2e-tests/contentful/src/pages/gatsby-plugin-image.js
@@ -123,6 +123,25 @@ const GatsbyPluginImagePage = ({ data }) => {
         ))}
       </Grid>
 
+      <h2>gatsby-plugin-image: Custom Image Formats (WebP & AVIF)</h2>
+      <Grid data-cy="customImageFormats">
+        {data.default.nodes.map(node => (
+          <div>
+            <p>
+              <strong>
+                {node.title} ({node.file.fileName.split(".").pop()})
+              </strong>
+            </p>
+            {node.description && <p>{node.description}</p>}
+            {node.customImageFormats ? (
+              <GatsbyImage image={node.customImageFormats} />
+            ) : (
+              <SvgImage src={node.file.url} />
+            )}
+          </div>
+        ))}
+      </Grid>
+
       <h2>gatsby-plugin-image: SQIP Placeholder</h2>
       <Grid data-cy="sqip">
         {data.default.nodes.map(node => (
@@ -232,6 +251,7 @@ export const pageQuery = graphql`
           layout: FIXED
           placeholder: BLURRED
         )
+        customImageFormats: gatsbyImageData(formats: [AVIF, WEBP, AUTO])
         sqip(numberOfPrimitives: 12, blur: 0, mode: 1) {
           dataURI
         }
diff --git a/packages/gatsby-source-contentful/src/gatsby-plugin-image.js b/packages/gatsby-source-contentful/src/gatsby-plugin-image.js
index 529a3880469e4..fd0aed1808235 100644
--- a/packages/gatsby-source-contentful/src/gatsby-plugin-image.js
+++ b/packages/gatsby-source-contentful/src/gatsby-plugin-image.js
@@ -217,7 +217,7 @@ export function generateImageSource(
 
   if (!validImageFormats.has(toFormat)) {
     console.warn(
-      `[gatsby-source-contentful] Invalid image format "${toFormat}". Supported types are jpg, png and webp"`
+      `[gatsby-source-contentful] Invalid image format "${toFormat}". Supported types are jpg, png, webp and avif"`
     )
     return undefined
   }
diff --git a/packages/gatsby-source-contentful/src/image-helpers.js b/packages/gatsby-source-contentful/src/image-helpers.js
index 80469364757ed..7bfe412e93f69 100644
--- a/packages/gatsby-source-contentful/src/image-helpers.js
+++ b/packages/gatsby-source-contentful/src/image-helpers.js
@@ -6,7 +6,7 @@ import { URLSearchParams } from "url"
 export const CONTENTFUL_IMAGE_MAX_SIZE = 4000
 
 // Supported Image Formats by the Contentful Image API (https://www.contentful.com/developers/docs/references/images-api/#/reference/changing-formats/image-format)
-export const validImageFormats = new Set([`jpg`, `png`, `webp`, `gif`])
+export const validImageFormats = new Set([`jpg`, `png`, `webp`, `gif`, `avif`])
 
 // Determine the proper file extension based on mime type
 export const mimeTypeExtensions = new Map([
@@ -15,6 +15,7 @@ export const mimeTypeExtensions = new Map([
   [`image/gif`, `.gif`],
   [`image/png`, `.png`],
   [`image/webp`, `.webp`],
+  [`image/avif`, `.avif`],
 ])
 
 // Check if Contentful asset is actually an image
diff --git a/packages/gatsby-source-contentful/src/schemes.js b/packages/gatsby-source-contentful/src/schemes.js
index 53e0402adfcc3..abc4db100761a 100644
--- a/packages/gatsby-source-contentful/src/schemes.js
+++ b/packages/gatsby-source-contentful/src/schemes.js
@@ -9,6 +9,7 @@ export const ImageFormatType = new GraphQLEnumType({
     JPG: { value: `jpg` },
     PNG: { value: `png` },
     WEBP: { value: `webp` },
+    AVIF: { value: `avif` },
   },
 })