@automattic/social-previews 2.0.0 → 2.0.1-beta.0
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/dist/cjs/helpers.js +10 -5
- 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/instagram-preview/constants.js +6 -0
- package/dist/cjs/instagram-preview/constants.js.map +1 -0
- package/dist/cjs/instagram-preview/icons/bookmark.js +9 -0
- package/dist/cjs/instagram-preview/icons/bookmark.js.map +1 -0
- package/dist/cjs/instagram-preview/icons/comment.js +9 -0
- package/dist/cjs/instagram-preview/icons/comment.js.map +1 -0
- package/dist/cjs/instagram-preview/icons/default-avatar.js +9 -0
- package/dist/cjs/instagram-preview/icons/default-avatar.js.map +1 -0
- package/dist/cjs/instagram-preview/icons/heart.js +9 -0
- package/dist/cjs/instagram-preview/icons/heart.js.map +1 -0
- package/dist/cjs/instagram-preview/icons/menu.js +9 -0
- package/dist/cjs/instagram-preview/icons/menu.js.map +1 -0
- package/dist/cjs/instagram-preview/icons/share.js +9 -0
- package/dist/cjs/instagram-preview/icons/share.js.map +1 -0
- package/dist/cjs/instagram-preview/index.js +6 -0
- package/dist/cjs/instagram-preview/index.js.map +1 -0
- package/dist/cjs/instagram-preview/post-preview.js +30 -0
- package/dist/cjs/instagram-preview/post-preview.js.map +1 -0
- package/dist/cjs/instagram-preview/previews.js +15 -0
- package/dist/cjs/instagram-preview/previews.js.map +1 -0
- package/dist/cjs/instagram-preview/style.scss +103 -0
- package/dist/cjs/instagram-preview/types.js +3 -0
- package/dist/cjs/instagram-preview/types.js.map +1 -0
- package/dist/esm/helpers.js +10 -5
- 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/instagram-preview/constants.js +3 -0
- package/dist/esm/instagram-preview/constants.js.map +1 -0
- package/dist/esm/instagram-preview/icons/bookmark.js +5 -0
- package/dist/esm/instagram-preview/icons/bookmark.js.map +1 -0
- package/dist/esm/instagram-preview/icons/comment.js +5 -0
- package/dist/esm/instagram-preview/icons/comment.js.map +1 -0
- package/dist/esm/instagram-preview/icons/default-avatar.js +5 -0
- package/dist/esm/instagram-preview/icons/default-avatar.js.map +1 -0
- package/dist/esm/instagram-preview/icons/heart.js +5 -0
- package/dist/esm/instagram-preview/icons/heart.js.map +1 -0
- package/dist/esm/instagram-preview/icons/menu.js +5 -0
- package/dist/esm/instagram-preview/icons/menu.js.map +1 -0
- package/dist/esm/instagram-preview/icons/share.js +5 -0
- package/dist/esm/instagram-preview/icons/share.js.map +1 -0
- package/dist/esm/instagram-preview/index.js +3 -0
- package/dist/esm/instagram-preview/index.js.map +1 -0
- package/dist/esm/instagram-preview/post-preview.js +26 -0
- package/dist/esm/instagram-preview/post-preview.js.map +1 -0
- package/dist/esm/instagram-preview/previews.js +10 -0
- package/dist/esm/instagram-preview/previews.js.map +1 -0
- package/dist/esm/instagram-preview/style.scss +103 -0
- package/dist/esm/instagram-preview/types.js +2 -0
- package/dist/esm/instagram-preview/types.js.map +1 -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/instagram-preview/constants.d.ts +3 -0
- package/dist/types/instagram-preview/constants.d.ts.map +1 -0
- package/dist/types/instagram-preview/icons/bookmark.d.ts +2 -0
- package/dist/types/instagram-preview/icons/bookmark.d.ts.map +1 -0
- package/dist/types/instagram-preview/icons/comment.d.ts +2 -0
- package/dist/types/instagram-preview/icons/comment.d.ts.map +1 -0
- package/dist/types/instagram-preview/icons/default-avatar.d.ts +2 -0
- package/dist/types/instagram-preview/icons/default-avatar.d.ts.map +1 -0
- package/dist/types/instagram-preview/icons/heart.d.ts +2 -0
- package/dist/types/instagram-preview/icons/heart.d.ts.map +1 -0
- package/dist/types/instagram-preview/icons/menu.d.ts +2 -0
- package/dist/types/instagram-preview/icons/menu.d.ts.map +1 -0
- package/dist/types/instagram-preview/icons/share.d.ts +2 -0
- package/dist/types/instagram-preview/icons/share.d.ts.map +1 -0
- package/dist/types/instagram-preview/index.d.ts +3 -0
- package/dist/types/instagram-preview/index.d.ts.map +1 -0
- package/dist/types/instagram-preview/post-preview.d.ts +4 -0
- package/dist/types/instagram-preview/post-preview.d.ts.map +1 -0
- package/dist/types/instagram-preview/previews.d.ts +3 -0
- package/dist/types/instagram-preview/previews.d.ts.map +1 -0
- package/dist/types/instagram-preview/types.d.ts +8 -0
- package/dist/types/instagram-preview/types.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/helpers.ts +13 -8
- package/src/index.ts +1 -0
- package/src/instagram-preview/constants.tsx +2 -0
- package/src/instagram-preview/icons/bookmark.tsx +21 -0
- package/src/instagram-preview/icons/comment.tsx +20 -0
- package/src/instagram-preview/icons/default-avatar.tsx +10 -0
- package/src/instagram-preview/icons/heart.tsx +14 -0
- package/src/instagram-preview/icons/menu.tsx +24 -0
- package/src/instagram-preview/icons/share.tsx +30 -0
- package/src/instagram-preview/index.tsx +2 -0
- package/src/instagram-preview/post-preview.tsx +76 -0
- package/src/instagram-preview/previews.tsx +33 -0
- package/src/instagram-preview/style.scss +103 -0
- package/src/instagram-preview/types.ts +9 -0
package/dist/cjs/helpers.js
CHANGED
|
@@ -38,7 +38,7 @@ exports.formatTweetDate = new Intl.DateTimeFormat('en-US', {
|
|
|
38
38
|
* Prepares the text for the preview.
|
|
39
39
|
*/
|
|
40
40
|
function preparePreviewText(text, options) {
|
|
41
|
-
const { platform, maxChars, maxLines } = options;
|
|
41
|
+
const { platform, maxChars, maxLines, hyperlinkUrls = true } = options;
|
|
42
42
|
let result = (0, exports.stripHtmlTags)(text);
|
|
43
43
|
if (maxChars && result.length > maxChars) {
|
|
44
44
|
result = result.substring(0, maxChars);
|
|
@@ -49,10 +49,12 @@ function preparePreviewText(text, options) {
|
|
|
49
49
|
result = lines.slice(0, maxLines).join('\n');
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
if (hyperlinkUrls) {
|
|
53
|
+
// Convert URLs to hyperlinks.
|
|
54
|
+
result = result.replace(
|
|
55
|
+
// TODO: Use a better regex here to match the URLs without protocol.
|
|
56
|
+
/(https?:\/\/\S+)/g, '<a href="$1" rel="noopener noreferrer" target="_blank">$1</a>');
|
|
57
|
+
}
|
|
56
58
|
let hashtagUrl;
|
|
57
59
|
if ('twitter' === platform) {
|
|
58
60
|
hashtagUrl = 'https://twitter.com/hashtag/';
|
|
@@ -60,6 +62,9 @@ function preparePreviewText(text, options) {
|
|
|
60
62
|
else if ('linkedin' === platform) {
|
|
61
63
|
hashtagUrl = 'https://www.linkedin.com/feed/hashtag/?keywords=';
|
|
62
64
|
}
|
|
65
|
+
else if ('instagram' === platform) {
|
|
66
|
+
hashtagUrl = 'https://www.instagram.com/explore/tags/';
|
|
67
|
+
}
|
|
63
68
|
if (hashtagUrl) {
|
|
64
69
|
// Convert hashtags to hyperlinks.
|
|
65
70
|
result = result.replace(/(^|\s)#(\w+)/g, '$1<a href="' + hashtagUrl + '$2" rel="noopener noreferrer" target="_blank">#$2</a>');
|
package/dist/cjs/helpers.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.ts"],"names":[],"mappings":";;;AAOO,MAAM,UAAU,GAAG,CAAE,GAAW,EAAW,EAAE,CACnD,GAAG;KACD,OAAO,CAAE,YAAY,EAAE,EAAE,CAAE,CAAC,yBAAyB;KACrD,OAAO,CAAE,OAAO,EAAE,EAAE,CAAE,CAAC,CAAC,oCAAoC;AAHlD,QAAA,UAAU,cAGG;AAEnB,MAAM,WAAW,GAA0C,CAAE,KAAK,EAAG,EAAE,CAAC,CAAE,KAAK,EAAG,EAAE,CAC1F,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;AAD1B,QAAA,WAAW,eACe;AAEhC,MAAM,gBAAgB,GAC5B,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE,CAAC,CAAE,SAAS,EAAG,EAAE;IACnC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAE,CAAC,EAAE,KAAK,CAAE,CAAC;IAC1C,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAE,GAAG,CAAE,CAAC;IAE3C,OAAO,SAAS,GAAG,KAAK,IAAI,SAAS,GAAG,KAAK;QAC5C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAE,CAAC,EAAE,SAAS,CAAE,CAAC,MAAM,CAAE,GAAG,CAAE;QAC3C,CAAC,CAAC,KAAK,CAAC;AACV,CAAC,CAAC;AARU,QAAA,gBAAgB,oBAQ1B;AAEI,MAAM,cAAc,GAA+B,CAAE,KAAK,EAAG,EAAE,CAAC,CAAE,KAAK,EAAG,EAAE,CAClF,KAAK,CAAC,KAAK,CAAE,CAAC,EAAE,KAAK,CAAE,CAAC,MAAM,CAAE,GAAG,CAAE,CAAC;AAD1B,QAAA,cAAc,kBACY;AAEhC,MAAM,UAAU,GACtB,CAAE,GAAG,UAAU,EAAG,EAAE,CACpB,CAAE,CAAC,EAAG,EAAE,CACL,UAAU,CAAC,IAAI,CAAE,CAAE,CAAC,EAAG,EAAE,CAAC,KAAK,KAAK,CAAC,CAAE,CAAC,CAAE,CAAiB,EAAE,CAAE,CAAC,CAAE,CAAC;AAH1D,QAAA,UAAU,cAGgD;AAEhE,MAAM,aAAa,GAAc,CAAE,WAAW,EAAE,WAAW,GAAG,EAAE,EAAG,EAAE;IAC3E,MAAM,OAAO,GAAG,IAAI,MAAM,CAAE,QAAS,WAAW,CAAC,IAAI,CAAE,EAAE,CAAG,QAAQ,EAAE,IAAI,CAAE,CAAC;IAE7E,OAAO,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAE,OAAO,EAAE,EAAE,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAC9D,CAAC,CAAC;AAJW,QAAA,aAAa,iBAIxB;AAEK,MAAM,MAAM,GAAG,CAAE,IAAY,EAAE,GAAW,EAAY,EAAE;IAC9D,MAAM,OAAO,GAAG,IAAI,MAAM,CAAE,IAAK,GAAI,QAAQ,EAAE,IAAI,CAAE,CAAC;IAEtD,OAAO,OAAO,CAAC,IAAI,CAAE,IAAI,CAAE,CAAC;AAC7B,CAAC,CAAC;AAJW,QAAA,MAAM,UAIjB;AAEW,QAAA,eAAe,GAAG,IAAI,IAAI,CAAC,cAAc,CAAE,OAAO,EAAE;IAChE,4BAA4B;IAC5B,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,SAAS;CACd,CAAE,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.ts"],"names":[],"mappings":"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"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -7,5 +7,6 @@ tslib_1.__exportStar(require("./linkedin-preview"), exports);
|
|
|
7
7
|
tslib_1.__exportStar(require("./tumblr-preview"), exports);
|
|
8
8
|
tslib_1.__exportStar(require("./facebook-preview"), exports);
|
|
9
9
|
tslib_1.__exportStar(require("./constants"), exports);
|
|
10
|
+
tslib_1.__exportStar(require("./instagram-preview"), exports);
|
|
10
11
|
tslib_1.__exportStar(require("./types"), exports);
|
|
11
12
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,kEAAwC;AACxC,4DAAkC;AAClC,6DAAmC;AACnC,2DAAiC;AACjC,6DAAmC;AACnC,sDAA4B;AAC5B,kDAAwB"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,kEAAwC;AACxC,4DAAkC;AAClC,6DAAmC;AACnC,2DAAiC;AACjC,6DAAmC;AACnC,sDAA4B;AAC5B,8DAAoC;AACpC,kDAAwB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/instagram-preview/constants.tsx"],"names":[],"mappings":";;;AAAa,QAAA,oBAAoB,GAAG,GAAG,CAAC;AAC3B,QAAA,mBAAmB,GAAG,CAAC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Bookmark = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const Bookmark = () => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: (0, jsx_runtime_1.jsx)("polygon", { fill: "none", points: "20 21 12 13.44 4 21 4 3 20 3 20 21", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
|
|
7
|
+
};
|
|
8
|
+
exports.Bookmark = Bookmark;
|
|
9
|
+
//# sourceMappingURL=bookmark.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bookmark.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/bookmark.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,QAAQ,GAAa,GAAG,EAAE;IACtC,OAAO,CACN,gCACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,YAEV,oCACC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,oCAAoC,EAC3C,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACL,GACN,CACN,CAAC;AACH,CAAC,CAAC;AApBW,QAAA,QAAQ,YAoBnB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Comment = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const Comment = () => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: (0, jsx_runtime_1.jsx)("path", { d: "M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z", fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2" }) }));
|
|
7
|
+
};
|
|
8
|
+
exports.Comment = Comment;
|
|
9
|
+
//# sourceMappingURL=comment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"comment.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/comment.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,OAAO,GAAa,GAAG,EAAE;IACrC,OAAO,CACN,gCACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,YAEV,iCACC,CAAC,EAAC,oDAAoD,EACtD,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACR,GACH,CACN,CAAC;AACH,CAAC,CAAC;AAnBW,QAAA,OAAO,WAmBlB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DefaultAvatar = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const DefaultAvatar = () => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 340 340", width: "340", height: "340", children: (0, jsx_runtime_1.jsx)("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" }) }));
|
|
7
|
+
};
|
|
8
|
+
exports.DefaultAvatar = DefaultAvatar;
|
|
9
|
+
//# sourceMappingURL=default-avatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-avatar.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/default-avatar.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,OAAO,CACN,gCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,YACrF,iCACC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,uGAAuG,GACxG,GACG,CACN,CAAC;AACH,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Heart = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const Heart = () => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: (0, jsx_runtime_1.jsx)("path", { d: "M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938m0-2a6.04 6.04 0 0 0-4.797 2.127 6.052 6.052 0 0 0-4.787-2.127A6.985 6.985 0 0 0 .5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 0 0 3.518 3.018 2 2 0 0 0 2.174 0 45.263 45.263 0 0 0 3.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 0 0-6.708-7.218Z" }) }));
|
|
7
|
+
};
|
|
8
|
+
exports.Heart = Heart;
|
|
9
|
+
//# sourceMappingURL=heart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"heart.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/heart.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,KAAK,GAAa,GAAG,EAAE;IACnC,OAAO,CACN,gCACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,YAEV,iCAAM,CAAC,EAAC,0oBAA0oB,GAAQ,GACrpB,CACN,CAAC;AACH,CAAC,CAAC;AAbW,QAAA,KAAK,SAahB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Menu = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const Menu = () => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { width: "17", height: "5", viewBox: "0 0 17 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.11865 3.5C2.67094 3.5 3.11865 3.05228 3.11865 2.5C3.11865 1.94772 2.67094 1.5 2.11865 1.5C1.56637 1.5 1.11865 1.94772 1.11865 2.5C1.11865 3.05228 1.56637 3.5 2.11865 3.5Z", fill: "black", stroke: "black", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.55933 3.5C9.11161 3.5 9.55933 3.05228 9.55933 2.5C9.55933 1.94772 9.11161 1.5 8.55933 1.5C8.00704 1.5 7.55933 1.94772 7.55933 2.5C7.55933 3.05228 8.00704 3.5 8.55933 3.5Z", fill: "black", stroke: "black", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 3.5C15.5523 3.5 16 3.05228 16 2.5C16 1.94772 15.5523 1.5 15 1.5C14.4477 1.5 14 1.94772 14 2.5C14 3.05228 14.4477 3.5 15 3.5Z", fill: "black", stroke: "black", strokeWidth: "2" })] }));
|
|
7
|
+
};
|
|
8
|
+
exports.Menu = Menu;
|
|
9
|
+
//# sourceMappingURL=menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/menu.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,IAAI,GAAa,GAAG,EAAE;IAClC,OAAO,CACN,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC3F,iCACC,CAAC,EAAC,+KAA+K,EACjL,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,GAAG,GACd,EACF,iCACC,CAAC,EAAC,+KAA+K,EACjL,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,GAAG,GACd,EACF,iCACC,CAAC,EAAC,kIAAkI,EACpI,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,GAAG,GACd,IACG,CACN,CAAC;AACH,CAAC,CAAC;AAvBW,QAAA,IAAI,QAuBf"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Share = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const Share = () => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: [(0, jsx_runtime_1.jsx)("line", { fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2", x1: "22", x2: "9.218", y1: "3", y2: "10.083" }), (0, jsx_runtime_1.jsx)("polygon", { fill: "none", points: "11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2" })] }));
|
|
7
|
+
};
|
|
8
|
+
exports.Share = Share;
|
|
9
|
+
//# sourceMappingURL=share.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"share.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/share.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,KAAK,GAAa,GAAG,EAAE;IACnC,OAAO,CACN,iCACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,aAEV,iCACC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,EACf,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,OAAO,EACV,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,QAAQ,GACJ,EACR,oCACC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,2DAA2D,EAClE,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACL,IACN,CACN,CAAC;AACH,CAAC,CAAC;AA7BW,QAAA,KAAK,SA6BhB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/instagram-preview/index.tsx"],"names":[],"mappings":";;;AAAA,yDAA+B;AAC/B,qDAA2B"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InstagramPostPreview = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const i18n_1 = require("@wordpress/i18n");
|
|
6
|
+
const helpers_1 = require("../helpers");
|
|
7
|
+
const constants_1 = require("./constants");
|
|
8
|
+
const bookmark_1 = require("./icons/bookmark");
|
|
9
|
+
const comment_1 = require("./icons/comment");
|
|
10
|
+
const default_avatar_1 = require("./icons/default-avatar");
|
|
11
|
+
const heart_1 = require("./icons/heart");
|
|
12
|
+
const menu_1 = require("./icons/menu");
|
|
13
|
+
const share_1 = require("./icons/share");
|
|
14
|
+
require("./style.scss");
|
|
15
|
+
function InstagramPostPreview({ image, name, profileImage, caption, }) {
|
|
16
|
+
const username = name || 'username';
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__wrapper", children: (0, jsx_runtime_1.jsxs)("section", { className: "instagram-preview__container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__header--avatar", children: profileImage ? (0, jsx_runtime_1.jsx)("img", { src: profileImage, alt: "" }) : (0, jsx_runtime_1.jsx)(default_avatar_1.DefaultAvatar, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__header--profile", children: [(0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__header--profile-name", children: username }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__header--profile-menu", children: (0, jsx_runtime_1.jsx)(menu_1.Menu, {}) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__media", children: (0, jsx_runtime_1.jsx)("img", { className: "instagram-preview__media--image", src: image, alt: "" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__content", children: [(0, jsx_runtime_1.jsxs)("section", { className: "instagram-preview__content--actions", children: [(0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__content--actions-primary", children: [(0, jsx_runtime_1.jsx)(heart_1.Heart, {}), (0, jsx_runtime_1.jsx)(comment_1.Comment, {}), (0, jsx_runtime_1.jsx)(share_1.Share, {})] }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--actions-secondary", children: (0, jsx_runtime_1.jsx)(bookmark_1.Bookmark, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "instagram-preview__content--body", children: [(0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--name", children: username }), "\u00A0", caption ? ((0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--text",
|
|
18
|
+
// TODO: Replace `dangerouslySetInnerHTML` with `createInterpolateElement` inside `preparePreviewText`
|
|
19
|
+
// eslint-disable-next-line react/no-danger
|
|
20
|
+
dangerouslySetInnerHTML: {
|
|
21
|
+
__html: (0, helpers_1.preparePreviewText)(caption, {
|
|
22
|
+
platform: 'instagram',
|
|
23
|
+
maxChars: constants_1.FEED_TEXT_MAX_LENGTH,
|
|
24
|
+
maxLines: constants_1.FEED_TEXT_MAX_LINES,
|
|
25
|
+
hyperlinkUrls: false,
|
|
26
|
+
}),
|
|
27
|
+
} })) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "instagram-preview__content--footer", children: (0, jsx_runtime_1.jsx)("span", { children: (0, i18n_1.__)('View one comment', 'social-previews') }) })] })] }) }));
|
|
28
|
+
}
|
|
29
|
+
exports.InstagramPostPreview = InstagramPostPreview;
|
|
30
|
+
//# sourceMappingURL=post-preview.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/instagram-preview/post-preview.tsx"],"names":[],"mappings":";;;;AAAA,0CAAqC;AACrC,wCAAgD;AAChD,2CAAwE;AACxE,+CAA4D;AAC5D,6CAAyD;AACzD,2DAAuD;AACvD,yCAAmD;AACnD,uCAAgD;AAChD,yCAAmD;AAGnD,wBAAsB;AAEtB,SAAgB,oBAAoB,CAAE,EACrC,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,OAAO,GACgB;IACvB,MAAM,QAAQ,GAAG,IAAI,IAAI,UAAU,CAAC;IAEpC,OAAO,CACN,gCAAK,SAAS,EAAC,4BAA4B,YAC1C,qCAAS,SAAS,EAAC,8BAA8B,aAChD,iCAAK,SAAS,EAAC,2BAA2B,aACzC,gCAAK,SAAS,EAAC,mCAAmC,YAC/C,YAAY,CAAC,CAAC,CAAC,gCAAK,GAAG,EAAG,YAAY,EAAG,GAAG,EAAC,EAAE,GAAG,CAAC,CAAC,CAAC,uBAAC,8BAAa,KAAG,GACnE,EACN,iCAAK,SAAS,EAAC,oCAAoC,aAClD,gCAAK,SAAS,EAAC,yCAAyC,YAAG,QAAQ,GAAQ,EAC3E,gCAAK,SAAS,EAAC,yCAAyC,YACvD,uBAAC,WAAQ,KAAG,GACP,IACD,IACD,EACN,gCAAK,SAAS,EAAC,0BAA0B,YACxC,gCAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,GACnE,EACN,iCAAK,SAAS,EAAC,4BAA4B,aAC1C,qCAAS,SAAS,EAAC,qCAAqC,aACvD,iCAAK,SAAS,EAAC,6CAA6C,aAC3D,uBAAC,aAAS,KAAG,EACb,uBAAC,iBAAW,KAAG,EACf,uBAAC,aAAS,KAAG,IACR,EACN,gCAAK,SAAS,EAAC,+CAA+C,YAC7D,uBAAC,mBAAY,KAAG,GACX,IACG,EACV,iCAAK,SAAS,EAAC,kCAAkC,aAChD,gCAAK,SAAS,EAAC,kCAAkC,YAAG,QAAQ,GAAQ,YAElE,OAAO,CAAC,CAAC,CAAC,CACX,gCACC,SAAS,EAAC,kCAAkC;oCAC5C,sGAAsG;oCACtG,2CAA2C;oCAC3C,uBAAuB,EAAG;wCACzB,MAAM,EAAE,IAAA,4BAAkB,EAAE,OAAO,EAAE;4CACpC,QAAQ,EAAE,WAAW;4CACrB,QAAQ,EAAE,gCAAoB;4CAC9B,QAAQ,EAAE,+BAAmB;4CAC7B,aAAa,EAAE,KAAK;yCACpB,CAAE;qCACH,GACA,CACF,CAAC,CAAC,CAAC,IAAI,IACH,EACN,gCAAK,SAAS,EAAC,oCAAoC,YAClD,2CAAQ,IAAA,SAAE,EAAE,kBAAkB,EAAE,iBAAiB,CAAE,GAAS,GACvD,IACD,IACG,GACL,CACN,CAAC;AACH,CAAC;AA9DD,oDA8DC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InstagramPreviews = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const i18n_1 = require("@wordpress/i18n");
|
|
7
|
+
const section_heading_1 = tslib_1.__importDefault(require("../shared/section-heading"));
|
|
8
|
+
const post_preview_1 = require("./post-preview");
|
|
9
|
+
const InstagramPreviews = ({ headingLevel, hideLinkPreview, hidePostPreview, ...props }) => {
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "social-preview instagram-preview", children: !hidePostPreview && ((0, jsx_runtime_1.jsxs)("section", { className: "social-preview__section instagram-preview__section", children: [(0, jsx_runtime_1.jsx)(section_heading_1.default, { level: headingLevel, children:
|
|
11
|
+
// translators: refers to a social post on Instagram
|
|
12
|
+
(0, i18n_1.__)('Your post', 'social-previews') }), (0, jsx_runtime_1.jsx)("p", { className: "social-preview__section-desc", children: (0, i18n_1.__)('This is what your social post will look like on Instagram:', 'social-previews') }), (0, jsx_runtime_1.jsx)(post_preview_1.InstagramPostPreview, { ...props })] })) }));
|
|
13
|
+
};
|
|
14
|
+
exports.InstagramPreviews = InstagramPreviews;
|
|
15
|
+
//# sourceMappingURL=previews.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/instagram-preview/previews.tsx"],"names":[],"mappings":";;;;;AAAA,0CAAqC;AACrC,wFAAuD;AACvD,iDAAsD;AAG/C,MAAM,iBAAiB,GAAuC,CAAE,EACtE,YAAY,EACZ,eAAe,EACf,eAAe,EACf,GAAG,KAAK,EACR,EAAG,EAAE;IACL,OAAO,CACN,gCAAK,SAAS,EAAC,kCAAkC,YAC9C,CAAE,eAAe,IAAI,CACtB,qCAAS,SAAS,EAAC,oDAAoD,aACtE,uBAAC,yBAAc,IAAC,KAAK,EAAG,YAAY;oBAElC,oDAAoD;oBACpD,IAAA,SAAE,EAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,8BAAG,SAAS,EAAC,8BAA8B,YACxC,IAAA,SAAE,EACH,4DAA4D,EAC5D,iBAAiB,CACjB,GACE,EACJ,uBAAC,mCAAoB,OAAM,KAAK,GAAK,IAC5B,CACV,GACI,CACN,CAAC;AACH,CAAC,CAAC;AA3BW,QAAA,iBAAiB,qBA2B5B"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
.instagram-preview {
|
|
4
|
+
&__wrapper {
|
|
5
|
+
padding: 20px;
|
|
6
|
+
background-color: #fff;
|
|
7
|
+
margin-inline: auto;
|
|
8
|
+
max-width: clamp(200px, 100%, 555px);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// When the preview is in a section of all previews
|
|
12
|
+
&__section &__wrapper {
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&__section.social-preview__section {
|
|
17
|
+
width: clamp(200px, 100%, 555px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&__container {
|
|
21
|
+
|
|
22
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&__header {
|
|
27
|
+
|
|
28
|
+
padding: 0.5rem 1rem;
|
|
29
|
+
display: flex;
|
|
30
|
+
gap: 0.5rem;
|
|
31
|
+
|
|
32
|
+
&--avatar {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
max-width: 32px;
|
|
36
|
+
max-height: 32px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--avatar img {
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 100%;
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&--profile {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
flex-grow: 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&--profile-name {
|
|
53
|
+
font-weight: 700;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&__media {
|
|
58
|
+
display: flex;
|
|
59
|
+
|
|
60
|
+
&--image {
|
|
61
|
+
width: 100%;
|
|
62
|
+
aspect-ratio: 1;
|
|
63
|
+
object-fit: cover;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&__content {
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
gap: 0.5rem;
|
|
71
|
+
padding: 0.5rem 1rem;
|
|
72
|
+
|
|
73
|
+
a {
|
|
74
|
+
text-decoration: none;
|
|
75
|
+
color: rgb(0, 55, 107);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&--actions {
|
|
79
|
+
display: flex;
|
|
80
|
+
justify-content: space-between;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&--actions-primary {
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
gap: 1rem;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&--name {
|
|
90
|
+
font-weight: 600;
|
|
91
|
+
display: inline;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&--text {
|
|
95
|
+
display: inline;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&--footer {
|
|
99
|
+
font-weight: 400;
|
|
100
|
+
color: rgb(115, 115, 115);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/instagram-preview/types.ts"],"names":[],"mappings":""}
|
package/dist/esm/helpers.js
CHANGED
|
@@ -28,7 +28,7 @@ export const formatTweetDate = new Intl.DateTimeFormat('en-US', {
|
|
|
28
28
|
* Prepares the text for the preview.
|
|
29
29
|
*/
|
|
30
30
|
export function preparePreviewText(text, options) {
|
|
31
|
-
const { platform, maxChars, maxLines } = options;
|
|
31
|
+
const { platform, maxChars, maxLines, hyperlinkUrls = true } = options;
|
|
32
32
|
let result = stripHtmlTags(text);
|
|
33
33
|
if (maxChars && result.length > maxChars) {
|
|
34
34
|
result = result.substring(0, maxChars);
|
|
@@ -39,10 +39,12 @@ export function preparePreviewText(text, options) {
|
|
|
39
39
|
result = lines.slice(0, maxLines).join('\n');
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
if (hyperlinkUrls) {
|
|
43
|
+
// Convert URLs to hyperlinks.
|
|
44
|
+
result = result.replace(
|
|
45
|
+
// TODO: Use a better regex here to match the URLs without protocol.
|
|
46
|
+
/(https?:\/\/\S+)/g, '<a href="$1" rel="noopener noreferrer" target="_blank">$1</a>');
|
|
47
|
+
}
|
|
46
48
|
let hashtagUrl;
|
|
47
49
|
if ('twitter' === platform) {
|
|
48
50
|
hashtagUrl = 'https://twitter.com/hashtag/';
|
|
@@ -50,6 +52,9 @@ export function preparePreviewText(text, options) {
|
|
|
50
52
|
else if ('linkedin' === platform) {
|
|
51
53
|
hashtagUrl = 'https://www.linkedin.com/feed/hashtag/?keywords=';
|
|
52
54
|
}
|
|
55
|
+
else if ('instagram' === platform) {
|
|
56
|
+
hashtagUrl = 'https://www.instagram.com/explore/tags/';
|
|
57
|
+
}
|
|
53
58
|
if (hashtagUrl) {
|
|
54
59
|
// Convert hashtags to hyperlinks.
|
|
55
60
|
result = result.replace(/(^|\s)#(\w+)/g, '$1<a href="' + hashtagUrl + '$2" rel="noopener noreferrer" target="_blank">#$2</a>');
|
package/dist/esm/helpers.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAE,GAAW,EAAW,EAAE,CACnD,GAAG;KACD,OAAO,CAAE,YAAY,EAAE,EAAE,CAAE,CAAC,yBAAyB;KACrD,OAAO,CAAE,OAAO,EAAE,EAAE,CAAE,CAAC,CAAC,oCAAoC;AAE/D,MAAM,CAAC,MAAM,WAAW,GAA0C,CAAE,KAAK,EAAG,EAAE,CAAC,CAAE,KAAK,EAAG,EAAE,CAC1F,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;AAEvC,MAAM,CAAC,MAAM,gBAAgB,GAC5B,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE,CAAC,CAAE,SAAS,EAAG,EAAE;IACnC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAE,CAAC,EAAE,KAAK,CAAE,CAAC;IAC1C,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAE,GAAG,CAAE,CAAC;IAE3C,OAAO,SAAS,GAAG,KAAK,IAAI,SAAS,GAAG,KAAK;QAC5C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAE,CAAC,EAAE,SAAS,CAAE,CAAC,MAAM,CAAE,GAAG,CAAE;QAC3C,CAAC,CAAC,KAAK,CAAC;AACV,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAA+B,CAAE,KAAK,EAAG,EAAE,CAAC,CAAE,KAAK,EAAG,EAAE,CAClF,KAAK,CAAC,KAAK,CAAE,CAAC,EAAE,KAAK,CAAE,CAAC,MAAM,CAAE,GAAG,CAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GACtB,CAAE,GAAG,UAAU,EAAG,EAAE,CACpB,CAAE,CAAC,EAAG,EAAE,CACL,UAAU,CAAC,IAAI,CAAE,CAAE,CAAC,EAAG,EAAE,CAAC,KAAK,KAAK,CAAC,CAAE,CAAC,CAAE,CAAiB,EAAE,CAAE,CAAC,CAAE,CAAC;AAEvE,MAAM,CAAC,MAAM,aAAa,GAAc,CAAE,WAAW,EAAE,WAAW,GAAG,EAAE,EAAG,EAAE;IAC3E,MAAM,OAAO,GAAG,IAAI,MAAM,CAAE,QAAS,WAAW,CAAC,IAAI,CAAE,EAAE,CAAG,QAAQ,EAAE,IAAI,CAAE,CAAC;IAE7E,OAAO,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAE,OAAO,EAAE,EAAE,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAE,IAAY,EAAE,GAAW,EAAY,EAAE;IAC9D,MAAM,OAAO,GAAG,IAAI,MAAM,CAAE,IAAK,GAAI,QAAQ,EAAE,IAAI,CAAE,CAAC;IAEtD,OAAO,OAAO,CAAC,IAAI,CAAE,IAAI,CAAE,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,cAAc,CAAE,OAAO,EAAE;IAChE,4BAA4B;IAC5B,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,SAAS;CACd,CAAE,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
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,aAAa,CAAC;AAC5B,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,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/instagram-preview/constants.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACxC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export const Bookmark = () => {
|
|
3
|
+
return (_jsx("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: _jsx("polygon", { fill: "none", points: "20 21 12 13.44 4 21 4 3 20 3 20 21", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=bookmark.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bookmark.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/bookmark.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAa,GAAG,EAAE;IACtC,OAAO,CACN,cACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,YAEV,kBACC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,oCAAoC,EAC3C,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACL,GACN,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export const Comment = () => {
|
|
3
|
+
return (_jsx("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: _jsx("path", { d: "M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z", fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2" }) }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=comment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"comment.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/comment.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,OAAO,GAAa,GAAG,EAAE;IACrC,OAAO,CACN,cACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,YAEV,eACC,CAAC,EAAC,oDAAoD,EACtD,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACR,GACH,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export const DefaultAvatar = () => {
|
|
3
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 340 340", width: "340", height: "340", children: _jsx("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" }) }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=default-avatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-avatar.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/default-avatar.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,OAAO,CACN,cAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,YACrF,eACC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,uGAAuG,GACxG,GACG,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export const Heart = () => {
|
|
3
|
+
return (_jsx("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: _jsx("path", { d: "M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938m0-2a6.04 6.04 0 0 0-4.797 2.127 6.052 6.052 0 0 0-4.787-2.127A6.985 6.985 0 0 0 .5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 0 0 3.518 3.018 2 2 0 0 0 2.174 0 45.263 45.263 0 0 0 3.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 0 0-6.708-7.218Z" }) }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=heart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"heart.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/heart.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,KAAK,GAAa,GAAG,EAAE;IACnC,OAAO,CACN,cACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,YAEV,eAAM,CAAC,EAAC,0oBAA0oB,GAAQ,GACrpB,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const Menu = () => {
|
|
3
|
+
return (_jsxs("svg", { width: "17", height: "5", viewBox: "0 0 17 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M2.11865 3.5C2.67094 3.5 3.11865 3.05228 3.11865 2.5C3.11865 1.94772 2.67094 1.5 2.11865 1.5C1.56637 1.5 1.11865 1.94772 1.11865 2.5C1.11865 3.05228 1.56637 3.5 2.11865 3.5Z", fill: "black", stroke: "black", strokeWidth: "2" }), _jsx("path", { d: "M8.55933 3.5C9.11161 3.5 9.55933 3.05228 9.55933 2.5C9.55933 1.94772 9.11161 1.5 8.55933 1.5C8.00704 1.5 7.55933 1.94772 7.55933 2.5C7.55933 3.05228 8.00704 3.5 8.55933 3.5Z", fill: "black", stroke: "black", strokeWidth: "2" }), _jsx("path", { d: "M15 3.5C15.5523 3.5 16 3.05228 16 2.5C16 1.94772 15.5523 1.5 15 1.5C14.4477 1.5 14 1.94772 14 2.5C14 3.05228 14.4477 3.5 15 3.5Z", fill: "black", stroke: "black", strokeWidth: "2" })] }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/menu.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,IAAI,GAAa,GAAG,EAAE;IAClC,OAAO,CACN,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC3F,eACC,CAAC,EAAC,+KAA+K,EACjL,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,GAAG,GACd,EACF,eACC,CAAC,EAAC,+KAA+K,EACjL,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,GAAG,GACd,EACF,eACC,CAAC,EAAC,kIAAkI,EACpI,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,GAAG,GACd,IACG,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const Share = () => {
|
|
3
|
+
return (_jsxs("svg", { color: "rgb(38, 38, 38)", fill: "rgb(38, 38, 38)", height: "24", role: "img", viewBox: "0 0 24 24", width: "24", children: [_jsx("line", { fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2", x1: "22", x2: "9.218", y1: "3", y2: "10.083" }), _jsx("polygon", { fill: "none", points: "11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2" })] }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=share.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"share.js","sourceRoot":"","sources":["../../../../src/instagram-preview/icons/share.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,KAAK,GAAa,GAAG,EAAE;IACnC,OAAO,CACN,eACC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,aAEV,eACC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,EACf,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,OAAO,EACV,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,QAAQ,GACJ,EACR,kBACC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,2DAA2D,EAClE,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,GAAG,GACL,IACN,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/instagram-preview/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { __ } from '@wordpress/i18n';
|
|
3
|
+
import { preparePreviewText } from '../helpers';
|
|
4
|
+
import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
|
|
5
|
+
import { Bookmark as BookmarkIcon } from './icons/bookmark';
|
|
6
|
+
import { Comment as CommentIcon } from './icons/comment';
|
|
7
|
+
import { DefaultAvatar } from './icons/default-avatar';
|
|
8
|
+
import { Heart as HeartIcon } from './icons/heart';
|
|
9
|
+
import { Menu as MenuIcon } from './icons/menu';
|
|
10
|
+
import { Share as ShareIcon } from './icons/share';
|
|
11
|
+
import './style.scss';
|
|
12
|
+
export function InstagramPostPreview({ image, name, profileImage, caption, }) {
|
|
13
|
+
const username = name || 'username';
|
|
14
|
+
return (_jsx("div", { className: "instagram-preview__wrapper", children: _jsxs("section", { className: "instagram-preview__container", children: [_jsxs("div", { className: "instagram-preview__header", children: [_jsx("div", { className: "instagram-preview__header--avatar", children: profileImage ? _jsx("img", { src: profileImage, alt: "" }) : _jsx(DefaultAvatar, {}) }), _jsxs("div", { className: "instagram-preview__header--profile", children: [_jsx("div", { className: "instagram-preview__header--profile-name", children: username }), _jsx("div", { className: "instagram-preview__header--profile-menu", children: _jsx(MenuIcon, {}) })] })] }), _jsx("div", { className: "instagram-preview__media", children: _jsx("img", { className: "instagram-preview__media--image", src: image, alt: "" }) }), _jsxs("div", { className: "instagram-preview__content", children: [_jsxs("section", { className: "instagram-preview__content--actions", children: [_jsxs("div", { className: "instagram-preview__content--actions-primary", children: [_jsx(HeartIcon, {}), _jsx(CommentIcon, {}), _jsx(ShareIcon, {})] }), _jsx("div", { className: "instagram-preview__content--actions-secondary", children: _jsx(BookmarkIcon, {}) })] }), _jsxs("div", { className: "instagram-preview__content--body", children: [_jsx("div", { className: "instagram-preview__content--name", children: username }), "\u00A0", caption ? (_jsx("div", { className: "instagram-preview__content--text",
|
|
15
|
+
// TODO: Replace `dangerouslySetInnerHTML` with `createInterpolateElement` inside `preparePreviewText`
|
|
16
|
+
// eslint-disable-next-line react/no-danger
|
|
17
|
+
dangerouslySetInnerHTML: {
|
|
18
|
+
__html: preparePreviewText(caption, {
|
|
19
|
+
platform: 'instagram',
|
|
20
|
+
maxChars: FEED_TEXT_MAX_LENGTH,
|
|
21
|
+
maxLines: FEED_TEXT_MAX_LINES,
|
|
22
|
+
hyperlinkUrls: false,
|
|
23
|
+
}),
|
|
24
|
+
} })) : null] }), _jsx("div", { className: "instagram-preview__content--footer", children: _jsx("span", { children: __('View one comment', 'social-previews') }) })] })] }) }));
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=post-preview.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"post-preview.js","sourceRoot":"","sources":["../../../src/instagram-preview/post-preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,cAAc,CAAC;AAEtB,MAAM,UAAU,oBAAoB,CAAE,EACrC,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,OAAO,GACgB;IACvB,MAAM,QAAQ,GAAG,IAAI,IAAI,UAAU,CAAC;IAEpC,OAAO,CACN,cAAK,SAAS,EAAC,4BAA4B,YAC1C,mBAAS,SAAS,EAAC,8BAA8B,aAChD,eAAK,SAAS,EAAC,2BAA2B,aACzC,cAAK,SAAS,EAAC,mCAAmC,YAC/C,YAAY,CAAC,CAAC,CAAC,cAAK,GAAG,EAAG,YAAY,EAAG,GAAG,EAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GACnE,EACN,eAAK,SAAS,EAAC,oCAAoC,aAClD,cAAK,SAAS,EAAC,yCAAyC,YAAG,QAAQ,GAAQ,EAC3E,cAAK,SAAS,EAAC,yCAAyC,YACvD,KAAC,QAAQ,KAAG,GACP,IACD,IACD,EACN,cAAK,SAAS,EAAC,0BAA0B,YACxC,cAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAG,KAAK,EAAG,GAAG,EAAC,EAAE,GAAG,GACnE,EACN,eAAK,SAAS,EAAC,4BAA4B,aAC1C,mBAAS,SAAS,EAAC,qCAAqC,aACvD,eAAK,SAAS,EAAC,6CAA6C,aAC3D,KAAC,SAAS,KAAG,EACb,KAAC,WAAW,KAAG,EACf,KAAC,SAAS,KAAG,IACR,EACN,cAAK,SAAS,EAAC,+CAA+C,YAC7D,KAAC,YAAY,KAAG,GACX,IACG,EACV,eAAK,SAAS,EAAC,kCAAkC,aAChD,cAAK,SAAS,EAAC,kCAAkC,YAAG,QAAQ,GAAQ,YAElE,OAAO,CAAC,CAAC,CAAC,CACX,cACC,SAAS,EAAC,kCAAkC;oCAC5C,sGAAsG;oCACtG,2CAA2C;oCAC3C,uBAAuB,EAAG;wCACzB,MAAM,EAAE,kBAAkB,CAAE,OAAO,EAAE;4CACpC,QAAQ,EAAE,WAAW;4CACrB,QAAQ,EAAE,oBAAoB;4CAC9B,QAAQ,EAAE,mBAAmB;4CAC7B,aAAa,EAAE,KAAK;yCACpB,CAAE;qCACH,GACA,CACF,CAAC,CAAC,CAAC,IAAI,IACH,EACN,cAAK,SAAS,EAAC,oCAAoC,YAClD,yBAAQ,EAAE,CAAE,kBAAkB,EAAE,iBAAiB,CAAE,GAAS,GACvD,IACD,IACG,GACL,CACN,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { __ } from '@wordpress/i18n';
|
|
3
|
+
import SectionHeading from '../shared/section-heading';
|
|
4
|
+
import { InstagramPostPreview } from './post-preview';
|
|
5
|
+
export const InstagramPreviews = ({ headingLevel, hideLinkPreview, hidePostPreview, ...props }) => {
|
|
6
|
+
return (_jsx("div", { className: "social-preview instagram-preview", children: !hidePostPreview && (_jsxs("section", { className: "social-preview__section instagram-preview__section", children: [_jsx(SectionHeading, { level: headingLevel, children:
|
|
7
|
+
// translators: refers to a social post on Instagram
|
|
8
|
+
__('Your post', 'social-previews') }), _jsx("p", { className: "social-preview__section-desc", children: __('This is what your social post will look like on Instagram:', 'social-previews') }), _jsx(InstagramPostPreview, { ...props })] })) }));
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=previews.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"previews.js","sourceRoot":"","sources":["../../../src/instagram-preview/previews.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,CAAC,MAAM,iBAAiB,GAAuC,CAAE,EACtE,YAAY,EACZ,eAAe,EACf,eAAe,EACf,GAAG,KAAK,EACR,EAAG,EAAE;IACL,OAAO,CACN,cAAK,SAAS,EAAC,kCAAkC,YAC9C,CAAE,eAAe,IAAI,CACtB,mBAAS,SAAS,EAAC,oDAAoD,aACtE,KAAC,cAAc,IAAC,KAAK,EAAG,YAAY;oBAElC,oDAAoD;oBACpD,EAAE,CAAE,WAAW,EAAE,iBAAiB,CAAE,GAErB,EACjB,YAAG,SAAS,EAAC,8BAA8B,YACxC,EAAE,CACH,4DAA4D,EAC5D,iBAAiB,CACjB,GACE,EACJ,KAAC,oBAAoB,OAAM,KAAK,GAAK,IAC5B,CACV,GACI,CACN,CAAC;AACH,CAAC,CAAC"}
|