📚 docs: add Youtube embed component (#47467)

airbytehq · Nov 4, 2024 · b47a9ec · b47a9ec
1 parent e1bf707
commit b47a9ec
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/docusaurus/package.json b/docusaurus/package.json
@@ -125,6 +125,7 @@
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-lite-youtube-embed": "^2.4.0",
     "react-markdown": "^8.0.7",
     "react-router": "5.3.3",
     "sanitize-html": "^2.12.1",

diff --git a/docusaurus/pnpm-lock.yaml b/docusaurus/pnpm-lock.yaml
diff --git a/docusaurus/src/components/YoutubeEmbed.jsx b/docusaurus/src/components/YoutubeEmbed.jsx
@@ -0,0 +1,12 @@
+import LiteYouTubeEmbed from "react-lite-youtube-embed";
+import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
+
+export const YoutubeEmbed = ({ id, title }) => {
+  return (
+    <LiteYouTubeEmbed
+      id={id}
+      title={title}
+      poster="maxresdefault"
+    />
+  );
+};
diff --git a/docusaurus/src/theme/MDXComponents/index.js b/docusaurus/src/theme/MDXComponents/index.js
@@ -12,6 +12,8 @@ import { CardWithIcon } from "../../components/Card/Card";
 import { Details } from "../../components/Details";
 import { EntityRelationshipDiagram } from "../../components/EntityRelationshipDiagram";
 import { Grid } from "../../components/Grid/Grid";
+import { YoutubeEmbed } from "../../components/YoutubeEmbed";
+
 export default {
   // Re-use the default mapping
   ...MDXComponents,
@@ -27,4 +29,5 @@ export default {
   EntityRelationshipDiagram,
   CardWithIcon,
   Grid,
+  YoutubeEmbed,
 };