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

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

@@ -1,10 +0,0 @@
-export const DefaultAvatar: React.FC = () => {
-	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340" width="340" height="340">
-			<path
-				fill="#DDD"
-				d="m169,.5a169,169 0 1,0 2,0zm0,86a76,76 0 1 1-2,0zM57,287q27-35 67-35h92q40,0 67,35a164,164 0 0,1-226,0"
-			/>
-		</svg>
-	);
-};

package/src/instagram-preview/icons/heart.tsx

@@ -1,14 +0,0 @@
-export const Heart: React.FC = () => {
-	return (
-		<svg
-			color="rgb(38, 38, 38)"
-			fill="rgb(38, 38, 38)"
-			height="24"
-			role="img"
-			viewBox="0 0 24 24"
-			width="24"
-		>
-			<path d="M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938m0-2a6.04 6.04 0 0 0-4.797 2.127 6.052 6.052 0 0 0-4.787-2.127A6.985 6.985 0 0 0 .5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 0 0 3.518 3.018 2 2 0 0 0 2.174 0 45.263 45.263 0 0 0 3.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 0 0-6.708-7.218Z"></path>
-		</svg>
-	);
-};

package/src/instagram-preview/icons/menu.tsx

@@ -1,24 +0,0 @@
-export const Menu: React.FC = () => {
-	return (
-		<svg width="17" height="5" viewBox="0 0 17 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M2.11865 3.5C2.67094 3.5 3.11865 3.05228 3.11865 2.5C3.11865 1.94772 2.67094 1.5 2.11865 1.5C1.56637 1.5 1.11865 1.94772 1.11865 2.5C1.11865 3.05228 1.56637 3.5 2.11865 3.5Z"
-				fill="black"
-				stroke="black"
-				strokeWidth="2"
-			/>
-			<path
-				d="M8.55933 3.5C9.11161 3.5 9.55933 3.05228 9.55933 2.5C9.55933 1.94772 9.11161 1.5 8.55933 1.5C8.00704 1.5 7.55933 1.94772 7.55933 2.5C7.55933 3.05228 8.00704 3.5 8.55933 3.5Z"
-				fill="black"
-				stroke="black"
-				strokeWidth="2"
-			/>
-			<path
-				d="M15 3.5C15.5523 3.5 16 3.05228 16 2.5C16 1.94772 15.5523 1.5 15 1.5C14.4477 1.5 14 1.94772 14 2.5C14 3.05228 14.4477 3.5 15 3.5Z"
-				fill="black"
-				stroke="black"
-				strokeWidth="2"
-			/>
-		</svg>
-	);
-};

package/src/instagram-preview/icons/share.tsx

@@ -1,30 +0,0 @@
-export const Share: React.FC = () => {
-	return (
-		<svg
-			color="rgb(38, 38, 38)"
-			fill="rgb(38, 38, 38)"
-			height="24"
-			role="img"
-			viewBox="0 0 24 24"
-			width="24"
-		>
-			<line
-				fill="none"
-				stroke="currentColor"
-				strokeLinejoin="round"
-				strokeWidth="2"
-				x1="22"
-				x2="9.218"
-				y1="3"
-				y2="10.083"
-			></line>
-			<polygon
-				fill="none"
-				points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"
-				stroke="currentColor"
-				strokeLinejoin="round"
-				strokeWidth="2"
-			></polygon>
-		</svg>
-	);
-};

package/src/instagram-preview/index.tsx

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

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

