Content Renderer (Astro)

---
import type { ProcessedDocumentNode } from '@contentbit/core'
import type { ComponentProps } from 'astro/types'

import { ContentBlocks } from '@contentbit/astro/components'

import Callout from './callout.astro'
import Comparison from './comparison.astro'
import Faq from './faq.astro'
import KeyMetrics from './key-metrics.astro'
import ProsCons from './pros-cons.astro'
import QuickRef from './quick-ref.astro'
import Steps from './steps.astro'
import Tabs from './tabs.astro'

// The styled pack, keyed by block name. Add your custom blocks via the
// `components` prop — they merge over these.
const styledComponents: Record<string, unknown> = {
  callout: Callout,
  steps: Steps,
  'key-metrics': KeyMetrics,
  'quick-ref': QuickRef,
  comparison: Comparison,
  'pros-cons': ProsCons,
  tabs: Tabs,
  faq: Faq,
}

interface Props {
  document: ProcessedDocumentNode
  components?: Record<string, unknown>
  /**
   * Host prose pipeline for Markdown between block islands and nested block
   * children. Pass your Astro/Satteri renderer here if the rest of your site
   * uses Astro's Markdown processor.
   */
  renderMarkdown?: ComponentProps<typeof ContentBlocks>['renderMarkdown']
  onInvalid?: 'strict' | 'annotated' | 'fallback'
}

const { document, components, renderMarkdown, onInvalid } = Astro.props
---

<ContentBlocks
  document={document}
  components={{ ...styledComponents, ...components }}
  renderMarkdown={renderMarkdown}
  onInvalid={onInvalid}
/>