@automattic/social-previews 2.0.1-beta.8 → 2.0.1

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

@@ -0,0 +1,117 @@
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import {
+	baseDomain,
+	formatNextdoorDate,
+	getTitleFromDescription,
+	preparePreviewText,
+} from '../helpers';
+import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
+import { FooterActions } from './footer-actions';
+import { ChevronIcon } from './icons/chevron-icon';
+import { DefaultAvatar } from './icons/default-avatar';
+import { DefaultImage } from './icons/default-image';
+import { GlobeIcon } from './icons/globe-icon';
+import { NextdoorPreviewProps } from './types';
+
+import './style.scss';
+
+export function NextdoorPostPreview( {
+	image,
+	name,
+	profileImage,
+	description,
+	neighborhood,
+	media,
+	title,
+	url,
+}: NextdoorPreviewProps ) {
+	const hasMedia = !! media?.length;
+
+	return (
+		<div className="nextdoor-preview__wrapper">
+			<section className={ `nextdoor-preview__container ${ hasMedia ? 'has-media' : '' }` }>
+				<div className="nextdoor-preview__content">
+					<div className="nextdoor-preview__header">
+						<div className="nextdoor-preview__header--avatar">
+							{ profileImage ? <img src={ profileImage } alt="" /> : <DefaultAvatar /> }
+						</div>
+						<div className="nextdoor-preview__header--details">
+							<div className="nextdoor-preview__header--name">
+								{ name || __( 'Account Name', 'social-previews' ) }
+							</div>
+							<div className="nextdoor-preview__header--meta">
+								<span>{ neighborhood || __( 'Neighborhood', 'social-previews' ) }</span>
+								<span>•</span>
+								<span>{ formatNextdoorDate( Date.now() ) }</span>
+								<span>•</span>
+								{ /* This is the Globe SVG that represents visibility to be "public" */ }
+								<GlobeIcon />
+							</div>
+						</div>
+					</div>
+					<div className="nextdoor-preview__body">
+						{ description ? (
+							<div className="nextdoor-preview__caption">
+								{ preparePreviewText( description, {
+									platform: 'nextdoor',
+									maxChars: FEED_TEXT_MAX_LENGTH,
+									maxLines: FEED_TEXT_MAX_LINES,
+								} ) }
+							</div>
+						) : null }
+						{ hasMedia ? (
+							<div className="nextdoor-preview__media">
+								{ media.map( ( mediaItem, index ) => {
+									return (
+										<div
+											key={ `nextdoor-preview__media-item-${ index }` }
+											className="nextdoor-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 }
+
+						<article
+							className={ clsx( 'nextdoor-preview__card', {
+								'small-preview': ! image || hasMedia,
+							} ) }
+						>
+							{ image ? (
+								<img className="nextdoor-preview__image" src={ image } alt="" />
+							) : (
+								<DefaultImage />
+							) }
+							{ url ? (
+								<div className="nextdoor-preview__description">
+									<h2 className="nextdoor-preview__description--title">
+										{ title || getTitleFromDescription( description ) }
+									</h2>
+									<span className="nextdoor-preview__description--url">{ baseDomain( url ) }</span>
+								</div>
+							) : null }
+							{ hasMedia ? (
+								<div className="nextdoor-preview__card--chevron-wrapper">
+									<ChevronIcon />
+								</div>
+							) : null }
+						</article>
+					</div>
+					<div className="nextdoor-preview__footer">
+						<FooterActions />
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+}

package/src/nextdoor-preview/previews.tsx

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

package/src/nextdoor-preview/style.scss

@@ -0,0 +1,211 @@
+.nextdoor-preview {
+	&__wrapper {
+		max-width: clamp(200px, 100%, 600px);
+	}
+
+	// When the preview is in a section of all previews
+	&__section &__wrapper {
+		padding: 0;
+	}
+
+	&__section.social-preview__section {
+		width: clamp(200px, 100%, 600px);
+	}
+
+	&__container {
+
+		box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
+		/* stylelint-disable-next-line scales/radii */
+		border-radius: 8px;
+		overflow: hidden;
+		background-color: #fff;
+
+		&.small-preview {
+			// When the preview has media, we want to hide the border radius on the bottom
+			border-end-end-radius: 0;
+			border-end-start-radius: 0;
+		}
+	}
+
+	&__header {
+		display: flex;
+		gap: 0.5rem;
+		margin-bottom: 8px;
+		align-items: center;
+
+		&--avatar {
+			width: 40px;
+			height: 40px;
+			border-radius: 50%;
+			overflow: hidden;
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+		}
+
+		&--avatar img {
+			width: 100%;
+			object-fit: contain;
+		}
+
+		&--details {
+			display: flex;
+			flex-direction: column;
+		}
+
+		&--name {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			font-weight: 600;
+			font-size: 1rem;
+			line-height: 20px;
+			letter-spacing: -0.32px;
+		}
+
+		&--meta {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			color: #666;
+			letter-spacing: -0.32px;
+			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+			font-size: 14px;
+			line-height: 19px;
+			white-space: pre-wrap;
+		}
+	}
+
+	&__footer {
+		margin-top: 24px;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+
+		&--actions {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
+		&--actions-item {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+			font-size: 13px;
+			font-weight: 600;
+			line-height: 16px;
+		}
+	}
+
+	&__content {
+		padding: 12px 16px;
+	}
+
+	&__card {
+		/* stylelint-disable-next-line scales/radii */
+		border-radius: 16px;
+		box-shadow: rgba(0, 0, 0, 0.08) 0 1px 4px 0, rgba(0, 0, 0, 0.2) 0 0 2px 0;
+		display: flex;
+		flex-direction: column;
+		margin-top: 12px;
+		overflow: hidden;
+
+		&.small-preview {
+			flex-direction: row;
+			align-items: center;
+		}
+
+		&--chevron-wrapper {
+			width: 40px;
+			min-width: 40px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	&__caption {
+		margin-bottom: 20px;
+		font-size: 1rem;
+		line-height: 20px;
+		font-weight: 400;
+	}
+
+	&__media-item {
+		display: flex;
+
+		img,
+		video {
+			width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__description {
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		.small-preview & {
+			padding: 10px;
+			flex-grow: 1;
+		}
+
+		&--title {
+			margin: 0;
+			font-weight: 600;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+			font-size: 15px;
+			line-height: 20px;
+		}
+
+		&--url {
+			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+			font-size: 13px;
+			color: #666;
+		}
+	}
+
+	&__media {
+		// compensate for the content padding
+		margin-inline: -16px;
+	}
+
+	&__image {
+		object-fit: cover;
+		width: 100%;
+		aspect-ratio: 16/9;
+
+		.small-preview & {
+			width: 62px;
+			height: 62px;
+		}
+	}
+
+	&__default-avatar {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		background-color: rgb(140 110 99);
+		color: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: x-large;
+	}
+
+	&__default-image {
+		background-color: #f1ffca;
+		height: 62px;
+		width: 62px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}

package/src/nextdoor-preview/types.ts

@@ -0,0 +1,9 @@
+import { SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
+
+export type NextdoorPreviewProps = SocialPreviewBaseProps & {
+	neighborhood?: string;
+	name: string;
+	profileImage: string;
+};
+
+export type NextdoorPreviewsProps = NextdoorPreviewProps & SocialPreviewsBaseProps;

package/src/tumblr-preview/previews.tsx

@@ -14,6 +14,8 @@ export const TumblrPreviews: React.FC< TumblrPreviewsProps > = ( {
 	hidePostPreview,
 	...props
 } ) => {
+	const hasMedia = !! props.media?.length;
+
 	return (
 		<div className="social-preview tumblr-preview">
 			{ ! hidePostPreview && (
@@ -27,7 +29,7 @@ export const TumblrPreviews: React.FC< TumblrPreviewsProps > = ( {
 					<p className="social-preview__section-desc">
 						{ __( 'This is what your social post will look like on Tumblr:', 'social-previews' ) }
 					</p>
-					<TumblrPostPreview { ...props } />
+					{ hasMedia ? <TumblrPostPreview { ...props } /> : <TumblrLinkPreview { ...props } /> }
 				</section>
 			) }
 			{ ! hideLinkPreview && (

package/src/tumblr-preview/variables.scss

@@ -4,7 +4,6 @@ $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;
-/* stylelint-disable-next-line scales/radii */
 $tumblr-preview-border-radius: 3px;
 /* stylelint-disable-next-line scales/radii */
 $tumblr-preview-window-border-radius: 6px;

package/src/twitter-preview/card.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { baseDomain, firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
 import { TwitterCardProps } from './types';
 
@@ -16,7 +16,7 @@ export const Card: React.FC< TwitterCardProps > = ( {
 	cardType,
 	url,
 } ) => {
-	const cardClassNames = classnames( `twitter-preview__card-${ cardType }`, {
+	const cardClassNames = clsx( `twitter-preview__card-${ cardType }`, {
 		'twitter-preview__card-has-image': !! image,
 	} );
 

package/src/twitter-preview/media.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Fragment } from 'react';
 import { MediaProps } from './types';
 
@@ -37,7 +37,7 @@ export const Media: React.FC< MediaProps > = ( { media } ) => {
 
 	const isVideo = filteredMedia[ 0 ].type.startsWith( 'video/' );
 
-	const mediaClasses = classnames( [
+	const mediaClasses = clsx( [
 		'twitter-preview__media',
 		'twitter-preview__media-children-' + filteredMedia.length,
 	] );

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

@@ -36,11 +36,11 @@ 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 && url && (
+						{ ! hasMedia && url && (
 							<Card
-								description={ description }
+								description={ description || '' }
 								image={ image }
-								title={ title }
+								title={ title || '' }
 								cardType={ cardType || '' }
 								url={ url }
 							/>

package/src/twitter-preview/previews.tsx

@@ -26,7 +26,7 @@ export const TwitterPreviews: React.FC< TwitterPreviewsProps > = ( {
 						}
 					</SectionHeading>
 					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on Twitter:', 'social-previews' ) }
+						{ __( 'This is what your social post will look like on X:', 'social-previews' ) }
 					</p>
 					{ tweets.map( ( tweet, index ) => {
 						const isLast = index + 1 === tweets.length;
@@ -50,7 +50,7 @@ export const TwitterPreviews: React.FC< TwitterPreviewsProps > = ( {
 					</SectionHeading>
 					<p className="social-preview__section-desc">
 						{ __(
-							'This is what it will look like when someone shares the link to your WordPress post on Twitter.',
+							'This is what it will look like when someone shares the link to your WordPress post on X.',
 							'social-previews'
 						) }
 						&nbsp;

package/CHANGELOG.md

@@ -1,62 +0,0 @@
-# Changelog
-
-## v2.0.1-beta
-
-- Added Mastodon and Instagram previews
-- Fixed hyperlinks for Facebook
-- Fixed multiple empty lines issue in preview text
-
-## v2.0.0 (2023-05-24)
-
-- Converted the package to TypeScript.
-- Added LinkedIn and Tumblr previews.
-- Updated Google Search, Facebook and Twitter previews to match their latest designs.
-- Created separate components for each of the Social Media previews e.g. `TumblrLinkPreview`, `TumblrPostPreview` and `TumblrPreviews`.
-
-## v1.1.5 (2022-08-24)
-
-- Declare an optional peer dependency on `@babel/runtime`, for CommonJS environments. This dependency already existed previously, it just wasn't declared.
-
-## v1.1.4 (2022-05-25)
-
-- Add missing dependency on `@emotion/react`.
-
-## v1.1.3 (2022-05-16)
-
-- Remove unnecessary peer dependencies on `@wordpress/data`, `reakit-utils`, and `redux`.
-- Add missing peer dependency on `react-dom`.
-
-## v1.1.2 (2022-05-13)
-
-- Dependency updates and internal code cleanup.
-
-## v1.1.1 (2021-04-05)
-
-- Ensure that lengthy text doesn't overflow in the Twitter preview.
-
-## v1.1.0 (2020-09-10)
-
-- Twitter: Add previewing for attached images, videos, or quoted tweets.
-- Twitter: Add support for previewing entire threads.
-
-## v1.0.4 (2020-08-24)
-
-- Fixed Twitter styles for viewports < 600px in width
-
-## v1.0.3 (2020-08-21)
-
-- Refreshed styles of Twitter, Facebook and Google previews to match their latest design.
-
-## v1.0.2 (2020-08-03)
-
-- Remove `i18n-calypso` dependency by removing search preview header.
-- Strip html tags from descriptions for social previews.
-- Add helper function with enhanced regex for stripping html tags.
-
-## v1.0.1 (2020-07-23)
-
-- Mark CSS and SCSS files as `sideEffects` to ensure they are not discarded during build processes tree-shaking.
-
-## v1.0.0 (2020-07-22)
-
-- Initial release after extracting from Calypso.

package/dist/cjs/mastodon-preview/post/icons/styles.scss

@@ -1,50 +0,0 @@
-.mastodon-preview__post-icon {
-	display: inline-block;
-
-	/* stylelint-disable-next-line function-url-quotes */
-	background-image: url("data:image/png;base64,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");
-	background-repeat: no-repeat;
-	background-size: 99px 17px;
-}
-
-.mastodon-preview__post-icon-reply {
-	width: 19px;
-	height: 17px;
-
-	background-position: 0 0;
-}
-
-.mastodon-preview__post-icon-boost {
-	width: 21px;
-	height: 13px;
-
-	background-position: -19px 0;
-}
-
-.mastodon-preview__post-icon-like {
-	width: 17px;
-	height: 17px;
-
-	background-position: -40px 0;
-}
-
-.mastodon-preview__post-icon-bookmark {
-	width: 14px;
-	height: 16px;
-
-	background-position: -57px 0;
-}
-
-.mastodon-preview__post-icon-more {
-	width: 15px;
-	height: 4px;
-
-	background-position: -71px 0;
-}
-
-.mastodon-preview__post-icon-globe {
-	width: 13px;
-	height: 14px;
-
-	background-position: -86px 0;
-}

package/dist/esm/mastodon-preview/post/icons/styles.scss

@@ -1,50 +0,0 @@
-.mastodon-preview__post-icon {
-	display: inline-block;
-
-	/* stylelint-disable-next-line function-url-quotes */
-	background-image: url("data:image/png;base64,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");
-	background-repeat: no-repeat;
-	background-size: 99px 17px;
-}
-
-.mastodon-preview__post-icon-reply {
-	width: 19px;
-	height: 17px;
-
-	background-position: 0 0;
-}
-
-.mastodon-preview__post-icon-boost {
-	width: 21px;
-	height: 13px;
-
-	background-position: -19px 0;
-}
-
-.mastodon-preview__post-icon-like {
-	width: 17px;
-	height: 17px;
-
-	background-position: -40px 0;
-}
-
-.mastodon-preview__post-icon-bookmark {
-	width: 14px;
-	height: 16px;
-
-	background-position: -57px 0;
-}
-
-.mastodon-preview__post-icon-more {
-	width: 15px;
-	height: 4px;
-
-	background-position: -71px 0;
-}
-
-.mastodon-preview__post-icon-globe {
-	width: 13px;
-	height: 14px;
-
-	background-position: -86px 0;
-}