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

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

@@ -1,47 +0,0 @@
-@import "../../variables";
-
-.tumblr-preview__post-actions {
-	margin-top: 0.25rem;
-	padding: 0 $tumblr-preview-card-inline-padding;
-
-	color: $tumblr-preview-action-text-color;
-
-	font-size: 1rem; // 16px
-	font-weight: 700;
-	line-height: 1.5;
-}
-
-.tumblr-preview__post-manage-actions,
-.tumblr-preview__post-social-actions {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	min-height: 3.5rem;
-
-	ul {
-		display: flex;
-		align-items: center;
-		gap: 1.25rem;
-
-		margin: 0;
-		padding: 0;
-
-		list-style-type: none;
-
-		> li {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-}
-
-.tumblr-preview__post-social-actions {
-	border-top: $tumblr-preview-border;
-}
-
-.tumblr-preview__post-actions-blaze {
-	display: flex;
-	align-items: center;
-}

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

@@ -1,20 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import TumblrPostIcon from '../icons';
-import type { TumblrPreviewProps } from '../../types';
-
-import './styles.scss';
-
-type Props = Pick< TumblrPreviewProps, 'user' >;
-
-const TumblrPostHeader: React.FC< Props > = ( { user } ) => (
-	<div className="tumblr-preview__post-header">
-		<div className="tumblr-preview__post-header-username">
-			{ user?.displayName ||
-				// translators: username of a fictional Tumblr User
-				__( 'anonymous-user', 'social-previews' ) }
-		</div>
-		<TumblrPostIcon name="ellipsis" />
-	</div>
-);
-
-export default TumblrPostHeader;

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

@@ -1,16 +0,0 @@
-@import "../../variables";
-
-.tumblr-preview__post-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	margin: 1rem 0;
-	padding: 0 $tumblr-preview-card-inline-padding;
-}
-
-.tumblr-preview__post-header-username {
-	font-size: 0.875rem; // 14px
-	font-weight: 700;
-	line-height: 1.5;
-}

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

@@ -1,73 +0,0 @@
-import './styles.scss';
-
-const TumblrPostIcon: React.FC< { name: string } > = ( { name } ) => {
-	let svg;
-
-	switch ( name ) {
-		case 'blaze':
-			svg = (
-				<svg viewBox="0 0 25 22">
-					<path d="m7.5059-0.24414c-0.79843 0.057223-1.2169 0.88587-1.1635 1.6128-0.2266 2.0449-1.4898 3.8696-3.1975 4.9778-3.0182 2.414-4.2201 6.8066-2.8033 10.411 0.92417 2.4679 2.9589 4.5674 5.4768 5.3928 0.95914 0.16102 1.7233-0.94358 1.3074-1.8059-0.11578-0.51062-0.17482-0.96516-0.17845-1.487 1.0413 1.5607 2.5484 2.8986 4.341 3.4975 1.0396-0.0154 1.98-0.64458 2.8516-1.1608 3.3821-2.1786 4.9604-6.7097 3.6597-10.518-0.49144-1.4599-1.2948-2.8935-2.5028-3.8698-0.7512-0.45498-1.661 0.09677-1.9202 0.86038-0.12274 0.16822-0.70352 1.1955-0.6191 0.61976 0.25488-3.4397-1.6789-7.0066-4.8123-8.4958-0.14322-0.037843-0.292-0.049464-0.43945-0.035156zm1.0586 3.5605c1.8947 2.0016 2.2326 5.1984 0.89062 7.5879-0.38498 0.96148 0.71762 2.0063 1.6567 1.5681 1.4159-0.4624 2.6998-1.3259 3.6577-2.4665 1.6442 2.5888 1.1465 6.2819-1.0629 8.3379-0.62378 0.60782-1.3666 1.0945-2.1754 1.4179-1.9543-0.989-3.3534-3.0966-3.5625-5.3125-0.25636-1.0253-1.81-1.2013-2.2852-0.25781-0.75058 1.3054-1.1846 2.7948-1.2305 4.3008-2.2396-1.9852-2.8468-5.4435-1.4609-8.0527 0.58926-1.239 1.651-2.13 2.724-2.9329 1.2958-1.1271 2.2791-2.62 2.7682-4.2683l0.071578 0.069832z"></path>
-				</svg>
-			);
-			break;
-		case 'delete':
-			svg = (
-				<svg viewBox="0 0 14 17">
-					<path d="M12 5v9c.1.7-.3 1-1 1H3c-.5 0-.9-.3-1-1V5c0-.6-.4-1-1-1-.5 0-1 .4-1 1v9.5C0 16.1 1.4 17 3 17h8c1.8 0 3-.8 3-2.5V5c0-.6-.5-1-1-1-.6 0-1 .5-1 1z"></path>
-					<path d="M4 12s0 1 1 1 1-1 1-1V5c0-.5-.4-1-1-1-.5 0-1 .5-1 1v7zm4 0s0 1 1 1 1-1 1-1V5c0-.5-.4-1-1-1-.5 0-1 .5-1 1v7zm5-10c.5 0 1-.4 1-1 0-.5-.4-.9-1-1H1C.5.1 0 .5 0 1c0 .6.6 1 1.1 1H13z"></path>
-				</svg>
-			);
-			break;
-		case 'edit':
-			svg = (
-				<svg viewBox="0 0 17.6 17.6">
-					<path d="M5.3 13.8l-2.1.7.7-2.1L10.3 6l1.4 1.4-6.4 6.4zm6.4-9.3l-1.4-1.4-1.4 1.4-6.7 6.7-.2.5-2 5.9 3.8-1.3 2.1-.7.4-.1.3-.3 7.8-7.8c.1 0-2.7-2.9-2.7-2.9zm5.6-1.4L14.5.3c-.4-.4-1-.4-1.4 0l-1.4 1.4L15.9 6l1.4-1.4c.4-.5.4-1.1 0-1.5"></path>
-				</svg>
-			);
-			break;
-		case 'share':
-			svg = (
-				<svg viewBox="0 0 24 24">
-					<path d="M12.6173 1.07612C12.991 0.921338 13.4211 1.00689 13.7071 1.29289L22.7071 10.2929C23.0832 10.669 23.0991 11.2736 22.7433 11.669L13.7433 21.669C13.4663 21.9767 13.0283 22.082 12.6417 21.9336C12.2552 21.7853 12 21.414 12 21V16H11.5C7.31775 16 3.92896 18.2486 2.95256 21.3044C2.80256 21.7738 2.33292 22.064 1.84598 21.9881C1.35904 21.9122 1 21.4928 1 21V18.5C1 12.3162 5.88069 7.27245 12 7.01067V2C12 1.59554 12.2436 1.2309 12.6173 1.07612ZM14 4.41421V8C14 8.55228 13.5523 9 13 9H12.5C7.64534 9 3.64117 12.6414 3.06988 17.3419C5.09636 15.2366 8.18218 14 11.5 14H13C13.5523 14 14 14.4477 14 15V18.394L20.622 11.0362L14 4.41421Z"></path>
-				</svg>
-			);
-			break;
-		case 'reply':
-			svg = (
-				<svg viewBox="0 0 17 17">
-					<path d="M8.7 0C4.1 0 .4 3.7.4 8.3c0 1.2.2 2.3.7 3.4-.2.6-.4 1.5-.7 2.5L0 15.8c-.2.7.5 1.4 1.2 1.2l1.6-.4 2.4-.7c1.1.5 2.2.7 3.4.7 4.6 0 8.3-3.7 8.3-8.3C17 3.7 13.3 0 8.7 0zM15 8.3c0 3.5-2.8 6.3-6.4 6.3-1.2 0-2.3-.3-3.2-.9l-3.2.9.9-3.2c-.5-.9-.9-2-.9-3.2.1-3.4 3-6.2 6.5-6.2S15 4.8 15 8.3z"></path>
-				</svg>
-			);
-			break;
-		case 'reblog':
-			svg = (
-				<svg viewBox="0 0 17 18.1">
-					<path d="M12.8.2c-.4-.4-.8-.2-.8.4v2H2c-2 0-2 2-2 2v5s0 1 1 1 1-1 1-1v-4c0-1 .5-1 1-1h9v2c0 .6.3.7.8.4L17 3.6 12.8.2zM4.2 17.9c.5.4.8.2.8-.3v-2h10c2 0 2-2 2-2v-5s0-1-1-1-1 1-1 1v4c0 1-.5 1-1 1H5v-2c0-.6-.3-.7-.8-.4L0 14.6l4.2 3.3z"></path>
-				</svg>
-			);
-			break;
-		case 'like':
-			svg = (
-				<svg viewBox="0 0 20 18">
-					<path d="M14.658 0c-1.625 0-3.21.767-4.463 2.156-.06.064-.127.138-.197.225-.074-.085-.137-.159-.196-.225C8.547.766 6.966 0 5.35 0 4.215 0 3.114.387 2.162 1.117c-2.773 2.13-2.611 5.89-1.017 8.5 2.158 3.535 6.556 7.18 7.416 7.875A2.3 2.3 0 0 0 9.998 18c.519 0 1.028-.18 1.436-.508.859-.695 5.257-4.34 7.416-7.875 1.595-2.616 1.765-6.376-1-8.5C16.895.387 15.792 0 14.657 0h.001zm0 2.124c.645 0 1.298.208 1.916.683 1.903 1.461 1.457 4.099.484 5.695-1.973 3.23-6.16 6.7-6.94 7.331a.191.191 0 0 1-.241 0c-.779-.631-4.966-4.101-6.94-7.332-.972-1.595-1.4-4.233.5-5.694.619-.475 1.27-.683 1.911-.683 1.064 0 2.095.574 2.898 1.461.495.549 1.658 2.082 1.753 2.203.095-.12 1.259-1.654 1.752-2.203.8-.887 1.842-1.461 2.908-1.461h-.001z"></path>
-				</svg>
-			);
-			break;
-		case 'ellipsis':
-			svg = (
-				<svg viewBox="0 0 17.5 3.9">
-					<path d="M17.5 1.9c0 1.1-.9 1.9-1.9 1.9-1.1 0-1.9-.9-1.9-1.9S14.5 0 15.6 0c1 0 1.9.9 1.9 1.9m-6.8 0c0 1.1-.9 1.9-1.9 1.9-1.1.1-2-.8-2-1.9 0-1 .9-1.9 2-1.9s1.9.9 1.9 1.9m-6.8 0c0 1.1-.9 2-2 2-1 0-1.9-.9-1.9-2S.9 0 1.9 0c1.1 0 2 .9 2 1.9"></path>
-				</svg>
-			);
-			break;
-	}
-
-	return (
-		<span className={ `tumblr-preview__post-icon tumblr-preview__post-icon-${ name }` }>
-			{ svg }
-		</span>
-	);
-};
-
-export default TumblrPostIcon;

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

@@ -1,56 +0,0 @@
-@import "../../variables";
-
-.tumblr-preview__post-icon {
-	display: flex;
-	align-items: center;
-
-	svg {
-		fill: $tumblr-preview-action-text-color;
-	}
-}
-
-.tumblr-preview__post-icon-blaze {
-	width: 23px;
-	height: 20px;
-}
-
-.tumblr-preview__post-icon-delete {
-	width: 17px;
-	height: 21px;
-}
-
-
-.tumblr-preview__post-icon-edit {
-	width: 21px;
-	height: 21px;
-}
-
-
-.tumblr-preview__post-icon-share {
-	width: 24px;
-	height: 24px;
-}
-
-
-.tumblr-preview__post-icon-reply {
-	width: 21px;
-	height: 21px;
-}
-
-
-.tumblr-preview__post-icon-reblog {
-	width: 21px;
-	height: 21px;
-}
-
-
-.tumblr-preview__post-icon-like {
-	width: 23px;
-	height: 21px;
-}
-
-
-.tumblr-preview__post-icon-ellipsis {
-	width: 18px;
-	height: 4px;
-}

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

@@ -1,61 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { tumblrTitle, tumblrDescription } from './helpers';
-import TumblrPostActions from './post/actions';
-import TumblrPostHeader from './post/header';
-import type { TumblrPreviewProps } from './types';
-
-import './styles.scss';
-
-export const TumblrPostPreview: React.FC< TumblrPreviewProps > = ( {
-	title,
-	description,
-	image,
-	user,
-	url,
-	customText,
-	media,
-} ) => {
-	const avatarUrl = user?.avatarUrl;
-
-	const mediaItem = media?.[ 0 ];
-
-	return (
-		<div className="tumblr-preview__post">
-			{ avatarUrl && <img className="tumblr-preview__avatar" src={ avatarUrl } alt="" /> }
-			<div className="tumblr-preview__card">
-				<TumblrPostHeader user={ user } />
-				<div className="tumblr-preview__body">
-					<div className="tumblr-preview__title">{ tumblrTitle( title ) }</div>
-					{ customText && <div className="tumblr-preview__custom-text">{ customText }</div> }
-					{ description && (
-						<div className="tumblr-preview__description">{ tumblrDescription( description ) }</div>
-					) }
-					{ mediaItem ? (
-						<div className="tumblr-preview__media-item">
-							{ mediaItem.type.startsWith( 'video/' ) ? (
-								// eslint-disable-next-line jsx-a11y/media-has-caption
-								<video controls className="tumblr-preview__media--video">
-									<source src={ mediaItem.url } type={ mediaItem.type } />
-								</video>
-							) : (
-								<img className="tumblr-preview__image" src={ mediaItem.url } alt="" />
-							) }
-						</div>
-					) : (
-						image && (
-							<img
-								className="tumblr-preview__image"
-								src={ image }
-								alt={ __( 'Tumblr preview thumbnail', 'social-previews' ) }
-							/>
-						)
-					) }
-					<a className="tumblr-preview__url" href={ url } target="_blank" rel="noreferrer">
-						{ __( 'View On WordPress', 'social-previews' ) }
-					</a>
-				</div>
-				<TumblrPostActions />
-			</div>
-		</div>
-	);
-};

package/src/tumblr-preview/previews.tsx

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

package/src/tumblr-preview/styles.scss

@@ -1,148 +0,0 @@
-@import "./variables";
-@import "../shared";
-
-.tumblr-preview__section.social-preview__section {
-	width: clamp(200px, 100%, calc(#{$tumblr-preview-width + $tumblr-preview-avatar-size} + #{$tumblr-preview-card-inline-padding}));
-}
-
-.tumblr-preview__post {
-	display: flex;
-	align-items: flex-start;
-	gap: 1.25rem;
-}
-
-.tumblr-preview__avatar {
-	width: $tumblr-preview-avatar-size;
-	height: $tumblr-preview-avatar-size;
-
-	border-radius: $tumblr-preview-border-radius;
-
-	@media (max-width: 660px) {
-		display: none;
-	}
-}
-
-.tumblr-preview__card {
-	overflow-y: hidden;
-
-	background-color: $tumblr-preview-background-color;
-	border-radius: $tumblr-preview-border-radius;
-
-	color: $tumblr-preview-text-color;
-	font-family: $tumblr-preview-font-family;
-	font-size: 1rem;
-
-	:any-link {
-		color: inherit;
-		text-decoration: underline;
-	}
-}
-
-.tumblr-preview__custom-text {
-	margin: 0 0 1rem 0;
-	padding: 0 $tumblr-preview-card-inline-padding;
-}
-
-.tumblr-preview__title {
-	margin: 0 0 1rem 0;
-	padding: 0 $tumblr-preview-card-inline-padding;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 1.625rem; // 26px
-	font-weight: 400;
-	line-height: 1.3;
-}
-
-.tumblr-preview__description {
-	margin: 0 0 1rem 0;
-	padding: 0 $tumblr-preview-card-inline-padding;
-
-	font-size: 1rem; // 16px
-	line-height: 1.5;
-}
-
-.tumblr-preview__image {
-	display: block;
-	margin: 3.375rem 0 1rem;
-	width: 100%;
-	aspect-ratio: 16/9;
-}
-
-.tumblr-preview__url {
-	display: inline-block;
-
-	margin: 0 0 1rem 0;
-	padding: 0 $tumblr-preview-card-inline-padding;
-}
-
-.tumblr-preview__site-name {
-	color: $tumblr-preview-action-text-color;
-
-	font-size: 0.75rem;
-	text-transform: uppercase;
-}
-
-.tumblr-preview__window {
-	margin: 0 $tumblr-preview-card-inline-padding 1.25rem;
-}
-
-.tumblr-preview__window-top {
-	position: relative;
-
-	border-top-left-radius: $tumblr-preview-window-border-radius;
-	border-top-right-radius: $tumblr-preview-window-border-radius;
-
-	.tumblr-preview__image {
-		margin: 0;
-		width: 100%;
-		aspect-ratio: 16/9;
-		border-top-left-radius: inherit;
-		border-top-right-radius: inherit;
-	}
-}
-
-.tumblr-preview__window-bottom {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-
-	padding: 1rem 0.75rem;
-
-	border: 1px solid rgba(0, 0, 0, 0.25);
-	border-bottom-left-radius: $tumblr-preview-window-border-radius;
-	border-bottom-right-radius: $tumblr-preview-window-border-radius;
-
-	&.is-full {
-		border-top-left-radius: $tumblr-preview-window-border-radius;
-		border-top-right-radius: $tumblr-preview-window-border-radius;
-	}
-
-	> * {
-		margin: 0;
-		padding: 0;
-	}
-}
-
-.tumblr-preview__overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	padding: 1rem 0.75rem;
-
-	background-color: rgba(0, 0, 0, 0.4);
-	border-top-left-radius: inherit;
-	border-top-right-radius: inherit;
-	color: #fff;
-
-	> * {
-		margin: 0;
-		padding: 0;
-	}
-}

package/src/tumblr-preview/types.ts

@@ -1,11 +0,0 @@
-import type { SocialPreviewBaseProps } from '../types';
-
-export type TumblrUser = {
-	displayName: string;
-	avatarUrl?: string;
-};
-
-export type TumblrPreviewProps = SocialPreviewBaseProps & {
-	user?: TumblrUser;
-	customText?: string;
-};

package/src/tumblr-preview/variables.scss

@@ -1,12 +0,0 @@
-$tumblr-preview-width: 540px;
-$tumblr-preview-avatar-size: 64px;
-$tumblr-preview-text-color: #000;
-$tumblr-preview-background-color: #fff;
-$tumblr-preview-action-text-color: rgba(0, 0, 0, 0.65);
-$tumblr-preview-font-family: "Favorit", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
-$tumblr-preview-border-radius: 3px;
-/* stylelint-disable-next-line scales/radii */
-$tumblr-preview-window-border-radius: 6px;
-$tumblr-preview-border: solid 1px rgba(194, 123, 123, 0.15);
-$tumblr-preview-card-inline-padding: 1.25rem;
-$tumblr-preview-accent-color: #00b8ff;

package/src/twitter-preview/card.tsx

@@ -1,37 +0,0 @@
-import clsx from 'clsx';
-import { baseDomain, firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
-import { TwitterCardProps } from './types';
-
-const DESCRIPTION_LENGTH = 200;
-
-const twitterDescription = firstValid(
-	shortEnough( DESCRIPTION_LENGTH ),
-	hardTruncation( DESCRIPTION_LENGTH )
-);
-
-export const Card: React.FC< TwitterCardProps > = ( {
-	description,
-	image,
-	title,
-	cardType,
-	url,
-} ) => {
-	const cardClassNames = clsx( `twitter-preview__card-${ cardType }`, {
-		'twitter-preview__card-has-image': !! image,
-	} );
-
-	return (
-		<div className="twitter-preview__card">
-			<div className={ cardClassNames }>
-				{ image && <img className="twitter-preview__card-image" src={ image } alt="" /> }
-				<div className="twitter-preview__card-body">
-					<div className="twitter-preview__card-url">{ baseDomain( url || '' ) }</div>
-					<div className="twitter-preview__card-title">{ title }</div>
-					<div className="twitter-preview__card-description">
-						{ twitterDescription( stripHtmlTags( description ) ) }
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/twitter-preview/footer.tsx

@@ -1,31 +0,0 @@
-export const Footer: React.FC = () => {
-	return (
-		<div className="twitter-preview__footer">
-			<span className="twitter-preview__icon-replies">
-				<svg viewBox="0 0 24 24">
-					<path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path>
-				</svg>
-			</span>
-			<span className="twitter-preview__icon-retweets">
-				<svg viewBox="0 0 24 24">
-					<path d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"></path>
-				</svg>
-			</span>
-			<span className="twitter-preview__icon-likes">
-				<svg viewBox="0 0 24 24">
-					<path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path>
-				</svg>
-			</span>
-			<span className="twitter-preview__icon-analytics">
-				<svg viewBox="0 0 24 24">
-					<path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path>
-				</svg>
-			</span>
-			<span className="twitter-preview__icon-share">
-				<svg viewBox="0 0 24 24">
-					<path d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"></path>
-				</svg>
-			</span>
-		</div>
-	);
-};

package/src/twitter-preview/header.tsx

@@ -1,16 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { formatTweetDate } from '../helpers';
-import { HeaderProps } from './types';
-
-export const Header: React.FC< HeaderProps > = ( { name, screenName, date } ) => {
-	return (
-		<div className="twitter-preview__header">
-			<span className="twitter-preview__name">
-				{ name || __( 'Account Name', 'social-previews' ) }
-			</span>
-			<span className="twitter-preview__screen-name">{ screenName || '@account' }</span>
-			<span>·</span>
-			<span className="twitter-preview__date">{ formatTweetDate( date || Date.now() ) }</span>
-		</div>
-	);
-};

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

@@ -1,17 +0,0 @@
-export const DefaultAvatar: React.FC = () => {
-	return (
-		<svg
-			version="1.0"
-			xmlns="http://www.w3.org/2000/svg"
-			width="271pt"
-			height="270pt"
-			viewBox="0 0 271 270"
-		>
-			<rect width="100%" height="100%" fill="#ccd5de" />
-			<g transform="translate(0,270) scale(0.1,-0.1)" fill="#647785" stroke="none">
-				<path d="M1251 2089 c-81 -14 -178 -65 -239 -125 -64 -65 -124 -185 -149 -299 -24 -111 -24 -339 -1 -415 38 -121 108 -193 227 -231 83 -27 339 -38 449 -19 139 23 236 91 286 200 59 130 52 395 -15 577 -88 235 -301 354 -558 312z" />
-				<path d="M1197 795 c-358 -68 -643 -357 -721 -732 l-14 -63 890 0 890 0 -7 42 c-11 70 -64 218 -102 288 -121 224 -336 394 -573 454 -92 24 -267 29 -363 11z" />
-			</g>
-		</svg>
-	);
-};

package/src/twitter-preview/index.tsx

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

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

@@ -1,13 +0,0 @@
-import { TwitterPostPreview } from './post-preview';
-import { TwitterPreviewProps } from './types';
-
-export const TwitterLinkPreview: React.FC< TwitterPreviewProps > = ( props ) => {
-	return (
-		<TwitterPostPreview
-			{ ...props }
-			// Override the props that are irrelevant to link preview
-			text=""
-			media={ undefined }
-		/>
-	);
-};