Skip to content

Commit

Permalink
conflict check
Browse files Browse the repository at this point in the history
  • Loading branch information
Aryan4884 committed Oct 14, 2024
1 parent 80c0e45 commit 41832c1
Show file tree
Hide file tree
Showing 13 changed files with 215 additions and 165 deletions.
1 change: 0 additions & 1 deletion .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -276,4 +276,3 @@
"skipCi": false,
"commitConvention": "angular"
}

8 changes: 7 additions & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Contributing to AsyncAPI

We love your input! We want to make contributing to this project as easy and transparent as possible.

## Contribution recogniton
Expand Down Expand Up @@ -37,12 +38,15 @@ The following is a summary of the ideal contribution flow. Please, note that Pul
```

## Code of Conduct

AsyncAPI has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](./CODE_OF_CONDUCT.md) so that you can understand what sort of behaviour is expected.

## Our Development Process

We use Github to host code, to track issues and feature requests, as well as accept pull requests.

## Issues

[Open an issue](https://github.com/asyncapi/asyncapi/issues/new) **only** if you want to report a bug or a feature. Don't open issues for questions or support, instead join our [Slack workspace](https://www.asyncapi.com/slack-invite) and ask there. Don't forget to follow our [Slack Etiquette](https://github.com/asyncapi/community/blob/master/slack-etiquette.md) while interacting with community members! It's more likely you'll get help, and much faster!

## Bug Reports and Feature Requests
Expand Down Expand Up @@ -73,7 +77,9 @@ Prefix that follows specification is not enough though. Remember that the title
Happy contributing :heart:

## License

When you submit changes, your submissions are understood to be under the same [Apache 2.0 License](https://github.com/asyncapi/asyncapi/blob/master/LICENSE) that covers the project. Feel free to [contact the maintainers](https://www.asyncapi.com/slack-invite) if that's a concern.

## References
This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md).

This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md).
95 changes: 64 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ The official [React](https://reactjs.org/) component for AsyncAPI specification.
- [Props](#props)
- [Features](#features)
- [Styles](#styles)
* [Default styles](#default-styles)
* [Custom styles](#custom-styles)
* [Custom logo](#custom-logo)
- [Default styles](#default-styles)
- [Custom styles](#custom-styles)
- [Custom logo](#custom-logo)
- [Playground](#playground)
- [Modules](#modules)
- [Development](#development)
Expand Down Expand Up @@ -52,9 +52,9 @@ Check out this sandbox application that uses the React component:
Check a simple example which shows passing the inline AsyncAPI specification with custom configurations:

```tsx
import * as React from "react";
import { render } from "react-dom";
import AsyncApiComponent, { ConfigInterface } from "@asyncapi/react-component";
import * as React from 'react';
import { render } from 'react-dom';
import AsyncApiComponent, { ConfigInterface } from '@asyncapi/react-component';

const schema = `
asyncapi: '2.0.0'
Expand Down Expand Up @@ -87,7 +87,7 @@ const config: ConfigInterface = {

const App = () => <AsyncApiComponent schema={schema} config={config} />;

render(<App />, document.getElementById("root"));
render(<App />, document.getElementById('root'));
```

## Using in other technologies
Expand Down Expand Up @@ -122,20 +122,23 @@ For a list and description of features offered by the AsyncAPI React component,
## Styles

### Default styles

To use default styles import them as follows:

