next-cloudinary 0.2.0 → 0.3.0

package/dist/next-cloudinary.umd.js

@@ -1,11 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('next/image'), require('@cloudinary/url-gen'), require('react/jsx-runtime'), require('react'), require('next/script')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'next/image', '@cloudinary/url-gen', 'react/jsx-runtime', 'react', 'next/script'], factory) :
-  (global = global || self, factory(global.nextCloudinary = {}, global.Image, global.urlGen, global.jsxRuntime, global.react, global.Script));
-})(this, (function (exports, Image, urlGen, jsxRuntime, react, Script) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('next/image'), require('@cloudinary/url-gen'), require('react/jsx-runtime'), require('next/head'), require('react'), require('next/script')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'next/image', '@cloudinary/url-gen', 'react/jsx-runtime', 'next/head', 'react', 'next/script'], factory) :
+  (global = global || self, factory(global.nextCloudinary = {}, global.Image, global.urlGen, global.jsxRuntime, global.Head, global.react, global.Script));
+})(this, (function (exports, Image, urlGen, jsxRuntime, Head, react, Script) {
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
+  var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
   var Script__default = /*#__PURE__*/_interopDefaultLegacy(Script);
 
   function _extends() {
@@ -40,96 +41,32 @@
     return target;
   }
 
-  function _readOnlyError(name) {
-    throw new TypeError("\"" + name + "\" is read-only");
-  }
-
-  var cld$1 = new urlGen.Cloudinary({
-    cloud: {
-      cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
-    },
-    url: {
-      // Used to avoid issues with SSR particularly for the blurred placeholder
-      analytics: false
-    }
-  });
-  /**
-   * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
-   * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
-   *
-   * @param {string} src The cloudiary url or public id.
-   *
-   * @return {string} The images public id
-   */
-
-  function getPublicId(src) {
-    if (src.includes('res.cloudinary.com')) {
-      var regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
-      var regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
-      var withTransformations = src.match(regexWithTransformations);
-      var withoutTransformations = src.match(regexWithoutTransformations);
-
-      if (withTransformations) {
-        return withTransformations[withTransformations.length - 1];
-      } else if (withoutTransformations) {
-        return withoutTransformations[withoutTransformations.length - 1];
-      } else {
-        console.warn("Not possible to retrieve the publicUrl from " + src + ", make sure it's a valid cloudinary image url.");
-      }
-    }
-
-    return src;
-  }
-  /**
-   * createPlaceholderUrl
-   */
-
-  function createPlaceholderUrl(_ref) {
-    var src = _ref.src,
-        placeholder = _ref.placeholder;
-    var cldImage = cld$1.image(src).resize('c_limit,w_100').delivery('q_1').format('auto');
-
-    if (placeholder === 'grayscale') {
-      cldImage.effect('e_grayscale');
-    }
-
-    if (placeholder.includes('color:')) {
-      var color = placeholder.split(':').splice(1).join(':');
-      cldImage.effect('e_grayscale');
-      cldImage.effect("e_colorize:60,co_" + color);
-    }
-
-    return cldImage.toURL();
-  }
-
   var cropsGravityAuto = ['crop', 'fill', 'lfill', 'fill_pad', 'thumb'];
   var props$6 = ['crop', 'gravity'];
   function plugin$6(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         cldImage = _ref.cldImage,
-        options = _ref.options,
-        cldOptions = _ref.cldOptions;
+        options = _ref.options;
 
     var width = options.width,
-        height = options.height;
-    var _cldOptions$crop = cldOptions.crop,
-        crop = _cldOptions$crop === void 0 ? 'limit' : _cldOptions$crop,
-        gravity = cldOptions.gravity;
+        height = options.height,
+        _options$crop = options.crop,
+        crop = _options$crop === void 0 ? 'limit' : _options$crop;
     var transformationString = "c_" + crop + ",w_" + width;
 
-    if (!gravity && cropsGravityAuto.includes(crop)) {
-      _readOnlyError("gravity");
+    if (!options.gravity && cropsGravityAuto.includes(crop)) {
+      options.gravity = 'auto';
     }
 
     if (!['limit'].includes(crop)) {
       transformationString = transformationString + ",h_" + height;
     }
 
-    if (gravity) {
-      if (gravity === 'auto' && !cropsGravityAuto.includes(crop)) {
+    if (options.gravity) {
+      if (options.gravity === 'auto' && !cropsGravityAuto.includes(crop)) {
         console.warn('Auto gravity can only be used with crop, fill, lfill, fill_pad or thumb. Not applying gravity.');
       } else {
-        transformationString = transformationString + ",g_" + gravity;
+        transformationString = transformationString + ",g_" + options.gravity;
       }
     }
 
@@ -194,20 +131,16 @@
   function plugin$5(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         cldImage = _ref.cldImage,
-        cldOptions = _ref.cldOptions;
+        options = _ref.options;
 
     params.forEach(function (key) {
       var prop = key.prop || key;
       var effect = key.effect || key;
 
-      if (prop === 'oilPaint' && cldOptions[prop]) {
-        console.log('cldOptions[prop]', cldOptions[prop]);
-      }
-
-      if (cldOptions[prop] === true) {
+      if (options[prop] === true) {
         cldImage.effect("e_" + effect);
-      } else if (typeof cldOptions[prop] === 'string') {
-        cldImage.effect("e_" + effect + ":" + cldOptions[prop]);
+      } else if (typeof options[prop] === 'string') {
+        cldImage.effect("e_" + effect + ":" + options[prop]);
       }
     });
   }
@@ -272,27 +205,55 @@
     }
   };
 
-  var _excluded$2 = ["publicId", "position", "text", "effects"];
-  var props$4 = ['overlays'];
+  var _excluded$3 = ["publicId", "position", "text", "effects"];
+  var props$4 = ['text', 'overlays'];
+  var DEFAULT_TEXT_OPTIONS = {
+    color: 'black',
+    fontFamily: 'Arial',
+    fontSize: 200,
+    fontWeight: 'bold'
+  };
   function plugin$4(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         cldImage = _ref.cldImage,
-        cldOptions = _ref.cldOptions;
+        options = _ref.options;
 
-    var _cldOptions$overlays = cldOptions.overlays,
-        overlays = _cldOptions$overlays === void 0 ? [] : _cldOptions$overlays;
+    var text$1 = options.text,
+        _options$overlays = options.overlays,
+        overlays = _options$overlays === void 0 ? [] : _options$overlays;
     var type = 'overlay';
     var typeQualifier = 'l';
-    overlays.forEach(function (_ref2) {
+
+    if (Array.isArray(overlays)) {
+      overlays.forEach(applyOverlay);
+    }
+
+    if (typeof text$1 === 'string') {
+      applyOverlay({
+        text: _extends({}, DEFAULT_TEXT_OPTIONS, {
+          text: text$1
+        })
+      });
+    } else if (typeof text$1 === 'object') {
+      applyOverlay({
+        text: _extends({}, DEFAULT_TEXT_OPTIONS, text$1)
+      });
+    }
+    /**
+     * applyOverlay
+     */
+
+
+    function applyOverlay(_ref2) {
       var publicId = _ref2.publicId,
           position$1 = _ref2.position,
           text$1 = _ref2.text,
           _ref2$effects = _ref2.effects,
           layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
-          options = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+          options = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
 
       var hasPublicId = typeof publicId === 'string';
-      var hasText = typeof text$1 === 'object';
+      var hasText = typeof text$1 === 'object' || typeof text$1 === 'string';
       var hasPosition = typeof position$1 === 'object';
 
       if (!hasPublicId && !hasText) {
@@ -330,6 +291,12 @@
       }); // Text styling
 
       if (hasText) {
+        if (typeof text$1 === 'string') {
+          text$1 = _extends({}, DEFAULT_TEXT_OPTIONS, {
+            text: text$1
+          });
+        }
+
         var textTransformations = [];
         Object.keys(text$1).forEach(function (key) {
           if (!text[key]) return;
@@ -358,7 +325,7 @@
 
       layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
 
-      layerTransformation = layerTransformation + "/fl_layer_apply";
+      layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
 
       if (applied.length > 0) {
         layerTransformation = layerTransformation + "," + applied.join(',');
@@ -366,12 +333,13 @@
 
 
       cldImage.addTransformation(layerTransformation);
-    });
+    }
   }
 
   var overlaysPlugin = {
     __proto__: null,
     props: props$4,
+    DEFAULT_TEXT_OPTIONS: DEFAULT_TEXT_OPTIONS,
     plugin: plugin$4
   };
 
@@ -379,10 +347,10 @@
   function plugin$3(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         cldImage = _ref.cldImage,
-        cldOptions = _ref.cldOptions;
+        options = _ref.options;
 
-    var _cldOptions$rawTransf = cldOptions.rawTransformations,
-        rawTransformations = _cldOptions$rawTransf === void 0 ? [] : _cldOptions$rawTransf;
+    var _options$rawTransform = options.rawTransformations,
+        rawTransformations = _options$rawTransform === void 0 ? [] : _options$rawTransform;
     rawTransformations.forEach(function (transformation) {
       cldImage.addTransformation(transformation);
     });
@@ -398,10 +366,10 @@
   function plugin$2(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         cldImage = _ref.cldImage,
-        cldOptions = _ref.cldOptions;
+        options = _ref.options;
 
-    var _cldOptions$removeBac = cldOptions.removeBackground,
-        removeBackground = _cldOptions$removeBac === void 0 ? false : _cldOptions$removeBac;
+    var _options$removeBackgr = options.removeBackground,
+        removeBackground = _options$removeBackgr === void 0 ? false : _options$removeBackgr;
 
     if (removeBackground) {
       cldImage.effect('e_background_removal');
@@ -414,23 +382,50 @@
     plugin: plugin$2
   };
 
-  var _excluded$1 = ["publicId", "type", "position", "text", "effects"];
-  var props$1 = ['underlays'];
+  var _excluded$2 = ["publicId", "type", "position", "text", "effects"];
+  var props$1 = ['underlay', 'underlays'];
   function plugin$1(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         cldImage = _ref.cldImage,
-        cldOptions = _ref.cldOptions;
+        options = _ref.options;
 
-    var _cldOptions$underlays = cldOptions.underlays,
-        underlays = _cldOptions$underlays === void 0 ? [] : _cldOptions$underlays;
+    var underlay = options.underlay,
+        _options$underlays = options.underlays,
+        underlays = _options$underlays === void 0 ? [] : _options$underlays;
     var typeQualifier = 'u';
-    underlays.forEach(function (_ref2) {
+
+    if (Array.isArray(underlays)) {
+      underlays.forEach(applyUnderlay);
+    }
+
+    if (typeof underlay === 'string') {
+      var underlayOptions = {
+        publicId: underlay,
+        crop: 'fill'
+      };
+
+      if (options.width) {
+        underlayOptions.width = options.width;
+      }
+
+      if (options.height) {
+        underlayOptions.height = options.height;
+      }
+
+      applyUnderlay(underlayOptions);
+    }
+    /**
+     * applyUnderlay
+     */
+
+
+    function applyUnderlay(_ref2) {
       var publicId = _ref2.publicId,
           type = _ref2.type,
           position$1 = _ref2.position,
           _ref2$effects = _ref2.effects,
           layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
-          options = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+          options = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
 
       var hasPublicId = typeof publicId === 'string';
       var hasPosition = typeof position$1 === 'object';
@@ -473,7 +468,7 @@
 
       layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
 
-      layerTransformation = layerTransformation + "/fl_layer_apply";
+      layerTransformation = layerTransformation + "/fl_layer_apply,fl_no_overflow";
 
       if (applied.length > 0) {
         layerTransformation = layerTransformation + "," + applied.join(',');
@@ -481,7 +476,7 @@
 
 
       cldImage.addTransformation(layerTransformation);
-    });
+    }
   }
 
   var underlaysPlugin = {
@@ -494,11 +489,11 @@
   function plugin(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         cldImage = _ref.cldImage,
-        cldOptions = _ref.cldOptions;
+        options = _ref.options;
 
-    var _cldOptions$zoompan = cldOptions.zoompan,
-        zoompan = _cldOptions$zoompan === void 0 ? false : _cldOptions$zoompan;
-    var options = {};
+    var _options$zoompan = options.zoompan,
+        zoompan = _options$zoompan === void 0 ? false : _options$zoompan;
+    var overrides = {};
 
     if (zoompan === true) {
       cldImage.effect('e_zoompan');
@@ -531,11 +526,11 @@
     }
 
     if (zoompan !== false) {
-      options.format = 'gif';
+      overrides.format = 'gif';
     }
 
     return {
-      options: options
+      options: overrides
     };
   }
 
@@ -545,15 +540,18 @@
     plugin: plugin
   };
 
-  var cld;
   var transformationPlugins = [// Background Removal must always come first
   removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, underlaysPlugin, zoompanPlugin, // Raw transformations needs to be last simply to make sure
   // it's always expected to applied the same way
   rawTransformationsPlugin];
-  function cloudinaryLoader(defaultOptions, cldOptions, cldConfig) {
-    if (cldConfig === void 0) {
-      cldConfig = {};
-    }
+  var cld;
+  /**
+   * constructCloudinaryUrl
+   */
+
+  function constructCloudinaryUrl(_ref) {
+    var options = _ref.options,
+        config = _ref.config;
 
     if (!cld) {
       cld = new urlGen.Cloudinary(_extends({
@@ -564,31 +562,98 @@
           // Used to avoid issues with SSR particularly for the blurred placeholder
           analytics: false
         }
-      }, cldConfig));
+      }, config));
     }
 
-    var options = _extends({
-      format: 'auto',
-      quality: 'auto'
-    }, defaultOptions);
-
     var publicId = getPublicId(options.src);
     var cldImage = cld.image(publicId);
-    transformationPlugins.forEach(function (_ref) {
-      var plugin = _ref.plugin;
+    transformationPlugins.forEach(function (_ref2) {
+      var plugin = _ref2.plugin;
 
-      var _ref2 = plugin({
+      var _ref3 = plugin({
         cldImage: cldImage,
-        options: options,
-        cldOptions: cldOptions
+        options: options
       }) || {},
-          pluginOptions = _ref2.options;
+          pluginOptions = _ref3.options;
 
       if (pluginOptions != null && pluginOptions.format) {
         options.format = pluginOptions.format;
       }
     });
-    return cldImage.format(options.format).delivery("q_" + options.quality).toURL();
+    return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery("q_" + (options.quality || 'auto')).toURL();
+  }
+  /**
+   * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
+   * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
+   *
+   * @param {string} src The cloudiary url or public id.
+   *
+   * @return {string} The images public id
+   */
+
+  function getPublicId(src) {
+    if (typeof src !== 'string') {
+      throw new Error("Invalid src of type " + typeof src);
+    }
+
+    if (src.includes('res.cloudinary.com')) {
+      var regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
+      var regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
+      var withTransformations = src.match(regexWithTransformations);
+      var withoutTransformations = src.match(regexWithoutTransformations);
+
+      if (withTransformations) {
+        return withTransformations[withTransformations.length - 1];
+      } else if (withoutTransformations) {
+        return withoutTransformations[withoutTransformations.length - 1];
+      } else {
+        console.warn("Not possible to retrieve the publicUrl from " + src + ", make sure it's a valid cloudinary image url.");
+      }
+    }
+
+    return src;
+  }
+  /**
+   * createPlaceholderUrl
+   */
+
+  function createPlaceholderUrl(_ref4) {
+    var src = _ref4.src,
+        _ref4$placeholder = _ref4.placeholder,
+        placeholder = _ref4$placeholder === void 0 ? true : _ref4$placeholder,
+        config = _ref4.config;
+    var rawTransformations = [];
+
+    if (placeholder === 'grayscale') {
+      rawTransformations.push('e_grayscale');
+    }
+
+    if (typeof placeholder === 'string' && placeholder.includes('color:')) {
+      var color = placeholder.split(':').splice(1).join(':');
+      rawTransformations.push('e_grayscale');
+      rawTransformations.push("e_colorize:60,co_" + color);
+    }
+
+    return constructCloudinaryUrl({
+      options: {
+        src: src,
+        width: 100,
+        quality: 1,
+        rawTransformations: rawTransformations
+      },
+      config: config
+    });
+  }
+
+  function cloudinaryLoader(defaultOptions, cldOptions, cldConfig) {
+    if (cldConfig === void 0) {
+      cldConfig = {};
+    }
+
+    return constructCloudinaryUrl({
+      options: _extends({}, defaultOptions, cldOptions),
+      config: cldConfig
+    });
   }
 
   var CldImage = function CldImage(props) {
@@ -647,6 +712,58 @@
     }));
   };
 
+  var _excluded$1 = ["excludeTags", "twitterTitle"];
+  var IMAGE_WIDTH = 2400;
+  var IMAGE_HEIGHT = 1200;
+  var TWITTER_CARD = 'summary_large_image';
+
+  var CldOgImage = function CldOgImage(_ref) {
+    var _ref$excludeTags = _ref.excludeTags,
+        excludeTags = _ref$excludeTags === void 0 ? [] : _ref$excludeTags,
+        twitterTitle = _ref.twitterTitle,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+    var options = _extends({}, props, {
+      width: props.width || IMAGE_WIDTH,
+      height: props.height || IMAGE_HEIGHT,
+      crop: props.crop || 'fill',
+      gravity: props.gravity || 'center'
+    });
+
+    var ogImageUrl = constructCloudinaryUrl({
+      options: options
+    }); // We need to include the tags within the Next.js Head component rather than
+    // direcly adding them inside of the Head otherwise we get unexpected results
+
+    return /*#__PURE__*/jsxRuntime.jsxs(Head__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "og:image",
+        content: ogImageUrl
+      }), /*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "og:image:secure_url",
+        content: ogImageUrl
+      }), /*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "og:image:width",
+        content: options.width
+      }), /*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "og:image:height",
+        content: options.height
+      }), options.alt && /*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "og:image:alt",
+        content: options.alt
+      }), !excludeTags.includes('twitter:title') && /*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "twitter:title",
+        content: twitterTitle || ' '
+      }), /*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "twitter:card",
+        content: TWITTER_CARD
+      }), /*#__PURE__*/jsxRuntime.jsx("meta", {
+        property: "twitter:image",
+        content: ogImageUrl
+      })]
+    });
+  };
+
   var CldUploadWidget = function CldUploadWidget(_ref) {
     var children = _ref.children,
         onUpload = _ref.onUpload,
@@ -778,6 +895,7 @@
   };
 
   exports.CldImage = CldImage;
+  exports.CldOgImage = CldOgImage;
   exports.CldUploadButton = CldUploadButton;
   exports.CldUploadWidget = CldUploadWidget;
   exports.cloudinaryLoader = cloudinaryLoader;