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

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

@@ -1,29 +0,0 @@
-import { MediaItem, SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
-export type TwitterPreviewsProps = SocialPreviewsBaseProps & {
-    tweets: Array<TwitterPreviewProps>;
-};
-export type TwitterCardProps = SocialPreviewBaseProps & {
-    cardType: string;
-};
-export type SidebarProps = {
-    showThreadConnector?: boolean;
-    profileImage?: string;
-};
-export type HeaderProps = {
-    name?: string;
-    date?: Date | number;
-    screenName?: string;
-};
-export type MediaProps = {
-    media: Array<MediaItem>;
-};
-export type QuoteTweetProps = {
-    tweet: TwitterPreviewProps;
-};
-export type TextProps = {
-    text: string;
-    url: string;
-    retainUrl?: boolean;
-};
-export type TwitterPreviewProps = SidebarProps & HeaderProps & Partial<QuoteTweetProps & TwitterCardProps & Pick<TextProps, 'text'>>;
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/twitter-preview/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEtF,MAAM,MAAM,oBAAoB,GAAG,uBAAuB,GAAG;IAC5D,MAAM,EAAE,KAAK,CAAE,mBAAmB,CAAE,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG;IACvD,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,KAAK,CAAE,SAAS,CAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAC7C,WAAW,GACX,OAAO,CAAE,eAAe,GAAG,gBAAgB,GAAG,IAAI,CAAE,SAAS,EAAE,MAAM,CAAE,CAAE,CAAC"}

package/dist/types/types.d.ts

@@ -1,56 +0,0 @@
-import type { SectionHeadingProps } from './shared/section-heading';
-export interface SocialPreviewBaseProps {
-    /**
-     * The URL of the post/page to preview.
-     */
-    url: string;
-    /**
-     * The title of the post/page to preview.
-     */
-    title: string;
-    /**
-     * The description of the post/page to preview.
-     */
-    description: string;
-    /**
-     * The URL of the image to use in the post/page preview.
-     */
-    image?: string;
-    /**
-     * The array of media items to use in the preview.
-     */
-    media?: Array<MediaItem>;
-    /**
-     * The caption.
-     */
-    caption?: string;
-}
-export interface SocialPreviewsBaseProps {
-    /**
-     * The heading level to use for the preview section title
-     */
-    headingLevel?: SectionHeadingProps['level'];
-    /**
-     * Whether to hide the "Your post" section
-     */
-    hidePostPreview?: boolean;
-    /**
-     * Whether to hide the "Link preview" section
-     */
-    hideLinkPreview?: boolean;
-}
-export type MediaItem = {
-    /**
-     * The alt text for the image.
-     */
-    alt?: string;
-    /**
-     * The mime type of the media
-     */
-    type: string;
-    /**
-     * The URL of the media.
-     */
-    url: string;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/types/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEpE,MAAM,WAAW,sBAAsB;IACtC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAE,SAAS,CAAE,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACvC;;OAEG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAE,OAAO,CAAE,CAAC;IAE9C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;CACZ,CAAC"}

package/src/bluesky-preview/helpers.ts

@@ -1,31 +0,0 @@
-import {
-	firstValid,
-	hardTruncation,
-	shortEnough,
-	stripHtmlTags,
-	preparePreviewText,
-	Formatter,
-} from '../helpers';
-
-const TITLE_LENGTH = 200;
-const BODY_LENGTH = 300;
-const URL_LENGTH = 40;
-
-export const blueskyTitle: Formatter = ( text ) =>
-	firstValid(
-		shortEnough( TITLE_LENGTH ),
-		hardTruncation( TITLE_LENGTH )
-	)( stripHtmlTags( text ) ) || '';
-
-export const blueskyBody = ( text: string, options: { offset?: number } = {} ) => {
-	const { offset = 0 } = options;
-
-	return preparePreviewText( text, {
-		platform: 'bluesky',
-		maxChars: BODY_LENGTH - URL_LENGTH - offset,
-	} );
-};
-
-export const blueskyUrl: Formatter = ( text ) =>
-	firstValid( shortEnough( URL_LENGTH ), hardTruncation( URL_LENGTH ) )( stripHtmlTags( text ) ) ||
-	'';

package/src/bluesky-preview/index.tsx

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

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

@@ -1,6 +0,0 @@
-import { BlueskyPostPreview } from './post-preview';
-import type { BlueskyPreviewProps } from './types';
-
-export const BlueskyLinkPreview: React.FC< BlueskyPreviewProps > = ( props ) => {
-	return <BlueskyPostPreview { ...props } user={ undefined } media={ undefined } customText="" />;
-};

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

@@ -1,72 +0,0 @@
-import './styles.scss';
-
-const BlueskyPostActions: React.FC = () => (
-	<div className="bluesky-preview__post-actions">
-		<div>
-			<svg
-				fill="none"
-				width="18"
-				viewBox="0 0 24 24"
-				height="18"
-				style={ { color: 'rgb(111, 134, 159)' } }
-				aria-hidden="true"
-			>
-				<path
-					fill="hsl(211, 20%, 53%)"
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M2.002 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2h-1a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-14Z"
-				></path>
-			</svg>
-			<span>{ 0 }</span>
-		</div>
-		<div>
-			<svg
-				fill="none"
-				width="18"
-				viewBox="0 0 24 24"
-				height="18"
-				style={ { color: 'rgb(111, 134, 159)' } }
-				aria-hidden="true"
-			>
-				<path
-					fill="hsl(211, 20%, 53%)"
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M17.957 2.293a1 1 0 1 0-1.414 1.414L17.836 5H6a3 3 0 0 0-3 3v3a1 1 0 1 0 2 0V8a1 1 0 0 1 1-1h11.836l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.47-2.47a1.75 1.75 0 0 0 0-2.474l-2.47-2.47ZM20 12a1 1 0 0 1 1 1v3a3 3 0 0 1-3 3H6.164l1.293 1.293a1 1 0 1 1-1.414 1.414l-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47a1 1 0 0 1 1.414 1.414L6.164 17H18a1 1 0 0 0 1-1v-3a1 1 0 0 1 1-1Z"
-				></path>
-			</svg>
-			<span>{ 0 }</span>
-		</div>
-		<div>
-			<svg
-				fill="none"
-				width="18"
-				viewBox="0 0 24 24"
-				height="18"
-				style={ { color: 'rgb(111, 134, 159)' } }
-				aria-hidden="true"
-			>
-				<path
-					fill="hsl(211, 20%, 53%)"
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z"
-				></path>
-			</svg>
-			<span>{ 0 }</span>
-		</div>
-		<div>
-			<svg fill="none" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
-				<path
-					fill="hsl(211, 20%, 53%)"
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M2 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm16 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm-6-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
-				></path>
-			</svg>
-		</div>
-	</div>
-);
-
-export default BlueskyPostActions;

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

@@ -1,20 +0,0 @@
-@import "../../variables";
-
-.bluesky-preview__post-actions {
-	margin-top: 0.5rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	& > div {
-		flex: 1;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		color: rgb(111, 134, 159);
-	}
-
-	svg {
-		fill: currentColor;
-	}
-}

package/src/bluesky-preview/post/body/index.tsx

@@ -1,29 +0,0 @@
-import { blueskyBody, blueskyUrl } from '../../helpers';
-import type { BlueskyPreviewProps } from '../../types';
-
-import './styles.scss';
-
-type Props = BlueskyPreviewProps & { children?: React.ReactNode };
-
-const BlueskyPostBody: React.FC< Props > = ( { customText, url, children, appendUrl } ) => {
-	return (
-		<div className="bluesky-preview__body">
-			{ customText ? (
-				<>
-					<div>{ blueskyBody( customText ) }</div>
-					{ appendUrl && url ? (
-						<>
-							<br />
-							<a href={ url } target="_blank" rel="noreferrer noopener">
-								{ blueskyUrl( url.replace( /^https?:\/\//, '' ) ) }
-							</a>
-						</>
-					) : null }
-				</>
-			) : null }
-			{ children }
-		</div>
-	);
-};
-
-export default BlueskyPostBody;

package/src/bluesky-preview/post/body/styles.scss

@@ -1,12 +0,0 @@
-@import "../../variables";
-
-.bluesky-preview__body {
-	margin-bottom: 1rem;
-
-	color: $bluesky-body-text-color;
-
-	> p {
-		margin-bottom: 1.25rem;
-	}
-}
-

package/src/bluesky-preview/post/card/index.tsx

@@ -1,26 +0,0 @@
-import { baseDomain, getTitleFromDescription, stripHtmlTags } from '../../../helpers';
-import { blueskyTitle } from '../../helpers';
-import { BlueskyPreviewProps } from '../../types';
-
-import './styles.scss';
-
-const BlueskyPostCard: React.FC< BlueskyPreviewProps > = ( { title, description, url, image } ) => {
-	return (
-		<div className="bluesky-preview__card">
-			{ image ? (
-				<div className="bluesky-preview__card-image">
-					<img src={ image } alt="" />
-				</div>
-			) : null }
-			<div className="bluesky-preview__card-text">
-				<div className="bluesky-preview__card-site">{ baseDomain( url ) }</div>
-				<div className="bluesky-preview__card-title">
-					{ blueskyTitle( title ) || getTitleFromDescription( description ) }
-				</div>
-				<div className="bluesky-preview__card-description">{ stripHtmlTags( description ) }</div>
-			</div>
-		</div>
-	);
-};
-
-export default BlueskyPostCard;

package/src/bluesky-preview/post/card/styles.scss

@@ -1,70 +0,0 @@
-@import "../../variables";
-
-.bluesky-preview__card {
-	display: flex;
-	flex-direction: column;
-	margin-top: 1rem;
-
-	border: solid 1px #d9e1e8;
-	/* stylelint-disable-next-line scales/radii */
-	border-radius: 8px;
-	overflow: hidden;
-	color: $bluesky-body-text-color;
-}
-
-.bluesky-preview__card-image img {
-	width: 100%;
-	object-fit: cover;
-}
-
-.bluesky-preview__card-text {
-	border-bottom-width: 1px;
-    border-left-width: 1px;
-    border-right-width: 1px;
-    flex: 1 1 0%;
-    padding: 8px 14px;
-    border-color: rgb(212, 219, 226);
-    /* stylelint-disable-next-line scales/radii */
-    border-bottom-right-radius: 8px;
-    /* stylelint-disable-next-line scales/radii */
-    border-bottom-left-radius: 8px;
-}
-
-.bluesky-preview__card-title {
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 3;
-	display: -webkit-box;
-	overflow: hidden;
-	text-overflow: ellipsis;
-    color: rgb(11, 15, 20);
-    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
-    font-size: 16px;
-    font-weight: 700;
-    letter-spacing: 0.25px;
-}
-
-.bluesky-preview__card-site {
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-	font-size: 14px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-    color: rgb(66, 87, 108);
-    font-weight: 400;
-    letter-spacing: 0.25px;
-    margin-bottom: 2px;
-    margin-top: 2px;
-}
-
-.bluesky-preview__card-description {
-	-webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-	color: rgb(11, 15, 20);
-	display: -webkit-box;
-    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
-    font-size: 15px;
-    font-weight: 400;
-    letter-spacing: 0.25px;
-	margin-top: 4px;
-	overflow: hidden;
-}

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

@@ -1,34 +0,0 @@
-import { __, _x } from '@wordpress/i18n';
-import type { BlueskyPreviewProps } from '../../types';
-
-import './styles.scss';
-
-type Props = Pick< BlueskyPreviewProps, 'user' >;
-
-const BlueskyPostHeader: React.FC< Props > = ( { user } ) => {
-	const { displayName, address } = user || {};
-
-	return (
-		<div className="bluesky-preview__post-header">
-			<div className="bluesky-preview__post-header-user">
-				<span className="bluesky-preview__post-header--displayname">
-					{ displayName || __( 'Account name' ) }
-				</span>
-				&nbsp;
-				<span className="bluesky-preview__post-header--username">
-					{ address || 'username.bsky.social' }
-				</span>
-			</div>
-			<div className="bluesky-preview__post-header--separator">·</div>
-			<div className="bluesky-preview__post-header--date">
-				{ _x(
-					'1h',
-					'refers to the time since the post was published, e.g. "1h"',
-					'social-previews'
-				) }
-			</div>
-		</div>
-	);
-};
-
-export default BlueskyPostHeader;

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

@@ -1,33 +0,0 @@
-@import "../../variables";
-
-.bluesky-preview__post-header {
-	display: flex;
-	align-items: start;
-	gap: 4px;
-
-	margin-bottom: 0.625rem;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem;
-	line-height: 1.47;
-
-	&--displayname {
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-		font-size: 16px;
-		letter-spacing: 0.25px;
-		font-weight: 700;
-		line-height: 19px;
-		color: rgb(11, 15, 20);
-	}
-
-	&--username,
-	&--separator,
-	&--date {
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-		font-size: 15px;
-		letter-spacing: 0.25px;
-		font-weight: 400;
-		color: rgb(66, 87, 108);
-	}
-
-}

package/src/bluesky-preview/post/sidebar/index.tsx

@@ -1,36 +0,0 @@
-import type { BlueskyPreviewProps } from '../../types';
-
-import './styles.scss';
-
-type Props = Pick< BlueskyPreviewProps, 'user' >;
-
-export const BlueskyPostSidebar: React.FC< Props > = ( { user } ) => {
-	const { avatarUrl } = user || {};
-
-	return (
-		<div className="bluesky-preview__post-sidebar">
-			<div className="bluesky-preview__post-sidebar-user">
-				{ avatarUrl ? (
-					<img className="bluesky-preview__post-avatar" src={ avatarUrl } alt="" />
-				) : (
-					<svg
-						className="bluesky-preview__post-avatar"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="none"
-						role="presentation"
-					>
-						<circle cx="12" cy="12" r="12" fill="#0070ff"></circle>
-						<circle cx="12" cy="9.5" r="3.5" fill="#fff"></circle>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							fill="#fff"
-							d="M 12.058 22.784 C 9.422 22.784 7.007 21.836 5.137 20.262 C 5.667 17.988 8.534 16.25 11.99 16.25 C 15.494 16.25 18.391 18.036 18.864 20.357 C 17.01 21.874 14.64 22.784 12.058 22.784 Z"
-						></path>
-					</svg>
-				) }
-			</div>
-		</div>
-	);
-};

package/src/bluesky-preview/post/sidebar/styles.scss

@@ -1,6 +0,0 @@
-
-.bluesky-preview__post-avatar {
-	width: 52px;
-	height: 52px;
-	border-radius: 50%;
-}

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

@@ -1,45 +0,0 @@
-import clsx from 'clsx';
-import BlueskyPostActions from './post/actions';
-import BlueskyPostBody from './post/body';
-import BlueskyPostCard from './post/card';
-import BlueskyPostHeader from './post/header';
-import { BlueskyPostSidebar } from './post/sidebar';
-import type { BlueskyPreviewProps } from './types';
-
-import './styles.scss';
-
-export const BlueskyPostPreview: React.FC< BlueskyPreviewProps > = ( props ) => {
-	const { user, media, appendUrl } = props;
-
-	return (
-		<div className="bluesky-preview__post">
-			<BlueskyPostSidebar user={ user } />
-			<div>
-				<BlueskyPostHeader user={ user } />
-				<BlueskyPostBody { ...props } appendUrl={ appendUrl ?? Boolean( media?.length ) }>
-					{ media?.length ? (
-						<div className={ clsx( 'bluesky-preview__media', { 'as-grid': media.length > 1 } ) }>
-							{ media.map( ( mediaItem, index ) => (
-								<div
-									key={ `bluesky-preview__media-item-${ index }` }
-									className="bluesky-preview__media-item"
-								>
-									{ 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 }
-				</BlueskyPostBody>
-				{ ! media?.length ? <BlueskyPostCard { ...props } /> : null }
-				<BlueskyPostActions />
-			</div>
-		</div>
-	);
-};

package/src/bluesky-preview/previews.tsx

@@ -1,56 +0,0 @@
-import { ExternalLink } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { SectionHeading } from '../shared/section-heading';
-import { SocialPreviewsBaseProps } from '../types';
-import { BlueskyLinkPreview } from './link-preview';
-import { BlueskyPostPreview } from './post-preview';
-import { BlueskyPreviewProps } from './types';
-
-export type BlueskyPreviewsProps = BlueskyPreviewProps & SocialPreviewsBaseProps;
-
-export const BlueskyPreviews: React.FC< BlueskyPreviewsProps > = ( {
-	headingLevel,
-	hidePostPreview,
-	hideLinkPreview,
-	...props
-} ) => {
-	return (
-		<div className="social-preview bluesky-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section bluesky-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on Bluesky
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on Bluesky:', 'social-previews' ) }
-					</p>
-					<BlueskyPostPreview { ...props } />
-				</section>
-			) }
-			{ ! hideLinkPreview && (
-				<section className="social-preview__section bluesky-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a link to a Bluesky 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 Bluesky.',
-							'social-previews'
-						) }
-						&nbsp;
-						<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-							{ __( 'Learn more about links', 'social-previews' ) }
-						</ExternalLink>
-					</p>
-					<BlueskyLinkPreview { ...props } />
-				</section>
-			) }
-		</div>
-	);
-};

package/src/bluesky-preview/styles.scss

@@ -1,65 +0,0 @@
-@import "./variables";
-@import "../shared";
-
-.bluesky-preview__section {
-	max-width: 100%;
-	width: $bluesky-preview-width;
-	margin-inline: auto;
-}
-
-.bluesky-preview__post {
-	display: flex;
-    flex-direction: row;
-    gap: 10px;
-
-	width: 100%;
-	overflow-y: hidden;
-	box-sizing: border-box;
-	padding: 1rem;
-
-	background-color: $bluesky-preview-background-color;
-	border: 1px solid #c0cdd9;
-	color: $bluesky-preview-text-color;
-
-	font-family: $bluesky-preview-font-family;
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem;
-	line-height: 1.47;
-
-	:any-link {
-		color: $bluesky-preview-accent-color;
-
-		text-decoration: none;
-	}
-}
-
-.bluesky-preview__media {
-
-	margin-top: 8px;
-	min-height: 64px;
-	/* stylelint-disable-next-line scales/radii */
-	border-radius: 8px;
-
-	&.as-grid {
-		display: grid;
-		gap: 2px;
-		grid-template-columns: 50% 50%;
-		width: 100%;
-		overflow: hidden;
-	}
-
-	&-item {
-		display: flex;
-		border: 0;
-		/* stylelint-disable-next-line scales/radii */
-		border-radius: 8px;
-		overflow: hidden;
-
-		img,
-		video {
-			width: 100%;
-			object-fit: cover;
-		}
-	}
-
-}

package/src/bluesky-preview/types.ts

@@ -1,14 +0,0 @@
-import type { SocialPreviewBaseProps } from '../types';
-
-export type BlueskyUser = {
-	displayName: string;
-	avatarUrl: string;
-	address: string;
-};
-
-export type BlueskyPreviewProps = SocialPreviewBaseProps & {
-	appendUrl?: boolean;
-	user?: BlueskyUser;
-	customText?: string;
-	customImage?: string;
-};

package/src/bluesky-preview/variables.scss

@@ -1,6 +0,0 @@
-$bluesky-preview-width: 578px;
-$bluesky-preview-text-color: #444b5d;
-$bluesky-body-text-color: #000;
-$bluesky-preview-background-color: #fff;
-$bluesky-preview-font-family: "bluesky-font-sans-serif",sans-serif;
-$bluesky-preview-accent-color: #3a3bff;