Skip to content
Snippets Groups Projects
creating-docs.mdx 1.99 KiB
Newer Older
  • Learn to ignore specific revisions
  • ---
    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 />);
    ```