Contributing to the Edgio Documentation

Edgio is all about putting power in the hands of developers and our documentation is no different. The source code for the Edgio developer docs (i.e. this site you’re reading now) is in an open repository on GitHub and we welcome feedback and pull requests. If you’ve found a typo or a better way to explain something, please submit a pull request or file an issue! Others will likely stumble over the same problem and benefit from your insight.

Running Locally

To run the Edgio docs on your machine, first clone the repository locally,

1git clone git@github.com:layer0-docs/layer0-docs.git

Then install the dependencies:

Bash
1cd layer0-docs
2yarn install

Next, start the Next.js dev server locally,

1yarn dev

Finally, visit the site in your browser at http://127.0.0.1:3000.

Architecture

Edgio docs is a simple Next.js application running on Edgio (yes we dogfood). The content is stored as pages called “guides”. Each guide is a Markdown file located in the guides folder

How to Contribute

If you need to modify an existing guide, you can use the src/data/SidebarMenuItems.tsx file to locate the corresponding Markdown file to edit. If your contribution needs its own guide, you’ll need to create a new Markdown file in the guides folder and add a reference to it in src/data/SidebarMenuItems.tsx.

We recommend the following process for submitting a change:

Fork the Edgio Docs repository on GitHub via the web interface.
Clone the repo and make sure you can run the docs locally.
Make your amazing edit — even a typo fix is an amazing edit!
Commit and push your change back to your fork on GitHub.
Submit a pull request back to the Edgio Docs repository (to the main branch) via GitHub web interface.

For more details, the Pro Git book has a helpful contributing guide that walks you through the process of submitting a pull request to an open source repository on GitHub.

Custom Components

Use the custom components below to enhance the look and feel of your guides.

Callout

Call attention to specific part of the guide with callouts.

TypeScript
1// use this in a markdown file... with type: 'info' | 'tip' | 'important' | 'warning' | 'danger';
2
3<Callout type="info">
4
5  A note providing additional information.
6
7</Callout>
8
9<Callout type="tip">
10
11  A tip providing additional information.
12
13</Callout>
14
15<Callout type="important">
16
17  A note providing important information.
18
19</Callout>
20
21<Callout type="warning">
22
23  A warning provides cautionary information about a potential pitfall.
24
25</Callout>
26
27<Callout type="danger">
28
29  Identifies a dangerous configuration or action.
30
31</Callout>

The above code renders:

A note providing additional information.

A tip providing additional information.

A note providing important information.

A warning provides cautionary information about a potential pitfall.

Identifies a dangerous configuration or action.

Codeblock

Provide a language-module for syntax highlighting or none if you still need to use a codeblock.

TypeScript
1// This codeblock has the 'js' language module (with JS comment)
2console.log(new Date())

HTML
1<!-- This codeblock has the 'html' language module (with HTML comment) -->
2<button type="button" class="btn btn-primary">Primary</button>

Bash
1# This codeblock has the 'bash' language module (with Bash comment)
2echo "Hello World"

1// This codeblock has no language module, hence "unknown"
2upload.build.layer0.co
3app.layer0.co

Video

TypeScript
1<Video src="video src url"/>

Button Link

TypeScript
1/*
2interface IButtonLinkProps {
3 variant: 'fill' | 'stroke';
4 type: 'default' | 'code' | 'deploy';
5 children: React.ReactNode;
6 href: string | UrlObject;
7 withIcon: boolean;
8}
9*/
10
11
12<ButtonLink variant="fill" type="default" href="...">
13 Try the Next.js SSR Example Site
14</ButtonLink>
15<ButtonLink variant="stroke" type="code" withIcon={true} href="...">
16 View the Code
17</ButtonLink>
18<ButtonLink variant="stroke" type="deploy" withIcon={true} href="..." />

Renders:

Try the Next.js SSR Example Site

View the Code

Button Links Group

TypeScript
1<ButtonLinksGroup>
<ButtonLink variant="fill" type="default" href="...">
Try the Next.js SSR Example Site
</ButtonLink>
<ButtonLink variant="stroke" type="code" withIcon={true} href="...">
View the Code
</ButtonLink>
<ButtonLink variant="stroke" type="deploy" withIcon={true} href="..." />
9</ButtonLinksGroup>

Renders:

Try the Next.js SSR Example Site

View the Code