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

package/src/constants.ts

@@ -1,9 +0,0 @@
-export const AUTO_SHARED_SOCIAL_POST_PREVIEW = 'AUTO_SHARED_SOCIAL_POST_PREVIEW';
-export const AUTO_SHARED_LINK_PREVIEW = 'AUTO_SHARED_LINK_PREVIEW';
-export const DEFAULT_LINK_PREVIEW = 'DEFAULT_LINK_PREVIEW';
-
-export const TYPE_WEBSITE = 'website';
-export const TYPE_ARTICLE = 'article';
-
-export const LANDSCAPE_MODE = 'landscape';
-export const PORTRAIT_MODE = 'portrait';

package/src/facebook-preview/custom-text.tsx

@@ -1,39 +0,0 @@
-import { hasTag, preparePreviewText } from '../helpers';
-import { CUSTOM_TEXT_LENGTH } from './helpers';
-
-type Props = {
-	text: string;
-	url: string;
-	forceUrlDisplay?: boolean;
-};
-
-const CustomText: React.FC< Props > = ( { text, url, forceUrlDisplay } ) => {
-	let postLink;
-
-	if ( forceUrlDisplay || hasTag( text, 'a' ) ) {
-		postLink = (
-			<a
-				className="facebook-preview__custom-text-post-url"
-				href={ url }
-				rel="nofollow noopener noreferrer"
-				target="_blank"
-			>
-				{ url }
-			</a>
-		);
-	}
-
-	return (
-		<p className="facebook-preview__custom-text">
-			<span>
-				{ preparePreviewText( text, {
-					platform: 'facebook',
-					maxChars: CUSTOM_TEXT_LENGTH,
-				} ) }
-			</span>
-			{ postLink }
-		</p>
-	);
-};
-
-export default CustomText;

package/src/facebook-preview/helpers.ts

@@ -1,22 +0,0 @@
-import { firstValid, hardTruncation, shortEnough, stripHtmlTags, Formatter } from '../helpers';
-
-const TITLE_LENGTH = 110;
-const DESCRIPTION_LENGTH = 200;
-export const CUSTOM_TEXT_LENGTH = 440;
-
-export const baseDomain: Formatter = ( url ) =>
-	url
-		.replace( /^[^/]+[/]*/, '' ) // strip leading protocol
-		.replace( /\/.*$/, '' ); // strip everything after the domain
-
-export const facebookTitle: Formatter = ( text ) =>
-	firstValid(
-		shortEnough( TITLE_LENGTH ),
-		hardTruncation( TITLE_LENGTH )
-	)( stripHtmlTags( text ) ) || '';
-
-export const facebookDescription: Formatter = ( text ) =>
-	firstValid(
-		shortEnough( DESCRIPTION_LENGTH ),
-		hardTruncation( DESCRIPTION_LENGTH )
-	)( stripHtmlTags( text ) ) || '';

package/src/facebook-preview/hooks/use-image-hook.ts

@@ -1,41 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useCallback, useState } from 'react';
-import { LANDSCAPE_MODE, PORTRAIT_MODE } from '../../constants';
-import type { ImageMode } from '../types';
-
-type ImageEventHandler = ( event: React.SyntheticEvent< HTMLImageElement > ) => void;
-type ImgProps = {
-	alt: string;
-	onLoad: ImageEventHandler;
-	onError: ImageEventHandler;
-};
-type UseImage = ( arg0: { mode?: ImageMode } ) => [ ImageMode | undefined, boolean, ImgProps ];
-
-const useImage: UseImage = ( { mode: initialMode } ) => {
-	const [ mode, setMode ] = useState< ImageMode | undefined >( initialMode );
-	const [ isLoadingImage, setLoadingImage ] = useState< boolean >( true );
-
-	const onLoad = useCallback< ImageEventHandler >(
-		( { target } ) => {
-			if ( ! mode ) {
-				const image = target as HTMLImageElement;
-				setMode( image.naturalWidth > image.naturalHeight ? LANDSCAPE_MODE : PORTRAIT_MODE );
-			}
-			setLoadingImage( false );
-		},
-		[ mode ]
-	);
-	const onError = useCallback( () => setLoadingImage( false ), [] );
-
-	return [
-		mode,
-		isLoadingImage,
-		{
-			alt: __( 'Facebook Preview Thumbnail', 'social-previews' ),
-			onLoad,
-			onError,
-		},
-	];
-};
-
-export default useImage;

package/src/facebook-preview/index.tsx

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

package/src/facebook-preview/link-preview-details.tsx

