feat: Configure Multiple Image Paths (#75)

colbyfayock · web-flow · commit e10cffa3ff26 · 2023-09-15T14:49:30.000-04:00
# Description This sets up the ability to allow for more than one path to be configured for images. Instead of only being able to: ``` imagesPath = "/my-path" ``` You can now add: ``` imagesPath = [ "/my-path", "/my-other-path" ] ``` ## Issue Ticket Number   Fixes #61 ## Type of change  - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update # Checklist  - [ ] I have followed the contributing guidelines of this project as mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md) - [ ] I have created an [issue](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues) ticket for this PR - [ ] I have checked to ensure there aren't other open [Pull Requests](https://github.com/colbyfayock/netlify-plugin-cloudinary/pulls) for the same update/change? - [ ] I have performed a self-review of my own code - [ ] I have run tests locally to ensure they all pass - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes needed to the documentation
diff --git a/README.md b/README.md
@@ -86,16 +86,16 @@ npm install netlify-plugin-cloudinary
 
 ### Plugin Inputs
 
-| Name            | Required | Example   | Description |
-|-----------------|----------|-----------| ------------|
-| cloudName       | No*      | mycloud   | Cloudinary Cloud Name |
-| cname           | No       | domain.com | The custom domain name (CNAME) to use for building URLs (Advanced Plan Users) |
-| deliveryType    | No       | fetch     | The method by which Cloudinary stores and delivers images (Ex: fetch, upload) |
-| folder          | No       | myfolder  | Folder all media will be stored in. Defaults to Netlify site name |
-| imagesPath      | No       | /assets   | Local path application serves image assets from |
-| loadingStrategy | No       | eager     | The method in which in which images are loaded (Ex: lazy, eager) |
-| privateCdn      | No       | true      | Enables Private CDN Distribution (Advanced Plan Users) |
-| uploadPreset    | No       | my-preset | Defined set of asset upload defaults in Cloudinary |
+| Name            | Type    |Required | Example   | Description |
+|-----------------|---------|---------|-----------| ------------|
+| cloudName       | string  | No*     | mycloud   | Cloudinary Cloud Name |
+| cname           | string  | No      | domain.com | The custom domain name (CNAME) to use for building URLs (Advanced Plan Users) |
+| deliveryType    | string  | No      | fetch     | The method by which Cloudinary stores and delivers images (Ex: fetch, upload) |
+| folder          | string  | No      | myfolder  | Folder all media will be stored in. Defaults to Netlify site name |
+| imagesPath      | string/Array | No | /assets   | Local path application serves image assets from |
+| loadingStrategy | string  | No      | eager     | The method in which in which images are loaded (Ex: lazy, eager) |
+| privateCdn      | boolean | No      | true      | Enables Private CDN Distribution (Advanced Plan Users) |
+| uploadPreset    | string  | No      | my-preset | Defined set of asset upload defaults in Cloudinary |
 
 *Cloud Name must be set as an environment variable if not as an input
 
@@ -197,6 +197,7 @@ Inside your Netlify config:
   [plugins.inputs]
   cloudName = "[Your Cloudinary Cloud Name]"
   imagesPath = "/my-path"
+  # or imagesPath = [ "/my-path", "/my-other-path" ]
 ```
 
 ## 🕵️‍♀️ Common Questions & Issues
diff --git a/docs/public/screenshots/netlify-cloudinary-install-website.png b/docs/public/screenshots/netlify-cloudinary-install-website.png
diff --git a/docs/src/pages/configuration.mdx b/docs/src/pages/configuration.mdx
@@ -19,16 +19,16 @@ import OgImage from '../components/OgImage';
 
 ## Plugin Inputs
 
-| Name            | Required | Example   | Description |
-|-----------------|----------|-----------| ------------|
-| cloudName       | No*      | mycloud   | Cloudinary Cloud Name |
-| cname           | No       | domain.com | The custom domain name (CNAME) to use for building URLs (Advanced Plan Users) |
-| deliveryType    | No       | fetch     | The method by which Cloudinary stores and delivers images (Ex: fetch, upload) |
-| folder          | No       | myfolder  | Folder all media will be stored in. Defaults to Netlify site name |
-| imagesPath      | No       | /assets   | Local path application serves image assets from |
-| loadingStrategy | No       | eager     | The method in which in which images are loaded (Ex: lazy, eager) |
-| privateCdn      | No       | true      | Enables Private CDN Distribution (Advanced Plan Users) |
-| uploadPreset    | No       | my-preset | Defined set of asset upload defaults in Cloudinary |
+| Name            | Type    |Required | Example   | Description |
+|-----------------|---------|---------|-----------| ------------|
+| cloudName       | string  | No*     | mycloud   | Cloudinary Cloud Name |
+| cname           | string  | No      | domain.com | The custom domain name (CNAME) to use for building URLs (Advanced Plan Users) |
+| deliveryType    | string  | No      | fetch     | The method by which Cloudinary stores and delivers images (Ex: fetch, upload) |
+| folder          | string  | No      | myfolder  | Folder all media will be stored in. Defaults to Netlify site name |
+| imagesPath      | string/Array | No | /assets   | Local path application serves image assets from |
+| loadingStrategy | string  | No      | eager     | The method in which in which images are loaded (Ex: lazy, eager) |
+| privateCdn      | boolean | No      | true      | Enables Private CDN Distribution (Advanced Plan Users) |
+| uploadPreset    | string  | No      | my-preset | Defined set of asset upload defaults in Cloudinary |
 
 <Callout emoji={false}>
   Cloud Name must be set as an environment variable if not as an input
diff --git a/docs/src/pages/guides/images-path.mdx b/docs/src/pages/guides/images-path.mdx
@@ -29,4 +29,10 @@ Inside your Netlify config, add the following input configurations under your ne
   [plugins.inputs]
   cloudName = "[Your Cloudinary Cloud Name]"
   imagesPath = "/my-path"
+```
+
+If you'd like to specify multiple locations for your images, you can configure `imagesPath` as an array:
+
+```toml
+  imagesPath = [ "/my-path", "/my-other-path" ]
 ```
diff --git a/docs/src/pages/installation.mdx b/docs/src/pages/installation.mdx
@@ -24,9 +24,16 @@ import OgImage from '../components/OgImage';
 
       The Cloudinary Build Plugin for Netlify is easily available as an integration right inside of Netlify.
 
-      You can enable the plugin from the Integration page:
-
-      https://www.netlify.com/integrations/cloudinary/
+      You can enable the plugin from the Integration page: https://www.netlify.com/integrations/cloudinary/
+
+      <p className="mt-6">
+        <img
+          width="864"
+          height="311"
+          src="/screenshots/netlify-cloudinary-install-website.png"
+          alt="Netlify Logo"
+        />
+      </p>
 
       Or you can find it in the Netlify dashboard by navigating to your site, selecting Integrations, searching for Cloudinary, then enabling the integration.
 
diff --git a/netlify-plugin-cloudinary/manifest.yml b/netlify-plugin-cloudinary/manifest.yml
@@ -15,7 +15,7 @@ inputs:
     description: "Folder all media will be stored in. Defaults to Netlify site name"
   - name: imagesPath
     required: false
-    description: "Local path application serves image assets from"
+    description: "Local path(s) application serves image assets from"
     default: "/images"
   - name: loadingStrategy
     required: false
diff --git a/netlify-plugin-cloudinary/src/data/errors.ts b/netlify-plugin-cloudinary/src/data/errors.ts
@@ -1,7 +1,8 @@
 export const ERROR_CLOUD_NAME_REQUIRED =
     'A Cloudinary Cloud Name is required. Please set cloudName input or use the environment variable CLOUDINARY_CLOUD_NAME'
-export const ERROR_NETLIFY_HOST_UNKNOWN =
-    'Cannot determine Netlify host, can not proceed with plugin.'
+export const ERROR_INVALID_IMAGES_PATH = 'Invalid asset path. Please make sure your imagesPath is defined.'
 export const ERROR_NETLIFY_HOST_CLI_SUPPORT =
     'Note: The Netlify CLI does not currently support the ability to determine the host locally, try deploying on Netlify.'
-export const ERROR_SITE_NAME_REQUIRED =  'Cannot determine the site name, can not proceed with plugin'
+export const ERROR_NETLIFY_HOST_UNKNOWN =
+    'Cannot determine Netlify host, can not proceed with plugin.'
+export const ERROR_SITE_NAME_REQUIRED =  'Cannot determine the site name, can not proceed with plugin'
diff --git a/netlify-plugin-cloudinary/src/index.ts b/netlify-plugin-cloudinary/src/index.ts
@@ -8,11 +8,14 @@ import {
   getCloudinaryUrl,
   Assets,
 } from './lib/cloudinary';
+import { findAssetsByPath } from './lib/util';
+
 import { PUBLIC_ASSET_PATH } from './data/cloudinary';
 import {
   ERROR_CLOUD_NAME_REQUIRED,
-  ERROR_NETLIFY_HOST_UNKNOWN,
+  ERROR_INVALID_IMAGES_PATH,
   ERROR_NETLIFY_HOST_CLI_SUPPORT,
+  ERROR_NETLIFY_HOST_UNKNOWN,
   ERROR_SITE_NAME_REQUIRED,
 } from './data/errors';
 
@@ -67,7 +70,7 @@ type Inputs = {
   cname: string;
   deliveryType: string;
   folder: string;
-  imagesPath: string;
+  imagesPath: string | Array<string>;
   loadingStrategy: string;
   privateCdn: boolean;
   uploadPreset: string;
@@ -173,11 +176,19 @@ export async function onBuild({
     privateCdn,
   });
 
+  
+
   // Look for any available images in the provided imagesPath to collect
   // asset details and to grab a Cloudinary URL to use later
 
-  const imagesDirectory = glob.sync(`${PUBLISH_DIR}/${imagesPath}/**/*`);
-  const imagesFiles = imagesDirectory.filter(file => !!path.extname(file));
+  if ( typeof imagesPath === 'undefined' ) {
+    throw new Error(ERROR_INVALID_IMAGES_PATH);
+  }
+
+  const imagesFiles = findAssetsByPath({
+    baseDir: PUBLISH_DIR,
+    path: imagesPath
+  })
 
   if (imagesFiles.length === 0) {
     console.warn(`[Cloudinary] No image files found in ${imagesPath}`);
@@ -226,7 +237,6 @@ export async function onBuild({
         // @ts-expect-error what are the expected mediaTypes that will be stored in _cloudinaryAssets
         return _cloudinaryAssets[mediaType].map(async asset => {
           const { publishPath, cloudinaryUrl } = asset;
-
           netlifyConfig.redirects.unshift({
             from: `${publishPath}*`,
             to: cloudinaryUrl,
@@ -246,31 +256,41 @@ export async function onBuild({
     await Promise.all(
       CLOUDINARY_ASSET_DIRECTORIES.map(
         async ({ inputKey, path: defaultPath }) => {
-          const mediaPath = inputs[inputKey as keyof Inputs] || defaultPath;
-          // @ts-ignore Unsure how to type the above so that Inputs['privateCdn'] doesnt mess up types here
-          const cldAssetPath = `/${path.join(PUBLIC_ASSET_PATH, mediaPath)}`;
-          const cldAssetUrl = `${host}${cldAssetPath}`;
-
-          const { cloudinaryUrl: assetRedirectUrl } = await getCloudinaryUrl({
-            deliveryType: 'fetch',
-            folder,
-            path: `${cldAssetUrl}/:splat`,
-            uploadPreset,
-          });
-
-          netlifyConfig.redirects.unshift({
-            from: `${cldAssetPath}/*`,
-            to: `${mediaPath}/:splat`,
-            status: 200,
-            force: true,
-          });
-
-          netlifyConfig.redirects.unshift({
-            from: `${mediaPath}/*`,
-            to: assetRedirectUrl,
-            status: 302,
-            force: true,
-          });
+          let mediaPaths = inputs[inputKey as keyof Inputs] || defaultPath;
+
+          // Unsure how to type the above so that Inputs['privateCdn'] doesnt mess up types here
+
+          if ( !Array.isArray(mediaPaths) && typeof mediaPaths !== 'string' ) return;
+
+          if ( !Array.isArray(mediaPaths) ) {
+            mediaPaths = [mediaPaths];
+          }
+
+          mediaPaths.forEach(async mediaPath => {
+            const cldAssetPath = `/${path.join(PUBLIC_ASSET_PATH, mediaPath)}`;
+            const cldAssetUrl = `${host}${cldAssetPath}`;
+
+            const { cloudinaryUrl: assetRedirectUrl } = await getCloudinaryUrl({
+              deliveryType: 'fetch',
+              folder,
+              path: `${cldAssetUrl}/:splat`,
+              uploadPreset,
+            });
+
+            netlifyConfig.redirects.unshift({
+              from: `${cldAssetPath}/*`,
+              to: `${mediaPath}/:splat`,
+              status: 200,
+              force: true,
+            });
+
+            netlifyConfig.redirects.unshift({
+              from: `${mediaPath}/*`,
+              to: assetRedirectUrl,
+              status: 302,
+              force: true,
+            });
+          })
         },
       ),
     );
diff --git a/netlify-plugin-cloudinary/src/lib/util.ts b/netlify-plugin-cloudinary/src/lib/util.ts
@@ -1,3 +1,6 @@
+import path from 'node:path';
+import { glob } from 'glob';
+
 /**
  * isRemoteUrl
  */
@@ -48,3 +51,22 @@ export function getQueryParams(url: string) {
   return params
 }
 
+/**
+ * findAssetsByPath
+ */
+
+interface FindAssetsByPath {
+  baseDir: string;
+  path: string | Array<string>;
+}
+
+export function findAssetsByPath(options: FindAssetsByPath) {
+  if ( !Array.isArray(options.path) ) {
+    options.path = [options.path];
+  }
+
+  return options.path.flatMap(assetsPath => {
+    const assetsDirectory = glob.sync(path.join(options.baseDir, assetsPath, '/**/*'));
+    return assetsDirectory.filter(file => !!path.extname(file));
+  })
+}
diff --git a/netlify-plugin-cloudinary/tests/assets/stranger-things-lucas.jpeg b/netlify-plugin-cloudinary/tests/assets/stranger-things-lucas.jpeg
diff --git a/netlify-plugin-cloudinary/tests/on-build.test.js b/netlify-plugin-cloudinary/tests/on-build.test.js
@@ -117,6 +117,72 @@ describe('onBuild', () => {
       expect(redirects[2]).toEqual(defaultRedirect);
     });
 
+    test('should create redirects with multiple image paths', async () => {
+      const imagesFunctionName = 'cld_images';
+
+      fs.readdir.mockResolvedValue([imagesFunctionName]);
+
+      process.env.SITE_NAME = 'cool-site';
+      process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
+      process.env.CONTEXT = 'deploy-preview';
+      process.env.DEPLOY_PRIME_URL = 'https://deploy-preview-1234--netlify-plugin-cloudinary.netlify.app';
+
+      const deliveryType = 'fetch';
+      const imagesPath = [ '/images', '/assets' ];
+
+      const defaultRedirect = {
+        from: '/path',
+        to: '/other-path',
+        status: 200
+      }
+
+      const redirects = [defaultRedirect];
+
+      const netlifyConfig = {
+        redirects
+      };
+
+      await onBuild({
+        netlifyConfig,
+        constants: {
+          PUBLISH_DIR: __dirname
+        },
+        inputs: {
+          deliveryType,
+          imagesPath
+        }
+      });
+
+      expect(redirects[0]).toEqual({
+        from: `${imagesPath[1]}/*`,
+        to: `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/${deliveryType}/f_auto,q_auto/${process.env.DEPLOY_PRIME_URL}/cld-assets${imagesPath[1]}/:splat`,
+        status: 302,
+        force: true
+      });
+
+      expect(redirects[1]).toEqual({
+        from: `/cld-assets${imagesPath[1]}/*`,
+        to: `${imagesPath[1]}/:splat`,
+        status: 200,
+        force: true
+      });
+      expect(redirects[2]).toEqual({
+        from: `${imagesPath[0]}/*`,
+        to: `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/${deliveryType}/f_auto,q_auto/${process.env.DEPLOY_PRIME_URL}/cld-assets${imagesPath[0]}/:splat`,
+        status: 302,
+        force: true
+      });
+
+      expect(redirects[3]).toEqual({
+        from: `/cld-assets${imagesPath[0]}/*`,
+        to: `${imagesPath[0]}/:splat`,
+        status: 200,
+        force: true
+      });
+
+      expect(redirects[4]).toEqual(defaultRedirect);
+    });
+
   });
 
 });
diff --git a/netlify.toml b/netlify.toml
@@ -15,3 +15,4 @@
   [plugins.inputs]
   cloudName = "netlify-cloudinary"
   deliveryType = "upload"
+  imagesPath = [ "images", "screenshots" ]
