@automattic/social-previews 1.0.4 → 1.1.2

package/CHANGELOG.md

@@ -1,23 +1,36 @@
 # Changelog
 
-#### v1.0.4 (2020-08-24)
+## v1.1.2 (2022-05-13)
+
+- Dependency updates and internal code cleanup.
+
+## v1.1.1 (2021-04-05)
+
+- Ensure that lengthy text doesn't overflow in the Twitter preview.
+
+## v1.1.0 (2020-09-10)
+
+- Twitter: Add previewing for attached images, videos, or quoted tweets.
+- Twitter: Add support for previewing entire threads.
+
+## v1.0.4 (2020-08-24)
 
 - Fixed Twitter styles for viewports < 600px in width
 
-#### v1.0.3 (2020-08-21)
+## v1.0.3 (2020-08-21)
 
 - Refreshed styles of Twitter, Facebook and Google previews to match their latest design.
 
-#### v1.0.2 (2020-08-03)
+## v1.0.2 (2020-08-03)
 
 - Remove `i18n-calypso` dependency by removing search preview header.
 - Strip html tags from descriptions for social previews.
 - Add helper function with enhanced regex for stripping html tags.
 
-#### v1.0.1 (2020-07-23)
+## v1.0.1 (2020-07-23)
 
 - Mark CSS and SCSS files as `sideEffects` to ensure they are not discarded during build processes tree-shaking.
 
-#### v1.0.0 (2020-07-22)
+## v1.0.0 (2020-07-22)
 
 - Initial release after extracting from Calypso.

package/README.md