@@ -1,86 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { preparePreviewText } from '../helpers';
-import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
-import { Bookmark as BookmarkIcon } from './icons/bookmark';
-import { Comment as CommentIcon } from './icons/comment';
-import { DefaultAvatar } from './icons/default-avatar';
-import { Heart as HeartIcon } from './icons/heart';
-import { Menu as MenuIcon } from './icons/menu';
-import { Share as ShareIcon } from './icons/share';
-import { InstagramPreviewProps } from './types';
-
-import './style.scss';
-
-export function InstagramPostPreview( {
-	image,
-	media,
-	name,
-	profileImage,
-	caption,
-}: InstagramPreviewProps ) {
-	const username = name || 'username';
-
-	const mediaItem = media?.[ 0 ];
-
-	return (
-		<div className="instagram-preview__wrapper">
-			<section className="instagram-preview__container">
-				<div className="instagram-preview__header">
-					<div className="instagram-preview__header--avatar">
-						{ profileImage ? <img src={ profileImage } alt="" /> : <DefaultAvatar /> }
-					</div>
-					<div className="instagram-preview__header--profile">
-						<div className="instagram-preview__header--profile-name">{ username }</div>
-						<div className="instagram-preview__header--profile-menu">
-							<MenuIcon />
-						</div>
-					</div>
-				</div>
-				<div className="instagram-preview__media">
-					{ mediaItem ? (
-						<div className="instagram-preview__media-item">
-							{ mediaItem.type.startsWith( 'video/' ) ? (
-								// eslint-disable-next-line jsx-a11y/media-has-caption
-								<video controls={ false } className="instagram-preview__media--video">
-									<source src={ mediaItem.url } type={ mediaItem.type } />
-								</video>
-							) : (
-								<img className="instagram-preview__media--image" src={ mediaItem.url } alt="" />
-							) }
-						</div>
-					) : (
-						<img className="instagram-preview__media--image" src={ image } alt="" />
-					) }
-				</div>
-				<div className="instagram-preview__content">
-					<section className="instagram-preview__content--actions">
-						<div className="instagram-preview__content--actions-primary">
-							<HeartIcon />
-							<CommentIcon />
-							<ShareIcon />
-						</div>
-						<div className="instagram-preview__content--actions-secondary">
-							<BookmarkIcon />
-						</div>
-					</section>
-					<div className="instagram-preview__content--body">
-						<div className="instagram-preview__content--name">{ username }</div>
-						&nbsp;
-						{ caption ? (
-							<div className="instagram-preview__content--text">
-								{ preparePreviewText( caption, {
-									platform: 'instagram',
-									maxChars: FEED_TEXT_MAX_LENGTH,
-									maxLines: FEED_TEXT_MAX_LINES,
-								} ) }
-							</div>
-						) : null }
-					</div>
-					<div className="instagram-preview__content--footer">
-						<span>{ __( 'View one comment', 'social-previews' ) }</span>
-					</div>
-				</div>
-			</section>
-		</div>
-	);
-}

package/src/instagram-preview/previews.tsx

@@ -1,32 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import SectionHeading from '../shared/section-heading';
-import { InstagramPostPreview } from './post-preview';
-import type { InstagramPreviewsProps } from './types';
-
-export const InstagramPreviews: React.FC< InstagramPreviewsProps > = ( {
-	headingLevel,
-	hidePostPreview,
-	...props
-} ) => {
-	return (
-		<div className="social-preview instagram-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section instagram-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on Instagram
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __(
-							'This is what your social post will look like on Instagram:',
-							'social-previews'
-						) }
-					</p>
-					<InstagramPostPreview { ...props } />
-				</section>
-			) }
-		</div>
-	);
-};

package/src/instagram-preview/style.scss

