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

package/dist/types/instagram-preview/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const FEED_TEXT_MAX_LENGTH = 120;
+export declare const FEED_TEXT_MAX_LINES = 2;
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/instagram-preview/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/instagram-preview/constants.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,mBAAmB,IAAI,CAAC"}

package/dist/types/instagram-preview/icons/bookmark.d.ts

@@ -0,0 +1,2 @@
+export declare const Bookmark: React.FC;
+//# sourceMappingURL=bookmark.d.ts.map

package/dist/types/instagram-preview/icons/bookmark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bookmark.d.ts","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/bookmark.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAoB5B,CAAC"}

package/dist/types/instagram-preview/icons/comment.d.ts

@@ -0,0 +1,2 @@
+export declare const Comment: React.FC;
+//# sourceMappingURL=comment.d.ts.map

package/dist/types/instagram-preview/icons/comment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment.d.ts","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/comment.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAmB3B,CAAC"}

package/dist/types/instagram-preview/icons/default-avatar.d.ts

@@ -0,0 +1,2 @@
+export declare const DefaultAvatar: React.FC;
+//# sourceMappingURL=default-avatar.d.ts.map

package/dist/types/instagram-preview/icons/default-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-avatar.d.ts","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/default-avatar.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EASjC,CAAC"}

package/dist/types/instagram-preview/icons/heart.d.ts

@@ -0,0 +1,2 @@
+export declare const Heart: React.FC;
+//# sourceMappingURL=heart.d.ts.map

package/dist/types/instagram-preview/icons/heart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heart.d.ts","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/heart.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAazB,CAAC"}

package/dist/types/instagram-preview/icons/menu.d.ts

@@ -0,0 +1,2 @@
+export declare const Menu: React.FC;
+//# sourceMappingURL=menu.d.ts.map

package/dist/types/instagram-preview/icons/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/menu.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAuBxB,CAAC"}

package/dist/types/instagram-preview/icons/share.d.ts

@@ -0,0 +1,2 @@
+export declare const Share: React.FC;
+//# sourceMappingURL=share.d.ts.map

package/dist/types/instagram-preview/icons/share.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"share.d.ts","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/share.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EA6BzB,CAAC"}

package/dist/types/instagram-preview/index.d.ts

@@ -0,0 +1,3 @@
+export * from './post-preview';
+export * from './previews';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/instagram-preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/instagram-preview/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC"}

package/dist/types/instagram-preview/post-preview.d.ts

@@ -0,0 +1,4 @@
+import { InstagramPreviewProps } from './types';
+import './style.scss';
+export declare function InstagramPostPreview({ image, name, profileImage, caption, }: InstagramPreviewProps): JSX.Element;
+//# sourceMappingURL=post-preview.d.ts.map

package/dist/types/instagram-preview/post-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-preview.d.ts","sourceRoot":"","sources":["../../../src/instagram-preview/post-preview.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,cAAc,CAAC;AAEtB,wBAAgB,oBAAoB,CAAE,EACrC,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,OAAO,GACP,EAAE,qBAAqB,eAoDvB"}

package/dist/types/instagram-preview/previews.d.ts

@@ -0,0 +1,3 @@
+import type { InstagramPreviewsProps } from './types';
+export declare const InstagramPreviews: React.FC<InstagramPreviewsProps>;
+//# sourceMappingURL=previews.d.ts.map

package/dist/types/instagram-preview/previews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previews.d.ts","sourceRoot":"","sources":["../../../src/instagram-preview/previews.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAE,sBAAsB,CA2B/D,CAAC"}

package/dist/types/instagram-preview/types.d.ts

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

package/dist/types/instagram-preview/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/instagram-preview/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAE3E,oBAAY,qBAAqB,GAAG,IAAI,CAAE,sBAAsB,EAAE,OAAO,CAAE,GAAG;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,sBAAsB,GAAG,qBAAqB,GAAG,uBAAuB,CAAC"}

