next-cloudinary 0.2.0 → 0.3.0

package/README.md

@@ -13,7 +13,7 @@
 ######
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 # Cloudinary Next.js Component
@@ -292,6 +292,8 @@ See the examples above under Overlays to learn more about the available configur
     <tr>
       <td align="center"><a href="http://joanleon.dev"><img src="https://avatars.githubusercontent.com/u/1307927?v=4?s=100" width="100px;" alt="Joan León"/><br /><sub><b>Joan León</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=nucliweb" title="Documentation">📖</a></td>
       <td align="center"><a href="http://www.timbenniks.dev"><img src="https://avatars.githubusercontent.com/u/121096?v=4?s=100" width="100px;" alt="Tim Benniks"/><br /><sub><b>Tim Benniks</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=timbenniks" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-cloudinary/commits?author=timbenniks" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/csgochan"><img src="https://avatars.githubusercontent.com/u/116420257?v=4?s=100" width="100px;" alt="csgochan"/><br /><sub><b>csgochan</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=csgochan" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/codingis4noobs2"><img src="https://avatars.githubusercontent.com/u/87560178?v=4?s=100" width="100px;" alt="codingis4noobs2"/><br /><sub><b>codingis4noobs2</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=codingis4noobs2" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-cloudinary/commits?author=codingis4noobs2" title="Tests">⚠️</a></td>
     </tr>
   </tbody>
 </table>

package/dist/next-cloudinary.js

@@ -1,12 +1,14 @@
 var Image = require('next/image');
 var urlGen = require('@cloudinary/url-gen');
 var jsxRuntime = require('react/jsx-runtime');
+var Head = require('next/head');
 var react = require('react');
 var Script = require('next/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() {
@@ -41,96 +43,32 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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;
     }
   }
 
@@ -195,20 +133,16 @@ var props$5 = params.map(function (param) {
 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]);
     }
   });
 }
@@ -273,27 +207,55 @@ var text = {
   }
 };
 
-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) {
@@ -331,6 +293,12 @@ function plugin$4(_temp) {
     }); // 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;
@@ -359,7 +327,7 @@ function plugin$4(_temp) {
 
     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(',');
@@ -367,12 +335,13 @@ function plugin$4(_temp) {
 
 
     cldImage.addTransformation(layerTransformation);
-  });
+  }
 }
 
 var overlaysPlugin = {
   __proto__: null,
   props: props$4,
+  DEFAULT_TEXT_OPTIONS: DEFAULT_TEXT_OPTIONS,
   plugin: plugin$4
 };
 
@@ -380,10 +349,10 @@ var props$3 = ['rawTransformations'];
 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);
   });
@@ -399,10 +368,10 @@ var props$2 = ['removeBackground'];
 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');
@@ -415,23 +384,50 @@ var removeBackgroundPlugin = {
   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';
@@ -474,7 +470,7 @@ function plugin$1(_temp) {
 
     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(',');
@@ -482,7 +478,7 @@ function plugin$1(_temp) {
 
 
     cldImage.addTransformation(layerTransformation);
-  });
+  }
 }
 
 var underlaysPlugin = {
@@ -495,11 +491,11 @@ var props = ['zoompan'];
 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');
@@ -532,11 +528,11 @@ function plugin(_temp) {
   }
 
   if (zoompan !== false) {
-    options.format = 'gif';
+    overrides.format = 'gif';
   }
 
   return {
-    options: options
+    options: overrides
   };
 }
 
@@ -546,15 +542,18 @@ var zoompanPlugin = {
   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({
@@ -565,31 +564,98 @@ function cloudinaryLoader(defaultOptions, cldOptions, cldConfig) {
         // 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) {
@@ -648,6 +714,58 @@ var CldImage = function CldImage(props) {
   }));
 };
 
+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,
@@ -779,6 +897,7 @@ var CldUploadButton = function CldUploadButton(_ref) {
 };
 
 exports.CldImage = CldImage;
+exports.CldOgImage = CldOgImage;
 exports.CldUploadButton = CldUploadButton;
 exports.CldUploadWidget = CldUploadWidget;
 exports.cloudinaryLoader = cloudinaryLoader;