feat: Add tutorial videos dropdown in sidebar with direct YouTube links (#265)

Author: SannidhyaSah

docs/tutorial-videos.json

@@ -2,43 +2,43 @@
   "videos": [
     {
       "id": "Mcq3r1EPZ-4",
-      "title": "Installing Roo Code in VS Code"
+      "title": "Installing Roo Code"
     },
     {
       "id": "eEJErgZBqLE",
-      "title": "Configuring Profiles | Detailed Tutorial"
+      "title": "Configuring Profiles"
     },
     {
       "id": "QDy3dm1xJ6Y",
-      "title": "Setting up MCP server in Roo"
+      "title": "Setting up MCP Servers"
     },
     {
       "id": "jW4_PPyRXCs",
-      "title": "Auto Approve in Roo Code Explained | Detailed Tutorial"
+      "title": "Auto Approve Feature"
     },
     {
       "id": "qgqceCuhlRA",
-      "title": "Custom Modes in Roo Code | Official Tutorial "
+      "title": "Custom Modes"
     },
     {
       "id": "Ho30nyY332E",
-      "title": "Checkpoints in Roo Code | Official Tutorial"
+      "title": "Checkpoints"
     },
     {
       "id": "r1bpod1VWhg",
-      "title": "Codebase Indexing Setup Tutorial"
+      "title": "Codebase Indexing"
     },
     {
       "id": "9k8OAXlszak",
-      "title": "Context Condensing Tutorial"
+      "title": "Context Condensing"
     },
     {
       "id": "WatooxMlW0U",
       "title": "Roo Marketplace"
     },
     {
       "id": "6h5vB9PpoPk",
-      "title": "Roo Code Todo Lists"
+      "title": "Todo Lists"
     }
   ]
 }

sidebars.ts

@@ -1,4 +1,11 @@
 import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+import tutorialVideos from './docs/tutorial-videos.json';
+
+// Helper function to truncate long titles
+function truncateTitle(title: string, maxLength: number = 40): string {
+  if (title.length <= maxLength) return title;
+  return title.substring(0, maxLength - 3) + '...';
+}
 
 const sidebars: SidebarsConfig = {
   tutorialSidebar: [
@@ -18,6 +25,23 @@ const sidebars: SidebarsConfig = {
         'tips-and-tricks',
       ],
     },
+    {
+      type: 'category',
+      label: 'Tutorial Videos',
+      items: [
+        {
+          type: 'doc',
+          id: 'tutorial-videos',
+          label: 'All Videos',
+        },
+        ...tutorialVideos.videos.map((video) => ({
+          type: 'link' as const,
+          label: truncateTitle(video.title),
+          href: `https://www.youtube.com/watch?v=${video.id}`,
+          description: video.title.length > 40 ? video.title : undefined,
+        })),
+      ],
+    },
     {
       type: 'category',
       label: 'Roo Code Cloud',
@@ -158,7 +182,6 @@ const sidebars: SidebarsConfig = {
         'faq',
       ],
     },
-    'tutorial-videos',
     {
       type: 'link',
       label: 'Contributing (GitHub)',

src/css/custom.css

@@ -2289,4 +2289,47 @@ html {
   .footer__links-wrapper {
     margin-top: 0;
   }
+}
+
+/* ============================================
+   CUSTOM TUTORIAL VIDEOS SIDEBAR STYLES
+   ============================================ */
+
+/* Move external link icons to the right for Tutorial Videos */
+.menu__list-item a[href^="https://www.youtube.com/watch"] {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding-right: 0.5rem !important;
+  width: 100% !important;
+}
+
+/* Ensure the link text takes up available space */
+.menu__list-item a[href^="https://www.youtube.com/watch"] .menu__link-text {
+  flex: 1 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  margin-right: 0.5rem !important;
+}
+
+/* Move the external link icon (svg) to the right */
+.menu__list-item a[href^="https://www.youtube.com/watch"] svg {
+  order: 2 !important;
+  margin-left: auto !important;
+  margin-right: 0 !important;
+  flex-shrink: 0 !important;
+  width: 13px !important;
+  height: 13px !important;
+  opacity: 0.6 !important;
+}
+
+/* Show icon more prominently on hover */
+.menu__list-item a[href^="https://www.youtube.com/watch"]:hover svg {
+  opacity: 1 !important;
+}
+
+/* Ensure consistent spacing for all tutorial video links */
+.menu__list-item:has(> a[href^="https://www.youtube.com/watch"]) {
+  margin-bottom: 0 !important;
 }