@eventcatalog/core 4.12.0-beta.9 → 4.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/analytics/analytics.cjs +1 -1
  2. package/dist/analytics/analytics.js +2 -2
  3. package/dist/analytics/log-build.cjs +1 -1
  4. package/dist/analytics/log-build.js +3 -3
  5. package/dist/{chunk-K3DWGBGQ.js → chunk-DWTU2R2Z.js} +1 -1
  6. package/dist/{chunk-UIHG2TPV.js → chunk-MZ5QBEFA.js} +1 -1
  7. package/dist/{chunk-GNFKUOXD.js → chunk-Q46W7LGT.js} +1 -1
  8. package/dist/{chunk-YOIPWS7L.js → chunk-SQXIGSIJ.js} +1 -1
  9. package/dist/{chunk-4S47JELQ.js → chunk-UC3HZHW4.js} +1 -1
  10. package/dist/constants.cjs +1 -1
  11. package/dist/constants.js +1 -1
  12. package/dist/docs/development/01-getting-started/develop-and-build.md +18 -0
  13. package/dist/docs/development/ask-your-architecture/02-eventcatalog-assistant/02-configuration.md +4 -0
  14. package/dist/docs/development/components/components/27-code-group.md +95 -0
  15. package/dist/docs/development/components/components/28-columns.md +115 -0
  16. package/dist/docs/development/customization/05-custom-pages-and-api-routes/02-create-a-custom-page.md +21 -0
  17. package/dist/docs/development/customization/05-custom-pages-and-api-routes/04-reference.md +24 -0
  18. package/dist/docs/development/deployment/hosting-options.md +8 -0
  19. package/dist/docs/development/guides/resources/messages/09-add-usage-examples.md +103 -9
  20. package/dist/docs/development/guides/resources/schemas/04-explore-schemas/01-schema-explorer.md +79 -13
  21. package/dist/docs/development/upgrading/upgrading.md +8 -3
  22. package/dist/docs/development/upgrading/v4.md +1 -1
  23. package/dist/eventcatalog.cjs +1 -1
  24. package/dist/eventcatalog.js +10 -10
  25. package/dist/federation/federate.js +2 -2
  26. package/dist/generate.cjs +1 -1
  27. package/dist/generate.js +3 -3
  28. package/dist/utils/cli-logger.cjs +1 -1
  29. package/dist/utils/cli-logger.js +2 -2
  30. package/package.json +1 -1
@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
36
36
  var import_os = __toESM(require("os"), 1);
37
37
 
38
38
  // package.json
39
- var version = "4.12.0-beta.9";
39
+ var version = "4.12.0";
40
40
 
41
41
  // src/constants.ts
42
42
  var VERSION = version;
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  raiseEvent
3
- } from "../chunk-YOIPWS7L.js";
4
- import "../chunk-UIHG2TPV.js";
3
+ } from "../chunk-SQXIGSIJ.js";
4
+ import "../chunk-MZ5QBEFA.js";
5
5
  export {
6
6
  raiseEvent
7
7
  };
@@ -176,7 +176,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
176
176
  var import_os = __toESM(require("os"), 1);
177
177
 
178
178
  // package.json
179
- var version = "4.12.0-beta.9";
179
+ var version = "4.12.0";
180
180
 
181
181
  // src/constants.ts
182
182
  var VERSION = version;
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  log_build_default
3
- } from "../chunk-4S47JELQ.js";
3
+ } from "../chunk-UC3HZHW4.js";
4
4
  import "../chunk-ZAZHAVKB.js";
5
- import "../chunk-YOIPWS7L.js";
6
- import "../chunk-UIHG2TPV.js";
5
+ import "../chunk-SQXIGSIJ.js";
6
+ import "../chunk-MZ5QBEFA.js";
7
7
  import "../chunk-RFIXKATC.js";
8
8
  export {
9
9
  log_build_default as default
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  logger
3
- } from "./chunk-GNFKUOXD.js";
3
+ } from "./chunk-Q46W7LGT.js";
4
4
  import {
5
5
  cleanup,
6
6
  getEventCatalogConfigFile
@@ -1,5 +1,5 @@
1
1
  // package.json
2
- var version = "4.12.0-beta.9";
2
+ var version = "4.12.0";
3
3
 
4
4
  // src/constants.ts
5
5
  var VERSION = version;
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  VERSION
3
- } from "./chunk-UIHG2TPV.js";
3
+ } from "./chunk-MZ5QBEFA.js";
4
4
 
5
5
  // src/utils/cli-logger.ts
6
6
  import pc from "picocolors";
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  VERSION
3
- } from "./chunk-UIHG2TPV.js";
3
+ } from "./chunk-MZ5QBEFA.js";
4
4
 
5
5
  // src/analytics/analytics.js
6
6
  import os from "os";
@@ -5,7 +5,7 @@ import {
5
5
  } from "./chunk-ZAZHAVKB.js";
