diff --git a/client/components/share/mastodon-share-preview/index.jsx b/client/components/share/mastodon-share-preview/index.jsx index 48d67ef19e666..2482576b3ebbb 100644 --- a/client/components/share/mastodon-share-preview/index.jsx +++ b/client/components/share/mastodon-share-preview/index.jsx @@ -13,6 +13,7 @@ export class MastodonSharePreview extends PureComponent { articleTitle, articleContent, imageUrl, + media, message, hidePostPreview, } = this.props; @@ -25,6 +26,7 @@ export class MastodonSharePreview extends PureComponent { description={ decodeEntities( articleContent ) } customText={ decodeEntities( message ) } image={ imageUrl } + media={ media } user={ { displayName: externalName, avatarUrl: externalProfilePicture, diff --git a/packages/social-previews/package.json b/packages/social-previews/package.json index 1236cbaa27a38..0f674e0b906f3 100644 --- a/packages/social-previews/package.json +++ b/packages/social-previews/package.json @@ -1,6 +1,6 @@ { "name": "@automattic/social-previews", - "version": "2.0.1-beta.12", + "version": "2.0.1-beta.13", "description": "A suite of components to generate previews for a post for both social and search engines.", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/packages/social-previews/src/helpers.tsx b/packages/social-previews/src/helpers.tsx index d5369e892c914..24ff9e6d1dbd6 100644 --- a/packages/social-previews/src/helpers.tsx +++ b/packages/social-previews/src/helpers.tsx @@ -67,6 +67,13 @@ export const formatTweetDate = new Intl.DateTimeFormat( 'en-US', { day: 'numeric', } ).format; +export const formatMastodonDate = new Intl.DateTimeFormat( 'en-US', { + // Result: "Apr 7, 2024", "Dec 31, 2023" + month: 'short', + day: 'numeric', + year: 'numeric', +} ).format; + export type Platform = 'twitter' | 'facebook' | 'linkedin' | 'instagram' | 'mastodon' | 'nextdoor'; type PreviewTextOptions = { diff --git a/packages/social-previews/src/mastodon-preview/constants.ts b/packages/social-previews/src/mastodon-preview/constants.ts index bb6ffb41ac0df..bbe2311063805 100644 --- a/packages/social-previews/src/mastodon-preview/constants.ts +++ b/packages/social-previews/src/mastodon-preview/constants.ts @@ -1 +1,4 @@ export const DEFAULT_MASTODON_INSTANCE = 'mastodon.social'; + +export const DEFAULT_AVATAR = + 'data:image/png;base64,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'; diff --git a/packages/social-previews/src/mastodon-preview/post-preview.tsx b/packages/social-previews/src/mastodon-preview/post-preview.tsx index 3ee5c1d48b49f..2767adda14c8d 100644 --- a/packages/social-previews/src/mastodon-preview/post-preview.tsx +++ b/packages/social-previews/src/mastodon-preview/post-preview.tsx @@ -1,28 +1,42 @@ -import { __ } from '@wordpress/i18n'; +import classNames from 'classnames'; 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 (
- { img && ( - { - ) } + { media?.length ? ( +
1 } ) } + > + { media.map( ( mediaItem, index ) => ( +
+ { mediaItem.type.startsWith( 'video/' ) ? ( + // eslint-disable-next-line jsx-a11y/media-has-caption + + ) : ( + { + ) } +
+ ) ) } +
+ ) : null } + { ! media?.length ? : null }
); diff --git a/packages/social-previews/src/mastodon-preview/post/actions/index.tsx b/packages/social-previews/src/mastodon-preview/post/actions/index.tsx index 2d0f00aa13679..cb4e56b0c1774 100644 --- a/packages/social-previews/src/mastodon-preview/post/actions/index.tsx +++ b/packages/social-previews/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 = () => (
- +
+ +   + { 0 } +
+
+ +
+
+ +
+
+ +
+
+ +
); diff --git a/packages/social-previews/src/mastodon-preview/post/actions/styles.scss b/packages/social-previews/src/mastodon-preview/post/actions/styles.scss index 18ccb7d6a9039..57a6e81539127 100644 --- a/packages/social-previews/src/mastodon-preview/post/actions/styles.scss +++ b/packages/social-previews/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 { diff --git a/packages/social-previews/src/mastodon-preview/post/card/index.tsx b/packages/social-previews/src/mastodon-preview/post/card/index.tsx index ab32f364dc004..5944cfc881329 100644 --- a/packages/social-previews/src/mastodon-preview/post/card/index.tsx +++ b/packages/social-previews/src/mastodon-preview/post/card/index.tsx @@ -1,5 +1,6 @@ import { __ } from '@wordpress/i18n'; -import { baseDomain, getTitleFromDescription } from '../../../helpers'; +import classNames from 'classnames'; +import { baseDomain, getTitleFromDescription, stripHtmlTags } from '../../../helpers'; import { mastodonTitle } from '../../helpers'; import { MastodonPreviewProps } from '../../types'; @@ -14,20 +15,33 @@ const MastodonPostCard: React.FC< MastodonPreviewProps > = ( { customImage, } ) => { return ( -
+
- { ( image || customImage ) && ( + { image || customImage ? ( { + ) : ( +
+ +
) }
+ { siteName || baseDomain( url ) } { mastodonTitle( title ) || getTitleFromDescription( description ) } - { siteName || baseDomain( url ) } + { stripHtmlTags( description ) }
); diff --git a/packages/social-previews/src/mastodon-preview/post/card/styles.scss b/packages/social-previews/src/mastodon-preview/post/card/styles.scss index 3196c3bc8ad3f..d019ced28ceed 100644 --- a/packages/social-previews/src/mastodon-preview/post/card/styles.scss +++ b/packages/social-previews/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; } diff --git a/packages/social-previews/src/mastodon-preview/post/header/index.tsx b/packages/social-previews/src/mastodon-preview/post/header/index.tsx index 6205e28a28a40..b2e9c8d5a45e8 100644 --- a/packages/social-previews/src/mastodon-preview/post/header/index.tsx +++ b/packages/social-previews/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 (
- { avatarUrl && } +
{ displayName || @@ -21,16 +22,13 @@ const MastodonPostHeader: React.FC< Props > = ( { user } ) => { __( 'anonymous-user', 'social-previews' ) }
- { address?.replace( `@${ DEFAULT_MASTODON_INSTANCE }`, '' ) } + { address?.replace( `@${ DEFAULT_MASTODON_INSTANCE }`, '' ) || '@username' }
- - { - // translators: time elapsed since post was published (1 hour) - __( '1h', 'social-previews' ) - } + + { formatMastodonDate( new Date() ) }
); diff --git a/packages/social-previews/src/mastodon-preview/post/icons/index.tsx b/packages/social-previews/src/mastodon-preview/post/icons/index.tsx index 40e2d0b8c9860..cf897d30392b2 100644 --- a/packages/social-previews/src/mastodon-preview/post/icons/index.tsx +++ b/packages/social-previews/src/mastodon-preview/post/icons/index.tsx @@ -1,7 +1,13 @@ -import './styles.scss'; - -const MastodonPostIcon: React.FC< { name: string } > = ( { name } ) => ( - -); - -export default MastodonPostIcon; +export function GlobeIcon() { + return ( + + + + ); +} diff --git a/packages/social-previews/src/mastodon-preview/post/icons/styles.scss b/packages/social-previews/src/mastodon-preview/post/icons/styles.scss deleted file mode 100644 index 1d475cc7faf41..0000000000000 --- a/packages/social-previews/src/mastodon-preview/post/icons/styles.scss +++ /dev/null @@ -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; -} diff --git a/packages/social-previews/src/mastodon-preview/styles.scss b/packages/social-previews/src/mastodon-preview/styles.scss index c1bbcf3fac326..68132865d073b 100644 --- a/packages/social-previews/src/mastodon-preview/styles.scss +++ b/packages/social-previews/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; + } + } + +} diff --git a/packages/social-previews/src/tumblr-preview/previews.tsx b/packages/social-previews/src/tumblr-preview/previews.tsx index 72444f907b722..76fc48b7913e7 100644 --- a/packages/social-previews/src/tumblr-preview/previews.tsx +++ b/packages/social-previews/src/tumblr-preview/previews.tsx @@ -14,6 +14,8 @@ export const TumblrPreviews: React.FC< TumblrPreviewsProps > = ( { hidePostPreview, ...props } ) => { + const hasMedia = !! props.media?.length; + return (
{ ! hidePostPreview && ( @@ -27,7 +29,7 @@ export const TumblrPreviews: React.FC< TumblrPreviewsProps > = ( {

{ __( 'This is what your social post will look like on Tumblr:', 'social-previews' ) }

- + { hasMedia ? : } ) } { ! hideLinkPreview && (