@eventcatalog/core 3.5.2 → 3.6.1

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 (46) hide show
  1. package/README.md +1 -1
  2. package/dist/analytics/analytics.cjs +1 -1
  3. package/dist/analytics/analytics.js +2 -2
  4. package/dist/analytics/log-build.cjs +1 -1
  5. package/dist/analytics/log-build.js +3 -3
  6. package/dist/{chunk-YVX5C6L3.js → chunk-FCIJEGOL.js} +1 -1
  7. package/dist/{chunk-WO3AKJVB.js → chunk-N2VBSHPU.js} +1 -1
  8. package/dist/{chunk-OKWCSRLE.js → chunk-OFHFRJ42.js} +1 -1
  9. package/dist/{chunk-YOFNY2RC.js → chunk-SI6IEUYS.js} +1 -1
  10. package/dist/{chunk-YTZSPYJN.js → chunk-XRLZZXIS.js} +1 -1
  11. package/dist/constants.cjs +1 -1
  12. package/dist/constants.js +1 -1
  13. package/dist/eventcatalog.cjs +1 -1
  14. package/dist/eventcatalog.js +5 -5
  15. package/dist/generate.cjs +1 -1
  16. package/dist/generate.js +3 -3
  17. package/dist/utils/cli-logger.cjs +1 -1
  18. package/dist/utils/cli-logger.js +2 -2
  19. package/eventcatalog/astro.config.mjs +2 -1
  20. package/eventcatalog/src/components/EnvironmentDropdown.tsx +1 -1
  21. package/eventcatalog/src/components/MDX/ResourceRef/ResourceRef.astro +477 -0
  22. package/eventcatalog/src/components/MDX/components.tsx +2 -0
  23. package/eventcatalog/src/components/Search/SearchDataLoader.astro +23 -11
  24. package/eventcatalog/src/components/Search/SearchModal.tsx +17 -2
  25. package/eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx +12 -6
  26. package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx +37 -16
  27. package/eventcatalog/src/components/Tables/Discover/DiscoverTable.tsx +816 -0
  28. package/eventcatalog/src/components/Tables/Discover/FilterComponents.tsx +161 -0
  29. package/eventcatalog/src/components/Tables/Discover/columns.tsx +565 -0
  30. package/eventcatalog/src/components/Tables/Discover/index.ts +4 -0
  31. package/eventcatalog/src/components/Tables/columns/ContainersTableColumns.tsx +1 -1
  32. package/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx +1 -1
  33. package/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx +1 -1
  34. package/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx +1 -1
  35. package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx +54 -64
  36. package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx +15 -30
  37. package/eventcatalog/src/enterprise/plans/index.astro +125 -98
  38. package/eventcatalog/src/layouts/VerticalSideBarLayout.astro +1 -1
  39. package/eventcatalog/src/pages/api/sidebar-data.json.ts +22 -0
  40. package/eventcatalog/src/pages/discover/[type]/_index.data.ts +5 -1
  41. package/eventcatalog/src/pages/discover/[type]/index.astro +360 -41
  42. package/eventcatalog/src/pages/docs/custom/feature.astro +45 -39
  43. package/eventcatalog/src/remark-plugins/resource-ref.ts +51 -0
  44. package/eventcatalog/src/stores/sidebar-store/builders/shared.ts +1 -1
  45. package/eventcatalog/src/stores/sidebar-store/state.ts +25 -22
  46. package/package.json +3 -2
