@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
27 lines • 5.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinkedInPostPreview = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const i18n_1 = require("@wordpress/i18n");
const helpers_1 = require("../helpers");
const constants_1 = require("./constants");
const default_avatar_1 = require("./icons/default-avatar");
require("./style.scss");
function LinkedInPostPreview({ articleReadTime = 5, image, jobTitle, name, profileImage, description, media, title, url, }) {
const hasMedia = !!media?.length;
return ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("section", { className: `linkedin-preview__container ${hasMedia ? 'has-media' : ''}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--avatar", children: profileImage ? (0, jsx_runtime_1.jsx)("img", { src: profileImage, alt: "" }) : (0, jsx_runtime_1.jsx)(default_avatar_1.DefaultAvatar, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--profile-name", children: name || (0, i18n_1.__)('Account Name', 'social-previews') }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.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.
(0, i18n_1.__)('1st', 'social-previews') })] }), jobTitle ? ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__header--profile-title", children: jobTitle })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__header--profile-meta", children: [(0, jsx_runtime_1.jsx)("span", { children:
// translators: refers to the time since the post was published, e.g. "1h"
(0, i18n_1.__)('1h', 'social-previews') }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", focusable: "false", children: (0, jsx_runtime_1.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" }) })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__content", children: [description ? ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__caption", children: (0, helpers_1.preparePreviewText)(description, {
platform: 'linkedin',
maxChars: constants_1.FEED_TEXT_MAX_LENGTH,
maxLines: constants_1.FEED_TEXT_MAX_LINES,
}) })) : null, hasMedia ? ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__media", children: media.map((mediaItem, index) => ((0, jsx_runtime_1.jsx)("div", { className: "linkedin-preview__media-item", children: mediaItem.type.startsWith('video/') ? (
// eslint-disable-next-line jsx-a11y/media-has-caption
(0, jsx_runtime_1.jsx)("video", { controls: true, children: (0, jsx_runtime_1.jsx)("source", { src: mediaItem.url, type: mediaItem.type }) })) : ((0, jsx_runtime_1.jsx)("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `linkedin-preview__media-item-${index}`))) })) : ((0, jsx_runtime_1.jsxs)("article", { children: [image ? (0, jsx_runtime_1.jsx)("img", { className: "linkedin-preview__image", src: image, alt: "" }) : null, url ? ((0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__description", children: [(0, jsx_runtime_1.jsx)("h2", { className: "linkedin-preview__description--title", children: title || (0, helpers_1.getTitleFromDescription)(description) }), (0, jsx_runtime_1.jsxs)("div", { className: "linkedin-preview__description--meta", children: [(0, jsx_runtime_1.jsx)("span", { className: "linkedin-preview__description--url", children: (0, helpers_1.baseDomain)(url) }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("span", { children: (0, i18n_1.sprintf)(
// translators: %d is the number of minutes it takes to read the article
(0, i18n_1.__)('%d min read', 'social-previews'), articleReadTime) })] })] })) : null] }))] })] }) }));
}
exports.LinkedInPostPreview = LinkedInPostPreview;
//# sourceMappingURL=post-preview.js.map