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

package/src/threads-preview/header.tsx

@@ -1,18 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { formatThreadsDate } from '../helpers';
-import { HeaderProps } from './types';
-
-export const Header: React.FC< HeaderProps > = ( { name, date } ) => {
-	const postDate = date || new Date();
-
-	return (
-		<div className="threads-preview__header">
-			<span className="threads-preview__name">
-				{ name || __( 'Account Name', 'social-previews' ) }
-			</span>
-			<time className="threads-preview__date" dateTime={ postDate.toISOString() }>
-				{ formatThreadsDate( postDate ) }
-			</time>
-		</div>
-	);
-};

package/src/threads-preview/helpers.ts

@@ -1,11 +0,0 @@
-import { firstValid, hardTruncation, shortEnough, stripHtmlTags, Formatter } from '../helpers';
-
-const TITLE_LENGTH = 120;
-
-export const CAPTION_MAX_CHARS = 500;
-
-export const threadsTitle: Formatter = ( text ) =>
-	firstValid(
-		shortEnough( TITLE_LENGTH ),
-		hardTruncation( TITLE_LENGTH )
-	)( stripHtmlTags( text ) ) || '';

package/src/threads-preview/icons/default-avatar.tsx

@@ -1,35 +0,0 @@
-export const DefaultAvatar: React.FC = () => {
-	return (
-		<svg
-			width="36"
-			height="36"
-			viewBox="0 0 6.3500001 6.3500001"
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g>
-				<g>
-					<circle
-						fill="#fff"
-						fillOpacity="1"
-						stroke="#dbdbdb"
-						strokeWidth="0.144331"
-						strokeOpacity="1"
-						strokeDasharray="none"
-						cx="3.175"
-						cy="3.175"
-						r="3.1028347"
-					/>
-					<path
-						fill="#dbdbdb"
-						fillOpacity="1"
-						stroke="#dbdbdb"
-						strokeWidth="0.00924637"
-						strokeOpacity="1"
-						d="m 3.175,0.10128581 c -0.2931267,2e-6 -0.5848453,0.0419523 -0.866097,0.1245402 C 2.0276513,0.30840593 1.7596787,0.43063749 1.5130859,0.58911133 1.1424103,0.82733009 0.82733009,1.1424103 0.58911133,1.5130859 0.43063749,1.7596787 0.30840793,2.0276513 0.22582601,2.308903 0.14323609,2.5901547 0.10128781,2.8818733 0.10128581,3.175 c 5.02e-4,0.1391369 0.0101356,0.2782044 0.0294556,0.4159953 0.01723,0.1151309 0.0411535,0.2291443 0.0713135,0.3415812 0.0045,0.0218 0.009469,0.043412 0.0144694,0.065112 0.03449,0.1203489 0.076152,0.2387347 0.12505697,0.3539836 0.0045,0.01235 0.009253,0.0244 0.0139526,0.03669 0.05201,0.1191279 0.111111,0.235155 0.17776693,0.3467489 0.0038,0.0071 0.008066,0.013651 0.0118856,0.020671 0.0694099,0.1145998 0.14620121,0.2246049 0.22996012,0.3291788 0.0022,0.0029 0.004001,0.00589 0.006201,0.00879 0.0861099,0.1069859 0.17942183,0.208301 0.27905277,0.3028239 0.3233817,-0.5511754 0.8330913,-0.701365 1.065568,-0.697115 h 2.0629232 c 0.5904654,-0.0058 0.9954919,0.5335544 1.1032918,0.6945312 0.0993,-0.09444 0.1921923,-0.1954752 0.2780192,-0.3023071 0.0023,-0.0031 0.00442,-0.0062 0.00672,-0.0093 0.08334,-0.1042929 0.1598386,-0.2139114 0.2289266,-0.3281453 0.004,-0.0073 0.00841,-0.014891 0.012402,-0.022221 0.0663,-0.1112249 0.1254962,-0.2265057 0.1772502,-0.3451986 0.0048,-0.01266 0.00934,-0.025004 0.013953,-0.037724 0.04856,-0.1146958 0.090239,-0.2321796 0.1245402,-0.3519165 0.0053,-0.02288 0.010256,-0.046256 0.014986,-0.069246 0.02971,-0.1111369 0.05321,-0.2236822 0.07028,-0.3374471 0.01929,-0.1376588 0.028946,-0.2764746 0.029456,-0.4154785 0,-0.0503 -0.00112,-0.1006562 -0.00362,-0.1508952 -0.0049,-0.1004917 -0.014695,-0.20073 -0.029455,-0.3002469 C 6.2008813,2.6243448 6.1811701,2.5258685 6.1567301,2.4282756 6.1445102,2.3794856 6.1310225,2.330673 6.1164225,2.282548 6.0286626,1.9932503 5.8988742,1.7184607 5.7309163,1.4670939 5.6750164,1.383444 5.6149083,1.3030201 5.5510824,1.2252482 5.5191724,1.1863682 5.4861603,1.1477995 5.4523804,1.1105265 5.3848104,1.0359766 5.3140214,0.96518559 5.2394735,0.89761963 5.1276256,0.79624473 5.008419,0.70295057 4.8829061,0.61908366 4.7573922,0.53522374 4.6255915,0.46089717 4.4891317,0.39635824 c -0.09095,-0.04302 -0.1838061,-0.0813435 -0.278536,-0.11523845 -0.09473,-0.0339 -0.1912764,-0.0634 -0.2888713,-0.0878499 C 3.7752926,0.15658989 3.6265025,0.13054519 3.4762736,0.11575521 3.3761487,0.10585522 3.2756099,0.10128581 3.175,0.10128581 Z m 0,1.44125569 A 1.4106187,1.4106187 0 0 1 4.5857666,2.9533081 1.4106187,1.4106187 0 0 1 3.175,4.3635579 1.4106187,1.4106187 0 0 1 1.7642334,2.9533081 1.4106187,1.4106187 0 0 1 3.175,1.5425415 Z"
-					/>
-				</g>
-			</g>
-		</svg>
-	);
-};

