feat: embed tweets

package.json

@@ -17,6 +17,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.5.0",
     "react-scripts": "5.0.1",
+    "react-twitter-embed": "^4.0.4",
     "uuid": "^9.0.0"
   },
   "scripts": {

public/index.html

@@ -8,7 +8,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Fast nostr web ui" />
   <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; child-src 'none'; frame-src youtube.com www.youtube.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src wss://* 'self' https://*; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' https://static.cloudflareinsights.com;" />
+    content="default-src 'self'; child-src 'none'; frame-src youtube.com www.youtube.com https://platform.twitter.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src wss://* 'self' https://*; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' https://static.cloudflareinsights.com https://platform.twitter.com;" />
 
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/nostrich_512.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

src/Const.js

@@ -63,6 +63,11 @@ export const InvoiceRegex = /(lnbc\w+)/i;
  */
 export const YoutubeUrlRegex = /(?:https?:\/\/)?(?:www|m\.)?(?:youtu\.be\/|youtube\.com\/(?:shorts\/|embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})/;
 
+/**
+ * Tweet Regex
+ */
+export const TweetUrlRegex = /https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(?:es)?\/(\d+)/
+
 /**
  * Hashtag regex
  */

src/Text.js

@@ -1,7 +1,8 @@
 import { Link } from "react-router-dom";
+import { TwitterTweetEmbed } from "react-twitter-embed";
 
 import Invoice from "./element/Invoice";
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, HashtagRegex } from "./Const";
+import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "./Const";
 import { eventLink, hexToBech32, profileLink } from "./Util";
 import LazyImage from "./element/LazyImage";
 import Hashtag from "./element/Hashtag";
@@ -10,6 +11,7 @@ function transformHttpLink(a) {
     try {
         const url = new URL(a);
         const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
+        const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
         const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
         if (extension) {
             switch (extension) {
@@ -31,6 +33,12 @@ function transformHttpLink(a) {
                 default:
                     return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
             }
+        } else if (tweetId) {
+          return (
+            <div className="tweet">
+              <TwitterTweetEmbed tweetId={tweetId} />
+            </div>
+          )
         } else if (youtubeId) {
             return (
                 <>

src/index.css

@@ -299,3 +299,21 @@ body.scroll-lock {
 .root-tab.active {
     border-bottom: 3px solid var(--highlight);
 }
+
+.tweet {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tweet div {
+    width: 100%;
+}
+
+.tweet div .twitter-tweet {
+    margin: 0 auto;
+}
+
+.tweet div .twitter-tweet > iframe {
+    max-height: unset;
+}

yarn.lock

@@ -7329,6 +7329,13 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-twitter-embed@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
+  integrity sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==
+  dependencies:
+    scriptjs "^2.5.9"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -7679,6 +7686,11 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.0.0"
 
+scriptjs@^2.5.9:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"