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

package/src/mastodon-preview/constants.ts

@@ -1,4 +0,0 @@
-export const DEFAULT_MASTODON_INSTANCE = 'mastodon.social';
-
-export const DEFAULT_AVATAR =
-	'data:image/png;base64,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';

package/src/mastodon-preview/helpers.ts

@@ -1,45 +0,0 @@
-import {
-	firstValid,
-	hardTruncation,
-	shortEnough,
-	stripHtmlTags,
-	preparePreviewText,
-	Formatter,
-} from '../helpers';
-import { DEFAULT_MASTODON_INSTANCE } from './constants';
-import { MastodonAddressDetails } from './types';
-
-const TITLE_LENGTH = 200;
-const BODY_LENGTH = 500;
-const URL_LENGTH = 30;
-
-const ADDRESS_PATTERN = /^@([^@]*)@([^@]*)$/i;
-
-export const mastodonTitle: Formatter = ( text ) =>
-	firstValid(
-		shortEnough( TITLE_LENGTH ),
-		hardTruncation( TITLE_LENGTH )
-	)( stripHtmlTags( text ) ) || '';
-
-export const mastodonBody = ( text: string, options: { offset: number; instance: string } ) => {
-	const { instance, offset } = options;
-
-	return preparePreviewText( text, {
-		platform: 'mastodon',
-		maxChars: BODY_LENGTH - URL_LENGTH - offset,
-		hashtagDomain: instance,
-	} );
-};
-
-export const mastodonUrl: Formatter = ( text ) =>
-	firstValid( shortEnough( URL_LENGTH ), hardTruncation( URL_LENGTH ) )( stripHtmlTags( text ) ) ||
-	'';
-
-export const getMastodonAddressDetails = ( address: string ): MastodonAddressDetails => {
-	const matches = address.match( ADDRESS_PATTERN );
-
-	return {
-		username: matches?.[ 1 ] || '',
-		instance: matches?.[ 2 ] || DEFAULT_MASTODON_INSTANCE,
-	};
-};

package/src/mastodon-preview/index.tsx

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

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

@@ -1,20 +0,0 @@
-import MastodonPostActions from './post/actions';
-import MastonPostBody from './post/body';
-import MastodonPostCard from './post/card';
-import MastodonPostHeader from './post/header';
-import type { MastodonPreviewProps } from './types';
-
-import './styles.scss';
-
-export const MastodonLinkPreview: React.FC< MastodonPreviewProps > = ( props ) => {
-	const { user } = props;
-
-	return (
-		<div className="mastodon-preview__post">
-			<MastodonPostHeader user={ user } />
-			<MastonPostBody { ...props } />
-			<MastodonPostCard { ...props } customImage="" />
-			<MastodonPostActions />
-		</div>
-	);
-};

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

@@ -1,65 +0,0 @@
-import './styles.scss';
-
-const MastodonPostActions: React.FC = () => (
-	<div className="mastodon-preview__post-actions">
-		<div>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				height="24"
-				viewBox="0 -960 960 960"
-				width="24"
-				aria-hidden="true"
-			>
-				<path d="M760-200v-160q0-50-35-85t-85-35H273l144 144-57 56-240-240 240-240 57 56-144 144h367q83 0 141.5 58.5T840-360v160h-80Z"></path>
-			</svg>
-			&nbsp;
-			<span>{ 0 }</span>
-		</div>
-		<div>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				height="24"
-				viewBox="0 -960 960 960"
-				width="24"
-				aria-hidden="true"
-			>
-				<path d="M280-80 120-240l160-160 56 58-62 62h406v-160h80v240H274l62 62-56 58Zm-80-440v-240h486l-62-62 56-58 160 160-160 160-56-58 62-62H280v160h-80Z"></path>
-			</svg>
-		</div>
-		<div>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				height="24"
-				viewBox="0 -960 960 960"
-				width="24"
-				aria-hidden="true"
-			>
-				<path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"></path>
-			</svg>
-		</div>
-		<div>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				height="24"
-				viewBox="0 -960 960 960"
-				width="24"
-				aria-hidden="true"
-			>
-				<path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z"></path>
-			</svg>
-		</div>
-		<div>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				height="24"
-				viewBox="0 -960 960 960"
-				width="24"
-				aria-hidden="true"
-			>
-				<path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"></path>
-			</svg>
-		</div>
-	</div>
-);
-
-export default MastodonPostActions;

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

