Custom widgets

This page demonstrate the custom widgets available in this project.

info

All such widgets are stored within docs/src/components directory.

Label - Rounded tags

Widget to add labels such as beta features.

Code

Import

Add import line at the top of the markdown file:

import Label from '@site/src/components/Label';

Use

Place the content to place a Label in your markdown page:

    <Label value="BETA"/> feature

Preview

BETA feature

CenteredImage - Centered image

Widget to center an image on the page.

Code

Import

Add import line at the top of the markdown file:

import CenteredImage from '@site/src/components/CenteredImage';

Use

Place the content to center in your markdown page:

<CenteredImage 
    src="/images/doc/initial_setup_popup.png"
    alt="Configuration wizard"
    figureNumber={1} 
/>

Preview

Figure 1: Configuration wizard

Centered - Centered content

Widget to center content within the page.

Code

Import

Add import line at the top of the markdown file:

import Centered from '@site/src/components/Centered';

Use

Place the content to center in your markdown page:

<Centered>
   Some central text
</Centered>

Preview

Some central text

YoutubePlayer - Embed Youtube videos

Widget to display YouTube videos.

Code

Import

Add import line at the top of the markdown file:

import YoutubePlayer from '@site/src/components/YoutubePlayer';

Use

Place the content to place a Youtube player in your markdown page:

    <YouTubePlayer
        videoId="ko5_FA-TdAU"
        author="Cables & Coffee (co-founder)"
        description="Quickly see what you can achieve!"
    />

Preview

By: Cables & Coffee (co-founder)

Quickly see what you can achieve!