@redocly/portal-plugin-async-api 1.0.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.
package/src/config.ts ADDED
@@ -0,0 +1,37 @@
1
+ import type { FromSchema } from 'json-schema-to-ts';
2
+
3
+ const expandSectionSchema = {
4
+ type: 'object',
5
+ properties: {
6
+ root: { type: 'boolean' },
7
+ elements: { type: 'boolean' },
8
+ },
9
+ additionalProperties: false,
10
+ } as const;
11
+
12
+ const asyncApiDocsSchema = {
13
+ type: 'object',
14
+ properties: {
15
+ schemaId: { type: 'string' },
16
+ hideErrors: { type: 'boolean' },
17
+ hideInfo: { type: 'boolean' },
18
+ hideChannels: { type: 'boolean' },
19
+ hideServers: { type: 'boolean' },
20
+ hideMessages: { type: 'boolean' },
21
+ hideSchemas: { type: 'boolean' },
22
+ expandChannels: expandSectionSchema,
23
+ expandServers: expandSectionSchema,
24
+ expandMessages: expandSectionSchema,
25
+ expandSchemas: expandSectionSchema,
26
+ },
27
+ additionalProperties: false,
28
+ } as const;
29
+
30
+ export const themeConfigSchema = {
31
+ type: 'object',
32
+ properties: {
33
+ asyncapi: asyncApiDocsSchema,
34
+ },
35
+ } as const;
36
+
37
+ export type AsyncApiDocsSettings = FromSchema<typeof asyncApiDocsSchema>;
package/src/plugin.ts ADDED
@@ -0,0 +1,101 @@
1
+ // FIXME: think of a way to make these imports shorter?
2
+
3
+ import { slugFromRelativePath } from '@redocly/portal/dist/server/utils/paths.js';
4
+ import { getAllowedTeamsForRoute } from '@redocly/portal/dist/server/utils/rbac.js';
5
+ import { REDOCLY_TEAMS_RBAC } from '@redocly/portal/dist/shared/constants.js';
6
+ import { withPathPrefix } from '@redocly/portal/dist/shared/urls.js';
7
+
8
+ import type { PageStaticData } from '@redocly/portal/dist/shared/types';
9
+ import type { AsyncApiDocsSettings } from './config';
10
+ import type {
11
+ GetStaticDataFn,
12
+ PageRouteDetails,
13
+ PluginInstance,
14
+ } from '@redocly/portal/dist/server/plugins/types';
15
+
16
+ const ASYNCAPI_TEMPLATE_ID = 'asyncapi-docs';
17
+ const ASYNCAPI_SHARED_DATA_PREFIX = 'asyncapi-docs-';
18
+
19
+ export default async function asyncAPIDocsPlugin(): Promise<PluginInstance> {
20
+ return {
21
+ processContent: async (contentProvider, actions) => {
22
+ const asyncAPITemplateId = actions.createTemplate(
23
+ ASYNCAPI_TEMPLATE_ID,
24
+ '@redocly/portal-plugin-async-api/template.js',
25
+ );
26
+
27
+ const config = actions.getConfig<{ asyncapi?: AsyncApiDocsSettings }>();
28
+ const globalSettings = config.theme?.asyncapi || {};
29
+
30
+ const definitions = loadDefinitions();
31
+
32
+ for (const [relativePath, parsedDefinition] of definitions) {
33
+ const pageSlug = slugFromRelativePath(relativePath, contentProvider);
34
+
35
+ const sharedDataKey = `${ASYNCAPI_SHARED_DATA_PREFIX}${relativePath}`;
36
+ actions.createSharedData(sharedDataKey, parsedDefinition);
37
+
38
+ const route = {
39
+ slug: pageSlug,
40
+ fsPath: relativePath,
41
+ templateId: asyncAPITemplateId,
42
+ getStaticData: buildGetStaticDataFn(globalSettings, pageSlug),
43
+ versions: contentProvider.versions.getPageVersions(relativePath, pageSlug),
44
+ [REDOCLY_TEAMS_RBAC]: getAllowedTeamsForRoute(config.rbac, {
45
+ slug: pageSlug,
46
+ fsPath: relativePath,
47
+ }),
48
+ metadata: {
49
+ type: 'asyncapi',
50
+ title: 'AsyncAPI',
51
+ },
52
+ };
53
+
54
+ actions.addRoute(route);
55
+ actions.addRouteSharedData(route.slug, 'AsyncApiDefinition', sharedDataKey);
56
+ }
57
+
58
+ function loadDefinitions() {
59
+ const definitions: Map<string, unknown> = new Map();
60
+ for (const relativePath of contentProvider.filesList.values()) {
61
+ if (!relativePath.match(/(\.ya?ml|\.json)$/)) {
62
+ continue;
63
+ }
64
+
65
+ try {
66
+ const contentRecord = contentProvider.loadContent<any>(relativePath, 'yaml');
67
+ if (contentRecord.isIgnored) {
68
+ continue;
69
+ }
70
+
71
+ if (!contentRecord.parsed?.asyncapi) {
72
+ continue;
73
+ }
74
+
75
+ definitions.set(relativePath, contentRecord.parsed);
76
+ } catch (error) {
77
+ continue;
78
+ }
79
+ }
80
+
81
+ return definitions;
82
+ }
83
+ },
84
+ };
85
+
86
+ function buildGetStaticDataFn(
87
+ settings: AsyncApiDocsSettings,
88
+ pageSlug: string,
89
+ ): GetStaticDataFn<PageRouteDetails, PageStaticData> {
90
+ return async function (_route, _data, _context) {
91
+ return {
92
+ props: {
93
+ settings: {
94
+ ...settings,
95
+ baseUrlPath: withPathPrefix(pageSlug),
96
+ },
97
+ },
98
+ };
99
+ };
100
+ }
101
+ }
package/src/styles.tsx ADDED
@@ -0,0 +1,573 @@
1
+ import styled from 'styled-components';
2
+
3
+ export const StylesProvider = styled.div`
4
+ margin: auto;
5
+ max-width: var(--layout-stacked-large-max-width);
6
+
7
+ .asyncapi {
8
+ font-family: var(--font-family-base);
9
+ font-size: var(--font-size-base);
10
+ line-height: var(--line-height-base);
11
+ font-weight: var(--font-weight-regular);
12
+ background: var(--background-color);
13
+ color: var(--text-color);
14
+ }
15
+
16
+ .asyncapi__info-header-main > h1 {
17
+ margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
18
+ font-size: var(--h1-font-size, var(--h-font-size));
19
+ font-weight: var(--h1-font-weight, var(--h-font-weight));
20
+ font-family: var(--h1-font-family, var(--h-font-family));
21
+ line-height: var(--h1-line-height, var(--h-line-height));
22
+ color: var(--h1-text-color, var(--h-text-color));
23
+ text-transform: var(--h1-text-transform, var(--h-text-transform));
24
+ }
25
+
26
+ .asyncapi__markdown > div > p > code {
27
+ font-weight: var(--font-weight-regular);
28
+ font-size: var(--inline-code-font-size);
29
+ font-family: var(--code-font-family);
30
+ border-radius: var(--inline-code-border-radius);
31
+ background-color: var(--inline-code-background-color);
32
+ color: var(--inline-code-text-color);
33
+ }
34
+
35
+ .asyncapi__table {
36
+ font-size: var(--font-size-base);
37
+ }
38
+
39
+ .asyncapi__toggle-arrow {
40
+ content: none;
41
+ width: 6px;
42
+ height: 10px;
43
+ mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 4.25 7' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='white' %3E%3Cpath d='M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z' /%3E%3Cpath d='M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z' /%3E%3C/svg%3E");
44
+ background: var(--text-color);
45
+ }
46
+
47
+ .asyncapi__toggle-button {
48
+ flex-grow: 1;
49
+ display: flex;
50
+ padding-left: 8px;
51
+ }
52
+
53
+ .asyncapi__toggle-header-content {
54
+ flex-grow: 0;
55
+ }
56
+
57
+ .asyncapi__table--nested {
58
+ font-size: var(--font-size-base);
59
+ border-radius: var(--border-radius);
60
+ border: solid 1px var(--md-table-border-color);
61
+ background-color: var(--md-table-stripe-background-color);
62
+ }
63
+
64
+ .asyncapi__table-header {
65
+ font-weight: var(--md-table-head-font-weight);
66
+ color: var(--md-table-head-text-color);
67
+ background: var(--md-table-head-background-color);
68
+ }
69
+
70
+ .asyncapi__table-header--nested {
71
+ color: var(--md-table-head-text-color);
72
+ border-bottom: solid 1px var(--md-table-border-color);
73
+ font-weight: var(--font-weight-bold);
74
+ font-size: var(--font-size-small);
75
+ }
76
+
77
+ .asyncapi__table-header-title--nested {
78
+ color: var(--md-table-head-text-color);
79
+ }
80
+
81
+ .asyncapi__table-header-title--nested > td {
82
+ border-bottom: solid 1px var(--md-table-border-color);
83
+ font-size: var(--font-size-small);
84
+ color: var(--md-table-head-text-color);
85
+ }
86
+
87
+ .asyncapi__table-header-column--nested {
88
+ border-bottom: solid 1px var(--md-table-border-color);
89
+ }
90
+
91
+ .asyncapi__table-body {
92
+ background-color: var(--md-table-stripe-background-color);
93
+ color: var(--md-table-cell-text-color);
94
+ }
95
+
96
+ .asyncapi__table-body--nested {
97
+ color: var(--md-table-cell-text-color);
98
+ }
99
+
100
+ .asyncapi__table-row--nested {
101
+ color: var(--md-table-cell-text-color);
102
+ border-bottom: solid 1px var(--md-table-border-color);
103
+ }
104
+
105
+ .asyncapi__table-cell {
106
+ border-bottom: 1px solid var(--md-table-border-color);
107
+ }
108
+
109
+ .asyncapi__table-cell--nested {
110
+ font-size: var(--font-size-small);
111
+ border-bottom: solid 1px var(--md-table-border-color);
112
+ }
113
+
114
+ .asyncapi__tree-leaf:before {
115
+ border-left: var(--border-color) 2px solid;
116
+ border-bottom: var(--border-color) 2px solid;
117
+ border-radius: 0 0 0 var(--border-radius);
118
+ }
119
+
120
+ .asyncapi__badge {
121
+ font-size: var(--badge-http-font-size);
122
+ font-family: var(--badge-http-font-family);
123
+ font-weight: var(--badge-http-font-weight);
124
+ line-height: var(--badge-http-line-height);
125
+ border-radius: var(--badge-http-border-radius);
126
+ background: var(--badge-background-color);
127
+ color: var(--badge-http-text-color);
128
+ padding: 0 16px;
129
+ }
130
+
131
+ .asyncapi__badge--publish {
132
+ background-color: var(--color-http-get);
133
+ }
134
+
135
+ .asyncapi__badge--subscribe {
136
+ background-color: var(--color-http-post);
137
+ }
138
+
139
+ .asyncapi__badge--deprecated {
140
+ background-color: var(--color-http-options);
141
+ }
142
+
143
+ .asyncapi__badge--required {
144
+ background-color: var(--color-http-options);
145
+ }
146
+
147
+ .asyncapi__badge--generated {
148
+ background-color: var(--color-http-link);
149
+ }
150
+
151
+ .asyncapi__tag {
152
+ border-radius: var(--border-radius);
153
+ background-color: var(--background-color);
154
+ font-size: var(--font-size-small);
155
+ color: var(--text-color);
156
+ }
157
+
158
+ .asyncapi__code {
159
+ border: solid 1px var(--border-color);
160
+ border-radius: var(--border-radius);
161
+ background: var(--background-color);
162
+ }
163
+
164
+ .asyncapi__code-header {
165
+ border-bottom: 1px solid var(--border-color);
166
+ font-weight: var(--md-table-head-font-weight);
167
+ background: var(--md-table-head-background-color);
168
+ }
169
+
170
+ .asyncapi__code-header > h4 {
171
+ font-weight: var(--h4-font-weight);
172
+ font-size: var(--font-size-base);
173
+ color: var(--md-table-head-text-color);
174
+ }
175
+
176
+ .asyncapi__code-pre {
177
+ font-size: var(--font-size-base);
178
+ background: var(--md-table-stripe-background-color);
179
+ border-bottom-right-radius: var(--border-radius);
180
+ border-bottom-left-radius: var(--border-radius);
181
+ }
182
+
183
+ .asyncapi__code-body {
184
+ font-family: var(--code-font-family);
185
+ font-size: var(--code-font-size);
186
+ }
187
+
188
+ .asyncapi__info {
189
+ background: var(--background-color);
190
+ border-radius: var(--border-radius);
191
+ box-shadow: none;
192
+ padding-left: 0;
193
+ padding-right: 0;
194
+ }
195
+
196
+ .asyncapi__collapse-button {
197
+ border-radius: var(--border-radius);
198
+ border: 1px solid var(--border-color);
199
+ background-color: var(--button-background-color);
200
+ color: var(--button-color);
201
+ font-weight: var(--button-font-weight);
202
+ font-family: var(--button-font-family);
203
+ font-size: var(--button-large-font-size);
204
+ border: 2px solid var(--button-background-color);
205
+ }
206
+ .asyncapi__collapse-button:hover {
207
+ border: 2px solid var(--button-hover-background-color);
208
+ background-color: var(--button-hover-background-color);
209
+ }
210
+ .asyncapi__info-list > li {
211
+ border-radius: var(--button-border-radius);
212
+ font-weight: var(--button-font-weight);
213
+ box-shadow: var(--button-box-shadow);
214
+ color: var(--button-background-color);
215
+ border: 2px solid var(--button-border-color);
216
+ background-color: transparent;
217
+ font-weight: var(--button-font-weight);
218
+ }
219
+ .asyncapi__info-list > li:hover {
220
+ color: var(--button-hover-background-color);
221
+ border: 2px solid var(--button-hover-border-color);
222
+ background-color: transparent;
223
+ }
224
+ .asyncapi__info-list > li a {
225
+ color: var(--button-background-color);
226
+ }
227
+ .asyncapi__info-list > li:hover,
228
+ .asyncapi__info-list > li:hover a {
229
+ color: var(--button-hover-background-color);
230
+ }
231
+
232
+ .asyncapi__anchor-icon {
233
+ content: none;
234
+ width: 12px;
235
+ height: 12px;
236
+ mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwNSAtMjg5KSI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMCAxMDApIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAyIDE4NikiPgo8cG9seWdvbiBwb2ludHM9IjAgMCAyNCAwIDI0IDI0IDAgMjQiLz4KPHBhdGggZD0ibTE5IDE5aC0xNHYtMTRoN3YtMmgtN2MtMS4xMSAwLTIgMC45LTIgMnYxNGMwIDEuMSAwLjg5IDIgMiAyaDE0YzEuMSAwIDItMC45IDItMnYtN2gtMnY3em0tNS0xNnYyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDEgOS44My05LjgzdjMuNTloMnYtN2gtN3oiIGZpbGw9IiMwYjc0ZGUiLz4KPC9nPgo8L2c+CjwvZz4KPC9nPgo8L3N2Zz4KCg==');
237
+ background: var(--button-background-color);
238
+ }
239
+
240
+ .asyncapi__info-list > li:hover .asyncapi__anchor-icon {
241
+ filter: none;
242
+ background: var(--button-hover-background-color);
243
+ }
244
+
245
+ .asyncapi__messages > div {
246
+ border: solid 1px var(--border-color);
247
+ box-shadow: none;
248
+ font-size: var(--panel-heading-font-size-local);
249
+ background-color: var(--panel-heading-background-color);
250
+ border-radius: var(--panel-border-radius);
251
+ padding: var(--panel-schemas-heading-padding);
252
+ }
253
+
254
+ .asyncapi__message {
255
+ border-radius: var(--border-radius);
256
+ background: var(--background-color);
257
+ border: solid 1px var(--border-color);
258
+ }
259
+
260
+ .asyncapi__message-header-title > h3 {
261
+ color: var(--text-color);
262
+ padding: var(--panel-response-heading-padding);
263
+ padding-right: 0;
264
+ }
265
+
266
+ .asyncapi__message-header-title {
267
+ background-color: var(--background-color);
268
+ }
269
+
270
+ .asyncapi__message-header-summary {
271
+ font-size: var(--font-size-base);
272
+ font-weight: var(--font-weight-regular);
273
+ border-top: solid 1px var(--border-color);
274
+ }
275
+
276
+ .asyncapi__message-description {
277
+ font-size: var(--font-size-base);
278
+ border-top: solid 1px var(--border-color);
279
+ }
280
+
281
+ .asyncapi__message-headers-header {
282
+ background-color: var(--md-table-head-background-color);
283
+ color: var(--text-color);
284
+ border-top: solid 1px var(--border-color);
285
+ }
286
+
287
+ .asyncapi__message-payload-oneOf-header {
288
+ background-color: var(--md-table-head-background-color);
289
+ color: var(--text-color);
290
+ }
291
+
292
+ .asyncapi__message-payload-oneOf-list-item .asyncapi__message-payload {
293
+ border-radius: var(--border-radius);
294
+ border: solid 1px var(--border-color);
295
+ background-color: var(--background-color);
296
+ }
297
+
298
+ .asyncapi__message-payload-anyOf-header {
299
+ background-color: var(--md-table-head-background-color);
300
+ color: var(--text-color);
301
+ }
302
+
303
+ .asyncapi__message-payload-anyOf-list-item .asyncapi__message-payload {
304
+ border-radius: var(--border-radius);
305
+ border: solid 1px var(--border-color);
306
+ background-color: var(--background-color);
307
+ }
308
+
309
+ .asyncapi__message-payload-header {
310
+ background-color: var(--md-table-head-background-color);
311
+ color: var(--text-color);
312
+ border-top: solid 1px var(--border-color);
313
+ }
314
+
315
+ .asyncapi__message-tags-header {
316
+ color: var(--text-color);
317
+ }
318
+
319
+ .asyncapi__schemas > div {
320
+ border: solid 1px var(--border-color);
321
+ box-shadow: none;
322
+ font-size: var(--panel-heading-font-size-local);
323
+ background-color: var(--panel-heading-background-color);
324
+ padding: var(--panel-schemas-heading-padding);
325
+ border-radius: var(--panel-border-radius);
326
+ }
327
+
328
+ .asyncapi__schema {
329
+ border-radius: var(--border-radius);
330
+ border: solid 1px var(--border-color);
331
+ background-color: var(--background-color);
332
+ }
333
+
334
+ .asyncapi__schema-header-title {
335
+ font-size: var(--font-size-base);
336
+ }
337
+
338
+ .asyncapi__schema-table {
339
+ border-top: solid 1px var(--border-color);
340
+ }
341
+
342
+ .asyncapi__security {
343
+ background: var(--background-color);
344
+ border-radius: var(--border-radius);
345
+ }
346
+
347
+ .asyncapi__servers > div {
348
+ border: solid 1px var(--border-color);
349
+ box-shadow: none;
350
+ font-size: var(--panel-heading-font-size-local);
351
+ background-color: var(--panel-heading-background-color);
352
+ border-radius: var(--panel-border-radius);
353
+ padding: var(--panel-schemas-heading-padding);
354
+ }
355
+
356
+ .asyncapi__server-header-stage {
357
+ background-color: var(--color-http-post);
358
+ }
359
+
360
+ .asyncapi__server-header-protocol {
361
+ background-color: var(--color-http-get);
362
+ }
363
+
364
+ .asyncapi__server-description {
365
+ border-top: solid 1px var(--border-color);
366
+ }
367
+
368
+ .asyncapi__server-variables-header {
369
+ background-color: var(--background-color);
370
+ color: var(--text-color);
371
+ border-top: solid 1px var(--border-color);
372
+ }
373
+
374
+ .asyncapi__server-variables-table {
375
+ border-top: solid 1px var(--border-color);
376
+ }
377
+
378
+ .asyncapi__server-expand-icon:before {
379
+ color: var(--text-color);
380
+ font-size: var(--font-size-small);
381
+ }
382
+
383
+ .asyncapi__server-security-header {
384
+ background-color: var(--background-color);
385
+ color: var(--text-color);
386
+ border-top: solid 1px var(--border-color);
387
+ }
388
+
389
+ .asyncapi__server-security-table {
390
+ border-top: solid 1px var(--border-color);
391
+ }
392
+
393
+ .asyncapi__server-security-flows-list a {
394
+ text-decoration: var(--link-decoration);
395
+ color: var(--link-text-color);
396
+ font-weight: var(--link-font-weight);
397
+ }
398
+
399
+ .asyncapi__server-security-flows-list a:visited {
400
+ color: var(--link-visited-text-color);
401
+ text-decoration: var(--link-visited-decoration);
402
+ }
403
+
404
+ .asyncapi__server-security-flow {
405
+ background-color: var(--background-color);
406
+ border: 1px solid var(--border-color);
407
+ border-radius: var(--border-radius);
408
+ }
409
+
410
+ .asyncapi__server-security-flows-table-cell {
411
+ border-bottom: solid 1px var(--border-color);
412
+ }
413
+
414
+ .asyncapi__server-security-scope {
415
+ font-size: var(--badge-http-font-size);
416
+ font-family: var(--badge-http-font-family);
417
+ font-weight: var(--badge-http-font-weight);
418
+ line-height: var(--badge-http-line-height);
419
+ border-radius: var(--badge-http-border-radius);
420
+ background: var(--badge-background-color);
421
+ color: var(--badge-http-text-color);
422
+ padding: 0 16px;
423
+ background-color: var(--color-http-post);
424
+ }
425
+
426
+ .asyncapi__channels-toggle--expanded > .asyncapi__toggle-header,
427
+ .asyncapi__servers-toggle--expanded > .asyncapi__toggle-header,
428
+ .asyncapi__schemas-toggle--expanded > .asyncapi__toggle-header,
429
+ .asyncapi__messages-toggle--expanded > .asyncapi__toggle-header {
430
+ padding-bottom: var(--panel-schemas-heading-padding);
431
+ }
432
+
433
+ .asyncapi__schema,
434
+ .asyncapi__message,
435
+ .asyncapi__channel,
436
+ .asyncapi__server {
437
+ border-radius: var(--border-radius);
438
+ border: solid 1px var(--border-color);
439
+ background-color: var(--background-color);
440
+ overflow: hidden;
441
+ }
442
+
443
+ .asyncapi__channel-header,
444
+ .asyncapi__schema-header,
445
+ .asyncapi__server-header {
446
+ padding: var(--panel-response-heading-padding);
447
+ }
448
+
449
+ .asyncapi__message-header {
450
+ background-color: var(--background-color);
451
+ }
452
+
453
+ .asyncapi__channels > div {
454
+ background: var(--background-color);
455
+ border-radius: var(--panel-border-radius);
456
+ box-shadow: none;
457
+ border: 1px solid var(--border-color);
458
+ padding: var(--panel-schemas-heading-padding);
459
+ }
460
+
461
+ .asyncapi__channel-header > h3 {
462
+ color: var(--text-color);
463
+ font-size: var(--font-size-base);
464
+ }
465
+
466
+ .asyncapi__channel-header-title {
467
+ font-size: 14px;
468
+ }
469
+
470
+ .asyncapi__channel-operations-header {
471
+ color: var(--text-color);
472
+ background-color: var(background-color);
473
+ border-top: solid 1px var(--border-color);
474
+ }
475
+
476
+ .asyncapi__channel-operations-header-oneOf {
477
+ border-top: solid 1px var(--border-color);
478
+ }
479
+
480
+ .asyncapi__channel-operations-list .asyncapi__messages-list-item .asyncapi__message {
481
+ border-radius: var(--border-radius);
482
+ border: solid 1px var(--border-color);
483
+ background-color: var(--background-color);
484
+ }
485
+
486
+ .asyncapi__channel-operation-message > .asyncapi__bindings {
487
+ border-radius: var(--border-radius);
488
+ border: solid 1px var(--border-color);
489
+ }
490
+
491
+ .asyncapi__channel-operation-message-header {
492
+ color: var(--text-color);
493
+ border-top: solid 1px var(--border-color);
494
+ }
495
+
496
+ .asyncapi__channel-operation-oneOf-subscribe > .asyncapi__bindings {
497
+ border-radius: var(--border-radius);
498
+ border: solid 1px var(--border-color);
499
+ margin: 12px;
500
+ }
501
+
502
+ .asyncapi__channel-operation-oneOf-subscribe-header {
503
+ color: var(--text-color);
504
+ border-top: solid 1px var(--border-color);
505
+ }
506
+
507
+ .asyncapi__channel-operation-oneOf-publish > .asyncapi__bindings {
508
+ border-radius: var(--border-radius);
509
+ border: solid 1px var(--border-color);
510
+ }
511
+
512
+ .asyncapi__channel-operation-oneOf-publish-header {
513
+ color: var(--text-color);
514
+ border-top: solid 1px var(--border-color);
515
+ }
516
+
517
+ .asyncapi__bindings-header {
518
+ color: var(--text-color);
519
+ }
520
+ .asyncapi__bindings-header > h4 {
521
+ background-color: var(--md-table-head-background-color);
522
+ color: var(--text-color);
523
+ border-top: solid 1px var(--border-color);
524
+ border-bottom: solid 1px var(--border-color);
525
+ }
526
+
527
+ .asyncapi__binding-protocol {
528
+ background-color: var(--color-http-get);
529
+ }
530
+
531
+ .asyncapi__binding-table {
532
+ border-top: solid 1px var(--border-color);
533
+ }
534
+ .asyncapi__binding-field-name {
535
+ font-weight: bold;
536
+ }
537
+
538
+ .asyncapi__channel-parameters-header {
539
+ color: var(--text-color);
540
+ background-color: var(--md-table-head-background-color);
541
+ border-top: solid 1px var(--border-color);
542
+ }
543
+
544
+ .asyncapi__error {
545
+ background-color: var(--background-color);
546
+ border-left: 6px solid #f44336;
547
+ border-radius: var(--border-radius);
548
+ color: var(--text-color);
549
+ font-size: var(--font-size-base);
550
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
551
+ }
552
+
553
+ .asyncapi__error-header {
554
+ box-shadow: inset 0 -1px 0 0 rgba(115, 121, 128, 0.15);
555
+ font-weight: var(--font-weight-bold);
556
+ }
557
+
558
+ .asyncapi__error-body-pre {
559
+ background-color: var(--background-color);
560
+ color: var(--text-color);
561
+ border-bottom-right-radius: var(--border-radius);
562
+ font-size: var(--font-size-small);
563
+ }
564
+
565
+ .asyncapi__enum {
566
+ line-height: 2;
567
+ border-color: var(--border-color);
568
+ border-radius: var(--border-color);
569
+ font-family: var(--code-font-family);
570
+ color: var(--text-color-secondary);
571
+ border-width: 1px;
572
+ }
573
+ `;