Using components

We provide a few custom components that you can use inside documents.

To import a component, use an import statement from the component's description. Put the import on the top of a document, right before the main heading, and after doc metadata.

---
...
hide_title: true
---

<!-- PUT IMPORTS HERE -->

# The document heading

Here's the list of our custom components.

Image

Extended image component.

Importing:

import Image from '@site-comps/Image';

	src	(required) image source, just like <img> HTML tag.
	border	Whether to add full page width border around image (default: false)
	center	Whether to center the image
	desc	A centered description displayed below the image
	minwidth	A convenient way to specify minWidth of the image."
	width	A convenient way to specify width of the image."
	maxwidth	A convenient way to specify maxWidth of the image."
	minheight	A convenient way to specify minHeight of the image."
	height	A convenient way to specify height of the image."
	maxheight	A convenient way to specify maxHeight of the image."

🔹 Image component example

<Image center border
        maxheight={200}
        alt="Goblin enemy presentation"
        src="/img/tutorials/course/basic/structures/GoblinEnemy.gif"
        desc={<>Goblin image by <a href="https://luizmelo.itch.io/monsters-creatures-fantasy">LuizMelo</a></>}
    />

Result:

---

Goblin image by LuizMelo

---

Columns

Splits children into columns.

Importing:

import Columns from '@site-comps/Columns';

columns

(required) CSS column widths (array), see example below.

🔹 Columns component example

<Columns columns={["8fr", "4fr"]}>
    <div>Contents of column 1</div>
    <div>Contents of column 2</div>
</Columns>

dobra rada

Columns component are often used to display code alongside its result.

You can use a prepared "coderesult" snippet I've put in .vscode-template.

Known issues:

• column widths are not responsive

CustomCodeBlock

Adds additional functionality to markdown code blocks.

Importing:

import CustomCodeBlock from '@site-comps/CustomCodeBlock';

	maxLines	Number of lines that when exceeded, causes a vertical scrollbar to appear.
	resizable	Whether user should be able to resize code block

Changelog:

• Removed lineNumbers - Docusaurus now natively supports showLineNumbers in Markdown code block

Known issues:

• user can resize beyond the height of the code block

GoogleSlides

Embeds a Google Slides presentation.

Importing:

import GoogleSlides from '@site-comps/GoogleSlides';

	src	(required) The source of a Google Slides presentation (cut after /embed)
	aspectRatio	A number that describes width : height ratio (default: 16 / 9)
	delay	Interval between automatic slide changes (milliseconds)
	autoStart	Whether to start the presentation after page load (default: true)
	loop	Whether to loop the presentation (default: true)
	fullWidth	Whether to use 100% (true) of page width or 80% (false) (default: false)

Example:

<GoogleSlides
        src="https://docs.google.com/presentation/d/e/2PACX-1vTsdQPMXKN90rcz4i515JK-rpUHjHTc5xIjGVtNJS8XSbloMNObHEBUSszvYi9I7tuKBNIdEKNFh1jk/embed"
        aspectRatio={960 / 500}
        delay={500}
        centered
    />

Result:

---

---

SymbolTable

A table that is used to document symbols and properties.

Importing:

import SymbolTable, { Symbol } from '@site-comps/SymbolTable';

SymbolTable fields

noTraits

Whether to hide the left-most column with symbol traits (const, static, etc.)

Symbol fields

	name	(required) Name of the symbol
	desc	Description of the symbol. You can also specify it as a children: <Symbol name="symbol"> This will be considered a description </Symbol> uwaga Due to rules of MDX formatter, if you want to use Markdown elements inside the JSX element, you have to remove the indentation, otherwise it will be recognized as a code block.
	autoLink	Auto-generate the link
	link	Custom link
	linkName	URL-compliant name used when autoLink=true

Symbol trait fields:

	pub	Adds a "public" trait to the symbol
	priv	Adds a "private" trait to the symbol
	prot	Adds a "protected" trait to the symbol
	volatile	Adds a "volatile" trait to the symbol
	const	Adds a "const" trait to the symbol
	constexpr	Adds a "constexpr" trait to the symbol
	virtual	Adds a "virtual" trait to the symbol
	static	Adds a "static" trait to the symbol

ClassSummary

Importing:

import ClassSummary from "@site-comps/ClassSummary";

Usage:

import ClassSummary             from '@site-comps/ClassSummary';
import SymbolTable, { Symbol }  from '@site-comps/SymbolTable';

<ClassSummary name="string" namespaces="std">

### Methods

<SymbolTable>
    <Symbol pub autoLink name="contains" desc="Checks if the string contains the given substring or character"/>
    <Symbol pub autoLink name="substr" desc="Returns a substring"/>
    <Symbol pub autoLink name="empty">
        Returns <code>true</code> if the string is empty, otherwise <code>false</code>.
    </Symbol>
</SymbolTable>

</ClassSummary>

Result:

ClassSummary Fields

	name	(required) The name of the class
	namespaces	A string, or a list of namespaces, for example: namespaces="std" or namespaces={["std", "chrono"]}

ProductCard

Importing:

import ProductCard from '@site-comps/ProductCard';

Usage:

<ProductCard title="Visual Studio Code" author="Microsoft" img="/img/icons/products/vscode_1_35.svg" rating={9}>
    <ProductCard.Desc>
        A powerful tool with everything you need, including a code editor
        and a compiler that supports the latest C++20 standard.
        <ProductCard.Details>
            <h3>Pros</h3>
            <ul>
                <li>All in one</li>
                <li>Simple installation and configuration</li>
                <li>Access to the latest C++20 standard</li>
                <li>The best debugger available</li>
            </ul>
            <h3>Cons</h3>
            <ul>
                <li>Relatively big installation size (download ~2 GB, after installation ~7 GB)</li>
                <li>Not portable</li>
                <li>Windows only</li>
            </ul>
        </ProductCard.Details>
    </ProductCard.Desc>
    <ProductCard.Actions>
        <a href="https://code.visualstudio.com">Product website</a>
    </ProductCard.Actions>
</ProductCard>

Result:

Visual Studio Code (Microsoft)

A powerful tool with everything you need, including a code editor and a compiler that supports the latest C++20 standard.

Szczegóły

Pros

• All in one
• Simple installation and configuration
• Access to the latest C++20 standard
• The best debugger available

Cons

• Relatively big installation size (download ~2 GB, after installation ~7 GB)
• Not portable
• Windows only

Product website

ProductCard Fields

	title	(required) The name of the class
	img	(required) A string containing an URL of an image, or a SVG element
	author	The author of the product
	rating	The rating of the product, showed using 5-stars. Use values between 0 and 10.

ProductCard.Desc

It is a subcomponent of the ProductCard used to add the product's description.

ProductCard.Actions

It is a subcomponent of the ProductCard used to add actions content to the product.

ProductCard.Details

It is a subcomponent of the ProductCard used to add details to the product's description.

uwaga

ProductCard.Details is only allowed inside a ProductCard.Desc element.

ToolCard

Importing:

import ToolCard from '@site-comps/ToolsSummary';

uwaga

TODO: description