twitter embed

components/item-full.js

@@ -7,6 +7,8 @@ import styles from '../styles/item.module.css'
 import { NOFOLLOW_LIMIT } from '../lib/constants'
 import { useMe } from './me'
 import { Button } from 'react-bootstrap'
+import TweetEmbed from 'react-tweet-embed'
+import useDarkMode from 'use-dark-mode'
 
 function BioItem ({ item, handleClick }) {
   const me = useMe()
@@ -30,10 +32,21 @@ function BioItem ({ item, handleClick }) {
   )
 }
 
+function ItemEmbed ({ item }) {
+  const darkMode = useDarkMode()
+  const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)$/)
+  if (twitter?.groups?.id) {
+    return <TweetEmbed id={twitter.groups.id} options={{ width: '100%', theme: darkMode.value ? 'dark' : 'light' }} />
+  }
+
+  return null
+}
+
 function TopLevelItem ({ item }) {
   return (
     <Item item={item}>
       {item.text && <ItemText item={item} />}
+      {item.url && <ItemEmbed item={item} />}
       <Reply parentId={item.id} replyOpen />
     </Item>
   )

package-lock.json

@@ -41,6 +41,7 @@
         "react-markdown": "^6.0.2",
         "react-syntax-highlighter": "^15.4.3",
         "react-textarea-autosize": "^8.3.3",
+        "react-tweet-embed": "^1.3.1",
         "remark-gfm": "^1.0.0",
         "remove-markdown": "^0.3.0",
         "sass": "^1.32.8",
@@ -8917,6 +8918,14 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-tweet-embed": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-tweet-embed/-/react-tweet-embed-1.3.1.tgz",
+      "integrity": "sha512-qVAlb3/d3YhYHHB6Y3J/8OCY+a5KOzCnY/qUaBnK8qtEKXK9qWePlpGevDQgryWuKxggwxW1UHPLZ3VpPc7XUQ==",
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -18741,6 +18750,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-tweet-embed": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-tweet-embed/-/react-tweet-embed-1.3.1.tgz",
+      "integrity": "sha512-qVAlb3/d3YhYHHB6Y3J/8OCY+a5KOzCnY/qUaBnK8qtEKXK9qWePlpGevDQgryWuKxggwxW1UHPLZ3VpPc7XUQ==",
+      "requires": {}
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",

package.json

@@ -42,6 +42,7 @@
     "react-markdown": "^6.0.2",
     "react-syntax-highlighter": "^15.4.3",
     "react-textarea-autosize": "^8.3.3",
+    "react-tweet-embed": "^1.3.1",
     "remark-gfm": "^1.0.0",
     "remove-markdown": "^0.3.0",
     "sass": "^1.32.8",

styles/globals.scss

@@ -69,6 +69,16 @@ $tooltip-bg: #5c8001;
   line-height: 1.2rem;
 }
 
+.twitter-tweet {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-right: 12px;
+}
+
+.twitter-tweet iframe {
+  width: 100% !important;
+}
+
 .custom-checkbox.custom-control-inline {
   margin-right: .5rem;
 }