Content Renderer (Astro)

1---
2import type { ProcessedDocumentNode } from '@contentbit/core'
3import type { ComponentProps } from 'astro/types'
4 
5import { ContentBlocks } from '@contentbit/astro/components'
6 
7import Callout from './callout.astro'
8import Comparison from './comparison.astro'
9import Faq from './faq.astro'
10import KeyMetrics from './key-metrics.astro'
11import ProsCons from './pros-cons.astro'
12import QuickRef from './quick-ref.astro'
13import Steps from './steps.astro'
14import Tabs from './tabs.astro'
15 
16// The styled pack, keyed by block name. Add your custom blocks via the
17// `components` prop — they merge over these.
18const styledComponents: Record<string, unknown> = {
19  callout: Callout,
20  steps: Steps,
21  'key-metrics': KeyMetrics,
22  'quick-ref': QuickRef,
23  comparison: Comparison,
24  'pros-cons': ProsCons,
25  tabs: Tabs,
26  faq: Faq,
27}
28 
29interface Props {
30  document: ProcessedDocumentNode
31  components?: Record<string, unknown>
32  /**
33   * Host prose pipeline for Markdown between block islands and nested block
34   * children. Pass your Astro/Satteri renderer here if the rest of your site
35   * uses Astro's Markdown processor.
36   */
37  renderMarkdown?: ComponentProps<typeof ContentBlocks>['renderMarkdown']
38  onInvalid?: 'strict' | 'annotated' | 'fallback'
39}
40 
41const { document, components, renderMarkdown, onInvalid } = Astro.props
42---
43 
44<ContentBlocks
45  document={document}
46  components={{ ...styledComponents, ...components }}
47  renderMarkdown={renderMarkdown}
48  onInvalid={onInvalid}
49/>