@automattic/social-previews 2.1.0-beta.8 → 3.0.0

package/src/twitter-preview/media.tsx

@@ -1,61 +0,0 @@
-import clsx from 'clsx';
-import { Fragment } from 'react';
-import { MediaProps } from './types';
-
-export const Media: React.FC< MediaProps > = ( { media } ) => {
-	// 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 );
-
-	if ( 0 === filteredMedia.length ) {
-		return null;
-	}
-
-	const isVideo = filteredMedia[ 0 ].type.startsWith( 'video/' );
-
-	const mediaClasses = clsx( [
-		'twitter-preview__media',
-		'twitter-preview__media-children-' + filteredMedia.length,
-	] );
-
-	return (
-		<div className={ mediaClasses }>
-			{ filteredMedia.map( ( mediaItem, index ) => (
-				<Fragment key={ `twitter-preview__media-item-${ index }` }>
-					{ isVideo ? (
-						// eslint-disable-next-line jsx-a11y/media-has-caption
-						<video controls>
-							<source src={ mediaItem.url } type={ mediaItem.type } />
-						</video>
-					) : (
-						<img alt={ mediaItem.alt || '' } src={ mediaItem.url } />
-					) }
-				</Fragment>
-			) ) }
-		</div>
-	);
-};

package/src/twitter-preview/post-preview.tsx

@@ -1,54 +0,0 @@
-import { Card } from './card';
-import { Footer } from './footer';
-import { Header } from './header';
-import { Media } from './media';
-import { QuoteTweet } from './quote-tweet';
-import { Sidebar } from './sidebar';
-import { Text } from './text';
-import { TwitterPreviewProps } from './types';
-
-import './style.scss';
-
-export const TwitterPostPreview: React.FC< TwitterPreviewProps > = ( {
-	date,
-	description,
-	image,
-	media,
-	name,
-	profileImage,
-	screenName,
-	showThreadConnector,
-	text,
-	title,
-	tweet,
-	cardType,
-	url,
-} ) => {
-	const hasMedia = !! media?.length;
-
-	return (
-		<div className="twitter-preview__wrapper">
-			<div className="twitter-preview__container">
-				<Sidebar profileImage={ profileImage } showThreadConnector={ showThreadConnector } />
-				<div className="twitter-preview__main">
-					<Header name={ name } screenName={ screenName } date={ date } />
-					<div className="twitter-preview__content">
-						{ text ? <Text text={ text } url={ url || '' } retainUrl={ hasMedia } /> : null }
-						{ hasMedia ? <Media media={ media } /> : null }
-						{ tweet ? <QuoteTweet tweet={ tweet } /> : null }
-						{ ! hasMedia && url && (
-							<Card
-								description={ description || '' }
-								image={ image }
-								title={ title || '' }
-								cardType={ cardType || '' }
-								url={ url }
-							/>
-						) }
-					</div>
-					<Footer />
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/twitter-preview/previews.tsx

@@ -1,66 +0,0 @@
-import { ExternalLink } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import SectionHeading from '../shared/section-heading';
-import { TwitterLinkPreview } from './link-preview';
-import { TwitterPostPreview } from './post-preview';
-import type { TwitterPreviewsProps } from './types';
-
-export const TwitterPreviews: React.FC< TwitterPreviewsProps > = ( {
-	headingLevel,
-	hideLinkPreview,
-	hidePostPreview,
-	tweets,
-} ) => {
-	if ( ! tweets?.length ) {
-		return null;
-	}
-
-	return (
-		<div className="social-preview twitter-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section twitter-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on Twitter
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on X:', 'social-previews' ) }
-					</p>
-					{ tweets.map( ( tweet, index ) => {
-						const isLast = index + 1 === tweets.length;
-						return (
-							<TwitterPostPreview
-								key={ `twitter-preview__tweet-${ index }` }
-								{ ...tweet }
-								showThreadConnector={ ! isLast }
-							/>
-						);
-					} ) }
-				</section>
-			) }
-			{ ! hideLinkPreview && (
-				<section className="social-preview__section twitter-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a link to a Twitter post
-							__( 'Link preview', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __(
-							'This is what it will look like when someone shares the link to your WordPress post on X.',
-							'social-previews'
-						) }
-						&nbsp;
-						<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-							{ __( 'Learn more about links', 'social-previews' ) }
-						</ExternalLink>
-					</p>
-					<TwitterLinkPreview { ...tweets[ 0 ] } name="" profileImage="" screenName="" />
-				</section>
-			) }
-		</div>
-	);
-};

