-
Whitney Armstrong authored
Static version of detectors.md. Will fix later.
Whitney Armstrong authoredStatic version of detectors.md. Will fix later.
creating-docs.mdx 1.99 KiB
---
title: 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:
<div style="overflow-x:auto;">
<table>
<tr>
<th>Key</th>
<th>Required?</th>
<th>Description</th>
</tr>
<tr>
<td>title</td>
<td>Yes</td>
<td>Page title</td>
</tr>
<tr>
<td>description</td>
<td>No</td>
<td>Page description</td>
</tr>
<tr>
<td>image</td>
<td>No</td>
<td>Used for og:image</td>
</tr>
</table>
</div>
### Example:
```mdx
---
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](https://www.gatsbyjs.org/packages/gatsby-remark-embedder/)).
Make sure to check the [supported services](https://github.com/MichaelDeBoey/gatsby-remark-embedder#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`
```css title=src/myfile.css
.gatsby::before {
content: 'niceee...';
}
```
### Line numbers
If you want to show line number, just add a option `lineNumbers=true`.
```js 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.
```jsx live=true
function MyComponent() {
function handleButtonClick() {
alert('wowww');
}
return <button onClick={handleButtonClick}>Hey, click me!</button>;
}
render(<MyComponent />);
```