``` js
import "@asyncapi/react-component/styles/default.css";
```js
import '@asyncapi/react-component/styles/default.css';
// or minified version
import "@asyncapi/react-component/styles/default.min.css";
import '@asyncapi/react-component/styles/default.min.css';
```

### Custom styles

The AsyncAPI React component does not set any global fonts. This component allows the usage of your custom `font-family` and other styling.

This can be done by defining the styles in a file or inline using a `<style>` tag in the `<head>` section of the page where you are using AsyncAPI React component.

Example custom styles (defined in the `styles/custom.css` file):

```css
html {
-moz-tab-size: 4;
Expand All @@ -147,51 +150,80 @@ html {

body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
font-family:
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
}
```

If you are using the component in a project that uses a bundler like Webpack, don't forget to import the custom styles.

``` js
import "styles/custom.css";
import "@asyncapi/react-component/styles/default.min.css";
```js
import 'styles/custom.css';
import '@asyncapi/react-component/styles/default.min.css';
```

If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you can put the custom styles as a style sheet link or as an inline style in the `<head>` section of the HTML code:

```html
<head>
<!-- Custom style sheet -->
<link rel="stylesheet" href="./styles/custom.css">

<!-- OR as inline style -->
<style>
html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%};
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji};
</style>

<link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@latest/styles/default.min.css">

...
</head>
<head>
<!-- Custom style sheet -->
<link rel="stylesheet" href="./styles/custom.css" />

<!-- OR as inline style -->
<style>
html {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family:
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
}
</style>

<link
rel="stylesheet"
href="https://unpkg.com/@asyncapi/react-component@latest/styles/default.min.css"
/>

...
</head>
```

### Custom logo

The AsyncAPI component supports the option to use a custom logo. By using the `x-logo` custom extension in the [InfoObject](https://github.com/asyncapi/spec/blob/master/spec/asyncapi.md#infoObject), a logo will be shown in the top left corner.

> **NOTE**: The logo will only appear if the [sidebar option](./docs/configuration/config-modification.md#definition) is enabled.
```yaml
asyncapi: 2.2.0
info:
title: Account Service
version: 1.0.0
description: This service is in charge of processing user signups.
x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png'
channels:
...
channels: ...
```
## Playground
Expand All @@ -203,6 +235,7 @@ You can also run the Playground application locally by following [this](./docs/d
## Modules
The `@asyncapi/react-component` package has 3 crafted JS modules to be used in various environments:

- `esm` (ECMAScript Modules) is intended for use in a single-page applications with predefined environments like [`create-react-app`](https://github.com/facebook/create-react-app) that are capable of resolving dependencies (via Webpack, Browserify, etc). It can also be used on the server side (for tasks like Server Side Rendering) when the application is using `esm`.
- `cjs` (CommonJS Modules) similar uses as for `esm` modules, but using CommonJS modules.
- `umd` (Universal Module Definition) is a dependency-free module that includes everything you need to serve AsyncAPI documentation (however [React](https://github.com/facebook/react/tree/master/packages/react) and [ReactDOM](https://github.com/facebook/react/tree/master/packages/react-dom) dependencies must be served separately) on a single-page application that can't resolve npm module dependencies or in normal HTML page. We have 2 types of minified `umd` bundles, with and without [AsyncAPI Parser](https://github.com/asyncapi/parser-js) in paths:
Expand Down
28 changes: 14 additions & 14 deletions docs/configuration/config-modification.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ interface ConfigInterface {
};
expand?: {
messageExamples?: boolean;
},
};
sidebar?: {
showServers?: 'byDefault' | 'bySpecTags' | 'byServersTags';
showOperations?: 'byDefault' | 'bySpecTags' | 'byOperationsTags';
useChannelAddressAsIdentifier?: boolean;
},
};
parserOptions?: ParserOptions;
publishLabel?: string;
subscribeLabel?: string;
Expand Down Expand Up @@ -59,7 +59,7 @@ interface ConfigInterface {
`showOperations` field is set to `byDefault` by default.
`useChannelAddressAsIdentifier`: for AsyncAPI v3 documents, use the operation summary or channel address in the sidebar instead of the operationId.
By default, this behavior is applied only to AsyncAPI v2 documents.

- **expand?: Partial<ExpandConfig>**

This field contains configuration responsible for collapsing and expanding component sections.
Expand All @@ -73,7 +73,7 @@ interface ConfigInterface {
- **publishLabel?: string**

This field contains configuration responsible for customizing the label for publish operations.This take effect for AsyncAPI v2 documents.
This field is set to `PUB` by default.
This field is set to `PUB` by default.

- **subscribeLabel?: string**

Expand Down Expand Up @@ -107,11 +107,11 @@ See exemplary component configuration in TypeScript and JavaScript.
### TypeScript

```tsx
import * as React from "react";
import { render } from "react-dom";
import AsyncAPIComponent, { ConfigInterface } from "@asyncapi/react-component";
import * as React from 'react';
import { render } from 'react-dom';
import AsyncAPIComponent, { ConfigInterface } from '@asyncapi/react-component';

import { schema } from "./mock";
import { schema } from './mock';

const config: ConfigInterface = {
schemaID: 'custom-spec',
Expand All @@ -130,17 +130,17 @@ const config: ConfigInterface = {

const App = () => <AsyncAPIComponent schema={schema} config={config} />;

render(<App />, document.getElementById("root"));
render(<App />, document.getElementById('root'));
```

### JavaScript

```jsx
import * as React from "react";
import { render } from "react-dom";
import AsyncAPIComponent from "@asyncapi/react-component";
import * as React from 'react';
import { render } from 'react-dom';
import AsyncAPIComponent from '@asyncapi/react-component';

import { schema } from "./mock";
import { schema } from './mock';

const config = {
schemaID: 'custom-spec',
Expand All @@ -159,7 +159,7 @@ const config = {

const App = () => <AsyncAPIComponent schema={schema} config={config} />;

render(<App />, document.getElementById("root"));
render(<App />, document.getElementById('root'));
```

In the above examples, after concatenation with the default configuration, the resulting configuration looks as follows:
Expand Down
16 changes: 8 additions & 8 deletions docs/features/anchors.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ Each component has a unique anchor in the `http://{URL}/#{SCHEMA_NAME}-{CONTAINE
- `{URL}` is the website URL.
- `{SCHEMA_NAME}` is the name of the schema. It is passed to the component by configuration with the [`schemaID`](../configuration/config-modification.md#definition) field. By default, the value of `schemaID` is set to an empty string.
- `{CONTAINER}` is the name of the container. The possible values are: `info`, `servers`, `operations`, `messages`, `schemas`. If `ITEM_NAME` is also present then container has singular form like `operation`, `message` etc.
- `{ITEM_NAME}` is the name of the item:
- there are no defined items for the `info` container
- for `operations` container, each item has includes type of operation (`publish` or `subscribe`) like `operation-publish-{ITEM_NAME}-...`
- `{ITEM_NAME}` is the name of the item:
- there are no defined items for the `info` container
- for `operations` container, each item has includes type of operation (`publish` or `subscribe`) like `operation-publish-{ITEM_NAME}-...`
- `{ITEM_PROPERTY}` is the name of a particular part of the item. The possible values are:
- for the `info` container: there are no defined properties
- for the `servers` container: `url-variables`, `security`
- for the `operations` container: `parameters`, `message`
- for the `messages` container: `payload`, `headers`
- for the `schemas` container: there are no defined properties
- for the `info` container: there are no defined properties
- for the `servers` container: `url-variables`, `security`
- for the `operations` container: `parameters`, `message`
- for the `messages` container: `payload`, `headers`
- for the `schemas` container: there are no defined properties

## Examples

Expand Down
7 changes: 5 additions & 2 deletions docs/features/highlight.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,16 @@ To add configuration for an additional language, import configuration from `high
See how to add a configuration in the example below:

```js
import AsyncApiComponent, { hljs } from "@asyncapi/react-component";
import AsyncApiComponent, { hljs } from '@asyncapi/react-component';

import csharp from 'highlight.js/lib/languages/csharp';
hljs.registerLanguage('csharp', csharp);

// And then you can use the comppnent.
render(<AsyncApiComponent schema={schema} config={config} />, document.getElementById("root"));
render(
<AsyncApiComponent schema={schema} config={config} />,
document.getElementById('root'),
);
```

> **NOTE**: You need to load the configuration before rendering the component.
Loading

0 comments on commit 41832c1

Please sign in to comment.