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

---
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.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={roadmapData?.seo?.title}
  description={roadmapData.seo.description}
  keywords={roadmapData.seo.keywords}
  sponsor={roadmapData.sponsor}
  noIndex={roadmapData.isUpcoming}
>
  <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}
      />
    )
  }

  {
    !roadmapData.jsonUrl && (
      <MarkdownRoadmap>
        <roadmapFile.Content />
      </MarkdownRoadmap>
    )
  }

  <CaptchaScripts slot="after-footer" />
</BaseLayout>