@automattic/social-previews/dist/esm/google-search-preview/index.js

A suite of components to generate previews for a post for both social and search engines.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { firstValid, hardTruncation, shortEnough, truncatedAtSpace, stripHtmlTags, baseDomain, } from '../helpers';
import './style.scss';
const URL_LENGTH = 68;
const TITLE_LENGTH = 63;
const DESCRIPTION_LENGTH = 160;
const googleUrl = (url) => {
    const protocol = url.startsWith('https://') ? 'https://' : 'http://';
    const breadcrumb = protocol + url.replace(protocol, '').split('/').join(' › ');
    const truncateBreadcrumb = firstValid(shortEnough(URL_LENGTH), hardTruncation(URL_LENGTH));
    return truncateBreadcrumb(breadcrumb);
};
const googleTitle = firstValid(shortEnough(TITLE_LENGTH), truncatedAtSpace(TITLE_LENGTH - 40, TITLE_LENGTH + 10), hardTruncation(TITLE_LENGTH));
const googleDescription = firstValid(shortEnough(DESCRIPTION_LENGTH), truncatedAtSpace(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10), hardTruncation(DESCRIPTION_LENGTH));
export const GoogleSearchPreview = ({ description = '', siteTitle, title = '', url = '', }) => {
    const domain = baseDomain(url);
    return (_jsx("div", { className: "search-preview", children: _jsxs("div", { className: "search-preview__display", children: [_jsxs("div", { className: "search-preview__header", children: [_jsxs("div", { className: "search-preview__branding", children: [_jsx("img", { className: "search-preview__icon", src: `https://www.google.com/s2/favicons?sz=128&domain_url=${domain}`, alt: "" }), _jsxs("div", { className: "search-preview__site", children: [_jsx("div", { className: "search-preview__site--title", children: siteTitle || domain }), _jsx("div", { className: "search-preview__url", children: googleUrl(url) })] })] }), _jsx("div", { className: "search-preview__menu", children: _jsx("svg", { focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }) }) })] }), _jsx("div", { className: "search-preview__title", children: googleTitle(title) }), _jsx("div", { className: "search-preview__description", children: googleDescription(stripHtmlTags(description)) })] }) }));
};
//# sourceMappingURL=index.js.map