@eventcatalog/core 3.6.0 → 3.6.2

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 (28) 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-2DSMO5BZ.js → chunk-BWIAPGUD.js} +1 -1
  7. package/dist/{chunk-O7ZZX4CS.js → chunk-KOD6UMZD.js} +1 -1
  8. package/dist/{chunk-YQ2LO4G6.js → chunk-LFXU3MEP.js} +1 -1
  9. package/dist/{chunk-XTN3M6CM.js → chunk-NI3M6IVT.js} +1 -1
  10. package/dist/{chunk-O3LNFOFS.js → chunk-S3764NRV.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/MDX/ResourceRef/ResourceRef.astro +477 -0
  21. package/eventcatalog/src/components/MDX/components.tsx +2 -0
  22. package/eventcatalog/src/components/Search/SearchModal.tsx +1 -0
  23. package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx +12 -2
  24. package/eventcatalog/src/enterprise/plans/index.astro +125 -98
  25. package/eventcatalog/src/layouts/VerticalSideBarLayout.astro +8 -1
  26. package/eventcatalog/src/pages/docs/custom/feature.astro +45 -39
  27. package/eventcatalog/src/remark-plugins/resource-ref.ts +51 -0
  28. package/package.json +5 -3
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
@@ -52,10 +52,17 @@ import { getQueries } from '@utils/collections/queries';
52
52
  import { hasLandingPageForDocs } from '@utils/pages';
53
53
 
54
54
  import { isEventCatalogUpgradeEnabled, isEmbedEnabled, isCustomStylesEnabled } from '@utils/feature';
55
+ import { getUsers } from '@utils/collections/users';
56
+ import { getTeams } from '@utils/collections/teams';
55
57
 
56
58
  const catalogHasDefaultLandingPageForDocs = await hasLandingPageForDocs();
57
59
  const customDocs = await getCollection('customPages');
58
60
 
61
+ // Get users and teams for directory navigation
62
+ const users = await getUsers();
63
+ const teams = await getTeams();
64
+ const directoryDefaultUrl = users.length > 0 ? '/directory/users' : teams.length > 0 ? '/directory/teams' : '/directory/users';
65
+
59
66
  let events: any[] = [];
60
67
  let commands: any[] = [];
61
68
  let queries: any[] = [];
@@ -145,7 +152,7 @@ const navigationItems = [
145
152
  id: '/directory',
146
153
  label: 'Users & Teams',
147
154
  icon: Users,
148
- href: buildUrl('/directory/users'),
155
+ href: buildUrl(directoryDefaultUrl),
149
156
  current: currentPath.includes('/directory'),
150
157
  },
151
158
  ].filter((item) => {
package/eventcatalog/src/pages/docs/custom/feature.astro CHANGED
@@ -4,19 +4,21 @@ import { BookOpenIcon, FileText } from 'lucide-react';
4
4
  ---
5
5
 
6
6
  <VerticalSideBarLayout title="Custom Documentation" showNestedSideBar={false}>
7
- <div class="min-h-[calc(100vh-60px)] bg-white">
7
+ <div class="min-h-[calc(100vh-60px)] bg-[rgb(var(--ec-page-bg))]">
8
8
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
9
9
  {/* Hero Section */}
10
10
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
11
11
  <div>
12
- <div class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 font-medium text-sm mb-6">
12
+ <div
13
+ class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 font-medium text-sm mb-6"
14
+ >
13
15
  <FileText className="w-4 h-4 mr-2" />
14
16
  New: Bring your documentation into EventCatalog
15
17
  </div>
16
- <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">
18
+ <h1 class="text-4xl font-bold text-[rgb(var(--ec-page-text))] tracking-tight mb-4">
17
19
  Document Everything. Share Knowledge. Build Better.
18
20
  </h1>
19
- <p class="text-xl text-gray-600 mb-8">
21
+ <p class="text-xl text-[rgb(var(--ec-page-text-muted))] mb-8">
20
22
  Add your own documentation to EventCatalog — from ADRs and system guides to runbooks and onboarding material. Connect
21
23
  your knowledge to your architecture.
22
24
  </p>
@@ -37,14 +39,14 @@ import { BookOpenIcon, FileText } from 'lucide-react';
37
39
  <a
38
40
  href="https://www.eventcatalog.cloud"
39
41
  target="_blank"
40
- 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"
42
+ 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"
41
43
  >
42
44
  Try for free
43
45
  </a>
44
46
  </div>
45
- <p class="text-sm text-gray-500">
47
+ <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">
46
48
  Available with EventCatalog Starter or Scale plans
47
- <a href="https://www.eventcatalog.dev/pricing" class="text-blue-600 font-medium block"
49
+ <a href="https://www.eventcatalog.dev/pricing" class="text-blue-600 dark:text-blue-400 font-medium block"
48
50
  >Try free for 14 days, no credit card required</a
49
51
  >
50
52
  </p>
@@ -62,7 +64,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
62
64
  <img
63
65
  src="/images/custom-docs-placeholder.png"
64
66
  alt="Custom Documentation Preview"
65
- class="rounded-xl shadow-xl border border-gray-200"
67
+ class="rounded-xl shadow-xl border border-[rgb(var(--ec-page-border))]"
66
68
  />
67
69
  </div>
68
70
  </div>
@@ -70,75 +72,79 @@ import { BookOpenIcon, FileText } from 'lucide-react';
70
72
 
71
73
  {/* Features Section */}
72
74
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
73
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
74
- <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
75
- <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
75
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
76
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
77
+ <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
76
78
  <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"></path>
77
79
  </svg>
78
80
  </div>
79
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Centralized Knowledge</h3>
80
- <p class="text-gray-600">
81
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Centralized Knowledge</h3>
82
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
81
83
  Keep architecture decisions, system guides, and runbooks in one place — easy to access, easy to trust.
82
84
  </p>
83
85
  </div>
84
86
 
85
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
86
- <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
87
- <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
87
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
88
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
89
+ <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
88
90
  <path
89
91
  d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
90
92
  ></path>
91
93
  </svg>
92
94
  </div>
93
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Rich Formatting</h3>
94
- <p class="text-gray-600">
95
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Rich Formatting</h3>
96
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
95
97
  Use Markdown, diagrams, code blocks, and EventCatalog components to create structured, useful documentation.
96
98
  </p>
97
99
  </div>
98
100
 
99
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
100
- <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
101
- <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
101
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
102
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
103
+ <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
102
104
  <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"
103
105
  ></path>
104
106
  </svg>
105
107
  </div>
106
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Version Control</h3>
107
- <p class="text-gray-600">Track changes and ensure your documentation grows alongside your system.</p>
108
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Version Control</h3>
109
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
110
+ Track changes and ensure your documentation grows alongside your system.
111
+ </p>
108
112
  </div>
109
113
 
110
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
111
- <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
112
- <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
114
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
115
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
116
+ <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
113
117
  <path
114
118
  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
115
119
  ></path>
116
120
  </svg>
117
121
  </div>
118
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Documentation Ownership</h3>
119
- <p class="text-gray-600">Assign and track document owners, making it easy to find the right person in seconds.</p>
122
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Documentation Ownership</h3>
123
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
124
+ Assign and track document owners, making it easy to find the right person in seconds.
125
+ </p>
120
126
  </div>
121
127
 
122
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
123
- <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
124
- <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
128
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
129
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
130
+ <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
125
131
  <path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"></path>
126
132
  </svg>
127
133
  </div>
128
- <h3 class="text-lg font-semibold text-gray-900 mb-2">Customizable Sidebars</h3>
129
- <p class="text-gray-600">
134
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Customizable Sidebars</h3>
135
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
130
136
  Auto-generated and fully customizable navigation sidebars to organize your documentation perfectly.
131
137
  </p>
132
138
  </div>
133
139
 
134
- <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
135
- <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
136
- <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
140
+ <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
141
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
142
+ <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
137
143
  <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path>
138
144
  </svg>
139
145
  </div>
140
- <h3 class="text-lg font-semibold text-gray-900 mb-2">EventCatalog Chat</h3>
141
- <p class="text-gray-600">
146
+ <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">EventCatalog Chat</h3>
147
+ <p class="text-[rgb(var(--ec-page-text-muted))]">
142
148
  Interact with your documentation using AI-powered chat to find answers quickly and efficiently.
143
149
  </p>
144
150
  </div>
@@ -149,7 +155,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
149
155
  <a
150
156
  href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
151
157
  target="_blank"
152
- class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
158
+ class="text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors duration-150"
153
159
  >
154
160
  Not ready for custom documentation? You can hide this feature in settings
155
161
  </a>