@@ -1,38 +0,0 @@
-import { PORTRAIT_MODE } from '../constants';
-import CustomText from './custom-text';
-import useImage from './hooks/use-image-hook';
-import FacebookPostActions from './post/actions';
-import FacebookPostHeader from './post/header';
-import type { FacebookPreviewProps } from './types';
-
-export const LinkPreviewDetails: React.FC< FacebookPreviewProps > = ( {
-	url,
-	customImage,
-	user,
-	customText,
-	imageMode,
-} ) => {
-	const [ mode, isLoadingImage, imgProps ] = useImage( { mode: imageMode } );
-	const modeClass = `is-${ mode === PORTRAIT_MODE ? 'portrait' : 'landscape' }`;
-
-	return (
-		<div className="facebook-preview__post">
-			<FacebookPostHeader user={ undefined } />
-			<div className="facebook-preview__content">
-				<div
-					className={ `facebook-preview__window ${ modeClass } ${
-						customImage && isLoadingImage ? 'is-loading' : ''
-					}` }
-				>
-					<div className={ `facebook-preview__custom-image ${ modeClass }` }>
-						{ /* eslint-disable jsx-a11y/alt-text */ }
-						<img src={ customImage } { ...imgProps } />
-					</div>
-					<FacebookPostHeader user={ user } timeElapsed hideOptions />
-					{ customText && <CustomText text={ customText } url={ url } forceUrlDisplay /> }
-				</div>
-			</div>
-			<FacebookPostActions />
-		</div>
-	);
-};

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

@@ -1,78 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { TYPE_ARTICLE, PORTRAIT_MODE } from '../constants';
-import CustomText from './custom-text';
-import { baseDomain, facebookTitle, facebookDescription } from './helpers';
-import useImage from './hooks/use-image-hook';
-import FacebookPostActions from './post/actions';
-import FacebookPostHeader from './post/header';
-import FacebookPostIcon from './post/icons';
-import type { FacebookPreviewProps } from './types';
-
-import './style.scss';
-
-export type FacebookLinkPreviewProps = FacebookPreviewProps & {
-	compactDescription?: boolean;
-};
-
-export const FacebookLinkPreview: React.FC< FacebookLinkPreviewProps > = ( {
-	url,
-	title,
-	description,
-	image,
-	user,
-	customText,
-	type,
-	imageMode,
-	compactDescription,
-} ) => {
-	const [ mode, isLoadingImage, imgProps ] = useImage( { mode: imageMode } );
-	const isArticle = type === TYPE_ARTICLE;
-	const portraitMode = ( isArticle && ! image ) || mode === PORTRAIT_MODE;
-	const modeClass = `is-${ portraitMode ? 'portrait' : 'landscape' }`;
-
-	return (
-		<div className="facebook-preview__post">
-			<FacebookPostHeader user={ user } />
-			<div className="facebook-preview__content">
-				{ customText && <CustomText text={ customText } url={ url } /> }
-				<div
-					className={ `facebook-preview__body ${ modeClass } ${
-						image && isLoadingImage ? 'is-loading' : ''
-					}` }
-				>
-					{ ( image || isArticle ) && (
-						<div
-							className={ `facebook-preview__image ${ image ? '' : 'is-empty' } ${ modeClass }` }
-						>
-							{ /* eslint-disable jsx-a11y/alt-text */ }
-							{ image && <img src={ image } { ...imgProps } /> }
-						</div>
-					) }
-					<div className="facebook-preview__text">
-						<div className="facebook-preview__text-wrapper">
-							<div className="facebook-preview__url">{ baseDomain( url ) }</div>
-							<div className="facebook-preview__title">
-								{ facebookTitle( title ) || baseDomain( url ) }
-							</div>
-							<div
-								className={ `facebook-preview__description ${
-									compactDescription ? 'is-compact' : ''
-								}` }
-							>
-								{ description && facebookDescription( description ) }
-								{ isArticle &&
-									! description &&
-									// translators: Default description for a Facebook post
-									__( 'Visit the post for more.', 'social-previews' ) }
-							</div>
-							<div className="facebook-preview__info">
-								<FacebookPostIcon name="info" />
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<FacebookPostActions />
-		</div>
-	);
-};

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

@@ -1,33 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import FacebookPostIcon from '../icons';
-
-import './styles.scss';
-
-const FacebookPostActions: React.FC = () => (
-	<ul className="facebook-preview__post-actions">
-		{ [
-			{
-				icon: 'like',
-				// translators: Facebook "Like" action
-				label: __( 'Like', 'social-previews' ),
-			},
-			{
-				icon: 'comment',
-				// translators: Facebook "Comment" action
-				label: __( 'Comment', 'social-previews' ),
-			},
-			{
-				icon: 'share',
-				// translators: Facebook "Share" action
-				label: __( 'Share', 'social-previews' ),
-			},
-		].map( ( { icon, label } ) => (
-			<li key={ icon }>
-				<FacebookPostIcon name={ icon } />
-				<span>{ label }</span>
-			</li>
-		) ) }
-	</ul>
-);
-
-export default FacebookPostActions;

