Upgrade paths

.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

astro.config.mjs

@@ -55,7 +55,7 @@ export default defineConfig({
       ],
     ],
   },
-  output: 'hybrid',
+  output: 'server',
   adapter: node({
     mode: 'standalone',
   }),

package.json

@@ -31,9 +31,9 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/node": "^8.3.4",
+    "@astrojs/node": "^9.1.3",
     "@astrojs/react": "^4.2.3",
-    "@astrojs/sitemap": "^3.2.0",
+    "@astrojs/sitemap": "^3.3.0",
     "@fingerprintjs/fingerprintjs": "^4.5.0",
     "@microsoft/clarity": "^1.0.0",
     "@nanostores/react": "^0.8.0",
@@ -44,7 +44,7 @@
     "@tanstack/react-query": "^5.59.16",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "astro": "^4.16.1",
+    "astro": "^5.6.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dom-to-image": "^2.6.0",
@@ -93,6 +93,7 @@
     "@types/dom-to-image": "^2.6.7",
     "@types/js-cookie": "^3.0.6",
     "@types/luxon": "^3.4.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/prismjs": "^1.26.4",
     "@types/react-calendar-heatmap": "^1.6.7",
     "@types/react-slick": "^0.23.13",

src/components/ExploreAIRoadmap/ExploreAISorting.tsx

