feat: replace twitter embed with official

AykutSarac · Oct 30, 2022 · fb6d8a5 · fb6d8a5
1 parent f8e5f93
commit fb6d8a5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "react-icons": "^4.6.0",
     "react-in-viewport": "^1.0.0-alpha.28",
     "react-linkify-it": "^1.0.7",
-    "react-twitter-embed": "^4.0.4",
     "react-zoom-pan-pinch": "^2.1.3",
     "reaflow": "^5.0.7",
     "styled-components": "^5.3.6",

diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx
@@ -9,14 +9,14 @@ import {
   HiOutlineSearchCircle,
 } from "react-icons/hi";
 import { SiVisualstudiocode } from "react-icons/si";
-import { TwitterTweetEmbed } from "react-twitter-embed";
 import { CarbonAds } from "src/components/CarbonAds";
 import { Producthunt } from "src/components/Producthunt";
 import { Sponsors } from "src/components/Sponsors";
 import { defaultJson } from "src/constants/data";
 import { GoalsModal } from "src/containers/Modals/GoalsModal";
 import pkg from "../../../package.json";
 import * as Styles from "./styles";
+import Script from "next/script";
 
 const Navbar = () => (
   <Styles.StyledNavbar>
@@ -143,13 +143,35 @@ const FeaturesSection = () => (
 
 const GitHubSection = () => (
   <Styles.StyledSection id="github" reverse>
-    <TwitterTweetEmbed
-      tweetId="1519363257794015233"
-      options={{
-        width: "600",
-        align: "center",
-      }}
-    />
+    <Styles.StyledTwitterQuote>
+      <blockquote
+        className="twitter-tweet"
+        data-lang="en"
+        data-dnt="true"
+        data-theme="light"
+      >
+        <p lang="en" dir="ltr">
+          Looking to understand or explore some JSON? Just paste or upload to
+          visualize it as a graph with{" "}
+          <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
+          <br />
+          Thanks to{" "}
+          <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
+            @aykutsarach
+          </a>
+          ! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
+        </p>
+        &mdash; GitHub (@github){" "}
+        <a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
+          April 27, 2022
+        </a>
+      </blockquote>{" "}
+      <Script
+        async
+        src="https://platform.twitter.com/widgets.js"
+        charSet="utf-8"
+      ></Script>
+    </Styles.StyledTwitterQuote>
     <Styles.StyledSectionArea>
       <Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
       <Styles.StyledMinorTitle>

diff --git a/src/containers/Home/styles.tsx b/src/containers/Home/styles.tsx
@@ -6,6 +6,45 @@ export const StyledButtonWrapper = styled.div`
   gap: 18px;
 `;
 
+export const StyledTwitterQuote = styled.div`
+  width: 100%;
+  height: 100%;
+
+  blockquote.twitter-tweet {
+    display: inline-block;
+    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 16px;
+    border-color: #eee #ddd #bbb;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    margin: 10px 5px;
+    padding: 0 16px 16px 16px;
+    max-width: 468px;
+  }
+
+  blockquote.twitter-tweet p {
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 20px;
+  }
+
+  blockquote.twitter-tweet a {
+    color: inherit;
+    font-weight: normal;
+    text-decoration: none;
+    outline: 0 none;
+  }
+
+  blockquote.twitter-tweet a:hover,
+  blockquote.twitter-tweet a:focus {
+    text-decoration: underline;
+  }
+`;
+
 export const StyledImageWrapper = styled.div`
   width: 100%;
   height: 100%;

diff --git a/yarn.lock b/yarn.lock
@@ -4145,13 +4145,6 @@ react-scrolllock@^5.0.1:
   dependencies:
     exenv "^1.2.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-use-gesture@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-8.0.1.tgz#4360c0f7c9e26baf9fbe58f63fc9de7ef699c17f"
@@ -4408,11 +4401,6 @@ schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-scriptjs@^2.5.9:
-  version "2.5.9"
-  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
-  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
-
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"