@automattic/social-previews 1.0.4 → 1.1.2

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

@@ -1,75 +1,57 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
 import { compact } from 'lodash';
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 import { firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
-/**
- * Style dependencies
- */
-
 import './style.scss';
-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 = firstValid(shortEnough(TITLE_LENGTH), hardTruncation(TITLE_LENGTH));
-var facebookDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), hardTruncation(DESCRIPTION_LENGTH));
-export var FacebookPreview = /*#__PURE__*/function (_PureComponent) {
-  _inherits(FacebookPreview, _PureComponent);
-
-  var _super = _createSuper(FacebookPreview);
-
-  function FacebookPreview() {
-    _classCallCheck(this, FacebookPreview);
-
-    return _super.apply(this, arguments);
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs } from "@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 = firstValid(shortEnough(TITLE_LENGTH), hardTruncation(TITLE_LENGTH));
+const facebookDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), hardTruncation(DESCRIPTION_LENGTH));
+export class FacebookPreview extends PureComponent {
+  render() {
+    const {
+      url,
+      type,
+      title,
+      description,
+      image,
+      author
+    } = this.props;
+    return _jsx("div", {
+      className: `facebook-preview facebook-preview__${type}`,
+      children: _jsxs("div", {
+        className: "facebook-preview__content",
+        children: [_jsx("div", {
+          className: "facebook-preview__image",
+          children: image && _jsx("img", {
+            alt: "Facebook Preview Thumbnail",
+            src: image
+          })
+        }), _jsxs("div", {
+          className: "facebook-preview__body",
+          children: [_jsx("div", {
+            className: "facebook-preview__url",
+            children: compact([baseDomain(url), author]).join(' | ')
+          }), _jsx("div", {
+            className: "facebook-preview__title",
+            children: facebookTitle(title || '')
+          }), _jsx("div", {
+            className: "facebook-preview__description",
+            children: facebookDescription(stripHtmlTags(description))
+          })]
+        })]
+      })
+    });
   }
 
-  _createClass(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.createElement("div", {
-        className: "facebook-preview facebook-preview__".concat(type)
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "facebook-preview__content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "facebook-preview__image"
-      }, image && /*#__PURE__*/React.createElement("img", {
-        alt: "Facebook Preview Thumbnail",
-        src: image
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "facebook-preview__body"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "facebook-preview__url"
-      }, compact([baseDomain(url), author]).join(' | ')), /*#__PURE__*/React.createElement("div", {
-        className: "facebook-preview__title"
-      }, facebookTitle(title || '')), /*#__PURE__*/React.createElement("div", {
-        className: "facebook-preview__description"
-      }, facebookDescription(stripHtmlTags(description))))));
-    }
-  }]);
-
-  return FacebookPreview;
-}(PureComponent);
+}
 FacebookPreview.propTypes = {
   url: PropTypes.string,
   type: PropTypes.string,

package/dist/esm/helpers.js

@@ -1,35 +1,16 @@
-/**
- * External dependencies
- */
 import { find } from 'lodash';
-export var shortEnough = function shortEnough(limit) {
-  return function (title) {
-    return title.length <= limit ? title : false;
-  };
+export const shortEnough = limit => title => title.length <= limit ? title : false;
+export 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;
 };
-export 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;
-  };
-};
-export var hardTruncation = function hardTruncation(limit) {
-  return function (title) {
-    return title.slice(0, limit).concat('…');
-  };
-};
-export var firstValid = function firstValid() {
+export const hardTruncation = limit => title => title.slice(0, limit).concat('…');
+export 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 find(predicates, function (p) {
-      return false !== p(a);
-    })(a);
-  };
+  return a => find(predicates, p => false !== p(a))(a);
 };
-export var stripHtmlTags = function stripHtmlTags(description) {
-  return description ? description.replace(/(<([^>]+)>)/gi, '') : '';
-};
+export const stripHtmlTags = description => description ? description.replace(/(<([^>]+)>)/gi, '') : '';

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

@@ -1,41 +1,42 @@
-/**
- * External dependencies
- */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { firstValid, hardTruncation, shortEnough, truncatedAtSpace, stripHtmlTags } from '../helpers';
-/**
- * Style dependencies
- */
-
 import './style.scss';