package/eventcatalog/src/enterprise/plans/index.astro CHANGED
@@ -17,45 +17,47 @@ import {
17
17
  ---
18
18
 
19
19
  <VerticalSideBarLayout title="EventCatalog Pro" showNestedSideBar={false}>
20
- <div class="min-h-[calc(100vh-60px)] bg-white">
20
+ <div class="min-h-[calc(100vh-60px)] bg-[rgb(var(--ec-page-bg))]">
21
21
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
22
22
  {/* Hero Section */}
23
23
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
24
24
  <div>
25
- <div class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 font-medium text-sm mb-6">
25
+ <div
26
+ class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 font-medium text-sm mb-6"
27
+ >
26
28
  <Rocket className="w-4 h-4 mr-2" />
27
29
  Upgrade your Catalog
28
30
  </div>
29
- <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Supercharge your EventCatalog</h1>
30
- <p class="text-xl text-gray-600 mb-8">
31
+ <h1 class="text-4xl font-bold text-[rgb(var(--ec-page-text))] tracking-tight mb-4">Supercharge your EventCatalog</h1>
32
+ <p class="text-xl text-[rgb(var(--ec-page-text-muted))] mb-8">
31
33
  Unlock advanced features like automated docs (e.g OpenAPI, AsyncAPI), Custom documentation, AI assistant, and catalog
32
34
  federation — all designed to help you scale without complexity.
33
35
  </p>
34
36
 
35
37
  {/* Integration Sources */}
36
38
  <div class="mb-8">
37
- <p class="text-sm font-medium text-gray-500 mb-4">Generate documentation from:</p>
39
+ <p class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] mb-4">Generate documentation from:</p>
38
40
  <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
39
41
  <a
40
42
  href="https://www.eventcatalog.dev/integrations/openapi"
41
- class="flex items-center space-x-2 bg-gray-50 rounded-lg px-4 py-2 hover:bg-gray-100 transition-colors duration-150"
43
+ class="flex items-center space-x-2 bg-[rgb(var(--ec-content-hover))] rounded-lg px-4 py-2 hover:bg-[rgb(var(--ec-content-active))] transition-colors duration-150"
42
44
  >
43
45
  <img src="/icons/openapi.svg" alt="OpenAPI" class="w-6 h-6" />
44
- <span class="text-sm font-medium">OpenAPI</span>
46
+ <span class="text-sm font-medium text-[rgb(var(--ec-page-text))]">OpenAPI</span>
45
47
  </a>
46
48
  <a
47
49
  href="https://www.eventcatalog.dev/integrations/asyncapi"
48
- class="flex items-center space-x-2 bg-gray-50 rounded-lg px-4 py-2 hover:bg-gray-100 transition-colors duration-150"
50
+ class="flex items-center space-x-2 bg-[rgb(var(--ec-content-hover))] rounded-lg px-4 py-2 hover:bg-[rgb(var(--ec-content-active))] transition-colors duration-150"
49
51
  >
50
52
  <img src="/icons/asyncapi.svg" alt="AsyncAPI" class="w-6 h-6" />
51
- <span class="text-sm font-medium">AsyncAPI</span>
53
+ <span class="text-sm font-medium text-[rgb(var(--ec-page-text))]">AsyncAPI</span>
52
54
  </a>
53
55
  <a
54
56
  href="https://www.eventcatalog.dev/integrations"
55
- class="flex items-center space-x-2 bg-gray-50 rounded-lg px-4 py-2 hover:bg-gray-100 transition-colors duration-150"
57
+ class="flex items-center space-x-2 bg-[rgb(var(--ec-content-hover))] rounded-lg px-4 py-2 hover:bg-[rgb(var(--ec-content-active))] transition-colors duration-150"
56
58
  >
57
- <Component className="w-6 h-6 text-purple-600" />
58
- <span class="text-sm font-medium">And more...</span>
59
+ <Component className="w-6 h-6 text-purple-600 dark:text-purple-400" />
60
+ <span class="text-sm font-medium text-[rgb(var(--ec-page-text))]">And more...</span>
59
61
  </a>
60
62
  </div>
61
63
  </div>
