@automattic/social-previews 2.0.1 → 2.1.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +70 -0
- package/README.md +3 -1
- package/dist/cjs/helpers.js +8 -1
- package/dist/cjs/helpers.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/threads-preview/card.js +16 -0
- package/dist/cjs/threads-preview/card.js.map +1 -0
- package/dist/cjs/threads-preview/footer.js +9 -0
- package/dist/cjs/threads-preview/footer.js.map +1 -0
- package/dist/cjs/threads-preview/header.js +12 -0
- package/dist/cjs/threads-preview/header.js.map +1 -0
- package/dist/cjs/threads-preview/helpers.js +8 -0
- package/dist/cjs/threads-preview/helpers.js.map +1 -0
- package/dist/cjs/threads-preview/icons/default-avatar.js +9 -0
- package/dist/cjs/threads-preview/icons/default-avatar.js.map +1 -0
- package/dist/cjs/threads-preview/index.js +7 -0
- package/dist/cjs/threads-preview/index.js.map +1 -0
- package/dist/cjs/threads-preview/link-preview.js +12 -0
- package/dist/cjs/threads-preview/link-preview.js.map +1 -0
- package/dist/cjs/threads-preview/media.js +43 -0
- package/dist/cjs/threads-preview/media.js.map +1 -0
- package/dist/cjs/threads-preview/post-preview.js +20 -0
- package/dist/cjs/threads-preview/post-preview.js.map +1 -0
- package/dist/cjs/threads-preview/previews.js +25 -0
- package/dist/cjs/threads-preview/previews.js.map +1 -0
- package/dist/cjs/threads-preview/sidebar.js +11 -0
- package/dist/cjs/threads-preview/sidebar.js.map +1 -0
- package/dist/cjs/threads-preview/style.scss +203 -0
- package/dist/cjs/threads-preview/types.js +3 -0
- package/dist/cjs/threads-preview/types.js.map +1 -0
- package/dist/cjs/threads-preview/variables.scss +5 -0
- package/dist/esm/helpers.js +7 -0
- package/dist/esm/helpers.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/threads-preview/card.js +11 -0
- package/dist/esm/threads-preview/card.js.map +1 -0
- package/dist/esm/threads-preview/footer.js +5 -0
- package/dist/esm/threads-preview/footer.js.map +1 -0
- package/dist/esm/threads-preview/header.js +8 -0
- package/dist/esm/threads-preview/header.js.map +1 -0
- package/dist/esm/threads-preview/helpers.js +4 -0
- package/dist/esm/threads-preview/helpers.js.map +1 -0
- package/dist/esm/threads-preview/icons/default-avatar.js +5 -0
- package/dist/esm/threads-preview/icons/default-avatar.js.map +1 -0
- package/dist/esm/threads-preview/index.js +4 -0
- package/dist/esm/threads-preview/index.js.map +1 -0
- package/dist/esm/threads-preview/link-preview.js +8 -0
- package/dist/esm/threads-preview/link-preview.js.map +1 -0
- package/dist/esm/threads-preview/media.js +38 -0
- package/dist/esm/threads-preview/media.js.map +1 -0
- package/dist/esm/threads-preview/post-preview.js +16 -0
- package/dist/esm/threads-preview/post-preview.js.map +1 -0
- package/dist/esm/threads-preview/previews.js +20 -0
- package/dist/esm/threads-preview/previews.js.map +1 -0
- package/dist/esm/threads-preview/sidebar.js +7 -0
- package/dist/esm/threads-preview/sidebar.js.map +1 -0
- package/dist/esm/threads-preview/style.scss +203 -0
- package/dist/esm/threads-preview/types.js +2 -0
- package/dist/esm/threads-preview/types.js.map +1 -0
- package/dist/esm/threads-preview/variables.scss +5 -0
- package/dist/tsconfig-cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/helpers.d.ts +2 -1
- package/dist/types/helpers.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/threads-preview/card.d.ts +4 -0
- package/dist/types/threads-preview/card.d.ts.map +1 -0
- package/dist/types/threads-preview/footer.d.ts +3 -0
- package/dist/types/threads-preview/footer.d.ts.map +1 -0
- package/dist/types/threads-preview/header.d.ts +4 -0
- package/dist/types/threads-preview/header.d.ts.map +1 -0
- package/dist/types/threads-preview/helpers.d.ts +3 -0
- package/dist/types/threads-preview/helpers.d.ts.map +1 -0
- package/dist/types/threads-preview/icons/default-avatar.d.ts +3 -0
- package/dist/types/threads-preview/icons/default-avatar.d.ts.map +1 -0
- package/dist/types/threads-preview/index.d.ts +4 -0
- package/dist/types/threads-preview/index.d.ts.map +1 -0
- package/dist/types/threads-preview/link-preview.d.ts +4 -0
- package/dist/types/threads-preview/link-preview.d.ts.map +1 -0
- package/dist/types/threads-preview/media.d.ts +4 -0
- package/dist/types/threads-preview/media.d.ts.map +1 -0
- package/dist/types/threads-preview/post-preview.d.ts +5 -0
- package/dist/types/threads-preview/post-preview.d.ts.map +1 -0
- package/dist/types/threads-preview/previews.d.ts +4 -0
- package/dist/types/threads-preview/previews.d.ts.map +1 -0
- package/dist/types/threads-preview/sidebar.d.ts +4 -0
- package/dist/types/threads-preview/sidebar.d.ts.map +1 -0
- package/dist/types/threads-preview/types.d.ts +22 -0
- package/dist/types/threads-preview/types.d.ts.map +1 -0
- package/package.json +72 -71
- package/src/helpers.tsx +16 -1
- package/src/index.ts +1 -0
- package/src/threads-preview/card.tsx +22 -0
- package/src/threads-preview/footer.tsx +43 -0
- package/src/threads-preview/header.tsx +18 -0
- package/src/threads-preview/helpers.ts +9 -0
- package/src/threads-preview/icons/default-avatar.tsx +35 -0
- package/src/threads-preview/index.tsx +3 -0
- package/src/threads-preview/link-preview.tsx +13 -0
- package/src/threads-preview/media.tsx +61 -0
- package/src/threads-preview/post-preview.tsx +58 -0
- package/src/threads-preview/previews.tsx +77 -0
- package/src/threads-preview/sidebar.tsx +18 -0
- package/src/threads-preview/style.scss +203 -0
- package/src/threads-preview/types.ts +30 -0
- package/src/threads-preview/variables.scss +5 -0
package/dist/esm/helpers.js
CHANGED
|
@@ -35,6 +35,12 @@ export const formatNextdoorDate = new Intl.DateTimeFormat('en-GB', {
|
|
|
35
35
|
day: 'numeric',
|
|
36
36
|
month: 'short',
|
|
37
37
|
}).format;
|
|
38
|
+
export const formatThreadsDate = new Intl.DateTimeFormat('en-US', {
|
|
39
|
+
// Result: "'06/21/2024"
|
|
40
|
+
day: '2-digit',
|
|
41
|
+
month: '2-digit',
|
|
42
|
+
year: 'numeric',
|
|
43
|
+
}).format;
|
|
38
44
|
export const formatTweetDate = new Intl.DateTimeFormat('en-US', {
|
|
39
45
|
// Result: "Apr 7", "Dec 31"
|
|
40
46
|
month: 'short',
|
|
@@ -53,6 +59,7 @@ export const hashtagUrlMap = {
|
|
|
53
59
|
instagram: 'https://www.instagram.com/explore/tags/%1$s',
|
|
54
60
|
mastodon: 'https://%2$s/tags/%1$s',
|
|
55
61
|
nextdoor: 'https://nextdoor.com/hashtag/%1$s',
|
|
62
|
+
threads: 'https://www.threads.net/search?q=%1$s&serp_type=tags',
|
|
56
63
|
};
|
|
57
64
|
/**
|
|
58
65
|
* Prepares the text for the preview.
|
package/dist/esm/helpers.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export * from './tumblr-preview';
|
|
|
5
5
|
export * from './facebook-preview';
|
|
6
6
|
export * from './mastodon-preview';
|
|
7
7
|
export * from './nextdoor-preview';
|
|
8
|
+
export * from './threads-preview';
|
|
8
9
|
export * from './constants';
|
|
9
10
|
export * from './instagram-preview';
|
|
10
11
|
export * from './types';
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { baseDomain } from '../helpers';
|
|
4
|
+
import { threadsTitle } from './helpers';
|
|
5
|
+
export const Card = ({ image, title, url }) => {
|
|
6
|
+
const cardClassNames = clsx({
|
|
7
|
+
'threads-preview__card-has-image': !!image,
|
|
8
|
+
});
|
|
9
|
+
return (_jsx("div", { className: "threads-preview__card", children: _jsxs("div", { className: cardClassNames, children: [image && _jsx("img", { className: "threads-preview__card-image", src: image, alt: "" }), _jsxs("div", { className: "threads-preview__card-body", children: [_jsx("div", { className: "threads-preview__card-url", children: baseDomain(url || '') }), _jsx("div", { className: "threads-preview__card-title", children: threadsTitle(title) })] })] }) }));
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/threads-preview/card.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,MAAM,CAAC,MAAM,IAAI,GAAiC,CAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAG,EAAE;IAC7E,MAAM,cAAc,GAAG,IAAI,CAAE;QAC5B,iCAAiC,EAAE,CAAC,CAAE,KAAK;KAC3C,CAAE,CAAC;IAEJ,OAAO,CACN,cAAK,SAAS,EAAC,uBAAuB,YACrC,eAAK,SAAS,EAAG,cAAc,aAC5B,KAAK,IAAI,cAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,EAC/E,eAAK,SAAS,EAAC,4BAA4B,aAC1C,cAAK,SAAS,EAAC,2BAA2B,YAAG,UAAU,CAAE,GAAG,IAAI,EAAE,CAAE,GAAQ,EAC5E,cAAK,SAAS,EAAC,6BAA6B,YAAG,YAAY,CAAE,KAAK,CAAE,GAAQ,IACvE,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const Footer = () => {
|
|
3
|
+
return (_jsxs("div", { className: "threads-preview__footer", children: [_jsx("span", { className: "threads-preview__icon--like", children: _jsx("svg", { role: "img", viewBox: "0 0 18 18", children: _jsx("path", { d: "M1.34375 7.53125L1.34375 7.54043C1.34374 8.04211 1.34372 8.76295 1.6611 9.65585C1.9795 10.5516 2.60026 11.5779 3.77681 12.7544C5.59273 14.5704 7.58105 16.0215 8.33387 16.5497C8.73525 16.8313 9.26573 16.8313 9.66705 16.5496C10.4197 16.0213 12.4074 14.5703 14.2232 12.7544C15.3997 11.5779 16.0205 10.5516 16.3389 9.65585C16.6563 8.76296 16.6563 8.04211 16.6562 7.54043V7.53125C16.6562 5.23466 15.0849 3.25 12.6562 3.25C11.5214 3.25 10.6433 3.78244 9.99228 4.45476C9.59009 4.87012 9.26356 5.3491 9 5.81533C8.73645 5.3491 8.40991 4.87012 8.00772 4.45476C7.35672 3.78244 6.47861 3.25 5.34375 3.25C2.9151 3.25 1.34375 5.23466 1.34375 7.53125Z", strokeWidth: "1.25" }) }) }), _jsx("span", { className: "threads-preview__icon--reply", children: _jsx("svg", { role: "img", viewBox: "0 0 18 18", children: _jsx("path", { d: "M15.376 13.2177L16.2861 16.7955L12.7106 15.8848C12.6781 15.8848 12.6131 15.8848 12.5806 15.8848C11.3779 16.5678 9.94767 16.8931 8.41995 16.7955C4.94194 16.5353 2.08152 13.7381 1.72397 10.2578C1.2689 5.63919 5.13697 1.76863 9.75264 2.22399C13.2307 2.58177 16.0261 5.41151 16.2861 8.92429C16.4161 10.453 16.0586 11.8841 15.376 13.0876C15.376 13.1526 15.376 13.1852 15.376 13.2177Z", strokeLinejoin: "round", strokeWidth: "1.25" }) }) }), _jsx("span", { className: "threads-preview__icon--repost", children: _jsxs("svg", { role: "img", viewBox: "0 0 18 18", children: [_jsx("path", { d: "M6.41256 1.23531C6.6349 0.971277 7.02918 0.937481 7.29321 1.15982L9.96509 3.40982C10.1022 3.52528 10.1831 3.69404 10.1873 3.87324C10.1915 4.05243 10.1186 4.2248 9.98706 4.34656L7.31518 6.81971C7.06186 7.05419 6.66643 7.03892 6.43196 6.7856C6.19748 6.53228 6.21275 6.13685 6.46607 5.90237L7.9672 4.51289H5.20312C3.68434 4.51289 2.45312 5.74411 2.45312 7.26289V9.51289V11.7629C2.45312 13.2817 3.68434 14.5129 5.20312 14.5129C5.5483 14.5129 5.82812 14.7927 5.82812 15.1379C5.82812 15.4831 5.5483 15.7629 5.20312 15.7629C2.99399 15.7629 1.20312 13.972 1.20312 11.7629V9.51289V7.26289C1.20312 5.05375 2.99399 3.26289 5.20312 3.26289H7.85002L6.48804 2.11596C6.22401 1.89362 6.19021 1.49934 6.41256 1.23531Z" }), _jsx("path", { d: "M11.5874 17.7904C11.3651 18.0545 10.9708 18.0883 10.7068 17.8659L8.03491 15.6159C7.89781 15.5005 7.81687 15.3317 7.81267 15.1525C7.80847 14.9733 7.8814 14.801 8.01294 14.6792L10.6848 12.206C10.9381 11.9716 11.3336 11.9868 11.568 12.2402C11.8025 12.4935 11.7872 12.8889 11.5339 13.1234L10.0328 14.5129H12.7969C14.3157 14.5129 15.5469 13.2816 15.5469 11.7629V9.51286V7.26286C15.5469 5.74408 14.3157 4.51286 12.7969 4.51286C12.4517 4.51286 12.1719 4.23304 12.1719 3.88786C12.1719 3.54269 12.4517 3.26286 12.7969 3.26286C15.006 3.26286 16.7969 5.05373 16.7969 7.26286V9.51286V11.7629C16.7969 13.972 15.006 15.7629 12.7969 15.7629H10.15L11.512 16.9098C11.776 17.1321 11.8098 17.5264 11.5874 17.7904Z" })] }) }), _jsx("span", { className: "threads-preview__icon--share", children: _jsxs("svg", { role: "img", viewBox: "0 0 18 18", children: [_jsx("path", { d: "M15.6097 4.09082L6.65039 9.11104", strokeLinejoin: "round", strokeWidth: "1.25" }), _jsx("path", { d: "M7.79128 14.439C8.00463 15.3275 8.11131 15.7718 8.33426 15.932C8.52764 16.071 8.77617 16.1081 9.00173 16.0318C9.26179 15.9438 9.49373 15.5501 9.95761 14.7628L15.5444 5.2809C15.8883 4.69727 16.0603 4.40546 16.0365 4.16566C16.0159 3.95653 15.9071 3.76612 15.7374 3.64215C15.5428 3.5 15.2041 3.5 14.5267 3.5H3.71404C2.81451 3.5 2.36474 3.5 2.15744 3.67754C1.97758 3.83158 1.88253 4.06254 1.90186 4.29856C1.92415 4.57059 2.24363 4.88716 2.88259 5.52032L6.11593 8.7243C6.26394 8.87097 6.33795 8.94431 6.39784 9.02755C6.451 9.10144 6.4958 9.18101 6.53142 9.26479C6.57153 9.35916 6.59586 9.46047 6.64451 9.66309L7.79128 14.439Z", strokeLinejoin: "round", strokeWidth: "1.25" })] }) })] }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=footer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/threads-preview/footer.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,MAAM,GAAa,GAAG,EAAE;IACpC,OAAO,CACN,eAAK,SAAS,EAAC,yBAAyB,aACvC,eAAM,SAAS,EAAC,6BAA6B,YAC5C,cAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,YAClC,eACC,CAAC,EAAC,8nBAA8nB,EAChoB,WAAW,EAAC,MAAM,GACX,GACH,GACA,EACP,eAAM,SAAS,EAAC,8BAA8B,YAC7C,cAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,YAClC,eACC,CAAC,EAAC,4XAA4X,EAC9X,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,MAAM,GACX,GACH,GACA,EACP,eAAM,SAAS,EAAC,+BAA+B,YAC9C,eAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,aAClC,eAAM,CAAC,EAAC,8rBAA8rB,GAAQ,EAC9sB,eAAM,CAAC,EAAC,wrBAAwrB,GAAQ,IACnsB,GACA,EACP,eAAM,SAAS,EAAC,8BAA8B,YAC7C,eAAK,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,aAClC,eACC,CAAC,EAAC,kCAAkC,EACpC,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,MAAM,GACX,EACR,eACC,CAAC,EAAC,8mBAA8mB,EAChnB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,MAAM,GACX,IACH,GACA,IACF,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { __ } from '@wordpress/i18n';
|
|
3
|
+
import { formatThreadsDate } from '../helpers';
|
|
4
|
+
export const Header = ({ name, date }) => {
|
|
5
|
+
const postDate = date || new Date();
|
|
6
|
+
return (_jsxs("div", { className: "threads-preview__header", children: [_jsx("span", { className: "threads-preview__name", children: name || __('Account Name', 'social-previews') }), _jsx("time", { className: "threads-preview__date", dateTime: postDate.toISOString(), children: formatThreadsDate(postDate) })] }));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/threads-preview/header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,CAAC,MAAM,MAAM,GAA4B,CAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAG,EAAE;IACnE,MAAM,QAAQ,GAAG,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;IAEpC,OAAO,CACN,eAAK,SAAS,EAAC,yBAAyB,aACvC,eAAM,SAAS,EAAC,uBAAuB,YACpC,IAAI,IAAI,EAAE,CAAE,cAAc,EAAE,iBAAiB,CAAE,GAC3C,EACP,eAAM,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAG,QAAQ,CAAC,WAAW,EAAE,YACtE,iBAAiB,CAAE,QAAQ,CAAE,GACzB,IACF,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
|
|
2
|
+
const TITLE_LENGTH = 120;
|
|
3
|
+
export const threadsTitle = (text) => firstValid(shortEnough(TITLE_LENGTH), hardTruncation(TITLE_LENGTH))(stripHtmlTags(text)) || '';
|
|
4
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/threads-preview/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAa,MAAM,YAAY,CAAC;AAE/F,MAAM,YAAY,GAAG,GAAG,CAAC;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAc,CAAE,IAAI,EAAG,EAAE,CACjD,UAAU,CACT,WAAW,CAAE,YAAY,CAAE,EAC3B,cAAc,CAAE,YAAY,CAAE,CAC9B,CAAE,aAAa,CAAE,IAAI,CAAE,CAAE,IAAI,EAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const DefaultAvatar = () => {
|
|
3
|
+
return (_jsx("svg", { width: "36", height: "36", viewBox: "0 0 6.3500001 6.3500001", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { children: _jsxs("g", { children: [_jsx("circle", { fill: "#fff", fillOpacity: "1", stroke: "#dbdbdb", strokeWidth: "0.144331", strokeOpacity: "1", strokeDasharray: "none", cx: "3.175", cy: "3.175", r: "3.1028347" }), _jsx("path", { fill: "#dbdbdb", fillOpacity: "1", stroke: "#dbdbdb", strokeWidth: "0.00924637", strokeOpacity: "1", d: "m 3.175,0.10128581 c -0.2931267,2e-6 -0.5848453,0.0419523 -0.866097,0.1245402 C 2.0276513,0.30840593 1.7596787,0.43063749 1.5130859,0.58911133 1.1424103,0.82733009 0.82733009,1.1424103 0.58911133,1.5130859 0.43063749,1.7596787 0.30840793,2.0276513 0.22582601,2.308903 0.14323609,2.5901547 0.10128781,2.8818733 0.10128581,3.175 c 5.02e-4,0.1391369 0.0101356,0.2782044 0.0294556,0.4159953 0.01723,0.1151309 0.0411535,0.2291443 0.0713135,0.3415812 0.0045,0.0218 0.009469,0.043412 0.0144694,0.065112 0.03449,0.1203489 0.076152,0.2387347 0.12505697,0.3539836 0.0045,0.01235 0.009253,0.0244 0.0139526,0.03669 0.05201,0.1191279 0.111111,0.235155 0.17776693,0.3467489 0.0038,0.0071 0.008066,0.013651 0.0118856,0.020671 0.0694099,0.1145998 0.14620121,0.2246049 0.22996012,0.3291788 0.0022,0.0029 0.004001,0.00589 0.006201,0.00879 0.0861099,0.1069859 0.17942183,0.208301 0.27905277,0.3028239 0.3233817,-0.5511754 0.8330913,-0.701365 1.065568,-0.697115 h 2.0629232 c 0.5904654,-0.0058 0.9954919,0.5335544 1.1032918,0.6945312 0.0993,-0.09444 0.1921923,-0.1954752 0.2780192,-0.3023071 0.0023,-0.0031 0.00442,-0.0062 0.00672,-0.0093 0.08334,-0.1042929 0.1598386,-0.2139114 0.2289266,-0.3281453 0.004,-0.0073 0.00841,-0.014891 0.012402,-0.022221 0.0663,-0.1112249 0.1254962,-0.2265057 0.1772502,-0.3451986 0.0048,-0.01266 0.00934,-0.025004 0.013953,-0.037724 0.04856,-0.1146958 0.090239,-0.2321796 0.1245402,-0.3519165 0.0053,-0.02288 0.010256,-0.046256 0.014986,-0.069246 0.02971,-0.1111369 0.05321,-0.2236822 0.07028,-0.3374471 0.01929,-0.1376588 0.028946,-0.2764746 0.029456,-0.4154785 0,-0.0503 -0.00112,-0.1006562 -0.00362,-0.1508952 -0.0049,-0.1004917 -0.014695,-0.20073 -0.029455,-0.3002469 C 6.2008813,2.6243448 6.1811701,2.5258685 6.1567301,2.4282756 6.1445102,2.3794856 6.1310225,2.330673 6.1164225,2.282548 6.0286626,1.9932503 5.8988742,1.7184607 5.7309163,1.4670939 5.6750164,1.383444 5.6149083,1.3030201 5.5510824,1.2252482 5.5191724,1.1863682 5.4861603,1.1477995 5.4523804,1.1105265 5.3848104,1.0359766 5.3140214,0.96518559 5.2394735,0.89761963 5.1276256,0.79624473 5.008419,0.70295057 4.8829061,0.61908366 4.7573922,0.53522374 4.6255915,0.46089717 4.4891317,0.39635824 c -0.09095,-0.04302 -0.1838061,-0.0813435 -0.278536,-0.11523845 -0.09473,-0.0339 -0.1912764,-0.0634 -0.2888713,-0.0878499 C 3.7752926,0.15658989 3.6265025,0.13054519 3.4762736,0.11575521 3.3761487,0.10585522 3.2756099,0.10128581 3.175,0.10128581 Z m 0,1.44125569 A 1.4106187,1.4106187 0 0 1 4.5857666,2.9533081 1.4106187,1.4106187 0 0 1 3.175,4.3635579 1.4106187,1.4106187 0 0 1 1.7642334,2.9533081 1.4106187,1.4106187 0 0 1 3.175,1.5425415 Z" })] }) }) }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=default-avatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-avatar.js","sourceRoot":"","sources":["../../../../src/threads-preview/icons/default-avatar.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,OAAO,CACN,cACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,yBAAyB,EACjC,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,4BAA4B,YAElC,sBACC,wBACC,iBACC,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,UAAU,EACtB,aAAa,EAAC,GAAG,EACjB,eAAe,EAAC,MAAM,EACtB,EAAE,EAAC,OAAO,EACV,EAAE,EAAC,OAAO,EACV,CAAC,EAAC,WAAW,GACZ,EACF,eACC,IAAI,EAAC,SAAS,EACd,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,YAAY,EACxB,aAAa,EAAC,GAAG,EACjB,CAAC,EAAC,qjFAAqjF,GACtjF,IACC,GACD,GACC,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/threads-preview/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ThreadsPostPreview } from './post-preview';
|
|
3
|
+
export const ThreadsLinkPreview = (props) => {
|
|
4
|
+
return (_jsx(ThreadsPostPreview, { ...props,
|
|
5
|
+
// Override the props that are irrelevant to link preview
|
|
6
|
+
text: "", media: undefined }));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=link-preview.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"link-preview.js","sourceRoot":"","sources":["../../../src/threads-preview/link-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CAAE,KAAK,EAAG,EAAE;IAC9E,OAAO,CACN,KAAC,kBAAkB,OACb,KAAK;QACV,yDAAyD;QACzD,IAAI,EAAC,EAAE,EACP,KAAK,EAAG,SAAS,GAChB,CACF,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { Fragment } from 'react';
|
|
4
|
+
export const Media = ({ media }) => {
|
|
5
|
+
// Ensure we're only trying to show valid media, and the correct quantity.
|
|
6
|
+
const filteredMedia = media
|
|
7
|
+
// Only image/ and video/ mime types are supported.
|
|
8
|
+
.filter((mediaItem) => mediaItem.type.startsWith('image/') || mediaItem.type.startsWith('video/'))
|
|
9
|
+
.filter((mediaItem, idx, array) => {
|
|
10
|
+
// We'll always keep the first item.
|
|
11
|
+
if (0 === idx) {
|
|
12
|
+
return true;
|
|
13
|
+
}
|
|
14
|
+
// If the first item was a video or GIF, discard all subsequent items.
|
|
15
|
+
if (array[0].type.startsWith('video/') || 'image/gif' === array[0].type) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
// The first item wasn't a video or GIF, so discard all subsequent videos and GIFs.
|
|
19
|
+
if (mediaItem.type.startsWith('video/') || 'image/gif' === mediaItem.type) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
return true;
|
|
23
|
+
})
|
|
24
|
+
// We only want the first four items of the array, at most.
|
|
25
|
+
.slice(0, 4);
|
|
26
|
+
if (0 === filteredMedia.length) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
const isVideo = filteredMedia[0].type.startsWith('video/');
|
|
30
|
+
const mediaClasses = clsx([
|
|
31
|
+
'threads-preview__media',
|
|
32
|
+
'threads-preview__media-children-' + filteredMedia.length,
|
|
33
|
+
]);
|
|
34
|
+
return (_jsx("div", { className: mediaClasses, children: filteredMedia.map((mediaItem, index) => (_jsx(Fragment, { children: isVideo ? (
|
|
35
|
+
// eslint-disable-next-line jsx-a11y/media-has-caption
|
|
36
|
+
_jsx("video", { controls: true, children: _jsx("source", { src: mediaItem.url, type: mediaItem.type }) })) : (_jsx("img", { alt: mediaItem.alt || '', src: mediaItem.url })) }, `threads-preview__media-item-${index}`))) }));
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=media.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media.js","sourceRoot":"","sources":["../../../src/threads-preview/media.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,CAAC,MAAM,KAAK,GAA2B,CAAE,EAAE,KAAK,EAAE,EAAG,EAAE;IAC5D,0EAA0E;IAC1E,MAAM,aAAa,GAAG,KAAK;QAC1B,mDAAmD;SAClD,MAAM,CACN,CAAE,SAAS,EAAG,EAAE,CACf,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAC/E;SACA,MAAM,CAAE,CAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAG,EAAE;QACpC,oCAAoC;QACpC,IAAK,CAAC,KAAK,GAAG,EAAG,CAAC;YACjB,OAAO,IAAI,CAAC;QACb,CAAC;QAED,sEAAsE;QACtE,IAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,KAAK,CAAE,CAAC,CAAE,CAAC,IAAI,EAAG,CAAC;YACjF,OAAO,KAAK,CAAC;QACd,CAAC;QAED,mFAAmF;QACnF,IAAK,SAAS,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,IAAI,WAAW,KAAK,SAAS,CAAC,IAAI,EAAG,CAAC;YAC/E,OAAO,KAAK,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC;IACb,CAAC,CAAE;QACH,2DAA2D;SAC1D,KAAK,CAAE,CAAC,EAAE,CAAC,CAAE,CAAC;IAEhB,IAAK,CAAC,KAAK,aAAa,CAAC,MAAM,EAAG,CAAC;QAClC,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,OAAO,GAAG,aAAa,CAAE,CAAC,CAAE,CAAC,IAAI,CAAC,UAAU,CAAE,QAAQ,CAAE,CAAC;IAE/D,MAAM,YAAY,GAAG,IAAI,CAAE;QAC1B,wBAAwB;QACxB,kCAAkC,GAAG,aAAa,CAAC,MAAM;KACzD,CAAE,CAAC;IAEJ,OAAO,CACN,cAAK,SAAS,EAAG,YAAY,YAC1B,aAAa,CAAC,GAAG,CAAE,CAAE,SAAS,EAAE,KAAK,EAAG,EAAE,CAAC,CAC5C,KAAC,QAAQ,cACN,OAAO,CAAC,CAAC,CAAC;YACX,sDAAsD;YACtD,gBAAO,QAAQ,kBACd,iBAAQ,GAAG,EAAG,SAAS,CAAC,GAAG,EAAG,IAAI,EAAG,SAAS,CAAC,IAAI,GAAK,GACjD,CACR,CAAC,CAAC,CAAC,CACH,cAAK,GAAG,EAAG,SAAS,CAAC,GAAG,IAAI,EAAE,EAAG,GAAG,EAAG,SAAS,CAAC,GAAG,GAAK,CACzD,IARc,+BAAgC,KAAM,EAAE,CAS7C,CACX,CAAE,GACE,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { preparePreviewText } from '../helpers';
|
|
3
|
+
import { Card } from './card';
|
|
4
|
+
import { Footer } from './footer';
|
|
5
|
+
import { Header } from './header';
|
|
6
|
+
import { Media } from './media';
|
|
7
|
+
import { Sidebar } from './sidebar';
|
|
8
|
+
import './style.scss';
|
|
9
|
+
export const ThreadsPostPreview = ({ date, description, image, media, name, profileImage, showThreadConnector, text, title, url, }) => {
|
|
10
|
+
const hasMedia = !!media?.length;
|
|
11
|
+
const displayAsCard = url && image && !hasMedia;
|
|
12
|
+
// Attach the URL to the text if not displaying as a card and it's not already in the text.
|
|
13
|
+
const textToDisplay = !displayAsCard && text && url && !text.includes(url) ? `${text} ${url}` : text;
|
|
14
|
+
return (_jsx("div", { className: "threads-preview__wrapper", children: _jsxs("div", { className: "threads-preview__container", children: [_jsx(Sidebar, { profileImage: profileImage, showThreadConnector: showThreadConnector }), _jsxs("div", { className: "threads-preview__main", children: [_jsx(Header, { name: name, date: date }), _jsxs("div", { className: "threads-preview__content", children: [textToDisplay ? (_jsx("div", { className: "threads-preview__text", children: preparePreviewText(textToDisplay, { platform: 'threads' }) })) : null, hasMedia ? _jsx(Media, { media: media }) : null, displayAsCard ? (_jsx(Card, { description: description || '', image: image, title: title || '', url: url })) : null] }), _jsx(Footer, {})] })] }) }));
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=post-preview.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/threads-preview/post-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CAAE,EACpE,IAAI,EACJ,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,KAAK,EACL,GAAG,GACH,EAAG,EAAE;IACL,MAAM,QAAQ,GAAG,CAAC,CAAE,KAAK,EAAE,MAAM,CAAC;IAElC,MAAM,aAAa,GAAG,GAAG,IAAI,KAAK,IAAI,CAAE,QAAQ,CAAC;IAEjD,2FAA2F;IAC3F,MAAM,aAAa,GAClB,CAAE,aAAa,IAAI,IAAI,IAAI,GAAG,IAAI,CAAE,IAAI,CAAC,QAAQ,CAAE,GAAG,CAAE,CAAC,CAAC,CAAC,GAAI,IAAK,IAAK,GAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAExF,OAAO,CACN,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAK,SAAS,EAAC,4BAA4B,aAC1C,KAAC,OAAO,IAAC,YAAY,EAAG,YAAY,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,EACrF,eAAK,SAAS,EAAC,uBAAuB,aACrC,KAAC,MAAM,IAAC,IAAI,EAAG,IAAI,EAAG,IAAI,EAAG,IAAI,GAAK,EACtC,eAAK,SAAS,EAAC,0BAA0B,aACtC,aAAa,CAAC,CAAC,CAAC,CACjB,cAAK,SAAS,EAAC,uBAAuB,YACnC,kBAAkB,CAAE,aAAa,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAE,GACzD,CACN,CAAC,CAAC,CAAC,IAAI,EACN,QAAQ,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,KAAK,EAAG,KAAK,GAAK,CAAC,CAAC,CAAC,IAAI,EAC3C,aAAa,CAAC,CAAC,CAAC,CACjB,KAAC,IAAI,IACJ,WAAW,EAAG,WAAW,IAAI,EAAE,EAC/B,KAAK,EAAG,KAAK,EACb,KAAK,EAAG,KAAK,IAAI,EAAE,EACnB,GAAG,EAAG,GAAG,GACR,CACF,CAAC,CAAC,CAAC,IAAI,IACH,EACN,KAAC,MAAM,KAAG,IACL,IACD,GACD,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { ExternalLink } from '@wordpress/components';
|
|
3
|
+
import { __ } from '@wordpress/i18n';
|
|
4
|
+
import SectionHeading from '../shared/section-heading';
|
|
5
|
+
import { ThreadsLinkPreview } from './link-preview';
|
|
6
|
+
import { ThreadsPostPreview } from './post-preview';
|
|
7
|
+
export const ThreadsPreviews = ({ headingLevel, hideLinkPreview, hidePostPreview, posts, }) => {
|
|
8
|
+
if (!posts?.length) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
return (_jsxs("div", { className: "social-preview threads-preview", children: [!hidePostPreview && (_jsxs("section", { className: "social-preview__section threads-preview__section", children: [_jsx(SectionHeading, { level: headingLevel, children:
|
|
12
|
+
// translators: refers to a social post on Threads
|
|
13
|
+
__('Your post', 'social-previews') }), _jsx("p", { className: "social-preview__section-desc", children: __('This is what your social post will look like on Threads:', 'social-previews') }), posts.map((post, index) => {
|
|
14
|
+
const isLast = index + 1 === posts.length;
|
|
15
|
+
return (_jsx(ThreadsPostPreview, { ...post, showThreadConnector: !isLast }, `threads-preview__post-${index}`));
|
|
16
|
+
})] })), !hideLinkPreview ? (_jsxs("section", { className: "social-preview__section threads-preview__section", children: [_jsx(SectionHeading, { level: headingLevel, children:
|
|
17
|
+
// translators: refers to a link to a Threads post
|
|
18
|
+
__('Link preview', 'social-previews') }), posts[0].image ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "social-preview__section-desc", children: [__('This is what it will look like when someone shares the link to your WordPress post on Threads.', 'social-previews'), "\u00A0", _jsx(ExternalLink, { href: "https://jetpack.com/support/jetpack-social-image-generator", children: __('Learn more about links', 'social-previews') })] }), _jsx(ThreadsLinkPreview, { ...posts[0], name: "", profileImage: "" })] })) : (_jsx("p", { className: "social-preview__section-desc", children: __('Threads link preview requires an image to be set for the post. Please add an image to see the preview.', 'social-previews') }))] })) : null] }));
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=previews.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/threads-preview/previews.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,CAAC,MAAM,eAAe,GAAqC,CAAE,EAClE,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,GACL,EAAG,EAAE;IACL,IAAK,CAAE,KAAK,EAAE,MAAM,EAAG,CAAC;QACvB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,eAAK,SAAS,EAAC,gCAAgC,aAC5C,CAAE,eAAe,IAAI,CACtB,mBAAS,SAAS,EAAC,kDAAkD,aACpE,KAAC,cAAc,IAAC,KAAK,EAAG,YAAY;wBAElC,kDAAkD;wBAClD,EAAE,CAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,YAAG,SAAS,EAAC,8BAA8B,YACxC,EAAE,CAAE,0DAA0D,EAAE,iBAAiB,CAAE,GAClF,EACF,KAAK,CAAC,GAAG,CAAE,CAAE,IAAI,EAAE,KAAK,EAAG,EAAE;wBAC9B,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC;wBAC1C,OAAO,CACN,KAAC,kBAAkB,OAEb,IAAI,EACT,mBAAmB,EAAG,CAAE,MAAM,IAFxB,yBAA0B,KAAM,EAAE,CAGvC,CACF,CAAC;oBACH,CAAC,CAAE,IACM,CACV,EACC,CAAE,eAAe,CAAC,CAAC,CAAC,CACrB,mBAAS,SAAS,EAAC,kDAAkD,aACpE,KAAC,cAAc,IAAC,KAAK,EAAG,YAAY;wBAElC,kDAAkD;wBAClD,EAAE,CAAE,cAAc,EAAE,iBAAiB,CAAE,GAExB,EACf,KAAK,CAAE,CAAC,CAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CACpB,8BACC,aAAG,SAAS,EAAC,8BAA8B,aACxC,EAAE,CACH,gGAAgG,EAChG,iBAAiB,CACjB,YAED,KAAC,YAAY,IAAC,IAAI,EAAC,4DAA4D,YAC5E,EAAE,CAAE,wBAAwB,EAAE,iBAAiB,CAAE,GACrC,IACZ,EACJ,KAAC,kBAAkB,OAAM,KAAK,CAAE,CAAC,CAAE,EAAG,IAAI,EAAC,EAAE,EAAC,YAAY,EAAC,EAAE,GAAG,IAC9D,CACH,CAAC,CAAC,CAAC,CACH,YAAG,SAAS,EAAC,8BAA8B,YACxC,EAAE,CACH,wGAAwG,EACxG,iBAAiB,CACjB,GACE,CACJ,IACQ,CACV,CAAC,CAAC,CAAC,IAAI,IACH,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { __ } from '@wordpress/i18n';
|
|
3
|
+
import { DefaultAvatar } from './icons/default-avatar';
|
|
4
|
+
export const Sidebar = ({ profileImage, showThreadConnector }) => {
|
|
5
|
+
return (_jsxs("div", { className: "threads-preview__sidebar", children: [_jsx("div", { className: "threads-preview__profile-image", children: profileImage ? (_jsx("img", { alt: __('Threads profile image', 'social-previews'), src: profileImage })) : (_jsx(DefaultAvatar, {})) }), showThreadConnector && _jsx("div", { className: "threads-preview__connector" })] }));
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=sidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../src/threads-preview/sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD,MAAM,CAAC,MAAM,OAAO,GAA6B,CAAE,EAAE,YAAY,EAAE,mBAAmB,EAAE,EAAG,EAAE;IAC5F,OAAO,CACN,eAAK,SAAS,EAAC,0BAA0B,aACxC,cAAK,SAAS,EAAC,gCAAgC,YAC5C,YAAY,CAAC,CAAC,CAAC,CAChB,cAAK,GAAG,EAAG,EAAE,CAAE,uBAAuB,EAAE,iBAAiB,CAAE,EAAG,GAAG,EAAG,YAAY,GAAK,CACrF,CAAC,CAAC,CAAC,CACH,KAAC,aAAa,KAAG,CACjB,GACI,EACJ,mBAAmB,IAAI,cAAK,SAAS,EAAC,4BAA4B,GAAG,IAClE,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
/* stylelint-disable scales/radii */
|
|
2
|
+
/* stylelint-disable declaration-property-unit-allowed-list */
|
|
3
|
+
@import "./variables.scss";
|
|
4
|
+
|
|
5
|
+
.threads-preview {
|
|
6
|
+
padding: 20px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.threads-preview__wrapper {
|
|
10
|
+
background-color: #fff;
|
|
11
|
+
max-width: clamp(200px, 100%, 635px);
|
|
12
|
+
margin-inline: auto;
|
|
13
|
+
padding-top: 1rem;
|
|
14
|
+
border-radius: 4px;
|
|
15
|
+
padding-inline-end: 1rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.threads-preview__section.social-preview__section {
|
|
19
|
+
width: clamp(200px, 100%, 635px);
|
|
20
|
+
|
|
21
|
+
// To compensate for the padding for profile picture in threads threads
|
|
22
|
+
.social-preview__section-heading,
|
|
23
|
+
.social-preview__section-desc {
|
|
24
|
+
padding-inline-start: 17px;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.threads-preview__container {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: 50px auto;
|
|
31
|
+
margin-bottom: 5px;
|
|
32
|
+
font-size: $threads-font-size;
|
|
33
|
+
line-height: $threads-line-height;
|
|
34
|
+
color: $threads-text-primary-color;
|
|
35
|
+
|
|
36
|
+
.threads-preview__sidebar {
|
|
37
|
+
display: grid;
|
|
38
|
+
grid-template-rows: 35px auto;
|
|
39
|
+
justify-items: center;
|
|
40
|
+
|
|
41
|
+
.threads-preview__profile-image {
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
max-width: 36px;
|
|
45
|
+
max-height: 36px;
|
|
46
|
+
border-radius: 50%;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
|
|
49
|
+
img {
|
|
50
|
+
object-fit: cover;
|
|
51
|
+
width: 100%;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.threads-preview__connector {
|
|
56
|
+
width: 2px;
|
|
57
|
+
background-color: #8c8f94;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.threads-preview__main {
|
|
62
|
+
padding-bottom: 1rem;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.threads-preview__header {
|
|
67
|
+
display: flex;
|
|
68
|
+
gap: 6px;
|
|
69
|
+
font-size: 16px;
|
|
70
|
+
line-height: 18px;
|
|
71
|
+
margin-bottom: 2px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.threads-preview__name {
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
font-size: 15px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.threads-preview__date {
|
|
80
|
+
color: $threads-text-secondary-color;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.threads-preview__content {
|
|
84
|
+
|
|
85
|
+
.threads-preview__text {
|
|
86
|
+
white-space: pre-wrap;
|
|
87
|
+
word-break: break-word;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.threads-preview__media {
|
|
91
|
+
border-radius: 15px;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
display: grid;
|
|
94
|
+
grid-gap: 2px;
|
|
95
|
+
grid-template-areas: "a";
|
|
96
|
+
height: 300px;
|
|
97
|
+
margin-top: 12px;
|
|
98
|
+
|
|
99
|
+
img,
|
|
100
|
+
video {
|
|
101
|
+
width: 100%;
|
|
102
|
+
height: 100%;
|
|
103
|
+
object-fit: cover;
|
|
104
|
+
|
|
105
|
+
&:nth-child(1) {
|
|
106
|
+
grid-area: a;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&:nth-child(2) {
|
|
110
|
+
grid-area: b;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&:nth-child(3) {
|
|
114
|
+
grid-area: c;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&:nth-child(4) {
|
|
118
|
+
grid-area: d;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&.threads-preview__media-children-2 {
|
|
123
|
+
grid-template-areas: "a b";
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&.threads-preview__media-children-3 {
|
|
127
|
+
grid-template-areas:
|
|
128
|
+
"a b"
|
|
129
|
+
"a c";
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&.threads-preview__media-children-4 {
|
|
133
|
+
grid-template-areas:
|
|
134
|
+
"a b"
|
|
135
|
+
"c d";
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.threads-preview__card {
|
|
140
|
+
margin-top: 12px;
|
|
141
|
+
margin-bottom: 12px;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
border: 1px solid #e1e8ed;
|
|
144
|
+
border-radius: 8px;
|
|
145
|
+
|
|
146
|
+
.threads-preview__card-image {
|
|
147
|
+
width: 100%;
|
|
148
|
+
height: 100%;
|
|
149
|
+
object-fit: cover;
|
|
150
|
+
aspect-ratio: 16/9;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.threads-preview__card-body {
|
|
154
|
+
padding: 0.75em;
|
|
155
|
+
text-decoration: none;
|
|
156
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
157
|
+
color: var(--studio-black);
|
|
158
|
+
text-align: left;
|
|
159
|
+
overflow: hidden;
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-direction: column;
|
|
162
|
+
gap: 2px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.threads-preview__card-title {
|
|
166
|
+
text-overflow: ellipsis;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.threads-preview__card-url {
|
|
170
|
+
font-size: 12px;
|
|
171
|
+
text-transform: lowercase;
|
|
172
|
+
color: $threads-text-secondary-color;
|
|
173
|
+
white-space: nowrap;
|
|
174
|
+
overflow-inline: hidden;
|
|
175
|
+
text-overflow: ellipsis;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.threads-preview__footer {
|
|
181
|
+
display: flex;
|
|
182
|
+
gap: 2.5rem;
|
|
183
|
+
margin-top: 1rem;
|
|
184
|
+
|
|
185
|
+
svg {
|
|
186
|
+
height: 19px;
|
|
187
|
+
width: 19px;
|
|
188
|
+
fill: $threads-actions-icon-color;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.threads-preview__icon {
|
|
193
|
+
|
|
194
|
+
&--like,
|
|
195
|
+
&--reply,
|
|
196
|
+
&--share {
|
|
197
|
+
svg {
|
|
198
|
+
fill: transparent;
|
|
199
|
+
stroke: $threads-actions-icon-color;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/threads-preview/types.ts"],"names":[],"mappings":""}
|