Update homepage posts

src/app/HomepageClientComponent.tsx

@@ -133,13 +133,17 @@ interface HomepageClientComponentProps {
   mlProjects: Article[];
   aiDev: Article[];
   refArchitectures: Article[];
+  careerAdvice: Article[];
+  videos: Article[];  
   isMobile: boolean;
 }
 
 export default function HomepageClientComponent({ 
   mlProjects, 
   aiDev, 
   refArchitectures,
+  careerAdvice,
+  videos,  
   isMobile
 }: HomepageClientComponentProps) {
   const [email, setEmail] = useState("")
@@ -230,7 +234,7 @@ export default function HomepageClientComponent({
 
         <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">Machine Learning Projects</h2>
+            <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Open-source AI / ML / Pipelines Projects</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {mlProjects.slice(0, 3).map((article) => (
                 <BlogPostCard key={article.slug} article={article} />
@@ -241,7 +245,7 @@ export default function HomepageClientComponent({
 
         <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">AI Assisted Development</h2>
+            <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">AI-assisted Development</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {aiDev.slice(0, 3).map((article) => (
                 <BlogPostCard key={article.slug} article={article} />
@@ -250,6 +254,28 @@ export default function HomepageClientComponent({
           </div>
         </section>
 
+        <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">
+              {careerAdvice.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">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>
@@ -262,7 +288,6 @@ export default function HomepageClientComponent({
         </section>
       </main>
       <footer className="w-full py-6 bg-gray-800 text-white">
-        {/* ... footer content ... */}
       </footer>
     </div>
   )

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'
@@ -18,20 +19,34 @@ export default async function Page() {
 
   const aiDevSlugs = [
     'automations-project',
-    'how-are-embeddings-models-trained-for-rag',
-    'codeium-review'
+    'autocomplete-is-not-all-you-need',
+    'codeium-analysis-4-2024'
   ]
 
   const refArchitectureSlugs = [
     'pinecone-reference-architecture-launch',
-    'pinecone-reference-architecture-scaling'
+    'pinecone-reference-architecture-scaling',
+    'pinecone-reference-architecture-technical-walkthrough'
   ]
 
-  const allSlugs = [...mlProjectSlugs, ...aiDevSlugs, ...refArchitectureSlugs]
+  const careerAdviceSlugs = [
+    'run-your-own-tech-blog',
+    'wash-three-walls-with-one-bucket',
+    '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))
 
@@ -42,6 +57,11 @@ export default async function Page() {
       article.type === 'demo' || 
       article.type === 'architecture'
     )
+
+    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)
@@ -53,6 +73,8 @@ export default async function Page() {
         mlProjects={mlProjects}
         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))
 }