package/src/facebook-preview/post/actions/styles.scss

@@ -1,28 +0,0 @@
-@import "../../variables";
-
-.facebook-preview__post-actions {
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-
-	width: 100%;
-	height: 2.625rem; // 42px
-	margin: 0;
-	padding: 0;
-
-	color: $facebook-preview-light-text-color;
-	list-style-type: none;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem; // 15px
-	font-weight: 600;
-	line-height: 1.33;
-
-	> li {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-
-		margin: 0;
-	}
-}

package/src/facebook-preview/post/header/index.tsx

@@ -1,67 +0,0 @@
-import { __, _x } from '@wordpress/i18n';
-import { useCallback, useState } from 'react';
-import FacebookPostIcon from '../icons';
-import type { FacebookUser } from '../../types';
-
-import './styles.scss';
-
-const defaultAvatar =
-	'data:image/png;base64,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';
-
-type Props = {
-	user?: FacebookUser;
-	timeElapsed?: boolean;
-	hideOptions?: boolean;
-};
-
-const FacebookPostHeader: React.FC< Props > = ( { user, timeElapsed, hideOptions } ) => {
-	const [ avatarSrc, setAvatarSrc ] = useState< string >( user?.avatarUrl || defaultAvatar );
-	const onImageError = useCallback( () => {
-		if ( avatarSrc !== defaultAvatar ) {
-			setAvatarSrc( defaultAvatar );
-		}
-	}, [ avatarSrc ] );
-
-	return (
-		<div className="facebook-preview__post-header">
-			<div className="facebook-preview__post-header-content">
-				<img
-					className="facebook-preview__post-header-avatar"
-					src={ avatarSrc }
-					alt=""
-					onError={ onImageError }
-				/>
-				<div>
-					<div className="facebook-preview__post-header-name">
-						{ user?.displayName ||
-							// translators: name of a fictional Facebook User
-							__( 'Anonymous User', 'social-previews' ) }
-					</div>
-					<div className="facebook-preview__post-header-share">
-						<span className="facebook-preview__post-header-time">
-							{ timeElapsed
-								? __(
-										// translators: short version of `1 hour`
-										'1h',
-										'social-previews'
-								  )
-								: _x(
-										// translators: temporal indication of when a post was published
-										'Just now',
-										'',
-										'social-previews'
-								  ) }
-						</span>
-						<span className="facebook-preview__post-header-dot" aria-hidden="true">
-							·
-						</span>
-						<FacebookPostIcon name="public" />
-					</div>
-				</div>
-			</div>
-			{ ! hideOptions && <div className="facebook-preview__post-header-more"></div> }
-		</div>
-	);
-};
-
-export default FacebookPostHeader;

package/src/facebook-preview/post/header/styles.scss

@@ -1,65 +0,0 @@
-@import "../../variables";
-
-.facebook-preview__post-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	box-sizing: border-box;
-	width: 100%;
-
-	padding: 0.75rem 1rem 0.5rem;
-	min-height: 60px;
-}
-
-.facebook-preview__post-header-content {
-	display: flex;
-	gap: 0.5rem;
-}
-
-.facebook-preview__post-header-avatar {
-	width: 40px;
-	height: 40px;
-
-	background-color: #caccd1;
-	border-radius: 50%;
-	border: solid 1px #e5e5e5;
-}
-
-.facebook-preview__post-header-name {
-	color: $facebook-preview-text-color;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem; // 15px
-	font-weight: 600;
-	line-height: 1.33;
-}
-
-.facebook-preview__post-header-share {
-	display: flex;
-	align-items: center;
-
-	color: $facebook-preview-light-text-color;
-}
-
-.facebook-preview__post-header-time {
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.8125rem; // 13px
-	line-height: 1.23;
-}
-
-.facebook-preview__post-header-dot {
-	width: 0.625rem;
-
-	text-align: center;
-}
-
-.facebook-preview__post-header-more {
-	width: 1.25rem;
-	height: 0.25rem;
-
-	margin: 0 0.625rem 0 0;
-
-	background-image: radial-gradient(circle at 0.125rem 0.125rem, $facebook-preview-light-text-color 2px, transparent 0);
-	background-size: 0.5rem 0.25rem;
-}