@@ -1,107 +0,0 @@
-
-
-.instagram-preview {
-	&__wrapper {
-		padding: 20px;
-		background-color: #fff;
-		margin-inline: auto;
-		max-width: clamp(200px, 100%, 555px);
-	}
-
-	// When the preview is in a section of all previews
-	&__section &__wrapper {
-		padding: 0;
-	}
-
-	&__section.social-preview__section {
-		width: clamp(200px, 100%, 555px);
-	}
-
-	&__container {
-
-		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
-		overflow: hidden;
-	}
-
-	&__header {
-
-		padding: 0.5rem 1rem;
-		display: flex;
-		gap: 0.5rem;
-
-		&--avatar {
-			display: flex;
-			align-items: center;
-			max-width: 32px;
-			max-height: 32px;
-		}
-
-		&--avatar img {
-			width: 100%;
-			height: 100%;
-			border-radius: 50%;
-		}
-
-		&--profile {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			flex-grow: 1;
-		}
-
-		&--profile-name {
-			font-weight: 700;
-		}
-	}
-
-	&__media {
-		display: flex;
-
-		&--image,
-		&--video {
-			width: 100%;
-			object-fit: cover;
-		}
-	}
-
-	&__media-item {
-		flex-grow: 1;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-
-		a {
-			text-decoration: none;
-			color: rgb(0, 55, 107);
-		}
-
-		&--actions {
-			display: flex;
-			justify-content: space-between;
-		}
-
-		&--actions-primary {
-			display: flex;
-			align-items: center;
-			gap: 1rem;
-		}
-
-		&--name {
-			font-weight: 600;
-			display: inline;
-		}
-
-		&--text {
-			display: inline;
-		}
-
-		&--footer {
-			font-weight: 400;
-			color: rgb(115, 115, 115);
-		}
-	}
-}

package/src/instagram-preview/types.ts

@@ -1,9 +0,0 @@
-import { SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
-
-export type InstagramPreviewProps = Pick< SocialPreviewBaseProps, 'image' | 'media' > & {
-	name: string;
-	profileImage: string;
-	caption?: string;
-};
-
-export type InstagramPreviewsProps = InstagramPreviewProps & SocialPreviewsBaseProps;

package/src/linkedin-preview/constants.ts

@@ -1,2 +0,0 @@
-export const FEED_TEXT_MAX_LENGTH = 212;
-export const FEED_TEXT_MAX_LINES = 3;

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

@@ -1,16 +0,0 @@
-export const DefaultAvatar: React.FC = () => {
-	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
-			<path fill="#e7e2dc" d="M0 0h128v128H0z" />
-			<path d="M88.41 84.67a32 32 0 10-48.82 0 66.13 66.13 0 0148.82 0z" fill="#788fa5" />
-			<path
-				d="M88.41 84.67a32 32 0 01-48.82 0A66.79 66.79 0 000 128h128a66.79 66.79 0 00-39.59-43.33z"
-				fill="#9db3c8"
-			/>
-			<path
-				d="M64 96a31.93 31.93 0 0024.41-11.33 66.13 66.13 0 00-48.82 0A31.93 31.93 0 0064 96z"
-				fill="#56687a"
-			/>
-		</svg>
-	);
-};

package/src/linkedin-preview/index.tsx

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

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

@@ -1,22 +0,0 @@
-import { getTitleFromDescription } from '../helpers';
-import { LinkedInPostPreview } from './post-preview';
-import { LinkedInPreviewProps } from './types';
-
-type OptionalProps = Partial< Pick< LinkedInPreviewProps, 'name' | 'profileImage' > >;
-
-export type LinkedInLinkPreviewProps = Omit< LinkedInPreviewProps, keyof OptionalProps > &
-	OptionalProps;
-
-export function LinkedInLinkPreview( props: LinkedInLinkPreviewProps ) {
-	return (
-		<LinkedInPostPreview
-			name=""
-			profileImage=""
-			{ ...props }
-			// Override the props that are irrelevant to link preview
-			description=""
-			media={ undefined }
-			title={ props.title || getTitleFromDescription( props.description ) }
-		/>
-	);
-}

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

