| meta | content | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Feel free to explore this page in your markdown editor (/docs/components.mdx) to see how the components were used, or in MDX content files that already use MDX components.
MDX components are useful for adding rich content and interactions within your contributions.
There are two types of components:
- Native (or native-extended) markdown style
- Tag style (some kind of html tag)
🧩 This component uses a native-extended Markdown style.
Use a triple backquote character ``` to enclose text
You can specify the language of the code. A list of languages can be found here.
Component examples
this is a block of code
The following example uses the JSX language, i.e. ```jsx:
import React, { useState } from 'react'
function Example() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}With bash script, i.e ```bash
WEEK=`date '+%W'` # The week of the year (0..53).
WEEK=${WEEK#0} # Remove possible leading zero.
let "INDEX = $WEEK % $COUNT" # week modulo count = the lucky person
COMPAGNON=${COMPAGNONS_LIST[INDEX]} # Get the lucky person's e-mail address.With no language, i.e. ```
server {
listen 212.d.e.f:80n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8;
server_name site2.tld;
root /var/www/site2;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
Add the metadata no-copy if you don't need the CopyButton.
Note that a language must be indicated in this case.
Here, we use HTML language without CopyButton, i.e. ```html no-copy
<div>
<h2>I'm the header 2</h2>
<p>poor paragraph...</p>
<p></p>
</div>🧩 This component uses a Tag style.
Component example #1
The first child has to be an h2
Content string
Component example #2
## Concept with MDXserver {
root /var/www/site2;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
Code example
<Concept>
## The first child has to be an `h2`
You can use simple text and even MDX components here like Message, Lightbox, Code, etc
</Concept>🧩 This component uses a native-extended Markdown style.
- List items should be separated with a line break.
- If you want to include two separate definition lists, there must be a line of text separating them. Otherwise, the lists will be stuck together.
Description : Root-level tag for the ObjectLockConfiguration parameters.
Random text to separate the lists. It can be a title or inline code.
Description : Indicates whether this bucket has an Object Lock configuration enabled
Type : String
Valid Values
: Enabled
Required : Yes
Code example
Description
: Indicates whether this bucket has an Object Lock configuration enabled
Type
: String
Valid Values
: `Enabled`
Required
: Yes🧩 This component uses a Native Markdown style.
Voluptate commodo eu consectetur sint proident et Lorem amet officia mollit cupidatat. Proident in ullamco eiusmod veniam quis non qui minim elit veniam ullamco eu. Ea duis enim sint incididunt exercitation tempor irure veniam. Fugiat labore veniam magna dolor anim deserunt deserunt laboris.
Eu minim consectetur pariatur deserunt est esse anim ullamco do deserunt consequat sit irure. Esse aute adipisicing ullamco non eu ex ut dolore incididunt veniam aliqua est. Ea ex laboris eiusmod eiusmod ut. Ipsum veniam officia elit nisi est consequat Lorem ut magna anim duis. Occaecat commodo sint ipsum reprehenderit deserunt elit duis.
Do enim nisi laborum aliqua magna anim magna officia velit. Excepteur minim nostrud in laboris incididunt cillum consectetur laborum sit. Eu cillum sit irure excepteur. Voluptate aute fugiat ullamco sint ullamco laborum voluptate deserunt incididunt in mollit enim. Quis nisi laborum id nulla nisi amet est.
Deserunt id culpa aliqua exercitation exercitation officia amet ea ea. Sit aliqua tempor Lorem incididunt amet elit dolor. Ullamco commodo nisi ullamco adipisicing officia nisi. Nulla amet nostrud minim cupidatat aute labore.
Cillum cupidatat aute Lorem amet laborum cillum occaecat adipisicing excepteur. Nisi proident reprehenderit proident veniam nisi sit eu anim deserunt Lorem irure pariatur ad incididunt. Esse commodo officia elit id aliquip dolore commodo. Lorem amet labore in consectetur laborum cillum tempor mollit anim laboris velit aute do. Ex sunt elit irure deserunt laboris ullamco amet Lorem amet tempor deserunt qui.
Nulla labore qui aliqua minim adipisicing. Ut irure Lorem consectetur incididunt reprehenderit veniam id duis mollit. Consectetur ullamco Lorem excepteur magna sit excepteur duis nisi aliqua veniam cupidatat enim. Aute eiusmod duis enim non adipisicing incididunt enim aute laborum proident. Ea nulla sit laborum consectetur laborum minim tempor cillum do sunt deserunt laborum. Velit laborum deserunt laborum eiusmod qui dolore enim irure laborum deserunt enim nostrud cillum Lorem.
Code example
## Heading title level 2
Lorem ipsum
### Heading title level 3
Lorem ipsum
#### Heading title level 4
Lorem ipsum
##### Heading title level 5
Lorem ipsum
###### Heading title level 6
Lorem ipsum🧩 This component uses a Native Markdown style.
To use code style in the middle of text lines, enclose the text with a single backquote (`) character
Hello, I'm inline code. Call the function getMoreLove(). This is my IP address: 192.168.1.1.
Code example
…this is a normal inline text using single quotes `192.168.0.1` for IP.…this is a normal inline text using single quotes 192.168.0.1 for IP.
🧩 This component uses a Tag style.
Inline Console icons are used in the text. They are the same as the Scaleway Console icons.
- The MDX is a TAG named
Icon - Mandatory 'name' attribute is used with keys
Keys are:
assistance,delete,download,cancel,edit,glacier,more,seeMore,plus,toggle,unlink,unsend,validate,
Voluptate commodo eu consectetur sint proident et Lorem amet officia mollit cupidatat . Proident in ullamco eiusmod veniam quis non qui minim elit veniam ullamco eu . Ea duis enim sint incididunt exercitation tempor irure veniam. Fugiat labore veniam magna dolor anim deserunt deserunt laboris.
Eu minim consectetur pariatur deserunt est esse anim ullamco do deserunt consequat sit irure . Esse aute adipisicing ullamco non eu ex ut dolore incididunt veniam aliqua est. Ea ex laboris eiusmod eiusmod ut. Ipsum veniam officia elit nisi est consequat Lorem ut magna anim duis. Occaecat commodo sint ipsum reprehenderit deserunt elit duis.
Code example
…this is a normal inline text <Icon name="toggle" /> with an icon.🧩 This component uses a Native Markdown OR a Tag style.
Code example
// Native Markdown
// HTML Tag
<img src="https://placekitten.com/800/500" />🧩 This component uses a Tag style.
Props: src (mandatory):
<Lightbox src="icon.webp" />Props: size="[small|medium|large]"
<Lightbox src={["icon.webp","miam.webp"]} size={"small"} alt={["icon","Cupcake Scaleway"]} />
<Lightbox src={["icon.webp","miam.webp"]} size={"small"} alt={["icon","Cupcake Scaleway"]} /><Lightbox src={["icon.webp","miam.webp"]} size={"medium"} alt={["icon","Cupcake Scaleway"]} />
<Lightbox src={["icon.webp","miam.webp"]} size={"medium"} alt={["icon","Cupcake Scaleway"]} /><Lightbox src={["icon.webp","miam.webp","first-scaleway-chip.webp"]} size={"small"} alt={["icon","Cupcake Scaleway","chips"]} />
<Lightbox src={["icon.webp","miam.webp","first-scaleway-chip.webp"]} size={"small"} alt={["icon","Cupcake Scaleway","chips"]} /><Lightbox src={["icon.webp", "scaleway-flex-drag.gif"]} alt="" />
<Lightbox src="scaleway-flex-drag.gif" alt="" />
<Lightbox src={["icon.webp", "scaleway-flex-drag.gif"]} alt="" /><Lightbox src="miam.webp" alt="Cupcake Scaleway" /><Lightbox src="elements-create-account.webp" alt="Create Account form" longdesc="Log-in panel for Elements product console. The form contain a toggle to choose if it is a personal or corporate account. Then firstname and lastname inputs, then an email input. Below there is a checkbox to receive marketing emails. Finally a Captcha and a submit button." />🧩 This component uses a Native Markdown OR a Tag style.
- Internal
<Link />Tag component: Tutorials<Link to="/tutorials">Tutorials</Link>
[]()Native syntax: Tutorials[Tutorials](/tutorials)
[]()PDF: Latest changes of the week<!-- .pdf extension is self detected --> [Latest changes of the week](new-changes.pdf)
- External
<Link />Tag component: Console Scaleway<Link to="https://console.scaleway.com">Console Scaleway</Link>
[]()Native syntax: Tutorials[Tutorials](https://console.scaleway.com)
🧩 This component uses a Native Markdown style.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- First
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Third
- fourth
- fifth
1. First 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <Lightbox src="miam.webp" /> 3. Third 4. fourth  5. fifth
- First
- First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- First
- Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- Third
- First
- First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- First
- Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- Third-
List number 1
New line, still in number 1
-
List number 2 with code block inside
server { listen 212.d.e.f:80n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8; server_name site2.tld; root /var/www/site2; index index.html; location / { try_files $uri $uri/ =404; } }I don't know mnI don't know mnI don't know mnI don't know mn
-
List number 3 here
-
Click Instances in the Compute section of the side menu. The Instance creation page displays.
-
Click the Create an Instance button. The Instance creation wizard displays:
-
You can now make those steps
- Choose an Availability Zone, which is the geographical region where your instance will be deployed
- under
- line
- Choose an Image to run on your instance. This can be an operating system, an InstantApp or a custom image.
- Choose an Instance type. Different instance types have different prices, processing power, memory, SSD disks and bandwidth.
- Add Volumes. This is an optional step. You can leave the default settings for storage, or choose to add more block or local storage to your instance.
- Enter a Name for your instance, or leave the randomly-generated name in place. Optionally, you can also add tags to help you organize your instances.
- Click Advanced Options if you wish to configure a flexible IP, a local bootscript or a cloud-init configuration.
- Verify the SSH Keys that will be give you access to your Instance
- Verify the Estimated Cost of your instance, based on the specifications you chose.
- Choose an Availability Zone, which is the geographical region where your instance will be deployed
-
Click Create a new instance to finish. The creation of your instance is started, and you are informed when the instance is ready.
-
Complete the following information:
- Frontend rules include:
- Frontend rule name
- Port
- SSL Certificate
- Backend rules include:
- Backend rule name
- Protocol: TCP or HTTP
- Port
- Proxy
- Health check type
- Sticky session
- Server IP You can also use an existing backend. To do so, click Use an existing Backend and select the backend of your choice from the dropdown list.
- Frontend rules include:
-
Click Create Frontend Code example
1. Click **Instances** in the **Compute** section of the side menu. The Instance creation page displays. 2. Click the **Create an Instance** button. The Instance creation wizard displays: 3. You can now make those steps - Choose an **Availability Zone**, which is the geographical region where your instance will be deployed - under - line - Choose an **Image** to run on your instance. This can be an operating system, an InstantApp or a custom image. - Choose an **Instance type**. Different instance types have different prices, processing power, memory, SSD disks and bandwidth. - Add **Volumes**. This is an optional step. You can leave the default settings for storage, or choose to add more [block](/faq/) or [local](/tutorials/) storage to your instance. - Enter a **Name** for your instance, or leave the randomly-generated name in place. Optionally, you can also add tags to help you organize your instances. - Click **Advanced Options** if you wish to configure a flexible IP, a local bootscript or a cloud-init configuration. - Verify the **SSH Keys** that will be give you access to your Instance - Verify the **Estimated Cost** of your instance, based on the specifications you chose. 4. Click **Create a new instance** to finish. The creation of your instance is started, and you are informed when the instance is ready. 5. Complete the following information: - Frontend rules include: - Frontend rule name - Port - SSL Certificate - Backend rules include: - Backend rule name - Protocol: TCP or HTTP - Port - Proxy - Health check type - Sticky session - Server IP <Message type="note"> You can also use an existing backend. To do so, click **Use an existing Backend** and select the backend of your choice from the dropdown list. </Message> 6. Click **Create Frontend**
🧩 This component uses a Tag style.
A macro is a piece of content written in MDX which can be re-used anywhere.
^^^^ The above text come from a macro!
Code example
<Macro id="compute-public-ip" />🧩 This component uses a Tag style.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * First item * Second item- First item
- Second item
Message must not start with a tab.
Code example
<Message type="tip">
**Lorem** ipsum dolor sit amet, <Icon name="validate"/> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
- First item
- Second item
- **Important item**
- `Some code` <Icon name="delete"/>
</Message><Message type="requirement">
| Content Type | Description | Number |
| ------------ | ------------------- | ------ |
| Hello | Three columns table | 1 |
| Tutorials | New concept | 2 |
<Message type="important">
**Lorem** ipsum dolor sit amet, <Icon name="validate"/> consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
<Message type="tip">
- First item
- Second item
- **Important item**
- `Some code` <Icon name="delete"/>
</Message>
</Message>
</Message>🧩 This component uses a Native Markdown style.
| Content Type | Description |
|---|---|
| Videos | Left-aligned table |
| is overflowed ? | verylongwordtocheckifthereissomevieportoverflowsinsmallmobilewidths |
| How-tos | Problem-oriented, we take you through a series of steps to reach a real goal. |
| Scaleway Onboarding guide | Learning-oriented, we take you through a series of steps to learn a concept |
| Content Type | Description |
|---|---|
| Internal link | Centered-align table |
| External link | Problem-oriented, we take you through a series of steps to reach a real goal. |
| Tutorials | Learning-oriented, we take you through a series of steps to learn a concept |
| Content Type | Description |
|---|---|
| Hello | Right-align table |
| Tutorials | Learning-oriented, we take you through a series of steps to learn a concept |
| Content Type | Description | Number |
|---|---|---|
| Hello | Three columns table | 1 |
| Tutorials | New concept | 2 |
Code example
| Content Type | Description | Number |
| ------------ | ------------------- | ------ |
| Hello | Three columns table | 1 |
| Tutorials | New concept | 2 |🧩 This component uses a Tag style.
Component example #1
Hello Tabs CONSOLE 1. Click **Instances** in the **Compute** section of the side menu. The Instance creation page displays. If you have existing Instances in your account, you will see a list of these Instances instead of the Instance creation page, and the button for creating new Instances. 2. Click **Create an Instance**. The Instance creation wizard displays. 3. Complete the following steps in the wizard: - Choose an **Availability Zone**, which is the geographical region where your Instance will be deployed. - Choose an **Image** to run on your Instance. This can be an operating system, an InstantApp or a custom image. A complete list of all available Linux distributions and InstantApps can be found [here](https://www.scaleway.com/en/imagehub/). When choosing an image for an Enterprise Instance, be aware this Instance type is not compatible with bootscripts, except for [rescue mode](/compute/instances/how-to/use-boot-modes/#how-to-use-rescue-mode). InstantApps are also not available for this Instance type. - Choose an **Instance type**. Different Instance types have different prices, processing power, memory, storage options and bandwidth. - Add **Volumes**. Volumes are storage spaces used by your Instances. - For **GP1 Instances** you can leave the default settings of a maximum local storage, or choose how much [local](/compute/instances/concepts/#local-volumes) and/or [block](/compute/instances/concepts/#block-volumes) storage you want. Your **system volume** is the volume on which your Instance will boot. The system volume can be either a local or a block volume. - **PRO2** and **Enterprise** Instances boot directly [on block volumes](/compute/instances/concepts/#boot-on-block). You can add several block volumes and define how much storage you want for each. Please note that: - a volume with an OS image should be at least 10GB (125GB for a GPU OS). - if several Block Storage volumes are connected to your Instance, the first volume will contain the OS and is required to boot the Instance. You can [change your boot volume](/compute/instances/how-to/use-boot-modes/#how-to-change-the-boot-volume) after you create the Instance. - if you have two or more volumes with identical operating systems, or a volume with no operating system, choosing one of these as your boot volume may cause unpredictable boot behavior. - Enter a **Name** for your Instance, or leave the randomly-generated name in place. Optionally, you can also add [tags](/compute/instances/concepts/#tags) to help you organize your Instance. - Click **Advanced Options** if you want to configure a [flexible IP](/compute/instances/concepts/#flexible-ip), a local bootscript or a [cloud-init configuration](/compute/instances/concepts/#cloud-init). Otherwise, leave these options at their default values. - Verify the [SSH Keys](/console/my-account/concepts/#ssh-key) that will give you access to your Instance. - Verify the **Estimated Cost** of your Instance, based on the specifications you chose. 4. Click **Create a new Instance** to finish. The creation of your Instance begins, and you will be informed when the Instance is ready.Your Instance is now created and you are redirected to the **Overview** tab. From here, you can see information including your Instance's Public IP, the SSH command to use to [connect to it](/compute/instances/how-to/create-an-instance/), and other information, settings, and actions for the Instance.
The following command and request body creates an Instance via the API using `curl`.
You need to replace `{zone}` in the URL with the desired zone, and the various placeholder values in the payload (`"string"`, `"boolean"` etc) with the desired values, according to the type of Instance you want to create. See the dedicated section of the [API reference](https://developers.scaleway.com/en/products/instance/api/#post-7482b1) for full details.
```bash
curl -H 'X-Auth-Token: $SECRET_KEY' -H 'Content-Type: application/json' \
https://api.scaleway.com/instance/v1/zones/{zone}/servers -d \
'{
"name": "string",
"dynamic_ip_required": boolean,
"commercial_type": "string",
"image": "string",
"volumes": {
"<volumeKey>": {
"id": "string",
"boot": boolean,
"name": "string",
"size": 300000000000,
"volume_type": "l_ssd",
"base_snapshot": "string",
"organization": "string",
"project": "string"
}
},
"enable_ipv6": boolean,
"public_ip": "string",
"boot_type": "local",
"bootscript": "string",
"organization": "string",
"project": "string",
"tags": [
"string"
],
"security_group": "string",
"placement_group": "string"
}'
```
Here is an example of a complete curl request to create a GP1-S Instance in the `fr-par-1` zone, called "my-instance" running Ubuntu 20.04 Focal Fossa in the Organization `"3ei11278-827c-4c34-8111-0c2576ed921f`. You can see that many of the optional values from the full command above have been omitted:
```bash
curl -H "X-Auth-Token: $SECRET_KEY" -H "Content-Type: application/json" https://api.scaleway.com/instance/v1/zones/fr-par-1/servers -d \
'{
"name": "my-instance",
"commercial_type": "GP1-S",
"image": "881d7a33-4cfa-4046-b5cf-c33cb9c62fb6",
"boot_type": "local",
"organization": "3ei11278-827c-4c34-8111-0c2576ed921f",
"tags": [
"my-tag"
]
}'
```
Code example
<Tabs id="install">
<TabsTab label="Tab name">
Lorem Ipsum
</TabsTab>
<TabsTab label="Other tab name">
1. Rich content
2. Using MDX components
<Lightbox src="first-scaleway-chip.webp" alt="" />
<Message type="note">
If you have existing Instances
in your account, you will see a list of
these Instances instead of the
Instance creation page, and the <Icon name="plus" />
button for creating new Instances.
</Message>
</TabsTab>
</Tabs>id props on <Tabs>. It's needed to distinguish multiples tabs snippet on a same page