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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GoogleSearchPreview = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const helpers_1 = require("../helpers");
require("./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 = (0, helpers_1.firstValid)((0, helpers_1.shortEnough)(URL_LENGTH), (0, helpers_1.hardTruncation)(URL_LENGTH));
    return truncateBreadcrumb(breadcrumb);
};
const googleTitle = (0, helpers_1.firstValid)((0, helpers_1.shortEnough)(TITLE_LENGTH), (0, helpers_1.truncatedAtSpace)(TITLE_LENGTH - 40, TITLE_LENGTH + 10), (0, helpers_1.hardTruncation)(TITLE_LENGTH));
const googleDescription = (0, helpers_1.firstValid)((0, helpers_1.shortEnough)(DESCRIPTION_LENGTH), (0, helpers_1.truncatedAtSpace)(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10), (0, helpers_1.hardTruncation)(DESCRIPTION_LENGTH));
const GoogleSearchPreview = ({ description = '', siteTitle, title = '', url = '', }) => {
    const domain = (0, helpers_1.baseDomain)(url);
    return ((0, jsx_runtime_1.jsx)("div", { className: "search-preview", children: (0, jsx_runtime_1.jsxs)("div", { className: "search-preview__display", children: [(0, jsx_runtime_1.jsxs)("div", { className: "search-preview__header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "search-preview__branding", children: [(0, jsx_runtime_1.jsx)("img", { className: "search-preview__icon", src: `https://www.google.com/s2/favicons?sz=128&domain_url=${domain}`, alt: "" }), (0, jsx_runtime_1.jsxs)("div", { className: "search-preview__site", children: [(0, jsx_runtime_1.jsx)("div", { className: "search-preview__site--title", children: siteTitle || domain }), (0, jsx_runtime_1.jsx)("div", { className: "search-preview__url", children: googleUrl(url) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "search-preview__menu", children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.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" }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "search-preview__title", children: googleTitle(title) }), (0, jsx_runtime_1.jsx)("div", { className: "search-preview__description", children: googleDescription((0, helpers_1.stripHtmlTags)(description)) })] }) }));
};
exports.GoogleSearchPreview = GoogleSearchPreview;
//# sourceMappingURL=index.js.map