Fix sorting order of roadmaps

src/components/Projects/ProjectsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../lib/classname.ts';
-import {Box, Filter, Group, X} from 'lucide-react';
+import { Box, Filter, Group, X } from 'lucide-react';
 import {
   deleteUrlParam,
   getUrlParams,
@@ -81,6 +81,18 @@ export function ProjectsPage(props: ProjectsPageProps) {
     (group) => group.id === activeGroup,
   );
 
+  const requiredSortOrder = [
+    'Frontend',
+    'Backend',
+    'DevOps',
+    'Full-stack',
+    'JavaScript',
+    'Go',
+    'Python',
+    'Node.js',
+    'Java',
+  ];
+
   return (
     <div className="border-t bg-gray-100">
       <button
@@ -122,13 +134,33 @@ export function ProjectsPage(props: ProjectsPageProps) {
                 selected={activeGroup === ''}
               />
 
-              {roadmapsProjects.map((group) => (
+              {roadmapsProjects
+                .sort((a, b) => {
+                  const aIndex = requiredSortOrder.indexOf(a.title);
+                  const bIndex = requiredSortOrder.indexOf(b.title);
+
+                  if (aIndex === -1 && bIndex === -1) {
+                    return a.title.localeCompare(b.title);
+                  }
+
+                  if (aIndex === -1) {
+                    return 1;
+                  }
+
+                  if (bIndex === -1) {
+                    return -1;
+                  }
+                  return aIndex - bIndex;
+                })
+                .map((group) => (
                   <CategoryFilterButton
                     key={group.id}
                     onClick={() => {
                       setActiveGroup(group.id);
                       setIsFilterOpen(false);
-                    document?.getElementById('filter-button')?.scrollIntoView();
+                      document
+                        ?.getElementById('filter-button')
+                        ?.scrollIntoView();
                       setVisibleProjects(group.projects);
                       setUrlParams({ g: group.id });
                     }}

src/pages/projects/index.astro

@@ -11,7 +11,10 @@ const allRoadmapIds = Object.keys(roadmapProjects);
 
 const allRoadmaps = await getRoadmapsByIds(allRoadmapIds);
 const enrichedRoadmaps = allRoadmaps.map((roadmap) => {
-  const projects = roadmapProjects[roadmap.id];
+  const projects = (roadmapProjects[roadmap.id] || []).sort((a, b) => {
+    return a.frontmatter.sort - b.frontmatter.sort;
+  });
+
   return {
     id: roadmap.id,
     title: roadmap.frontmatter.briefTitle,