@@ -1,25 +0,0 @@
-@import "../../variables";
-
-.mastodon-preview__post-actions {
-	margin-top: 1rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	& > div {
-		display: flex;
-		align-items: center;
-		color: #606984;
-	}
-
-	svg {
-		fill: currentColor;
-	}
-}
-
-.mastodon-preview__post-icon-text {
-	color: $mastodon-ui-text-color;
-
-	font-size: 0.75rem;
-	font-weight: 500;
-}

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

@@ -1,51 +0,0 @@
-import { stripHtmlTags } from '../../../helpers';
-import { getMastodonAddressDetails, mastodonBody, mastodonUrl } from '../../helpers';
-import type { MastodonPreviewProps } from '../../types';
-
-import './styles.scss';
-
-type Props = MastodonPreviewProps & { children?: React.ReactNode };
-
-const MastonPostBody: React.FC< Props > = ( props ) => {
-	const { title, description, customText, url, user, children } = props;
-	const instance = user?.address ? getMastodonAddressDetails( user.address ).instance : '';
-	const options = {
-		instance,
-		offset: 0,
-	};
-
-	let bodyTxt;
-
-	if ( customText ) {
-		bodyTxt = <p>{ mastodonBody( customText, options ) }</p>;
-	} else if ( description ) {
-		if ( title ) {
-			const renderedTitle = stripHtmlTags( title );
-
-			options.offset = renderedTitle.length;
-
-			bodyTxt = (
-				<>
-					<p>{ renderedTitle }</p>
-					<p>{ mastodonBody( description, options ) }</p>
-				</>
-			);
-		} else {
-			bodyTxt = <p>{ mastodonBody( description, options ) }</p>;
-		}
-	} else {
-		bodyTxt = <p>{ mastodonBody( title, options ) }</p>;
-	}
-
-	return (
-		<div className="mastodon-preview__body">
-			{ bodyTxt }
-			<a href={ url } target="_blank" rel="noreferrer noopener">
-				{ mastodonUrl( url.replace( /^https?:\/\//, '' ) ) }
-			</a>
-			{ children }
-		</div>
-	);
-};
-
-export default MastonPostBody;

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

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

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

@@ -1,50 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import { baseDomain, getTitleFromDescription, stripHtmlTags } from '../../../helpers';
-import { mastodonTitle } from '../../helpers';
-import { MastodonPreviewProps } from '../../types';
-
-import './styles.scss';
-
-const MastodonPostCard: React.FC< MastodonPreviewProps > = ( {
-	siteName,
-	title,
-	description,
-	url,
-	image,
-	customImage,
-} ) => {
-	return (
-		<div className={ clsx( 'mastodon-preview__card', { 'has-image': image } ) }>
-			<div className="mastodon-preview__card-img">
-				{ image || customImage ? (
-					<img
-						src={ image || customImage }
-						alt={ __( 'Mastodon preview thumbnail', 'social-previews' ) }
-					/>
-				) : (
-					<div className="mastodon-preview__card-img--fallback">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							height="24"
-							viewBox="0 -960 960 960"
-							width="24"
-							aria-hidden="true"
-						>
-							<path d="M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520h200L520-800v200Z"></path>
-						</svg>
-					</div>
-				) }
-			</div>
-			<div className="mastodon-preview__card-text">
-				<span className="mastodon-preview__card-site">{ siteName || baseDomain( url ) }</span>
-				<span className="mastodon-preview__card-title">
-					{ mastodonTitle( title ) || getTitleFromDescription( description ) }
-				</span>
-				<span className="mastodon-preview__card-description">{ stripHtmlTags( description ) }</span>
-			</div>
-		</div>
-	);
-};
-
-export default MastodonPostCard;

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

@@ -1,76 +0,0 @@
-@import "../../variables";
-
-.mastodon-preview__card {
-	display: flex;
-
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-
-	border: solid 1px #d9e1e8;
-	/* stylelint-disable-next-line scales/radii */
-	border-radius: 8px;
-	overflow: hidden;
-	color: $mastodon-body-text-color;
-
-	&.has-image {
-		flex-direction: column;
-	}
-
-	&.has-image &-img {
-		width: 100%;
-	}
-}
-
-.mastodon-preview__card-img {
-	min-height: 60px;
-
-	img {
-		display: block;
-
-		width: 100%;
-		min-height: 100%;
-		object-fit: cover;
-
-		border-start-start-radius: inherit;
-		border-end-start-radius: inherit;
-	}
-
-	&--fallback {
-		aspect-ratio: 1;
-		background: #c0cdd9;
-		position: relative;
-		width: 120px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-}
-
-.mastodon-preview__card-text {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	padding: 1rem;
-	overflow: hidden;
-}
-
-.mastodon-preview__card-title {
-	color: #282c37;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 1.187rem;
-	font-weight: 700;
-	line-height: 1.4;
-}
-
-.mastodon-preview__card-site {
-	font-size: 0.875rem;
-	display: block;
-}
-
-.mastodon-preview__card-description {
-	font-size: 0.875rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

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

@@ -1,37 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { formatMastodonDate } from '../../../helpers';
-import { DEFAULT_AVATAR, DEFAULT_MASTODON_INSTANCE } from '../../constants';
-import { GlobeIcon } from '../icons';
-import type { MastodonPreviewProps } from '../../types';
-
-import './styles.scss';
-
-type Props = Pick< MastodonPreviewProps, 'user' >;
-
-const MastodonPostHeader: React.FC< Props > = ( { user } ) => {
-	const { displayName, address, avatarUrl } = user || {};
-
-	return (
-		<div className="mastodon-preview__post-header">
-			<div className="mastodon-preview__post-header-user">
-				<img className="mastodon-preview__post-avatar" src={ avatarUrl || DEFAULT_AVATAR } alt="" />
-				<div>
-					<div className="mastodon-preview__post-header-displayname">
-						{ displayName ||
-							// translators: username of a fictional Mastodon User
-							__( 'anonymous-user', 'social-previews' ) }
-					</div>
-					<div className="mastodon-preview__post-header-username">
-						{ address?.replace( `@${ DEFAULT_MASTODON_INSTANCE }`, '' ) || '@username' }
-					</div>
-				</div>
-			</div>
-			<div className="mastodon-preview__post-header-audience">
-				<GlobeIcon />
-				{ formatMastodonDate( new Date() ) }
-			</div>
-		</div>
-	);
-};
-
-export default MastodonPostHeader;

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

@@ -1,37 +0,0 @@
-@import "../../variables";
-
-.mastodon-preview__post-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: start;
-
-	margin-bottom: 0.625rem;
-
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem;
-	line-height: 1.47;
-}
-
-.mastodon-preview__post-avatar {
-	width: 46px;
-	height: 46px;
-
-	border-radius: 4px;
-}
-
-.mastodon-preview__post-header-user {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
-}
-
-.mastodon-preview__post-header-displayname {
-	color: #000;
-	font-weight: 700;
-}
-
-.mastodon-preview__post-header-audience {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-}

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

@@ -1,13 +0,0 @@
-export function GlobeIcon() {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			height="15"
-			viewBox="0 -960 960 960"
-			width="15"
-			role="img"
-		>
-			<path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q20-22 36-47.5t26.5-53q10.5-27.5 16-56.5t5.5-59q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"></path>
-		</svg>
-	);
-}

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

@@ -1,41 +0,0 @@
-import clsx from 'clsx';
-import MastodonPostActions from './post/actions';
-import MastonPostBody from './post/body';
-import MastodonPostCard from './post/card';
-import MastodonPostHeader from './post/header';
-import type { MastodonPreviewProps } from './types';
-
-import './styles.scss';
-
-export const MastodonPostPreview: React.FC< MastodonPreviewProps > = ( props ) => {
-	const { user, media } = props;
-
-	return (
-		<div className="mastodon-preview__post">
-			<MastodonPostHeader user={ user } />
-			<MastonPostBody { ...props }>
-				{ media?.length ? (
-					<div className={ clsx( 'mastodon-preview__media', { 'as-grid': media.length > 1 } ) }>
-						{ media.map( ( mediaItem, index ) => (
-							<div
-								key={ `mastodon-preview__media-item-${ index }` }
-								className="mastodon-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 }
-			</MastonPostBody>
-			{ ! media?.length ? <MastodonPostCard { ...props } /> : null }
-			<MastodonPostActions />
-		</div>
-	);
-};

package/src/mastodon-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 { MastodonLinkPreview } from './link-preview';
-import { MastodonPostPreview } from './post-preview';
-import { MastodonPreviewProps } from './types';
-
-export type MastodonPreviewsProps = MastodonPreviewProps & SocialPreviewsBaseProps;
-
-export const MastodonPreviews: React.FC< MastodonPreviewsProps > = ( {
-	headingLevel,
-	hidePostPreview,
-	hideLinkPreview,
-	...props
-} ) => {
-	return (
-		<div className="social-preview mastodon-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section mastodon-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on Mastodon
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on Mastodon:', 'social-previews' ) }
-					</p>
-					<MastodonPostPreview { ...props } />
-				</section>
-			) }
-			{ ! hideLinkPreview && (
-				<section className="social-preview__section mastodon-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a link to a Mastodon 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 Mastodon.',
-							'social-previews'
-						) }
-						&nbsp;
-						<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-							{ __( 'Learn more about links', 'social-previews' ) }
-						</ExternalLink>
-					</p>
-					<MastodonLinkPreview { ...props } user={ undefined } />
-				</section>
-			) }
-		</div>
-	);
-};

package/src/mastodon-preview/styles.scss

@@ -1,73 +0,0 @@
-@import "./variables";
-@import "../shared";
-
-.mastodon-preview__section {
-	max-width: 100%;
-	width: $mastodon-preview-width;
-	margin-inline: auto;
-}
-
-.mastodon-preview__post {
-	width: 100%;
-	overflow-y: hidden;
-	box-sizing: border-box;
-	padding: 1rem;
-
-	background-color: $mastodon-preview-background-color;
-	border: 1px solid #c0cdd9;
-	color: $mastodon-preview-text-color;
-
-	font-family: $mastodon-preview-font-family;
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9375rem;
-	line-height: 1.47;
-
-	:any-link {
-		color: $mastodon-preview-accent-color;
-
-		text-decoration: none;
-	}
-}
-
-.mastodon-preview__img {
-	display: block;
-
-	width: 100%;
-	margin: 0.875rem auto 0;
-
-	border-radius: 4px;
-
-	aspect-ratio: 16 / 9;
-	object-fit: cover;
-}
-
-.mastodon-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/mastodon-preview/types.ts

@@ -1,19 +0,0 @@
-import type { SocialPreviewBaseProps } from '../types';
-
-export type MastodonUser = {
-	displayName: string;
-	avatarUrl: string;
-	address: string;
-};
-
-export type MastodonAddressDetails = {
-	username: string;
-	instance: string;
-};
-
-export type MastodonPreviewProps = SocialPreviewBaseProps & {
-	user?: MastodonUser;
-	customText?: string;
-	customImage?: string;
-	siteName?: string;
-};

package/src/mastodon-preview/variables.scss

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

package/src/nextdoor-preview/constants.ts

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