Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add custom styling & custom logo #531

Merged
merged 20 commits into from
Jan 31, 2022
Merged

docs: add custom styling & custom logo #531

Changes from 7 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
5c790e0
docs: add custom styling & custom logo
thim81 Jan 25, 2022
9af9132
Update typos
thim81 Jan 25, 2022
dc610af
Typo corrections
thim81 Jan 25, 2022
75d0db5
docs: add custom styling & custom logo
thim81 Jan 25, 2022
02f187f
Updated the example to use version: next.32
thim81 Jan 25, 2022
b336506
Corrected spellking
thim81 Jan 26, 2022
e8a87ea
Corrected indenting
thim81 Jan 26, 2022
5fc37fb
Update README.md
thim81 Jan 26, 2022
b021ecf
Update README.md
thim81 Jan 26, 2022
1f72e3a
Update README.md
thim81 Jan 26, 2022
27c4b82
Update README.md
thim81 Jan 26, 2022
4054815
Update README.md
thim81 Jan 26, 2022
059c573
Update README.md
thim81 Jan 26, 2022
9a889c2
Update typos
thim81 Jan 26, 2022
3555694
Updated readme
thim81 Jan 26, 2022
3fbd427
Added missing quotes
thim81 Jan 26, 2022
6f982d9
Update README.md
thim81 Jan 26, 2022
2bb8311
Update README.md
thim81 Jan 27, 2022
c1acf33
Update README.md
thim81 Jan 27, 2022
da1f84b
Update README.md
thim81 Jan 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -134,6 +135,90 @@ 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. This provides the option to define your custom font-family and related font styling.
This can be done by defining the styles in a file or inline using by adding a `<style>` tag in the `<head>` section of the page where you are using asyncapi react-component.
thim81 marked this conversation as resolved.
Show resolved Hide resolved

Custom font styling (like used in AsyncAPI studio): `styles/custom.css` >>
thim81 marked this conversation as resolved.
Show resolved Hide resolved
```css
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;
}
```

If you are using the component in React or another front-end framework, don't forget to import the custom style.
``` js
import "@asyncapi/react-component/styles/default.min.css";
import "styles/custom.css";
```
thim81 marked this conversation as resolved.
Show resolved Hide resolved

If you are using the standalone bundle, you can put the custom font styling as a style sheet link or as an inline style in the `<head>` section of the HTML code.

```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@1.0.0-next.32/styles/default.min.css">

<!-- 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>
</head>
<body>

<div id="asyncapi"></div>

<script src="https://unpkg.com/@asyncapi/react-component@1.0.0-next.32/browser/standalone/index.js"></script>
<script>
AsyncApiStandalone.render({
schema: {
url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.0.0/examples/2.0.0/streetlights.yml',
options: { method: "GET", mode: "cors" },
},
config: {
show: {
sidebar: true,
}
},
}, document.getElementById('asyncapi'));
</script>

</body>
</html>
```
thim81 marked this conversation as resolved.
Show resolved Hide resolved

### 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.
thim81 marked this conversation as resolved.
Show resolved Hide resolved

```yaml
asyncapi: 2.2.0
info:
title: Account Service
version: 1.0.0
description": This service is in charge of processing user signups
thim81 marked this conversation as resolved.
Show resolved Hide resolved
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)
thim81 marked this conversation as resolved.
Show resolved Hide resolved

## 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.
Expand Down