fix: redirect to the error page

src/pages/[roadmapId]/[...topicId].astro

@@ -1,26 +1,19 @@
 ---
-import RoadmapBanner from '../../components/RoadmapBanner.astro';
-import BaseLayout from '../../layouts/BaseLayout.astro';
-import {
-  getRoadmapTopicFiles,
-  type RoadmapTopicFileType,
-} from '../../lib/roadmap-topic';
+import { getRoadmapTopicFiles } from '../../lib/roadmap-topic';
 
 export const partial = true;
 
 const { topicId, roadmapId } = Astro.params;
 if (!topicId) {
-    return new Response();
+  return new Response();
 }
 
 const topicSlug = `/${roadmapId}/${topicId}`;
 const topicPathMapping = await getRoadmapTopicFiles();
 
-console.log(Astro.params);
-
 const topicDetails = topicPathMapping[topicSlug];
 
-const { file, url, roadmap, heading } = topicDetails;
+const { file } = topicDetails;
 
 const fileWithoutBasePath = file.file?.replace(/.+?\/src\/data/, '/src/data');
 const gitHubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master${fileWithoutBasePath}`;

src/pages/[roadmapId]/index.astro

@@ -1,7 +1,6 @@
 ---
 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';
@@ -13,19 +12,31 @@ import {
   generateArticleSchema,
   generateFAQSchema,
 } from '../../lib/jsonld-schema';
-import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
+import { type RoadmapFrontmatter } from '../../lib/roadmap';
 
 interface Params extends Record<string, string | undefined> {
   roadmapId: string;
 }
 
 const { roadmapId } = Astro.params as Params;
-const roadmapFile = await import(
-  `../../data/roadmaps/${roadmapId}/${roadmapId}.md`
-);
-const { faqs: roadmapFAQs = [] } = await import(
-  `../../data/roadmaps/${roadmapId}/faqs.astro`
-);
+let roadmapFile;
+let roadmapFAQs = [];
+
+try {
+  roadmapFile = await import(
+    `../../data/roadmaps/${roadmapId}/${roadmapId}.md`
+  );
+
+  if (!roadmapFile) {
+    return Astro.redirect('/404');
+  }
+
+  const { faqs } = await import(`../../data/roadmaps/${roadmapId}/faqs.astro`);
+  roadmapFAQs = faqs || [];
+} catch (error) {
+  return Astro.redirect('/404');
+}
+
 const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 
 let jsonLdSchema = [];

src/pages/[roadmapId]/index.json.ts

@@ -3,14 +3,31 @@ import type { APIRoute } from 'astro';
 export const GET: APIRoute = async function ({ params, request, props }) {
   const { roadmapId } = params;
 
-  const roadmapJson = await import(
-    `../../data/roadmaps/${roadmapId}/${roadmapId}.json`
-  );
+  try {
+    const roadmapJson = await import(
+      `../../data/roadmaps/${roadmapId}/${roadmapId}.json`
+    );
 
-  return new Response(JSON.stringify(roadmapJson), {
-    status: 200,
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+    return new Response(JSON.stringify(roadmapJson), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  } catch (error) {
+    return new Response(
+      JSON.stringify({
+        data: null,
+        error: {
+          message: 'Roadmap not found',
+        },
+      }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  }
 };

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -10,21 +10,9 @@ import { UserProgressModal } from '../../../components/UserProgress/UserProgress
 import {
   type BestPracticeFileType,
   type BestPracticeFrontmatter,
-  getAllBestPractices,
 } from '../../../lib/best-pratice';
 import { generateArticleSchema } from '../../../lib/jsonld-schema';
 
-export async function getStaticPaths() {
-  const bestPractices = await getAllBestPractices();
-
-  return bestPractices.map((bestPractice: BestPracticeFileType) => ({
-    params: { bestPracticeId: bestPractice.id },
-    props: {
-      bestPractice: bestPractice,
-    },
-  }));
-}
-
 interface Params extends Record<string, string | undefined> {
   bestPracticeId: string;
 }
@@ -34,7 +22,20 @@ interface Props {
 }
 
 const { bestPracticeId } = Astro.params as Params;
-const { bestPractice } = Astro.props as Props;
+
+let bestPractice;
+try {
+  bestPractice = await import(
+    `../../../data/best-practices/${bestPracticeId}/${bestPracticeId}.md`
+  );
+
+  if (!bestPractice) {
+    return Astro.redirect('/404');
+  }
+} catch (error) {
+  return Astro.redirect('/404');
+}
+
 const bestPracticeData = bestPractice.frontmatter as BestPracticeFrontmatter;
 
 let jsonLdSchema = [];
@@ -49,7 +50,7 @@ if (bestPracticeData.schema) {
       datePublished: bestPracticeSchema.datePublished,
       dateModified: bestPracticeSchema.dateModified,
       imageUrl: bestPracticeSchema.imageUrl,
-    })
+    }),
   );
 }
 ---

src/pages/best-practices/[bestPracticeId]/index.json.ts

@@ -1,33 +1,33 @@
 import type { APIRoute } from 'astro';
 
-export async function getStaticPaths() {
-  const bestPracticeJsons = await import.meta.glob(
-    '/src/data/best-practices/**/*.json',
-    {
-      eager: true,
-    }
-  );
+export const GET: APIRoute = async function ({ params, request, props }) {
+  const { bestPracticeId } = params;
 
-  return Object.keys(bestPracticeJsons).map((filePath) => {
-    const bestPracticeId = filePath.split('/').pop()?.replace('.json', '');
-    const bestPracticeJson = bestPracticeJsons[filePath] as Record<string, any>;
+  try {
+    const roadmapJson = await import(
+      `../../../data/best-practices/${bestPracticeId}/${bestPracticeId}.json`
+    );
 
-    return {
-      params: {
-        bestPracticeId,
+    return new Response(JSON.stringify(roadmapJson), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
       },
-      props: {
-        bestPracticeJson: bestPracticeJson?.default,
+    });
+  } catch (error) {
+    return new Response(
+      JSON.stringify({
+        data: null,
+        error: {
+          message: 'Best Practices not found',
+        },
+      }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
       },
-    };
-  });
-}
-
-export const GET: APIRoute = async function ({ params, request, props }) {
-  return new Response(JSON.stringify(props.bestPracticeJson), {
-    status: 200,
-    headers: {
-      'content-type': 'application/json',
-    },
-  });
+    );
+  }
 };

tsconfig.json

@@ -4,5 +4,6 @@
     "moduleResolution": "node",
     "jsx": "react-jsx",
     "jsxImportSource": "react"
-  }
-}
+  },
+  "exclude": ["node_modules", "dist"]
+}