@@ -1,117 +0,0 @@
-import { __, sprintf } from '@wordpress/i18n';
-import { baseDomain, getTitleFromDescription, preparePreviewText } from '../helpers';
-import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
-import { DefaultAvatar } from './icons/default-avatar';
-import { LinkedInPreviewProps } from './types';
-
-import './style.scss';
-
-export function LinkedInPostPreview( {
-	articleReadTime = 5,
-	image,
-	jobTitle,
-	name,
-	profileImage,
-	description,
-	media,
-	title,
-	url,
-}: LinkedInPreviewProps ) {
-	const hasMedia = !! media?.length;
-
-	return (
-		<div className="linkedin-preview__wrapper">
-			<section className={ `linkedin-preview__container ${ hasMedia ? 'has-media' : '' }` }>
-				<div className="linkedin-preview__header">
-					<div className="linkedin-preview__header--avatar">
-						{ profileImage ? <img src={ profileImage } alt="" /> : <DefaultAvatar /> }
-					</div>
-					<div className="linkedin-preview__header--profile">
-						<div className="linkedin-preview__header--profile-info">
-							<div className="linkedin-preview__header--profile-name">
-								{ name || __( 'Account Name', 'social-previews' ) }
-							</div>
-							<span>•</span>
-							<div className="linkedin-preview__header--profile-actor">
-								{
-									// translators: refers to the actor level of the post being shared, e.g. "1st", "2nd", "3rd", etc.
-									__( '1st', 'social-previews' )
-								}
-							</div>
-						</div>
-						{ jobTitle ? (
-							<div className="linkedin-preview__header--profile-title">{ jobTitle }</div>
-						) : null }
-						<div className="linkedin-preview__header--profile-meta">
-							<span>
-								{
-									// translators: refers to the time since the post was published, e.g. "1h"
-									__( '1h', 'social-previews' )
-								}
-							</span>
-							<span>•</span>
-							{ /* This is the Globe SVG that represents visibility to be "public" */ }
-							<svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" focusable="false">
-								<path d="M8 1a7 7 0 107 7 7 7 0 00-7-7zM3 8a5 5 0 011-3l.55.55A1.5 1.5 0 015 6.62v1.07a.75.75 0 00.22.53l.56.56a.75.75 0 00.53.22H7v.69a.75.75 0 00.22.53l.56.56a.75.75 0 01.22.53V13a5 5 0 01-5-5zm6.24 4.83l2-2.46a.75.75 0 00.09-.8l-.58-1.16A.76.76 0 0010 8H7v-.19a.51.51 0 01.28-.45l.38-.19a.74.74 0 01.68 0L9 7.5l.38-.7a1 1 0 00.12-.48v-.85a.78.78 0 01.21-.53l1.07-1.09a5 5 0 01-1.54 9z" />
-							</svg>
-						</div>
-					</div>
-				</div>
-				<div className="linkedin-preview__content">
-					{ description ? (
-						<div className="linkedin-preview__caption">
-							{ preparePreviewText( description, {
-								platform: 'linkedin',
-								maxChars: FEED_TEXT_MAX_LENGTH,
-								maxLines: FEED_TEXT_MAX_LINES,
-							} ) }
-						</div>
-					) : null }
-					{ hasMedia ? (
-						<div className="linkedin-preview__media">
-							{ media.map( ( mediaItem, index ) => (
-								<div
-									key={ `linkedin-preview__media-item-${ index }` }
-									className="linkedin-preview__media-item"
-								>
-									{ mediaItem.type.startsWith( 'video/' ) ? (
-										// 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 } />
-									) }
-								</div>
-							) ) }
-						</div>
-					) : (
-						<article>
-							{ image ? <img className="linkedin-preview__image" src={ image } alt="" /> : null }
-							{ url ? (
-								<div className="linkedin-preview__description">
-									<h2 className="linkedin-preview__description--title">
-										{ title || getTitleFromDescription( description ) }
-									</h2>
-									<div className="linkedin-preview__description--meta">
-										<span className="linkedin-preview__description--url">
-											{ baseDomain( url ) }
-										</span>
-										<span>•</span>
-										<span>
-											{ sprintf(
-												// translators: %d is the number of minutes it takes to read the article
-												__( '%d min read', 'social-previews' ),
-												articleReadTime
-											) }
-										</span>
-									</div>
-								</div>
-							) : null }
-						</article>
-					) }
-				</div>
-			</section>
-		</div>
-	);
-}

package/src/linkedin-preview/previews.tsx

