Desktop screen UI

src/pages/roadmaps.astro

@@ -4,8 +4,337 @@ import SimplePageHeader from '../components/SimplePageHeader.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { getRoadmapsByTag } from '../lib/roadmap';
 
-const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
-const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
+const groups = [
+  {
+    group: 'Absolute Beginners',
+    roadmaps: [
+      {
+        title: 'Frontend Beginner',
+        link: '/frontend?r=frontend-beginner',
+      },
+      {
+        title: 'Backend Beginner',
+        link: '/backend?r=backend-beginner',
+      },
+      {
+        title: 'DevOps Beginner',
+        link: '/devops?r=devops-beginner',
+      },
+      {
+        title: 'Full-Stack Developer',
+        link: '/fullstack',
+      },
+    ],
+  },
+  {
+    group: 'Languages / Platforms',
+    roadmaps: [
+      {
+        title: 'JavaScript',
+        link: '/javascript',
+        type: 'skill',
+      },
+      {
+        title: 'TypeScript',
+        link: '/typescript',
+        type: 'skill',
+      },
+      {
+        title: 'Node.js',
+        link: '/nodejs',
+        type: 'role',
+      },
+      {
+        title: 'C++',
+        link: '/cpp',
+        type: 'skill',
+      },
+      {
+        title: 'Go',
+        link: '/golang',
+        type: 'skill',
+      },
+      {
+        title: 'Rust',
+        link: '/rust',
+        type: 'skill',
+      },
+      {
+        title: 'Python',
+        link: '/python',
+        type: 'skill',
+      },
+      {
+        title: 'Java',
+        link: '/java',
+        type: 'skill',
+      },
+      {
+        title: 'SQL',
+        link: '/sql',
+        type: 'skill',
+      },
+    ],
+  },
+  {
+    group: 'Web Development',
+    roadmaps: [
+      {
+        title: 'Frontend',
+        link: '/frontend',
+        type: 'role',
+      },
+      {
+        title: 'Backend',
+        link: '/backend',
+        type: 'role',
+      },
+      {
+        title: 'DevOps',
+        link: '/devops',
+        type: 'role',
+      },
+      {
+        title: 'Full Stack',
+        link: '/full-stack',
+        type: 'role',
+      },
+      {
+        title: 'QA',
+        link: '/qa',
+        type: 'role',
+      },
+      {
+        title: 'GraphQL',
+        link: '/graphql',
+        type: 'role',
+      },
+    ],
+  },
+  {
+    group: 'Frameworks',
+    roadmaps: [
+      {
+        title: 'React',
+        link: '/react',
+        type: 'skill',
+      },
+      {
+        title: 'Vue',
+        link: '/vue',
+        type: 'skill',
+      },
+      {
+        title: 'Angular',
+        link: '/angular',
+        type: 'skill',
+      },
+      {
+        title: 'Spring Boot',
+        link: '/spring-boot',
+        type: 'skill',
+      },
+      {
+        title: 'ASP.NET Core',
+        link: '/aspnet-core',
+        type: 'skill',
+      },
+    ],
+  },
+  {
+    group: 'Mobile Development',
+    roadmaps: [
+      {
+        title: 'React Native',
+        link: '/react-native',
+        type: 'skill',
+      },
+      {
+        title: 'Flutter',
+        link: '/flutter',
+        type: 'skill',
+      },
+      {
+        title: 'Android',
+        link: '/android',
+        type: 'skill',
+      },
+    ],
+  },
+  {
+    group: 'Databases',
+    roadmaps: [
+      {
+        title: 'PostgreSQL',
+        link: '/postgresql-dba',
+        type: 'role',
+      },
+      {
+        title: 'MongoDB',
+        link: '/mongodb',
+        type: 'skill',
+      },
+    ],
+  },
+  {
+    group: 'Computer Science',
+    roadmaps: [
+      {
+        title: 'Computer Science',
+        link: '/computer-science',
+        type: 'skill',
+      },
+      {
+        title: 'Data Structures',
+        link: '/data-structures-and-algorithms',
+        type: 'skill',
+      },
+      {
+        title: 'System Design',
+        link: '/system-design',
+        type: 'skill',
+      },
+      {
+        title: 'Design and Architecture',
+        link: '/software-design-architecture',
+        type: 'skill',
+      },
+      {
+        title: 'Software Architect',
+        link: '/software-architect',
+        type: 'role',
+      },
+      {
+        title: 'Code Review',
+        link: '/code-review',
+        type: 'skill',
+      },
+      {
+        title: 'Technical Writer',
+        link: '/technical-writer',
+        type: 'skill',
+      },
+    ],
+  },
+  {
+    group: 'Machine Learning',
+    roadmaps: [
+      {
+        title: 'AI and Data Scientist',
+        link: '/ai-data-scientist',
+        type: 'skill',
+      },
+      {
+        title: 'MLOps',
+        link: '/mlops',
+        type: 'skill',
+      },
+      {
+        title: 'Prompt Engineering',
+        link: '/prompt-engineering',
+        type: 'skill',
+      },
+    ],
+  },
+  {
+    group: 'Game Development',
+    roadmaps: [
+      {
+        title: 'Client Side Development',
+        link: '/game-developer',
+        type: 'skill',
+      },
+      {
+        title: 'Server Side Development',
+        link: '/server-side-game-developer',
+        type: 'skill',
+      },
+    ],
+  },
+  {
+    group: 'Design',
+    roadmaps: [
+      {
+        title: 'UX Design',
+        link: '/ux-design',
+      },
+      {
+        title: 'Design System',
+        link: '/design-system',
+      },
+    ],
+  },
+  {
+    group: 'DevOps',
+    roadmaps: [
+      {
+        title: 'DevOps',
+        link: '/devops',
+      },
+      {
+        title: 'Docker',
+        link: '/docker',
+      },
+      {
+        title: 'Kubernetes',
+        link: '/kubernetes',
+      },
+      {
+        title: 'AWS',
+        link: '/aws',
+      },
+    ],
+  },
+  {
+    group: 'Blockchain',
+    roadmaps: [
+      {
+        title: 'Blockchain',
+        link: '/blockchain',
+      },
+    ],
+  },
+  {
+    group: 'Cyber Security',
+    roadmaps: [
+      {
+        title: 'Cyber Security',
+        link: '/cyber-security',
+      },
+    ],
+  },
+];
+
+const shownTitles = groups
+  .map((group) => group.roadmaps.map((roadmap) => roadmap.title))
+  .flat()
+  .concat([
+    'Frontend Beginner',
+    'Backend Beginner',
+    'DevOps Beginner',
+    'Full-Stack Developer',
+    'Data Structures & Algorithms',
+    'Server Side Game Developer',
+    'Game Developer',
+  ]);
+
+const roleRoadmaps = (await getRoadmapsByTag('role-roadmap')).filter(
+  (roadmap) => !shownTitles.includes(roadmap.frontmatter.briefTitle),
+);
+const skillRoadmaps = (await getRoadmapsByTag('skill-roadmap')).filter(
+  (roadmap) => !shownTitles.includes(roadmap.frontmatter.briefTitle),
+);
+
+const otherRoadmaps = roleRoadmaps.concat(skillRoadmaps);
+if (otherRoadmaps.length > 0) {
+  groups.push({
+    group: 'Uncategorized',
+    roadmaps: otherRoadmaps.map((roadmap) => ({
+      title: roadmap.frontmatter.briefTitle,
+      link: roadmap.url,
+    })),
+  });
+}
 ---
 
 <BaseLayout
