GuideChapterPage

---
import type { BacklinkSource } from '../../lib/internal-links/backlink-graph'
import '../../styles/link-open-graph-preview.css'
import Base from './Base.astro'
import MarkdownBlock from '../2_organisms/MarkdownBlock.astro'
import PostHeader from '../2_organisms/PostHeader.astro'
import Backlinks from '../2_organisms/Backlinks.astro'
import Link from '../0_atoms/Link.astro'
import GuideChapterToc, { type TocChapter } from '../2_organisms/GuideChapterToc.astro'
import type { BreadcrumbItem } from '../2_organisms/Breadcrumb.astro'

interface OpenGraphProps {
  url: string
  imageUrl: string
  imageAlt: string
  ogTitle: string
  ogDescription?: string
}

interface PrevNext {
  title: string
  href: string
}

interface Props {
  title: string
  description?: string
  noindex: boolean
  canonicalHref?: string
  copyablePostId?: string
  githubEditHref?: string
  openGraph?: OpenGraphProps
  guideTitle: string
  guideHref: string
  chapters: TocChapter[]
  currentHref: string
  prev?: PrevNext
  next?: PrevNext
  postId: string
  backlinks: BacklinkSource[]
}

const {
  title,
  description,
  noindex,
  canonicalHref,
  copyablePostId,
  githubEditHref,
  openGraph,
  guideTitle,
  guideHref,
  chapters,
  currentHref,
  prev,
  next,
  postId,
  backlinks,
} = Astro.props

const breadcrumbItems: BreadcrumbItem[] = [
  { label: guideTitle, href: guideHref },
  { label: title },
]
---

<Base
  title={`${title} — ${guideTitle}`}
  description={description}
  noindex={noindex}
  width="wide"
  canonicalHref={canonicalHref}
  copyablePostId={copyablePostId}
  githubEditHref={githubEditHref}
  openGraph={openGraph}
>
  <div class="guide-chapter-layout grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_18rem] lg:gap-12">
    <article class="min-w-0">
      <PostHeader title={title} postType="guide" postId={postId} secret={noindex} class="mb-1" />
      <MarkdownBlock>
        <slot />
      </MarkdownBlock>
      <div class="select-none">
        {(prev || next) && (
          <nav
            class="meta mt-10 flex flex-wrap items-center justify-between gap-4 border-t border-border pt-6 text-sm text-ink-muted"
            aria-label="Chapter navigation"
          >
            {prev && (
              <Link href={prev.href} variant="muted" rel="prev">
                ← {prev.title}
              </Link>
            )}
            {next && (
              <Link
                href={next.href}
                variant="muted"
                rel="next"
                class={prev ? undefined : 'ml-auto'}
              >
                {next.title} →
              </Link>
            )}
          </nav>
        )}
        <Backlinks sources={backlinks} />
      </div>
    </article>
    <aside class="min-w-0 select-none">
      <GuideChapterToc
        chapters={chapters}
        variant="sidebar"
        currentHref={currentHref}
        guideTitle={guideTitle}
        guideHref={guideHref}
      />
    </aside>
  </div>
</Base>