developer-roadmap/src/pages/[roadmapId]/topics.astro

---
import RoadmapHeader from '../../components/RoadmapHeader.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getRoadmapIds, RoadmapFrontmatter } from '../../lib/roadmap';
import { getTopicsByRoadmapId } from '../../lib/topic';

interface Params extends Record<string, string | undefined> {
  roadmapId: string;
}

export async function getStaticPaths() {
  const roadmapIds = await getRoadmapIds();

  return roadmapIds.map((roadmapId) => ({
    params: { roadmapId },
  }));
}

const { roadmapId } = Astro.params as Params;
const topics = await getTopicsByRoadmapId(roadmapId);
const roadmapFile = await import(`../../roadmaps/${roadmapId}/${roadmapId}.md`);
const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
---

<BaseLayout
  title={`${roadmapData.title} Topics`}
  description={roadmapData.seo.description}
  keywords={roadmapData.seo.keywords}
  permalink={`/${roadmapId}/topics`}
>
  <RoadmapHeader
    description={roadmapData.description}
    title={`${roadmapData.featuredTitle} Topics`}
    roadmapId={roadmapId}
    hasSearch={true}
    hasTopics={false}
  />

  <div class='bg-gray-50 pt-5 pb-8 sm:pt-10 sm:pb-16'>
    <div class='container'>
      {
        topics.map((topic) => {
          // Breadcrumbs have three additional items e.g.
          //
          //     Roadmaps / Frontend / Topics / Internet / HTTP
          //     ---^----------^---------^----
          //
          // Subtracting 3 to get the total parent count
          const totalParentCount = topic.breadcrumbs.length - 3;

          return (
            <a
              data-topic={topic.heading.toLowerCase()}
              class:list={[
                'cursor-pointer text-sm sm:text-md border-gray-200 border py-1.5 px-2 sm:py-2 sm:px-2.5 rounded-md block mb-0.5 sm:mb-1',
                {
                  'bg-gray-400 hover:bg-gray-500': totalParentCount === 1,
                  'bg-gray-300 hover:bg-gray-400': totalParentCount === 2,
                  'bg-gray-100 hover:bg-gray-300': totalParentCount === 3,
                },
              ]}
              href={`${topic.url}`}
            >
              {topic.heading}
            </a>
          );
        })
      }
    </div>
  </div>
</BaseLayout>