@@ -13,36 +342,67 @@ const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
   description={'Step by step guides and paths to learn different tools or technologies'}
   permalink={'/roadmaps'}
 >
-  <SimplePageHeader
-    title='Developer Roadmaps'
-    description='Step by step guides and paths to learn different tools or technologies'
-    showYouTubeAlert={true}
-  />
+  <div class=''>
+    <div class='bg-white py-12'>
+      <div class='container'>
+        <div class='flex flex-col items-center bg-white'>
+          <h1 class='text-5xl font-bold'>Developer Roadmaps</h1>
+          <p class='text-lg my-3'>
+            Browse ever-growing list of up-to-date, community driven roadmaps
+          </p>
+          <p class="flex flex-row gap-3">
+            <a class="inline-block bg-black py-1.5 text-base px-3.5 rounded-md text-white" href="#">
+              Draw your own roadmap
+            </a>
+            <a class="inline-block bg-gray-300 py-1.5 text-base px-3.5 rounded-md text-black" href="#">
+              Generate Roadmap with AI
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
 
-  <div class='flex bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
-    <div class='container'>
-      <div class='grid grid-cols-1 gap-1 sm:grid-cols-2 sm:gap-3'>
-        {
-          roleRoadmaps.map((roleRoadmap) => (
-            <GridItem
-              url={`/${roleRoadmap.id}`}
-              isNew={roleRoadmap.frontmatter.isNew}
-              title={roleRoadmap.frontmatter.title}
-              description={roleRoadmap.frontmatter.description}
-            />
-          ))
-        }
+    <div class='bg-gray-100 border-t'>
+      <div class='container flex flex-row gap-4'>
+        <div class='w-[180px] border-r pt-8 bg-gradient-to-l from-gray-100'>
+          <div class='sticky top-10 pb-20'>
+            <div class='grid grid-cols-1 gap-1'>
+              <a class='text-right pr-3 text-sm border-b pb-1 font-bold'> All Roadmaps</a>
+              {
+                groups.map((group) => (
+                  <a
+                    class='text-right pr-3 text-sm border-b py-1 text-gray-500 hover:text-gray-900 transition-all'
+                    href={`#${group.group.toLowerCase().replace(' ', '-')}`}
+                  >
+                    {group.group}
+                  </a>
+                ))
+              }
+            </div>
+          </div>
+        </div>
+        <div class='flex flex-grow flex-col gap-6 pt-8 pb-20'>
+          {
+            groups.map((group) => (
+              <div>
+                <h2 class='mb-2 text-xs uppercase tracking-wide text-gray-400'>
+                  {group.group}
+                </h2>
 
-        {
-          skillRoadmaps.map((skillRoadmap) => (
-            <GridItem
-              url={`/${skillRoadmap.id}`}
-              isNew={skillRoadmap.frontmatter.isNew}
-              title={skillRoadmap.frontmatter.title}
-              description={skillRoadmap.frontmatter.description}
-            />
-          ))
-        }
+                <div class='grid grid-cols-3 gap-1.5'>
+                  {group.roadmaps.map((roadmap) => (
+                    <a
+                      class='rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50'
+                      href={roadmap.link}
+                    >
+                      {roadmap.title}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            ))
+          }
+        </div>
       </div>
     </div>
   </div>