From 5c790e032e4a68f1fcaad0e1a2c4b531e76defb7 Mon Sep 17 00:00:00 2001 From: thim81 Date: Tue, 25 Jan 2022 15:21:37 +0100 Subject: [PATCH 01/20] docs: add custom styling & custom logo --- README.md | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/README.md b/README.md index 940ddb76c..5bfa5efaf 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,7 @@ 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 @@ -134,6 +135,91 @@ import "@asyncapi/react-component/styles/default.css"; import "@asyncapi/react-component/styles/default.min.css"; ``` +### Custom styles +The asyncapi react-component does not set any global fonts, to allow you to define your own custom font-family and related font styling. +This can be done by defining the styles in a file or inline using by adding the + + + +
+ + + + + + +``` + +### Custom logo + +The AsyncAPI component supports the option to use a custom logo. By using the `x-logo` custom extension in the InfoObject, a logo will be shown in the top left corner. + +```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: + ... +``` + +Example: +![2022-01-25 at 15 18 23](https://user-images.githubusercontent.com/952446/150993843-8fbf5c90-50ed-4aed-8268-01ce27ecf173.png) + + ## Playground This repository comes in with a [Playground application](https://asyncapi.github.io/asyncapi-react/). Test it to see the component in action and play with it before you use it in your application. From 9af9132f024fabaf145f5d38ae70778ee9170e4e Mon Sep 17 00:00:00 2001 From: thim81 Date: Tue, 25 Jan 2022 15:25:25 +0100 Subject: [PATCH 02/20] Update typos --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 5bfa5efaf..4e65ac513 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ import "@asyncapi/react-component/styles/default.min.css"; ### Custom styles The asyncapi react-component does not set any global fonts, to allow you to define your own custom font-family and related font styling. -This can be done by defining the styles in a file or inline using by adding the
- + - - - - -``` + + + + + + + + + + ... + ### Custom logo From 27c4b822b4e3254bfa6c1b994b328ebeb8bbc255 Mon Sep 17 00:00:00 2001 From: thim81 Date: Wed, 26 Jan 2022 13:05:23 +0100 Subject: [PATCH 11/20] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Maciej Urbańczyk --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index f9706844c..b67c6db97 100644 --- a/README.md +++ b/README.md @@ -195,8 +195,6 @@ channels: ... ``` -Example: -![2022-01-25 at 15 18 23](https://user-images.githubusercontent.com/952446/150993843-8fbf5c90-50ed-4aed-8268-01ce27ecf173.png) ## Playground From 4054815a8b584d03c1b5ba3b530eef9c8ac65a09 Mon Sep 17 00:00:00 2001 From: thim81 Date: Wed, 26 Jan 2022 13:05:31 +0100 Subject: [PATCH 12/20] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Maciej Urbańczyk --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b67c6db97..d41ead600 100644 --- a/README.md +++ b/README.md @@ -189,7 +189,7 @@ asyncapi: 2.2.0 info: title: Account Service version: 1.0.0 - description": This service is in charge of processing user signups + description: This service is in charge of processing user signups. x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png' channels: ... From 059c573a8c1e67bab1c94e2e22fc3ce5e5f1d0de Mon Sep 17 00:00:00 2001 From: thim81 Date: Wed, 26 Jan 2022 13:05:38 +0100 Subject: [PATCH 13/20] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Maciej Urbańczyk --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d41ead600..cbd41a3fc 100644 --- a/README.md +++ b/README.md @@ -182,7 +182,9 @@ If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you ### Custom logo -The AsyncAPI component supports the option to use a custom logo. By using the `x-logo` custom extension in the InfoObject, a logo will be shown in the top left corner. +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 From 9a889c25ee5c85510474c642356d8e102684ea88 Mon Sep 17 00:00:00 2001 From: thim81 Date: Wed, 26 Jan 2022 13:06:32 +0100 Subject: [PATCH 14/20] Update typos --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cbd41a3fc..d8043d1be 100644 --- a/README.md +++ b/README.md @@ -156,7 +156,7 @@ body { } ``` -If you are using the component in project project that uses bundler like Webpack don't forget to import the custom styles. +If you are using the component in a project that uses bundler like Webpack don't forget to import the custom styles. ``` js import "styles/custom.css"; From 35556941fca33fff5952caa953fd5da4bfee1dea Mon Sep 17 00:00:00 2001 From: thim81 Date: Wed, 26 Jan 2022 13:10:36 +0100 Subject: [PATCH 15/20] Updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d8043d1be..6657fb830 100644 --- a/README.md +++ b/README.md @@ -140,7 +140,7 @@ The AsyncAPI React component does not set any global fonts and any global reset This can be done by defining the styles in a file or inline using by adding a `