@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
918 lines (840 loc) • 129 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/helpers.tsx
var _element = require('@wordpress/element');
var _i18n = require('@wordpress/i18n');
var _jsxruntime = require('react/jsx-runtime');
var baseDomain = (url) => {
const withoutProtocol = url.replace(/^[^/]+:\/\//, "");
const slashIndex = withoutProtocol.indexOf("/");
return slashIndex === -1 ? withoutProtocol : withoutProtocol.substring(0, slashIndex);
};
var codepointLength = (text) => Array.from(text).length;
var codepointSlice = (text, start, end) => Array.from(text).slice(start, end).join("");
var shortEnough = (limit) => (title) => codepointLength(title) <= limit ? title : false;
var truncatedAtSpace = (lower, upper) => (fullTitle) => {
const title = fullTitle.slice(0, upper);
const lastSpace = title.lastIndexOf(" ");
return lastSpace > lower && lastSpace < upper ? title.slice(0, lastSpace).concat("\u2026") : false;
};
var hardTruncation = (limit) => (title) => codepointSlice(title, 0, limit).concat("\u2026");
var firstValid = (...predicates) => (a) => _optionalChain([predicates, 'access', _ => _.find, 'call', _2 => _2((p) => false !== p(a)), 'optionalCall', _3 => _3(a)]);
var stripHtmlTags = (description, allowedTags = []) => {
const pattern = new RegExp(`(<([^${allowedTags.join("")}>]+)>)`, "gi");
return description ? description.replace(pattern, "") : "";
};
var getTitleFromDescription = (description) => {
return stripHtmlTags(description).substring(0, 50);
};
var hasTag = (text, tag) => {
const pattern = new RegExp(`<${tag}[^>]*>`, "gi");
return pattern.test(text);
};
var formatNextdoorDate = new Intl.DateTimeFormat("en-GB", {
// Result: "7 Oct", "31 Dec"
day: "numeric",
month: "short"
}).format;
var formatThreadsDate = new Intl.DateTimeFormat("en-US", {
// Result: "'06/21/2024"
day: "2-digit",
month: "2-digit",
year: "numeric"
}).format;
var formatTweetDate = new Intl.DateTimeFormat("en-US", {
// Result: "Apr 7", "Dec 31"
month: "short",
day: "numeric"
}).format;
var formatMastodonDate = new Intl.DateTimeFormat("en-US", {
// Result: "Apr 7, 2024", "Dec 31, 2023"
month: "short",
day: "numeric",
year: "numeric"
}).format;
var hashtagUrlMap = {
twitter: "https://twitter.com/hashtag/%1$s",
facebook: "https://www.facebook.com/hashtag/%1$s",
linkedin: "https://www.linkedin.com/feed/hashtag/?keywords=%1$s",
instagram: "https://www.instagram.com/explore/tags/%1$s",
mastodon: "https://%2$s/tags/%1$s",
nextdoor: "https://nextdoor.com/hashtag/%1$s",
threads: "https://www.threads.net/search?q=%1$s&serp_type=tags",
tumblr: "https://www.tumblr.com/tagged/%1$s",
bluesky: "https://bsky.app/hashtag/%1$s"
};
function preparePreviewText(text, options) {
const {
platform,
maxChars,
maxLines,
hyperlinkHashtags = true,
// Instagram doesn't support hyperlink URLs at the moment.
hyperlinkUrls = "instagram" !== platform
} = options;
let result = stripHtmlTags(text);
result = result.replaceAll(/(?:\s*[\n\r]){2,}/g, "\n\n");
if (maxChars && codepointLength(result) > maxChars) {
result = hardTruncation(maxChars)(result);
}
if (maxLines) {
const lines = result.split("\n");
if (lines.length > maxLines) {
result = lines.slice(0, maxLines).join("\n");
}
}
const componentMap = {};
if (hyperlinkUrls) {
const urls = result.match(/(https?:\/\/\S+)/g) || [];
urls.forEach((url, index) => {
componentMap[`Link${index}`] = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: url, rel: "noopener noreferrer", target: "_blank", children: url });
result = result.replace(url, `<Link${index} />`);
});
}
if (hyperlinkHashtags && hashtagUrlMap[platform]) {
const hashtags = result.matchAll(/(^|\s)#(\w+)/g);
const hashtagUrl = hashtagUrlMap[platform];
[...hashtags].forEach(([fullMatch, whitespace, hashtag], index) => {
const url = _i18n.sprintf.call(void 0, hashtagUrl, hashtag, options.hashtagDomain);
componentMap[`Hashtag${index}`] = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: url, rel: "noopener noreferrer", target: "_blank", children: `#${hashtag}` });
result = result.replace(fullMatch, `${whitespace}<Hashtag${index} />`);
});
}
result = result.replace(/\n/g, "<br />");
componentMap.br = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {});
return _element.createInterpolateElement.call(void 0, result, componentMap);
}
// src/site-icon-with-fallback.tsx
var _react = require('react');
// src/icons/globe-icon.tsx
function GlobeIcon(props) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"svg",
{
focusable: "false",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "14",
height: "14",
...props,
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"path",
{
fill: "currentColor",
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
}
)
}
);
}
// src/site-icon-with-fallback.tsx
function DefaultSiteIcon({ className }) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className,
"aria-hidden": "true",
style: {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#e8eaed",
color: "#5f6368",
borderRadius: "50%"
},
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GlobeIcon, { style: { width: "60%", height: "60%" } })
}
);
}
function SiteIconWithFallback({
src: siteIconUrl,
alt = "",
className,
fallback = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultSiteIcon, { className })
}) {
const [imageUrlWithError, setImageUrlWithError] = _react.useState.call(void 0, "");
const onError = _react.useCallback.call(void 0, (event) => {
setImageUrlWithError(event.target.src);
}, []);
const showIcon = siteIconUrl && // Check if the image URL with error is different from the provided site icon URL
// to ensure that a change in siteIconUrl resets the error state
imageUrlWithError !== siteIconUrl;
return showIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: siteIconUrl, alt, onError, className }) : fallback;
}
// src/google-search-preview/index.tsx
var URL_LENGTH = 68;
var TITLE_LENGTH = 63;
var DESCRIPTION_LENGTH = 160;
var googleUrl = (url) => {
const protocol = url.startsWith("https://") ? "https://" : "http://";
const breadcrumb = protocol + url.replace(protocol, "").split("/").join(" \u203A ");
const truncateBreadcrumb = firstValid(shortEnough(URL_LENGTH), hardTruncation(URL_LENGTH));
return truncateBreadcrumb(breadcrumb);
};
var googleTitle = firstValid(
shortEnough(TITLE_LENGTH),
truncatedAtSpace(TITLE_LENGTH - 40, TITLE_LENGTH + 10),
hardTruncation(TITLE_LENGTH)
);
var googleDescription = firstValid(
shortEnough(DESCRIPTION_LENGTH),
truncatedAtSpace(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10),
hardTruncation(DESCRIPTION_LENGTH)
);
var GoogleSearchPreview = ({
description = "",
siteIcon,
siteTitle,
title = "",
url = ""
}) => {
const domain = baseDomain(url);
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "search-preview", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "search-preview__display", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "search-preview__header", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "search-preview__branding", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SiteIconWithFallback, { className: "search-preview__icon", src: siteIcon }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "search-preview__site", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "search-preview__site--title", children: siteTitle || domain }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "search-preview__url", children: googleUrl(url) })
] })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "search-preview__menu", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }) })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "search-preview__title", children: googleTitle(title) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "search-preview__description", children: googleDescription(stripHtmlTags(description)) })
] }) });
};
// src/twitter-preview/card.tsx
var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
var DESCRIPTION_LENGTH2 = 280;
var twitterDescription = firstValid(
shortEnough(DESCRIPTION_LENGTH2),
hardTruncation(DESCRIPTION_LENGTH2)
);
var Card = ({
description,
image,
title,
cardType,
url
}) => {
const cardClassNames = _clsx2.default.call(void 0, `twitter-preview__card-${cardType}`, {
"twitter-preview__card-has-image": !!image
});
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__card", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cardClassNames, children: [
image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "twitter-preview__card-image", src: image, alt: "" }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__card-body", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__card-url", children: baseDomain(url || "") }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__card-title", children: title }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__card-description", children: twitterDescription(stripHtmlTags(description)) })
] })
] }) });
};
// src/twitter-preview/footer.tsx
var Footer = () => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__footer", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__icon-replies", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z" }) }) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__icon-retweets", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z" }) }) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__icon-likes", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z" }) }) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__icon-analytics", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z" }) }) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__icon-share", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z" }) }) })
] });
};
// src/twitter-preview/header.tsx
var Header = ({ name, screenName, date }) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__header", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__name", children: name || _i18n.__.call(void 0, "Account Name", "social-previews") }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__screen-name", children: screenName || "@account" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\xB7" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "twitter-preview__date", children: formatTweetDate(date || Date.now()) })
] });
};
// src/twitter-preview/media.tsx
var Media = ({ media }) => {
const filteredMedia = media.filter(
(mediaItem) => mediaItem.type.startsWith("image/") || mediaItem.type.startsWith("video/")
).filter((mediaItem, idx, array) => {
if (0 === idx) {
return true;
}
if (array[0].type.startsWith("video/") || "image/gif" === array[0].type) {
return false;
}
if (mediaItem.type.startsWith("video/") || "image/gif" === mediaItem.type) {
return false;
}
return true;
}).slice(0, 4);
if (0 === filteredMedia.length) {
return null;
}
const isVideo = filteredMedia[0].type.startsWith("video/");
const mediaClasses = _clsx2.default.call(void 0, [
"twitter-preview__media",
"twitter-preview__media-children-" + filteredMedia.length
]);
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: mediaClasses, children: filteredMedia.map((mediaItem, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: isVideo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { controls: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "source", { src: mediaItem.url, type: mediaItem.type }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { alt: mediaItem.alt || "", src: mediaItem.url }) }, `twitter-preview__media-item-${index}`)) });
};
// src/twitter-preview/quote-tweet.tsx
var _components = require('@wordpress/components');
var QuoteTweet = ({ tweetUrl }) => {
if (!tweetUrl) {
return null;
}
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__quote-tweet", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_components.SandBox,
{
html: `<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><a href="${tweetUrl}"></a></blockquote>`,
scripts: ["https://platform.twitter.com/widgets.js"],
title: "Embedded tweet"
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__quote-tweet-overlay" })
] });
};
// src/avatar-with-fallback.tsx
function DefaultAvatar(props) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 340 340",
width: "36",
height: "36",
"aria-hidden": "true",
...props,
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"path",
{
fill: "#DDD",
d: "m169,.5a169,169 0 1,0 2,0zm0,86a76,76 0 1 1-2,0zM57,287q27-35 67-35h92q40,0 67,35a164,164 0 0,1-226,0"
}
)
}
);
}
function AvatarWithFallback({
src: avatarUrl,
alt = "",
className,
fallback = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultAvatar, { className })
}) {
const [imageUrlWithError, setImageUrlWithError] = _react.useState.call(void 0, "");
const onError = _react.useCallback.call(void 0, (event) => {
setImageUrlWithError(event.target.src);
}, []);
const showAvatar = !!avatarUrl && // Check if the image URL with error is different from the provided avatar URL
// to ensure that a change in avatarUrl resets the error state
imageUrlWithError !== avatarUrl;
return showAvatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: avatarUrl, alt, onError, className }) : fallback;
}
// src/twitter-preview/sidebar.tsx
var Sidebar = ({ profileImage, showThreadConnector }) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__sidebar", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__profile-image", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarWithFallback, { src: profileImage }) }),
showThreadConnector && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__connector" })
] });
};
// src/twitter-preview/text.tsx
var Text = ({ text }) => {
if (!text) {
return null;
}
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__text", children: preparePreviewText(text, { platform: "twitter" }) });
};
// src/twitter-preview/post-preview.tsx
var TwitterPostPreview = ({
date,
description,
image,
media,
name,
profileImage,
screenName,
showThreadConnector,
text,
title,
tweetUrl,
cardType,
url
}) => {
const hasMedia = !!_optionalChain([media, 'optionalAccess', _4 => _4.length]);
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__wrapper", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__container", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, { profileImage, showThreadConnector }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__main", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Header, { name, screenName, date }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__content", children: [
text ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { text }) : null,
hasMedia ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Media, { media }) : null,
tweetUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QuoteTweet, { tweetUrl }) : null,
!hasMedia && url && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
Card,
{
description: description || "",
image,
title: title || "",
cardType: cardType || "",
url
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Footer, {})
] })
] }) });
};
// src/twitter-preview/link-preview.tsx
var TwitterLinkPreview = (props) => {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
TwitterPostPreview,
{
...props,
text: "",
media: void 0
}
);
};
// src/twitter-preview/previews.tsx
// src/shared/section-heading/index.tsx
var HEADING_LEVELS = [2, 3, 4, 5, 6];
var SectionHeading = ({
className,
level,
children
}) => {
const Tag = `h${level && HEADING_LEVELS.includes(level) ? level : 3}`;
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tag, { className: `social-preview__section-heading ${_nullishCoalesce(className, () => ( ""))}`, children });
};
var section_heading_default = SectionHeading;
// src/twitter-preview/previews.tsx
var TwitterPreviews = ({
headingLevel,
hideLinkPreview,
hidePostPreview,
tweets
}) => {
if (!_optionalChain([tweets, 'optionalAccess', _5 => _5.length])) {
return null;
}
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "social-preview twitter-preview", children: [
!hidePostPreview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "social-preview__section twitter-preview__section", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, section_heading_default, {
level: headingLevel,
// translators: refers to a social post on Twitter
children: _i18n.__.call(void 0, "Your post", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "social-preview__section-desc", children: _i18n.__.call(void 0, "This is what your social post will look like on X:", "social-previews") }),
tweets.map((tweet, index) => {
const isLast = index + 1 === tweets.length;
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
TwitterPostPreview,
{
...tweet,
showThreadConnector: !isLast
},
`twitter-preview__tweet-${index}`
);
})
] }),
!hideLinkPreview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "social-preview__section twitter-preview__section", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, section_heading_default, {
level: headingLevel,
// translators: refers to a link to a Twitter post
children: _i18n.__.call(void 0, "Link preview", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "social-preview__section-desc", children: _i18n.__.call(void 0,
"This is what it will look like when someone shares the link to your WordPress post on X.",
"social-previews"
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, TwitterLinkPreview, { ...tweets[0], name: "", profileImage: "", screenName: "" })
] })
] });
};
// src/linkedin-preview/post-preview.tsx
// src/shared/expandable-text/index.tsx
var EXPAND_THRESHOLD_CHARS = 400;
function codepointLength2(text) {
return Array.from(text).length;
}
function truncateAtWordBoundary(text, limit) {
const codepoints = Array.from(text);
if (codepoints.length <= limit) {
return text;
}
const slice = codepoints.slice(0, limit).join("");
const lastSpace = slice.lastIndexOf(" ");
const cut = lastSpace > limit - 80 ? lastSpace : slice.length;
return slice.slice(0, cut);
}
function ExpandableText(props) {
const { text, children } = props;
const [expanded, toggle] = _react.useReducer.call(void 0, (state) => !state, false);
const stripped = stripHtmlTags(text);
if (codepointLength2(stripped) <= EXPAND_THRESHOLD_CHARS) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: children(text) });
}
if (expanded) {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
children(text),
" ",
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _components.Button, { variant: "link", className: "social-previews__expand-toggle", onClick: toggle, children: _i18n.__.call(void 0, "See less", "social-previews") })
] });
}
const truncated = truncateAtWordBoundary(stripped, EXPAND_THRESHOLD_CHARS);
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
children(truncated),
"\u2026 ",
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _components.Button, { variant: "link", className: "social-previews__expand-toggle", onClick: toggle, children: _i18n.__.call(void 0, "See more", "social-previews") })
] });
}
// src/linkedin-preview/constants.ts
var FEED_TEXT_MAX_LENGTH = 3e3;
// src/linkedin-preview/post-preview.tsx
function LinkedInPostPreview({
articleReadTime = 5,
image,
jobTitle,
name,
profileImage,
description,
media,
title,
url
}) {
const hasMedia = !!_optionalChain([media, 'optionalAccess', _6 => _6.length]);
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "linkedin-preview__wrapper", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: `linkedin-preview__container ${hasMedia ? "has-media" : ""}`, children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__header", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "linkedin-preview__header--avatar", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarWithFallback, { src: profileImage }) }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__header--profile", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__header--profile-info", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "linkedin-preview__header--profile-name", children: name || _i18n.__.call(void 0, "Account Name", "social-previews") }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2022" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
className: "linkedin-preview__header--profile-actor",
// translators: refers to the actor level of the post being shared, e.g. "1st", "2nd", "3rd", etc.
children: _i18n.__.call(void 0, "1st", "social-previews")
})
] }),
jobTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "linkedin-preview__header--profile-title", children: jobTitle }) : null,
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__header--profile-meta", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
// translators: refers to the time since the post was published, e.g. "1h"
children: _i18n.__.call(void 0, "1h", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2022" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", focusable: "false", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) })
] })
] })
] }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__content", children: [
description ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__caption", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: description, children: (visibleText) => preparePreviewText(visibleText, {
platform: "linkedin",
maxChars: FEED_TEXT_MAX_LENGTH
}) }) }),
hasMedia && url && !description.includes(url) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
" - ",
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: url, rel: "nofollow noopener noreferrer", target: "_blank", children: url })
] })
] }) : null,
hasMedia ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "linkedin-preview__media", children: media.map((mediaItem, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: "linkedin-preview__media-item",
children: mediaItem.type.startsWith("video/") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { controls: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "source", { src: mediaItem.url, type: mediaItem.type }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { alt: mediaItem.alt || "", src: mediaItem.url })
},
`linkedin-preview__media-item-${index}`
)) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "article", { children: [
image ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "linkedin-preview__image", src: image, alt: "" }) : null,
url ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__description", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "linkedin-preview__description--title", children: title || getTitleFromDescription(description) }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__description--meta", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "linkedin-preview__description--url", children: baseDomain(url) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2022" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: _i18n.sprintf.call(void 0,
// translators: %d is the number of minutes it takes to read the article
_i18n.__.call(void 0, "%d min read", "social-previews"),
articleReadTime
) })
] })
] }) : null
] })
] })
] }) });
}
// src/linkedin-preview/link-preview.tsx
function LinkedInLinkPreview(props) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
LinkedInPostPreview,
{
name: "",
profileImage: "",
...props,
description: "",
media: void 0,
title: props.title || getTitleFromDescription(props.description)
}
);
}
// src/linkedin-preview/previews.tsx
var LinkedInPreviews = ({
headingLevel,
hideLinkPreview,
hidePostPreview,
...props
}) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "social-preview linkedin-preview", children: [
!hidePostPreview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "social-preview__section linkedin-preview__section", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, section_heading_default, {
level: headingLevel,
// translators: refers to a social post on LinkedIn
children: _i18n.__.call(void 0, "Your post", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "social-preview__section-desc", children: _i18n.__.call(void 0, "This is what your social post will look like on LinkedIn:", "social-previews") }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkedInPostPreview, { ...props })
] }),
!hideLinkPreview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "social-preview__section linkedin-preview__section", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, section_heading_default, {
level: headingLevel,
// translators: refers to a link to a LinkedIn post
children: _i18n.__.call(void 0, "Link preview", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "social-preview__section-desc", children: _i18n.__.call(void 0,
"This is what it will look like when someone shares the link to your WordPress post on LinkedIn.",
"social-previews"
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkedInLinkPreview, { ...props, name: "", profileImage: "" })
] })
] });
};
// src/tumblr-preview/link-preview.tsx
// src/tumblr-preview/helpers.ts
var TITLE_LENGTH2 = 1e3;
var DESCRIPTION_LENGTH3 = 4096;
var tumblrTitle = (text) => firstValid(
shortEnough(TITLE_LENGTH2),
hardTruncation(TITLE_LENGTH2)
)(stripHtmlTags(text)) || "";
var tumblrDescription = (text) => {
let processedText = text;
let startIndex = processedText.indexOf("<!--");
while (startIndex !== -1) {
const endIndex = processedText.indexOf("-->", startIndex);
if (endIndex === -1) {
processedText = processedText.substring(0, startIndex);
break;
}
processedText = processedText.substring(0, startIndex) + processedText.substring(endIndex + 3);
startIndex = processedText.indexOf("<!--");
}
processedText = processedText.replace(/<\/p>/g, "</p>\n\n");
return firstValid(
shortEnough(DESCRIPTION_LENGTH3),
hardTruncation(DESCRIPTION_LENGTH3)
)(stripHtmlTags(processedText)) || "";
};
// src/tumblr-preview/post/actions/index.tsx
// src/tumblr-preview/post/icons/index.tsx
var TumblrPostIcon = ({ name }) => {
let svg;
switch (name) {
case "blaze":
svg = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 25 22", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m7.5059-0.24414c-0.79843 0.057223-1.2169 0.88587-1.1635 1.6128-0.2266 2.0449-1.4898 3.8696-3.1975 4.9778-3.0182 2.414-4.2201 6.8066-2.8033 10.411 0.92417 2.4679 2.9589 4.5674 5.4768 5.3928 0.95914 0.16102 1.7233-0.94358 1.3074-1.8059-0.11578-0.51062-0.17482-0.96516-0.17845-1.487 1.0413 1.5607 2.5484 2.8986 4.341 3.4975 1.0396-0.0154 1.98-0.64458 2.8516-1.1608 3.3821-2.1786 4.9604-6.7097 3.6597-10.518-0.49144-1.4599-1.2948-2.8935-2.5028-3.8698-0.7512-0.45498-1.661 0.09677-1.9202 0.86038-0.12274 0.16822-0.70352 1.1955-0.6191 0.61976 0.25488-3.4397-1.6789-7.0066-4.8123-8.4958-0.14322-0.037843-0.292-0.049464-0.43945-0.035156zm1.0586 3.5605c1.8947 2.0016 2.2326 5.1984 0.89062 7.5879-0.38498 0.96148 0.71762 2.0063 1.6567 1.5681 1.4159-0.4624 2.6998-1.3259 3.6577-2.4665 1.6442 2.5888 1.1465 6.2819-1.0629 8.3379-0.62378 0.60782-1.3666 1.0945-2.1754 1.4179-1.9543-0.989-3.3534-3.0966-3.5625-5.3125-0.25636-1.0253-1.81-1.2013-2.2852-0.25781-0.75058 1.3054-1.1846 2.7948-1.2305 4.3008-2.2396-1.9852-2.8468-5.4435-1.4609-8.0527 0.58926-1.239 1.651-2.13 2.724-2.9329 1.2958-1.1271 2.2791-2.62 2.7682-4.2683l0.071578 0.069832z" }) });
break;
case "delete":
svg = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { viewBox: "0 0 14 17", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 5v9c.1.7-.3 1-1 1H3c-.5 0-.9-.3-1-1V5c0-.6-.4-1-1-1-.5 0-1 .4-1 1v9.5C0 16.1 1.4 17 3 17h8c1.8 0 3-.8 3-2.5V5c0-.6-.5-1-1-1-.6 0-1 .5-1 1z" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4 12s0 1 1 1 1-1 1-1V5c0-.5-.4-1-1-1-.5 0-1 .5-1 1v7zm4 0s0 1 1 1 1-1 1-1V5c0-.5-.4-1-1-1-.5 0-1 .5-1 1v7zm5-10c.5 0 1-.4 1-1 0-.5-.4-.9-1-1H1C.5.1 0 .5 0 1c0 .6.6 1 1.1 1H13z" })
] });
break;
case "edit":
svg = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 17.6 17.6", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M5.3 13.8l-2.1.7.7-2.1L10.3 6l1.4 1.4-6.4 6.4zm6.4-9.3l-1.4-1.4-1.4 1.4-6.7 6.7-.2.5-2 5.9 3.8-1.3 2.1-.7.4-.1.3-.3 7.8-7.8c.1 0-2.7-2.9-2.7-2.9zm5.6-1.4L14.5.3c-.4-.4-1-.4-1.4 0l-1.4 1.4L15.9 6l1.4-1.4c.4-.5.4-1.1 0-1.5" }) });
break;
case "share":
svg = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12.6173 1.07612C12.991 0.921338 13.4211 1.00689 13.7071 1.29289L22.7071 10.2929C23.0832 10.669 23.0991 11.2736 22.7433 11.669L13.7433 21.669C13.4663 21.9767 13.0283 22.082 12.6417 21.9336C12.2552 21.7853 12 21.414 12 21V16H11.5C7.31775 16 3.92896 18.2486 2.95256 21.3044C2.80256 21.7738 2.33292 22.064 1.84598 21.9881C1.35904 21.9122 1 21.4928 1 21V18.5C1 12.3162 5.88069 7.27245 12 7.01067V2C12 1.59554 12.2436 1.2309 12.6173 1.07612ZM14 4.41421V8C14 8.55228 13.5523 9 13 9H12.5C7.64534 9 3.64117 12.6414 3.06988 17.3419C5.09636 15.2366 8.18218 14 11.5 14H13C13.5523 14 14 14.4477 14 15V18.394L20.622 11.0362L14 4.41421Z" }) });
break;
case "reply":
svg = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 17 17", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.7 0C4.1 0 .4 3.7.4 8.3c0 1.2.2 2.3.7 3.4-.2.6-.4 1.5-.7 2.5L0 15.8c-.2.7.5 1.4 1.2 1.2l1.6-.4 2.4-.7c1.1.5 2.2.7 3.4.7 4.6 0 8.3-3.7 8.3-8.3C17 3.7 13.3 0 8.7 0zM15 8.3c0 3.5-2.8 6.3-6.4 6.3-1.2 0-2.3-.3-3.2-.9l-3.2.9.9-3.2c-.5-.9-.9-2-.9-3.2.1-3.4 3-6.2 6.5-6.2S15 4.8 15 8.3z" }) });
break;
case "reblog":
svg = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 17 18.1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12.8.2c-.4-.4-.8-.2-.8.4v2H2c-2 0-2 2-2 2v5s0 1 1 1 1-1 1-1v-4c0-1 .5-1 1-1h9v2c0 .6.3.7.8.4L17 3.6 12.8.2zM4.2 17.9c.5.4.8.2.8-.3v-2h10c2 0 2-2 2-2v-5s0-1-1-1-1 1-1 1v4c0 1-.5 1-1 1H5v-2c0-.6-.3-.7-.8-.4L0 14.6l4.2 3.3z" }) });
break;
case "like":
svg = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 20 18", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14.658 0c-1.625 0-3.21.767-4.463 2.156-.06.064-.127.138-.197.225-.074-.085-.137-.159-.196-.225C8.547.766 6.966 0 5.35 0 4.215 0 3.114.387 2.162 1.117c-2.773 2.13-2.611 5.89-1.017 8.5 2.158 3.535 6.556 7.18 7.416 7.875A2.3 2.3 0 0 0 9.998 18c.519 0 1.028-.18 1.436-.508.859-.695 5.257-4.34 7.416-7.875 1.595-2.616 1.765-6.376-1-8.5C16.895.387 15.792 0 14.657 0h.001zm0 2.124c.645 0 1.298.208 1.916.683 1.903 1.461 1.457 4.099.484 5.695-1.973 3.23-6.16 6.7-6.94 7.331a.191.191 0 0 1-.241 0c-.779-.631-4.966-4.101-6.94-7.332-.972-1.595-1.4-4.233.5-5.694.619-.475 1.27-.683 1.911-.683 1.064 0 2.095.574 2.898 1.461.495.549 1.658 2.082 1.753 2.203.095-.12 1.259-1.654 1.752-2.203.8-.887 1.842-1.461 2.908-1.461h-.001z" }) });
break;
case "ellipsis":
svg = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 17.5 3.9", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M17.5 1.9c0 1.1-.9 1.9-1.9 1.9-1.1 0-1.9-.9-1.9-1.9S14.5 0 15.6 0c1 0 1.9.9 1.9 1.9m-6.8 0c0 1.1-.9 1.9-1.9 1.9-1.1.1-2-.8-2-1.9 0-1 .9-1.9 2-1.9s1.9.9 1.9 1.9m-6.8 0c0 1.1-.9 2-2 2-1 0-1.9-.9-1.9-2S.9 0 1.9 0c1.1 0 2 .9 2 1.9" }) });
break;
}
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `tumblr-preview__post-icon tumblr-preview__post-icon-${name}`, children: svg });
};
var icons_default = TumblrPostIcon;
// src/tumblr-preview/post/actions/index.tsx
var TumblrPostActions = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__post-actions", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__post-manage-actions", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__post-actions-blaze", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, icons_default, { name: "blaze" }),
"\xA0Blaze"
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { children: [
{
icon: "delete",
// translators: "Delete" action on a Tumblr post
label: _i18n.__.call(void 0, "Delete", "social-previews")
},
{
icon: "edit",
// translators: "Edit" action on a Tumblr post
label: _i18n.__.call(void 0, "Edit", "social-previews")
}
].map(({ icon, label }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { "aria-label": label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, icons_default, { name: icon }) }, icon)) })
] }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__post-social-actions", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
// translators: count of notes on a Tumblr post
children: _i18n.__.call(void 0, "0 notes", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { children: [
{
icon: "share",
// translators: "Share" action on a Tumblr post
label: _i18n.__.call(void 0, "Share", "social-previews")
},
{
icon: "reply",
// translators: "Reply" action on a Tumblr post
label: _i18n.__.call(void 0, "Reply", "social-previews")
},
{
icon: "reblog",
// translators: "Reblog" action on a Tumblr post
label: _i18n.__.call(void 0, "Reblog", "social-previews")
},
{
icon: "like",
// translators: "Like" action on a Tumblr post
label: _i18n.__.call(void 0, "Like", "social-previews")
}
].map(({ icon, label }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { "aria-label": label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, icons_default, { name: icon }) }, icon)) })
] })
] });
var actions_default = TumblrPostActions;
// src/tumblr-preview/post/header/index.tsx
var TumblrPostHeader = ({ user }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__post-header", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__post-header-username", children: _optionalChain([user, 'optionalAccess', _7 => _7.displayName]) || // translators: username of a fictional Tumblr User
_i18n.__.call(void 0, "anonymous-user", "social-previews") }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, icons_default, { name: "ellipsis" })
] });
var header_default = TumblrPostHeader;
// src/tumblr-preview/link-preview.tsx
var TumblrLinkPreview = ({
title,
description,
image,
user,
url
}) => {
const avatarUrl = _optionalChain([user, 'optionalAccess', _8 => _8.avatarUrl]);
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__post", children: [
avatarUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "tumblr-preview__avatar", src: avatarUrl, alt: "" }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__card", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, header_default, { user }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__window", children: [
image && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__window-top", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__overlay", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__title", children: tumblrTitle(title) }) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"img",
{
className: "tumblr-preview__image",
src: image,
alt: _i18n.__.call(void 0, "Tumblr preview thumbnail", "social-previews")
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `tumblr-preview__window-bottom ${!image ? "is-full" : ""}`, children: [
!image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__title", children: tumblrTitle(title) }),
description && image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__description", children: tumblrDescription(description) }),
url && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__site-name", children: baseDomain(url) })
] })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, actions_default, {})
] })
] });
};
// src/tumblr-preview/post-preview.tsx
var TumblrPostPreview = ({
title,
description,
image,
user,
url,
media
}) => {
const avatarUrl = _optionalChain([user, 'optionalAccess', _9 => _9.avatarUrl]);
const mediaItem = _optionalChain([media, 'optionalAccess', _10 => _10[0]]);
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__post", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarWithFallback, { className: "tumblr-preview__avatar", src: avatarUrl }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__card", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, header_default, { user }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__body", children: [
title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__title", children: tumblrTitle(title) }) : null,
description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__description", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: description, children: (visibleText) => preparePreviewText(tumblrDescription(visibleText), {
platform: "tumblr"
}) }) }),
mediaItem ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__media-item", children: mediaItem.type.startsWith("video/") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { controls: true, className: "tumblr-preview__media--video", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "source", { src: mediaItem.url, type: mediaItem.type }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "tumblr-preview__image", src: mediaItem.url, alt: "" }) }) : image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"img",
{
className: "tumblr-preview__image",
src: image,
alt: _i18n.__.call(void 0, "Tumblr preview thumbnail", "social-previews")
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "tumblr-preview__url", href: url, target: "_blank", rel: "noreferrer", children: _i18n.__.call(void 0, "View On WordPress", "social-previews") })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, actions_default, {})
] })
] });
};
// src/tumblr-preview/previews.tsx
var TumblrPreviews = ({
headingLevel,
hideLinkPreview,
hidePostPreview,
...props
}) => {
const hasMedia = !!_optionalChain([props, 'access', _11 => _11.media, 'optionalAccess', _12 => _12.length]);
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "social-preview tumblr-preview", children: [
!hidePostPreview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "social-preview__section tumblr-preview__section", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SectionHeading, {
level: headingLevel,
// translators: refers to a social post on Tumblr
children: _i18n.__.call(void 0, "Your post", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "social-preview__section-desc", children: _i18n.__.call(void 0, "This is what your social post will look like on Tumblr:", "social-previews") }),
hasMedia ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TumblrPostPreview, { ...props }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TumblrLinkPreview, { ...props })
] }),
!hideLinkPreview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "social-preview__section tumblr-preview__section", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SectionHeading, {
level: headingLevel,
// translators: refers to a link on Tumblr
children: _i18n.__.call(void 0, "Link preview", "social-previews")
}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "social-preview__section-desc", children: _i18n.__.call(void 0,
"This is what it will look like when someone shares the link to your WordPress post on Tumblr.",
"social-previews"
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, TumblrLinkPreview, { ...props, user: void 0 })
] })
] });
};
// src/facebook-preview/previews.tsx
// src/facebook-preview/link-preview.tsx
// src/constants.ts
var AUTO_SHARED_SOCIAL_POST_PREVIEW = "AUTO_SHARED_SOCIAL_POST_PREVIEW";
var AUTO_SHARED_LINK_PREVIEW = "AUTO_SHARED_LINK_PREVIEW";
var DEFAULT_LINK_PREVIEW = "DEFAULT_LINK_PREVIEW";
var TYPE_WEBSITE = "website";
var TYPE_ARTICLE = "article";
var LANDSCAPE_MODE = "landscape";
var PORTRAIT_MODE = "portrait";
// src/facebook-preview/helpers.ts
var TITLE_LENGTH3 =