Documentation Guidelines

Here you can find templates for Documentation pages, FAQ, guidelines for images, features and how to use markdown. Access the links below to navigate:

→ Access DOC guidelines
→ Access FAQ guidelines
→ Access Images guidelines

Markdown features

See Markdown Syntax details for more information.

Diagrams

Use Mermaid to build diagrams.
Access all about mermaid diagrams here.

To maintain consistency, remember to use nodes with Round edges using ( ):

```mermaid
graph TD
    A(Organization) --> B(Tenant 01)
    A --> C(Tenant 02)
    A --> D(Tenant 03)
```

Access mermaid syntax details here.

Headings

To use Headings just type one # for each heading level.
Each heading will appear on the right sidebar on the documentation page.

# H1    
## H2    
### H3  
#### H4  
##### H5

Table

This is a table header	Another category
First line	First line another category
Second line	Second line another category

| This is a table header | Another category |
| ---------------------- | ---------------- |
| First line  | First line another category |
| Second line | Second line another category |

Details

Remember that CSS styles are applied to some components. To see how it's displayed on the documentation view the doc website.

This is collapsed

Details description

<details>
<summary>This is collapsed</summary>
Details description
</details>

This is a detail open by default

Details description

<details open>
<summary>This is a detail open by default</summary>
Details description
</details>

Tabs

Tabs are support by .mdx files only.

Apple
Orange
Banana

This is an apple 🍎

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
 <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

Span elements

Text decoration

Text decoration	Decoration
Highlight ``	`Highlighted text`
Italic `* *`	Italic text
Bold ` `	Bold text
Purple `~~ ~~`	~~Purple text~~

→ "Purple text decoration" is a custom style defined on docusaurus config. The default style for this symbol is strikethrough.

To write a block of code just type 4 spaces before entering the code in each line. It'll be displayed like this box.

Links

This is the Carol Documentation repository on GitHub. This is the Carol Documentation repository on GitHub.

Using relative paths:   
See my [About](/about/) page for details.

Images

Access more details about image guidelines here.

To apply image with original size and style:

![alt text for screen readers](./img/logo-carol.png)

To apply image personalized size and styles you need to import the image on the top of the page like:

import logocarol from './/img/logo-carol.png';

Then, style using HTML img tag:

<img src={logocarol} width="200" />