@automattic/social-previews 2.0.0 → 2.0.1-beta.1

package/src/instagram-preview/style.scss

@@ -0,0 +1,102 @@
+
+
+.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 {
+			width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__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

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

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

@@ -56,18 +56,13 @@ export function LinkedInPostPreview( {
 				</div>
 				<div className="linkedin-preview__content">
 					{ description ? (
-						<div
-							className="linkedin-preview__caption"
-							// TODO: Replace `dangerouslySetInnerHTML` with `createInterpolateElement` inside `preparePreviewText`
-							// eslint-disable-next-line react/no-danger
-							dangerouslySetInnerHTML={ {
-								__html: preparePreviewText( description, {
-									platform: 'linkedin',
-									maxChars: FEED_TEXT_MAX_LENGTH,
-									maxLines: FEED_TEXT_MAX_LINES,
-								} ),
-							} }
-						/>
+						<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">

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

@@ -36,7 +36,7 @@ export const TwitterPostPreview: React.FC< TwitterPreviewProps > = ( {
 						{ text ? <Text text={ text } url={ url || '' } retainUrl={ hasMedia } /> : null }
 						{ hasMedia ? <Media media={ media } /> : null }
 						{ tweet ? <QuoteTweet tweet={ tweet } /> : null }
-						{ ! hasMedia && title && description && image && url && (
+						{ ! hasMedia && title && description && url && (
 							<Card
 								description={ description }
 								image={ image }

package/src/twitter-preview/text.tsx

@@ -11,15 +11,9 @@ export const Text: React.FC< TextProps > = ( { text, url, retainUrl } ) => {
 			? text.substring( 0, text.lastIndexOf( url ) )
 			: text;
 
-	const __html = preparePreviewText( tweetText, { platform: 'twitter' } );
-
 	return (
-		<div
-			className="twitter-preview__text"
-			// We can enable dangerouslySetInnerHTML here, since the text we're using is stripped
-			// of all HTML tags, then only has safe tags added in createTweetMarkup().
-			// eslint-disable-next-line react/no-danger
-			dangerouslySetInnerHTML={ { __html } }
-		/>
+		<div className="twitter-preview__text">
+			{ preparePreviewText( tweetText, { platform: 'twitter' } ) }
+		</div>
 	);
 };

package/src/helpers.ts

@@ -1,107 +0,0 @@
-export type Formatter = ( text: string, options?: any ) => 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 = ( description, allowedTags = [] ) => {
-	const pattern = new RegExp( `(<([^${ allowedTags.join( '' ) }>]+)>)`, 'gi' );
-
-	return description ? description.replace( pattern, '' ) : '';
-};
-
-export const hasTag = ( text: string, tag: string ): boolean => {
-	const pattern = new RegExp( `<${ tag }[^>]*>`, 'gi' );
-
-	return pattern.test( text );
-};
-
-export const formatTweetDate = new Intl.DateTimeFormat( 'en-US', {
-	// Result: "Apr 7", "Dec 31"
-	month: 'short',
-	day: 'numeric',
-} ).format;
-
-type Platform = 'twitter' | 'facebook' | 'linkedin';
-
-type PreviewTextOptions = {
-	platform: Platform;
-	maxChars?: number;
-	maxLines?: number;
-};
-
-/**
- * Prepares the text for the preview.
- */
-export function preparePreviewText( text: string, options: PreviewTextOptions ): string {
-	const { platform, maxChars, maxLines } = options;
-
-	let result = stripHtmlTags( text );
-
-	if ( maxChars && result.length > maxChars ) {
-		result = result.substring( 0, maxChars );
-	}
-
-	if ( maxLines ) {
-		const lines = result.split( '\n' );
-
-		if ( lines.length > maxLines ) {
-			result = lines.slice( 0, maxLines ).join( '\n' );
-		}
-	}
-
-	// Convert URLs to hyperlinks.
-	result = result.replace(
-		// TODO: Use a better regex here to match the URLs without protocol.
-		/(https?:\/\/\S+)/g,
-		'<a href="$1" rel="noopener noreferrer" target="_blank">$1</a>'
-	);
-
-	let hashtagUrl;
-
-	if ( 'twitter' === platform ) {
-		hashtagUrl = 'https://twitter.com/hashtag/';
-	} else if ( 'linkedin' === platform ) {
-		hashtagUrl = 'https://www.linkedin.com/feed/hashtag/?keywords=';
-	}
-
-	if ( hashtagUrl ) {
-		// Convert hashtags to hyperlinks.
-		result = result.replace(
-			/(^|\s)#(\w+)/g,
-			'$1<a href="' + hashtagUrl + '$2" rel="noopener noreferrer" target="_blank">#$2</a>'
-		);
-	}
-
-	// Convert newlines to <br> tags.
-	result = result.replace( /\n/g, '<br/>' );
-
-	return result;
-}