[site/mdx][s]: add twitter embed component to parse twitter links in markdown

site/components/Link.js

@@ -1,31 +1,30 @@
-import Link from "next/link";
 import ReactPlayer from "react-player";
-
-const videoLinks = [
-  "youtube.com",
-  "dailymotion.com",
-  "vimeo.com",
-  "soundcloud.com",
-  "facebook.com/watch",
-  "twitch.com",
-];
+import TwitterEmbed from "./TwitterEmbed";
+import { YOUTUBE_REGEX, TWITTER_REGEX } from "../lib/constants";
 
 export const Paragraph = (props) => {
   if (
     typeof props.children == "object" &&
     props.children.props &&
-    props.children.props.href &&
-    videoLinks.some((str) => props.children.props.href.includes(str))
-  )
-    return (
-      <div className="relative pt-[56.25%]" {...props}>
-        <ReactPlayer
-          className="absolute top-0 left-0"
-          width="100%"
-          height="100%"
-          url={props.children.props.href}
-        />
-      </div>
-    );
+    props.children.props.href
+  ) {
+    if (YOUTUBE_REGEX.test(props.children.props.href)) {
+      return (
+        <div className="relative pt-[56.25%] my-8" {...props}>
+          <ReactPlayer
+            className="absolute top-0 left-0"
+            width="100%"
+            height="100%"
+            url={props.children.props.href}
+          />
+        </div>
+      );
+    }
+
+    if (TWITTER_REGEX.test(props.children.props.href)) {
+      return <TwitterEmbed url={props.children.props.href} {...props} />;
+    }
+  }
+
   return <p {...props} />;
 };