@automattic/social-previews 1.0.4 → 1.1.2

package/dist/esm/twitter-preview/style.scss

@@ -1,112 +1,228 @@
 /*
  * CSS values in this file are specific and
- * designed to match the CSS on external sites,
- * such as Google and Facebook. Therefore there
+ * designed to match the CSS on Twitter. Therefore there
  * will be exceptions to our CSS guidelines here
- * but please do not "update" this file to
- * conform.
+ * but please do not "update" this file to conform.
  *
- * @blame: dmsnell
-*/
+ * @blame: pento
+ */
 
 @import '../variables.scss';
 
 /* stylelint-disable scales/font-size */
 
 .twitter-preview {
+	background-color: #fff;
 	padding: 20px;
-	box-sizing: border-box;
+	width: 635px;
 }
 
-.twitter-preview__summary,
-.twitter-preview__large_image_summary {
-	width: 506px;
-	max-width: 100%;
-	margin: 0 auto;
-	overflow: hidden;
-	border: 1px solid #e1e8ed;
-	border-radius: 12px;
-}
-
-.twitter-preview__summary {
-	height: 125px;
-}
-
-.twitter-preview__large_image_summary {
-	height: auto;
-}
-
-.twitter-preview__image {
-	background-size: cover;
-	background-position: center;
-}
-
-.twitter-preview__summary .twitter-preview__image {
-	float: left;
-	width: 125px;
-	height: 125px;
-}
-
-.twitter-preview__large_image_summary .twitter-preview__image {
-	width: 506px;
-	max-width: 100%;
-	height: 254px;
-	border-bottom: 1px solid #e1e8ed;
-}
-
-.twitter-preview__body {
-	padding: 0.75em;
-	text-decoration: none;
-	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: $font-body-small;
-	color: black;
-	text-align: left;
-	line-height: 1.3em;
-	overflow: hidden;
-}
-
-.twitter-preview__summary .twitter-preview__body {
-	margin-left: 125px;
-	border-left: 1px solid #e1e8ed;
-	height: 100%;
-}
-
-.twitter-preview__large_image_summary .twitter-preview__body {
-	padding-left: 1em;
-	padding-right: 1em;
-}
-
-.twitter-preview__title {
-	max-height: 1.3em;
-	white-space: nowrap;
-	font-weight: bold;
-	font-size: 1em;
-	margin: 0 0 0.15em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.twitter-preview__description {
-	margin-top: 0.32333em;
-	max-height: 3.9em;
-	text-overflow: ellipsis;
-	//clamp after two lines
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-
-.twitter-preview__summary .twitter-preview__description {
-	-webkit-line-clamp: 3;
-}
-
-.twitter-preview__url {
-	text-transform: lowercase;
-	color: #8899a6;
-	max-height: 1.3em;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	margin-top: 0.32333em;
+.twitter-preview__container {
+	display: grid;
+	grid-template-columns: 65px auto;
+	margin-bottom: 5px;
+	margin-right: 24px;
+
+	.twitter-preview__sidebar {
+		display: grid;
+		grid-template-rows: 35px auto;
+		justify-items: center;
+
+		.twitter-preview__profile-image {
+			img {
+				height: 30px;
+				width: 30px;
+				border-radius: 15px;
+				object-fit: cover;
+			}
+		}
+
+		.twitter-preview__connector {
+			width: 2px;
+			background-color: #8c8f94;
+		}
+	}
+
+	.twitter-preview__name {
+		font-weight: bold;
+		font-size: 16px;
+		line-height: 19px;
+	}
+
+	.twitter-preview__screen-name,
+	.twitter-preview__date {
+		color: #667886;
+		font-size: 16px;
+		line-height: 18px;
+		letter-spacing: -0.3px;
+		margin-left: 15px;
+	}
+
+	.twitter-preview__content {
+		margin: 7px 0;
+
+		.twitter-preview__text {
+			font-size: 14px;
+			line-height: 18px;
+			letter-spacing: -0.3px;
+			color: #787c82;
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		.twitter-preview__media {
+			border-radius: 15px;
+			overflow: hidden;
+			display: grid;
+			grid-gap: 2px;
+			grid-template-areas: 'a';
+			height: 300px;
+			margin-top: 10px;
+
+			img,
+			video {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+
+				&:nth-child( 1 ) {
+					grid-area: a;
+				}
+				&:nth-child( 2 ) {
+					grid-area: b;
+				}
+				&:nth-child( 3 ) {
+					grid-area: c;
+				}
+				&:nth-child( 4 ) {
+					grid-area: d;
+				}
+			}
+
+			&.twitter-preview__media-children-2 {
+				grid-template-areas: 'a b';
+			}
+
+			&.twitter-preview__media-children-3 {
+				grid-template-areas: 'a b'
+				                     'a c';
+			}
+
+			&.twitter-preview__media-children-4 {
+				grid-template-areas: 'a b'
+				                     'c d';
+			}
+		}
+
+		.twitter-preview__quote-tweet {
+			margin-top: 10px;
+			min-height: 200px;
+
+			.twitter-preview__quote-tweet-overlay {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				opacity: 0;
+			}
+		}
+
+		.twitter-preview__card {
+			margin-top: 10px;
+			overflow: hidden;
+			border: 1px solid #e1e8ed;
+			border-radius: 12px;
+
+			.twitter-preview__card-summary {
+				display: grid;
+
+				&.twitter-preview__card-has-image {
+					height: 125px;
+					display: grid;
+					grid-template-columns: 125px auto;
+
+					.twitter-preview__card-body {
+						border-left: 1px solid #e1e8ed;
+						height: 100%;
+					}
+
+					.twitter-preview__card-description {
+						-webkit-line-clamp: 3;
+					}
+				}
+			}
+
+			.twitter-preview__card-summary_large_image {
+				display: grid;
+				grid-template-rows: 254px auto;
+			}
+
+			.twitter-preview__card-image {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.twitter-preview__card-body {
+				padding: 0.75em;
+				text-decoration: none;
+				font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+				font-size: $font-body-small;
+				color: black;
+				text-align: left;
+				line-height: 1.3em;
+				overflow: hidden;
+			}
+
+			.twitter-preview__card-title {
+				max-height: 1.3em;
+				white-space: nowrap;
+				font-weight: bold;
+				font-size: 1em;
+				margin: 0 0 0.15em;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.twitter-preview__card-description {
+				margin-top: 0.32333em;
+				max-height: 3.9em;
+				text-overflow: ellipsis;
+				//clamp after two lines
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+			}
+
+			.twitter-preview__card-url {
+				text-transform: lowercase;
+				color: #8899a6;
+				max-height: 1.3em;
+				white-space: nowrap;
+				overflow-inline: hidden;
+				text-overflow: ellipsis;
+				margin-top: 0.32333em;
+
+				svg {
+					fill: #8899a6;
+					height: 15px;
+					width: 15px;
+					margin: 0 2px -4px 0;
+				}
+			}
+		}
+	}
+
+	.twitter-preview__footer {
+		display: grid;
+		grid-template-columns: repeat( 4, auto );
+
+		svg {
+			fill: #787c82;
+			height: 16px;
+			width: 16px;
+		}
+	}
 }

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

@@ -0,0 +1,325 @@
+import { SandBox } from '@wordpress/components';
+import { __ as alias__ } from '@wordpress/i18n';
+const __ = alias__;
+import classnames from 'classnames';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import { firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
+import './style.scss';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const DESCRIPTION_LENGTH = 200;
+
+const baseDomain = url => url.replace(/^[^/]+[/]*(www\.)?/, '') // Strip leading protocol and "www.".
+.replace(/\/.*$/, ''); // Strip everything after the domain.
+
+
+const twitterDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), hardTruncation(DESCRIPTION_LENGTH));
+export class Tweet extends PureComponent {
+  /**
+   * Renders the sidebar beside the tweet.
+   *
+   * @param {string} profileImage URL of the Twitter profile image.
+   * @param {boolean} isLast Whether or not this is the last tweet in the in a thread.
+   * @returns {import('react').Element} The sidebar.
+   */
+  renderSidebar(profileImage, isLast) {
+    return _jsxs("div", {
+      className: "twitter-preview__sidebar",
+      children: [_jsx("div", {
+        className: "twitter-preview__profile-image",
+        children: _jsx("img", {
+          alt: __('Twitter profile image'),
+          src: profileImage
+        })
+      }), !isLast && _jsx("div", {
+        className: "twitter-preview__connector"
+      })]
+    });
+  }
+  /**
+   * Renders the header section of a single tweet.
+   *
+   * @param {string} name The display name of the Twitter account.
+   * @param {string} screenName The at-name of the Twitter account.
+   * @param {Date} date The date to be shown for this preview.
+   * @returns {import('react').Element} The header.
+   */
+
+
+  renderHeader(name, screenName, date) {
+    return _jsxs("div", {
+      className: "twitter-preview__header",
+      children: [_jsx("span", {
+        className: "twitter-preview__name",
+        children: name
+      }), _jsx("span", {
+        className: "twitter-preview__screen-name",
+        children: screenName
+      }), _jsx("span", {
+        className: "twitter-preview__date",
+        children: moment(date).format('MMM D')
+      })]
+    });
+  }
+  /**
+   * Renders the text section of the tweet.
+   *
+   * @param {string} text The text of the tweet.
+   * @param {Array} urls Optional. An array of URLs that are in the text.
+   * @param {object} card Optional. The card data for this tweet.
+   * @returns {import('react').Element} The text section.
+   */
+
+
+  renderText(text) {
+    let urls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    let card = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    // If the text ends with the card URL, remove it.
+    const cardUrl = card.url || '';
+    const deCardedText = text.endsWith(cardUrl) ? text.substr(0, text.lastIndexOf(cardUrl)) : text;
+
+    const __html = urls.reduce((html, url) => html.replace(new RegExp('\\(' + url + '\\)', 'g'), `(<a href="${url}">${url}</a>)`), stripHtmlTags(deCardedText).replace(new RegExp('\\n', 'g'), '<br/>')); // We can enable dangerouslySetInnerHTML here, since the text we're using is stripped
+    // of all HTML tags, then only has safe tags added in createTweetMarkup().
+
+    /* eslint-disable react/no-danger */
+
+
+    return _jsx("div", {
+      className: "twitter-preview__text",
+      dangerouslySetInnerHTML: {
+        __html
+      }
+    });
+    /* eslint-enabled react/no-danger */
+  }
+  /**
+   * Renders the media section of the tweet. It will render up to four individual images, or a single
+   * GIF, or a single video. Any media beyond these limits will be discarded.
+   *
+   * @param {Array} media The media to include in this tweet.
+   * @returns {import('react').Element} The media section.
+   */
+
+
+  renderMedia(media) {
+    if (!media) {
+      return;
+    } // Ensure we're only trying to show valid media, and the correct quantity.
+
+
+    const filteredMedia = media // Only image/ and video/ mime types are supported.
+    .filter(mediaItem => mediaItem.type.startsWith('image/') || mediaItem.type.startsWith('video/')).filter((mediaItem, idx, array) => {
+      // We'll always keep the first item.
+      if (0 === idx) {
+        return true;
+      } // If the first item was a video or GIF, discard all subsequent items.
+
+
+      if (array[0].type.startsWith('video/') || 'image/gif' === array[0].type) {
+        return false;
+      } // The first item wasn't a video or GIF, so discard all subsequent videos and GIFs.
+
+
+      if (mediaItem.type.startsWith('video/') || 'image/gif' === mediaItem.type) {
+        return false;
+      }
+
+      return true;
+    }) // We only want the first four items of the array, at most.
+    .slice(0, 4);
+    const isVideo = filteredMedia.length > 0 && filteredMedia[0].type.startsWith('video/');
+    const mediaClasses = classnames(['twitter-preview__media', 'twitter-preview__media-children-' + filteredMedia.length]);
+
+    if (0 === filteredMedia.length) {
+      return;
+    }
+
+    return _jsxs("div", {
+      className: mediaClasses,
+      children: [
+      /* eslint-disable jsx-a11y/media-has-caption */
+      isVideo && filteredMedia.map((mediaItem, index) => _jsxs("video", {
+        controls: true,
+        children: [_jsx("source", {
+          src: mediaItem.url,
+          type: mediaItem.type
+        }), ' ']
+      }, `twitter-preview__media-item-${index}`))
+      /* eslint-disable jsx-a11y/media-has-caption */
+      , !isVideo && filteredMedia.map((mediaItem, index) => _jsx("img", {
+        alt: mediaItem.alt,
+        src: mediaItem.url
+      }, `twitter-preview__media-item-${index}`))]
+    });
+  }
+  /**
+   * Given a tweet URL, renders it as a quoted tweet.
+   *
+   * @param {string} tweet The tweet URL.
+   * @returns {import('react').Element} The quoted tweet.
+   */
+
+
+  renderQuoteTweet(tweet) {
+    if (!tweet) {
+      return;
+    }
+
+    return _jsxs("div", {
+      className: "twitter-preview__quote-tweet",
+      children: [_jsx(SandBox, {
+        html: `<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><a href="${tweet}"></a></blockquote>`,
+        scripts: ['https://platform.twitter.com/widgets.js'],
+        title: "Embedded tweet",
+        onFocus: this.hideOverlay
+      }), _jsx("div", {
+        className: "twitter-preview__quote-tweet-overlay"
+      })]
+    });
+  }
+  /**
+   * Given card data, renders the Twitter-style card.
+   *
+   * @param {object} card The card data.
+   * @returns {import('react').Element} The card tweet.
+   */
+
+
+  renderCard(card) {
+    if (!card) {
+      return;
+    }
+
+    const {
+      description,
+      image,
+      title,
+      type,
+      url
+    } = card;
+    const cardClassNames = classnames(`twitter-preview__card-${type}`, {
+      'twitter-preview__card-has-image': !!image
+    });
+    return _jsx("div", {
+      className: "twitter-preview__card",
+      children: _jsxs("div", {
+        className: cardClassNames,
+        children: [image && _jsx("img", {
+          className: "twitter-preview__card-image",
+          src: image,
+          alt: ""
+        }), _jsxs("div", {
+          className: "twitter-preview__card-body",
+          children: [_jsx("div", {
+            className: "twitter-preview__card-title",
+            children: title
+          }), _jsx("div", {
+            className: "twitter-preview__card-description",
+            children: twitterDescription(stripHtmlTags(description))
+          }), _jsxs("div", {
+            className: "twitter-preview__card-url",
+            children: [_jsx("svg", {
+              viewBox: "0 0 24 24",
+              children: _jsxs("g", {
+                children: [_jsx("path", {
+                  d: "M11.96 14.945c-.067 0-.136-.01-.203-.027-1.13-.318-2.097-.986-2.795-1.932-.832-1.125-1.176-2.508-.968-3.893s.942-2.605 2.068-3.438l3.53-2.608c2.322-1.716 5.61-1.224 7.33 1.1.83 1.127 1.175 2.51.967 3.895s-.943 2.605-2.07 3.438l-1.48 1.094c-.333.246-.804.175-1.05-.158-.246-.334-.176-.804.158-1.05l1.48-1.095c.803-.592 1.327-1.463 1.476-2.45.148-.988-.098-1.975-.69-2.778-1.225-1.656-3.572-2.01-5.23-.784l-3.53 2.608c-.802.593-1.326 1.464-1.475 2.45-.15.99.097 1.975.69 2.778.498.675 1.187 1.15 1.992 1.377.4.114.633.528.52.928-.092.33-.394.547-.722.547z"
+                }), _jsx("path", {
+                  d: "M7.27 22.054c-1.61 0-3.197-.735-4.225-2.125-.832-1.127-1.176-2.51-.968-3.894s.943-2.605 2.07-3.438l1.478-1.094c.334-.245.805-.175 1.05.158s.177.804-.157 1.05l-1.48 1.095c-.803.593-1.326 1.464-1.475 2.45-.148.99.097 1.975.69 2.778 1.225 1.657 3.57 2.01 5.23.785l3.528-2.608c1.658-1.225 2.01-3.57.785-5.23-.498-.674-1.187-1.15-1.992-1.376-.4-.113-.633-.527-.52-.927.112-.4.528-.63.926-.522 1.13.318 2.096.986 2.794 1.932 1.717 2.324 1.224 5.612-1.1 7.33l-3.53 2.608c-.933.693-2.023 1.026-3.105 1.026z"
+                })]
+              })
+            }), baseDomain(url || '')]
+          })]
+        })]
+      })
+    });
+  }
+  /**
+   * Renders the footer section of a single tweet, showing (non-functioning) reply, retweet, etc buttons.
+   *
+   * @returns {import('react').Element} The footer.
+   */
+
+
+  renderFooter() {
+    return _jsxs("div", {
+      className: "twitter-preview__footer",
+      children: [_jsx("span", {
+        className: "twitter-preview__icon-replies",
+        children: _jsx("svg", {
+          viewBox: "0 0 24 24",
+          children: _jsx("path", {
+            d: "M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"
+          })
+        })
+      }), _jsx("span", {
+        className: "twitter-preview__icon-retweets",
+        children: _jsx("svg", {
+          viewBox: "0 0 24 24",
+          children: _jsx("path", {
+            d: "M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"
+          })
+        })
+      }), _jsx("span", {
+        className: "twitter-preview__icon-likes",
+        children: _jsx("svg", {
+          viewBox: "0 0 24 24",
+          children: _jsx("path", {
+            d: "M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"
+          })
+        })
+      }), _jsx("span", {
+        className: "twitter-preview__icon-share",
+        children: _jsxs("svg", {
+          viewBox: "0 0 24 24",
+          children: [_jsx("path", {
+            d: "M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"
+          }), _jsx("path", {
+            d: "M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"
+          })]
+        })
+      })]
+    });
+  }
+
+  render() {
+    const {
+      isLast,
+      profileImage,
+      name,
+      screenName,
+      date,
+      text,
+      media,
+      tweet,
+      urls,
+      card
+    } = this.props;
+    return _jsxs("div", {
+      className: "twitter-preview__container",
+      children: [this.renderSidebar(profileImage, isLast), _jsxs("div", {
+        className: "twitter-preview__main",
+        children: [this.renderHeader(name, screenName, date), _jsxs("div", {
+          className: "twitter-preview__content",
+          children: [this.renderText(text, urls, card), this.renderMedia(media), this.renderQuoteTweet(tweet), this.renderCard(card)]
+        }), this.renderFooter()]
+      })]
+    });
+  }
+
+}
+Tweet.propTypes = {
+  tweets: PropTypes.array,
+  isLast: PropTypes.bool,
+  profileImage: PropTypes.string,
+  name: PropTypes.string,
+  screenName: PropTypes.string,
+  date: PropTypes.number,
+  text: PropTypes.string,
+  media: PropTypes.array,
+  tweet: PropTypes.string,
+  urls: PropTypes.array,
+  card: PropTypes.object
+};
+export default Tweet;