package/dist/types/linkedin-preview/post-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"post-preview.d.ts","sourceRoot":"","sources":["../../../src/linkedin-preview/post-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,wBAAgB,mBAAmB,CAAE,EACpC,eAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,GAAG,GACH,EAAE,oBAAoB,eAmGtB"}
+{"version":3,"file":"post-preview.d.ts","sourceRoot":"","sources":["../../../src/linkedin-preview/post-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,wBAAgB,mBAAmB,CAAE,EACpC,eAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,GAAG,GACH,EAAE,oBAAoB,eA8FtB"}

package/dist/types/twitter-preview/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/twitter-preview/text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAE,SAAS,CAqBrC,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/twitter-preview/text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAE,SAAS,CAerC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/social-previews",
-  "version": "2.0.0",
+  "version": "2.0.1-beta.1",
   "description": "A suite of components to generate previews for a post for both social and search engines.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -1,5 +1,5 @@
-import { hasTag } from '../helpers';
-import { facebookCustomText } from './helpers';
+import { hasTag, preparePreviewText } from '../helpers';
+import { CUSTOM_TEXT_LENGTH } from './helpers';
 
 type Props = {
 	text: string;
@@ -25,10 +25,12 @@ const CustomText: React.FC< Props > = ( { text, url, forceUrlDisplay } ) => {
 
 	return (
 		<p className="facebook-preview__custom-text">
-			<span
-				// eslint-disable-next-line react/no-danger
-				dangerouslySetInnerHTML={ { __html: facebookCustomText( text, { allowedTags: [ 'a' ] } ) } }
-			/>
+			<span>
+				{ preparePreviewText( text, {
+					platform: 'facebook',
+					maxChars: CUSTOM_TEXT_LENGTH,
+				} ) }
+			</span>
 			{ postLink }
 		</p>
 	);

package/src/facebook-preview/helpers.ts

@@ -2,7 +2,7 @@ import { firstValid, hardTruncation, shortEnough, stripHtmlTags, Formatter } fro
 
 const TITLE_LENGTH = 110;
 const DESCRIPTION_LENGTH = 200;
-const CUSTOM_TEXT_LENGTH = 440;
+export const CUSTOM_TEXT_LENGTH = 440;
 
 export const baseDomain: Formatter = ( url ) =>
 	url
@@ -20,9 +20,3 @@ export const facebookDescription: Formatter = ( text ) =>
 		shortEnough( DESCRIPTION_LENGTH ),
 		hardTruncation( DESCRIPTION_LENGTH )
 	)( stripHtmlTags( text ) ) || '';
-
-export const facebookCustomText: Formatter = ( text, options ) =>
-	firstValid(
-		shortEnough( CUSTOM_TEXT_LENGTH ),
-		hardTruncation( CUSTOM_TEXT_LENGTH )
-	)( stripHtmlTags( text, options?.allowedTags ) ) || '';

package/src/helpers.tsx

@@ -0,0 +1,186 @@
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf } from '@wordpress/i18n';
+
+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;
+
+export type Platform = 'twitter' | 'facebook' | 'linkedin' | 'instagram';
+
+type PreviewTextOptions = {
+	platform: Platform;
+	maxChars?: number;
+	maxLines?: number;
+	hyperlinkUrls?: boolean;
+	hyperlinkHashtags?: boolean;
+};
+
+export const hashtagUrlMap: Record< Platform, string > = {
+	twitter: 'https://twitter.com/hashtag/%s',
+	facebook: 'https://www.facebook.com/hashtag/%s',
+	linkedin: 'https://www.linkedin.com/feed/hashtag/?keywords=%s',
+	instagram: 'https://www.instagram.com/explore/tags/%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 );
+
+	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' );
+		}
+	}
+
+	const componentMap: Record< string, React.ReactNode > = {};
+
+	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 );
+
+			// 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

@@ -4,4 +4,5 @@ export * from './linkedin-preview';
 export * from './tumblr-preview';
 export * from './facebook-preview';
 export * from './constants';
+export * from './instagram-preview';
 export * from './types';

package/src/instagram-preview/constants.tsx

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

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

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

@@ -0,0 +1,20 @@
+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>
+	);
+};

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

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

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

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

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

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

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

@@ -0,0 +1,71 @@
+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,
+	name,
+	profileImage,
+	caption,
+}: InstagramPreviewProps ) {
+	const username = name || 'username';
+
+	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">
+					<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,
+									hyperlinkUrls: false,
+								} ) }
+							</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

@@ -0,0 +1,33 @@
+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,
+	hideLinkPreview,
+	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>
+	);
+};