@@ -77,110 +79,123 @@ import {
77
79
  <a
78
80
  href="https://www.eventcatalog.dev"
79
81
  target="_blank"
80
- class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
82
+ class="inline-flex items-center justify-center px-6 py-3 border border-[rgb(var(--ec-page-border))] text-base font-medium rounded-lg text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors duration-150"
81
83
  >
82
84
  View documentation
83
85
  </a>
84
86
  </div>
85
- <p class="text-sm text-gray-500">Try free for 14 days, no credit card required</p>
87
+ <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">Try free for 14 days, no credit card required</p>
86
88
  </div>
87
89
 
88
90
  <div class="relative">
89
91
  <img
90
92
  src="/images/eventcatalog-upgrade.png"
91
93
  alt="EventCatalog Pro"
92
- class="w-full rounded-xl shadow-lg border border-gray-200"
94
+ class="w-full rounded-xl shadow-lg border border-[rgb(var(--ec-page-border))]"
93
95
  />
94
96
  </div>
95
97
  </div>
96
98
 
97
99
  {/* Why upgrade section */}
98
100
  <div class="mb-16">
99
- <h2 class="text-2xl font-semibold text-gray-900 mb-8">Why upgrade EventCatalog?</h2>
101
+ <h2 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mb-8">Why upgrade EventCatalog?</h2>
100
102
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
101
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
102
- <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
103
- <ScrollText className="w-6 h-6 text-purple-600" />
103
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
104
+ <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
105
+ <ScrollText className="w-6 h-6 text-purple-600 dark:text-purple-400" />
104
106
  </div>
105
- <h3 class="text-lg font-semibold text-gray-900 mb-2">A living source of truth</h3>
106
- <p class="text-gray-600">Keep docs in sync with your systems, ensuring your team always has accurate information.</p>
107
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">A living source of truth</h3>
108
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
109
+ Keep docs in sync with your systems, ensuring your team always has accurate information.
110
+ </p>
107
111
  </div>
108
112
 
109
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
110
- <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
111
- <Users className="w-6 h-6 text-purple-600" />
113
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
114
+ <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
115
+ <Users className="w-6 h-6 text-purple-600 dark:text-purple-400" />
112
116
  </div>
113
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Shared system understanding</h3>
114
- <p class="text-gray-600">Align teams and reduce tribal knowledge with centralized architecture documentation.</p>
117
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Shared system understanding</h3>
118
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
119
+ Align teams and reduce tribal knowledge with centralized architecture documentation.
120
+ </p>
115
121
  </div>
116
122
 
117
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
118
- <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
119
- <Component className="w-6 h-6 text-purple-600" />
123
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
124
+ <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
125
+ <Component className="w-6 h-6 text-purple-600 dark:text-purple-400" />
120
126
  </div>
121
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Architecture that scales</h3>
122
- <p class="text-gray-600">Grow without losing context of complexity, making architectural decisions easy to find.</p>
127
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Architecture that scales</h3>
128
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
129
+ Grow without losing context of complexity, making architectural decisions easy to find.
130
+ </p>
123
131
  </div>
124
132
  </div>
125
133
  </div>
126
134
 
127
135
  {/* Documentation Journey Section */}
128
136
  <div class="mb-16">
129
- <h2 class="text-2xl font-semibold text-gray-900 mb-4">Scales with your team and architecture</h2>
130
- <p class="text-gray-600 mb-8 max-w-3xl">
137
+ <h2 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mb-4">Scales with your team and architecture</h2>
138
+ <p class="text-[rgb(var(--ec-page-text-muted))] mb-8 max-w-3xl">
131
139
  From scattered documentation to a well-governed system, EventCatalog helps you control complexity with well governed
132
140
  documentation for your teams. Choose the plan that fits your needs.
133
141
  </p>
134
142
 
135
143
  <div class="relative py-8">
136
144
  {/* Journey Line */}
137
- <div class="absolute top-1/2 left-0 w-full h-1 bg-purple-200 transform -translate-y-1/2 hidden md:block"></div>
145
+ <div
146
+ class="absolute top-1/2 left-0 w-full h-1 bg-purple-200 dark:bg-purple-900/50 transform -translate-y-1/2 hidden md:block"
147
+ >
148
+ </div>
138
149
 
139
150
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative">
140
151
  {/* Stage 1 */}
141
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
152
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
142
153
  <div
143
- class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
154
+ class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
144
155
  >
145
- <Github className="w-6 h-6 text-purple-600" />
156
+ <Github className="w-6 h-6 text-purple-600 dark:text-purple-400" />
146
157
  </div>
147
- <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Community Edition</h3>
148
- <p class="text-gray-600 text-sm text-center">You're just beginning to document services, domains, and events.</p>
158
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2 text-center">Community Edition</h3>
159
+ <p class="text-[rgb(var(--ec-page-text-muted))] text-sm text-center">
160
+ You're just beginning to document services, domains, and events.
161
+ </p>
149
162
  </div>
150
163
 
151
164
  {/* Stage 2 */}
152
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
165
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
153
166
  <div
154
- class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
167
+ class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
155
168
  >
156
- <Flag className="w-6 h-6 text-purple-600" />
169
+ <Flag className="w-6 h-6 text-purple-600 dark:text-purple-400" />
157
170
  </div>
158
- <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Starter Plan</h3>
159
- <p class="text-gray-600 text-sm text-center">For teams formalizing their architecture documentation</p>
171
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2 text-center">Starter Plan</h3>
172
+ <p class="text-[rgb(var(--ec-page-text-muted))] text-sm text-center">
173
+ For teams formalizing their architecture documentation
174
+ </p>
160
175
  </div>
161
176
 
162
177
  {/* Stage 3 */}
163
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
178
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
164
179
  <div
165
- class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
180
+ class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
166
181
  >
167
- <Network className="w-6 h-6 text-purple-600" />
182
+ <Network className="w-6 h-6 text-purple-600 dark:text-purple-400" />
168
183
  </div>
169
- <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Scale Plan</h3>
170
- <p class="text-gray-600 text-sm text-center">
184
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2 text-center">Scale Plan</h3>
185
+ <p class="text-[rgb(var(--ec-page-text-muted))] text-sm text-center">
171
186
  Built for teams scaling across domains and integrating with external systems
172
187
  </p>
173
188
  </div>
174
189
 
175
190
  {/* Stage 4 */}
176
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
191
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
177
192
  <div
178
- class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
193
+ class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
179
194
  >
180
- <Rocket className="w-6 h-6 text-purple-600" />
195
+ <Rocket className="w-6 h-6 text-purple-600 dark:text-purple-400" />
181
196
  </div>
182
- <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Enterprise Plan</h3>
183
- <p class="text-gray-600 text-sm text-center">
197
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2 text-center">Enterprise Plan</h3>
198
+ <p class="text-[rgb(var(--ec-page-text-muted))] text-sm text-center">
184
199
  Designed for organizations building and governing complex event platforms
185
200
  </p>
186
201
  </div>
@@ -188,92 +203,104 @@ import {
188
203
 
189
204
  {/* Mobile Progress Indicators */}
190
205
  <div class="flex justify-center items-center space-x-2 mt-4 md:hidden">
191
- <div class="w-2 h-2 rounded-full bg-purple-600"></div>
192
- <div class="w-2 h-2 rounded-full bg-purple-400"></div>
193
- <div class="w-2 h-2 rounded-full bg-purple-300"></div>
194
- <div class="w-2 h-2 rounded-full bg-purple-200"></div>
206
+ <div class="w-2 h-2 rounded-full bg-purple-600 dark:bg-purple-400"></div>
207
+ <div class="w-2 h-2 rounded-full bg-purple-400 dark:bg-purple-500"></div>
208
+ <div class="w-2 h-2 rounded-full bg-purple-300 dark:bg-purple-600"></div>
209
+ <div class="w-2 h-2 rounded-full bg-purple-200 dark:bg-purple-700"></div>
195
210
  </div>
196
211
  </div>
197
212
  </div>
198
213
 
199
214
  {/* Features Section */}
200
215
  <div class="mb-16">
201
- <h2 class="text-2xl font-semibold text-gray-900 mb-8">Save time with EventCatalog</h2>
216
+ <h2 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mb-8">Save time with EventCatalog</h2>
202
217
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
203
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
204
- <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
205
- <ScrollText className="w-6 h-6 text-blue-600" />
218
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
219
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
220
+ <ScrollText className="w-6 h-6 text-blue-600 dark:text-blue-400" />
206
221
  </div>
207
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Custom Documentation</h3>
208
- <p class="text-gray-600">Add ADRs, runbooks, and technical guidelines to create a centralized knowledge hub.</p>
222
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Custom Documentation</h3>
223
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
224
+ Add ADRs, runbooks, and technical guidelines to create a centralized knowledge hub.
225
+ </p>
209
226
  </div>
210
227
 
211
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
212
- <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
213
- <Bot className="w-6 h-6 text-green-600" />
228
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
229
+ <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
230
+ <Bot className="w-6 h-6 text-green-600 dark:text-green-400" />
214
231
  </div>
215
- <h3 class="text-lg font-semibold text-gray-900 mb-2">AI Assistant</h3>
216
- <p class="text-gray-600">Chat with your catalog to quickly find information about your architecture.</p>
232
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">AI Assistant</h3>
233
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
234
+ Chat with your catalog to quickly find information about your architecture.
235
+ </p>
217
236
  </div>
218
237
 
219
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
220
- <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
221
- <Component className="w-6 h-6 text-purple-600" />
238
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
239
+ <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
240
+ <Component className="w-6 h-6 text-purple-600 dark:text-purple-400" />
222
241
  </div>
223
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Federation</h3>
224
- <p class="text-gray-600">Connect multiple catalogs into a unified view for centralized visibility across teams.</p>
242
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Federation</h3>
243
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
244
+ Connect multiple catalogs into a unified view for centralized visibility across teams.
245
+ </p>
225
246
  </div>
226
247
 
227
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
228
- <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
229
- <Code className="w-6 h-6 text-indigo-600" />
248
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
249
+ <div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center mb-4">
250
+ <Code className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
230
251
  </div>
231
- <h3 class="text-lg font-semibold text-gray-900 mb-2">IDE Integration</h3>
232
- <p class="text-gray-600">Access EventCatalog directly from your IDE for seamless documentation while coding.</p>
252
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">IDE Integration</h3>
253
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
254
+ Access EventCatalog directly from your IDE for seamless documentation while coding.
255
+ </p>
233
256
  </div>
234
257
 
235
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
236
- <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
237
- <Cpu className="w-6 h-6 text-yellow-600" />
258
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
259
+ <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center mb-4">
260
+ <Cpu className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
238
261
  </div>
239
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Automated Documentation</h3>
240
- <p class="text-gray-600">
262
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Automated Documentation</h3>
263
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
241
264
  Generate and maintain documentation automatically with integrations for AsyncAPI and OpenAPI.
242
265
  </p>
243
266
  </div>
244
267
 
245
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
246
- <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
247
- <LifeBuoy className="w-6 h-6 text-red-600" />
268
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
269
+ <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center mb-4">
270
+ <LifeBuoy className="w-6 h-6 text-red-600 dark:text-red-400" />
248
271
  </div>
249
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Priority Support</h3>
250
- <p class="text-gray-600">Get priority email support and assistance from the EventCatalog team.</p>
272
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Priority Support</h3>
273
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
274
+ Get priority email support and assistance from the EventCatalog team.
275
+ </p>
251
276
  </div>
252
277
  </div>
253
278
  </div>
254
279
 
255
280
  {/* Questions Section */}
256
281
  <div class="mt-16">
257
- <h2 class="text-2xl font-semibold text-gray-900 mb-8">Questions about EventCatalog?</h2>
282
+ <h2 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mb-8">Questions about EventCatalog?</h2>
258
283
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
259
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
260
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Request a Demo</h3>
261
- <p class="text-gray-600 mb-4">See EventCatalog in action with a personalized demo from our team.</p>
284
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
285
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Request a Demo</h3>
286
+ <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
287
+ See EventCatalog in action with a personalized demo from our team.
288
+ </p>
262
289
  <a
263
290
  href="mailto:hello@eventcatalog.dev"
264
- class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center"
291
+ class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium inline-flex items-center"
265
292
  >
266
293
  Schedule a demo
267
294
  <ExternalLink className="w-4 h-4 ml-1.5" />
268
295
  </a>
269
296
  </div>
270
297
 
271
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
272
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Join the community</h3>
273
- <p class="text-gray-600 mb-4">Join our growing community on Discord. Over 1000+ members.</p>
298
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
299
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Join the community</h3>
300
+ <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">Join our growing community on Discord. Over 1000+ members.</p>
274
301
  <a
275
302
  href="https://discord.gg/3rjaZMmrAm"
276
- class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center"
303
+ class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium inline-flex items-center"
277
304
  >
278
305
  Join the community
279
306
  <ExternalLink className="w-4 h-4 ml-1.5" />
package/eventcatalog/src/layouts/VerticalSideBarLayout.astro CHANGED
@@ -131,7 +131,7 @@ const navigationItems = [
131
131
  id: '/discover',
132
132
  label: 'Explore',
133
133
  icon: TableProperties,
134
- href: buildUrl('/discover/events'),
134
+ href: buildUrl('/discover/domains'),
135
135
  current: currentPath.includes('/discover/'),
136
136
  },
137
137
  {
package/eventcatalog/src/pages/api/sidebar-data.json.ts ADDED
@@ -0,0 +1,22 @@
1
+ import type { APIRoute } from 'astro';
2
+ import { getNestedSideBarData } from '@stores/sidebar-store/state';
3
+
4
+ /**
5
+ * API route that returns the sidebar navigation data as JSON.
6
+ * This is pre-rendered in static mode to avoid embedding the data in every HTML page.
7
+ * The data is fetched once and cached by the browser.
8
+ */
9
+ export const GET: APIRoute = async () => {
10
+ const sidebarData = await getNestedSideBarData();
11
+
12
+ return new Response(JSON.stringify(sidebarData), {
13
+ headers: {
14
+ 'Content-Type': 'application/json',
15
+ // Cache for 1 hour in browser, allow CDN to cache and revalidate
16
+ 'Cache-Control': 'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400',
17
+ },
18
+ });
19
+ };
20
+
21
+ // Pre-render this route in static mode so it becomes a static JSON file
22
+ export const prerender = true;
package/eventcatalog/src/pages/discover/[type]/_index.data.ts CHANGED
@@ -10,13 +10,15 @@ export class Page extends HybridPage {
10
10
 
11
11
  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
12
12
  const { getFlows } = await import('@utils/collections/flows');
13
+ const { getServices } = await import('@utils/collections/services');
13
14
 
14
15
  const loaders = {
15
16
  ...pageDataLoader,
16
17
  flows: getFlows,
18
+ services: getServices,
17
19
  };
18
20
 
19
- const itemTypes = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'] as const;
21
+ const itemTypes = ['events', 'commands', 'queries', 'domains', 'services', 'flows', 'containers'] as const;
20
22
  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
21
23
 
22
24
  return allItems.flatMap((items, index) => ({
@@ -38,10 +40,12 @@ export class Page extends HybridPage {
38
40
  }
39
41
 
40
42
  const { getFlows } = await import('@utils/collections/flows');
43
+ const { getServices } = await import('@utils/collections/services');
41
44
 
42
45
  const loaders = {
43
46
  ...pageDataLoader,
44
47
  flows: getFlows,
48
+ services: getServices,
45
49
  };
46
50
 
47
51
  // @ts-ignore