developer-roadmap/src/pages/guides/[guideId].astro

---
import GuideContent from '../../components/Guide/GuideContent.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getAllGuides, type GuideFileType } from '../../lib/guide';
import { getOpenGraphImageUrl } from '../../lib/open-graph';
import { replaceVariables } from '../../lib/markdown';

export interface Props {
  guide: GuideFileType;
}

export async function getStaticPaths() {
  const guides = (await getAllGuides()).filter(
    (guide) => !guide.frontmatter.excludedBySlug,
  );

  return guides.map((guide) => ({
    params: { guideId: guide.id },
    props: { guide },
  }));
}

const { guideId } = Astro.params;
const { guide } = Astro.props;
const { frontmatter: guideData, author } = guide;

const ogImageUrl =
  guideData.seo.ogImageUrl ||
  getOpenGraphImageUrl({
    group: 'guide',
    resourceId: guideId,
  });
---

<BaseLayout
  title={guideData.seo.title}
  description={guideData.seo.description}
  permalink={`/guides/${guideId}`}
  canonicalUrl={guideData.canonicalUrl}
  ogImageUrl={ogImageUrl}
>
  <GuideContent guide={guide!} />

  <div slot="changelog-banner" />
</BaseLayout>