Add deepMLTutorials to the home page

zackproser · Sep 23, 2024 · 3cbcb48 · 3cbcb48
1 parent b1a7dde
commit 3cbcb48
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/app/HomepageClientComponent.tsx b/src/app/HomepageClientComponent.tsx
@@ -130,6 +130,7 @@ interface Article {
 }
 
 interface HomepageClientComponentProps {
+  deepMLTutorials: Article[]; 
   mlProjects: Article[];
   aiDev: Article[];
   refArchitectures: Article[];
@@ -139,6 +140,7 @@ interface HomepageClientComponentProps {
 }
 
 export default function HomepageClientComponent({ 
+  deepMLTutorials,
   mlProjects, 
   aiDev, 
   refArchitectures,
@@ -233,6 +235,17 @@ export default function HomepageClientComponent({
         </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">Deep and Machine Learning Tutorials</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {deepMLTutorials.slice(0, 3).map((article) => (
+                <BlogPostCard key={article.slug} article={article} />
+              ))}
+            </div>
+          </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">Open-source AI / ML / Pipelines Projects</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -243,7 +256,7 @@ 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">AI-assisted Development</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -276,7 +289,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">Reference Architectures and Demos</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -286,6 +299,7 @@ export default function HomepageClientComponent({
             </div>
           </div>
         </section>
+
       </main>
       <footer className="w-full py-6 bg-gray-800 text-white">
       </footer>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,6 +11,13 @@ export const metadata = createMetadata({
 });
 
 export default async function Page() {
+
+  const deepMLTutorialSlugs = [
+    'cloud-gpu-services-jupyter-notebook-reviewed',
+    'how-to-create-a-custom-alpaca-dataset',
+    'how-to-fine-tune-llama-3-1-on-lightning-ai-with-torchtune'
+  ]
+
   const mlProjectSlugs = [
     'mnist-pytorch-hand-drawn-digit-recognizer',
     'langchain-pinecone-chat-with-my-blog',
@@ -41,13 +48,15 @@ export default async function Page() {
     'what-is-a-vector-database'
   ]
 
-  const allSlugs = [...mlProjectSlugs, ...aiDevSlugs, ...refArchitectureSlugs, ...careerAdviceSlugs]
+  const allSlugs = [...deepMLTutorialSlugs, ...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 deepMLTutorials = allArticles.filter(article => deepMLTutorialSlugs.includes(article.slug))
+
     const mlProjects = allArticles.filter(article => mlProjectSlugs.includes(article.slug))
 
     const aiDev = allArticles.filter(article => aiDevSlugs.includes(article.slug))
@@ -70,6 +79,7 @@ export default async function Page() {
 
     return (
       <HomepageClientComponent
+        deepMLTutorials={deepMLTutorials}
         mlProjects={mlProjects}
         aiDev={aiDev}
         refArchitectures={refArchitectures}