Skip to content

Commit 9ebfdc4

Browse files
gmjuhaszgmjuhasz
authored
Social Previews: Update previews to match what we share (#107134)
* Remove Nextdoor max line limit to be able to preview description as well * Update previews to match live for FB+LinkedIn+Threads+Nextdoor+Insta * Fix Tumblr preview spacing * Update version
1 parent 04de3ad commit 9ebfdc4

File tree

11 files changed

+67
-28
lines changed

11 files changed

+67
-28
lines changed

‎packages/social-previews/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@automattic/social-previews",
3-
"version": "2.1.0-beta.12",
3+
"version": "2.1.0-beta.13",
44
"description": "A suite of components to generate previews for a post for both social and search engines.",
55
"main": "dist/cjs/index.js",
66
"module": "dist/esm/index.js",

‎packages/social-previews/src/helpers.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export type Platform =
8989
| 'mastodon'
9090
| 'nextdoor'
9191
| 'threads'
92+
| 'tumblr'
9293
| 'twitter';
9394

9495
type PreviewTextOptions = {
@@ -108,6 +109,7 @@ export const hashtagUrlMap: Record< Platform, string > = {
108109
mastodon: 'https://%2$s/tags/%1$s',
109110
nextdoor: 'https://nextdoor.com/hashtag/%1$s',
110111
threads: 'https://www.threads.net/search?q=%1$s&serp_type=tags',
112+
tumblr: 'https://www.tumblr.com/tagged/%1$s',
111113
bluesky: 'https://bsky.app/hashtag/%1$s',
112114
};
113115

‎packages/social-previews/src/instagram-preview/constants.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export const FEED_TEXT_MAX_LENGTH = 120;
2-
export const FEED_TEXT_MAX_LINES = 2;
1+
export const FEED_TEXT_MAX_LENGTH = 520;

‎packages/social-previews/src/instagram-preview/post-preview.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { __ } from '@wordpress/i18n';
22
import { preparePreviewText } from '../helpers';
3-
import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
3+
import { FEED_TEXT_MAX_LENGTH } from './constants';
44
import { Bookmark as BookmarkIcon } from './icons/bookmark';
55
import { Comment as CommentIcon } from './icons/comment';
66
import { DefaultAvatar } from './icons/default-avatar';
@@ -17,6 +17,7 @@ export function InstagramPostPreview( {
1717
name,
1818
profileImage,
1919
caption,
20+
url,
2021
}: InstagramPreviewProps ) {
2122
const username = name || 'username';
2223

@@ -71,8 +72,14 @@ export function InstagramPostPreview( {
7172
{ preparePreviewText( caption, {
7273
platform: 'instagram',
7374
maxChars: FEED_TEXT_MAX_LENGTH,
74-
maxLines: FEED_TEXT_MAX_LINES,
7575
} ) }
76+
{ media && url && (
77+
<>
78+
<br />
79+
<br />
80+
{ url }
81+
</>
82+
) }
7683
</div>
7784
) : null }
7885
</div>

‎packages/social-previews/src/instagram-preview/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
22

3-
export type InstagramPreviewProps = Pick< SocialPreviewBaseProps, 'image' | 'media' > & {
3+
export type InstagramPreviewProps = Pick< SocialPreviewBaseProps, 'image' | 'media' | 'url' > & {
44
name: string;
55
profileImage: string;
66
caption?: string;

‎packages/social-previews/src/linkedin-preview/constants.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export const FEED_TEXT_MAX_LENGTH = 212;
2-
export const FEED_TEXT_MAX_LINES = 3;
1+
export const FEED_TEXT_MAX_LENGTH = 550;

‎packages/social-previews/src/linkedin-preview/post-preview.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { __, sprintf } from '@wordpress/i18n';
22
import { baseDomain, getTitleFromDescription, preparePreviewText } from '../helpers';
3-
import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
3+
import { FEED_TEXT_MAX_LENGTH } from './constants';
44
import { DefaultAvatar } from './icons/default-avatar';
55
import { LinkedInPreviewProps } from './types';
66

@@ -60,11 +60,20 @@ export function LinkedInPostPreview( {
6060
<div className="linkedin-preview__content">
6161
{ description ? (
6262
<div className="linkedin-preview__caption">
63-
{ preparePreviewText( description, {
64-
platform: 'linkedin',
65-
maxChars: FEED_TEXT_MAX_LENGTH,
66-
maxLines: FEED_TEXT_MAX_LINES,
67-
} ) }
63+
<span>
64+
{ preparePreviewText( description, {
65+
platform: 'linkedin',
66+
maxChars: FEED_TEXT_MAX_LENGTH,
67+
} ) }
68+
</span>
69+
{ hasMedia && url && (
70+
<>
71+
{ ' - ' }
72+
<a href={ url } rel="nofollow noopener noreferrer" target="_blank">
73+
{ url }
74+
</a>
75+
</>
76+
) }
6877
</div>
6978
) : null }
7079
{ hasMedia ? (

‎packages/social-previews/src/nextdoor-preview/constants.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export const FEED_TEXT_MAX_LENGTH = 160;
2-
export const FEED_TEXT_MAX_LINES = 2;
1+
export const FEED_TEXT_MAX_LENGTH = 500;

‎packages/social-previews/src/nextdoor-preview/post-preview.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
getTitleFromDescription,
77
preparePreviewText,
88
} from '../helpers';
9-
import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
9+
import { FEED_TEXT_MAX_LENGTH } from './constants';
1010
import { FooterActions } from './footer-actions';
1111
import { ChevronIcon } from './icons/chevron-icon';
1212
import { DefaultAvatar } from './icons/default-avatar';
@@ -53,11 +53,21 @@ export function NextdoorPostPreview( {
5353
<div className="nextdoor-preview__body">
5454
{ description ? (
5555
<div className="nextdoor-preview__caption">
56-
{ preparePreviewText( description, {
57-
platform: 'nextdoor',
58-
maxChars: FEED_TEXT_MAX_LENGTH,
59-
maxLines: FEED_TEXT_MAX_LINES,
60-
} ) }
56+
<span>
57+
{ preparePreviewText( description, {
58+
platform: 'nextdoor',
59+
maxChars: FEED_TEXT_MAX_LENGTH,
60+
} ) }
61+
</span>
62+
{ ! hasMedia && url && (
63+
<>
64+
<br />
65+
<br />
66+
<a href={ url } rel="nofollow noopener noreferrer" target="_blank">
67+
{ url }
68+
</a>
69+
</>
70+
) }
6171
</div>
6272
) : null }
6373
{ hasMedia ? (

‎packages/social-previews/src/tumblr-preview/helpers.ts‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,17 @@ export const tumblrTitle: Formatter = ( text ) =>
99
hardTruncation( TITLE_LENGTH )
1010
)( stripHtmlTags( text ) ) || '';
1111

12-
export const tumblrDescription: Formatter = ( text ) =>
13-
firstValid(
14-
shortEnough( DESCRIPTION_LENGTH ),
15-
hardTruncation( DESCRIPTION_LENGTH )
16-
)( stripHtmlTags( text ) ) || '';
12+
export const tumblrDescription: Formatter = ( text ) => {
13+
// First remove Gutenberg block comments
14+
let processedText = text.replace( /<!--[\s\S]*?-->/g, '' );
15+
16+
// Convert closing paragraph tags to line breaks to preserve paragraph structure
17+
processedText = processedText.replace( /<\/p>/g, '</p>\n\n' );
18+
19+
return (
20+
firstValid(
21+
shortEnough( DESCRIPTION_LENGTH ),
22+
hardTruncation( DESCRIPTION_LENGTH )
23+
)( stripHtmlTags( processedText ) ) || ''
24+
);
25+
};

0 commit comments

Comments
 (0)