[...slug].astro

---
import { getCollection, render } from 'astro:content';
import Docs from '../../layouts/Docs.astro';
import ShortcutReference from '../../components/ShortcutReference.astro';
import { shortcutReferenceHeadings } from '../../lib/shortcutReference';

export async function getStaticPaths() {
  const docs = await getCollection('docs');
  return docs.map((doc) => ({
    params: { slug: doc.id },
    props: { doc },
  }));
}

const { doc } = Astro.props;
const isShortcutReference = doc.id === 'reference/keyboard-shortcuts';
const rendered = isShortcutReference ? null : await render(doc);
const Content = rendered?.Content;
const headings = isShortcutReference
  ? shortcutReferenceHeadings
  : rendered?.headings ?? [];
---
<Docs
  title={doc.data.title}
  description={doc.data.description}
  headings={headings}
  currentId={doc.id}
>
  {isShortcutReference ? <ShortcutReference /> : Content && <Content />}
</Docs>