Add Slash Commands tutorial video to documentation (#301)

* feat: add YouTube video embeds and update tutorial collection

- Replace image with YouTube video embed in codebase indexing docs
- Add 3 new tutorial videos to tutorial-videos.json:
  - Codebase Indexing Setup Tutorial
  - Context Condensing Tutorial
  - Roo Marketplace

* Add Roo Code Todo Lists video to tutorial videos

* feat: Add tutorial videos dropdown in sidebar with direct YouTube links

- Convert tutorial videos to expandable category in sidebar
- Add direct YouTube links for each video
- Implement title truncation (40 chars) with tooltips for long titles
- Move external link icons to right side for consistent UI
- Improve overall UX by eliminating need to navigate to intermediate page

* Improve tutorial videos sidebar: shorten titles and move to Getting Started section

* Move Tutorial Videos to standalone section after Getting Started

* Add Slash Commands tutorial video to documentation

- Added 'Slash Commands' video (IOpmeUGLpg0) to tutorial-videos.json
- Embedded the video in docs/features/slash-commands.md page
- Video covers slash commands functionality in Roo Code

* Rename slash-commands.md to slash-commands.mdx

- Changed file extension from .md to .mdx to support JSX syntax
- Required for the embedded YouTube video iframe to work properly
- Docusaurus sidebar will automatically detect the .mdx file

Author: SannidhyaSah

docs/features/slash-commands.md docs/features/slash-commands.mdxdocs/features/slash-commands.md renamed to docs/features/slash-commands.mdx

@@ -15,6 +15,25 @@ image: /img/social-share.jpg
 
 Create custom slash commands to automate repetitive tasks and extend Roo Code's functionality with simple markdown files.
 
+<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+  <iframe
+    src="https://www.youtube.com/embed/IOpmeUGLpg0"
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    }}
+    frameBorder="0"
+    allow="autoplay; encrypted-media"
+    allowFullScreen
+    title="Slash Commands Tutorial Video"
+  ></iframe>
+</div>
+
+<br />
+
 :::tip Quick Start
 Type `/` in the chat to see all available commands, or create your own by adding a markdown file to `.roo/commands/` or `~/.roo/commands/`!
 :::

docs/tutorial-videos.json

@@ -39,6 +39,10 @@
     {
       "id": "6h5vB9PpoPk",
       "title": "Todo Lists"
+    },
+    {
+      "id": "IOpmeUGLpg0",
+      "title": "Slash Commands"
     }
   ]
 }