@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
21 lines • 2.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { __ } from '@wordpress/i18n';
import { TYPE_ARTICLE, PORTRAIT_MODE } from '../constants';
import CustomText from './custom-text';
import { baseDomain, facebookTitle, facebookDescription } from './helpers';
import useImage from './hooks/use-image-hook';
import FacebookPostActions from './post/actions';
import FacebookPostHeader from './post/header';
import FacebookPostIcon from './post/icons';
import './style.scss';
export const FacebookLinkPreview = ({ url, title, description, image, user, customText, type, imageMode, compactDescription, }) => {
const [mode, isLoadingImage, imgProps] = useImage({ mode: imageMode });
const isArticle = type === TYPE_ARTICLE;
const portraitMode = (isArticle && !image) || mode === PORTRAIT_MODE;
const modeClass = `is-${portraitMode ? 'portrait' : 'landscape'}`;
return (_jsxs("div", { className: "facebook-preview__post", children: [_jsx(FacebookPostHeader, { user: user }), _jsxs("div", { className: "facebook-preview__content", children: [customText && _jsx(CustomText, { text: customText, url: url }), _jsxs("div", { className: `facebook-preview__body ${modeClass} ${image && isLoadingImage ? 'is-loading' : ''}`, children: [(image || isArticle) && (_jsx("div", { className: `facebook-preview__image ${image ? '' : 'is-empty'} ${modeClass}`, children: image && _jsx("img", { src: image, ...imgProps }) })), _jsx("div", { className: "facebook-preview__text", children: _jsxs("div", { className: "facebook-preview__text-wrapper", children: [_jsx("div", { className: "facebook-preview__url", children: baseDomain(url) }), _jsx("div", { className: "facebook-preview__title", children: facebookTitle(title) || baseDomain(url) }), _jsxs("div", { className: `facebook-preview__description ${compactDescription ? 'is-compact' : ''}`, children: [description && facebookDescription(description), isArticle &&
!description &&
// translators: Default description for a Facebook post
__('Visit the post for more.', 'social-previews')] }), _jsx("div", { className: "facebook-preview__info", children: _jsx(FacebookPostIcon, { name: "info" }) })] }) })] })] }), _jsx(FacebookPostActions, {})] }));
};
//# sourceMappingURL=link-preview.js.map