-var URL_LENGTH = 68;
-var TITLE_LENGTH = 63;
-var DESCRIPTION_LENGTH = 160;
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+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 = firstValid(shortEnough(URL_LENGTH), hardTruncation(URL_LENGTH));
+const googleUrl = url => {
+  const breadcrumb = url.replace(/^[^/]+[/]*/, '').split('/').join(' › ');
+  const truncateBreadcrumb = firstValid(shortEnough(URL_LENGTH), hardTruncation(URL_LENGTH));
   return truncateBreadcrumb(breadcrumb);
 };
 
-var googleTitle = firstValid(shortEnough(TITLE_LENGTH), truncatedAtSpace(TITLE_LENGTH - 40, TITLE_LENGTH + 10), hardTruncation(TITLE_LENGTH));
-var googleDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), truncatedAtSpace(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10), hardTruncation(DESCRIPTION_LENGTH));
+const googleTitle = firstValid(shortEnough(TITLE_LENGTH), truncatedAtSpace(TITLE_LENGTH - 40, TITLE_LENGTH + 10), hardTruncation(TITLE_LENGTH));
+const googleDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), truncatedAtSpace(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10), hardTruncation(DESCRIPTION_LENGTH));
 export default function SearchPreview(_ref) {
-  var description = _ref.description,
-      title = _ref.title,
-      url = _ref.url;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "search-preview"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "search-preview__display"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "search-preview__url"
-  }, googleUrl(url), " \u25BE"), /*#__PURE__*/React.createElement("div", {
-    className: "search-preview__title"
-  }, googleTitle(title)), /*#__PURE__*/React.createElement("div", {
-    className: "search-preview__description"
-  }, googleDescription(stripHtmlTags(description)))));
+  let {
+    description,
+    title,
+    url
+  } = _ref;
+  return _jsx("div", {
+    className: "search-preview",
+    children: _jsxs("div", {
+      className: "search-preview__display",
+      children: [_jsxs("div", {
+        className: "search-preview__url",
+        children: [googleUrl(url), " \u25BE"]
+      }), _jsx("div", {
+        className: "search-preview__title",
+        children: googleTitle(title)
+      }), _jsx("div", {
+        className: "search-preview__description",
+        children: googleDescription(stripHtmlTags(description))
+      })]
+    })
+  });
 }
 SearchPreview.propTypes = {
   title: PropTypes.string,

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

@@ -1,81 +1,37 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-
-/**
- * External dependencies
- */
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-/**
- * Internal dependencies
- */
-
-import { firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
-/**
- * Style dependencies
- */
-
+import { PureComponent } from 'react';
+import { Tweet } from './tweet';
 import './style.scss';
-var DESCRIPTION_LENGTH = 200;
-
-var baseDomain = function baseDomain(url) {
-  return url.replace(/^[^/]+[/]*/, '') // strip leading protocol
-  .replace(/\/.*$/, '');
-}; // strip everything after the domain
-
-
-var twitterDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), hardTruncation(DESCRIPTION_LENGTH));
-export var TwitterPreview = /*#__PURE__*/function (_PureComponent) {
-  _inherits(TwitterPreview, _PureComponent);
-
-  var _super = _createSuper(TwitterPreview);
-
-  function TwitterPreview() {
-    _classCallCheck(this, TwitterPreview);
-
-    return _super.apply(this, arguments);
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export class TwitterPreview extends 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 _jsx("div", {
+      className: "twitter-preview",
+      children: tweets && tweets.map((tweet, index) => {
+        return _jsx(Tweet, {
+          isLast: index + 1 === tweets.length,
+          ...tweet
+        }, `twitter-preview__tweet-${index}`);
+      })
+    });
   }
 
-  _createClass(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.createElement("div", {
-        className: "twitter-preview"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "twitter-preview__".concat(type)
-      }, image && /*#__PURE__*/React.createElement("div", {
-        className: "twitter-preview__image",
-        style: previewImageStyle
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "twitter-preview__body"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "twitter-preview__title"
-      }, title), /*#__PURE__*/React.createElement("div", {
-        className: "twitter-preview__description"
-      }, twitterDescription(stripHtmlTags(description))), /*#__PURE__*/React.createElement("div", {
-        className: "twitter-preview__url"
-      }, baseDomain(url || '')))));
-    }
-  }]);
-
-  return TwitterPreview;
-}(PureComponent);
+}
 TwitterPreview.propTypes = {
-  url: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.string,
-  description: PropTypes.string,
-  image: PropTypes.string
+  tweets: PropTypes.array
 };
 export default TwitterPreview;