---
// Renders every page of the `docs` content collection (see ../content.config.ts).
// Replaces the former file-system routing of docs/pages/**/*.mdx and the
// DocsMdxLayout adapter that mapped MDX front matter onto DocsLayout props.
import type { GetStaticPaths } from 'astro'
import { getCollection, render } from 'astro:content'
import DocsLayout from '@layouts/DocsLayout.astro'
import { docsUrlFromId } from '@lib/docs-pages'
import { markdownUrlFromDocsUrl } from '@lib/markdown-url'
import { callouts } from '@components/callouts/index.ts'
import { cssSection } from '@lib/scss-docs'

export const getStaticPaths = (async () => {
  const entries = await getCollection('docs')

  return entries.map((entry) => ({
    // the home page has no slug segments — `[...slug]` matches it with `undefined`
    params: { slug: entry.id === 'index' ? undefined : entry.id },
    props: { entry },
  }))
}) satisfies GetStaticPaths

// Astro.props is inferred from getStaticPaths — no Props interface needed.
const { entry } = Astro.props
const { data } = entry
const { Content, headings } = await render(entry)

const toc: { level: 2 | 3; text: string; id: string }[] = headings.filter((heading) => heading.depth === 2 || heading.depth === 3).map((heading) => ({ level: heading.depth as 2 | 3, text: heading.text, id: heading.slug }))

// DocsClassnames renders after the page body, so its heading is not in `headings`.
if (data.classnames) {
  toc.push({ level: 2, text: 'Class reference', id: 'class-reference' })
}
// DocsCssVars too; only the parts that exist in the sources get an entry.
const { css, sass } = await cssSection(data.cssVars, data.sassVars)
if (css || sass) {
  toc.push({ level: 2, text: 'CSS', id: 'css' })
  if (css) toc.push({ level: 3, text: 'Variables', id: 'css-variables' })
  if (sass) toc.push({ level: 3, text: 'Sass variables', id: 'sass-variables' })
}
---

<DocsLayout
  title={data.title}
  seoTitle={data.seoTitle}
  summary={data.summary}
  description={data.description}
  seoDescription={data.seoDescription}
  addedIn={data.addedIn}
  docsLibs={data.docsLibs}
  cssPlugins={data.cssPlugins}
  related={data.related}
  hidePagination={data.hidePagination}
  classnames={data.classnames}
  cssVars={data.cssVars}
  sassVars={data.sassVars}
  sourcePath={data.source}
  toc={toc}
  url={docsUrlFromId(entry.id)}
  markdownUrl={markdownUrlFromDocsUrl(docsUrlFromId(entry.id))}
  editPath={entry.filePath ? `docs/${entry.filePath}` : undefined}
>
  <Content components={callouts} />
</DocsLayout>