Added mdx embeds for CodePen, Gist, Tweet, YouTube, Repl, Glitch, CodeSandbox

pbteja1998 · pbteja1998 · commit c0db498701ac · 2021-02-28T10:44:49.000+05:30
diff --git a/package.json b/package.json
@@ -21,12 +21,15 @@
   "dependencies": {
     "@badrap/bar-of-progress": "0.1.2",
     "@headlessui/react": "0.3.1",
+    "@mdx-js/mdx": "1.6.22",
+    "@mdx-js/react": "1.6.22",
     "@tailwindcss/line-clamp": "0.2.0",
     "classnames": "2.2.6",
     "fauna-schema-migrate": "0.1.10",
     "faunadb": "4.1.0",
     "luxon": "1.26.0",
     "markdown-to-jsx": "7.1.1",
+    "mdx-embed": "0.0.19",
     "next": "10.0.7",
     "next-auth": "3.5.0",
     "next-themes": "0.0.11",
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
@@ -1,6 +1,41 @@
 import MarkdownOriginal, { MarkdownToJSX } from 'markdown-to-jsx'
 import React from 'react'
 import { A, Pre } from '@/components'
+import { CodePen, Gist, Tweet, YouTube, CodeSandbox } from 'mdx-embed'
+
+function Repl({ replLink }: { replLink: string }) {
+  return (
+    <>
+      <iframe
+        title={`repl-${replLink}`}
+        height="400px"
+        width="100%"
+        src={`https://repl.it/${replLink}?lite=true`}
+        scrolling="no"
+        frameBorder="no"
+        allowTransparency={true}
+        allowFullScreen={true}
+        sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"
+      />
+    </>
+  )
+}
+
+function Glitch({ glitchId }: { glitchId: string }) {
+  return (
+    <div
+      className="glitch-embed-wrap"
+      style={{ height: '420px', width: '100%' }}
+    >
+      <iframe
+        src={`https://glitch.com/embed/#!/embed/${glitchId}`}
+        title="probable-stellar-gull on Glitch"
+        allow="geolocation; microphone; camera; midi; vr; encrypted-media"
+        style={{ height: '100%', width: '100%', border: 0 }}
+      ></iframe>
+    </div>
+  )
+}
 
 export default function Markdown(props: {
   [key: string]: any
@@ -21,6 +56,27 @@ export default function Markdown(props: {
           pre: {
             component: Pre,
           },
+          CodePen: {
+            component: CodePen,
+          },
+          Gist: {
+            component: Gist,
+          },
+          Tweet: {
+            component: Tweet,
+          },
+          YouTube: {
+            component: YouTube,
+          },
+          CodeSandbox: {
+            component: CodeSandbox,
+          },
+          Repl: {
+            component: Repl,
+          },
+          Glitch: {
+            component: Glitch,
+          },
         },
       }}
     />
diff --git a/yarn.lock b/yarn.lock
