Skip to main content

Adding components

The components directory is where your custom components will be created and stored.

Upgrading your catalog?

If you don't have a components directory, you will need to create one in the root of your catalog (e.g /my-catalog/components)

Types of components​

EventCatalog supports astro components and markdown components.

  1. Astro components - Dynamic components (recommended)
    • Example /my-catalog/components/my-component.astro
  2. Markdown components - Static markdown files
    • Example /my-catalog/components/my-component.md

Astro components (.astro)​

Component structure​

Astro components are split into two parts the script and the template.

---
// Component Script (JavaScript)
---
<!-- Component Template (HTML + JS Expressions) -->
  • Component script: Define variables, data, import components and make API requests (read more)
  • Component template: Determines the HTML output. Also supports style and script tags. (read more)

Example​

  1. First define your component.
/components/my-component.astro
---
# Import data from your eventcatalog.config.js file
import config from "@config"
# Access passed-in component props, like `<MyComponent title="Hello, World" />`
const { subtitle } = Astro.props;
---

<main>
    <span>This catalog belongs to the company:{config.organizationName}</span>
    <span>Data given to this component {subtitle}</span>
</main>

  1. Import your component inside your domain, service or message.
/events/OrderAccepted/index.md
---
id: OrderAccepted
name: Order Accepted
# ... other event data
---

<!-- Import the component into your page -->
import MyComponent from '@catalog/components/my-component.astro"

# Overview 

This event represents when an order has been accepted on our system.

<!-- Render the component and pass props into it -->
<MyComponent subtitle="This is a component" />

Read the full astro guide here.

Define variables inside your resources​

EventCatalog allows you to define variables inside your domains, services and messages that can be used to pass through to your custom components.

/events/OrderAccepted/index.md
---
id: OrderAccepted
name: Order Accepted
# ... other event data
---

<!-- Define your custom variable to use on this page -->
export const MyCustomVariable = "Hello world";

<!-- Import the component into your page -->
import MyComponent from '@catalog/components/my-component.astro"

# Overview 

This event represents when an order has been accepted on our system.

<!-- Render the component and pass custom variable to it -->
<MyComponent subtitle={MyCustomVariable} />

Reference frontmatter data in your components​

If you want to reference your domain, service or message data, you can reference the frontmatter information.

/events/OrderAccepted/index.md
---
id: OrderAccepted
name: Order Accepted
# ... other event data
---

<!-- Import the component into your page -->
import MyComponent from '@catalog/components/my-component.astro"

# Overview 

This event represents when an order has been accepted on our system.

<!-- Reference the name defined in your frontmatter -->
<MyComponent subtitle={frontmatter.name} />

Reference eventcatalog.config.js data in your components​

If you want to reference your eventcatalog.config.js data you can import it within your component.

/components/my-component.astro
---
# Import data from your eventcatalog.config.js file
import config from "@config"
---

<main>
    <span>This catalog belongs to the company: {config.organizationName}</span>
    <span>This catalog title is: {config.title}</span>
</main>