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

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

@@ -1,49 +1,64 @@
-import { __ } from '@wordpress/i18n';
-import MastodonPostIcon from '../icons';
-
 import './styles.scss';
 
 const MastodonPostActions: React.FC = () => (
 	<div className="mastodon-preview__post-actions">
-		<ul>
-			{ [
-				{
-					icon: 'reply',
-					// translators: "Reply" action on a Mastodon post
-					label: __( 'Reply', 'social-previews' ),
-					text: 0,
-				},
-				{
-					icon: 'boost',
-					// translators: "Boost" action on a Mastodon post
-					label: __( 'Boost', 'social-previews' ),
-				},
-				{
-					icon: 'like',
-					// translators: "Favourite" action on a Mastodon post
-					label: __( 'Favourite', 'social-previews' ),
-				},
-				{
-					icon: 'bookmark',
-					// translators: "Bookmark" action on a Mastodon post
-					label: __( 'Bookmark', 'social-previews' ),
-				},
-				{
-					icon: 'more',
-					// translators: "More" menu on a Mastodon post
-					label: __( 'More', 'social-previews' ),
-				},
-			].map( ( { icon, label, text } ) => (
-				<li key={ icon } aria-label={ label }>
-					<span className="mastodon-preview__post-icon-wrapper">
-						<MastodonPostIcon name={ icon } />
-					</span>
-					{ ( typeof text === 'number' || text ) && (
-						<span className="mastodon-preview__post-icon-text">{ text }</span>
-					) }
-				</li>
-			) ) }
-		</ul>
+		<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>
 );
 

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