package/src/twitter-preview/quote-tweet.tsx

@@ -1,19 +0,0 @@
-import { SandBox } from '@wordpress/components';
-import { QuoteTweetProps } from './types';
-
-export const QuoteTweet: React.FC< QuoteTweetProps > = ( { tweet } ) => {
-	if ( ! tweet ) {
-		return null;
-	}
-
-	return (
-		<div className="twitter-preview__quote-tweet">
-			<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"
-			/>
-			<div className="twitter-preview__quote-tweet-overlay" />
-		</div>
-	);
-};

package/src/twitter-preview/sidebar.tsx

@@ -1,18 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { DefaultAvatar } from './icons/default-avatar';
-import { SidebarProps } from './types';
-
-export const Sidebar: React.FC< SidebarProps > = ( { profileImage, showThreadConnector } ) => {
-	return (
-		<div className="twitter-preview__sidebar">
-			<div className="twitter-preview__profile-image">
-				{ profileImage ? (
-					<img alt={ __( 'Twitter profile image', 'social-previews' ) } src={ profileImage } />
-				) : (
-					<DefaultAvatar />
-				) }
-			</div>
-			{ showThreadConnector && <div className="twitter-preview__connector" /> }
-		</div>
-	);
-};

package/src/twitter-preview/style.scss

