From 977639ccb90a9a1422588039ac5942e2bb9e58d2 Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Thu, 20 Jan 2022 14:22:10 -0600
Subject: [PATCH] twitter embed

---
 components/item-full.js | 13 +++++++++++++
 package-lock.json       | 15 +++++++++++++++
 package.json            |  1 +
 styles/globals.scss     | 10 ++++++++++
 4 files changed, 39 insertions(+)

diff --git a/components/item-full.js b/components/item-full.js
index 7d6a29ec..7c5d3e31 100644
--- a/components/item-full.js
+++ b/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>
   )
diff --git a/package-lock.json b/package-lock.json
index b69993fa..e99c888a 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index feb2fa13..76a20860 100644
--- a/package.json
+++ b/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",
diff --git a/styles/globals.scss b/styles/globals.scss
index 419dea8d..be551486 100644
--- a/styles/globals.scss
+++ b/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;
 }