Add iframe and fix anchor link

bluprince13 · Jul 21, 2024 · 6fac1e6 · 6fac1e6 · vercel · Jul 21, 2024
1 parent 257a659
commit 6fac1e6
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 13 deletions.
diff --git a/src/components/Iframe.tsx b/src/components/Iframe.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+
+interface IframeProps {
+    src: string
+}
+
+export const Iframe: React.FC<IframeProps> = ({
+    src
+}) => (
+    <div
+        style={{
+            position: 'relative',
+            overflow: 'hidden',
+            width: '100%',
+            paddingTop: '56.25%'
+        }}
+    >
+        <iframe
+            style={{
+                border: 0,
+                position: 'absolute',
+                top: '0',
+                bottom: '0',
+                left: '0',
+                right: '0',
+                width: '100%',
+                height: '100%'
+            }}
+            src={src}
+        ></iframe>
+    </div>
+)
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
@@ -33,6 +33,7 @@ import { ComparisonTable } from '@Components/ComparisonTable'
 import { Typography } from '@mui/material'
 import 'prism-theme-night-owl'
 import Link from 'next/link'
+import { Iframe } from '@Components/Iframe'
 
 const components = {
     Figure,
@@ -43,7 +44,8 @@ const components = {
     ComparisonTable,
     Typography,
     Link,
-    mermaid: Mermaid
+    mermaid: Mermaid,
+    Iframe
 }
 
 interface Props {
@@ -101,28 +103,27 @@ export const getStaticProps: GetStaticProps<{
             ],
             rehypePlugins: [
                 slug,
-                [
-                    rehypeCitation,
-                    {
-                        bibliography: data.bibliography,
-                        linkCitations: true,
-                        csl: 'vancouver'
-                    }
-                ],
                 [
                     link,
                     {
-                        behaviour: 'append',
-                        properties: { ariaHidden: 'false', tabIndex: -1 },
+                        behavior: 'append',
+                        properties: { ariaHidden: 'false', tabIndex: 0 },
                         content: {
                             type: 'element',
                             tagName: 'span',
                             properties: {
                                 className: ['anchor', 'fas', 'fa-link']
-                            },
-                            children: []
+                            }
                         }
                     }
+                ],
+                [
+                    rehypeCitation,
+                    {
+                        bibliography: data.bibliography,
+                        linkCitations: true,
+                        csl: 'vancouver'
+                    }
                 ]
             ]
         },