Rocket Docs

Creating docs

Creating docs

All MDX files created inside your docs folder will become pages, with the path defined by the filename. Inside all docs files, you can define the following options:

KeyRequiredDescription
titleYesNo
descriptionNoPage description
imageNoUsed for og:image
disableTableOfContentsNoDisables Table Of Contents

Example

---
title: 'My Example'
description: 'A simple description for this page'
image: /banner.jpeg
disableTableOfContents: false
---
Wow, this is a nice page

Embedding files

In a documentation website, sometimes you will need to embed well known services (like CodeSandbox, Twitter, or others...). If you need to do it, you can simply copy-paste the link (powered by the awesome gatsby-remark-embeder). Make sure to check the supported services.

Code Highlight

We support many options for code components.

Title

To show a title, just add it to your code block. Ex: title=src/myfile.css

src/myfile.css
.gatsby::before {
content: 'niceee...';
}

Line numbers

To add line numbers for that code block, pass an option lineNumbers=true.

1const rocket = {
2 launch: () => console.log('Launching...'),
3};
4
5rocket.launch();

React live

As mentioned in the introduction, this theme uses react-live, so you can create a playground for live editing React components.

To use it, just add a live=true option to your code block.

function MyComponent() {
function handleButtonClick() {
alert('wowww');
}
return <button onClick={handleButtonClick}>Hey, click me!</button>;
}
render(<MyComponent />);

If you need to add elements to the scope, check this guide.

Highlight lines

To highlight lines, you can pass ranges to a highlight option. For example highlight={1-4,6-7,9} on the code below would result in:

function MyComponent() {
function handleButtonClick() {
alert('wowww');
}
return <button onClick={handleButtonClick}>Hey, click me!</button>;
}
render(<MyComponent />);
Edit this page on GitHub