Merge beta into main for publishing

cloudinary-community · Aug 30, 2024 · 1777779 · 1777779
2 parents 1404a1b + 4ff990a
commit 1777779
Show file tree

Hide file tree

Showing 19 changed files with 829 additions and 312 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [4.7.0-beta.1](https://github.com/cloudinary-community/gatsby-transformer-cloudinary/compare/v4.6.0...v4.7.0-beta.1) (2024-07-28)
+
+
+### Features
+
+* simplify transformTypes configuration and allow "Advanced CDN Media Asset Delivery Options" ([#254](https://github.com/cloudinary-community/gatsby-transformer-cloudinary/issues/254)) ([d4ed539](https://github.com/cloudinary-community/gatsby-transformer-cloudinary/commit/d4ed539a88cb145a4bc91c9ff0c98e3b1d74804c))
+
 # [4.6.0](https://github.com/cloudinary-community/gatsby-transformer-cloudinary/compare/v4.5.0...v4.6.0) (2024-06-07)
 
 

diff --git a/README.md b/README.md
@@ -120,7 +120,7 @@ export default BlogPost;
 
 ### Transform Type Requirements
 
-Gatsby Image support may be added to any GraphQL Type describing a Cloudinary asset with the following information:
+Gatsby Image support may be added to any GraphQL Type describing a Cloudinary asset with the following data:
 
 ```js
 {
@@ -138,7 +138,7 @@ Gatsby Image support may be added to any GraphQL Type describing a Cloudinary as
 }
 ```
 
-If the GraphQL Type does not have the required data shape, you may use the `mapping` option to map the data from the sourced data shape to the required data shape:
+If the GraphQL Type does not have the required data shape, you may configure how to resolve the data using the `transformTypes` configuration option:
 
 ```js
 // File: ./gatsby-config.js
@@ -152,15 +152,10 @@ module.exports = {
         transformTypes: [
           {
             type: `CustomType`,
-            mapping: {
-              // Use a static value
-              cloudName: () => 'my-cloud',
-              // Use a differnt key than the default
-              publicId: 'thePublicId', // default for publicId is `public_id`
-              // Resolve a value using a function
-              height: (data) => data.dimensions?.height,
-              width: (data) => data.dimentions?.width,
-            },
+            // Use a static value
+            cloudName: 'my-cld-cloud',
+            // Resolve a value using a function
+            height: (data) => data.metadata?.height,
           },
         ],
         // Optional transformation option
@@ -176,6 +171,40 @@ To find the GraphQL Type describing your Cloudinary assets use the built-in [Gra
 
 `defaultBase64` and `defaultTracedSVG` is the base64 URI of the placeholder image, it must comply with [RFC 2397](https://tools.ietf.org/html/rfc2397).
 
+### Private CDNs and custom delivery hostnames (CNAMEs)
+
+If you are using a private CDN or a custom delivery hostname (CNAME) you may configure the plugin to do so. Read more about [Private CDNs and CNAMEs](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames).
+
+```js
+// File: ./gatsby-config.js
+
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-transformer-cloudinary`,
+      options: {
+        transformTypes: [
+          {
+            type: `CloudinaryAsset`,
+            secureDistribution: 'my-domain.com',
+
+            // Or using privateCdn
+            // privateCdn: true,
+
+            // Or using cname
+            // secure: false,
+            // cname: 'my-domain.com',
+          },
+        ],
+        // Optional transformation option
+        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],
+      },
+    },
+    `gatsby-plugin-image`,
+  ],
+};
+```
+
 ### Sanity.io Configuration
 
 If you are using [Sanity.io](https://www.sanity.io/) and the [gatsby-source-sanity](https://www.gatsbyjs.com/plugins/gatsby-source-sanity/) plugin use the following configuration to add the `gatsbyImageData` resolver to the sourced Sanity Cloudinary assets:
@@ -199,24 +228,17 @@ module.exports = {
         transformTypes: [
           {
             type: 'SanityCloudinaryAsset',
-            mapping: {
-              // Dynamically get the cloud name
-              // from SanityCloudinaryAsset.url
-              cloudName: (data) => {
-                const findCloudName = new RegExp(
-                  '(cloudinary.com/)([^/]+)',
-                  'i'
-                );
-                const result = data.url.match(findCloudName);
-                return result[1];
-              },
-              // Or set it statically if all assets are from the same cloud
-              // cloudName: () => "my-cloud",
+            // Dynamically get the cloud name
+            // from SanityCloudinaryAsset.url
+            cloudName: (data) => {
+              const findCloudName = new RegExp('(cloudinary.com/)([^/]+)', 'i');
+              const result = data.url.match(findCloudName);
+              return result[1];
             },
+            // Or set it statically if all assets are from the same Cloudinary account
+            // cloudName: "my-cld-cloud",
           },
         ],
-        // Optional transformation option
-        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],
       },
     },
     `gatsby-plugin-image`,
@@ -249,24 +271,18 @@ module.exports = {
             // with the name of the GraphQL Type describing your Cloudinary assets
             // will always start with `contentful` and end with `JsonNode`
             type: 'contentfulBlogPostFeaturedImageJsonNode',
-            mapping: {
-              // Dynamically get the cloud name
-              // from SanityCloudinaryAsset.url
-              cloudName: (data) => {
-                const findCloudName = new RegExp(
-                  '(cloudinary.com/)([^/]+)',
-                  'i'
-                );
-                const result = data.url.match(findCloudName);
-                return result[1];
-              },
-              // Or set it statically if all assets are from the same cloud
-              // cloudName: () => "my-cloud",
+
+            // Dynamically get the cloud name
+            // from SanityCloudinaryAsset.url
+            cloudName: (data) => {
+              const findCloudName = new RegExp('(cloudinary.com/)([^/]+)', 'i');
+              const result = data.url.match(findCloudName);
+              return result[1];
             },
+            // Or set it statically if all assets are from the same cloud
+            // cloudName: 'my-cld-cloud',
           },
         ],
-        // Optional transformation option
-        defaultTransformations: ['c_fill', 'g_auto', 'q_auto'],
       },
     },
     `gatsby-plugin-image`,

diff --git a/demo/gatsby-config.js b/demo/gatsby-config.js
@@ -41,22 +41,38 @@ module.exports = {
           'VariedData',
           'EmptyDataCloudinary',
           'MarkdownRemarkFrontmatterHeroImage',
-          // {
-          //   name: 'MarkdownRemarkFrontmatterHeroImage',
-          //   mapping: {
-          //     cloudName: `cloudName`,
-          //     publicId: `publicId`,
-          //    }
-          // },
           {
             type: 'MarkdownRemarkFrontmatterHeroImageWithUnconformingShape',
+            cloudName: `lilly-labs-consulting`,
             mapping: {
-              cloudName: `a_cloud_name`,
-              publicId: (data) => {
-                return data['a_public_id'];
-              },
+              publicId: 'a_public_id',
             },
           },
+          {
+            type: 'SecureDistribution',
+            secureDistribution: `example.com`,
+            // secure: true,
+            publicId: (data) => data.public,
+          },
+          {
+            type: 'Cname',
+            cname: `example.com`,
+            secure: false,
+            format: (data) => data.metadata.format,
+            mapping: {
+              width: (data) => data.metadata.width,
+              height: (data) => data.metadata.height,
+            },
+          },
+          {
+            type: 'PrivateCDN',
+            privateCdn: true,
+            secure: true,
+          },
+          {
+            type: 'PrivateCDNUnsecure',
+            // Configured in the source date
+          },
         ],
       },
     },

