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 (
+
+
+
+ );
+}
From d767bd019c1682f43ba6aae7f39092f6f9f94f9f Mon Sep 17 00:00:00 2001
From: moloch-- <875022+moloch--@users.noreply.github.com>
Date: Fri, 3 May 2024 19:13:02 -0700
Subject: [PATCH 2/2] Add youtube embed component
---
docs/sliver-docs/components/youtube.tsx | 4 +---
docs/sliver-docs/pages/_document.tsx | 3 +--
docs/sliver-docs/pages/docs/md/Community Guides.md | 8 ++++----
3 files changed, 6 insertions(+), 9 deletions(-)
diff --git a/docs/sliver-docs/components/youtube.tsx b/docs/sliver-docs/components/youtube.tsx
index 0bb4a02e1d..61919c11be 100644
--- a/docs/sliver-docs/components/youtube.tsx
+++ b/docs/sliver-docs/components/youtube.tsx
@@ -13,9 +13,7 @@ export default function Youtube(props: YoutubeProps) {
diff --git a/docs/sliver-docs/pages/_document.tsx b/docs/sliver-docs/pages/_document.tsx
index f4066f7c83..22f1f8f946 100644
--- a/docs/sliver-docs/pages/_document.tsx
+++ b/docs/sliver-docs/pages/_document.tsx
@@ -2,7 +2,7 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
import React from "react";
// This generates the https: and wss: "connect-src" directives based on the above backends list so its a little easier to edit.
-const CSP = `default-src 'none'; script-src 'self' 'unsafe-eval'; img-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self'`;
+const CSP = `default-src 'none'; script-src 'self' 'unsafe-eval'; img-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; frame-src https://youtu.be; connect-src 'self'`;
class MyDocument extends Document {
static async getInitialProps(ctx: any) {
@@ -17,7 +17,6 @@ class MyDocument extends Document {
return (
- Sliver Docs
diff --git a/docs/sliver-docs/pages/docs/md/Community Guides.md b/docs/sliver-docs/pages/docs/md/Community Guides.md
index 926f642f43..bc964e9ac7 100644
--- a/docs/sliver-docs/pages/docs/md/Community Guides.md
+++ b/docs/sliver-docs/pages/docs/md/Community Guides.md
@@ -7,10 +7,10 @@
### Videos
- https://youtu.be/3R6WKUgN0K4?t=456
-- https://www.youtube.com/watch?v=QO_1UMaiWHk
-- https://www.youtube.com/watch?v=izMMmOaLn9g
-- https://www.youtube.com/watch?v=qIbrozlf2wM
-- https://www.youtube.com/watch?v=CKfjLnEMfvI
+- https://youtu.be/watch?v=QO_1UMaiWHk
+- https://youtu.be/watch?v=izMMmOaLn9g
+- https://youtu.be/watch?v=qIbrozlf2wM
+- https://youtu.be/watch?v=CKfjLnEMfvI
### Blogs