NavigationContentFooter
Jump toSuggest an edit

Editor Components listing - Docs

Buttons

Steps & StepButton

🧩  This component uses a Tag style.

Code example:

<Steps>
  <StepButton to="/">How-to create an Instance</StepButton>
  <StepButton to="/">How-to create an account</StepButton>
</Steps>

Render:

How-to create an account

Two steps

How-to create an InstanceHow-to create an account

ClickableBanner

🧩  This component uses a Tag style.

Code example:

<ClickableBanner
  productLogo="cli"
  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/foo/dd"
  label="Link"
/>

Render:

CLI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

Code example:

<ClickableBanner
  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/foo/dd"
  label="Link"
/>

Render:

CLI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

DefaultCard

🧩  This component uses a Tag style.

Props:

  • title (mandatory!)
  • tags (use OBJECT array)
  • description
  • url (for link)
  • label (for link)

Code example:

<DefaultCard 
  title="Lorem Ipsum"
  tags={['one', 'two', 'three']}
  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad."
  url="/#"
  label="Link label" />

Render:

Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label

Minimal

Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

Linked

Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label

Linked, no description & default label

Lorem IpsumSee more about: Lorem Ipsum

Linked & tags, without description

Lorem Ipsum
onetwothree
Link label

⚙️  This component is a “system codebase” component.

General links

  • Slack Community
  • Service Status
  • Scaleway Ideas
  • Report Abuse
  • Technical Assistance

Grid

🧩  This component uses a Tag style.

Code example:

<Grid>
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
</Grid>

Render:

Example using DefaultCard in Grid wrapper.

Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label
Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label
Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label
Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label

HelpBanner

🧩  This component uses a Tag style.

Code example:

<HelpBanner 
  url="https://console.scaleway.com/support/tickets"
  title = 'Still need help?'
/>

Render

Log (Changelog)

🧩  This functionnality uses MDX files.

⚙️  This is a “system codebase” feature.

See Changelog page.

Each “Log” is MDX file:

  • Go to changelog/ folder
  • Add or choose a directory relative to the log you want to add
  • Create a .mdx file in it

NOTES:

  • Organize changelog/ folder structure as you want
  • The .mdx filename does not matter
  • Assets should be in a asset directory, sibling of your .mdx file

Log file frontmatter

At top of .mdx file, you MUST add data in frontmatter:

---
title: Migration to the new S3 backend (HIVE) for all regions
status: changed
author:
    fullname: 'Join the #container-registry channel on Slack.'
    url: 'https://slack.scaleway.com/'
date: 2022-01-02
category: compute
product: container-registry
---
  • title (mandatory)
  • status (mandatory)
    • added
    • security
    • changed
    • deprecated
    • removed
    • fixed
  • author
    • fullname (optional / mandatory IF url is set) It could be a name or a sentence if you please.
    • url (optionnal)
  • date (mandatory) YYYY-MM-DD
  • category (mandatory) kebab-case
  • product (mandatory) kebab-case

Log file contents

The content section works as any documentation .mdx file. It accept markdown and Components as well. Be concise !

ChangelogList

🧩  This component uses a Tag style.

The ChangelogList component is used to display the latest entries of the changelog, in a particular page.

Display all products

If there is no product name passed to the component, the list will display the X latest changes from the changelog:

Code example:

<ChangelogList numberOfChanges={4} />

Render:

  • Jobs

    Added

    Added cost estimator when updating resources

    The console now has a new feature that provides a cost breakdown when updating the vCPU and RAM configurations for Serverless Jobs. The console now displays both the old and new pricing, enabling you to assess cost changes easily before applying resource updates.

  • Managed Inference

    Changed

    New public endpoints

    All new public endpoints for Managed Inference deployments will be using the scaleway.com domain. Legacy endpoints in scw.cloud will remain functional until the deployment gets deleted.

  • Billing

    Added

    Discover our new Compute Savings Plan offer

    Scaleway’s Savings Plan is a commitment-based discount program that provides more cost-effective billing compared to the pay-as-you-go model. Currently, this offer can be used with Instance products. Access Savings Plans in the Scaleway console in the Cost optimization tab of your Billing space.

    Read our dedicated documentation for more information and to purchase your first Savings Plan.

  • Elastic Metal

    Added

    New public bandwidth increasing option!

    On compliant Elastic Metal offers, you can now increase the public bandwidth as you wish through the console or API. The eligible offers where you can increase the public bandwidth up to 10 Gbps are:

    • EM-B220E-NVME
    • EM-B320E-NVME
    • EM-B420E-NVME
    • EM-B520E-NVME
    • EM-I115E-NVME
    • EM-L220E-NVME
    • EM-L420E-NVME

    To activate it, go to the Elastic Metal server section of the Scaleway console and click Settings > Public bandwidth > Manage bandwidth.

    Prices of this option are available here.

View the full changelog

Display only the changes for a specific product

By adding a product name to the component, the list will display the X latest changes from the changelog for this product:

Code example:

<ChangelogList productName="instances" numberOfChanges={2} />

Render:

  • Load Balancers

    Changed

    Static private network attachment change

    Following the deprecation of static Private Network attachment, the Load Balancer API will no longer accept static Private Network attachement with an IP address outside of the Private Network subnet.

    Please update to DHCP attachment type (recommended) or use an IP address which belongs to the Private Network subnet.

    If you already use DHCP attachment mode or static attachement mode with an IP address belonging to the Private Network subnet, you're not affected by this change.

  • Load Balancers

    Added

    Public IPv6 addresses are now available for Load Balancer

    You can now add a public IPv6 address to both new and existing Load Balancers. This feature is available for all regions, and IPv6 addresses can be attached in addition to existing IPv4 addresses. Find out more in our documentation.

View the full changelog

About Download link in content

🧩  This feature uses a native-extended Markdown style.

  • Use [Download](document-pdf-name.pdf) the document as PDF file.
  • Place the PDF file at a sibling assets directory
    • This is usefull to automatically get the filesize data
  • Then it should appear like this (with PDF icon):

    • 📄 Download (PDF, 2.26MB) the document as PDF file.

ProductCard

🧩  This component uses a Tag style.

Props:

  • src (mandatory!)
  • title (mandatory!)
  • description
  • url (for link, mandatory!)

Code example:

<ProductCard 
  src='https://www.scaleway.com/en/docs/favicon/favicon.svg'
  title="Lorem Ipsum"
  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad."
  url="/#" />

Render:

Full example

Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
See more

ProductHeader

Props:

  • productName (mandatory!)
  • description
  • productLogo
  • url (for link)
  • label (for link)

Code example:

<ProductHeader
  productName="Instances"
  productLogo="instances