@@ -1,249 +0,0 @@
-/*
- * CSS values in this file are specific and
- * 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.
- *
- * @blame: pento
- */
-
-@import "../variables";
-
-.twitter-preview {
-	padding: 20px;
-}
-
-.twitter-preview__wrapper {
-	background-color: #fff;
-	max-width: clamp(200px, 100%, 635px);
-	margin-inline: auto;
-	padding-top: 1rem;
-	border-radius: 4px;
-	padding-inline-end: 1rem;
-}
-
-.twitter-preview__section.social-preview__section {
-	width: clamp(200px, 100%, 635px);
-
-	// To compensate for the padding for profile picture in twitter threads
-	.social-preview__section-heading,
-	.social-preview__section-desc {
-		padding-inline-start: 17px;
-	}
-}
-
-.twitter-preview__container {
-	display: grid;
-	grid-template-columns: 65px auto;
-	margin-bottom: 5px;
-	font-size: $tweet-font-size;
-	line-height: 20px;
-
-	.twitter-preview__sidebar {
-		display: grid;
-		grid-template-rows: 35px auto;
-		justify-items: center;
-
-		.twitter-preview__profile-image {
-			display: flex;
-			align-items: center;
-			max-width: 30px;
-			max-height: 30px;
-			border-radius: 50%;
-			overflow: hidden;
-
-			img {
-				object-fit: cover;
-				width: 100%;
-			}
-		}
-
-		.twitter-preview__connector {
-			width: 2px;
-			background-color: #8c8f94;
-		}
-	}
-
-	.twitter-preview__main {
-		padding-bottom: 1rem;
-		overflow: hidden;
-	}
-
-	.twitter-preview__header {
-		display: flex;
-		gap: 0.25rem;
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-		font-size: 16px;
-		line-height: 18px;
-		margin-bottom: 2px;
-	}
-
-	.twitter-preview__name {
-		font-weight: 700;
-	}
-
-	.twitter-preview__screen-name,
-	.twitter-preview__date {
-		color: #667886;
-		letter-spacing: -0.3px;
-	}
-
-	.twitter-preview__content {
-
-		.twitter-preview__text {
-			color: rgb(15, 20, 25);
-			white-space: pre-wrap;
-			word-break: break-word;
-		}
-
-		.twitter-preview__media {
-			border-radius: 15px; /* stylelint-disable-line scales/radii */
-			overflow: hidden;
-			display: grid;
-			grid-gap: 2px;
-			grid-template-areas: "a";
-			height: 300px;
-			margin-top: 12px;
-
-			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: 12px;
-			margin-bottom: 12px;
-			overflow: hidden;
-			border: 1px solid #e1e8ed;
-			border-radius: 12px; /* stylelint-disable-line scales/radii */
-
-			.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;
-				aspect-ratio: 16/9;
-			}
-
-			.twitter-preview__card-body {
-				padding: 0.75em;
-				text-decoration: none;
-				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				color: var(--studio-black);
-				text-align: left;
-				overflow: hidden;
-				display: flex;
-				flex-direction: column;
-				gap: 2px;
-			}
-
-			.twitter-preview__card-title {
-				max-height: 1.3em;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.twitter-preview__card-description {
-				max-height: 3.9em;
-				text-overflow: ellipsis;
-				color: rgb(83, 100, 113);
-				//clamp after three lines
-				display: -webkit-box;
-				-webkit-line-clamp: 3;
-				-webkit-box-orient: vertical;
-				overflow: hidden;
-			}
-
-			.twitter-preview__card-url {
-				text-transform: lowercase;
-				color: #8899a6;
-				white-space: nowrap;
-				overflow-inline: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-	}
-
-	.twitter-preview__footer {
-		display: flex;
-		justify-content: space-between;
-		max-width: 425px;
-		margin-top: 12px;
-
-		svg {
-			fill: #787c82;
-			height: 16px;
-			width: 16px;
-		}
-	}
-}

package/src/twitter-preview/text.tsx

@@ -1,19 +0,0 @@
-import { preparePreviewText } from '../helpers';
-import { TextProps } from './types';
-
-export const Text: React.FC< TextProps > = ( { text, url, retainUrl } ) => {
-	if ( ! text ) {
-		return null;
-	}
-	// If the text ends with the card URL, remove it.
-	const tweetText =
-		url && ! retainUrl && text.endsWith( url )
-			? text.substring( 0, text.lastIndexOf( url ) )
-			: text;
-
-	return (
-		<div className="twitter-preview__text">
-			{ preparePreviewText( tweetText, { platform: 'twitter' } ) }
-		</div>
-	);
-};

package/src/twitter-preview/types.ts

@@ -1,38 +0,0 @@
-import { MediaItem, SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
-
-export type TwitterPreviewsProps = SocialPreviewsBaseProps & {
-	tweets: Array< TwitterPreviewProps >;
-};
-
-export type TwitterCardProps = SocialPreviewBaseProps & {
-	cardType: string;
-};
-
-export type SidebarProps = {
-	showThreadConnector?: boolean;
-	profileImage?: string;
-};
-
-export type HeaderProps = {
-	name?: string;
-	date?: Date | number;
-	screenName?: string;
-};
-
-export type MediaProps = {
-	media: Array< MediaItem >;
-};
-
-export type QuoteTweetProps = {
-	tweet: TwitterPreviewProps;
-};
-
-export type TextProps = {
-	text: string;
-	url: string;
-	retainUrl?: boolean;
-};
-
-export type TwitterPreviewProps = SidebarProps &
-	HeaderProps &
-	Partial< QuoteTweetProps & TwitterCardProps & Pick< TextProps, 'text' > >;

package/src/types.ts

@@ -1,67 +0,0 @@
-import type { SectionHeadingProps } from './shared/section-heading';
-
-export interface SocialPreviewBaseProps {
-	/**
-	 * The URL of the post/page to preview.
-	 */
-	url: string;
-
-	/**
-	 * The title of the post/page to preview.
-	 */
-	title: string;
-
-	/**
-	 * The description of the post/page to preview.
-	 */
-	description: string;
-
-	/**
-	 * The URL of the image to use in the post/page preview.
-	 */
-	image?: string;
-
-	/**
-	 * The array of media items to use in the preview.
-	 */
-	media?: Array< MediaItem >;
-
-	/**
-	 * The caption.
-	 */
-	caption?: string;
-}
-
-export interface SocialPreviewsBaseProps {
-	/**
-	 * The heading level to use for the preview section title
-	 */
-	headingLevel?: SectionHeadingProps[ 'level' ];
-
-	/**
-	 * Whether to hide the "Your post" section
-	 */
-	hidePostPreview?: boolean;
-
-	/**
-	 * Whether to hide the "Link preview" section
-	 */
-	hideLinkPreview?: boolean;
-}
-
-export type MediaItem = {
-	/**
-	 * The alt text for the image.
-	 */
-	alt?: string;
-
-	/**
-	 * The mime type of the media
-	 */
-	type: string;
-
-	/**
-	 * The URL of the media.
-	 */
-	url: string;
-};

package/src/variables.scss

@@ -1,14 +0,0 @@
-// Define variables, but only if they already don't exist.
-//                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-// This is for any outside consumers of the package that
-// don't have the entire calypso environment, which provides
-// these variables from a private package.
-// (See: https://sass-lang.com/documentation/variables#default-values )
-
-// In a regular calypso environment with @automattic/typography pulled in,
-// these won't have any effect.
-
-$font-body-extra-small: 12px !default;
-$font-body-small: 14px !default;
-$tweet-font-size: 15px !default;
-$tweet-line-height: 20px !default;