@@ -49,6 +49,44 @@ import { SearchPreview } from '@automattic/social-previews';
 />;
 ```
 
+Twitter previews support the same properties for previewing a single tweet, but can also preview multiple tweets in the form of a Twitter thread. For that, the `tweets` property takes an array of tweets. Each item in this array can take additional information about the tweet, giving the preview a more native feel.
+
+```js
+import { TwitterPreview } from '@automattic/social-previews';
+
+const tweetTemplate = {
+	date: Date.now(),
+	name: 'My Account Name',
+	profileImage: 'https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png',
+	screenName: '@myAccount',
+};
+
+<TwitterPreview
+	tweets={ [
+		{
+			...tweetTemplate,
+			text: 'This is the first tweet in a thread, it only has text in it.',
+		},
+		{
+			...tweetTemplate,
+			text: 'The second tweet has some images attached, too!',
+			media: [
+				{
+					alt: 'The alt text for the first image.',
+					url: 'https://url.for.the/first/image.png',
+					type: 'image/png',
+				},
+				{
+					alt: 'The alt text for the second image.',
+					url: 'https://url.for.the/second/image.png',
+					type: 'image/png',
+				},
+			],
+		},
+	] }
+/>;
+```
+
 ## Properties
 
 There are a number of common properties used across all components:

package/dist/cjs/facebook-preview/index.js

@@ -1,93 +1,72 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FacebookPreview = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _lodash = require("lodash");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _lodash = require("lodash");
+var _react = require("react");
 
 var _helpers = require("../helpers");
 
 require("./style.scss");
 
-/**
- * External dependencies
- */
-
-/**
- * Style dependencies
- */
-var TITLE_LENGTH = 80;
-var DESCRIPTION_LENGTH = 200;
-
-var baseDomain = function baseDomain(url) {
-  return url && url.replace(/^[^/]+[/]*/, '') // strip leading protocol
-  .replace(/\/.*$/, '');
-}; // strip everything after the domain
-
-
-var facebookTitle = (0, _helpers.firstValid)((0, _helpers.shortEnough)(TITLE_LENGTH), (0, _helpers.hardTruncation)(TITLE_LENGTH));
-var facebookDescription = (0, _helpers.firstValid)((0, _helpers.shortEnough)(DESCRIPTION_LENGTH), (0, _helpers.hardTruncation)(DESCRIPTION_LENGTH));
-
-var FacebookPreview = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(FacebookPreview, _PureComponent);
-
-  var _super = (0, _createSuper2.default)(FacebookPreview);
-
-  function FacebookPreview() {
-    (0, _classCallCheck2.default)(this, FacebookPreview);
-    return _super.apply(this, arguments);
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+
+const TITLE_LENGTH = 80;
+const DESCRIPTION_LENGTH = 200;
+
+const baseDomain = url => url && url.replace(/^[^/]+[/]*/, '') // strip leading protocol
+.replace(/\/.*$/, ''); // strip everything after the domain
+
+
+const facebookTitle = (0, _helpers.firstValid)((0, _helpers.shortEnough)(TITLE_LENGTH), (0, _helpers.hardTruncation)(TITLE_LENGTH));
+const facebookDescription = (0, _helpers.firstValid)((0, _helpers.shortEnough)(DESCRIPTION_LENGTH), (0, _helpers.hardTruncation)(DESCRIPTION_LENGTH));
+
+class FacebookPreview extends _react.PureComponent {
+  render() {
+    const {
+      url,
+      type,
+      title,
+      description,
+      image,
+      author
+    } = this.props;
+    return (0, _jsxRuntime.jsx)("div", {
+      className: `facebook-preview facebook-preview__${type}`,
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: "facebook-preview__content",
+        children: [(0, _jsxRuntime.jsx)("div", {
+          className: "facebook-preview__image",
+          children: image && (0, _jsxRuntime.jsx)("img", {
+            alt: "Facebook Preview Thumbnail",
+            src: image
+          })
+        }), (0, _jsxRuntime.jsxs)("div", {
+          className: "facebook-preview__body",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: "facebook-preview__url",
+            children: (0, _lodash.compact)([baseDomain(url), author]).join(' | ')
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: "facebook-preview__title",
+            children: facebookTitle(title || '')
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: "facebook-preview__description",
+            children: facebookDescription((0, _helpers.stripHtmlTags)(description))
+          })]
+        })]
+      })
+    });
   }
 
-  (0, _createClass2.default)(FacebookPreview, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          url = _this$props.url,
-          type = _this$props.type,
-          title = _this$props.title,
-          description = _this$props.description,
-          image = _this$props.image,
-          author = _this$props.author;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "facebook-preview facebook-preview__".concat(type)
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "facebook-preview__content"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "facebook-preview__image"
-      }, image && /*#__PURE__*/_react.default.createElement("img", {
-        alt: "Facebook Preview Thumbnail",
-        src: image
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: "facebook-preview__body"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "facebook-preview__url"
-      }, (0, _lodash.compact)([baseDomain(url), author]).join(' | ')), /*#__PURE__*/_react.default.createElement("div", {
-        className: "facebook-preview__title"
-      }, facebookTitle(title || '')), /*#__PURE__*/_react.default.createElement("div", {
-        className: "facebook-preview__description"
-      }, facebookDescription((0, _helpers.stripHtmlTags)(description))))));
-    }
-  }]);
-  return FacebookPreview;
-}(_react.PureComponent);
+}
 
 exports.FacebookPreview = FacebookPreview;
 FacebookPreview.propTypes = {

package/dist/cjs/helpers.js

@@ -3,55 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stripHtmlTags = exports.firstValid = exports.hardTruncation = exports.truncatedAtSpace = exports.shortEnough = void 0;
+exports.truncatedAtSpace = exports.stripHtmlTags = exports.shortEnough = exports.hardTruncation = exports.firstValid = void 0;
 
 var _lodash = require("lodash");
 
-/**
- * External dependencies
- */
-var shortEnough = function shortEnough(limit) {
-  return function (title) {
-    return title.length <= limit ? title : false;
-  };
-};
+const shortEnough = limit => title => title.length <= limit ? title : false;
 
 exports.shortEnough = shortEnough;
 
-var truncatedAtSpace = function truncatedAtSpace(lower, upper) {
-  return function (fullTitle) {
-    var title = fullTitle.slice(0, upper);
-    var lastSpace = title.lastIndexOf(' ');
-    return lastSpace > lower && lastSpace < upper ? title.slice(0, lastSpace).concat('…') : false;
-  };
+const truncatedAtSpace = (lower, upper) => fullTitle => {
+  const title = fullTitle.slice(0, upper);
+  const lastSpace = title.lastIndexOf(' ');
+  return lastSpace > lower && lastSpace < upper ? title.slice(0, lastSpace).concat('…') : false;
 };
 
 exports.truncatedAtSpace = truncatedAtSpace;
 
-var hardTruncation = function hardTruncation(limit) {
-  return function (title) {
-    return title.slice(0, limit).concat('…');
-  };
-};
+const hardTruncation = limit => title => title.slice(0, limit).concat('…');
 
 exports.hardTruncation = hardTruncation;
 
-var firstValid = function firstValid() {
+const firstValid = function () {
   for (var _len = arguments.length, predicates = new Array(_len), _key = 0; _key < _len; _key++) {
     predicates[_key] = arguments[_key];
   }
 
-  return function (a) {
-    return (0, _lodash.find)(predicates, function (p) {
-      return false !== p(a);
-    })(a);
-  };
+  return a => (0, _lodash.find)(predicates, p => false !== p(a))(a);
 };
 
 exports.firstValid = firstValid;
 
-var stripHtmlTags = function stripHtmlTags(description) {
-  return description ? description.replace(/(<([^>]+)>)/gi, '') : '';
-};
+const stripHtmlTags = description => description ? description.replace(/(<([^>]+)>)/gi, '') : '';
 
 exports.stripHtmlTags = stripHtmlTags;

package/dist/cjs/index.js

@@ -1,26 +1,26 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "FacebookPreview", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _facebookPreview.default;
   }
 });
-Object.defineProperty(exports, "TwitterPreview", {
+Object.defineProperty(exports, "SearchPreview", {
   enumerable: true,
-  get: function get() {
-    return _twitterPreview.default;
+  get: function () {
+    return _searchPreview.default;
   }
 });
-Object.defineProperty(exports, "SearchPreview", {
+Object.defineProperty(exports, "TwitterPreview", {
   enumerable: true,
-  get: function get() {
-    return _searchPreview.default;
+  get: function () {
+    return _twitterPreview.default;
   }
 });
 

package/dist/cjs/search-preview/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,47 +9,47 @@ exports.default = SearchPreview;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _helpers = require("../helpers");
 
 require("./style.scss");
 
-/**
- * External dependencies
- */
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
-/**
- * Style dependencies
- */
-var URL_LENGTH = 68;
-var TITLE_LENGTH = 63;
-var DESCRIPTION_LENGTH = 160;
+const URL_LENGTH = 68;
+const TITLE_LENGTH = 63;
+const DESCRIPTION_LENGTH = 160;
 
-var googleUrl = function googleUrl(url) {
-  var breadcrumb = url.replace(/^[^/]+[/]*/, '').split('/').join(' › ');
-  var truncateBreadcrumb = (0, _helpers.firstValid)((0, _helpers.shortEnough)(URL_LENGTH), (0, _helpers.hardTruncation)(URL_LENGTH));
+const googleUrl = url => {
+  const breadcrumb = url.replace(/^[^/]+[/]*/, '').split('/').join(' › ');
+  const truncateBreadcrumb = (0, _helpers.firstValid)((0, _helpers.shortEnough)(URL_LENGTH), (0, _helpers.hardTruncation)(URL_LENGTH));
   return truncateBreadcrumb(breadcrumb);
 };
 
-var googleTitle = (0, _helpers.firstValid)((0, _helpers.shortEnough)(TITLE_LENGTH), (0, _helpers.truncatedAtSpace)(TITLE_LENGTH - 40, TITLE_LENGTH + 10), (0, _helpers.hardTruncation)(TITLE_LENGTH));
-var googleDescription = (0, _helpers.firstValid)((0, _helpers.shortEnough)(DESCRIPTION_LENGTH), (0, _helpers.truncatedAtSpace)(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10), (0, _helpers.hardTruncation)(DESCRIPTION_LENGTH));
+const googleTitle = (0, _helpers.firstValid)((0, _helpers.shortEnough)(TITLE_LENGTH), (0, _helpers.truncatedAtSpace)(TITLE_LENGTH - 40, TITLE_LENGTH + 10), (0, _helpers.hardTruncation)(TITLE_LENGTH));
+const googleDescription = (0, _helpers.firstValid)((0, _helpers.shortEnough)(DESCRIPTION_LENGTH), (0, _helpers.truncatedAtSpace)(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10), (0, _helpers.hardTruncation)(DESCRIPTION_LENGTH));
 
 function SearchPreview(_ref) {
-  var description = _ref.description,
-      title = _ref.title,
-      url = _ref.url;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "search-preview"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "search-preview__display"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "search-preview__url"
-  }, googleUrl(url), " \u25BE"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "search-preview__title"
-  }, googleTitle(title)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "search-preview__description"
-  }, googleDescription((0, _helpers.stripHtmlTags)(description)))));
+  let {
+    description,
+    title,
+    url
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: "search-preview",
+    children: (0, _jsxRuntime.jsxs)("div", {
+      className: "search-preview__display",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "search-preview__url",
+        children: [googleUrl(url), " \u25BE"]
+      }), (0, _jsxRuntime.jsx)("div", {
+        className: "search-preview__title",
+        children: googleTitle(title)
+      }), (0, _jsxRuntime.jsx)("div", {
+        className: "search-preview__description",
+        children: googleDescription((0, _helpers.stripHtmlTags)(description))
+      })]
+    })
+  });
 }
 
 SearchPreview.propTypes = {

package/dist/cjs/twitter-preview/index.js

@@ -1,101 +1,54 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TwitterPreview = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _helpers = require("../helpers");
+var _tweet = require("./tweet");
 
 require("./style.scss");
 
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * Style dependencies
- */
-var DESCRIPTION_LENGTH = 200;
-
-var baseDomain = function baseDomain(url) {
-  return url.replace(/^[^/]+[/]*/, '') // strip leading protocol
-  .replace(/\/.*$/, '');
-}; // strip everything after the domain
-
-
-var twitterDescription = (0, _helpers.firstValid)((0, _helpers.shortEnough)(DESCRIPTION_LENGTH), (0, _helpers.hardTruncation)(DESCRIPTION_LENGTH));
-
-var TwitterPreview = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(TwitterPreview, _PureComponent);
-
-  var _super = (0, _createSuper2.default)(TwitterPreview);
-
-  function TwitterPreview() {
-    (0, _classCallCheck2.default)(this, TwitterPreview);
-    return _super.apply(this, arguments);
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+
+class TwitterPreview extends _react.PureComponent {
+  render() {
+    // Previous versions expected passed props to be the Twitter Card details for a single tweet,
+    // rather than an array of tweets. If the tweet array isn't passed, we can construct it from
+    // the old props.
+    const tweets = this.props.tweets || [{
+      text: '',
+      media: [],
+      card: { ...this.props,
+        type: 'large_image_summary' === this.props.type ? 'summary_large_image' : this.props.type
+      },
+      date: Date.now(),
+      name: 'Account Name',
+      profileImage: 'https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png',
+      screenName: '@account'
+    }];
+    return (0, _jsxRuntime.jsx)("div", {
+      className: "twitter-preview",
+      children: tweets && tweets.map((tweet, index) => {
+        return (0, _jsxRuntime.jsx)(_tweet.Tweet, {
+          isLast: index + 1 === tweets.length,
+          ...tweet
+        }, `twitter-preview__tweet-${index}`);
+      })
+    });
   }
 
-  (0, _createClass2.default)(TwitterPreview, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          url = _this$props.url,
-          title = _this$props.title,
-          type = _this$props.type,
-          description = _this$props.description,
-          image = _this$props.image;
-      var previewImageStyle = {
-        backgroundImage: 'url(' + image + ')'
-      };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "twitter-preview"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "twitter-preview__".concat(type)
-      }, image && /*#__PURE__*/_react.default.createElement("div", {
-        className: "twitter-preview__image",
-        style: previewImageStyle
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: "twitter-preview__body"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "twitter-preview__title"
-      }, title), /*#__PURE__*/_react.default.createElement("div", {
-        className: "twitter-preview__description"
-      }, twitterDescription((0, _helpers.stripHtmlTags)(description))), /*#__PURE__*/_react.default.createElement("div", {
-        className: "twitter-preview__url"
-      }, baseDomain(url || '')))));
-    }
-  }]);
-  return TwitterPreview;
-}(_react.PureComponent);
+}
 
 exports.TwitterPreview = TwitterPreview;
 TwitterPreview.propTypes = {
-  url: _propTypes.default.string,
-  title: _propTypes.default.string,
-  type: _propTypes.default.string,
-  description: _propTypes.default.string,
-  image: _propTypes.default.string
+  tweets: _propTypes.default.array
 };
 var _default = TwitterPreview;
 exports.default = _default;