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,
Bash
1git clone git@github.com:layer0-docs/layer0-docs.git
Then install the dependencies:
Bash
1cd layer0-docs2yarn install
Next, start the Next.js dev server locally,
Bash
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';23<Callout type="info">45 A note providing additional information.67</Callout>89<Callout type="tip">1011 A tip providing additional information.1213</Callout>1415<Callout type="important">1617 A note providing important information.1819</Callout>2021<Callout type="warning">2223 A warning provides cautionary information about a potential pitfall.2425</Callout>2627<Callout type="danger">2829 Identifies a dangerous configuration or action.3031</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<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.co3app.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*/101112<ButtonLink variant="fill" type="default" href="...">13 Try the Next.js SSR Example Site14</ButtonLink>15<ButtonLink variant="stroke" type="code" withIcon={true} href="...">16 View the Code17</ButtonLink>18<ButtonLink variant="stroke" type="deploy" withIcon={true} href="..." />
Renders:
Button Links Group
TypeScript
1<ButtonLinksGroup>2 <ButtonLink variant="fill" type="default" href="...">3 Try the Next.js SSR Example Site4 </ButtonLink>5 <ButtonLink variant="stroke" type="code" withIcon={true} href="...">6 View the Code7 </ButtonLink>8 <ButtonLink variant="stroke" type="deploy" withIcon={true} href="..." />9</ButtonLinksGroup>
Renders: