fix cls of twitter embed

components/item-full.js

@@ -7,9 +7,10 @@ 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 { TwitterTweetEmbed } from 'react-twitter-embed'
 import YouTube from 'react-youtube'
 import useDarkMode from 'use-dark-mode'
+import { useEffect, useRef, useState } from 'react'
 
 function BioItem ({ item, handleClick }) {
   const me = useMe()
@@ -33,13 +34,50 @@ function BioItem ({ item, handleClick }) {
   )
 }
 
+function TweetSkeleton () {
+  return (
+    <div className={styles.tweetsSkeleton}>
+      <div className={styles.tweetSkeleton}>
+        <div className={`${styles.img} clouds`} />
+        <div className={styles.content1}>
+          <div className={`${styles.line} clouds`} />
+          <div className={`${styles.line} clouds`} />
+          <div className={`${styles.line} clouds`} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function ItemEmbed ({ item }) {
   const darkMode = useDarkMode()
+  const [overflowing, setOverflowing] = useState(false)
+  const [show, setShow] = useState(false)
+  const containerRef = useRef(null)
+
+  const checkOverflow = () => {
+    const cont = containerRef.current
+    const over = cont && (cont.offsetHeight < cont.scrollHeight || cont.offsetWidth < cont.scrollWidth)
+
+    if (over) {
+      setOverflowing(true)
+      return
+    }
+
+    setOverflowing(false)
+  }
+
+  useEffect(checkOverflow, [])
+
   const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/)
   if (twitter?.groups?.id) {
     return (
-      <div className='mt-1'>
+      <div className={`${styles.twitterContainer} ${show ? '' : styles.twitterContained}`} ref={containerRef}>
-        <TweetEmbed id={twitter.groups.id} options={{ width: '100%', theme: darkMode.value ? 'dark' : 'light' }} />
+        <TwitterTweetEmbed tweetId={twitter.groups.id} options={{ width: '550px', theme: darkMode.value ? 'dark' : 'light' }} placeholder={<TweetSkeleton />} onLoad={checkOverflow} />
+        {overflowing && !show &&
+          <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
+            show full tweet
+          </Button>}
       </div>
     )
   }

package-lock.json

@@ -45,7 +45,7 @@
         "react-string-replace": "^0.4.4",
         "react-syntax-highlighter": "^15.4.3",
         "react-textarea-autosize": "^8.3.3",
-        "react-tweet-embed": "^1.3.1",
+        "react-twitter-embed": "^4.0.4",
         "react-youtube": "^7.14.0",
         "remark-directive": "^2.0.1",
         "remark-gfm": "^3.0.1",
@@ -9878,12 +9878,19 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/react-tweet-embed": {
+    "node_modules/react-twitter-embed": {
-      "version": "1.3.1",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/react-tweet-embed/-/react-tweet-embed-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz",
-      "integrity": "sha512-qVAlb3/d3YhYHHB6Y3J/8OCY+a5KOzCnY/qUaBnK8qtEKXK9qWePlpGevDQgryWuKxggwxW1UHPLZ3VpPc7XUQ==",
+      "integrity": "sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==",
+      "dependencies": {
+        "scriptjs": "^2.5.9"
+      },
+      "engines": {
+        "node": ">=10"
+      },
       "peerDependencies": {
-        "react": ">=15"
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/react-youtube": {
@@ -10267,6 +10274,11 @@
         "object-assign": "^4.1.1"
       }
     },
+    "node_modules/scriptjs": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
+      "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
+    },
     "node_modules/secp256k1": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-4.0.2.tgz",
@@ -20442,11 +20454,13 @@
         "prop-types": "^15.6.2"
       }
     },
-    "react-tweet-embed": {
+    "react-twitter-embed": {
-      "version": "1.3.1",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/react-tweet-embed/-/react-tweet-embed-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz",
-      "integrity": "sha512-qVAlb3/d3YhYHHB6Y3J/8OCY+a5KOzCnY/qUaBnK8qtEKXK9qWePlpGevDQgryWuKxggwxW1UHPLZ3VpPc7XUQ==",
+      "integrity": "sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==",
-      "requires": {}
+      "requires": {
+        "scriptjs": "^2.5.9"
+      }
     },
     "react-youtube": {
       "version": "7.14.0",
@@ -20734,6 +20748,11 @@
         "object-assign": "^4.1.1"
       }
     },
+    "scriptjs": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
+      "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
+    },
     "secp256k1": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-4.0.2.tgz",

package.json

@@ -46,7 +46,7 @@
     "react-string-replace": "^0.4.4",
     "react-syntax-highlighter": "^15.4.3",
     "react-textarea-autosize": "^8.3.3",
-    "react-tweet-embed": "^1.3.1",
+    "react-twitter-embed": "^4.0.4",
     "react-youtube": "^7.14.0",
     "remark-directive": "^2.0.1",
     "remark-gfm": "^3.0.1",

styles/item.module.css

@@ -25,3 +25,55 @@
     top: 0;
     left: 0;
 }
+
+.twitterContainer {
+    margin-top: .25rem;
+    position: relative;
+}
+
+.twitterContained {
+    height: 200px;
+    overflow: hidden;
+}
+
+.twitterShowFull {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-radius: 0;
+}
+
+.tweetsSkeleton {
+    display: flex;
+    flex-flow: row wrap;
+    max-width: 550px;
+    width: 100%;
+    padding-right: 12px;
+}
+.tweetSkeleton {
+    width: 100%;
+}
+.tweetSkeleton {
+    border: 0.05rem solid var(--theme-borderColor);
+    border-radius: 12px;
+    height: 200px;
+    padding: 1.5rem;
+}
+.tweetSkeleton .img {
+    height: 48px;
+    width: 48px;
+    border-radius: 50%;
+}
+.tweetSkeleton .content1, .tweetSkeleton .content2 {
+    height: 50%;
+    margin-top: 1rem;
+}
+.tweetSkeleton .line {
+    height: 25%;
+    margin: 0.5rem 0;
+    width: 100%;
+    border-radius: .4rem;
+}
+.tweetSkeleton .line:last-child {
+    width: 75%;
+}