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

---
import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap';
import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro';
import RoadmapHeader from '../../components/RoadmapHeader.astro';
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 { Badge } from '../../components/Badge';
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';
import {
  getAllProjects,
  getProjectById,
  getProjectsByRoadmapId,
  ProjectFrontmatter,
} from '../../lib/project';
import AstroIcon from '../../components/AstroIcon.astro';
import MarkdownFile from '../../components/MarkdownFile.astro';
import Github from '../github.astro';

export async function getStaticPaths() {
  const projects = await getAllProjects();

  return projects
    .map((project) => project.id)
    .map((projectId) => ({
      params: { projectId },
    }));
}

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

const { projectId } = Astro.params as Params;

const project = await getProjectById(projectId);
const projectData = project.frontmatter as ProjectFrontmatter;

let jsonLdSchema = [];

const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png';
const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/projects/${projectId}.md`;
---

<BaseLayout
  permalink={`/projects/${projectId}`}
  title={projectData?.seo?.title}
  briefTitle={projectData.title}
  ogImageUrl={ogImageUrl}
  description={projectData.seo.description}
  keywords={projectData.seo.keywords}
  jsonLd={jsonLdSchema}
  resourceId={projectId}
  resourceType='project'
>
  <div class='bg-gray-50'>
    <div class='container'>
      <div
        class='my-3 flex flex-wrap flex-row items-center gap-1.5 rounded-md border bg-white px-2 py-2 text-sm'
      >
        <AstroIcon icon='map' class='h-4 w-4' />
        Relevant roadmaps <span class='flex flex-row flex-wrap gap-1'>
          {
            project.roadmaps.map((roadmap) => (
              <a
                class='bg-gray-500 text-white text-sm px-1.5 rounded hover:bg-black transition-colors'
                href={`/${roadmap.id}`}
              >
                {roadmap.frontmatter?.briefTitle}
              </a>
            ))
          }
        </span>
      </div>

      <div class='mb-3 overflow-hidden rounded-lg border bg-white p-5'>
        <div class='relative -mx-2 -mt-2 mb-5 rounded-lg bg-gray-100/70 p-5'>
          <div class='absolute right-2 top-2'>
            <Badge variant='yellow' text={projectData.difficulty} />
          </div>
          <div class='mb-5'>
            <h1 class='mb-1.5 text-3xl font-semibold'>{projectData.title}</h1>
            <p class='text-gray-500'>{projectData.description}</p>
          </div>

          <div class='mt-4'>
            <div class='flex flex-row gap-1.5 flex-wrap'>
              {
                projectData.skills.map((skill) => (
                  <Badge variant='green' text={skill} />
                ))
              }
            </div>
          </div>
        </div>

        <div
          class='prose max-w-full prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-h2:mb-3 prose-h2:mt-5 prose-h3:mb-1 prose-h3:mt-5 prose-p:mb-2 prose-pre:my-3 prose-ul:my-3.5 prose-hr:my-5 [&>ul>li]:my-1'
        >
          <project.Content />
        </div>

        <div
          class='mt-5 flex flex-wrap items-center justify-center rounded-lg bg-yellow-100 p-2.5 text-sm'
        >
          <AstroIcon class='mr-2 inline-block h-5 w-5' icon='github' />
          Found a mistake?
          <a
            class='ml-1 underline underline-offset-2'
            href={githubUrl}
            target='_blank'
          >
            Help us improve this page
          </a>
        </div>
      </div>
    </div>
  </div>
</BaseLayout>