developer-roadmap/src/pages/roadmaps.astro

---
import GridItem from '../components/GridItem.astro';
import SimplePageHeader from '../components/SimplePageHeader.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getRoadmapsByTag } from '../lib/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: '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: '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: '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
  title='Developer Roadmaps'
  description={'Step by step guides and paths to learn different tools or technologies'}
  permalink={'/roadmaps'}
>
  <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='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>

                <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>
</BaseLayout>