Wrap details tag around embeds

pbteja1998 · pbteja1998 · commit 3231822eeb87 · 2021-02-28T17:06:13.000+05:30
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
@@ -6,33 +6,51 @@ import { CodePen, Gist, Tweet, YouTube, CodeSandbox } from 'mdx-embed'
 function Repl({ id }: { id: string }) {
   return (
     <>
-      <iframe
-        title={`repl-${id}`}
-        height="400px"
-        width="100%"
-        src={`https://repl.it/${id}?lite=true`}
-        scrolling="no"
-        frameBorder="no"
-        allowFullScreen={true}
-        sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"
-      />
+      <details>
+        <summary>Show Repl</summary>
+        <iframe
+          title={`repl-${id}`}
+          height="400px"
+          width="100%"
+          src={`https://repl.it/${id}?lite=true`}
+          scrolling="no"
+          frameBorder="no"
+          allowFullScreen={true}
+          sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"
+        />
+      </details>
     </>
   )
 }
 
 function Glitch({ id }: { id: string }) {
   return (
-    <div
-      className="glitch-embed-wrap"
-      style={{ height: '420px', width: '100%' }}
-    >
-      <iframe
-        src={`https://glitch.com/embed/#!/embed/${id}`}
-        title="probable-stellar-gull on Glitch"
-        allow="geolocation; microphone; camera; midi; vr; encrypted-media"
-        style={{ height: '100%', width: '100%', border: 0 }}
-      ></iframe>
-    </div>
+    <details>
+      <summary>Show Glitch</summary>
+      <div
+        className="glitch-embed-wrap"
+        style={{ height: '420px', width: '100%' }}
+      >
+        <iframe
+          src={`https://glitch.com/embed/#!/embed/${id}`}
+          title="probable-stellar-gull on Glitch"
+          allow="geolocation; microphone; camera; midi; vr; encrypted-media"
+          style={{ height: '100%', width: '100%', border: 0 }}
+        ></iframe>
+      </div>
+    </details>
+  )
+}
+
+function Video({ id }: { id: string }) {
+  return (
+    <details>
+      <summary>Show Video</summary>
+      <video controls>
+        <source src={id} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </details>
   )
 }
 
@@ -56,22 +74,48 @@ export default function Markdown(props: {
             component: Pre,
           },
           CodePen: {
-            component: ({ id }: { id: string }) => <CodePen codePenId={id} />,
+            component: ({ id }: { id: string }) => (
+              <details>
+                <summary>Show CodePen</summary>
+                <CodePen codePenId={id} />
+              </details>
+            ),
           },
           Gist: {
-            component: ({ id }: { id: string }) => <Gist gistLink={id} />,
+            component: ({ id }: { id: string }) => (
+              <details>
+                <summary>Show GitHub Gist</summary>
+                <Gist gistLink={id} />
+              </details>
+            ),
           },
           Tweet: {
-            component: ({ id }: { id: string }) => <Tweet tweetLink={id} />,
+            component: ({ id }: { id: string }) => (
+              <details>
+                <summary>Show Tweet</summary>
+                <Tweet tweetLink={id} />
+              </details>
+            ),
           },
           YouTube: {
-            component: ({ id }: { id: string }) => <YouTube youTubeId={id} />,
+            component: ({ id }: { id: string }) => (
+              <details>
+                <summary>Show YouTube video</summary>
+                <YouTube youTubeId={id} />
+              </details>
+            ),
           },
           CodeSandbox: {
             component: ({ id }: { id: string }) => (
-              <CodeSandbox codeSandboxId={id} />
+              <details>
+                <summary>Show CodeSandbox</summary>
+                <CodeSandbox codeSandboxId={id} />
+              </details>
             ),
           },
+          Video: {
+            component: Video,
+          },
           Repl: {
             component: Repl,
           },
