create youtube embed component

blog/2023-08-09-oauth-plugin/index.mdx

@@ -7,6 +7,8 @@ image: "./oauth-plugin-social-card.png"
 tags: [chatgpt, plugins, chatgpt plugins, oauth, security, architecture]
 ---
 
+import YouTubeEmbed from "@site/src/components/YouTubeEmbed";
+
 ## Introduction
 
 By now, everyone has played with a large language model like ChatGPT, at least a user. You've probably gone through those cycles of copying and pasting your email drafts, code snippets, or posts. There's a lot of power in giving large language models more context. The biggest way to do this is to provide access to documents directly. As a developer, you can enable this experience by writing a ChatGPT Plugin that uses OAuth.
@@ -23,6 +25,8 @@ By now, everyone has played with a large language model like ChatGPT, at least a
 
 OAuth is a mechanism used to enable Single Sign-On (SSO) across applications. When you install the Noteable ChatGPT plugin, you can choose to login or sign up (it's free!) to Noteable using an existing Google, Github, or LinkedIn account. In this post, the Noteable engineering team wants to share some of the low-level details of how OAuth works, and how it's implemented in Noteable. We hope this helps other plugin developers and the community at large.
 
+<YouTubeEmbed videoId="-J1nZ4eJ1x0" title="OAuth for ChatGPT Plugins" />
+
 ## Why OAuth?
 
 Let’s start with why a plugin would use OAuth, compared to “no auth” or “service level auth”. Simply put, if your plugin or downstream API needs to know about a logged in user, use OAuth. For instance, if you were writing a wikipedia-reading plugin you could skip OAuth because you don’t need to have a logged in user to read Wiki. If the large language model (LLM) is creating Notebooks and running code via the Noteable plugin, which goes through role-based access control (RBAC) permission checks and user-context-aware features, we need to know what user account the request is for.
@@ -106,6 +110,6 @@ We mentioned at the top of the post that you cannot do OAuth testing in localhos
 
 ## Final Thoughts
 
-Integrating OAuth with ChatGPT plugins opens up a world of personalized possibilities, linking the reasoning capabilities of Large Language Models with personalized content. If you're a developer inspired by the idea of creating powerful, user-centric plugins, now's the time to get started. Dive into plugins, explore [OpenAI's documentation on plugins](https://platform.openai.com/docs/plugins/introduction), and make the most of OAuth to unlock the potential of personalized interaction. Join us on this journey and let's redefine what plugins can do!
+Integrating OAuth with ChatGPT plugins opens up a world of personalized possibilities, linking the reasoning capabilities of Large Language Models with personalized content. If you're a developer inspired by the idea of creating powerful, user-centric plugins, now's the time to get started. Dive into plugins, explore [OpenAI's documentation on plugins](https://platform.openai.com/docs/plugins/introduction), and make the most of OAuth to unlock the potential of personalized interaction. Join us on this journey and let's push what ChatGPT + Plugins can do!
 
 <!-- Want to build a your plugin to the next level? Check out our developer resources and join the Noteable community today. Together, we'll build the future of interactive computing. -->

src/components/YouTubeEmbed.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import styles from "./styles.module.css";
+
+type Props = {
+  videoId: string;
+  title: string;
+};
+
+const defaultProps = {
+  videoId: "dQw4w9WgXcQ",
+  title: "YouTube Video",
+};
+
+const YouTubeEmbed = ({ videoId, title }: Props = defaultProps) => (
+  <div className={styles.embed}>
+    <iframe
+      title={title}
+      src={`https://www.youtube.com/embed/${videoId}`}
+      frameBorder="0"
+      allow="autoplay; encrypted-media"
+      allowFullScreen
+    />
+  </div>
+);
+
+export default YouTubeEmbed;

src/components/styles.module.css

@@ -0,0 +1,18 @@
+.embed {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+}
+
+.embed iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}