Add videos to homepage

src/app/HomepageClientComponent.tsx

@@ -133,6 +133,8 @@ interface HomepageClientComponentProps {
   mlProjects: Article[];
   aiDev: Article[];
   refArchitectures: Article[];
+  careerAdvice: Article[];
+  videos: Article[];  
   isMobile: boolean;
 }
 
@@ -141,6 +143,7 @@ export default function HomepageClientComponent({
   aiDev, 
   refArchitectures,
   careerAdvice,
+  videos,  
   isMobile
 }: HomepageClientComponentProps) {
   const [email, setEmail] = useState("")
@@ -251,7 +254,7 @@ export default function HomepageClientComponent({
           </div>
         </section>
 
-        <section className="bg-white dark:bg-gray-900 py-12">
+        <section className="bg-gray-100 dark:bg-gray-800 py-12">
           <div className="container px-4 md:px-6 mx-auto">
             <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Career Advice</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -262,7 +265,18 @@ export default function HomepageClientComponent({
           </div>
         </section>
 
-        <section className="bg-gray-100 dark:bg-gray-800 py-12">
+        <section className="bg-white dark:bg-gray-900 py-12">
+          <div className="container px-4 md:px-6 mx-auto">
+            <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Videos</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {videos.slice(0, 3).map((article) => (
+                <BlogPostCard key={article.slug} article={article} />
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className="bg-white dark:bg-gray-900 py-12">
           <div className="container px-4 md:px-6 mx-auto">
             <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Reference Architectures and Demos</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

src/app/page.tsx

@@ -1,4 +1,5 @@
 import { getAllArticles } from "@/lib/articles"
+import { getAllVideos } from "@/lib/videos"  // Import the new function
 import HomepageClientComponent from './HomepageClientComponent'
 import { headers } from 'next/headers'
 import { UAParser } from 'ua-parser-js'
@@ -34,11 +35,18 @@ export default async function Page() {
     'you-get-to-keep-the-neural-connections'
   ]
 
+  const videoSlugs = [
+    'how-to-build-chat-with-your-data-rag',
+    'how-to-use-chatgpt-in-your-terminal',
+    'what-is-a-vector-database'
+  ]
+
   const allSlugs = [...mlProjectSlugs, ...aiDevSlugs, ...refArchitectureSlugs, ...careerAdviceSlugs]
 
   try {
     // Fetch all articles matching the slugs
     const allArticles = await getAllArticles(allSlugs)
+    const allVideos = await getAllVideos(videoSlugs)  // Fetch all videos with matching slugs
 
     const mlProjects = allArticles.filter(article => mlProjectSlugs.includes(article.slug))
 
@@ -52,6 +60,8 @@ export default async function Page() {
 
     const careerAdvice = allArticles.filter(article => careerAdviceSlugs.includes(article.slug))
 
+    const videos = allVideos.filter(video => videoSlugs.includes(video.slug))  // Filter videos
+
     // Server-side mobile detection
     const userAgent = headers().get('user-agent') || ''
     const parser = new UAParser(userAgent)
@@ -64,6 +74,7 @@ export default async function Page() {
         aiDev={aiDev}
         refArchitectures={refArchitectures}
         careerAdvice={careerAdvice}
+        videos={videos}  // Added new prop
         isMobile={isMobile}
       />
     )

src/lib/videos.ts

@@ -1,6 +1,6 @@
 import { Article, ArticleWithSlug } from './shared-types'
-
 import glob from 'fast-glob'
+import path from 'path'
 
 async function importArticle(
   articleFilename: string,
@@ -17,12 +17,18 @@ async function importArticle(
   }
 }
 
-export async function getAllVideos() {
+// Extend getAllVideos to accept an optional array of slugs
+export async function getAllVideos(matchingSlugs?: string[]) {
   let articleFilenames = await glob('*/page.mdx', {
-    cwd: './src/app/videos',
+    cwd: path.join(process.cwd(), 'src', 'app', 'videos'),
   })
 
   let articles = await Promise.all(articleFilenames.map(importArticle))
 
+  // Filter articles to include only those whose slug is in matchingSlugs
+  if (matchingSlugs && matchingSlugs.length > 0) {
+    articles = articles.filter(article => matchingSlugs.includes(article.slug))
+  }
+
   return articles.sort((a, z) => +new Date(z.date) - +new Date(a.date))
 }