Skip to main content

Using components

View as Markdown

EventCatalog is powered by Astro and MDX. This gives you the flexibility to use prebuilt components or create your own components for your documentation.

How components work​

EventCatalog components are reusable .astro files that render HTML without adding client-side JavaScript by default. This keeps your catalog pages fast while still letting you build richer documentation blocks for your domains, services, messages, and custom pages.

An EventCatalog component has two main parts:

  • A component script, wrapped in ---, where you can import other components, read props, fetch data, and prepare values for the page.
  • A component template, where you write the HTML and expressions that should be rendered.

You can learn more in the Astro components documentation.

Because EventCatalog pages are written in MDX, you can mix Markdown with components in the same file. Use Markdown for the narrative, then drop in components when you want richer UI such as diagrams, tabs, schemas, steps, accordions, or visualizations.

Example​

You can include any component inside the markdown content. This example renders an Accordion component within an event.

/events/Orders/OrderAmended/index.mdx
---
id: OrderAmended
name: Order amended
version: 0.0.1
summary: |
  Indicates an order has been changed
owners:
    - dboyne
    - msmith
badges:
    - content: Recently updated!
      backgroundColor: green
      textColor: green
    - content: Channel:Apache Kafka
      backgroundColor: yellow
      textColor: yellow
---

## Overview

Event is raised when an order has been changed.

<Accordion title="Learn how to raise this event">
  You can run the following command to raise this event.

  ```sh
  bin/kafka-topics.sh --create --topic OrderAmended --bootstrap-server localhost:9092 --partitions 1 --replication-factor 1
  ``
</Accordion>

Example