@@ -1,53 +0,0 @@
-import { ExternalLink } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import SectionHeading from '../shared/section-heading';
-import { LinkedInLinkPreview } from './link-preview';
-import { LinkedInPostPreview } from './post-preview';
-import type { LinkedInPreviewsProps } from './types';
-
-export const LinkedInPreviews: React.FC< LinkedInPreviewsProps > = ( {
-	headingLevel,
-	hideLinkPreview,
-	hidePostPreview,
-	...props
-} ) => {
-	return (
-		<div className="social-preview linkedin-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section linkedin-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on LinkedIn
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on LinkedIn:', 'social-previews' ) }
-					</p>
-					<LinkedInPostPreview { ...props } />
-				</section>
-			) }
-			{ ! hideLinkPreview && (
-				<section className="social-preview__section linkedin-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a link to a LinkedIn 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 LinkedIn.',
-							'social-previews'
-						) }
-						&nbsp;
-						<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-							{ __( 'Learn more about links', 'social-previews' ) }
-						</ExternalLink>
-					</p>
-					<LinkedInLinkPreview { ...props } name="" profileImage="" />
-				</section>
-			) }
-		</div>
-	);
-};

package/src/linkedin-preview/style.scss

@@ -1,132 +0,0 @@
-
-
-.linkedin-preview {
-	&__wrapper {
-		padding: 20px;
-		background-color: #fff;
-		margin-inline: auto;
-		max-width: clamp(200px, 100%, 555px);
-	}
-
-	// When the preview is in a section of all previews
-	&__section &__wrapper {
-		padding: 0;
-	}
-
-	&__section.social-preview__section {
-		width: clamp(200px, 100%, 555px);
-	}
-
-	&__container {
-
-		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
-		/* stylelint-disable-next-line scales/radii */
-		border-radius: 8px;
-		overflow: hidden;
-
-		&.has-media {
-			// When the preview has media, we want to hide the border radius on the bottom
-			border-end-end-radius: 0;
-			border-end-start-radius: 0;
-		}
-	}
-
-	&__header {
-		display: flex;
-		gap: 0.5rem;
-		padding: 0.8rem 1rem 0;
-		margin-bottom: 0.8rem;
-
-		&--avatar {
-			width: 48px;
-			height: 48px;
-			border-radius: 50%;
-			overflow: hidden;
-			display: flex;
-			align-items: center;
-			flex-shrink: 0;
-		}
-
-		&--avatar img {
-			width: 100%;
-			object-fit: contain;
-		}
-
-		&--profile {
-			display: flex;
-			flex-direction: column;
-			overflow: hidden;
-		}
-
-		&--profile-title {
-			font-size: 0.75rem;
-		}
-
-		&--profile-info {
-			display: flex;
-			gap: 0.25rem;
-		}
-
-		&--profile-name {
-			font-weight: 600;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		&--profile-meta {
-			display: flex;
-			align-items: center;
-			gap: 0.25rem;
-		}
-	}
-
-	&__caption {
-		margin: 0 1rem;
-		font-size: 0.875rem;
-		line-height: 20px;
-		font-weight: 400;
-	}
-
-	&__content article,
-	&__media {
-		margin-top: 0.5rem;
-		background-color: #eef3f8;
-		display: flex;
-		flex-direction: column;
-	}
-
-	&__media-item {
-		display: flex;
-
-		img,
-		video {
-			width: 100%;
-			object-fit: cover;
-		}
-	}
-
-	&__description {
-		padding: 0.5rem 0.75rem;
-
-		&--title {
-			margin: 0;
-			font-size: 0.875rem;
-			font-weight: 600;
-		}
-
-		&--meta {
-			margin-top: 0.5rem;
-			display: flex;
-			gap: 0.25rem;
-			font-size: 0.875rem;
-			font-weight: 400;
-			color: rgba(0, 0, 0, 0.6);
-		}
-	}
-
-	&__image {
-		object-fit: cover;
-		width: 100%;
-	}
-}

package/src/linkedin-preview/types.ts

@@ -1,10 +0,0 @@
-import { SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
-
-export type LinkedInPreviewProps = SocialPreviewBaseProps & {
-	jobTitle?: string;
-	name: string;
-	profileImage: string;
-	articleReadTime?: number;
-};
-
-export type LinkedInPreviewsProps = LinkedInPreviewProps & SocialPreviewsBaseProps;