Add featured roadmaps on homepage

src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro

@@ -0,0 +1,56 @@
+---
+import type { RoadmapFileType } from '../../lib/roadmap';
+
+export interface Props {
+  roadmap: RoadmapFileType;
+}
+
+const { roadmap } = Astro.props;
+const frontmatter = roadmap.frontmatter;
+
+let roadmapTitle = frontmatter.featuredTitle;
+
+// Lighthouse considers "Go" as a non-descriptive text such as "Submit" etc.
+// Adding "Roadmap" as a postfix to make it not complain  ¯\_(ツ)_/¯
+if (roadmapTitle === 'Go') {
+  roadmapTitle = 'Go Roadmap';
+}
+---
+
+<a
+  class:list={[
+    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100',
+    {
+      'opacity-50': roadmap.frontmatter.isUpcoming,
+    },
+  ]}
+  href={`/${roadmap.id}`}
+>
+  <span class="text-slate-400">
+    {roadmapTitle}
+  </span>
+
+  {
+    frontmatter.isNew && (
+      <span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center">
+        <span class="flex h-2 w-2 mr-1.5">
+          <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75" />
+          <span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500" />
+        </span>
+        New
+      </span>
+    )
+  }
+
+  {
+    frontmatter.isUpcoming && (
+      <span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center">
+        <span class="flex h-2 w-2 mr-1.5">
+          <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75" />
+          <span class="relative inline-flex rounded-full h-2 w-2 bg-slate-600" />
+        </span>
+        Upcoming
+      </span>
+    )
+  }
+</a>

src/components/FeaturedRoadmaps/FeaturedRoadmaps.astro

@@ -0,0 +1,31 @@
+---
+import type { RoadmapFileType } from '../../lib/roadmap';
+import FeaturedRoadmapItem from './FeaturedRoadmapItem.astro';
+
+export interface Props {
+  roadmaps: RoadmapFileType[];
+  heading: string;
+}
+
+const { roadmaps, heading } = Astro.props;
+---
+
+<div class="py-4 sm:py-14 border-b border-b-slate-900 relative">
+  <div class="container">
+    <h2
+      class="hidden sm:flex absolute rounded-lg -top-[17px] left-1/2 -translate-x-1/2 bg-slate-900 py-1 px-3 border border-slate-900 text-md text-slate-400 font-regular"
+    >
+      {heading}
+    </h2>
+
+    <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
+      {
+        roadmaps.map((roadmap) => (
+          <li>
+            <FeaturedRoadmapItem roadmap={roadmap} />
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</div>

src/lib/roadmap.ts

@@ -14,6 +14,7 @@ export interface RoadmapFrontmatter {
   description: string;
   hasTopics: boolean;
   isNew: boolean;
+  isUpcoming: boolean;
   dimensions: {
     width: number;
     height: number;

src/pages/index.astro

@@ -1,23 +1,38 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
+import FeaturedRoadmaps from '../components/FeaturedRoadmaps/FeaturedRoadmaps.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { getRoadmapsByTag } from '../lib/roadmap';
+
+const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
+const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
 ---
 
 <BaseLayout title="Developer Roadmaps">
-    <div class='bg-gradient-to-b from-slate-900 to-black'>
-      <div class='border-b border-b-slate-900'>
-        <div class='container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0'>
-          <h1 class='text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text'>
-            Developer Roadmaps
-          </h1>
-    
-          <p class='hidden sm:block text-gray-400 text-lg px-4'>
-            <span class='font-medium text-gray-400'>roadmap.sh</span> is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.
-          </p>
-    
-          <p class='block sm:hidden text-gray-400 text-md px-0'>
-            Community created roadmaps, guides and articles to help developers grow in their career.
-          </p>
-        </div>
+  <div class="bg-gradient-to-b from-slate-900 to-black">
+    <div class="border-b border-b-slate-900">
+      <div
+        class="container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0"
+      >
+        <h1
+          class="text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text"
+        >
+          Developer Roadmaps
+        </h1>
+
+        <p class="hidden sm:block text-gray-400 text-lg px-4">
+          <span class="font-medium text-gray-400">roadmap.sh</span> is a community
+          effort to create roadmaps, guides and other educational content to help
+          guide the developers in picking up the path and guide their learnings.
+        </p>
+
+        <p class="block sm:hidden text-gray-400 text-md px-0">
+          Community created roadmaps, guides and articles to help developers
+          grow in their career.
+        </p>
       </div>
     </div>
-</BaseLayout>
+
+    <FeaturedRoadmaps heading="Role based Roadmaps" roadmaps={roleRoadmaps} />
+    <FeaturedRoadmaps heading="Skill based Roadmaps" roadmaps={skillRoadmaps} />
+  </div>
+</BaseLayout>