Add related roadmaps to each roadmap page

src/components/FAQs/FAQs.astro

@@ -25,7 +25,7 @@ if (faqs.length === 0) {
       <h1 class='text-sm sm:text-base font-medium py-1 px-3 border bg-white rounded-md'>Frequently Asked Questions</h1>
     </div>
 
-    <div class='flex flex-col gap-1 pb-8'>
+    <div class='flex flex-col gap-1 pb-14'>
       {
         faqs.map((faq, questionIndex) => (
           <Question isActive={questionIndex === 0} question={faq.question}>

src/components/RelatedRoadmaps.astro

@@ -0,0 +1,42 @@
+---
+import { getRoadmapsByIds, RoadmapFrontmatter } from '../lib/roadmap';
+
+export interface Props {
+  roadmap: RoadmapFrontmatter;
+}
+
+const { roadmap } = Astro.props;
+
+const relatedRoadmaps = roadmap.relatedRoadmaps || [];
+if (!relatedRoadmaps.length) {
+  return null;
+}
+
+const relatedRoadmapDetails = await getRoadmapsByIds(relatedRoadmaps);
+---
+
+<div class='border-t bg-gray-100'>
+  <div class='container'>
+    <div class='flex justify-between relative -top-5'>
+      <h1 class='text-md font-medium py-1 px-3 border bg-white rounded-md'>Related Roadmaps</h1>
+      <a href='/roadmaps' class='text-md font-medium py-1 px-3 border bg-white rounded-md hover:bg-gray-50'>
+        <span class='hidden sm:inline'>All Roadmaps &rarr;</span>
+        <span class='inline sm:hidden'>More &rarr;</span>
+      </a>
+    </div>
+
+    <div class='flex flex-col gap-1 pb-8'>
+      {
+        relatedRoadmapDetails.map((relatedRoadmap) => (
+          <a
+            href={`/${relatedRoadmap.id}`}
+            class='py-2 px-3.5 bg-white border rounded-md hover:bg-gray-50 flex flex-col sm:flex-row gap-0.5 sm:gap-0'
+          >
+            <span class='font-medium inline-block min-w-[150px]'>{relatedRoadmap.frontmatter.briefTitle}</span>
+            <span class='text-gray-500'>{relatedRoadmap.frontmatter.briefDescription}</span>
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</div>

src/data/roadmaps/cyber-security/cyber-security.md

@@ -42,9 +42,7 @@ seo:
 relatedRoadmaps:
   - "backend"
   - "devops"
-  - "java"
   - "python"
-  - "nodejs"
 sitemap:
   priority: 1
   changefreq: "monthly"

src/lib/roadmap.ts

@@ -83,3 +83,26 @@ export async function getRoadmapsByTag(tag: string): Promise<RoadmapFileType[]>
 
   return filteredRoadmaps.sort((a, b) => a.frontmatter.order - b.frontmatter.order);
 }
+
+export async function getRoadmapById(id: string): Promise<RoadmapFileType> {
+  const roadmapFilesMap = await import.meta.glob<RoadmapFileType>('/src/data/roadmaps/*/*.md', {
+    eager: true,
+  });
+
+  const roadmapFile = Object.values(roadmapFilesMap).find((roadmapFile) => {
+    return roadmapPathToId(roadmapFile.file) === id;
+  });
+
+  if (!roadmapFile) {
+    throw new Error(`Roadmap with ID ${id} not found`);
+  }
+
+  return {
+    ...roadmapFile,
+    id: roadmapPathToId(roadmapFile.file),
+  };
+}
+
+export async function getRoadmapsByIds(ids: string[]): Promise<RoadmapFileType[]> {
+  return Promise.all(ids.map((id) => getRoadmapById(id)));
+}

src/pages/[roadmapId]/index.astro

@@ -3,6 +3,7 @@ import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import FAQs from '../../components/FAQs/FAQs.astro';
 import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
 import MarkdownFile from '../../components/MarkdownFile.astro';
+import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
 import TopicOverlay from '../../components/TopicOverlay/TopicOverlay.astro';
@@ -103,6 +104,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
     {roadmapData.isUpcoming && <UpcomingForm />}
 
     <FAQs faqs={roadmapFAQs} />
+    <RelatedRoadmaps roadmap={roadmapData} />
 
     <CaptchaScripts slot='after-footer' />
   </div>