package/src/threads-preview/index.tsx

@@ -1,3 +0,0 @@
-export * from './link-preview';
-export * from './post-preview';
-export * from './previews';

package/src/threads-preview/link-preview.tsx

@@ -1,13 +0,0 @@
-import { ThreadsPostPreview } from './post-preview';
-import { ThreadsPreviewProps } from './types';
-
-export const ThreadsLinkPreview: React.FC< ThreadsPreviewProps > = ( props ) => {
-	return (
-		<ThreadsPostPreview
-			{ ...props }
-			// Override the props that are irrelevant to link preview
-			caption=""
-			media={ undefined }
-		/>
-	);
-};

package/src/threads-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( [
-		'threads-preview__media',
-		'threads-preview__media-children-' + filteredMedia.length,
-	] );
-
-	return (
-		<div className={ mediaClasses }>
-			{ filteredMedia.map( ( mediaItem, index ) => (
-				<Fragment key={ `threads-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/threads-preview/post-preview.tsx

@@ -1,50 +0,0 @@
-import { preparePreviewText } from '../helpers';
-import { Card } from './card';
-import { Footer } from './footer';
-import { Header } from './header';
-import { CAPTION_MAX_CHARS } from './helpers';
-import { Media } from './media';
-import { Sidebar } from './sidebar';
-import { ThreadsPreviewProps } from './types';
-
-import './style.scss';
-
-export const ThreadsPostPreview: React.FC< ThreadsPreviewProps > = ( {
-	caption,
-	date,
-	image,
-	media,
-	name,
-	profileImage,
-	showThreadConnector,
-	title,
-	url,
-} ) => {
-	const hasMedia = !! media?.length;
-
-	const displayAsCard = url && image && ! hasMedia;
-
-	return (
-		<div className="threads-preview__wrapper">
-			<div className="threads-preview__container">
-				<Sidebar profileImage={ profileImage } showThreadConnector={ showThreadConnector } />
-				<div className="threads-preview__main">
-					<Header name={ name } date={ date } />
-					<div className="threads-preview__content">
-						{ caption ? (
-							<div className="threads-preview__text">
-								{ preparePreviewText( caption, {
-									platform: 'threads',
-									maxChars: CAPTION_MAX_CHARS,
-								} ) }
-							</div>
-						) : null }
-						{ hasMedia ? <Media media={ media } /> : null }
-						{ displayAsCard ? <Card image={ image } title={ title || '' } url={ url } /> : null }
-					</div>
-					<Footer />
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/threads-preview/previews.tsx

@@ -1,77 +0,0 @@
-import { ExternalLink } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import SectionHeading from '../shared/section-heading';
-import { ThreadsLinkPreview } from './link-preview';
-import { ThreadsPostPreview } from './post-preview';
-import type { ThreadsPreviewsProps } from './types';
-
-export const ThreadsPreviews: React.FC< ThreadsPreviewsProps > = ( {
-	headingLevel,
-	hideLinkPreview,
-	hidePostPreview,
-	posts,
-} ) => {
-	if ( ! posts?.length ) {
-		return null;
-	}
-
-	return (
-		<div className="social-preview threads-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section threads-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on Threads
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on Threads:', 'social-previews' ) }
-					</p>
-					{ posts.map( ( post, index ) => {
-						const isLast = index + 1 === posts.length;
-						return (
-							<ThreadsPostPreview
-								key={ `threads-preview__post-${ index }` }
-								{ ...post }
-								showThreadConnector={ ! isLast }
-							/>
-						);
-					} ) }
-				</section>
-			) }
-			{ ! hideLinkPreview ? (
-				<section className="social-preview__section threads-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a link to a Threads post
-							__( 'Link preview', 'social-previews' )
-						}
-					</SectionHeading>
-					{ posts[ 0 ].image ? (
-						<>
-							<p className="social-preview__section-desc">
-								{ __(
-									'This is what it will look like when someone shares the link to your WordPress post on Threads.',
-									'social-previews'
-								) }
-								&nbsp;
-								<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-									{ __( 'Learn more about links', 'social-previews' ) }
-								</ExternalLink>
-							</p>
-							<ThreadsLinkPreview { ...posts[ 0 ] } name="" profileImage="" />
-						</>
-					) : (
-						<p className="social-preview__section-desc">
-							{ __(
-								'Threads link preview requires an image to be set for the post. Please add an image to see the preview.',
-								'social-previews'
-							) }
-						</p>
-					) }
-				</section>
-			) : null }
-		</div>
-	);
-};

package/src/threads-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="threads-preview__sidebar">
-			<div className="threads-preview__profile-image">
-				{ profileImage ? (
-					<img alt={ __( 'Threads profile image', 'social-previews' ) } src={ profileImage } />
-				) : (
-					<DefaultAvatar />
-				) }
-			</div>
-			{ showThreadConnector && <div className="threads-preview__connector" /> }
-		</div>
-	);
-};

package/src/threads-preview/style.scss

@@ -1,203 +0,0 @@
-/* stylelint-disable scales/radii */
-/* stylelint-disable declaration-property-unit-allowed-list */
-@import "./variables";
-
-.threads-preview {
-	padding: 20px;
-}
-
-.threads-preview__wrapper {
-	background-color: #fff;
-	max-width: clamp(200px, 100%, 635px);
-	margin-inline: auto;
-	padding-top: 1rem;
-	border-radius: 4px;
-	padding-inline-end: 1rem;
-}
-
-.threads-preview__section.social-preview__section {
-	width: clamp(200px, 100%, 635px);
-
-	// To compensate for the padding for profile picture in threads threads
-	.social-preview__section-heading,
-	.social-preview__section-desc {
-		padding-inline-start: 17px;
-	}
-}
-
-.threads-preview__container {
-	display: grid;
-	grid-template-columns: 50px auto;
-	margin-bottom: 5px;
-	font-size: $threads-font-size;
-	line-height: $threads-line-height;
-	color: $threads-text-primary-color;
-
-	.threads-preview__sidebar {
-		display: grid;
-		grid-template-rows: 35px auto;
-		justify-items: center;
-
-		.threads-preview__profile-image {
-			display: flex;
-			align-items: center;
-			max-width: 36px;
-			max-height: 36px;
-			border-radius: 50%;
-			overflow: hidden;
-
-			img {
-				object-fit: cover;
-				width: 100%;
-			}
-		}
-
-		.threads-preview__connector {
-			width: 2px;
-			background-color: #8c8f94;
-		}
-	}
-
-	.threads-preview__main {
-		padding-bottom: 1rem;
-		overflow: hidden;
-	}
-
-	.threads-preview__header {
-		display: flex;
-		gap: 6px;
-		font-size: 16px;
-		line-height: 18px;
-		margin-bottom: 2px;
-	}
-
-	.threads-preview__name {
-		font-weight: 600;
-		font-size: 15px;
-	}
-
-	.threads-preview__date {
-		color: $threads-text-secondary-color;
-	}
-
-	.threads-preview__content {
-
-		.threads-preview__text {
-			white-space: pre-wrap;
-			word-break: break-word;
-		}
-
-		.threads-preview__media {
-			border-radius: 15px;
-			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;
-				}
-			}
-
-			&.threads-preview__media-children-2 {
-				grid-template-areas: "a b";
-			}
-
-			&.threads-preview__media-children-3 {
-				grid-template-areas:
-					"a b"
-					"a c";
-			}
-
-			&.threads-preview__media-children-4 {
-				grid-template-areas:
-					"a b"
-					"c d";
-			}
-		}
-
-		.threads-preview__card {
-			margin-top: 12px;
-			margin-bottom: 12px;
-			overflow: hidden;
-			border: 1px solid #e1e8ed;
-			border-radius: 8px;
-
-			.threads-preview__card-image {
-				width: 100%;
-				height: 100%;
-				object-fit: cover;
-				aspect-ratio: 16/9;
-			}
-
-			.threads-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;
-			}
-
-			.threads-preview__card-title {
-				text-overflow: ellipsis;
-			}
-
-			.threads-preview__card-url {
-				font-size: 12px;
-				text-transform: lowercase;
-				color: $threads-text-secondary-color;
-				white-space: nowrap;
-				overflow-inline: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-	}
-
-	.threads-preview__footer {
-		display: flex;
-		gap: 2.5rem;
-		margin-top: 1rem;
-
-		svg {
-			height: 19px;
-			width: 19px;
-			fill: $threads-actions-icon-color;
-		}
-	}
-
-	.threads-preview__icon {
-
-		&--like,
-		&--reply,
-		&--share {
-			svg {
-				fill: transparent;
-				stroke: $threads-actions-icon-color;
-			}
-		}
-	}
-}

package/src/threads-preview/types.ts

@@ -1,23 +0,0 @@
-import { MediaItem, SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
-
-export type ThreadsPreviewsProps = SocialPreviewsBaseProps & {
-	posts: Array< ThreadsPreviewProps >;
-};
-
-export type ThreadsCardProps = Omit< SocialPreviewBaseProps, 'description' >;
-
-export type SidebarProps = {
-	showThreadConnector?: boolean;
-	profileImage?: string;
-};
-
-export type HeaderProps = {
-	name?: string;
-	date?: Date;
-};
-
-export type MediaProps = {
-	media: Array< MediaItem >;
-};
-
-export type ThreadsPreviewProps = SidebarProps & HeaderProps & Partial< ThreadsCardProps >;

package/src/threads-preview/variables.scss

@@ -1,5 +0,0 @@
-$threads-font-size: 15px !default;
-$threads-line-height: 21px !default;
-$threads-text-primary-color: rgb(0, 0, 0) !default;
-$threads-text-secondary-color: rgb(153, 153, 153) !default;
-$threads-actions-icon-color: rgb(66, 66, 66) !default;

package/src/tumblr-preview/helpers.ts

@@ -1,16 +0,0 @@
-import { firstValid, hardTruncation, shortEnough, stripHtmlTags, Formatter } from '../helpers';
-
-const TITLE_LENGTH = 1000;
-const DESCRIPTION_LENGTH = 400;
-
-export const tumblrTitle: Formatter = ( text ) =>
-	firstValid(
-		shortEnough( TITLE_LENGTH ),
-		hardTruncation( TITLE_LENGTH )
-	)( stripHtmlTags( text ) ) || '';
-
-export const tumblrDescription: Formatter = ( text ) =>
-	firstValid(
-		shortEnough( DESCRIPTION_LENGTH ),
-		hardTruncation( DESCRIPTION_LENGTH )
-	)( stripHtmlTags( text ) ) || '';

package/src/tumblr-preview/index.tsx

@@ -1,3 +0,0 @@
-export * from './link-preview';
-export * from './post-preview';
-export * from './previews';

package/src/tumblr-preview/link-preview.tsx

@@ -1,52 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { baseDomain } from '../helpers';
-import { tumblrTitle, tumblrDescription } from './helpers';
-import TumblrPostActions from './post/actions';
-import TumblrPostHeader from './post/header';
-import type { TumblrPreviewProps } from './types';
-
-import './styles.scss';
-
-export const TumblrLinkPreview: React.FC< TumblrPreviewProps > = ( {
-	title,
-	description,
-	image,
-	user,
-	url,
-} ) => {
-	const avatarUrl = user?.avatarUrl;
-
-	return (
-		<div className="tumblr-preview__post">
-			{ avatarUrl && <img className="tumblr-preview__avatar" src={ avatarUrl } alt="" /> }
-			<div className="tumblr-preview__card">
-				<TumblrPostHeader user={ user } />
-				<div className="tumblr-preview__window">
-					{ image && (
-						<div className="tumblr-preview__window-top">
-							<div className="tumblr-preview__overlay">
-								<div className="tumblr-preview__title">{ tumblrTitle( title ) }</div>
-							</div>
-
-							<img
-								className="tumblr-preview__image"
-								src={ image }
-								alt={ __( 'Tumblr preview thumbnail', 'social-previews' ) }
-							/>
-						</div>
-					) }
-					<div className={ `tumblr-preview__window-bottom ${ ! image ? 'is-full' : '' }` }>
-						{ ! image && <div className="tumblr-preview__title">{ tumblrTitle( title ) }</div> }
-						{ description && image && (
-							<div className="tumblr-preview__description">
-								{ tumblrDescription( description ) }
-							</div>
-						) }
-						{ url && <div className="tumblr-preview__site-name">{ baseDomain( url ) }</div> }
-					</div>
-				</div>
-				<TumblrPostActions />
-			</div>
-		</div>
-	);
-};

package/src/tumblr-preview/post/actions/index.tsx

@@ -1,71 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import TumblrPostIcon from '../icons';
-
-import './styles.scss';
-
-const TumblrPostActions: React.FC = () => (
-	<div className="tumblr-preview__post-actions">
-		<div className="tumblr-preview__post-manage-actions">
-			<div className="tumblr-preview__post-actions-blaze">
-				<TumblrPostIcon name="blaze" />
-				&nbsp;Blaze
-			</div>
-			<ul>
-				{ [
-					{
-						icon: 'delete',
-						// translators: "Delete" action on a Tumblr post
-						label: __( 'Delete', 'social-previews' ),
-					},
-					{
-						icon: 'edit',
-						// translators: "Edit" action on a Tumblr post
-						label: __( 'Edit', 'social-previews' ),
-					},
-				].map( ( { icon, label } ) => (
-					<li key={ icon } aria-label={ label }>
-						<TumblrPostIcon name={ icon } />
-					</li>
-				) ) }
-			</ul>
-		</div>
-		<div className="tumblr-preview__post-social-actions">
-			<div>
-				{
-					// translators: count of notes on a Tumblr post
-					__( '0 notes', 'social-previews' )
-				}
-			</div>
-			<ul>
-				{ [
-					{
-						icon: 'share',
-						// translators: "Share" action on a Tumblr post
-						label: __( 'Share', 'social-previews' ),
-					},
-					{
-						icon: 'reply',
-						// translators: "Reply" action on a Tumblr post
-						label: __( 'Reply', 'social-previews' ),
-					},
-					{
-						icon: 'reblog',
-						// translators: "Reblog" action on a Tumblr post
-						label: __( 'Reblog', 'social-previews' ),
-					},
-					{
-						icon: 'like',
-						// translators: "Like" action on a Tumblr post
-						label: __( 'Like', 'social-previews' ),
-					},
-				].map( ( { icon, label } ) => (
-					<li key={ icon } aria-label={ label }>
-						<TumblrPostIcon name={ icon } />
-					</li>
-				) ) }
-			</ul>
-		</div>
-	</div>
-);
-
-export default TumblrPostActions;