6
6
  import {
7
7
  raiseEvent
8
- } from "./chunk-YOIPWS7L.js";
8
+ } from "./chunk-SQXIGSIJ.js";
9
9
  import {
10
10
  getEventCatalogConfigFile,
11
11
  verifyRequiredFieldsAreInCatalogConfigFile
@@ -25,7 +25,7 @@ __export(constants_exports, {
25
25
  module.exports = __toCommonJS(constants_exports);
26
26
 
27
27
  // package.json
28
- var version = "4.12.0-beta.9";
28
+ var version = "4.12.0";
29
29
 
30
30
  // src/constants.ts
31
31
  var VERSION = version;
package/dist/constants.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  VERSION
3
- } from "./chunk-UIHG2TPV.js";
3
+ } from "./chunk-MZ5QBEFA.js";
4
4
  export {
5
5
  VERSION
6
6
  };
@@ -24,6 +24,24 @@ npm run dev
24
24
  ```
25
25
  If all goes well, EventCatalog will now be serving your project on http://localhost:3000/. Visit that link in your browser and see your new site!
26
26
 
27
+ ### Clear the development cache
28
+
29
+ <AddedIn version="4.12.0" />
30
+
31
+ EventCatalog runs directly in your project and keeps generated files, such as content caches, types, and runtime metadata, in the `.astro/` folder.
32
+
33
+ If the development server shows stale content, start it with `--force-recreate`. This clears and regenerates the whole `.astro/` folder.
34
+
35
+ ```bash
36
+ npx eventcatalog dev --force-recreate
37
+ ```
38
+
39
+ Keep `.astro/` in your `.gitignore` and `.dockerignore` files. New catalogs created with `create-eventcatalog` include it in both.
40
+
41
+ :::info Upgrading from an older version?
42
+ Before 4.12, EventCatalog copied itself into a `.eventcatalog-core/` folder in your project. EventCatalog no longer creates this folder. Once any older EventCatalog processes have stopped, you can delete it. `eventcatalog dev` and `eventcatalog build` tell you when the folder is safe to delete.
43
+ :::
44
+
27
45
  ## Build and preview your catalog
28
46
 
29
47
  To check the version of your site that will be created at build time, quit the dev server (Ctrl + C) and run the appropriate build command in your terminal:
@@ -52,6 +52,10 @@ _Example of installing the OpenAI model:_
52
52
  npm install @ai-sdk/openai
53
53
  ```
54
54
 
55
+ :::info AI SDK version
56
+ From EventCatalog 4.12, the assistant uses [AI SDK v7](https://ai-sdk.dev/). Install a provider package that supports AI SDK v7, for example `@ai-sdk/openai@^4`. If you have [custom tools](/docs/development/ask-your-architecture/eventcatalog-assistant/bring-your-own-tools) that use AI SDK v6 APIs, update them to the v7 equivalents.
57
+ :::
58
+
55
59
  #### Configuring `eventcatalog.chat.js`
56
60
 
57
61
  This file will provide the model and any model configuration to EventCatalog.
@@ -0,0 +1,95 @@
1
+ ---
2
+ sidebar_position: 7.1
3
+ keywords:
4
+ - components
5
+ - code group
6
+ - code examples
7
+ sidebar_label: CodeGroup
8
+ title: CodeGroup
9
+ description: Show the same code example in several languages or files
10
+ ---
11
+
12
+ import AddedIn from '@site/src/components/MDX/AddedIn';
13
+
14
+ <AddedIn version="4.11.0"/>
15
+
16
+ The `<CodeGroup />` component groups several fenced code blocks into one panel. Readers switch between them with tabs or a dropdown, and copy the one they need.
17
+
18
+ Use it when the same example exists in more than one language, or when an example is split across several files.
19
+
20
+ ![CodeGroup in dropdown mode, showing a TypeScript example with a language picker for TypeScript, Python, Java, C#, and Go](./img/code-group-dropdown.png)
21
+
22
+ **Example**
23
+
24
+ Wrap your code blocks in `<CodeGroup>`. The text after the language becomes the label for each block.
25
+
26
+ ````mdx title="/events/OrderCreated/index.mdx"
27
+ <CodeGroup>
28
+
29
+ ```ts publish.ts
30
+ await client.publish('OrderCreated', order);
31
+ ```
32
+
33
+ ```python publish.py
34
+ client.publish("OrderCreated", order)
35
+ ```
36
+
37
+ </CodeGroup>
38
+ ````
39
+
40
+ Leave a blank line after the opening tag and before the closing tag, so the code blocks are parsed as Markdown.
41
+
42
+ ### Output
43
+
44
+ ![CodeGroup with TypeScript and Python tabs, shown next to an explanation using Columns](./img/columns-code-group.png)
45
+
46
+ ### Labels
47
+
48
+ Each code block needs a label. EventCatalog picks it in this order:
49
+
50
+ 1. A `title` in the code fence, for example ` ```ts title="publish.ts" `
51
+ 1. The first word after the language, for example ` ```ts publish.ts `
52
+ 1. The language, for example `ts`
53
+
54
+ EventCatalog also shows an icon for the language of each block, for example TypeScript, Python, Java, Go, C#, or JSON.
55
+
56
+ When a reader picks a block, every other code group on the page with a block of the same label switches too. If a page has several examples that each include `publish.py`, choosing Python once shows Python everywhere.
57
+
58
+ ### Use a dropdown
59
+
60
+ Tabs work well for two or three blocks. For more, add `dropdown` to show a language picker instead.
61
+
62
+ ````mdx title="/events/OrderCreated/index.mdx"
63
+ <CodeGroup dropdown>
64
+
65
+ ```javascript publish-order.js
66
+ await client.publish("OrderCreated", order);
67
+ ```
68
+
69
+ ```python publish_order.py
70
+ client.publish("OrderCreated", order)
71
+ ```
72
+
73
+ ```java PublishOrder.java
74
+ client.publish("OrderCreated", order);
75
+ ```
76
+
77
+ ```csharp PublishOrder.cs
78
+ await client.PublishAsync("OrderCreated", order);
79
+ ```
80
+
81
+ </CodeGroup>
82
+ ````
83
+
84
+ ### Props
85
+
86
+ | Prop | Type | Default | Description |
87
+ | ---- | ---- | ------- | ----------- |
88
+ | `dropdown` | `boolean` | `false` | Show a dropdown to switch between code blocks instead of tabs. |
89
+ | `className` | `string` | | Extra CSS classes for the group. |
90
+
91
+ ### Support
92
+
93
+ The `<CodeGroup />` component is supported in domains, systems, services, all messages, flows, changelogs, custom documentation pages, and [message usage examples](/docs/development/guides/resources/messages/add-usage-examples).
94
+
95
+ Pair it with [`<Columns />`](/docs/development/components/components/columns) to show code next to the text that explains it.
@@ -0,0 +1,115 @@
1
+ ---
2
+ sidebar_position: 7.2
3
+ keywords:
4
+ - components
5
+ - columns
6
+ - layout
7
+ sidebar_label: Columns
8
+ title: Columns
9
+ description: Place content side by side in your EventCatalog pages
10
+ ---
11
+
12
+ import AddedIn from '@site/src/components/MDX/AddedIn';
13
+
14
+ <AddedIn version="4.11.0"/>
15
+
16
+ The `<Columns />` component places content side by side. Each `<Column />` inside it is one column.
17
+
18
+ A common use is to put an explanation on the left and the code it describes on the right.
19
+
20
+ **Example**
21
+
22
+ ````mdx title="/events/OrderCreated/index.mdx"
23
+ <Columns cols={2}>
24
+
25
+ <Column>
26
+
27
+ ## Publish a review
28
+
29
+ Publish the event after the review is stored.
30
+
31
+ </Column>
32
+
33
+ <Column>
34
+
35
+ <CodeGroup>
36
+
37
+ ```ts publish.ts
38
+ await client.publish('ReviewSubmitted', review);
39
+ ```
40
+
41
+ ```python publish.py
42
+ client.publish("ReviewSubmitted", review)
43
+ ```
44
+
45
+ </CodeGroup>
46
+
47
+ </Column>
48
+
49
+ </Columns>
50
+ ````
51
+
52
+ Leave a blank line after each opening tag and before each closing tag, so the content inside is parsed as Markdown.
53
+
54
+ ### Output
55
+
56
+ ![Two columns, with an explanation on the left and a code group on the right](./img/columns-code-group.png)
57
+
58
+ ### Set the column widths
59
+
60
+ By default, every column has the same width. Use `ratio` to change that. The ratio needs one number per column.
61
+
62
+ ```mdx title="/events/OrderCreated/index.mdx"
63
+ <Columns cols={2} ratio="2:1">
64
+
65
+ <Column>
66
+
67
+ This column is twice as wide as the next one.
68
+
69
+ </Column>
70
+
71
+ <Column>
72
+
73
+ This column is narrower.
74
+
75
+ </Column>
76
+
77
+ </Columns>
78
+ ```
79
+
80
+ If the ratio does not match the number of columns, EventCatalog uses equal widths.
81
+
82
+ ### Keep a column in view
83
+
84
+ Add `sticky` to a column to keep it in view while the reader scrolls past a longer column next to it. This is useful for long explanations next to a short code sample.
85
+
86
+ ```mdx
87
+ <Column sticky>
88
+
89
+ ...
90
+
91
+ </Column>
92
+ ```
93
+
94
+ On narrow screens, columns stack on top of each other and `sticky` has no effect.
95
+
96
+ ### Props
97
+
98
+ **`<Columns />`**
99
+
100
+ | Prop | Type | Default | Description |
101
+ | ---- | ---- | ------- | ----------- |
102
+ | `cols` | `number` | `2` | Number of columns, from 1 to 4. |
103
+ | `ratio` | `string` | | Relative column widths, for example `"2:1"` or `"1:2:1"`. |
104
+ | `className` | `string` | | Extra CSS classes for the columns. |
105
+
106
+ **`<Column />`**
107
+
108
+ | Prop | Type | Default | Description |
109
+ | ---- | ---- | ------- | ----------- |
110
+ | `sticky` | `boolean` | `false` | Keep the column in view while the page scrolls. |
111
+ | `className` | `string` | | Extra CSS classes for the column. |
112
+
113
+ ### Support
114
+
115
+ The `<Columns />` component is supported in domains, systems, services, all messages, flows, changelogs, custom documentation pages, and [message usage examples](/docs/development/guides/resources/messages/add-usage-examples).
@@ -10,6 +10,7 @@ description: Add a custom Astro page to your EventCatalog.
10
10
  ---
11
11
 
12
12
  import ProjectTree from '@site/src/components/MDX/ProjectTree';
13
+ import AddedIn from '@site/src/components/MDX/AddedIn';
13
14
 
14
15
  This guide shows you how to add a custom page to your catalog.
15
16
 
@@ -172,6 +173,26 @@ const { id } = Astro.params;
172
173
 
173
174
  This page is available at `/custom/reports/:id`, for example `/custom/reports/orders`.
174
175
 
176
+ ## Render a full-width page
177
+
178
+ <AddedIn version="4.12.0" />
179
+
180
+ Custom pages get the same page padding as built-in pages. If your page needs the full width, for example a dashboard, pass `fullWidth` to the layout.
181
+
182
+ ```js title="pages/dashboard.astro"
183
+ ---
184
+ import Layout from '@catalog/layouts/Layout.astro';
185
+ ---
186
+
187
+ <Layout title="Dashboard" fullWidth>
188
+ <div class="h-full w-full">
189
+ <!-- Your full-width content -->
190
+ </div>
191
+ </Layout>
192
+ ```
193
+
194
+ See the [`Layout` props](/docs/development/customization/custom-pages-and-api-routes/reference#layout-props) for all options.
195
+
175
196
  ## Learn more
176
197
 
177
198
  Custom pages follow Astro's routing model. See the [Astro pages documentation](https://docs.astro.build/en/basics/astro-pages/) if you want to go deeper.
@@ -103,6 +103,30 @@ Use these aliases in custom pages.
103
103
  | `@catalog/utils` | Stable catalog data helpers such as `getServices`, `getDomains`, and `getEvents`. |
104
104
  | `@catalog/components/*` | Components from your catalog's top-level `components` directory. |
105
105
 
106
+ ## `Layout` props
107
+
108
+ `@catalog/layouts/Layout.astro` accepts these props.
109
+
110
+ ```js title="pages/reports.astro"
111
+ ---
112
+ import Layout from '@catalog/layouts/Layout.astro';
113
+ ---
114
+
115
+ <Layout title="Service reports" description="Operational views built from catalog data." sidebar={false}>
116
+ <h1>Service reports</h1>
117
+ </Layout>
118
+ ```
119
+
120
+ | Prop | Type | Default | Description |
121
+ | --- | --- | --- | --- |
122
+ | `title` | `string` | | Page title. Required. |
123
+ | `description` | `string` | | Page description used in the page metadata. |
124
+ | `sidebar` | `boolean` | `true` | Show the resource sidebar (domains, services, messages). |
125
+ | `showHeader` | `boolean` | `true` | Show the EventCatalog header (search and navigation). |
126
+ | `fullWidth` | `boolean` | `false` | Render content edge-to-edge without EventCatalog's page padding. Added in 4.12.0. |
127
+
128
+ By default, custom pages get the same page padding and theme text color as built-in pages, so they read well in light and dark mode. Set `fullWidth` when your page controls its own layout, for example a dashboard or an embedded tool. Full-width pages still inherit the theme text color.
129
+
106
130
  ## `@catalog/utils`
107
131
 
108
132
  Use `@catalog/utils` to read catalog resources from custom pages and API routes.
@@ -102,6 +102,14 @@ Then you can run the server with:
102
102
  docker run -p 3000:3000 eventcatalog-server
103
103
  ```
104
104
 
105
+ :::warning Your `.env` file is included in the server image
106
+
107
+ `COPY . .` copies your `.env` file into the image, so EventCatalog can read your license key and other keys (for example `OPENAI_API_KEY`) during the build and when the server runs.
108
+
109
+ Anyone who can pull the image can read these keys. Only push the image to a private registry, and do not share it publicly.
110
+
111
+ :::
112
+
105
113
  :::info "Why do I need a server to run EventCatalog?"
106
114
 
107
115
  Some features of EventCatalog require a server to run (e.g. [EventCatalog Chat](/features/ai-assistant) and [EventCatalog Authentication](/docs/development/authentication/introduction)).
@@ -13,16 +13,16 @@ sidebar_position: 7
13
13
  import AddedIn from '@site/src/components/MDX/AddedIn';
14
14
  import ProjectTree from '@site/src/components/MDX/ProjectTree';
15
15
 
16
- EventCatalog lets you attach example payloads to any message (event, command, or query). This can help your team understand exactly how your schemas can be used
16
+ EventCatalog lets you attach examples to any message (event, command, or query). This can help your team understand exactly how your schemas can be used
17
17
  in your architecture and provide them with real examples.
18
18
 
19
- Examples appear in the Schema Explorer under a **Usage Examples** tab alongside the schema, properties, and changelog tabs.
19
+ Examples appear in the [Schema Explorer](/docs/development/guides/resources/schemas/explore-schemas/schema-explorer) under an **Examples** tab alongside the schema, properties, and version tabs.
20
20
 
21
- ![Example](./imgs/examples.png)
21
+ ![Examples tab in the Schema Explorer showing a written example next to a code group with JavaScript, Python, Java, and C# snippets](./imgs/examples.png)
22
22
 
23
23
  ### Add examples
24
24
 
25
- Create an `examples/` folder inside your message directory and drop in any example files. EventCatalog supports any text-based format: JSON, YAML, XML, Protobuf, and more.
25
+ Create an `examples/` folder inside your message directory and drop in any example files. EventCatalog supports any text-based format: JSON, YAML, XML, Protobuf, Markdown, MDX, and more.
26
26
 
27
27
  <ProjectTree
28
28
  items={[
@@ -54,7 +54,99 @@ Create an `examples/` folder inside your message directory and drop in any examp
54
54
  ]}
55
55
  />
56
56
 
57
- The **Usage Examples** tab appears automatically when at least one example file is present. No frontmatter changes are required.
57
+ The **Examples** tab appears automatically when at least one example file is present. No frontmatter changes are required.
58
+
59
+ All examples for a message are shown on the same tab, one after another, ordered by file path.
60
+
61
+ ### Write examples in Markdown or MDX
62
+
63
+ <AddedIn version="4.11.0" />
64
+
65
+ Raw payloads show consumers the shape of a message, but not how to use it. Write your examples in Markdown or MDX to explain the scenario, call out important fields, and show code in more than one language.
66
+
67
+ <ProjectTree
68
+ items={[
69
+ {
70
+ name: 'OrderCreated',
71
+ type: 'folder',
72
+ defaultOpen: true,
73
+ children: [
74
+ { name: 'index.mdx' },
75
+ { name: 'schema.json' },
76
+ {
77
+ name: 'examples',
78
+ type: 'folder',
79
+ defaultOpen: true,
80
+ children: [{ name: 'index.mdx', highlight: true }],
81
+ },
82
+ ],
83
+ },
84
+ ]}
85
+ />
86
+
87
+ Markdown and MDX examples are rendered as documentation, not as source code. Use [`<Columns />`](/docs/development/components/components/columns) to put the explanation next to the code, and [`<CodeGroup />`](/docs/development/components/components/code-group) to show the same example in several languages.
88
+
89
+ :::info Other components
90
+ On the schema page (`/schemas/{type}/{id}/{version}`), MDX examples can use any EventCatalog [component](/docs/components/list). The preview panel on the `/schemas/explorer` list only supports `<Columns />`, `<Column />`, and `<CodeGroup />`, and shows MDX examples that use other components as source.
91
+ :::
92
+
93
+ ````mdx title="events/OrderCreated/examples/index.mdx"
94
+ ---
95
+ summary: Publish OrderCreated from checkout.
96
+ ---
97
+
98
+ <Columns cols={2}>
99
+
100
+ <Column>
101
+
102
+ ## Publish a single-item order
103
+
104
+ Publish an order containing one T-shirt after checkout succeeds.
105
+
106
+ ### Payload details
107
+
108
+ - `orderId` identifies the order; `customerId` identifies the customer.
109
+ - `total` uses integer minor units; `currency` is `GBP`.
110
+
111
+ </Column>
112
+
113
+ <Column>
114
+
115
+ <CodeGroup dropdown>
116
+
117
+ ```javascript publish-order.js
118
+ await client.publish("OrderCreated", {
119
+ orderId: "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d",
120
+ total: 4999,
121
+ currency: "GBP",
122
+ });
123
+ ```
124
+
125
+ ```python publish_order.py
126
+ client.publish("OrderCreated", {
127
+ "orderId": "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d",
128
+ "total": 4999,
129
+ "currency": "GBP",
130
+ })
131
+ ```
132
+
133
+ </CodeGroup>
134
+
135
+ </Column>
136
+
137
+ </Columns>
138
+ ````
139
+
140
+ Markdown and MDX examples support these frontmatter fields. Both are optional.
141
+
142
+ | Field | Type | Description |
143
+ | ----- | ---- | ----------- |
144
+ | `title` | `string` | Title for the example. When omitted, EventCatalog uses the first level-one heading, then the file name. |
145
+ | `summary` | `string` | Short description shown above the example. |
146
+
147
+ :::tip
148
+ You can put every example in a single `examples/index.mdx` file, or split them across several files. Use a horizontal rule (`---`) between examples in the same file to separate them.
149
+ :::
58
150
 
59
151
  ### Organise with subfolders
60
152
 
@@ -105,13 +197,15 @@ international-order.json:
105
197
  summary: An order with international shipping and customs information.
106
198
  ```
107
199
 
108
- All fields are optional. When `name` is omitted, EventCatalog uses the filename without its extension as the title.
200
+ All fields are optional. When `name` is omitted, EventCatalog uses the filename without its extension.
109
201
 
110
202
  | Field | Type | Description |
111
203
  | ----- | ---- | ----------- |
112
- | `name` | `string` | Display name shown in the examples list |
113
- | `summary` | `string` | Short description shown below the name |
114
- | `usage` | `string` | How-to-run snippet shown below the code block |
204
+ | `name` | `string` | Display name for the example |
205
+ | `summary` | `string` | Short description shown above the example |
206
+ | `usage` | `string` | How-to-run snippet shown below the example |
207
+
208
+ For Markdown and MDX examples, you can use frontmatter instead of the config file. Values in `examples.config.yaml` take precedence.
115
209
 
116
210
  ### Use the SDK
117
211
 
@@ -11,21 +11,22 @@ import AddedIn from '@site/src/components/MDX/AddedIn';
11
11
 
12
12
  The Schema Explorer lets your teams quickly find the schema, understand who owns it, and who is producing or consuming it (see [demo](https://demo.eventcatalog.dev/schemas)).
13
13
 
14
- ![Example](../img/schema-explorer.png)
14
+ ![Schema Explorer with a list of schemas on the left and the Review Submitted schema open on the right](../img/schema-explorer.png)
15
15
 
16
16
  Using the Schema Explorer, you can:
17
17
 
18
18
  - Quickly find schemas in your Architecture
19
- - View diffs between versions of your schemas
20
- - Quickly find who is consuming or producing your schemas
21
- - Schema ownership to query who owns a schema
19
+ - Read usage examples written by the team that owns the schema
20
+ - See who is producing or consuming a schema, and which flows it is part of
21
+ - Compare versions of your schemas
22
+ - See schema ownership and where the schema comes from
22
23
  - Get API (GET) access to your schemas for mocking or testing
23
24
 
24
25
  ### How to use the Schema Explorer?
25
26
 
26
27
  You can access the Schema Explorer from the sidebar, or by going to the `/schemas/explorer` page.
27
28
 
28
- The page will take all the schemas from your EventCatalog and render them in a searchable list.
29
+ The page will take all the schemas from your EventCatalog and render them in a searchable list. Select a schema to open it on the right.
29
30
 
30
31
  :::tip Schema Path
31
32
  You need to set the `schemaPath` in your schema frontmatter to the path to your schema file for Events, Queries and Commands.
@@ -33,19 +34,84 @@ You need to set the `schemaPath` in your schema frontmatter to the path to your
33
34
  For services you need to specify the path to your specification file in the `specifications` frontmatter.
34
35
  :::
35
36
 
36
- ![Example](../img/schema-explorer-2.png)
37
-
38
37
  ##### Filters
39
- You can use the filters to quickly find schemas in your Architecture. You can filter by name, message type and schema format.
40
38
 
41
- ##### Schema Preview
39
+ Use the search box to find schemas by name. Select the filter button next to it to filter by type (events, commands, queries, or specifications) and by schema format.
42
40
 
43
- The schema preview will show you a preview of the schema in a readable format, you can use the `Schema` button to switch between different views of your schema (if they are supported, JSON or Avro).
41
+ <img src={require('../img/schema-explorer-2.png').default} alt="Schema Explorer search box and filters for type and format" style={{ width: '100%', maxWidth: '360px' }} />
44
42
 
45
- ##### API Access
43
+ ##### Schema pages
44
+
45
+ Every message schema also has its own page at `/schemas/{type}/{id}/{version}`, for example `/schemas/events/OrderCreated/1.0.0`. Share this link when you want someone to look at one schema.
46
+
47
+ ### Schema tabs
48
+
49
+ <AddedIn version="4.11.0" />
50
+
51
+ Each schema is split into tabs. EventCatalog only shows a tab when there is something to show, for example the **Flows** tab only appears when the message is part of a flow.
52
+
53
+ | Tab | What it shows |
54
+ | --- | ------------- |
55
+ | **Schema** | The raw schema, with syntax highlighting and a copy button. |
56
+ | **Properties** | A readable view of the schema properties (JSON Schema, Avro and Protobuf). |
57
+ | **Examples** | [Usage examples](/docs/development/guides/resources/messages/add-usage-examples) stored in the message's `examples/` folder. |
58
+ | **Producers & Consumers** | A graph of the services that produce and consume the message. |
59
+ | **Flows** | The [flows](/docs/development/guides/resources/flows/introduction) the message is part of. |
60
+ | **Versions** | Every version of the schema, with a side-by-side comparison. |
61
+ | **Details** | Schema metadata: format, version, file, source, and owners. |
62
+ | **API** | API access to the schema (EventCatalog Scale). |
63
+
64
+ ##### Link to a tab
65
+
66
+ The selected tab is stored in the `tab` query parameter, so you can link straight to it.
67
+
68
+ ```txt
69
+ /schemas/events/OrderCreated/1.0.0?tab=examples
70
+ ```
71
+
72
+ | Tab | `tab` value |
73
+ | --- | ----------- |
74
+ | Schema | `schema` (default) |
75
+ | Properties | `properties` |
76
+ | Examples | `examples` |
77
+ | Producers & Consumers | `producers-consumers` |
78
+ | Flows | `flows` |
79
+ | Versions | `versions` |
80
+ | Details | `details` |
81
+ | API | `api` |
82
+
83
+ If the tab does not exist for that message, EventCatalog opens the **Schema** tab.
84
+
85
+ ##### Examples
86
+
87
+ The **Examples** tab shows the examples your team has written for the message. Examples written in Markdown or MDX can explain the scenario and show code in several languages.
46
88
 
47
- For EventCatalog Scale users, you can get API (GET) access to your schemas for mocking or testing.
89
+ ![Examples tab showing a written example next to a code group](../img/schema-explorer-examples.png)
90
+
91
+ To add examples, see [Add usage examples](/docs/development/guides/resources/messages/add-usage-examples).
48
92
 
49
93
  ##### Producers and Consumers
50
94
 
51
- The producers and consumers section will show you who is producing or consuming the schema. You can click on the producer or consumer to see more information about them.
95
+ The **Producers & Consumers** tab shows the services that produce and consume the message, using the same graph as the message page. Click on a producer or consumer to see more information about them.
96
+
97
+ ![Producers and Consumers tab showing the Review API publishing Review Submitted, which the Review Moderation Worker subscribes to](../img/schema-explorer-producers-consumers.png)
98
+
99
+ ##### Flows
100
+
101
+ The **Flows** tab shows the flows the message is part of. If the message is used in more than one flow, pick the flow from the dropdown. Use **Open flow** to go to the flow page.
102
+
103
+ ![Flows tab showing the Review Submission flow](../img/schema-explorer-flows.png)
104
+
105
+ ##### Versions
106
+
107
+ The **Versions** tab lists every version of the schema. Select a version to view it, or pick a **From** and **To** version to compare them side by side. Use **Expand** to open the comparison in a larger view.
108
+
109
+ You can also switch versions from the version dropdown next to the schema name.
110
+
111
+ ##### Details
112
+
113
+ The **Details** tab shows the schema name, format, message type, version, file, and owners. When a schema comes from an external source, the tab also shows where it came from.
114
+
115
+ ##### API Access
116
+
117
+ For EventCatalog Scale users, you can get API (GET) access to your schemas for mocking or testing. See [Schema API](/docs/development/guides/resources/schemas/schema-api).
@@ -38,7 +38,11 @@ To upgrade your EventCatalog you can find the packages `@eventcatalog/core` your
38
38
  Once you upgrade the version number, run `npm install` to install the latest updates.
39
39
 
40
40
  :::tip
41
- If you don't see the changes you expect, try removing the `.eventcatalog-core` folder, `node_modules` folder and install fresh again.
41
+ If you don't see the changes you expect, try removing the `.astro` folder, the `.eventcatalog-core` folder (if your project has one) and the `node_modules` folder, then install fresh again.
42
+ :::
43
+
44
+ :::info
45
+ From EventCatalog 4.12, EventCatalog no longer creates a `.eventcatalog-core` folder. If your project still has one from an older version, you can delete it once any older EventCatalog processes have stopped.
42
46
  :::
43
47
 
44
48
  ### Having problems?
@@ -46,9 +50,10 @@ If you don't see the changes you expect, try removing the `.eventcatalog-core` f
46
50
  Trying to upgrade and having issues? Try these steps
47
51
 
48
52
  1. Delete `node_modules` folder
49
- 1. Delete `.eventcatalog-core` folder
53
+ 1. Delete `.astro` folder
54
+ 1. Delete `.eventcatalog-core` folder (if you have one)
50
55
  1. Delete `package-lock.json` (if you have one).
51
- 1. Run `npm run i`
56
+ 1. Run `npm install`
52
57
  1. Verify if issues are fixed
53
58
 
54
59
  Still having issues?
@@ -43,7 +43,7 @@ Before upgrading, we recommend:
43
43
 
44
44
  1. Create a branch for the upgrade.
45
45
  1. Upgrade `@eventcatalog/core`.
46
- 1. Remove `.eventcatalog-core`, `node_modules`, and your lock file if the catalog does not pick up the new version.
46
+ 1. Remove `.astro`, `.eventcatalog-core` (if you have one), `node_modules`, and your lock file if the catalog does not pick up the new version.
47
47
  1. Run your catalog locally and check custom pages, custom navigation, and visualiser links.
48
48
 
49
49
  ## Removed
@@ -181,7 +181,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
181
181
  var import_picocolors = __toESM(require("picocolors"), 1);
182
182
 
183
183
  // package.json
184
- var version = "4.12.0-beta.9";
184
+ var version = "4.12.0";
185
185
 
186
186
  // src/constants.ts
187
187
  var VERSION = version;
@@ -1,11 +1,11 @@
1
- import {
2
- log_build_default
3
- } from "./chunk-4S47JELQ.js";
4
- import "./chunk-ZAZHAVKB.js";
5
1
  import {
6
2
  runMigrations
7
3
  } from "./chunk-XUAF2H54.js";
8
4
  import "./chunk-CA4U2JP7.js";
5
+ import {
6
+ log_build_default
7
+ } from "./chunk-UC3HZHW4.js";
8
+ import "./chunk-ZAZHAVKB.js";
9
9
  import {
10
10
  FederationConflictError,
11
11
  FederationDiagnosticError,
@@ -14,14 +14,14 @@ import {
14
14
  import "./chunk-WRNH5C3U.js";
15
15
  import "./chunk-5EPNFDT5.js";
16
16
  import "./chunk-A2RZR3U4.js";
17
- import "./chunk-SDZQJTJW.js";
18
- import "./chunk-352FGP6W.js";
19
17
  import "./chunk-R7Z5ALYI.js";
20
18
  import {
21
19
  getFederationDiagnosticCounts,
22
20
  getVisibleFederationDiagnostics
23
21
  } from "./chunk-JJPB6EOZ.js";
24
22
  import "./chunk-FV56YFM4.js";
23
+ import "./chunk-SDZQJTJW.js";
24
+ import "./chunk-352FGP6W.js";
25
25
  import {
26
26
  getProjectOutDir,
27
27
  isAuthEnabled,
@@ -30,10 +30,10 @@ import {
30
30
  } from "./chunk-MDWB5HLO.js";
31
31
  import {
32
32
  generate
33
- } from "./chunk-K3DWGBGQ.js";
33
+ } from "./chunk-DWTU2R2Z.js";
34
34
  import {
35
35
  logger
36
- } from "./chunk-GNFKUOXD.js";
36
+ } from "./chunk-Q46W7LGT.js";
37
37
  import {
38
38
  resolve_catalog_dependencies_default
39
39
  } from "./chunk-36RYTYT5.js";
@@ -47,7 +47,7 @@ import {
47
47
  import {
48
48
  watch
49
49
  } from "./chunk-U63GDPPY.js";
50
- import "./chunk-YOIPWS7L.js";
50
+ import "./chunk-SQXIGSIJ.js";
51
51
  import {
52
52
  getAstroConfigPath
53
53
  } from "./chunk-VIJJ7JKH.js";
@@ -63,7 +63,7 @@ import {
63
63
  } from "./chunk-LFQJXLHG.js";
64
64
  import {
65
65
  VERSION
66
- } from "./chunk-UIHG2TPV.js";
66
+ } from "./chunk-MZ5QBEFA.js";
67
67
  import {
68
68
  getEventCatalogConfigFile,
69
69
  verifyRequiredFieldsAreInCatalogConfigFile
@@ -6,11 +6,11 @@ import {
6
6
  import "../chunk-WRNH5C3U.js";
7
7
  import "../chunk-5EPNFDT5.js";
8
8
  import "../chunk-A2RZR3U4.js";
9
- import "../chunk-SDZQJTJW.js";
10
- import "../chunk-352FGP6W.js";
11
9
  import "../chunk-R7Z5ALYI.js";
12
10
  import "../chunk-JJPB6EOZ.js";
13
11
  import "../chunk-FV56YFM4.js";
12
+ import "../chunk-SDZQJTJW.js";
13
+ import "../chunk-352FGP6W.js";
14
14
  import "../chunk-RFIXKATC.js";
15
15
  export {
16
16
  FederationConflictError,
package/dist/generate.cjs CHANGED
@@ -112,7 +112,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
112
112
  var import_picocolors = __toESM(require("picocolors"), 1);
113
113
 
114
114
  // package.json
115
- var version = "4.12.0-beta.9";
115
+ var version = "4.12.0";
116
116
 
117
117
  // src/constants.ts
118
118
  var VERSION = version;
package/dist/generate.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  generate
3
- } from "./chunk-K3DWGBGQ.js";
4
- import "./chunk-GNFKUOXD.js";
5
- import "./chunk-UIHG2TPV.js";
3
+ } from "./chunk-DWTU2R2Z.js";
4
+ import "./chunk-Q46W7LGT.js";
5
+ import "./chunk-MZ5QBEFA.js";
6
6
  import "./chunk-RFIXKATC.js";
7
7
  export {
8
8
  generate
@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
36
36
  var import_picocolors = __toESM(require("picocolors"), 1);
37
37
 
38
38
  // package.json
39
- var version = "4.12.0-beta.9";
39
+ var version = "4.12.0";
40
40
 
41
41
  // src/constants.ts
42
42
  var VERSION = version;
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  logger
3
- } from "../chunk-GNFKUOXD.js";
4
- import "../chunk-UIHG2TPV.js";
3
+ } from "../chunk-Q46W7LGT.js";
4
+ import "../chunk-MZ5QBEFA.js";
5
5
  export {
6
6
  logger
7
7
  };
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "license": "SEE LICENSE IN LICENSE",
9
9
  "type": "module",
10
- "version": "4.12.0-beta.9",
10
+ "version": "4.12.0",
11
11
  "publishConfig": {
12
12
  "access": "public"
13
13
  },