Add roadmaps page

src/components/GridRoadmapItem.astro

@@ -1,11 +1,12 @@
 ---
-import type { RoadmapFrontmatter } from '../lib/roadmap';
+import type { RoadmapFileType } from '../lib/roadmap';
 
 export interface Props {
-  roadmap: RoadmapFrontmatter;
+  roadmap: RoadmapFileType;
 }
 
 const { roadmap } = Astro.props;
+const frontmatter = roadmap.frontmatter;
 ---
 
 <a
@@ -14,14 +15,14 @@ const { roadmap } = Astro.props;
 >
   <span
     class="font-regular sm:font-medium text-md sm:text-xl hover:text-gray-50 text-gray-200 sm:text-gray-100 mb-0 sm:mb-1.5"
-    >{roadmap.title}</span
+    >{frontmatter.title}</span
   >
   <span class="text-sm leading-normal text-gray-400 hidden sm:block"
-    >{roadmap.description}</span
+    >{frontmatter.description}</span
   >
 
   {
-    roadmap.isNew && (
+    frontmatter.isNew && (
       <span class="absolute bottom-1 right-1 bg-yellow-300 text-yellow-900 text-xs font-medium px-1 sm:px-1.5 py-0.5 rounded-sm uppercase">
         New
       </span>

src/lib/File.ts

@@ -1,7 +1,7 @@
 export interface MarkdownFileType<T = Record<string, string>> {
   frontmatter: T;
   file: string;
-  url: string;
+  url?: string;
   Content: any;
   getHeadings: () => {
     depth: number;

src/lib/roadmap.ts

@@ -1,9 +1,10 @@
 import type { MarkdownFileType } from "./File";
 
-type RoadmapFileType = MarkdownFileType<RoadmapFrontmatter>;
+export type RoadmapFileType = MarkdownFileType<RoadmapFrontmatter> & {
+  id: string;
+};
 
 export interface RoadmapFrontmatter {
-  id: string;
   jsonUrl: string;
   pdfUrl: string;
   order: number;
@@ -30,6 +31,12 @@ export interface RoadmapFrontmatter {
   tags: string[];
 }
 
+function roadmapPathToId(filePath: string):string {
+  const fileName = filePath.split("/").pop() || "";
+
+  return fileName.replace(".md", "");
+}
+
 /**
  * Gets the IDs of all the roadmaps available on the website
  * 
@@ -40,11 +47,7 @@ export async function getRoadmapIds() {
     eager: true,
   });
 
-  return Object.keys(roadmapFiles).map((filePath) => {
+  return Object.keys(roadmapFiles).map(roadmapPathToId);
-    const fileName = filePath.split("/").pop() || "";
-
-    return fileName.replace(".md", "");
-  });
 }
 
 /**
@@ -61,8 +64,13 @@ export async function getRoadmapsByTag(tag: string): Promise<RoadmapFileType[]>
     }
   );
   
-  const roadmapFiles: MarkdownFileType<RoadmapFrontmatter>[] = Object.values(roadmapFilesMap);
+  const roadmapFiles = Object.values(roadmapFilesMap);
-  const filteredRoadmaps = roadmapFiles.filter(roadmapFile => roadmapFile.frontmatter.tags.includes(tag));
+  const filteredRoadmaps = roadmapFiles
+    .filter((roadmapFile) => roadmapFile.frontmatter.tags.includes(tag))
+    .map((roadmapFile) => ({
+      ...roadmapFile,
+      id: roadmapPathToId(roadmapFile.file),
+    }));
 
   return filteredRoadmaps.sort(
     (a, b) => a.frontmatter.order - b.frontmatter.order

src/pages/roadmaps.astro

@@ -20,13 +20,13 @@ const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-0.5 sm:gap-3">
         {
           roleRoadmaps.map((roleRoadmap) => (
-            <GridRoadmapItem roadmap={roleRoadmap.frontmatter} />
+            <GridRoadmapItem roadmap={roleRoadmap} />
           ))
         }
 
         {
           skillRoadmaps.map((skillRoadmap) => (
-            <GridRoadmapItem roadmap={skillRoadmap.frontmatter} />
+            <GridRoadmapItem roadmap={skillRoadmap} />
           ))
         }
       </div>