GistDetailPage

---
import type { GistFileFigure } from '../../lib/gist-files'
import type { BacklinkSource } from '../../lib/internal-links/backlink-graph'
import BreakoutContainer from '../0_atoms/BreakoutContainer.astro'
import Backlinks from '../2_organisms/Backlinks.astro'
import PostHeader from '../2_organisms/PostHeader.astro'
import GistFileExplorer from '../2_organisms/GistFileExplorer.astro'
import MarkdownBlock from '../2_organisms/MarkdownBlock.astro'
import Base from './Base.astro'

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

interface Props {
  title: string
  description: string
  noindex: boolean
  canonicalHref?: string
  copyablePostId?: string
  githubEditHref?: string
  openGraph?: OpenGraphProps
  /** Real pages use `Date` from content; Storybook static prerender fixtures may use ISO strings. */
  publishedAt: Date | string
  tags: string[]
  /** Pages pass a `Map`; Storybook static args serialize to a plain object — both are supported. */
  tagCounts: Map<string, number> | Record<string, number>
  postId: string
  panels: GistFileFigure[]
  backlinks: BacklinkSource[]
}

const {
  title,
  description,
  noindex,
  canonicalHref,
  copyablePostId,
  githubEditHref,
  openGraph,
  publishedAt,
  tags,
  tagCounts,
  postId,
  panels,
  backlinks,
} = Astro.props
---

<Base
  title={title}
  description={description}
  noindex={noindex}
  canonicalHref={canonicalHref}
  copyablePostId={copyablePostId}
  githubEditHref={githubEditHref}
  openGraph={openGraph}
>
  <article class="gist-page">
    <PostHeader
      title={title}
      postType="gist"
      publishedAt={publishedAt}
      tags={tags}
      tagCounts={tagCounts}
      postId={postId}
      secret={noindex}
    />
    <div class="gist-readme-wrap">
      <MarkdownBlock>
        <slot />
      </MarkdownBlock>
    </div>
    <BreakoutContainer width="wide">
      <GistFileExplorer panels={panels} />
    </BreakoutContainer>
    <div class="gist-page-backlinks">
      <Backlinks sources={backlinks} />
    </div>
  </article>
</Base>