@@ -1,4 +1,4 @@
-import { ArrowDownWideNarrow, Check, ChevronDown } from 'lucide-react';
+import { Check, ChevronDown } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 
@@ -41,7 +41,7 @@ export function ExploreAISorting(props: ExploreAISortingProps) {
       ref={dropdownRef}
     >
       <button
-        className="py-15 flex w-full items-center justify-between gap-2 rounded-md border px-2 text-sm"
+        className="flex w-full items-center justify-between gap-2 rounded-md border px-2 py-15 text-sm"
         onClick={() => setIsOpen(!isOpen)}
       >
         <span>{selectedValue?.label}</span>
@@ -52,7 +52,7 @@ export function ExploreAISorting(props: ExploreAISortingProps) {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 top-10 z-10 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
+        <div className="absolute top-10 right-0 z-10 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
           {sortingLabels.map((item) => (
             <button
               key={item.value}

src/pages/[roadmapId].json.ts

@@ -1,5 +1,7 @@
 import type { APIRoute } from 'astro';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const roadmapJsons = import.meta.glob('/src/data/roadmaps/**/*.json', {
     eager: true,

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

@@ -1,37 +1,59 @@
 ---
-import {
-  getRoadmapTopicFiles,
-  type RoadmapTopicFileType,
-} from '../../lib/roadmap-topic';
-
-export async function getStaticPaths() {
-  const topicPathMapping = await getRoadmapTopicFiles();
-
-  return Object.keys(topicPathMapping).map((topicSlug) => {
-    const topicDetails = topicPathMapping[topicSlug];
-    const roadmapId = topicDetails.roadmapId;
-    const topicId = topicSlug.replace(`/${roadmapId}/`, '');
-
-    return {
-      params: {
-        topicId,
-        roadmapId,
-      },
-      props: topicDetails,
-    };
-  });
-}
+import fs from 'node:fs';
+import path from 'node:path';
+import matter from 'gray-matter';
+import MarkdownIt from 'markdown-it';
+
+export const prerender = false;
+
+const { topicId, roadmapId } = Astro.params;
 
-export const partial = true;
+if (!topicId || !roadmapId) {
+  return Astro.redirect('/404');
+}
 
-const { topicId } = Astro.params;
-const { file, url, roadmapId, roadmap, heading } =
-  Astro.props as RoadmapTopicFileType;
+// Handle nested paths by joining the segments
+const topicPath = Array.isArray(topicId) ? topicId.join('/') : topicId;
+
+// Construct the path to the markdown file
+const contentPath = path.join(
+  process.cwd(),
+  'src',
+  'data',
+  'roadmaps',
+  roadmapId,
+  'content',
+  `${topicPath}.md`,
+);
+
+// Check if file exists
+if (!fs.existsSync(contentPath)) {
+  return Astro.redirect('/404');
+}
 
-const fileWithoutBasePath = file.file?.replace(/.+?\/src\/data/, '/src/data');
+// Read and parse the markdown file
+const fileContent = fs.readFileSync(contentPath, 'utf-8');
+const { data: frontmatter, content } = matter(fileContent);
+
+// Get the roadmap metadata
+const roadmapPath = path.join(
+  process.cwd(),
+  'src',
+  'data',
+  'roadmaps',
+  roadmapId,
+  `${roadmapId}.md`,
+);
+const roadmapContent = fs.readFileSync(roadmapPath, 'utf-8');
+const { data: roadmapData } = matter(roadmapContent);
+
+const fileWithoutBasePath = contentPath.replace(/.+?\/src\/data/, '/src/data');
 const gitHubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master${fileWithoutBasePath}`;
+
+const md = new MarkdownIt();
+const htmlContent = md.render(content);
 ---
 
 <div data-github-url={gitHubUrl}></div>
 
-<file.Content />
+<Fragment set:html={htmlContent} />

src/pages/[roadmapId]/courses.astro

@@ -6,6 +6,8 @@ import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
 import CourseStep from '../../components/courses/CourseStep.astro';
 import Milestone from '../../components/courses/Milestone.astro';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const roadmapIds = await getRoadmapIds();
 

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

@@ -1,6 +1,8 @@
 import type { APIRoute } from 'astro';
 import { getRoadmapIds } from '../../lib/roadmap.ts';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const coursesJsons: Record<string, any> = import.meta.glob(
     '/src/data/roadmaps/**/courses.json',

src/pages/[roadmapId]/index.astro

@@ -19,6 +19,8 @@ import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion';
 import ResourceProgressStats from '../../components/ResourceProgressStats.astro';
 import { getProjectsByRoadmapId } from '../../lib/project';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const roadmapIds = await getRoadmapIds();
 

src/pages/[roadmapId]/projects.astro

@@ -8,6 +8,8 @@ import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
 import { projectApi } from '../../api/project';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const roadmapIds = await getRoadmapIds();
 

src/pages/[roadmapId]/svg.astro

@@ -5,6 +5,8 @@ import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const roadmapIds = await getRoadmapIds();
 

src/pages/authors/[authorId].astro

@@ -8,6 +8,8 @@ import { getGuidesByAuthor } from '../../lib/guide';
 import { getAllQuestionGroups } from '../../lib/question-group';
 import { getVideosByAuthor } from '../../lib/video';
 
+export const prerender = true;
+
 interface Params extends Record<string, string | undefined> {}
 
 export async function getStaticPaths() {

src/pages/authors/[authorId].json.ts

@@ -1,6 +1,8 @@
 import type { APIRoute } from 'astro';
 import { getAuthorById, getAuthorIds } from '../../lib/author';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const authorIds = await getAuthorIds();
 

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

@@ -2,6 +2,8 @@
 import { getAllBestPracticeTopicFiles } from '../../../lib/best-practice-topic';
 import type { BestPracticeTopicFileType } from '../../../lib/best-practice-topic';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const topicPathMapping = await getAllBestPracticeTopicFiles();
 

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

@@ -15,6 +15,8 @@ import {
   getAllBestPractices,
 } from '../../../lib/best-practice';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const bestPractices = await getAllBestPractices();
 

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

@@ -1,5 +1,7 @@
 import type { APIRoute } from 'astro';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const bestPracticeJsons = await import.meta.glob(
     '/src/data/best-practices/**/*.json',

src/pages/g/[linkGroupId]/[linkId].astro

@@ -3,6 +3,8 @@ import BaseLayout from '../../../layouts/BaseLayout.astro';
 import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
 import { getAllLinkGroups } from '../../../lib/link-group';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const linkGroups = await getAllLinkGroups();
 

src/pages/guides/[guideId].astro

@@ -5,6 +5,8 @@ import { getAllGuides, type GuideFileType } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { replaceVariables } from '../../lib/markdown';
 
+export const prerender = true;
+
 export interface Props {
   guide: GuideFileType;
 }

src/pages/projects/[projectId]/index.astro

@@ -10,6 +10,8 @@ import AstroIcon from '../../../components/AstroIcon.astro';
 import { ProjectStepper } from '../../../components/Projects/StatusStepper/ProjectStepper';
 import { ProjectTabs } from '../../../components/Projects/ProjectTabs';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const projects = await getAllProjects();
 

src/pages/projects/[projectId]/solutions.astro

@@ -9,6 +9,8 @@ import { ProjectTabs } from '../../../components/Projects/ProjectTabs';
 import { ListProjectSolutions } from '../../../components/Projects/ListProjectSolutions';
 import { ProjectSolutionModal } from '../../../components/Projects/ProjectSolutionModal';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const projects = await getAllProjects();
 

src/pages/questions/[questionGroupId].astro

@@ -14,6 +14,8 @@ import QuestionGuide from '../../components/Questions/QuestionGuide.astro';
 import { markdownToHtml } from '../../lib/markdown';
 import MarkdownFile from '../../components/MarkdownFile.astro';
 
+export const prerender = true;
+
 export interface Props {
   questionGroup: QuestionGroupType;
 }

src/pages/videos/[videoId].astro

@@ -1,12 +1,14 @@
 ---
 import VideoHeader from '../../components/VideoHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getAllVideos, VideoFileType } from '../../lib/video';
+import { getAllVideos, type VideoFileType } from '../../lib/video';
 
 export interface Props {
   video: VideoFileType;
 }
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   const videos = await getAllVideos();