feat: Overlay Effects (#88)

# Description

Adds the ability to use multiply, screen, and overlay as effects on an
overlay

Usage:
```
overlays={[
  {
    ...,
    appliedEffects: [{ screen: true }]
  }
]}
```

## Issue Ticket Number

Fixes #85 

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/colbyfayock/next-cloudinary/issues/<ISSUE_NUMBER> -->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [x] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [x] I have created an
[issue](https://github.com/colbyfayock/next-cloudinary/issues) ticket
for this PR
- [x] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/colbyfayock/next-cloudinary/pulls) for the
same update/change?
- [x] I have performed a self-review of my own code
- [x] I have run tests locally to ensure they all pass
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes needed to the documentation

docs/pages/components/cldimage/configuration.mdx

@@ -68,16 +68,19 @@ import OgImage from '../../../components/OgImage';
 | gradientFade       | bool/string | `true`, `"symmetric:10,x_0.2,y_0.4"`                 |
 | grayscale          | bool        | `true`                                               |
 | improve            | bool/string | `true`, `"50"`, `"indoor"`                           |
+| multiply           | bool        | `true`                                               |
 | negate             | bool        | `true`                                               |
 | oilPaint           | bool/string | `true`, `"40"`                                       |
 | opacity            | number/string | `40`, `"40"`                                       |
 | outline            | bool/string | `true`, `"40"`, `"outer:15:200"`                     |
+| overlay            | bool        | `true`                                               |
 | pixelate           | bool/string | `true`, `"20"`                                       |
 | pixelateFaces      | bool/string | `true`, `"20"`                                       |
 | pixelateRegion     | bool/string | `true`, `"35,h_425,w_550,x_600,y_400"`               |
 | redeye             | bool/string | `true`                                               |
 | replaceColor       | string      | `"saddlebrown"`, `"2F4F4F:20"`, `"silver:55:89b8ed"` |
 | saturation         | bool/string | `true`, `"70"`                                       |
+| screen             | bool        | `true`                                               |
 | sepia              | bool/string | `true`, `"50"`                                       |
 | shadow             | bool/string | `true`, `"50,x_-15,y_15"`                            |
 | sharpen            | bool/string | `true`, `"100"`                                      |
@@ -97,6 +100,7 @@ The `overlays` prop is an array of objects with the following configuration opti
 
 | Property Name    | Type          | Example                              |
 |------------------|---------------|--------------------------------------|
+| appliedEffects   | array         | Same as effects, added as applied transformation |
 | effects          | array         | See Below                            |
 | position         | object        | See Below                            |
 | publicId         | string        | `"thumb"`                            |

docs/pages/components/cldimage/examples.mdx

@@ -400,6 +400,149 @@ import ImageGrid from '../../../components/ImageGrid';
     }]}
     ```
   </li>
+  <li>
+    <CldImage
+      width="960"
+      height="600"
+      crop="fill"
+      src={`${process.env.EXAMPLES_DIRECTORY}/white`}
+      colorize="100,co_darkviolet"
+      overlays={[{
+        publicId: `images/earth`,
+        effects: [
+          {
+            crop: 'fill',
+            gravity: 'auto',
+            width: 960,
+            height: 600
+          }
+        ],
+        appliedEffects: [
+          {
+            multiply: true
+          }
+        ]
+      }]}
+      alt=""
+    />
+
+    ### Overlay with Multiply Effect
+
+    ```jsx
+    overlays={[{
+      publicId: `images/earth`,
+      effects: [
+        {
+          crop: 'fill',
+          gravity: 'auto',
+          width: 960,
+          height: 600
+        }
+      ],
+      appliedEffects: [
+        {
+          multiply: true
+        }
+      ]
+    }]}
+    ```
+  </li>
+  <li>
+    <CldImage
+      width="960"
+      height="600"
+      crop="fill"
+      src={`${process.env.EXAMPLES_DIRECTORY}/white`}
+      colorize="100,co_darkviolet"
+      overlays={[{
+        publicId: `images/earth`,
+        effects: [
+          {
+            crop: 'fill',
+            gravity: 'auto',
+            width: 960,
+            height: 600
+          }
+        ],
+        appliedEffects: [
+          {
+            screen: true
+          }
+        ]
+      }]}
+      sizes="(max-width: 480px) 100vw, 50vw"
+      alt=""
+    />
+
+    ### Overlay with Screen Effect
+
+    ```jsx
+    overlays={[{
+      publicId: `images/earth`,
+      effects: [
+        {
+          crop: 'fill',
+          gravity: 'auto',
+          width: 960,
+          height: 600
+        }
+      ],
+      appliedEffects: [
+        {
+          screen: true
+        }
+      ]
+    }]}
+    ```
+  </li>
+  <li>
+    <CldImage
+      width="960"
+      height="600"
+      crop="fill"
+      src={`${process.env.EXAMPLES_DIRECTORY}/white`}
+      colorize="100,co_darkviolet"
+      overlays={[{
+        publicId: `images/earth`,
+        effects: [
+          {
+            crop: 'fill',
+            gravity: 'auto',
+            width: 960,
+            height: 600
+          }
+        ],
+        appliedEffects: [
+          {
+            overlay: true
+          }
+        ]
+      }]}
+      sizes="(max-width: 480px) 100vw, 50vw"
+      alt=""
+    />
+
+    ### Overlay with Overlay Effect
+
+    ```jsx
+    overlays={[{
+      publicId: `images/earth`,
+      effects: [
+        {
+          crop: 'fill',
+          gravity: 'auto',
+          width: 960,
+          height: 600
+        }
+      ],
+      appliedEffects: [
+        {
+          overlay: true
+        }
+      ]
+    }]}
+    ```
+  </li>
 </ImageGrid>
 
 ## Image Underlays

next-cloudinary/src/constants/qualifiers.js

@@ -158,6 +158,10 @@ export const effects = {
     prefix: 'e',
     qualifier: 'improve',
   },
+  multiply: {
+    prefix: 'e',
+    qualifier: 'multiply',
+  },
   negate: {
     prefix: 'e',
     qualifier: 'negate',
@@ -173,6 +177,10 @@ export const effects = {
     prefix: 'e',
     qualifier: 'outline',
   },
+  overlay: {
+    prefix: 'e',
+    qualifier: 'overlay',
+  },
   pixelate: {
     prefix: 'e',
     qualifier: 'pixelate',
@@ -197,6 +205,10 @@ export const effects = {
     prefix: 'e',
     qualifier: 'saturation',
   },
+  screen: {
+    prefix: 'e',
+    qualifier: 'screen',
+  },
   sepia: {
     prefix: 'e',
     qualifier: 'sepia',

next-cloudinary/src/lib/cloudinary.js

@@ -126,7 +126,7 @@ export function getPublicId(src) {
  * @return {array} The array of transformations
  */
 
- export function getTransformations(src, preserveTransformations) {
+export function getTransformations(src, preserveTransformations) {
   if (typeof src !== "string") {
     throw new Error(`Invalid src of type ${typeof src}`);
   }
@@ -201,3 +201,27 @@ export async function pollForProcessingImage(options) {
   }
   return true;
 }
+
+/**
+ * constructTransformation
+ */
+
+export function constructTransformation({ prefix, qualifier, value }) {
+  let transformation = '';
+
+  if ( prefix ) {
+    transformation = `${prefix}_`;
+  }
+
+  if ( value === true || value === 'true' ) {
+    return `${transformation}${qualifier}`;
+  }
+
+  if ( typeof value === 'string' || typeof value === 'number' ) {
+    if ( prefix ) {
+      return `${transformation}${qualifier}:${value}`;
+    } else {
+      return `${qualifier}_${value}`;
+    }
+  }
+}

next-cloudinary/src/plugins/effects.js

@@ -1,4 +1,5 @@
 import { effects as qualifiersEffects } from '../constants/qualifiers';
+import { constructTransformation } from '../lib/cloudinary';
 
 export const props = [...Object.keys(qualifiersEffects), 'effects'];
 
@@ -24,33 +25,12 @@ export function plugin({ cldImage, options } = {}) {
     });
   }
 
-  /**
-   * constructEffect
-   */
-
-  function constructEffect({ effect, value }) {
-    const { prefix, qualifier } = effect;
-      let transformation = '';
-
-      if ( prefix ) {
-        transformation = `${prefix}_`;
-      }
-
-      if ( value === true ) {
-        return `${transformation}${qualifier}`;
-      } else if ( typeof value === 'string' || typeof value === 'number' ) {
-        if ( prefix ) {
-          return `${transformation}${qualifier}:${value}`;
-        } else {
-          return `${qualifier}_${value}`;
-        }
-      }
-  }
-
   function constructTransformationString({ effects, options }) {
     return Object.keys(effects).map(key => {
-      return constructEffect({
-        effect: effects[key],
+      const { prefix, qualifier } = effects[key];
+      return constructTransformation({
+        qualifier,
+        prefix,
         value: options[key]
       });
     })