Merge pull request #1667 from BishopFox/docs/community-guides

Docs/community guides
BishopFox · May 4, 2024 · 335797e · 335797e
2 parents cff899a + d767bd0
commit 335797e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git 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 <Youtube embedId={embedId.trim()} />;
+            }
+
             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
@@ -0,0 +1,22 @@
+export type YoutubeProps = {
+  className?: string;
+
+  width?: number;
+  height?: number;
+
+  embedId: string;
+};
+
+export default function Youtube(props: YoutubeProps) {
+  return (
+    <div className={props.className}>
+      <iframe
+        width={`${props.width ? props.width : 640}`}
+        height={`${props.height ? props.height : 360}`}
+        src={`https://youtu.be/embed/${props.embedId}`}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </div>
+  );
+}
diff --git 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 (
       <Html lang="en">
         <Head>
-          <title>Sliver Docs</title>
           <meta httpEquiv="Content-Security-Policy" content={CSP} />
         </Head>
         <body>

diff --git 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