docs: embed youtube shorts (#1139)

Co-authored-by: Angie Jones <angiej@3d634b34e22046c0bc99c9b37c6eede5.local>

documentation/docs/tutorials/_template_.md

@@ -5,6 +5,9 @@ description: Add {name} MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+
+<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" />
 
 
 This tutorial covers how to add the [{name} MCP Server](/) as a Goose extension to enable file operations, repository management, search functionality, and more.

documentation/docs/tutorials/developer-mcp.md

@@ -5,13 +5,21 @@ description: Use Developer MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+
+<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/on_p-LeIrak" />
 
 The Developer extension allows Goose to automate developer-centric tasks such as file editing, shell command execution, and project setup.
 
-This tutorial will cover enabling and using the Developer MCP Server, which is a built-in Goose extension. In most cases, this extension is **already enabled by default when Goose is installed**.
+This tutorial will cover enabling and using the Developer MCP Server, which is a built-in Goose extension. 
+
 
 ## Configuration
 
+:::info
+The Developer extension is already enabled by default when Goose is installed.
+:::
+
 1. Ensure extension is enabled:
 
 <Tabs groupId="interface">

documentation/docs/tutorials/github-mcp.md

@@ -5,11 +5,12 @@ description: Add GitHub MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 
+<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/TbmQDv3SQOE" />
 
 This tutorial covers how to add the [GitHub MCP Server](https://github.com/modelcontextprotocol/servers/tree/main/src/github) as a Goose extension to enable file operations, repository management, search functionality, and more.
 
-
 :::tip TLDR
 
 **Command**

documentation/docs/tutorials/jetbrains-mcp.md

@@ -5,6 +5,9 @@ description: Add JetBrains MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+
+<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/1fP5elf9qQM" />
 
 The JetBrains extension is designed to work within your IDE. Goose can accomplish a lot of the developer-centric tasks with the Developer extension that is enabled on install, however, the JetBrains extension provides a more integrated and project-aware way to work with code.
 

documentation/src/components/YouTubeShortEmbed.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Admonition from '@theme/Admonition';
+
+const YouTubeShortEmbed = ({ videoUrl }) => (
+  <div>
+  <Admonition type="info" icon="🎥" title="Plug & Play" className='alert--video'>
+    <details>
+      <summary>Watch the demo</summary>
+      <div style={{ textAlign: 'center', margin: '20px 0' }}>
+          <iframe
+          width="100%"
+          height="540"
+          src={videoUrl}
+          title="YouTube Short"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          ></iframe>
+      </div>
+    </details>
+  </Admonition>
+  <hr></hr>
+</div>
+);
+
+export default YouTubeShortEmbed;

documentation/src/css/custom.css

@@ -113,6 +113,11 @@
   --ifm-footer-link-color: var(--text-standard);
   --ifm-navbar-link-hover-color: var(--text-subtle);
   --ifm-link-color: var(--green-for-lightbg);
+
+  /* video adnomition */
+  --ifm-color-video-alert-contrast-background: #edfbf8;
+  --ifm-color-video-alert-contrast-foreground: #01523e;
+  --ifm-color-video-alert-border: #25c2a0;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -153,6 +158,12 @@
 
   --button-primary-background: var(--constant-white);
   --ifm-link-color: var(--green-for-darkbg);
+
+  /* video adnomition */
+  --ifm-color-video-alert-contrast-background: #336e62;
+  --ifm-color-video-alert-contrast-foreground: rgb(216 251 216);
+  --ifm-color-video-alert-border: #99d5c5
+  ;
 }
 
 /* overrides */
@@ -242,3 +253,10 @@ html[data-theme="dark"] .hide-in-dark {
 html[data-theme="light"] .hide-in-light {
   opacity: 0;
 }
+
+.alert--video {
+  --ifm-alert-background-color: var(--ifm-color-video-alert-contrast-background);
+  --ifm-alert-background-color-highlight: rgba(84, 199, 236, 0.15);
+  --ifm-alert-foreground-color: var(--ifm-color-video-alert-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-video-alert-border);
+}