diff --git a/demo/gatsby-node.js b/demo/gatsby-node.js
@@ -270,6 +270,95 @@ exports.sourceNodes = (gatsbyUtils) => {
     createNode,
     createNodeId,
   });
+
+  // To test root config
+  const secureDistributionData1 = {
+    title: 'Secure Distribution Example One',
+    slug: 'secure-1',
+    cloudName: 'lilly-labs-consulting',
+    public: 'sample',
+    width: 864,
+    originalHeight: 576,
+    originalFormat: 'jpg',
+  };
+
+  createNode({
+    ...secureDistributionData1,
+    id: createNodeId(`SecureDistribution >>> 1`),
+    internal: {
+      type: 'SecureDistribution',
+      contentDigest: createContentDigest(secureDistributionData1),
+    },
+  });
+
+  reporter.info(`[site] Create SecureDistribution with existing asset # 1`);
+
+  const cnameData1 = {
+    title: 'Cname (unsecure) Example One',
+    slug: 'cname-1',
+    cloud_name: 'lilly-labs-consulting',
+    public_id: 'sample',
+    metadata: {
+      width: 864,
+      height: 576,
+      format: 'jpg',
+    },
+  };
+
+  createNode({
+    ...cnameData1,
+    id: createNodeId(`Cname >>> 1`),
+    internal: {
+      type: 'Cname',
+      contentDigest: createContentDigest(cnameData1),
+    },
+  });
+
+  reporter.info(`[site] Create Cname with existing asset # 1`);
+
+  const privateCdn1 = {
+    title: 'Private CDN Example One',
+    slug: 'private-cdn-1',
+    cloud_name: 'lilly-labs-consulting',
+    public_id: 'sample',
+    width: 864,
+    height: 576,
+    format: 'jpg',
+  };
+
+  createNode({
+    ...privateCdn1,
+    id: createNodeId(`PrivateCDN >>> 1`),
+    internal: {
+      type: 'PrivateCDN',
+      contentDigest: createContentDigest(privateCdn1),
+    },
+  });
+
+  reporter.info(`[site] Create PrivateCDN with existing asset # 1`);
+
+  const privateCdnUnsecure1 = {
+    title: 'Private CDN Unsecure Example One',
+    slug: 'private-cdn-unsecure-1',
+    cloud_name: 'lilly-labs-consulting',
+    secure: false,
+    privateCdn: true,
+    public_id: 'sample',
+    width: 864,
+    height: 576,
+    format: 'jpg',
+  };
+
+  createNode({
+    ...privateCdnUnsecure1,
+    id: createNodeId(`PrivateCDNUnsecure >>> 1`),
+    internal: {
+      type: 'PrivateCDNUnsecure',
+      contentDigest: createContentDigest(privateCdnUnsecure1),
+    },
+  });
+
+  reporter.info(`[site] Create PrivateCDNUnsecure with existing asset # 1`);
 };
 
 exports.onCreateNode = async (gatsbyUtils) => {