@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
26 lines • 3.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FacebookLinkPreview = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const i18n_1 = require("@wordpress/i18n");
const constants_1 = require("../constants");
const custom_text_1 = tslib_1.__importDefault(require("./custom-text"));
const helpers_1 = require("./helpers");
const use_image_hook_1 = tslib_1.__importDefault(require("./hooks/use-image-hook"));
const actions_1 = tslib_1.__importDefault(require("./post/actions"));
const header_1 = tslib_1.__importDefault(require("./post/header"));
const icons_1 = tslib_1.__importDefault(require("./post/icons"));
require("./style.scss");
const FacebookLinkPreview = ({ url, title, description, image, user, customText, type, imageMode, compactDescription, }) => {
const [mode, isLoadingImage, imgProps] = (0, use_image_hook_1.default)({ mode: imageMode });
const isArticle = type === constants_1.TYPE_ARTICLE;
const portraitMode = (isArticle && !image) || mode === constants_1.PORTRAIT_MODE;
const modeClass = `is-${portraitMode ? 'portrait' : 'landscape'}`;
return ((0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__post", children: [(0, jsx_runtime_1.jsx)(header_1.default, { user: user }), (0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__content", children: [customText && (0, jsx_runtime_1.jsx)(custom_text_1.default, { text: customText, url: url }), (0, jsx_runtime_1.jsxs)("div", { className: `facebook-preview__body ${modeClass} ${image && isLoadingImage ? 'is-loading' : ''}`, children: [(image || isArticle) && ((0, jsx_runtime_1.jsx)("div", { className: `facebook-preview__image ${image ? '' : 'is-empty'} ${modeClass}`, children: image && (0, jsx_runtime_1.jsx)("img", { src: image, ...imgProps }) })), (0, jsx_runtime_1.jsx)("div", { className: "facebook-preview__text", children: (0, jsx_runtime_1.jsxs)("div", { className: "facebook-preview__text-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "facebook-preview__url", children: (0, helpers_1.baseDomain)(url) }), (0, jsx_runtime_1.jsx)("div", { className: "facebook-preview__title", children: (0, helpers_1.facebookTitle)(title) || (0, helpers_1.baseDomain)(url) }), (0, jsx_runtime_1.jsxs)("div", { className: `facebook-preview__description ${compactDescription ? 'is-compact' : ''}`, children: [description && (0, helpers_1.facebookDescription)(description), isArticle &&
!description &&
// translators: Default description for a Facebook post
(0, i18n_1.__)('Visit the post for more.', 'social-previews')] }), (0, jsx_runtime_1.jsx)("div", { className: "facebook-preview__info", children: (0, jsx_runtime_1.jsx)(icons_1.default, { name: "info" }) })] }) })] })] }), (0, jsx_runtime_1.jsx)(actions_1.default, {})] }));
};
exports.FacebookLinkPreview = FacebookLinkPreview;
//# sourceMappingURL=link-preview.js.map