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 Object Storage 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:

  • Load Balancers

    Removed

    Static attachment is no longer available

    The feature to statically attach a Private Network to a Load Balancer (deprecated in September 2023) will be removed from the API in January 2025. To achieve similar functionality, use the ipam_ids parameter with the Private Network attachment endpoint.

  • Messaging and Queuing

    Changed

    Messaging and Queuing split into three products!

    We have redefined our Messaging and Queuing offering into three distinct products:

    • NATS (NATS)
    • Queues (formerly SQS)
    • Topics & Events (formerly SNS)

    Learn more about each product in our documentation.

  • Containers

    Fixed

    Access fixed for logs and metrics

    In some cases, opening dashboards for logs and metrics of Serverless Containers did not work due to a redirection issue. This has now been fixed.

  • Functions

    Fixed

    Access fixed for logs and metrics

    In some cases, opening dashboards for logs and metrics of Serverless Functions did not work due to a redirection issue. This has now been fixed.

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

    Removed

    Static attachment is no longer available

    The feature to statically attach a Private Network to a Load Balancer (deprecated in September 2023) will be removed from the API in January 2025. To achieve similar functionality, use the ipam_ids parameter with the Private Network attachment endpoint.

  • 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.

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:

  • productIcon (mandatory!) - Icon name from Ultraviolet lib
  • title (mandatory!)
  • description
  • url (for link, mandatory!)

Code example:

<ProductCard 
  productIcon="AccountExperienceProductIcon"
  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"
  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

accountExperience
apiGateway
appleSilicon
blockStorage
cli
cockpit
containerRegistry
containers
costManager
dedibox
dediboxVps
distributedDataLab
domainsAndDns
edgeServices
elasticMetal
environmentalFootprintCalculator
functions
generativeApi
iam
inference
instance
interlink
iotHub
ipam
ipfsNaming
ipfsPinning
jero
k8sKapsule
k8sKosmos
kms
loadBalancers
managedDatabase
managedSearchDatabase
mongoDB
nabu
nats
objectStorage
publicGateway
quantum
quantumApplication
redis
savingsPlan
secretManager
serverlessDB
serverlessJob
sns
sqs
terraform
transactionalEmail
vpc
webHosting
webPlatform
accountBilling
generic
learning
writeCommunity
Was this page helpful?
API DocsScaleway consoleDedibox consoleScaleway LearningScaleway.comPricingBlogCareers
© 2023-2024 – Scaleway