Rename featured roadmap item

src/components/FeaturedItems/FeaturedItem.astro

@@ -0,0 +1,50 @@
+---
+export interface FeaturedItemType {
+  isUpcoming?: boolean;
+  isNew?: boolean;
+  url: string;
+  text: string;
+}
+
+export interface Props extends FeaturedItemType {}
+
+const { isUpcoming = false, isNew = false, text, url } = Astro.props;
+---
+
+<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': isUpcoming,
+    },
+  ]}
+  href={url}
+>
+  <span class='text-slate-400'>
+    {text}
+  </span>
+
+  {
+    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>
+    )
+  }
+
+  {
+    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/FeaturedItems/FeaturedItems.astro

@@ -0,0 +1,35 @@
+---
+import FeaturedItem, { FeaturedItemType } from './FeaturedItem.astro';
+
+export interface Props {
+  featuredItems: FeaturedItemType[];
+  heading: string;
+}
+
+const { featuredItems, 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'>
+      {
+        featuredItems.map((featuredItem) => (
+          <li>
+            <FeaturedItem
+              text={featuredItem.text}
+              url={featuredItem.url}
+              isNew={featuredItem.isNew}
+              isUpcoming={featuredItem.isUpcoming}
+            />
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</div>

src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro

@@ -1,56 +0,0 @@
----
-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

@@ -1,31 +0,0 @@
----
-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/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import FeaturedGuides from '../components/FeaturedGuides.astro';
-import FeaturedRoadmaps from '../components/FeaturedRoadmaps/FeaturedRoadmaps.astro';
+import FeaturedItems from '../components/FeaturedItems/FeaturedItems.astro';
 import FeaturedVideos from '../components/FeaturedVideos.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { getAllGuides } from '../lib/guide';
@@ -13,12 +13,14 @@ const guides = await getAllGuides();
 const videos = await getAllVideos();
 ---
 
-<BaseLayout title='Developer Roadmaps - roadmap.sh' description={"Community driven roadmaps, articles and guides for developers to grow in their career."} permalink={'/'}>
+<BaseLayout
+  title='Developer Roadmaps - roadmap.sh'
+  description={'Community driven roadmaps, articles and guides for developers to grow in their career.'}
+  permalink={'/'}
+>
   <div class='bg-gradient-to-b from-slate-900 to-black'>
     <div class='border-b border-b-slate-900'>
-      <div
+      <div class='container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0'>
-        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'
         >
@@ -26,20 +28,35 @@ const videos = await getAllVideos();
         </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
+          <span class='font-medium text-gray-400'>roadmap.sh</span> is a community effort to create roadmaps, guides and
-          effort to create roadmaps, guides and other educational content to help
+          other educational content to help guide the developers in picking up the path and guide their learnings.
-          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
+          Community created roadmaps, guides and articles to help developers grow in their career.
-          grow in their career.
         </p>
       </div>
     </div>
 
-    <FeaturedRoadmaps heading='Role based Roadmaps' roadmaps={roleRoadmaps} />
+    <FeaturedItems
-    <FeaturedRoadmaps heading='Skill based Roadmaps' roadmaps={skillRoadmaps} />
+      heading='Role based Roadmaps'
+      featuredItems={roleRoadmaps.map((roadmapItem) => ({
+        text: roadmapItem.frontmatter.featuredTitle,
+        url: `/${roadmapItem.id}/`,
+        isNew: roadmapItem.frontmatter.isNew,
+        isUpcoming: roadmapItem.frontmatter.isUpcoming,
+      }))}
+    />
+
+    <FeaturedItems
+      heading='Skill based Roadmaps'
+      featuredItems={skillRoadmaps.map((roadmapItem) => ({
+        text: roadmapItem.frontmatter.featuredTitle === 'Go' ? 'Go Roadmap' : roadmapItem.frontmatter.featuredTitle,
+        url: `/${roadmapItem.id}/`,
+        isNew: roadmapItem.frontmatter.isNew,
+        isUpcoming: roadmapItem.frontmatter.isUpcoming,
+      }))}
+    />
 
     <div class='grid grid-cols-1 gap-7 sm:gap-16 bg-gray-50 py-7 sm:py-16'>
       <FeaturedGuides heading='Guides' guides={guides.slice(0, 7)} />