Edgio
Edgio

Contributing to the Layer0 Documentation

Layer0 is all about putting power in the hands of developers and our documentation is no different. The source code for the Layer0 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 Layer0 docs on your machine, first clone the repository locally,

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

Then install the dependencies:

Terminal
cd layer0-docs
yarn install

Next, start the Next.js dev server locally,

Terminal
yarn dev

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

Architecture

Layer0 docs is a simple Next.js application running on Layer0 (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 SidebarMenuItems 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 SidebarMenuItems.

We recommend the following process for submitting a change:

  1. Fork the Layer0 Docs repository on GitHub via the web interface.
  2. Clone the repo and make sure you can run the docs locally.
  3. Make your amazing edit — even a typo fix is an amazing edit!
  4. Commit and push your change back to your fork on GitHub.
  5. Submit a pull request back to the Layer0 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
// use this in a markdown file... with type: 'info' | 'warning' | 'danger';

<Callout type="info">
    This is an info...
</Callout>

<Callout type="warning">
    This is an info...
</Callout>

<Callout type="danger">
    This is an info...
</Callout>

The code-snippet aboves renders:

ℹ️
This is an info...
⚠️
This is a warning...
⛔️
This is dangerous...

Codeblock

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

TypeScript
// This codeblock has the 'js' language module (with JS comment)
console.log(new Date())
HTML
<!-- This codeblock has the 'html' language module (with HTML comment) -->
<button type="button" class="btn btn-primary">Primary</button>
Terminal
# This codeblock has the 'bash' language module (with Bash comment)
echo "Hello World"
// This codeblock has no language module, hence "unknown"
upload.build.layer0.co
app.layer0.co

Video

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

Button Link

TypeScript
/*
interface IButtonLinkProps {
 variant: 'fill' | 'stroke';
 type: 'default' | 'code' | 'deploy';
 children: React.ReactNode;
 href: string | UrlObject;
 withIcon: boolean;
}
*/


<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="...">
  Deploy to Layer0
</ButtonLink>

Renders:


Button Links Group

TypeScript
<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="...">
   Deploy to Layer0
 </ButtonLink>
</ButtonLinksGroup>

Renders: