Creating docs

By creating a MDX file inside your docs folder it will be created as a page, with the path defined by the filename. Inside all docs files, you can define the following options:

Example:

---
title: 'My Example'
description: 'A simple description for this page'
image: /banner.jpeg
---

Wow, this is a nice page

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

https://youtu.be/QfcozcbDhNM

Code Highlight

Title

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

.gatsby::before {
  content: 'niceee...';
}

Line numbers

If you want to show line number, just add a option lineNumbers=true.

const rocket = {
  launch: () => console.log('Launching...'),
};

rocket.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 />);