Add a section for tutorial videos (#35)

Author: mrubens

docs/tutorial-videos.json

@@ -0,0 +1,44 @@
+{
+  "videos": [
+    {
+      "id": "PE-0P6SAZYc",
+      "title": "RooCode v3.3 UPDATE: Fully FREE Autonomous AI Coding Agent! (FREE API, Checkpoints, Markdown)"
+    },
+    {
+      "id": "rg_g3BPv4uQ",
+      "title": "5 Must-Know Roo Code Features That Make It Better Than Cline (Save 50% on Tokens!)"
+    },
+    {
+      "id": "9p_1OISs7o0",
+      "title": "RooCode (Upgraded): I'm FINALLY SWITCHING AWAY from CLINE! This is the MOST CUSTOMIZABLE AI Coder!"
+    },
+    {
+      "id": "2Frayo_8ovQ",
+      "title": "Deepseek-R1 + RooCode: BEST AI Coding Agent! Develop a Full-stack App Without Writing ANY Code!"
+    },
+    {
+      "id": "KsUjPlRPsPc",
+      "title": "Roo-Cline 3.1: Code Faster Than Ever with This Game-Changing Update"
+    },
+    {
+      "id": "r-cbg5ON60Q",
+      "title": "Setting Up RooCline With LMStudio and Ollama Phi4"
+    },
+    {
+      "id": "V5ZdznleO6s",
+      "title": "Build a Web App with Roo Cline & Claude 3.5 Sonnet"
+    },
+    {
+      "id": "IVTcZYg_ylI",
+      "title": "RooCline: The Cline Fork That's Faster, Smarter, and Better!"
+    },
+    {
+      "id": "a5mCvQoDB2g",
+      "title": "FREE AI Coder Beats Cursor & Bolt.New?"
+    },
+    {
+      "id": "9I_xjb30WHg",
+      "title": "Roo-Cline is Cline but Better | AI in Large Codebases"
+    }
+  ]
+}

docs/tutorial-videos.mdx

@@ -0,0 +1,7 @@
+import VideoGrid from '@site/src/components/VideoGrid';
+
+# Tutorial Videos
+
+Learn how to build powerful applications and enhance your development workflow with these hands-on Roo Code tutorials. Big thanks to all of the creators!
+
+<VideoGrid />

sidebars.ts

@@ -43,6 +43,7 @@ const sidebars: SidebarsConfig = {
       ],
     },
     'faq',
+    'tutorial-videos',
   ],
 };
 

src/components/VideoGrid.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import videos from '@site/docs/tutorial-videos.json';
+
+interface Video {
+  id: string;
+  title: string;
+}
+
+export default function VideoGrid(): JSX.Element {
+  return (
+    <div className="video-grid">
+      {videos.videos.map((video: Video) => (
+        <div key={video.id} className="video-item">
+          <div
+            className="video-container"
+            onClick={(e) => {
+              const target = e.currentTarget;
+              target.innerHTML = `<iframe src='https://www.youtube.com/embed/${video.id}?autoplay=1' title='${video.title}' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowFullScreen></iframe>`;
+            }}
+          >
+            <img
+              src={`https://img.youtube.com/vi/${video.id}/maxresdefault.jpg`}
+              alt={video.title}
+              style={{
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                cursor: 'pointer',
+              }}
+            />
+            <div
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%,-50%)',
+                width: '68px',
+                height: '48px',
+                background: 'rgba(0,0,0,0.7)',
+                borderRadius: '12px',
+              }}
+            >
+              <div
+                style={{
+                  borderStyle: 'solid',
+                  borderWidth: '12px 0 12px 20px',
+                  borderColor: 'transparent transparent transparent white',
+                  position: 'absolute',
+                  top: '12px',
+                  left: '26px',
+                }}
+              />
+            </div>
+          </div>
+          <div className="video-info">
+            <span className="video-title">{video.title}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/css/custom.css

@@ -40,3 +40,43 @@
 .footer__link-item[href="/tutorial"] {
   display: none;
 }
+
+/* Video Grid Styles */
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+  border-radius: var(--ifm-card-border-radius);
+  overflow: hidden;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.video-info {
+  margin-top: 0.75rem;
+}
+
+.video-title {
+  font-weight: 500;
+  color: var(--ifm-heading-color);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  max-height: 2.8em; /* 2 lines * 1.4 line-height */
+}