@eventcatalog/core 2.2.6 → 2.3.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.
- package/.github/workflows/verify-build.yml +2 -0
- package/.prettierrc +17 -9
- package/CHANGELOG.md +12 -0
- package/README.md +11 -7
- package/package.json +10 -8
- package/scripts/catalog-to-astro-content-directory.js +20 -0
- package/scripts/ci/test.js +24 -0
- package/scripts/watcher.js +12 -4
- package/src/components/DocsNavigation.astro +33 -24
- package/src/components/Header.astro +14 -11
- package/src/components/Lists/VersionList.astro +29 -17
- package/src/components/MDX/Accordion/Accordion.astro +5 -6
- package/src/components/MDX/Accordion/AccordionGroup.astro +1 -0
- package/src/components/MDX/NodeGraph/NodeGraph.astro +13 -8
- package/src/components/MDX/SchemaViewer/SchemaViewer.astro +45 -50
- package/src/components/Search.astro +16 -5
- package/src/components/Seo.astro +48 -54
- package/src/components/SideBars/DomainSideBar.astro +24 -6
- package/src/components/SideBars/MessageSideBar.astro +41 -10
- package/src/components/SideBars/ServiceSideBar.astro +54 -13
- package/src/layouts/CustomDocsPageLayout.astro +70 -23
- package/src/layouts/DiscoverLayout.astro +3 -1
- package/src/layouts/DocsLayout.astro +4 -4
- package/src/layouts/Footer.astro +19 -6
- package/src/pages/discover/[type]/index.astro +26 -21
- package/src/pages/docs/[type]/[id]/[version]/changelog/index.astro +68 -59
- package/src/pages/docs/[type]/[id]/[version]/index.astro +38 -20
- package/src/pages/docs/index.astro +13 -16
- package/src/pages/docs/teams/[id]/index.astro +24 -7
- package/src/pages/docs/users/[id]/index.astro +23 -6
- package/src/pages/visualiser/[type]/[id]/[version]/index.astro +12 -1
- package/tsconfig.json +3 -1
- package/vitest.config.ts +10 -0
|
@@ -16,18 +16,18 @@ import SEO from '../components/Seo.astro';
|
|
|
16
16
|
<head>
|
|
17
17
|
<SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
|
|
18
18
|
</head>
|
|
19
|
-
<body>
|
|
19
|
+
<body>
|
|
20
20
|
<div class="px-10 max-w-[96em] mx-auto">
|
|
21
21
|
<Header />
|
|
22
22
|
|
|
23
23
|
<div class="md:pt-20">
|
|
24
|
-
<nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2
|
|
25
|
-
<div class="w-full
|
|
24
|
+
<nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2">
|
|
25
|
+
<div class="w-full">
|
|
26
26
|
<SideBar />
|
|
27
27
|
</div>
|
|
28
28
|
</nav>
|
|
29
29
|
|
|
30
|
-
<div class="pl-0 sm:pl-64 lg:pl-72 xl:pl-80 w-full pt-0 pb-40
|
|
30
|
+
<div class="pl-0 sm:pl-64 lg:pl-72 xl:pl-80 w-full pt-0 pb-40">
|
|
31
31
|
<slot />
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
package/src/layouts/Footer.astro
CHANGED
|
@@ -1,14 +1,27 @@
|
|
|
1
1
|
---
|
|
2
|
-
import { buildUrl } from
|
|
3
|
-
|
|
2
|
+
import { buildUrl } from '@utils/url-builder';
|
|
4
3
|
---
|
|
5
4
|
|
|
6
5
|
<footer class="py-4 space-y-8 border-t border-gray-300">
|
|
7
6
|
<div class="flex justify-between items-center py-8 text-gray-500 text-sm font-light">
|
|
8
7
|
<div class="flex space-x-5">
|
|
9
|
-
<a href="https://github.com/event-catalog/eventcatalog" target="_blank"
|
|
10
|
-
|
|
8
|
+
<a href="https://github.com/event-catalog/eventcatalog" target="_blank"
|
|
9
|
+
><svg
|
|
10
|
+
class="w-5 h-5 bg-gray-400 hover:bg-purple-500 dark:hover:bg-gray-400"
|
|
11
|
+
style={`mask-image: url("${buildUrl('/icons/github.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
|
|
12
|
+
></svg></a
|
|
13
|
+
>
|
|
14
|
+
<a href="https://x.com/event_catalog" target="_blank"
|
|
15
|
+
><span class="sr-only">x</span><svg
|
|
16
|
+
class="w-5 h-5 bg-gray-400 hover:bg-purple-500 dark:hover:bg-gray-400"
|
|
17
|
+
style={`mask-image: url("${buildUrl('/icons/x-twitter.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
|
|
18
|
+
></svg></a
|
|
19
|
+
>
|
|
11
20
|
</div>
|
|
12
|
-
<a
|
|
21
|
+
<a
|
|
22
|
+
target="_blank"
|
|
23
|
+
class="hover:text-purple-500 hover:underline text-gray-400 font-light not-prose"
|
|
24
|
+
href="https://eventcatalog.dev">Powered by EventCatalog</a
|
|
25
|
+
>
|
|
13
26
|
</div>
|
|
14
|
-
</footer>
|
|
27
|
+
</footer>
|
|
@@ -8,32 +8,37 @@ import { getServices } from '@utils/services/services';
|
|
|
8
8
|
import { getDomains } from '@utils/domains/domains';
|
|
9
9
|
|
|
10
10
|
export async function getStaticPaths() {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
const events = await getEvents();
|
|
12
|
+
const commands = await getCommands();
|
|
13
|
+
const services = await getServices();
|
|
14
|
+
const domains = await getDomains();
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
};
|
|
16
|
+
const buildPage = (type: string, collection: CollectionEntry<CollectionTypes>[]) => {
|
|
17
|
+
return {
|
|
18
|
+
params: {
|
|
19
|
+
type,
|
|
20
|
+
},
|
|
21
|
+
props: {
|
|
22
|
+
type,
|
|
23
|
+
data: collection,
|
|
24
|
+
},
|
|
26
25
|
};
|
|
26
|
+
};
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
return [
|
|
29
|
+
buildPage('events', events),
|
|
30
|
+
buildPage('commands', commands),
|
|
31
|
+
buildPage('services', services),
|
|
32
|
+
buildPage('domains', domains),
|
|
33
|
+
];
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
const { type, data } = Astro.props;
|
|
37
37
|
---
|
|
38
38
|
|
|
39
|
-
<DiscoverLayout
|
|
39
|
+
<DiscoverLayout
|
|
40
|
+
title={`${type} (${data.length})`}
|
|
41
|
+
subtitle={`Find, filter and search for any ${type} in your system.`}
|
|
42
|
+
data={data}
|
|
43
|
+
type={type}
|
|
44
|
+
/>
|
|
@@ -21,7 +21,6 @@ export async function getStaticPaths() {
|
|
|
21
21
|
const domains = await getDomains();
|
|
22
22
|
|
|
23
23
|
const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
|
|
24
|
-
|
|
25
24
|
return collection.map((item) => ({
|
|
26
25
|
params: {
|
|
27
26
|
type: item.collection,
|
|
@@ -48,46 +47,49 @@ const renderedLogs = await logs.map(async (log) => {
|
|
|
48
47
|
const { Content } = await log.render();
|
|
49
48
|
return {
|
|
50
49
|
Content,
|
|
51
|
-
...log
|
|
52
|
-
}
|
|
50
|
+
...log,
|
|
51
|
+
};
|
|
53
52
|
});
|
|
54
53
|
|
|
55
54
|
const logsToRender = await Promise.all(renderedLogs);
|
|
56
55
|
|
|
57
56
|
const logList = logsToRender.map((log, index) => ({
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
57
|
+
id: log.id,
|
|
58
|
+
url: buildUrl(`/docs/${props.collection}/${props.data.id}`),
|
|
59
|
+
isLatest: log.data.version === latestVersion,
|
|
60
|
+
version: log.data.version,
|
|
61
|
+
createdAt: log.data.createdAt,
|
|
62
|
+
badges: log.data.badges || [],
|
|
63
|
+
Content: log.Content,
|
|
65
64
|
}));
|
|
66
65
|
|
|
67
66
|
const getBadge = () => {
|
|
68
67
|
if (props.collection === 'services') {
|
|
69
|
-
return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class:
|
|
68
|
+
return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' };
|
|
70
69
|
}
|
|
71
70
|
if (props.collection === 'events') {
|
|
72
|
-
return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: EnvelopeIcon, class:
|
|
71
|
+
return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: EnvelopeIcon, class: 'text-orange-400' };
|
|
73
72
|
}
|
|
74
73
|
if (props.collection === 'commands') {
|
|
75
|
-
return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: EnvelopeIcon, class:
|
|
74
|
+
return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: EnvelopeIcon, class: 'text-blue-400' };
|
|
76
75
|
}
|
|
77
76
|
if (props.collection === 'domains') {
|
|
78
|
-
return {
|
|
77
|
+
return {
|
|
78
|
+
backgroundColor: 'yellow',
|
|
79
|
+
textColor: 'yellow',
|
|
80
|
+
content: 'Domain',
|
|
81
|
+
icon: RectangleGroupIcon,
|
|
82
|
+
class: 'text-yellow-400',
|
|
83
|
+
};
|
|
79
84
|
}
|
|
80
85
|
};
|
|
81
86
|
|
|
82
|
-
const badges = [
|
|
83
|
-
getBadge()
|
|
84
|
-
];
|
|
85
|
-
|
|
87
|
+
const badges = [getBadge()];
|
|
86
88
|
---
|
|
87
89
|
|
|
88
90
|
<Layout title="ChangeLog">
|
|
89
91
|
<main class="flex-1 w-full lg:pr-10 md:pt-4">
|
|
90
|
-
<div class="border-b border-gray-200 flex justify-between items-start py-4 w-full
|
|
92
|
+
<div class="border-b border-gray-200 flex justify-between items-start py-4 w-full">
|
|
91
93
|
<div>
|
|
92
94
|
<h2 class="text-2xl md:text-4xl font-bold">{props.data.name} (Changelog)</h2>
|
|
93
95
|
<h2 class="text-lg pt-2 text-gray-500 font-light">{props.data.summary}</h2>
|
|
@@ -95,7 +97,9 @@ const badges = [
|
|
|
95
97
|
badges && (
|
|
96
98
|
<div class="flex flex-wrap py-2 pt-4">
|
|
97
99
|
{badges.map((badge: any) => (
|
|
98
|
-
<span
|
|
100
|
+
<span
|
|
101
|
+
class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
|
|
102
|
+
>
|
|
99
103
|
{badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
|
|
100
104
|
<span>{badge.content}</span>
|
|
101
105
|
</span>
|
|
@@ -105,62 +109,67 @@ const badges = [
|
|
|
105
109
|
}
|
|
106
110
|
</div>
|
|
107
111
|
</div>
|
|
108
|
-
{
|
|
109
|
-
|
|
110
|
-
<
|
|
111
|
-
|
|
112
|
+
{
|
|
113
|
+
logList.length === 0 && (
|
|
114
|
+
<div class="py-4 text-gray-400 prose prose-md">
|
|
115
|
+
<p>No changelogs found.</p>
|
|
116
|
+
</div>
|
|
117
|
+
)
|
|
112
118
|
}
|
|
113
119
|
<div class="flow-root py-8">
|
|
114
120
|
<ul role="list" class="-mb-8">
|
|
115
|
-
{
|
|
116
|
-
|
|
117
|
-
<
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<div>
|
|
123
|
-
<
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
121
|
+
{
|
|
122
|
+
logList.map((log, index) => (
|
|
123
|
+
<li>
|
|
124
|
+
<div class="relative pb-8">
|
|
125
|
+
{index !== logList.length - 1 ? (
|
|
126
|
+
<span aria-hidden="true" class="absolute left-6 top-4 -ml-px h-full w-0.5 bg-gray-200" />
|
|
127
|
+
) : null}
|
|
128
|
+
<div class="relative flex space-x-3">
|
|
129
|
+
<div>
|
|
130
|
+
<a
|
|
131
|
+
href={buildUrl(`${log.url}/${log.version}`)}
|
|
132
|
+
class={
|
|
133
|
+
'bg-purple-500 hover:bg-purple-400 text-white flex h-8 w-14 items-center justify-center rounded-full ring-8 ring-white'
|
|
134
|
+
}
|
|
135
|
+
>
|
|
136
|
+
{log.version}
|
|
137
|
+
{/* <DocumentTextIcon aria-hidden="true" className="h-5 w-5 text-white" /> */}
|
|
138
|
+
</a>
|
|
139
|
+
</div>
|
|
130
140
|
</div>
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
{log.createdAt &&
|
|
135
|
-
<div class="pb-2">
|
|
141
|
+
<div class="pl-[70px] py-2 -mt-10">
|
|
142
|
+
{log.createdAt && (
|
|
143
|
+
<div class="pb-2">
|
|
136
144
|
<h3 class="text-2xl text-gray-800 font-bold">
|
|
137
|
-
|
|
145
|
+
<span>
|
|
146
|
+
{log.createdAt.toISOString().split('T')[0]} {`${log.isLatest ? '(latest)' : ''}`}
|
|
147
|
+
</span>
|
|
138
148
|
</h3>
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
log.badges && (
|
|
149
|
+
</div>
|
|
150
|
+
)}
|
|
151
|
+
{log.badges && (
|
|
143
152
|
<div class="flex flex-wrap">
|
|
144
153
|
{log.badges.map((badge: any) => (
|
|
145
|
-
<span
|
|
154
|
+
<span
|
|
155
|
+
class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
|
|
156
|
+
>
|
|
146
157
|
{badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
|
|
147
158
|
<span>{badge.content}</span>
|
|
148
159
|
</span>
|
|
149
160
|
))}
|
|
150
161
|
</div>
|
|
151
|
-
)
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
162
|
+
)}
|
|
163
|
+
<div class="prose prose-md !max-w-none py-2">
|
|
164
|
+
<log.Content />
|
|
165
|
+
</div>
|
|
155
166
|
</div>
|
|
156
167
|
</div>
|
|
157
|
-
</
|
|
158
|
-
|
|
159
|
-
|
|
168
|
+
</li>
|
|
169
|
+
))
|
|
170
|
+
}
|
|
160
171
|
</ul>
|
|
161
172
|
</div>
|
|
162
173
|
<Footer />
|
|
163
174
|
</main>
|
|
164
|
-
|
|
165
175
|
</Layout>
|
|
166
|
-
|
|
@@ -53,24 +53,26 @@ const contentBadges = props.data.badges || [];
|
|
|
53
53
|
|
|
54
54
|
const getBadge = () => {
|
|
55
55
|
if (props.collection === 'services') {
|
|
56
|
-
return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class:
|
|
56
|
+
return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' };
|
|
57
57
|
}
|
|
58
58
|
if (props.collection === 'events') {
|
|
59
|
-
return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: EnvelopeIcon, class:
|
|
59
|
+
return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: EnvelopeIcon, class: 'text-orange-400' };
|
|
60
60
|
}
|
|
61
61
|
if (props.collection === 'commands') {
|
|
62
|
-
return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: EnvelopeIcon, class:
|
|
62
|
+
return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: EnvelopeIcon, class: 'text-blue-400' };
|
|
63
63
|
}
|
|
64
64
|
if (props.collection === 'domains') {
|
|
65
|
-
return {
|
|
65
|
+
return {
|
|
66
|
+
backgroundColor: 'yellow',
|
|
67
|
+
textColor: 'yellow',
|
|
68
|
+
content: 'Domain',
|
|
69
|
+
icon: RectangleGroupIcon,
|
|
70
|
+
class: 'text-yellow-400',
|
|
71
|
+
};
|
|
66
72
|
}
|
|
67
73
|
};
|
|
68
74
|
|
|
69
|
-
const badges = [
|
|
70
|
-
getBadge(),
|
|
71
|
-
...contentBadges
|
|
72
|
-
];
|
|
73
|
-
|
|
75
|
+
const badges = [getBadge(), ...contentBadges];
|
|
74
76
|
---
|
|
75
77
|
|
|
76
78
|
<DocsLayout title={pageTitle} description={props.data.summary}>
|
|
@@ -79,13 +81,18 @@ const badges = [
|
|
|
79
81
|
<main class="flex-1 w-full lg:pr-10 md:pt-4">
|
|
80
82
|
<div class="border-b border-gray-200 flex justify-between items-start py-4 md:py-8 md:pb-6">
|
|
81
83
|
<div>
|
|
82
|
-
<h2 class="text-2xl md:text-4xl font-bold">
|
|
84
|
+
<h2 class="text-2xl md:text-4xl font-bold">
|
|
85
|
+
{props.data.name}
|
|
86
|
+
<span class="text-gray-300">(v{props.data.version})</span>
|
|
87
|
+
</h2>
|
|
83
88
|
<h2 class="text-lg pt-2 text-gray-500 font-light">{props.data.summary}</h2>
|
|
84
89
|
{
|
|
85
90
|
badges && (
|
|
86
91
|
<div class="flex flex-wrap py-2 pt-4">
|
|
87
92
|
{badges.map((badge: any) => (
|
|
88
|
-
<span
|
|
93
|
+
<span
|
|
94
|
+
class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
|
|
95
|
+
>
|
|
89
96
|
{badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
|
|
90
97
|
<span>{badge.content}</span>
|
|
91
98
|
</span>
|
|
@@ -114,9 +121,14 @@ const badges = [
|
|
|
114
121
|
<h3 class="text-sm font-medium text-yellow-800">New version found</h3>
|
|
115
122
|
<div class="mt-2 text-sm text-yellow-700">
|
|
116
123
|
<p>
|
|
117
|
-
You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)}
|
|
118
|
-
<
|
|
119
|
-
|
|
124
|
+
You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)}{' '}
|
|
125
|
+
<strong>{props.data.name}</strong>.{' '}
|
|
126
|
+
<a
|
|
127
|
+
class="underline hover:text-purple-500 block pt-2"
|
|
128
|
+
href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`)}
|
|
129
|
+
>
|
|
130
|
+
The latest version of this {props.collection.slice(0, props.collection.length - 1)} is v
|
|
131
|
+
{props.data.latestVersion} →
|
|
120
132
|
</a>
|
|
121
133
|
</p>
|
|
122
134
|
</div>
|
|
@@ -128,12 +140,21 @@ const badges = [
|
|
|
128
140
|
</div>
|
|
129
141
|
|
|
130
142
|
<div class="prose prose-md py-4 w-full">
|
|
131
|
-
|
|
143
|
+
<Content components={components(props)} />
|
|
132
144
|
</div>
|
|
133
145
|
<div>
|
|
134
146
|
<!-- @ts-ignore -->
|
|
135
|
-
<SchemaViewer id={props.data.id} catalog={props.catalog}
|
|
136
|
-
<NodeGraph
|
|
147
|
+
<SchemaViewer id={props.data.id} catalog={props.catalog} />
|
|
148
|
+
<NodeGraph
|
|
149
|
+
id={props.data.id}
|
|
150
|
+
collection={props.collection}
|
|
151
|
+
version={props.data.version}
|
|
152
|
+
mode="simple"
|
|
153
|
+
href={{
|
|
154
|
+
label: 'Open in Visualiser',
|
|
155
|
+
url: buildUrl(`/visualiser/${props.collection}/${props.data.id}/${props.data.version}`),
|
|
156
|
+
}}
|
|
157
|
+
/>
|
|
137
158
|
</div>
|
|
138
159
|
<Footer />
|
|
139
160
|
</main>
|
|
@@ -158,10 +179,8 @@ const badges = [
|
|
|
158
179
|
.mermaid tspan {
|
|
159
180
|
font-size: 8em;
|
|
160
181
|
}
|
|
161
|
-
|
|
162
182
|
</style>
|
|
163
183
|
|
|
164
|
-
|
|
165
184
|
<script define:vars={{ props }}>
|
|
166
185
|
// Fix to pass information to componets that are client side only
|
|
167
186
|
// and require catalog information
|
|
@@ -171,7 +190,6 @@ const badges = [
|
|
|
171
190
|
</script>
|
|
172
191
|
|
|
173
192
|
<script>
|
|
174
|
-
|
|
175
193
|
/**
|
|
176
194
|
* @params {HTMLCollectionOf<HTMLElement>} graphs
|
|
177
195
|
*/
|
|
@@ -8,26 +8,23 @@ import { getIndexPage } from '@utils/pages';
|
|
|
8
8
|
const page = await getIndexPage();
|
|
9
9
|
let CustomContent = null;
|
|
10
10
|
|
|
11
|
-
if(page){
|
|
11
|
+
if (page) {
|
|
12
12
|
const { Content } = await page.render();
|
|
13
13
|
CustomContent = Content;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
15
|
---
|
|
17
16
|
|
|
18
|
-
{
|
|
19
|
-
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
{!CustomContent &&
|
|
30
|
-
<DefaultDocsLandingPage title="EventCatalog" />
|
|
17
|
+
{
|
|
18
|
+
CustomContent && (
|
|
19
|
+
<Layout title="EventCatalog">
|
|
20
|
+
<main class="py-8">
|
|
21
|
+
<div class="prose prose-md w-full !max-w-none">
|
|
22
|
+
<CustomContent components={components} />
|
|
23
|
+
</div>
|
|
24
|
+
<Footer />
|
|
25
|
+
</main>
|
|
26
|
+
</Layout>
|
|
27
|
+
)
|
|
31
28
|
}
|
|
32
29
|
|
|
33
|
-
|
|
30
|
+
{!CustomContent && <DefaultDocsLandingPage title="EventCatalog" />}
|
|
@@ -49,14 +49,14 @@ const membersList = members.map((o) => ({
|
|
|
49
49
|
const ownedServicesList = services.map((p) => ({
|
|
50
50
|
label: `${p.data.name} (service)`,
|
|
51
51
|
href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
|
|
52
|
-
tag: `v${p.data.version}
|
|
52
|
+
tag: `v${p.data.version}`,
|
|
53
53
|
}));
|
|
54
54
|
|
|
55
55
|
const ownedEventsList = [...events, ...commands].map((p) => ({
|
|
56
56
|
label: `${p.data.name} (${p.collection.slice(0, -1)})`,
|
|
57
57
|
href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
|
|
58
58
|
color: p.collection === 'events' ? 'orange' : 'blue',
|
|
59
|
-
tag: `v${p.data.version}
|
|
59
|
+
tag: `v${p.data.version}`,
|
|
60
60
|
}));
|
|
61
61
|
---
|
|
62
62
|
|
|
@@ -64,8 +64,8 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
|
|
|
64
64
|
<div class="flex min-h-screen docs-layout">
|
|
65
65
|
<main class="flex-1 w-full pr-10 pt-4">
|
|
66
66
|
<!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
|
|
67
|
-
|
|
68
|
-
<div class="border-b border-gray-200
|
|
67
|
+
|
|
68
|
+
<div class="border-b border-gray-200 py-4 pb-2">
|
|
69
69
|
<div class="flex justify-start">
|
|
70
70
|
<!-- <span class="shadow-md text-center flex items-center justify-center text-white text-4xl bg-red-500 h-28 w-28 rounded-full">{props.data.name.charAt(0)}</span> -->
|
|
71
71
|
<div class="flex flex-col justify-between space-y-2">
|
|
@@ -112,9 +112,26 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
|
|
|
112
112
|
</main>
|
|
113
113
|
<aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
|
|
114
114
|
<div class="divide-y-2 divide-gray-100">
|
|
115
|
-
<PillList
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
<PillList
|
|
116
|
+
color="blue"
|
|
117
|
+
title={`Owned services (${ownedServicesList.length})`}
|
|
118
|
+
pills={ownedServicesList}
|
|
119
|
+
emptyMessage={`This team does not own any services .`}
|
|
120
|
+
client:load
|
|
121
|
+
/>
|
|
122
|
+
<PillList
|
|
123
|
+
color="red"
|
|
124
|
+
title={`Owned messages (${ownedEventsList.length})`}
|
|
125
|
+
pills={ownedEventsList}
|
|
126
|
+
emptyMessage={`This team does not own any messages .`}
|
|
127
|
+
client:load
|
|
128
|
+
/>
|
|
129
|
+
<OwnersList
|
|
130
|
+
title={`Team members (${membersList.length})`}
|
|
131
|
+
owners={membersList}
|
|
132
|
+
emptyMessage={`This team does not have any members.`}
|
|
133
|
+
client:load
|
|
134
|
+
/>
|
|
118
135
|
</div>
|
|
119
136
|
<!-- {props?.collection === 'events' && <MessageSideBar message={props} />} -->
|
|
120
137
|
</aside>
|
|
@@ -92,11 +92,11 @@ const associatedTeams = teams.map((o) => ({
|
|
|
92
92
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
93
93
|
<div class="mx-auto max-w-2xl lg:max-w-none">
|
|
94
94
|
<dl class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-3 lg:grid-cols-3">
|
|
95
|
-
<div class="flex flex-col
|
|
95
|
+
<div class="flex flex-col p-8">
|
|
96
96
|
<dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
|
|
97
97
|
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
|
|
98
98
|
</div>
|
|
99
|
-
<div class="flex flex-col
|
|
99
|
+
<div class="flex flex-col p-8">
|
|
100
100
|
<dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
|
|
101
101
|
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessageList.length}</dd>
|
|
102
102
|
</div>
|
|
@@ -104,7 +104,7 @@ const associatedTeams = teams.map((o) => ({
|
|
|
104
104
|
<dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
|
|
105
105
|
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">2</dd>
|
|
106
106
|
</div> -->
|
|
107
|
-
<div class="flex flex-col
|
|
107
|
+
<div class="flex flex-col p-8">
|
|
108
108
|
<dt class="text-sm font-semibold leading-6 text-gray-600"># teams joined</dt>
|
|
109
109
|
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{associatedTeams.length}</dd>
|
|
110
110
|
</div>
|
|
@@ -118,9 +118,26 @@ const associatedTeams = teams.map((o) => ({
|
|
|
118
118
|
</main>
|
|
119
119
|
<aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
|
|
120
120
|
<div class="divide-y-2 divide-gray-100">
|
|
121
|
-
<PillList
|
|
122
|
-
|
|
123
|
-
|
|
121
|
+
<PillList
|
|
122
|
+
color="pink"
|
|
123
|
+
title={`Owned services (${ownedServicesList.length})`}
|
|
124
|
+
pills={ownedServicesList}
|
|
125
|
+
emptyMessage={`${props.data.name} does not own any services .`}
|
|
126
|
+
client:load
|
|
127
|
+
/>
|
|
128
|
+
<PillList
|
|
129
|
+
color="orange"
|
|
130
|
+
title={`Owned messages (${ownedMessageList.length})`}
|
|
131
|
+
pills={ownedMessageList}
|
|
132
|
+
emptyMessage={`${props.data.name} does not own any messages .`}
|
|
133
|
+
client:load
|
|
134
|
+
/>
|
|
135
|
+
<OwnersList
|
|
136
|
+
title={`Member of team (${associatedTeams.length})`}
|
|
137
|
+
owners={associatedTeams}
|
|
138
|
+
emptyMessage={`${props.data.name} is not part of any documented team.`}
|
|
139
|
+
client:load
|
|
140
|
+
/>
|
|
124
141
|
</div>
|
|
125
142
|
</aside>
|
|
126
143
|
</div>
|
|
@@ -40,6 +40,17 @@ const {
|
|
|
40
40
|
<VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
|
|
41
41
|
<div class="bg-gray-100/50">
|
|
42
42
|
<div class="h-[calc(100vh-110px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
|
|
43
|
-
<NodeGraph
|
|
43
|
+
<NodeGraph
|
|
44
|
+
id={id}
|
|
45
|
+
collection={collection}
|
|
46
|
+
title={`${props.data.name} (v${props.data.version})`}
|
|
47
|
+
mode="full"
|
|
48
|
+
linkTo="visualiser"
|
|
49
|
+
version={props.data.version}
|
|
50
|
+
href={{
|
|
51
|
+
label: `Open documentation for ${props.data.name} v${props.data.version}`,
|
|
52
|
+
url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`),
|
|
53
|
+
}}
|
|
54
|
+
/>
|
|
44
55
|
</div>
|
|
45
56
|
</VisualiserLayout>
|
package/tsconfig.json
CHANGED
|
@@ -7,11 +7,13 @@
|
|
|
7
7
|
"@config": ["./eventcatalog.config.js"],
|
|
8
8
|
"@eventcatalog": ["src/utils/config/catalog.ts"],
|
|
9
9
|
"@components/*": ["src/components/*"],
|
|
10
|
+
"@catalog/components/*": ["src/custom-defined-components/*"],
|
|
10
11
|
"@types": ["src/types/index.ts"],
|
|
11
12
|
"@utils/*": ["src/utils/*"],
|
|
12
13
|
"@layouts/*": ["src/layouts/*"]
|
|
13
14
|
},
|
|
14
15
|
"jsx": "react-jsx",
|
|
15
|
-
"jsxImportSource": "react"
|
|
16
|
+
"jsxImportSource": "react",
|
|
17
|
+
"types": ["vitest/globals"]
|
|
16
18
|
}
|
|
17
19
|
}
|
package/vitest.config.ts
ADDED