---
import GuideHeader from '../../components/GuideHeader.astro';
import MarkdownFile from '../../components/MarkdownFile.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getGuideById } from '../../lib/guide';
import { getOpenGraphImageUrl } from '../../lib/open-graph';

const guideId = 'backend-developer-tools';
const guide = await getGuideById(guideId);

const { frontmatter: guideData } = guide!;

const ogImageUrl = getOpenGraphImageUrl({
  group: 'guides',
  resourceId: guideId,
});
---

<BaseLayout
  title={guideData.seo.title}
  description={guideData.seo.description}
  permalink={`/backend/${guideId}`}
  canonicalUrl={guideData.canonicalUrl}
  ogImageUrl={ogImageUrl}
>
  <GuideHeader guide={guide} />

  <div class='mx-auto max-w-[700px] py-5 sm:py-10'>
    <MarkdownFile>
      <guide.Content />
    </MarkdownFile>
  </div>
</BaseLayout>