@eventcatalog/core 4.1.3 → 4.1.5

package/dist/docs/development/components/custom-components/06-add-client-side-scripts.md

@@ -0,0 +1,67 @@
+---
+sidebar_position: 6
+sidebar_label: Client-side scripts
+title: Add client-side scripts
+description: Add browser JavaScript to custom EventCatalog components.
+---
+
+Astro components render HTML by default. If your component needs browser behavior, add a `<script>` tag.
+
+## Add a copy button
+
+Create a component that copies text to the clipboard.
+
+```jsx title="/components/copy-command.astro"
+---
+const { command } = Astro.props;
+---
+
+<div class="not-prose flex items-center gap-2 rounded-lg border border-gray-200 p-3 dark:border-gray-800">
+  <code class="flex-1 text-sm">{command}</code>
+  <button type="button" data-copy-command={command} class="rounded-md border border-gray-200 px-3 py-1 text-sm dark:border-gray-700">
+    Copy
+  </button>
+</div>
+
+<script>
+  const buttons = document.querySelectorAll('[data-copy-command]');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', async () => {
+      const command = button.getAttribute('data-copy-command');
+      await navigator.clipboard.writeText(command);
+      button.textContent = 'Copied';
+    });
+  });
+</script>
+```
+
+Use it in a page.
+
+```tsx title="/docs/runbooks/deploy-order-service.mdx"
+import CopyCommand from '@catalog/components/copy-command.astro';
+
+<CopyCommand command="npm run deploy:orders" />
+```
+
+## Pass data through HTML attributes
+
+The component script runs when the page loads in the browser. If it needs values from `Astro.props`, render them as HTML attributes first.
+
+```jsx
+---
+const { message } = Astro.props;
+---
+
+<button data-message={message}>Show message</button>
+
+<script>
+  document.querySelectorAll('[data-message]').forEach((button) => {
+    button.addEventListener('click', () => {
+      alert(button.getAttribute('data-message'));
+    });
+  });
+</script>
+```
+
+Read the [Astro client-side scripts documentation](https://docs.astro.build/en/guides/client-side-scripts/) for more details.

package/dist/docs/development/components/custom-components/07-reference.md

@@ -0,0 +1,115 @@
+---
+sidebar_position: 7
+sidebar_label: Reference
+title: Custom components reference
+description: Reference for custom components in EventCatalog.
+---
+
+## Component directory
+
+Custom components live in the `components` directory at the root of your catalog.
+
+```txt
+my-catalog/
+└── components/
+    ├── service-card.astro
+    └── reusable-note.mdx
+```
+
+## Import path
+
+Use the `@catalog/components` alias to import custom components.
+
+```tsx
+import ServiceCard from '@catalog/components/service-card.astro';
+```
+
+## Supported file types
+
+| File type | Use for |
+| --- | --- |
+| `.astro` | Reusable UI, props, data fetching, browser scripts, and styling |
+| `.mdx` | Reusable Markdown content |
+
+## Astro component structure
+
+Astro components have a component script and a component template.
+
+```jsx
+---
+// Component script
+const { title } = Astro.props;
+---
+
+<!-- Component template -->
+<h2>{title}</h2>
+```
+
+Read the [Astro components documentation](https://docs.astro.build/en/basics/astro-components/) for the full syntax.
+
+## Props
+
+Read props with `Astro.props`.
+
+```jsx
+---
+const { title, summary } = Astro.props;
+---
+```
+
+Pass props from MDX.
+
+```tsx
+<ServiceCard title="Order Service" summary="Handles customer orders." />
+```
+
+## Frontmatter
+
+Resource frontmatter can be passed into components from MDX pages.
+
+```tsx
+<ServiceCard title={frontmatter.name} summary={frontmatter.summary} />
+```
+
+## Catalog config
+
+Import `eventcatalog.config.js` values with `@config`.
+
+```jsx
+---
+import config from '@config';
+---
+
+<span>{config.title}</span>
+```
+
+## Data fetching
+
+Use `await fetch()` in Astro component frontmatter for build-time data.
+
+```jsx
+---
+const response = await fetch('https://api.example.com/status');
+const status = await response.json();
+---
+```
+
+Use browser JavaScript when data should be fetched after the page loads.
+
+```jsx
+<div data-status class="not-prose">Loading...</div>
+
+<script>
+  const response = await fetch('/status.json');
+  const data = await response.json();
+  document.querySelector('[data-status]').textContent = data.status;
+</script>
+```
+
+## Related documentation
+
+- [Using components](/docs/development/components/using-components)
+- [Built-in components](/docs/components)
+- [Astro components](https://docs.astro.build/en/basics/astro-components/)
+- [Astro data fetching](https://docs.astro.build/en/guides/data-fetching/)
+- [Astro client-side scripts](https://docs.astro.build/en/guides/client-side-scripts/)

package/dist/docs/development/components/custom-components/_category_.json

@@ -0,0 +1,11 @@
+{
+  "label": "Write your own components",
+  "position": 7,
+  "collapsible": true,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index",
+    "slug": "components/custom-components",
+    "description": "Learn how to create reusable components for your EventCatalog documentation."
+  }
+}

package/dist/docs/development/components/{external-diagram-embeds/03-drawio.md → diagram-syntax/01-drawio.md}

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 2
+sidebar_position: 1
 keywords:
 - components
-sidebar_label: <DrawIO />
+sidebar_label: DrawIO
 title: <DrawIO />
 description: Embed a DrawIO diagram in your documentation
 id: drawio
@@ -43,4 +43,3 @@ The `<DrawIO />` component is supported in domains, services, all messages and [
 | Name                    | Type      | Default           | Required | Description                                                       |
 | ----------------------- | --------- | ----------------- | -------- | ----------------------------------------------------------------- |
 | `url`               | `string`  |               | Yes      | The URL of the DrawIO diagram to embed. To get the URL, click "File", "embed", then "Notion...", copy the URL to the component.
-

package/dist/docs/development/components/{external-diagram-embeds/04-figjam.md → diagram-syntax/02-figjam.md}

@@ -2,7 +2,7 @@
 sidebar_position: 2
 keywords:
 - components
-sidebar_label: <FigJam />
+sidebar_label: FigJam
 title: <FigJam />
 description: Embed a FigJam diagram in your documentation
 id: figjam
@@ -41,4 +41,3 @@ The `<FigJam />` component is supported in domains, services, all messages and [
 | Name                    | Type      | Default           | Required | Description                                                       |
 | ----------------------- | --------- | ----------------- | -------- | ----------------------------------------------------------------- |
 | `url`               | `string`  |               | Yes      | The embed URL of the FigJam diagram. To get the URL, click "Shared", "Get embed code", then copy the URL from the iframe.
-

package/dist/docs/development/components/diagram-syntax/{04-icepanel.md → 03-icepanel.md}

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 3
 keywords:
 - icepanel
 - diagrams
@@ -72,4 +72,3 @@ Each embedded IcePanel diagram includes a full screen button, allowing your team
 
 - [IcePanel documentation](https://docs.icepanel.io/) - Learn more about IcePanel and how to use it
 - [C4 model](https://c4model.com/) - Learn about the C4 model for visualizing software architecture
-- [IcePanel component reference](/docs/development/components/external-diagram-embeds/icepanel) - Full component documentation

package/dist/docs/development/components/diagram-syntax/04-likec4.md

@@ -0,0 +1,136 @@
+---
+sidebar_position: 4
+keywords:
+- likec4
+- diagrams
+- architecture
+- c4
+sidebar_label: LikeC4
+title: Using LikeC4
+description: Embed LikeC4 architecture diagrams in EventCatalog pages
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="3.47.2" />
+
+EventCatalog supports embedding [LikeC4](https://likec4.dev) diagrams in all your markdown files via the `<LikeC4View />` component.
+
+LikeC4 is an architecture-as-code tool that lets you model and visualize your system landscape using `.c4` source files. Views defined in those files can be rendered directly inside EventCatalog documentation pages.
+
+## Install dependencies
+
+LikeC4 support is opt-in. Add the required packages as dev dependencies in your EventCatalog project:
+
+```bash
+# npm
+npm install --save-dev likec4@1.55.1 @likec4/icons@1.46.4
+
+# pnpm
+pnpm add -D likec4@1.55.1 @likec4/icons@1.46.4
+
+# yarn
+yarn add -D likec4@1.55.1 @likec4/icons@1.46.4
+```
+
+EventCatalog uses React 18, so install `likec4@1.55.1`. Newer LikeC4 versions may require React 19.
+
+EventCatalog auto-detects `.c4` files in your project. When it finds them it loads the LikeC4 Vite plugin automatically. If `.c4` files are present but the `likec4` package is not installed, EventCatalog will show an install message at startup.
+
+## Basic usage
+
+Add `.c4` source files anywhere in your EventCatalog project (outside `node_modules`), then reference a view by its id using `<LikeC4View />` in any markdown file.
+
+```likec4 /likec4/order-flow.c4
+specification {
+  element actor {
+    style {
+      shape person
+    }
+  }
+  element system
+}
+
+model {
+  customer = actor 'Customer'
+  ordering = system 'Ordering service'
+  payment = system 'Payment service'
+  fulfillment = system 'Fulfillment service'
+
+  customer -> ordering 'places order'
+  ordering -> payment 'authorizes payment'
+  ordering -> fulfillment 'requests shipment'
+}
+
+views {
+  view OrderFlow {
+    include *
+    autoLayout LeftRight
+  }
+}
+```
+
+```md /events/OrderCreated/index.mdx
+---
+# event frontmatter
+---
+
+<LikeC4View viewId="OrderFlow" height={300} />
+```
+
+## Multi-project setup
+
+When your workspace contains more than one LikeC4 project, each project needs a `likec4.config.json` file with a `name` field. EventCatalog reads these files at build time and registers each named project separately.
+
+```json likec4.config.json
+{
+  "name": "payments"
+}
+```
+
+A common layout is to keep each project in its own folder, with the `likec4.config.json` alongside the `.c4` files that belong to it. EventCatalog scans your whole project (outside `node_modules`), so you can place these folders wherever makes sense for your catalog:
+
+```
+your-catalog/
+├── eventcatalog.config.js
+├── likec4/
+│   ├── payments/
+│   │   ├── likec4.config.json    # { "name": "payments" }
+│   │   ├── model.c4
+│   │   └── views.c4
+│   └── orders/
+│       ├── likec4.config.json    # { "name": "orders" }
+│       ├── model.c4
+│       └── views.c4
+├── services/
+│   └── PaymentsService/
+│       └── index.mdx             # <LikeC4View viewId="..." project="payments" />
+└── events/
+    └── OrderCreated/
+        └── index.mdx
+```
+
+Pass the `project` prop to load a view from a specific project:
+
+```md /services/PaymentsService/index.mdx
+---
+# service frontmatter
+---
+
+<LikeC4View viewId="PaymentsOverview" project="payments" />
+```
+
+When `project` is omitted, the component uses the default (unnamed) project.
+
+## Props
+
+| Name      | Type     | Default  | Required | Description                                                                   |
+| --------- | -------- | -------- | -------- | ----------------------------------------------------------------------------- |
+| `viewId`  | `string` |          | Yes      | The id of the LikeC4 view to render.                                          |
+| `project` | `string` |          | No       | The name of the LikeC4 project (from `likec4.config.json`). Defaults to the default project. |
+| `height`  | `string` | `600px`  | No       | CSS height of the embedded diagram.                                           |
+
+## More resources
+
+- [LikeC4 documentation](https://likec4.dev/docs/) - Learn how to model your architecture with LikeC4
+- [LikeC4 view syntax](https://likec4.dev/docs/dsl/views/) - Reference for defining views in `.c4` files

package/dist/docs/development/components/{external-diagram-embeds/02-lucid.md → diagram-syntax/05-lucid.md}

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 2
+sidebar_position: 5
 keywords:
 - components
-sidebar_label: <Lucid />
+sidebar_label: Lucid
 title: <Lucid />
 description: Embed a Lucid diagram in your documentation
 id: lucid
@@ -44,4 +44,3 @@ The `<Lucid />` component is supported in domains, services, all messages and [c
 | Name                    | Type      | Default           | Required | Description                                                       |
 | ----------------------- | --------- | ----------------- | -------- | ----------------------------------------------------------------- |
 | `diagramId`               | `string`  |               | Yes      | The ID of the Lucid diagram to embed. You can find the ID in the URL of the Lucid diagram or by clicking "Share" in Lucid and copying the ID from the URL.
-

package/dist/docs/development/components/diagram-syntax/{01-mermaid.md → 06-mermaid.md}

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 6
 keywords:
 - mermaid
 sidebar_label: Mermaid

package/dist/docs/development/components/{external-diagram-embeds/01-miro.md → diagram-syntax/07-miro.md}

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 2
+sidebar_position: 7
 keywords:
 - components
-sidebar_label: <Miro />
+sidebar_label: Miro
 title: <Miro />
 description: Embed a Miro board in your documentation
 ---
@@ -61,4 +61,3 @@ The `<Miro />` component is supported in domains, services, all messages and [cu
 | `height`                | `string`  | `500`             | No       | The height of the Miro board.                                        |
 | `title`                 | `string`  |        | No       | The title of the Miro board.                                        |
 | `autoplay`              | `boolean` | `true`            | No       | Whether to skip the preloader of the miro board. ([miro docs](https://developers.miro.com/docs/miro-live-embed-with-a-direct-link#skip-the-preloader-screen))                                  |
-

package/dist/docs/development/components/diagram-syntax/{02-plantuml.md → 08-plantuml.md}

@@ -1,9 +1,9 @@
 ---
-sidebar_position: 2
+sidebar_position: 8
 keywords:
 - plantuml
 sidebar_label: PlantUML
-title: Using plantuml
+title: Using PlantUML
 description: Understanding how to use plantuml with EventCatalog
 ---
 
@@ -11,7 +11,7 @@ import AddedIn from '@site/src/components/MDX/AddedIn';
 
 <AddedIn version="2.46.0" />
 
-EventCatalog supports [plantuml](https://plantuml.com/) in all your markdown files.
+EventCatalog supports [PlantUML](https://plantuml.com/) in all your markdown files.
 
 This let's you create [Class Diagrams](https://plantuml.com/class-diagram), [Sequence Diagrams](https://plantuml.com/sequence-diagram), [Class Diagrams](https://plantuml.com/class-diagram), [State Diagrams](https://plantuml.com/state-diagram) and much more.
 

package/dist/docs/development/components/diagram-syntax/{03-structurizr.md → 09-structurizr.md}

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 9
 keywords:
 - mermaid
 sidebar_label: Structurizr

package/dist/docs/development/components/diagram-syntax/_category_.json

@@ -1,12 +1,12 @@
 {
-  "label": "Diagram syntax",
-  "position": 4,
+  "label": "Embed Diagrams",
+  "position": 3,
   "collapsible": true,
   "collapsed": true,
   "link": {
     "type": "generated-index",
     "slug": "components/diagram-syntax",
-    "title": "Diagram syntax",
+    "title": "Diagrams",
     "description": "Use diagram languages and tools inside EventCatalog documentation."
   }
 }

package/dist/docs/development/customization/01-customize-landing-page.md

@@ -1,24 +1,18 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 keywords:
 - EventCatalog landing page
-sidebar_label: Custom landing page
+sidebar_label: Custom homepage
 title: Customize landing page
 description: Customize landing pages in EventCatalog
 ---
 
 import AddedIn from '@site/src/components/MDX/AddedIn';
 
-<AddedIn version="2.37.1" />
-
-EventCatalog provides a landing page for your catalog, this is the first page that users see when they visit your catalog. See the demo [here](https://demo.eventcatalog.dev/).
+EventCatalog provides a landing page for your catalog, this is the first page that users see when they visit your catalog. 
 
 You can customize the landing page with your own content, HTML and EventCatalog components.
 
-:::info 
-Landing page customization is only available for customers on [paid plans](https://www.eventcatalog.dev/pricing). You can get a 14 day free trial of EventCatalog Starter Plan on [EventCatalog Cloud](https://eventcatalog.cloud).
-:::
-
 ### Example of a custom landing page
 
 You can add any HTML you want to your landing page, in this example we have added custom content using EventCatalog components, which includes the
@@ -31,8 +25,6 @@ visualizer for a domains, subdomains and flows.
 
 ## How to customize your landing page
 
-1. Setup and configure your [EventCatalog Starter or Scale License key](/docs/development/getting-started/configuration-overview#configuring-environment-variables).
-    - You can get a 14 day free trial of EventCatalog Starter Plan on [EventCatalog Cloud](https://eventcatalog.cloud).
 1. Create a new folder called `pages` and an Astro file called `homepage.astro`
     - Example: `/pages/homepage.astro`
 1. Add the contents to your Astro file.
@@ -111,10 +103,10 @@ const { Tile, Tiles, Flow, NodeGraph, Admonition } = Astro.props.components;
     <p class="text-gray-700 mb-4">Learn how to get started with EventCatalog, create domains, services, events, and commands.</p>
     <Tiles columns={3}>
       <Tile icon="BookOpenIcon" href="https://eventcatalog.dev/docs/development/getting-started" title="Getting started with EventCatalog" description="How to get started with EventCatalog" />
-      <Tile icon="RectangleGroupIcon" href="https://eventcatalog.dev/docs/development/guides/domains/creating-domains/adding-domains" title="Creating domains" description="Learn how to create domains in your event catalog" />
-      <Tile icon="ServerIcon" href="https://eventcatalog.dev/docs/development/guides/services/adding-services" title="Creating services" description="Learn how to create services in your event catalog" />
-      <Tile icon="ChatBubbleLeftIcon" iconColor="text-blue-500" href="https://eventcatalog.dev/docs/development/guides/messages/commands/introduction" title="Creating commands" description="Learn how to create commands in your event catalog" />
-      <Tile icon="BoltIcon" iconColor="text-orange-500" href="https://eventcatalog.dev/docs/development/guides/messages/events/introduction" title="Creating events" description="Learn how to create events in your event catalog" />
+      <Tile icon="RectangleGroupIcon" href="https://eventcatalog.dev/docs/development/guides/domains/create-domain" title="Create a domain" description="Learn how to create domains in your event catalog" />
+      <Tile icon="ServerIcon" href="https://eventcatalog.dev/docs/development/guides/resources/services/create-service" title="Creating services" description="Learn how to create services in your event catalog" />
+      <Tile icon="ChatBubbleLeftIcon" iconColor="text-blue-500" href="https://eventcatalog.dev/docs/development/guides/resources/messages/message-types/commands" title="Creating commands" description="Learn how to create commands in your event catalog" />
+      <Tile icon="BoltIcon" iconColor="text-orange-500" href="https://eventcatalog.dev/docs/development/guides/resources/messages/message-types/events" title="Creating events" description="Learn how to create events in your event catalog" />
       <Tile icon="UserGroupIcon" iconColor="text-green-500" href="https://eventcatalog.dev/docs/owners" title="Assigning owners to resources" description="Learn how to assign owners to resources in your event catalog" />
     </Tiles>
   </div>

package/dist/docs/development/customization/02-themes.md

@@ -1,4 +1,5 @@
 ---
+sidebar_position: 6
 keywords:
   - EventCatalog themes
   - dark mode