feat: Configure Multiple Image Paths (cloudinary-community#75)

# 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 <!-- Specifiy which issue this fixes by referencing the issue number (`cloudinary-community#11`) or issue URL. --> <!-- Example: Fixes cloudinary-community#1 --> Fixes cloudinary-community#61 ## Type of change <!-- Please select all options that are applicable. --> - [ ] 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 <!-- These must all be followed and checked. --> - [ ] 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

Author: colbyfayock

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

docs/public/screenshots/netlify-cloudinary-install-website.png

@@ -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

docs/src/pages/configuration.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" ]
 ```

docs/src/pages/guides/images-path.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.
 

docs/src/pages/installation.mdx

@@ -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

netlify-plugin-cloudinary/manifest.yml

@@ -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'

netlify-plugin-cloudinary/src/data/errors.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,
+ });
+ })
  },
  ),
  );

netlify-plugin-cloudinary/src/index.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));
+ })
+}