package/src/facebook-preview/post/icons/index.tsx

@@ -1,7 +0,0 @@
-import './styles.scss';
-
-const FacebookPostIcon: React.FC< { name: string } > = ( { name } ) => (
-	<i className={ `facebook-preview__post-icon facebook-preview__post-icon-${ name }` } />
-);
-
-export default FacebookPostIcon;

package/src/facebook-preview/post/icons/styles.scss

@@ -1,45 +0,0 @@
-.facebook-preview__post-icon {
-	display: inline-block;
-
-	/* stylelint-disable-next-line function-url-quotes */
-	background-image: url("data:image/png;base64,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");
-	background-repeat: no-repeat;
-	background-size: 73px 18px;
-
-	filter: invert(40%);
-}
-
-.facebook-preview__post-icon-like {
-	width: 18px;
-	height: 18px;
-
-	background-position: 0 0;
-}
-
-.facebook-preview__post-icon-comment {
-	width: 18px;
-	height: 18px;
-
-	background-position: -18px 0;
-}
-
-.facebook-preview__post-icon-share {
-	width: 18px;
-	height: 18px;
-
-	background-position: -36px 0;
-}
-
-.facebook-preview__post-icon-info {
-	width: 7px;
-	height: 14px;
-
-	background-position: -54px 0;
-}
-
-.facebook-preview__post-icon-public {
-	width: 12px;
-	height: 12px;
-
-	background-position: -61px 0;
-}

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

@@ -1,50 +0,0 @@
-import { PORTRAIT_MODE } from '../constants';
-import CustomText from './custom-text';
-import useImage from './hooks/use-image-hook';
-import FacebookPostActions from './post/actions';
-import FacebookPostHeader from './post/header';
-import type { FacebookPreviewProps } from './types';
-
-import './style.scss';
-
-export const FacebookPostPreview: React.FC< FacebookPreviewProps > = ( {
-	url,
-	user,
-	customText,
-	media,
-	imageMode,
-} ) => {
-	const [ mode ] = useImage( { mode: imageMode } );
-	const modeClass = `is-${ mode === PORTRAIT_MODE ? 'portrait' : 'landscape' }`;
-
-	return (
-		<div className="facebook-preview__post">
-			<FacebookPostHeader user={ user } />
-			<div className="facebook-preview__content">
-				{ customText && <CustomText text={ customText } url={ url } forceUrlDisplay /> }
-				<div className="facebook-preview__body">
-					{ media ? (
-						<div className={ `facebook-preview__media ${ modeClass }` }>
-							{ media.map( ( mediaItem, index ) => (
-								<div
-									key={ `facebook-preview__media-item-${ index }` }
-									className={ `facebook-preview__media-item ${ modeClass }` }
-								>
-									{ 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>
-					) : null }
-				</div>
-			</div>
-			<FacebookPostActions />
-		</div>
-	);
-};

package/src/facebook-preview/previews.tsx

@@ -1,64 +0,0 @@
-import { ExternalLink } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import SectionHeading from '../shared/section-heading';
-import { SocialPreviewsBaseProps } from '../types';
-import { FacebookLinkPreview } from './link-preview';
-import { LinkPreviewDetails } from './link-preview-details';
-import { FacebookPostPreview } from './post-preview';
-import type { FacebookPreviewProps } from './types';
-
-export type FacebookPreviewsProps = FacebookPreviewProps & SocialPreviewsBaseProps;
-
-export const FacebookPreviews: React.FC< FacebookPreviewsProps > = ( {
-	headingLevel,
-	hideLinkPreview,
-	hidePostPreview,
-	...props
-} ) => {
-	const hasMedia = !! props.media?.length;
-	const hasCustomImage = !! props.customImage;
-
-	return (
-		<div className="social-preview facebook-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section facebook-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on Facebook
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on Facebook:', 'social-previews' ) }
-					</p>
-					{ hasMedia ? <FacebookPostPreview { ...props } /> : <FacebookLinkPreview { ...props } /> }
-				</section>
-			) }
-			{ ! hideLinkPreview && (
-				<section className="social-preview__section facebook-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a link to a Facebook 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 Facebook.',
-							'social-previews'
-						) }
-						&nbsp;
-						<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-							{ __( 'Learn more about links', 'social-previews' ) }
-						</ExternalLink>
-					</p>
-					{ hasCustomImage ? (
-						<LinkPreviewDetails { ...props } />
-					) : (
-						<FacebookLinkPreview { ...props } compactDescription customText="" user={ undefined } />
-					) }
-				</section>
-			) }
-		</div>
-	);
-};