developer-roadmap/src/pages/best-practices/[bestPracticeId].astro

---
import BestPracticeHeader from '../../components/BestPracticeHeader.astro';
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
import MarkdownFile from '../../components/MarkdownFile.astro';
import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
import UpcomingForm from '../../components/UpcomingForm.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { BestPracticeFrontmatter, getBestPracticeIds } from '../../lib/best-pratice';
import { generateArticleSchema } from '../../lib/jsonld-schema';

export async function getStaticPaths() {
  const bestPracticeIds = await getBestPracticeIds();

  return bestPracticeIds.map((bestPracticeId) => ({
    params: { bestPracticeId },
  }));
}

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

const { bestPracticeId } = Astro.params as Params;
const bestPracticeFile = await import(`../../best-practices/${bestPracticeId}/${bestPracticeId}.md`);
const bestPracticeData = bestPracticeFile.frontmatter as BestPracticeFrontmatter;

let jsonLdSchema = [];

if (bestPracticeData.schema) {
  const bestPracticeSchema = bestPracticeData.schema;
  jsonLdSchema.push(
    generateArticleSchema({
      url: `https://roadmap.sh/best-practices/${bestPracticeId}`,
      headline: bestPracticeSchema.headline,
      description: bestPracticeSchema.description,
      datePublished: bestPracticeSchema.datePublished,
      dateModified: bestPracticeSchema.dateModified,
      imageUrl: bestPracticeSchema.imageUrl,
    })
  );
}
---

<BaseLayout
  permalink={`/best-practices/${bestPracticeId}`}
  title={bestPracticeData?.seo?.title}
  description={bestPracticeData.seo.description}
  keywords={bestPracticeData.seo.keywords}
  sponsor={bestPracticeData.sponsor}
  noIndex={bestPracticeData.isUpcoming}
  jsonLd={jsonLdSchema}
>
  <BestPracticeHeader
    title={bestPracticeData.title}
    description={bestPracticeData.description}
    bestPracticeId={bestPracticeId}
    isUpcoming={bestPracticeData.isUpcoming}
  />

  <div class='bg-gray-50 py-4 sm:py-12'>
    {
      !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
        <div class='max-w-[1000px] container relative'>
          <ShareIcons
            description={bestPracticeData.featuredDescription}
            pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
          />

          <FrameRenderer
            roadmapId={bestPracticeId}
            description={bestPracticeData.description}
            jsonUrl={bestPracticeData.jsonUrl}
            dimensions={bestPracticeData.dimensions}
          />
        </div>
      )
    }

    {
      !bestPracticeData.isUpcoming && !bestPracticeData.jsonUrl && (
        <MarkdownFile>
          <bestPracticeFile.Content />
        </MarkdownFile>
      )
    }
  </div>

  {bestPracticeData.isUpcoming && <UpcomingForm />}
  <CaptchaScripts slot='after-footer' />
</BaseLayout>