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:

  • Dedibox

    Added

    Ubuntu 24.04 LTS (Noble Numbat) now available on Dedibox servers!

    You can now install the newly launched Ubuntu 24.04 LTS on your Dedibox server 🚀

  • Elastic Metal

    Added

    Ubuntu 24.04 LTS (Noble Numbat) now available on Elastic Metal servers!

    The latest Ubuntu 24.04 LTS is now available upon installation of your Elastic Metal server ✨

  • Object Storage

    Added

    Versioning activation at bucket creation

    It is now possible to activate bucket versioning for better resiliency directly when creating a bucket from the Scaleway console. As a reminder, versioning can be activated after creation or suspended at any time from the bucket settings in the console or via the CLI.

  • Apple silicon

    Changed

    macOS14 Sonoma is now available!

    macOS 14 Sonoma is now installed by default on Scaleway Mac mini M2 (M2-M) and Mac mini M2 pro (M2-L).

    The Mac mini M1 (M1-M) range will stay on macOS 13 by default for now. If you want to enjoy a smooth macOS 14 migration you can opt-in to our latest macOS configuration improvements by reinstalling your server through the console, then performing a manual upgrade using softwareupdate.

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

    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.

  • Load Balancers

    Added

    Load Balancer logs are now available in Cockpit

    Load Balancer now generates logs when the state of backend servers changes, or when your frontend TLS certificates expire. These logs are sent to your Scaleway Cockpit and you can browse them via the dedicated LB Logs Overview dashboard. They provide information not only on the changes in state of backend servers, but also the reasons for these changes. With these logs, you will be equipped to properly troubleshoot backend server issues.

    Read more about Load Balancer logs 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.

ProductHeader

Props:

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

Code example:

<ProductHeader
  productName="Instances"
  productLogo="instances"
  description="Lorem ipsum..."
  url="/instances/quickstart"
  label="Instances quickstart"
/>

Render:

ProductHeader

ProductName quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Instances quickstart

ProductHeader

ProductName quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Instances quickstart

SummaryCard

There is 4 SummaryCard using props mentionned below.

The icon names are not random ones they come from Ultraviolet lib.

Code example:

<SummaryCard
  title="Quickstart"
  icon="rocket"
  description="lorem ipsum dolor sit amet, consectetur adipiscing elit in in part of the description"
  label="Read More"
  url="/hello/foo/"
/>

Render:

Quickstart

Learn how to create, manage and delete a Kubernetes cluster in a few steps.

Read More

Concepts

Core concepts that give you a better understanding of Kubernetes Kapsule and Kosmos.

Read More

How-tos

Check our guides to creating and managing Kubernetes clusters and their features.

Read More

Reference content

Guides to help you configuring your cluster and its advanced configuration.

Read More

Ultraviolet illustrations

Here is a list of current Ultraviolet illustrations available

apiGateway
appleSilicon
blockStorage
cli
cockpit
containerRegistry
containers
dedibox
documentDB
domainsAndDns
elasticMetal
functions
iam
inference
instance
iotHub
ipfsNaming
ipfsPinning
jero
k8sKapsule
k8sKosmos
loadBalancers
managedDatabase
nabu
nats
objectStorage
publicGateway
redis
secretManager
serverlessDB
serverlessJob
sns
sqs
terraform
transactionalEmail
vpc
webHosting
webPlatform
Docs APIScaleway consoleDedibox consoleScaleway LearningScaleway.comPricingBlogCarreer
© 2023-2024 – Scaleway