From 590f9c3f96435af1c346a544881af08de34c19ae Mon Sep 17 00:00:00 2001 From: moloch-- <875022+moloch--@users.noreply.github.com> Date: Fri, 3 May 2024 18:59:42 -0700 Subject: [PATCH 1/2] Add youtube embed component --- docs/sliver-docs/components/markdown.tsx | 6 ++++++ docs/sliver-docs/components/youtube.tsx | 24 ++++++++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 docs/sliver-docs/components/youtube.tsx diff --git a/docs/sliver-docs/components/markdown.tsx b/docs/sliver-docs/components/markdown.tsx index e4f34be8c2..2c24b8131e 100644 --- a/docs/sliver-docs/components/markdown.tsx +++ b/docs/sliver-docs/components/markdown.tsx @@ -7,6 +7,7 @@ import { useRouter } from "next/router"; import Markdown from "react-markdown"; import remarkGfm from "remark-gfm"; import AsciinemaPlayer from "./asciinema"; +import Youtube from "./youtube"; export type MarkdownProps = { key?: string; @@ -131,6 +132,11 @@ const MarkdownViewer = (props: MarkdownProps) => { ); } + if (lang === "youtube") { + const embedId = (children as string) || ""; + return ; + } + if (lang === "asciinema") { const asciiCast: MarkdownAsciiCast = JSON.parse( children as string diff --git a/docs/sliver-docs/components/youtube.tsx b/docs/sliver-docs/components/youtube.tsx new file mode 100644 index 0000000000..0bb4a02e1d --- /dev/null +++ b/docs/sliver-docs/components/youtube.tsx @@ -0,0 +1,24 @@ +export type YoutubeProps = { + className?: string; + + width?: number; + height?: number; + + embedId: string; +}; + +export default function Youtube(props: YoutubeProps) { + return ( +
+