@automattic/social-previews 2.0.1 → 2.1.0-beta.2

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

@@ -0,0 +1,58 @@
+import { preparePreviewText } from '../helpers';
+import { Card } from './card';
+import { Footer } from './footer';
+import { Header } from './header';
+import { Media } from './media';
+import { Sidebar } from './sidebar';
+import { ThreadsPreviewProps } from './types';
+
+import './style.scss';
+
+export const ThreadsPostPreview: React.FC< ThreadsPreviewProps > = ( {
+	date,
+	description,
+	image,
+	media,
+	name,
+	profileImage,
+	showThreadConnector,
+	text,
+	title,
+	url,
+} ) => {
+	const hasMedia = !! media?.length;
+
+	const displayAsCard = url && image && ! hasMedia;
+
+	// Attach the URL to the text if not displaying as a card and it's not already in the text.
+	const textToDisplay =
+		! displayAsCard && text && url && ! text.includes( url ) ? `${ text } ${ url }` : text;
+
+	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">
+						{ textToDisplay ? (
+							<div className="threads-preview__text">
+								{ preparePreviewText( textToDisplay, { platform: 'threads' } ) }
+							</div>
+						) : null }
+						{ hasMedia ? <Media media={ media } /> : null }
+						{ displayAsCard ? (
+							<Card
+								description={ description || '' }
+								image={ image }
+								title={ title || '' }
+								url={ url }
+							/>
+						) : null }
+					</div>
+					<Footer />
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/threads-preview/previews.tsx

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,203 @@
+/* stylelint-disable scales/radii */
+/* stylelint-disable declaration-property-unit-allowed-list */
+@import "./variables.scss";
+
+.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

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

package/src/threads-preview/variables.scss

@@ -0,0 +1,5 @@
+$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;