@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
23 lines • 4.36 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { __, sprintf } from '@wordpress/i18n';
import { baseDomain, getTitleFromDescription, preparePreviewText } from '../helpers';
import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
import { DefaultAvatar } from './icons/default-avatar';
import './style.scss';
export function LinkedInPostPreview({ articleReadTime = 5, image, jobTitle, name, profileImage, description, media, title, url, }) {
const hasMedia = !!media?.length;
return (_jsx("div", { className: "linkedin-preview__wrapper", children: _jsxs("section", { className: `linkedin-preview__container ${hasMedia ? 'has-media' : ''}`, children: [_jsxs("div", { className: "linkedin-preview__header", children: [_jsx("div", { className: "linkedin-preview__header--avatar", children: profileImage ? _jsx("img", { src: profileImage, alt: "" }) : _jsx(DefaultAvatar, {}) }), _jsxs("div", { className: "linkedin-preview__header--profile", children: [_jsxs("div", { className: "linkedin-preview__header--profile-info", children: [_jsx("div", { className: "linkedin-preview__header--profile-name", children: name || __('Account Name', 'social-previews') }), _jsx("span", { children: "\u2022" }), _jsx("div", { className: "linkedin-preview__header--profile-actor", children:
// translators: refers to the actor level of the post being shared, e.g. "1st", "2nd", "3rd", etc.
__('1st', 'social-previews') })] }), jobTitle ? (_jsx("div", { className: "linkedin-preview__header--profile-title", children: jobTitle })) : null, _jsxs("div", { className: "linkedin-preview__header--profile-meta", children: [_jsx("span", { children:
// translators: refers to the time since the post was published, e.g. "1h"
__('1h', 'social-previews') }), _jsx("span", { children: "\u2022" }), _jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", focusable: "false", children: _jsx("path", { d: "M8 1a7 7 0 107 7 7 7 0 00-7-7zM3 8a5 5 0 011-3l.55.55A1.5 1.5 0 015 6.62v1.07a.75.75 0 00.22.53l.56.56a.75.75 0 00.53.22H7v.69a.75.75 0 00.22.53l.56.56a.75.75 0 01.22.53V13a5 5 0 01-5-5zm6.24 4.83l2-2.46a.75.75 0 00.09-.8l-.58-1.16A.76.76 0 0010 8H7v-.19a.51.51 0 01.28-.45l.38-.19a.74.74 0 01.68 0L9 7.5l.38-.7a1 1 0 00.12-.48v-.85a.78.78 0 01.21-.53l1.07-1.09a5 5 0 01-1.54 9z" }) })] })] })] }), _jsxs("div", { className: "linkedin-preview__content", children: [description ? (_jsx("div", { className: "linkedin-preview__caption", children: preparePreviewText(description, {
platform: 'linkedin',
maxChars: FEED_TEXT_MAX_LENGTH,
maxLines: FEED_TEXT_MAX_LINES,
}) })) : null, hasMedia ? (_jsx("div", { className: "linkedin-preview__media", children: media.map((mediaItem, index) => (_jsx("div", { className: "linkedin-preview__media-item", children: mediaItem.type.startsWith('video/') ? (
// eslint-disable-next-line jsx-a11y/media-has-caption
_jsx("video", { controls: true, children: _jsx("source", { src: mediaItem.url, type: mediaItem.type }) })) : (_jsx("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `linkedin-preview__media-item-${index}`))) })) : (_jsxs("article", { children: [image ? _jsx("img", { className: "linkedin-preview__image", src: image, alt: "" }) : null, url ? (_jsxs("div", { className: "linkedin-preview__description", children: [_jsx("h2", { className: "linkedin-preview__description--title", children: title || getTitleFromDescription(description) }), _jsxs("div", { className: "linkedin-preview__description--meta", children: [_jsx("span", { className: "linkedin-preview__description--url", children: baseDomain(url) }), _jsx("span", { children: "\u2022" }), _jsx("span", { children: sprintf(
// translators: %d is the number of minutes it takes to read the article
__('%d min read', 'social-previews'), articleReadTime) })] })] })) : null] }))] })] }) }));
}
//# sourceMappingURL=post-preview.js.map