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

---
import InteractiveRoadamp from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
import RoadmapHeader from '../../components/RoadmapHeader.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getRoadmapIds, RoadmapFrontmatter } from '../../lib/roadmap';

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

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

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

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

<BaseLayout title="">
  <RoadmapHeader
    description={roadmapData.description}
    title={roadmapData.title}
    roadmapPermalink={`/${roadmapId}`}
    hasTopics={roadmapData.hasTopics}
  />

  {
    roadmapData.jsonUrl && (
      <InteractiveRoadamp
        roadmapId={roadmapId}
        description={roadmapData.description}
        roadmapPermalink={`/${roadmapId}`}
        jsonUrl={roadmapData.jsonUrl}
        dimensions={roadmapData.dimensions}
      />
    )
  }

  <MarkdownRoadmap>
    <roadmapFile.Content />
  </MarkdownRoadmap>
</BaseLayout>