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

---
import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap';
import FAQs, { type FAQType } from '../../components/FAQs/FAQs.astro';
import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro';
import RoadmapHeader from '../../components/RoadmapHeader.astro';
import { FolderKanbanIcon } from 'lucide-react';
import { EmptyProjects } from '../../components/Projects/EmptyProjects';
import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
import { TopicDetail } from '../../components/TopicDetail/TopicDetail';
import { UserProgressModal } from '../../components/UserProgress/UserProgressModal';
import BaseLayout from '../../layouts/BaseLayout.astro';
import {
  generateArticleSchema,
  generateFAQSchema,
} from '../../lib/jsonld-schema';
import { getOpenGraphImageUrl } from '../../lib/open-graph';
import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
import RoadmapNote from '../../components/RoadmapNote.astro';
import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion';
import ResourceProgressStats from '../../components/ResourceProgressStats.astro';

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(
  `../../data/roadmaps/${roadmapId}/${roadmapId}.md`
);

const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;

// update og for projects
const ogImageUrl =
  roadmapData?.seo?.ogImageUrl ||
  getOpenGraphImageUrl({
    group: 'roadmap',
    resourceId: roadmapId,
  });
---

<BaseLayout
  permalink={`/${roadmapId}`}
  title={roadmapData?.seo?.title}
  briefTitle={roadmapData.briefTitle}
  ogImageUrl={ogImageUrl}
  description={roadmapData.seo.description}
  keywords={roadmapData.seo.keywords}
  noIndex={true}
  resourceId={roadmapId}
  resourceType='roadmap'
>
  <div class='bg-gray-50'>
    <RoadmapHeader
      title={roadmapData.title}
      description={roadmapData.description}
      note={roadmapData.note}
      tnsBannerLink={roadmapData.tnsBannerLink}
      roadmapId={roadmapId}
      hasTopics={roadmapData.hasTopics}
      isUpcoming={roadmapData.isUpcoming}
      isForkable={roadmapData.isForkable}
      question={roadmapData.question}
      activeTab='projects'
    />

    <div class='container'>
      <div
        class='relative my-2.5 flex min-h-[400px] flex-col items-center justify-center rounded-lg border bg-white'
      >
        <EmptyProjects client:load />
      </div>
    </div>
  </div>
</BaseLayout>