@@ -2,34 +2,19 @@
 
 .mastodon-preview__post-actions {
 	margin-top: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 
-	ul {
+	& > div {
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
-
-		margin: 0;
-		padding: 0;
-
-		list-style-type: none;
-
-		> li {
-			display: flex;
-			align-items: center;
-			gap: 0.25rem;
-
-			margin: 0;
-		}
+		color: #606984;
 	}
-}
 
-.mastodon-preview__post-icon-wrapper {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	width: 24px;
-	height: 24px;
+	svg {
+		fill: currentColor;
+	}
 }
 
 .mastodon-preview__post-icon-text {

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

@@ -19,16 +19,20 @@ const MastonPostBody: React.FC< Props > = ( props ) => {
 	if ( customText ) {
 		bodyTxt = <p>{ mastodonBody( customText, options ) }</p>;
 	} else if ( description ) {
-		const renderedTitle = stripHtmlTags( title );
-
-		options.offset = renderedTitle.length;
-
-		bodyTxt = (
-			<>
-				<p>{ renderedTitle }</p>
-				<p>{ mastodonBody( description, options ) }</p>
-			</>
-		);
+		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>;
 	}

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

@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import { baseDomain } from '../../../helpers';
+import clsx from 'clsx';
+import { baseDomain, getTitleFromDescription, stripHtmlTags } from '../../../helpers';
 import { mastodonTitle } from '../../helpers';
 import { MastodonPreviewProps } from '../../types';
 
@@ -8,23 +9,39 @@ import './styles.scss';
 const MastodonPostCard: React.FC< MastodonPreviewProps > = ( {
 	siteName,
 	title,
+	description,
 	url,
 	image,
 	customImage,
 } ) => {
 	return (
-		<div className="mastodon-preview__card">
+		<div className={ clsx( 'mastodon-preview__card', { 'has-image': image } ) }>
 			<div className="mastodon-preview__card-img">
-				{ ( image || customImage ) && (
+				{ 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-title">{ mastodonTitle( title ) }</span>
 				<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>
 	);

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

@@ -6,18 +6,24 @@
 	margin-top: 1rem;
 	margin-bottom: 1rem;
 
-	border: solid 1px #ccd7e0;
-	border-radius: 4px;
+	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 {
-	width: 60px;
 	min-height: 60px;
 
-	border-start-start-radius: inherit;
-	border-end-start-radius: inherit;
-
 	img {
 		display: block;
 
@@ -28,25 +34,43 @@
 		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.25rem;
-
-	padding: 0.625rem 0.5rem;
+	gap: 0.5rem;
+	padding: 1rem;
+	overflow: hidden;
 }
 
 .mastodon-preview__card-title {
 	color: #282c37;
 
-	font-size: 0.875rem;
+	/* stylelint-disable-next-line scales/font-sizes */
+	font-size: 1.187rem;
 	font-weight: 700;
-	line-height: 1.3;
+	line-height: 1.4;
 }
 
 .mastodon-preview__card-site {
-	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.8125rem;
+	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,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
-import { DEFAULT_MASTODON_INSTANCE } from '../../constants';
-import MastodonPostIcon from '../icons';
+import { formatMastodonDate } from '../../../helpers';
+import { DEFAULT_AVATAR, DEFAULT_MASTODON_INSTANCE } from '../../constants';
+import { GlobeIcon } from '../icons';
 import type { MastodonPreviewProps } from '../../types';
 
 import './styles.scss';
@@ -13,7 +14,7 @@ const MastodonPostHeader: React.FC< Props > = ( { user } ) => {
 	return (
 		<div className="mastodon-preview__post-header">
 			<div className="mastodon-preview__post-header-user">
-				{ avatarUrl && <img className="mastodon-preview__post-avatar" src={ avatarUrl } alt="" /> }
+				<img className="mastodon-preview__post-avatar" src={ avatarUrl || DEFAULT_AVATAR } alt="" />
 				<div>
 					<div className="mastodon-preview__post-header-displayname">
 						{ displayName ||
@@ -21,16 +22,13 @@ const MastodonPostHeader: React.FC< Props > = ( { user } ) => {
 							__( 'anonymous-user', 'social-previews' ) }
 					</div>
 					<div className="mastodon-preview__post-header-username">
-						{ address?.replace( `@${ DEFAULT_MASTODON_INSTANCE }`, '' ) }
+						{ address?.replace( `@${ DEFAULT_MASTODON_INSTANCE }`, '' ) || '@username' }
 					</div>
 				</div>
 			</div>
 			<div className="mastodon-preview__post-header-audience">
-				<MastodonPostIcon name="globe" />
-				{
-					// translators: time elapsed since post was published (1 hour)
-					__( '1h', 'social-previews' )
-				}
+				<GlobeIcon />
+				{ formatMastodonDate( new Date() ) }
 			</div>
 		</div>
 	);

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

@@ -1,7 +1,13 @@
-import './styles.scss';
-
-const MastodonPostIcon: React.FC< { name: string } > = ( { name } ) => (
-	<i className={ `mastodon-preview__post-icon mastodon-preview__post-icon-${ name }` } />
-);
-
-export default MastodonPostIcon;
+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,28 +1,40 @@
-import { __ } from '@wordpress/i18n';
+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, customImage, image } = props;
-
-	const img = customImage || image;
+	const { user, media } = props;
 
 	return (
 		<div className="mastodon-preview__post">
 			<MastodonPostHeader user={ user } />
 			<MastonPostBody { ...props }>
-				{ img && (
-					<img
-						className="mastodon-preview__img"
-						src={ img }
-						alt={ __( 'Mastodon preview thumbnail', 'social-previews' ) }
-					/>
-				) }
+				{ 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/styles.scss

@@ -40,3 +40,34 @@
 	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/nextdoor-preview/constants.ts

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

package/src/nextdoor-preview/footer-actions.tsx

@@ -0,0 +1,23 @@
+import { __ } from '@wordpress/i18n';
+import { CommentIcon } from './icons/comment-icon';
+import { LikeIcon } from './icons/like-icon';
+import { ShareIcon } from './icons/share-icon';
+
+export function FooterActions() {
+	return (
+		<div className="nextdoor-preview__footer--actions">
+			<div className="nextdoor-preview__footer--actions-item">
+				<LikeIcon />
+				<span>{ __( 'Like', 'social-previews' ) }</span>
+			</div>
+			<div className="nextdoor-preview__footer--actions-item">
+				<CommentIcon />
+				<span>{ __( 'Comment', 'social-previews' ) }</span>
+			</div>
+			<div className="nextdoor-preview__footer--actions-item">
+				<ShareIcon />
+				<span>{ __( 'Share', 'social-previews' ) }</span>
+			</div>
+		</div>
+	);
+}

package/src/nextdoor-preview/icons/chevron-icon.tsx

@@ -0,0 +1,11 @@
+export function ChevronIcon() {
+	return (
+		<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
+			<path
+				fill="#dfe1e4"
+				fillRule="evenodd"
+				d="M7.127 13.876a.732.732 0 1 0 1.035 1.035l4.75-4.749a.732.732 0 0 0 0-1.035L8.123 4.34A.732.732 0 0 0 7.09 5.375l4.27 4.27-4.232 4.23Z"
+			></path>
+		</svg>
+	);
+}

package/src/nextdoor-preview/icons/comment-icon.tsx

@@ -0,0 +1,12 @@
+export function CommentIcon() {
+	return (
+		<svg width="20" height="20" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M2 10.031C2 5.596 5.574 2 10 2h4c4.427 0 8 3.596 8 8.031 0 4.435-3.573 8.031-8 8.031h-1.52a17.033 17.033 0 0 1-1.377 1.467c-.991.938-2.456 2.079-4.086 2.437a1.403 1.403 0 0 1-1.458-.565 1.55 1.55 0 0 1-.195-1.394c.28-.823.395-1.734.434-2.464.014-.257.018-.485.018-.672A8.017 8.017 0 0 1 2 10.031Zm5.798 6.178a7.02 7.02 0 0 1 .016.418c.005.252.004.606-.019 1.023-.03.573-.103 1.285-.266 2.024.775-.377 1.54-.974 2.202-1.598a15.066 15.066 0 0 0 1.448-1.586l.017-.022.003-.004a1 1 0 0 1 .801-.402h2c3.314 0 6-2.692 6-6.03C20 6.691 17.314 4 14 4h-4c-3.314 0-6 2.692-6 6.031 0 2.336 1.32 4.36 3.258 5.359.308.159.515.474.54.82Z"
+				clipRule="evenodd"
+			></path>
+		</svg>
+	);
+}

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

@@ -0,0 +1,3 @@
+export const DefaultAvatar: React.FC = () => {
+	return <div className="nextdoor-preview__default-avatar">A</div>;
+};

package/src/nextdoor-preview/icons/default-image.tsx

@@ -0,0 +1,23 @@
+export function DefaultImage() {
+	return (
+		<div className="nextdoor-preview__default-image">
+			<svg
+				width="24"
+				height="24"
+				fill="none"
+				viewBox="0 0 24 24"
+				aria-hidden="true"
+				color="#055c00"
+			>
+				<path
+					fill="currentColor"
+					d="M13.207 5.207c1.51-1.51 4.076-1.51 5.586 0 1.51 1.51 1.51 4.076 0 5.586l-2.1 2.1c-1.51 1.51-4.077 1.51-5.586 0a1 1 0 1 0-1.414 1.414c2.29 2.29 6.123 2.29 8.414 0l2.1-2.1c2.29-2.29 2.29-6.124 0-8.414s-6.124-2.29-8.414 0l-.7.7a1 1 0 0 0 1.414 1.414l.7-.7Z"
+				></path>
+				<path
+					fill="currentColor"
+					d="M7.307 11.107c1.51-1.51 4.076-1.51 5.586 0a1 1 0 0 0 1.414-1.414c-2.29-2.29-6.124-2.29-8.414 0l-2.1 2.1c-2.29 2.29-2.29 6.123 0 8.414 2.29 2.29 6.124 2.29 8.414 0l.7-.7a1 1 0 0 0-1.414-1.414l-.7.7c-1.51 1.51-4.076 1.51-5.586 0-1.51-1.51-1.51-4.076 0-5.586l2.1-2.1Z"
+				></path>
+			</svg>
+		</div>
+	);
+}

package/src/nextdoor-preview/icons/globe-icon.tsx

@@ -0,0 +1,12 @@
+export function GlobeIcon() {
+	return (
+		<svg width="14" height="14" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.495-7.643c.286-.335.46-.357.505-.357.045 0 .219.022.505.357.282.33.581.868.852 1.619.464 1.283.79 3.034.872 5.024H9.771c.082-1.99.408-3.741.871-5.024.272-.751.571-1.289.854-1.62ZM7.77 11c.084-2.181.439-4.171.992-5.704.093-.255.192-.502.298-.738A8.009 8.009 0 0 0 4.062 11h3.707Zm-3.707 2h3.707c.084 2.181.439 4.171.992 5.704.093.255.192.502.298.738A8.009 8.009 0 0 1 4.062 13Zm15.876-2a8.009 8.009 0 0 0-4.997-6.442c.106.236.205.483.298.738.553 1.533.908 3.523.992 5.704h3.707Zm-3.707 2h3.707a8.009 8.009 0 0 1-4.997 6.442c.106-.236.205-.483.298-.738.553-1.533.908-3.523.992-5.704Zm-2.002 0c-.082 1.99-.408 3.741-.871 5.024-.272.751-.571 1.289-.854 1.62-.285.334-.46.356-.504.356-.045 0-.219-.022-.505-.357-.282-.33-.581-.868-.852-1.619-.464-1.283-.79-3.034-.872-5.024h4.458Z"
+				clipRule="evenodd"
+			></path>
+		</svg>
+	);
+}

package/src/nextdoor-preview/icons/like-icon.tsx

@@ -0,0 +1,12 @@
+export function LikeIcon() {
+	return (
+		<svg width="20" height="20" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M13.275 8.752a1.5 1.5 0 0 1-2.55 0C9.75 7.18 8.719 5.617 6.565 6.074 5.248 6.352 4 7.433 4 9.644c0 2.153 1.348 4.592 4.259 7.236A28.475 28.475 0 0 0 12 19.74a28.475 28.475 0 0 0 3.741-2.86C18.651 14.236 20 11.797 20 9.643c0-2.21-1.25-3.29-2.564-3.57-2.155-.456-3.187 1.106-4.16 2.68Zm-2.581-3.48C7.634 2.58 2 4.217 2 9.643c0 2.996 1.85 5.934 4.914 8.717 1.478 1.343 3.1 2.585 4.839 3.575a.5.5 0 0 0 .494 0c1.739-.99 3.361-2.232 4.84-3.575C20.148 15.577 22 12.64 22 9.643c0-5.426-5.634-7.062-8.694-4.371A5.287 5.287 0 0 0 12 7.04a5.287 5.287 0 0 0-1.306-1.77Z"
+				clipRule="evenodd"
+			></path>
+		</svg>
+	);
+}

package/src/nextdoor-preview/icons/share-icon.tsx

@@ -0,0 +1,12 @@
+export function ShareIcon() {
+	return (
+		<svg width="20" height="20" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M11.617 2.076a1 1 0 0 1 1.09.217l9 9a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 11 21v-4.436c-2.849.366-5.261 2.271-6.384 4.837a1 1 0 0 1-1.856-.06C2.338 20.182 2 18.86 2 17.5a9.959 9.959 0 0 1 9-9.951V3a1 1 0 0 1 .617-.924ZM13 5.414V8.5a1 1 0 0 1-1 1c-4.448 0-8 3.552-8 8 0 .31.023.625.066.94C5.905 16.067 8.776 14.5 12 14.5a1 1 0 0 1 1 1v3.086L19.586 12 13 5.414Z"
+				clipRule="evenodd"
+			></path>
+		</svg>
+	);
+}

package/src/nextdoor-preview/index.tsx

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

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

@@ -0,0 +1,22 @@
+import { getTitleFromDescription } from '../helpers';
+import { NextdoorPostPreview } from './post-preview';
+import { NextdoorPreviewProps } from './types';
+
+type OptionalProps = Partial< Pick< NextdoorPreviewProps, 'name' | 'profileImage' > >;
+
+export type NextdoorLinkPreviewProps = Omit< NextdoorPreviewProps, keyof OptionalProps > &
+	OptionalProps;
+
+export function NextdoorLinkPreview( props: NextdoorLinkPreviewProps ) {
+	return (
+		<NextdoorPostPreview
+			name=""
+			profileImage=""
+			{ ...props }
+			// Override the props that are irrelevant to link preview
+			description=""
+			media={ undefined }
+			title={ props.title || getTitleFromDescription( props.description ) }
+		/>
+	);
+}