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

package/src/facebook-preview/style.scss

@@ -1,210 +0,0 @@
-@import "./variables";
-@import "../shared";
-
-.facebook-preview__post {
-	overflow-y: hidden;
-	max-width: clamp(#{$facebook-preview-min-width}, 100%, #{$facebook-preview-max-width});
-	margin-inline: auto;
-
-	display: flex;
-	flex-direction: column;
-
-	background-color: $facebook-preview-card-background-color;
-	border-radius: $facebook-preview-card-border-radius;
-	box-shadow: $facebook-preview-card-box-shadow;
-
-	font-family: $facebook-preview-font-family;
-
-	:any-link {
-		color: $facebook-blue;
-
-		text-decoration: none;
-	}
-}
-
-.facebook-preview__custom-text {
-	margin: 0;
-	padding: 0 1rem 1rem;
-
-	color: $facebook-preview-text-color;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem; // 15px
-	line-height: 1.33;
-	word-break: break-word;
-}
-
-.facebook-preview__custom-text-post-url {
-	display: block;
-	margin-top: 0.5rem;
-}
-
-.facebook-preview__body {
-	display: flex;
-	flex-direction: column;
-
-	border-top: $facebook-preview-body-border;
-	border-bottom: $facebook-preview-body-border;
-
-	&.is-loading {
-		visibility: hidden;
-	}
-
-	&.is-portrait {
-		flex-direction: row;
-	}
-}
-
-.facebook-preview__text {
-	position: relative;
-
-	display: flex;
-	align-items: center;
-	flex: 1;
-
-	padding: 0.5rem 1rem;
-
-	background-color: $facebook-preview-text-background-color;
-	color: $facebook-preview-text-color;
-
-	word-break: break-word;
-}
-
-.facebook-preview__text-wrapper {
-	width: 100%;
-}
-
-.facebook-preview__url {
-	margin-bottom: 0.25rem;
-
-	color: $facebook-preview-light-text-color;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.8125rem; // 13px
-	line-height: 1;
-	text-transform: uppercase;
-}
-
-.facebook-preview__title {
-	margin: 0.25rem 0 0.125rem;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9444rem; // 17px
-	font-weight: 600;
-	line-height: 1.18;
-}
-
-.facebook-preview__description {
-	color: $facebook-preview-light-text-color;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem; // 15px
-	line-height: 1.33;
-
-	.facebook-preview__body.is-landscape &.is-compact {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-.facebook-preview__image,
-.facebook-preview__custom-image,
-.facebook-preview__media-item {
-	img,
-	video {
-		display: block;
-		object-fit: cover;
-		width: 100%;
-	}
-}
-
-.facebook-preview__image {
-	&.is-empty {
-		width: 140px;
-		height: 140px;
-
-		border-inline-end: $facebook-preview-body-border;
-	}
-
-	&.is-portrait {
-		img {
-			width: 278px;
-			height: 430px;
-		}
-	}
-
-	&.is-landscape {
-		img {
-			// At the moment of writing, the post card on Facebook.com goes from 508 to 680px wide
-			// on desktop. In landscape mode, the image takes the full width of the card, and
-			// respect the 1.91 aspect ratio at any width.
-			width: 100%;
-			aspect-ratio: 1.91;
-		}
-	}
-}
-
-.facebook-preview__custom-image,
-.facebook-preview__media-item {
-	display: flex;
-	justify-content: center;
-
-	width: 100%;
-
-	background-color: $facebook-preview-image-background;
-
-	&.is-portrait {
-		img {
-			width: 500px;
-			height: 685px;
-		}
-	}
-
-	&.is-landscape {
-		img {
-			width: 100%;
-			aspect-ratio: 1.78;
-		}
-	}
-}
-
-.facebook-preview__info {
-	position: absolute;
-	right: 15px;
-	top: -10px;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	width: 30px;
-	height: 30px;
-
-	background-color: $facebook-preview-card-background-color;
-	border: $facebook-preview-body-border;
-	border-radius: 50%;
-
-	i {
-		filter: invert(8%);
-	}
-}
-
-.facebook-preview__window {
-	margin: 0 0.75rem;
-
-	/* stylelint-disable-next-line scales/radii */
-	border-radius: 16px;
-	border: $facebook-preview-body-border;
-
-	.facebook-preview__image,
-	.facebook-preview__custom-image {
-		border-top-right-radius: inherit;
-		border-top-left-radius: inherit;
-
-		img {
-			border-top-right-radius: inherit;
-			border-top-left-radius: inherit;
-		}
-	}
-}

package/src/facebook-preview/types.ts

@@ -1,17 +0,0 @@
-import { TYPE_WEBSITE, TYPE_ARTICLE, LANDSCAPE_MODE, PORTRAIT_MODE } from '../constants';
-import type { SocialPreviewBaseProps } from '../types';
-
-export type ImageMode = typeof LANDSCAPE_MODE | typeof PORTRAIT_MODE;
-
-export type FacebookUser = {
-	displayName: string;
-	avatarUrl?: string;
-};
-
-export type FacebookPreviewProps = SocialPreviewBaseProps & {
-	user?: FacebookUser;
-	type?: typeof TYPE_WEBSITE | typeof TYPE_ARTICLE;
-	customText?: string;
-	customImage?: string;
-	imageMode?: ImageMode;
-};

package/src/facebook-preview/variables.scss

@@ -1,12 +0,0 @@
-$facebook-preview-max-width: 680px;
-$facebook-preview-min-width: 508px;
-$facebook-preview-text-color: #050505;
-$facebook-preview-light-text-color: #65676b;
-$facebook-preview-font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
-$facebook-preview-card-background-color: #fff;
-$facebook-preview-card-border-radius: 4px;
-$facebook-preview-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgb(0 0 0 / 5%);
-$facebook-preview-text-background-color: #f0f2f5;
-$facebook-preview-body-border: 1px solid #d4d0d4;
-$facebook-preview-image-background: #121212;
-$facebook-blue: #216fdb;

package/src/google-search-preview/index.tsx

@@ -1,79 +0,0 @@
-import {
-	firstValid,
-	hardTruncation,
-	shortEnough,
-	truncatedAtSpace,
-	stripHtmlTags,
-	baseDomain,
-} from '../helpers';
-import { SocialPreviewBaseProps } from '../types';
-
-import './style.scss';
-
-const URL_LENGTH = 68;
-const TITLE_LENGTH = 63;
-const DESCRIPTION_LENGTH = 160;
-
-const googleUrl = ( url: string ) => {
-	const protocol = url.startsWith( 'https://' ) ? 'https://' : 'http://';
-
-	const breadcrumb = protocol + url.replace( protocol, '' ).split( '/' ).join( ' › ' );
-
-	const truncateBreadcrumb = firstValid( shortEnough( URL_LENGTH ), hardTruncation( URL_LENGTH ) );
-
-	return truncateBreadcrumb( breadcrumb );
-};
-
-const googleTitle = firstValid(
-	shortEnough( TITLE_LENGTH ),
-	truncatedAtSpace( TITLE_LENGTH - 40, TITLE_LENGTH + 10 ),
-	hardTruncation( TITLE_LENGTH )
-);
-
-const googleDescription = firstValid(
-	shortEnough( DESCRIPTION_LENGTH ),
-	truncatedAtSpace( DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10 ),
-	hardTruncation( DESCRIPTION_LENGTH )
-);
-
-export type GoogleSearchPreviewProps = Omit< SocialPreviewBaseProps, 'image' > & {
-	siteTitle?: string;
-};
-
-export const GoogleSearchPreview: React.FC< GoogleSearchPreviewProps > = ( {
-	description = '',
-	siteTitle,
-	title = '',
-	url = '',
-} ) => {
-	const domain = baseDomain( url );
-
-	return (
-		<div className="search-preview">
-			<div className="search-preview__display">
-				<div className="search-preview__header">
-					<div className="search-preview__branding">
-						<img
-							className="search-preview__icon"
-							src={ `https://www.google.com/s2/favicons?sz=128&domain_url=${ domain }` }
-							alt=""
-						/>
-						<div className="search-preview__site">
-							<div className="search-preview__site--title">{ siteTitle || domain }</div>
-							<div className="search-preview__url">{ googleUrl( url ) }</div>
-						</div>
-					</div>
-					<div className="search-preview__menu">
-						<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-							<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
-						</svg>
-					</div>
-				</div>
-				<div className="search-preview__title">{ googleTitle( title ) }</div>
-				<div className="search-preview__description">
-					{ googleDescription( stripHtmlTags( description ) ) }
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/google-search-preview/style.scss

@@ -1,82 +0,0 @@
-/*
- * CSS values in this file are specific and
- * designed to match the CSS on external sites,
- * such as Google and Facebook. Therefore there
- * will be exceptions to our CSS guidelines here
- * but please do not "update" this file to
- * conform.
- *
- * @blame: dmsnell
-*/
-
-@import "../variables";
-
-.search-preview__display {
-	border: 1px solid var(--color-neutral-0);
-	font-family: arial, sans-serif;
-	padding: 10px 20px;
-	word-wrap: break-word;
-}
-
-.search-preview__header {
-	display: flex;
-	align-items: flex-end;
-	gap: 0.5rem;
-}
-
-.search-preview__menu {
-	height: 18px;
-	width: 18px;
-	color: #4d5156;
-	position: relative;
-}
-
-.search-preview__branding {
-	display: flex;
-	gap: 0.75rem;
-	align-items: center;
-}
-
-.search-preview__site--title {
-	color: #202124; // matching Google results
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-	font-size: 14px;
-	line-height: 20px;
-}
-
-.search-preview__icon {
-	width: 1.75rem;
-	height: 1.75rem;
-}
-
-.search-preview__title {
-	color: #1a0dab; // matching Google results
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-	font-size: 20px;
-	line-height: 1.3;
-	max-width: 616px;
-	margin-top: 8px;
-	margin-bottom: 7px;
-
-	&:hover {
-		cursor: pointer;
-		text-decoration: underline;
-	}
-}
-
-.search-preview__url {
-	color: #4d5156; // matching Google results
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-	font-size: 12px;
-	line-height: 1.3;
-	max-width: 616px;
-}
-
-.search-preview__description {
-	color: #4d5156; // matching Google results
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 1.5;// matching Google results
-	max-width: 616px;
-}

package/src/helpers.tsx

@@ -1,233 +0,0 @@
-import { createInterpolateElement } from '@wordpress/element';
-import { sprintf } from '@wordpress/i18n';
-
-export type Formatter< Options = unknown > = ( text: string, options?: Options ) => string;
-type AugmentFormatterReturnType< T extends Formatter, TNewReturn > = (
-	...a: Parameters< T >
-) => ReturnType< T > | TNewReturn;
-type ConditionalFormatter = AugmentFormatterReturnType< Formatter, boolean >;
-type NullableFormatter = AugmentFormatterReturnType< Formatter, undefined >;
-
-export const baseDomain = ( url: string ): string =>
-	url
-		.replace( /^[^/]+[/]*/, '' ) // strip leading protocol
-		.replace( /\/.*$/, '' ); // strip everything after the domain
-
-export const shortEnough: ( n: number ) => ConditionalFormatter = ( limit ) => ( title ) =>
-	title.length <= limit ? title : false;
-
-export const truncatedAtSpace: ( a: number, b: number ) => ConditionalFormatter =
-	( lower, upper ) => ( fullTitle ) => {
-		const title = fullTitle.slice( 0, upper );
-		const lastSpace = title.lastIndexOf( ' ' );
-
-		return lastSpace > lower && lastSpace < upper
-			? title.slice( 0, lastSpace ).concat( '…' )
-			: false;
-	};
-
-export const hardTruncation: ( n: number ) => Formatter = ( limit ) => ( title ) =>
-	title.slice( 0, limit ).concat( '…' );
-
-export const firstValid: ( ...args: ConditionalFormatter[] ) => NullableFormatter =
-	( ...predicates ) =>
-	( a ) =>
-		( predicates.find( ( p ) => false !== p( a ) ) as Formatter )?.( a );
-
-export const stripHtmlTags: Formatter< Array< string > > = ( description, allowedTags = [] ) => {
-	const pattern = new RegExp( `(<([^${ allowedTags.join( '' ) }>]+)>)`, 'gi' );
-
-	return description ? description.replace( pattern, '' ) : '';
-};
-
-/**
- * For social note posts we use the first 50 characters of the description.
- * @param description The post description.
- * @returns The first 50 characters of the description.
- */
-export const getTitleFromDescription = ( description: string ): string => {
-	return stripHtmlTags( description ).substring( 0, 50 );
-};
-
-export const hasTag = ( text: string, tag: string ): boolean => {
-	const pattern = new RegExp( `<${ tag }[^>]*>`, 'gi' );
-
-	return pattern.test( text );
-};
-
-export const formatNextdoorDate = new Intl.DateTimeFormat( 'en-GB', {
-	// Result: "7 Oct", "31 Dec"
-	day: 'numeric',
-	month: 'short',
-} ).format;
-
-export const formatThreadsDate = new Intl.DateTimeFormat( 'en-US', {
-	// Result: "'06/21/2024"
-	day: '2-digit',
-	month: '2-digit',
-	year: 'numeric',
-} ).format;
-
-export const formatTweetDate = new Intl.DateTimeFormat( 'en-US', {
-	// Result: "Apr 7", "Dec 31"
-	month: 'short',
-	day: 'numeric',
-} ).format;
-
-export const formatMastodonDate = new Intl.DateTimeFormat( 'en-US', {
-	// Result: "Apr 7, 2024", "Dec 31, 2023"
-	month: 'short',
-	day: 'numeric',
-	year: 'numeric',
-} ).format;
-
-export type Platform =
-	| 'bluesky'
-	| 'facebook'
-	| 'instagram'
-	| 'linkedin'
-	| 'mastodon'
-	| 'nextdoor'
-	| 'threads'
-	| 'twitter';
-
-type PreviewTextOptions = {
-	platform: Platform;
-	maxChars?: number;
-	maxLines?: number;
-	hyperlinkUrls?: boolean;
-	hyperlinkHashtags?: boolean;
-	hashtagDomain?: string;
-};
-
-export const hashtagUrlMap: Record< Platform, string > = {
-	twitter: 'https://twitter.com/hashtag/%1$s',
-	facebook: 'https://www.facebook.com/hashtag/%1$s',
-	linkedin: 'https://www.linkedin.com/feed/hashtag/?keywords=%1$s',
-	instagram: 'https://www.instagram.com/explore/tags/%1$s',
-	mastodon: 'https://%2$s/tags/%1$s',
-	nextdoor: 'https://nextdoor.com/hashtag/%1$s',
-	threads: 'https://www.threads.net/search?q=%1$s&serp_type=tags',
-	bluesky: 'https://bsky.app/hashtag/%1$s',
-};
-
-/**
- * Prepares the text for the preview.
- */
-export function preparePreviewText( text: string, options: PreviewTextOptions ): React.ReactNode {
-	const {
-		platform,
-		maxChars,
-		maxLines,
-		hyperlinkHashtags = true,
-		// Instagram doesn't support hyperlink URLs at the moment.
-		hyperlinkUrls = 'instagram' !== platform,
-	} = options;
-
-	let result = stripHtmlTags( text );
-
-	// Replace multiple new lines (2+) with 2 new lines
-	// There can be any whitespace characters in empty lines
-	// That is why "\s*"
-	result = result.replaceAll( /(?:\s*[\n\r]){2,}/g, '\n\n' );
-
-	if ( maxChars && result.length > maxChars ) {
-		result = hardTruncation( maxChars )( result );
-	}
-
-	if ( maxLines ) {
-		const lines = result.split( '\n' );
-
-		if ( lines.length > maxLines ) {
-			result = lines.slice( 0, maxLines ).join( '\n' );
-		}
-	}
-
-	const componentMap: Record< string, React.ReactElement > = {};
-
-	if ( hyperlinkUrls ) {
-		// Convert URLs to hyperlinks.
-		// TODO: Use a better regex here to match the URLs without protocol.
-		const urls = result.match( /(https?:\/\/\S+)/g ) || [];
-
-		/**
-		 * BEFORE:
-		 * result = 'Check out this cool site: https://wordpress.org and this one: https://wordpress.com'
-		 */
-		urls.forEach( ( url, index ) => {
-			// Add the element to the component map.
-			componentMap[ `Link${ index }` ] = (
-				<a href={ url } rel="noopener noreferrer" target="_blank">
-					{ url }
-				</a>
-			);
-			// Replace the URL with the component placeholder.
-			result = result.replace( url, `<Link${ index } />` );
-		} );
-		/**
-		 * AFTER:
-		 * result = 'Check out this cool site: <Link0 /> and this one: <Link1 />'
-		 * componentMap = {
-		 *     Link0: <a href="https://wordpress.org" ...>https://wordpress.org</a>,
-		 *     Link1: <a href="https://wordpress.com" ...>https://wordpress.com</a>
-		 * }
-		 */
-	}
-
-	// Convert hashtags to hyperlinks.
-	if ( hyperlinkHashtags && hashtagUrlMap[ platform ] ) {
-		/**
-		 * We need to ensure that only the standalone hashtags are matched.
-		 * For example, we don't want to match the hash in the URL.
-		 * Thus we need to match the whitespace character before the hashtag or the beginning of the string.
-		 */
-		const hashtags = result.matchAll( /(^|\s)#(\w+)/g );
-
-		const hashtagUrl = hashtagUrlMap[ platform ];
-
-		/**
-		 * BEFORE:
-		 * result = `#breaking text with a #hashtag on the #web
-		 * with a url https://github.com/Automattic/wp-calypso#security that has a hash in it`
-		 */
-		[ ...hashtags ].forEach( ( [ fullMatch, whitespace, hashtag ], index ) => {
-			const url = sprintf( hashtagUrl, hashtag, options.hashtagDomain );
-
-			// Add the element to the component map.
-			componentMap[ `Hashtag${ index }` ] = (
-				<a href={ url } rel="noopener noreferrer" target="_blank">
-					{ `#${ hashtag }` }
-				</a>
-			);
-
-			// Replace the hashtag with the component placeholder.
-			result = result.replace( fullMatch, `${ whitespace }<Hashtag${ index } />` );
-		} );
-		/**
-		 * AFTER:
-		 * result = `<Hashtag0 /> text with a <Hashtag1 /> on the <Hashtag2 />
-		 * with a url https://github.com/Automattic/wp-calypso#security that has a hash in it`
-		 *
-		 * componentMap = {
-		 *    Hashtag0: <a href="https://twitter.com/hashtag/breaking" ...>#breaking</a>,
-		 *    Hashtag1: <a href="https://twitter.com/hashtag/hashtag" ...>#hashtag</a>,
-		 *    Hashtag2: <a href="https://twitter.com/hashtag/web" ...>#web</a>
-		 * }
-		 */
-	}
-
-	// Convert newlines to <br> tags.
-	/**
-	 * BEFORE:
-	 * result = 'This is a text\nwith a newline\nin it'
-	 */
-	result = result.replace( /\n/g, '<br />' );
-	componentMap.br = <br />;
-	/**
-	 * AFTER:
-	 * result = 'This is a text<br />with a newline<br />in it'
-	 * componentMap = { br: <br /> }
-	 */
-
-	return createInterpolateElement( result, componentMap );
-}

package/src/index.ts

@@ -1,12 +0,0 @@
-export * from './google-search-preview';
-export * from './twitter-preview';
-export * from './linkedin-preview';
-export * from './tumblr-preview';
-export * from './facebook-preview';
-export * from './mastodon-preview';
-export * from './nextdoor-preview';
-export * from './bluesky-preview';
-export * from './threads-preview';
-export * from './constants';
-export * from './instagram-preview';
-export * from './types';

package/src/instagram-preview/constants.tsx

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

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

@@ -1,21 +0,0 @@
-export const Bookmark: 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"
-		>
-			<polygon
-				fill="none"
-				points="20 21 12 13.44 4 21 4 3 20 3 20 21"
-				stroke="currentColor"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth="2"
-			></polygon>
-		</svg>
-	);
-};

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

@@ -1,20 +0,0 @@
-export const Comment: 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="M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z"
-				fill="none"
-				stroke="currentColor"
-				strokeLinejoin="round"
-				strokeWidth="2"
-			></path>
-		</svg>
-	);
-};