Full Code of Rocketseat/gatsby-starter-rocket-docs for AI

Repository: Rocketseat/gatsby-starter-rocket-docs
Branch: main
Commit: 1293a3949bf4
Files: 16
Total size: 26.2 KB

Directory structure:
gitextract_elrxmgfr/

├── .gitignore
├── LICENSE
├── README.md
├── gatsby-config.js
├── package.json
└── src/
    ├── config/
    │   └── sidebar.yml
    ├── docs/
    │   ├── faq.mdx
    │   ├── getting-started.mdx
    │   └── usage/
    │       ├── creating-docs.mdx
    │       ├── customizing.mdx
    │       ├── navigation.mdx
    │       ├── remark-plugins.md
    │       └── using-yaml-files.md
    ├── home/
    │   └── index.mdx
    ├── pages/
    │   └── 404.js
    └── yamlFiles/
        └── letters.yml

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# dotenv environment variable files
.env*

# gatsby files
.cache/
public

# Mac files
.DS_Store

# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2021 João Pedro

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
<p align="center">
  <img src="https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/theme-docs.svg" alt="A illustration of file that is the @rocketseat/gatsby-theme-docs logo" width="100">
</p>

<h2 align="center">
  Gatsby Starter: Rocket Docs
</h2>

<p align="center">
  Out of the box Gatsby Starter for creating documentation websites easily and quickly. With support for MDX, code highlight, Analytics, SEO and more 🔥 Using the theme: <a href="https://github.com/jpedroschmitz/rocketdocs/tree/main/%40rocketseat/gatsby-theme-docs">@rocketseat/gatsby-theme-docs</a>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/PRs-welcome-%238257E6.svg" alt="PRs welcome!" />

  <img alt="License" src="https://img.shields.io/badge/license-MIT-%238257E6">

  <a href="https://twitter.com/intent/follow?screen_name=jpedroschmitz">
    <img src="https://img.shields.io/twitter/follow/jpedroschmitz.svg?label=Follow%20@jpedroschmitz" alt="Follow @jpedroschmitz" />
  </a>
</p>

## 🚀 Features

- 📝 MDX for docs;
- 🛣 Yaml-based sidebar navigation;
- 📱 Responsive and mobile friendly;
- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;
- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).
- 📈 Google Analytics support;
- 📄 Custom docs schema;
- 🖱 Table of Contents;
- ⚡️ Offline Support & WebApp Manifest;
- and much more 🔥

## ⚡️ Getting started

1. Create the website.

   ```sh
   npx gatsby new rocketdocs https://github.com/jpedroschmitz/gatsby-starter-rocketdocs
   ```

2. Start developing.

   ```sh
   cd rocketdocs
   gatsby develop
   ```

3. Are you ready for launch?

   Your site is now running at `http://localhost:8000`

## 📄 Docs

Looking for docs? Check our live demo and documentation [website](https://rocketdocs.netlify.app).

---

Made with 💜 by João Pedro


================================================
FILE: gatsby-config.js
================================================
module.exports = {
  siteMetadata: {
    siteTitle: `Rocket Docs`,
    defaultTitle: `Rocket Docs`,
    siteTitleShort: `Rocket Docs`,
    siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,
    siteUrl: `https://rocketdocs.netlify.app`,
    siteAuthor: `@jpedroschmitz`,
    siteImage: `/banner.png`,
    siteLanguage: `en`,
    themeColor: `#8257E6`,
    basePath: `/`,
  },
  plugins: [
    {
      resolve: `@rocketseat/gatsby-theme-docs`,
      options: {
        configPath: `src/config`,
        docsPath: `src/docs`,
        homePath: `src/home`,
        yamlFilesPath: `src/yamlFiles`,
        repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,
        baseDir: `examples/gatsby-theme-docs`,
        gatsbyRemarkPlugins: [],
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Rocket Docs`,
        short_name: `Rocket Docs`,
        start_url: `/`,
        background_color: `#ffffff`,
        display: `standalone`,
        icon: `static/favicon.png`,
      },
    },
    `gatsby-plugin-sitemap`,
    // {
    //   resolve: `gatsby-plugin-google-analytics`,
    //   options: {
    //     trackingId: `YOUR_ANALYTICS_ID`,
    //   },
    // },
    `gatsby-plugin-remove-trailing-slashes`,
    {
      resolve: `gatsby-plugin-canonical-urls`,
      options: {
        siteUrl: `https://rocketdocs.netlify.app`,
      },
    },
    `gatsby-plugin-offline`,
  ],
};


================================================
FILE: package.json
================================================
{
  "name": "gatsby-starter-rocketdocs",
  "private": true,
  "version": "1.0.0",
  "description": "Out of the box Gatsby Starter for creating documentation websites easily and quickly. With support for MDX, code highlight, Analytics, SEO and more",
  "author": "João Pedro Schmitz <hey@joaopedro.dev> (@jpedroschmitz)",
  "license": "MIT",
  "starter-name": "gatsby-starter-rocketdocs",
  "dependencies": {
    "@rocketseat/gatsby-theme-docs": "^4.0.0",
    "gatsby": "^5.9.0",
    "gatsby-plugin-canonical-urls": "^5.9.0",
    "gatsby-plugin-google-analytics": "^5.9.0",
    "gatsby-plugin-manifest": "^5.9.0",
    "gatsby-plugin-offline": "^6.9.0",
    "gatsby-plugin-remove-trailing-slashes": "^4.2.0",
    "gatsby-plugin-sitemap": "^6.9.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {},
  "keywords": [
    "gatsby",
    "gatsby-starter"
  ],
  "scripts": {
    "build": "gatsby build",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  }
}


================================================
FILE: src/config/sidebar.yml
================================================
# Sidebar navigation

- label: 'Introduction'
  link: '/'
- label: 'Getting started'
  link: '/getting-started'
- label: Usage
  items:
    - label: 'Creating docs'
      link: '/usage/creating-docs'
    - label: 'Navigation'
      link: '/usage/navigation'
    - label: 'Customizing'
      link: '/usage/customizing'
    - label: 'Using YAML files'
      link: '/usage/using-yaml-files'
    - label: 'Remark Plugins'
      link: '/usage/remark-plugins'
- label: More
  items:
    - label: FAQ
      link: /faq
    - label: 'Github'
      link: https://github.com/jpedroschmitz/rocketdocs


================================================
FILE: src/docs/faq.mdx
================================================
---
title: Frequently Asked Questions
description: Frequently asked questions about the theme.
disableTableOfContents: true
---

## Will be included search or dark mode?

This theme is a great and complete option to build simple documentation websites.
We don't plan anymore to include search, dark mode or i18n to the project.

Remember that if necessary, you can change colors and include a default
dark theme. To do so, check this [doc](/usage/shadowing#changing-theme-colors).

## How can I deploy my website?

To deploy this project, we recommend you take a look at this extensive documentation
hosted on [Gatsby website](https://www.gatsbyjs.com/docs/deploying-and-hosting/). It
includes deploy tutorials for many services, like [Vercel](https://vercel.com/),
[Netlify](https://www.netlify.com/), [GitHub Pages](https://pages.github.com/) and others.

## What are good examples of the theme usage?

- [Botmation](https://botmation.dev)
- [Capmonster.cloud for Python](https://capmonster-python.alperenn.com/)
- [ESPHome Devices](https://devices.esphome.io/)
- [Label U](https://opendatalab.github.io/labelU-Kit/)
- [React Observing](https://react-observing.web.app/)
- [RudderStack Docs](https://rudderstack.com/docs/)
- [Unform](https://unform.dev)
- [Use Pandas](https://www.usepandas.com/)
- [golangci-lint](https://golangci-lint.run/)
- [use-cloudinary](https://use-cloudinary.netlify.app/)

ps: are you using this project? Submit a PR to add it to the [list](https://github.com/jpedroschmitz/rocketdocs/blob/main/examples/gatsby-theme-docs/src/docs/faq.mdx#what-are-good-examples-of-the-theme-usage).


================================================
FILE: src/docs/getting-started.mdx
================================================
---
title: 'Getting started'
description: Learn how to get started with Rocket Docs.
---

> Rocket Docs is ready for Gatsby v5. New projects will use the new version!

The best way to start is by using our starter:

```bash
npx gatsby new rocketdocs https://github.com/jpedroschmitz/gatsby-starter-rocketdocs
```

But, if you prefer, you can install and configure manually.

#### Using Yarn:

```bash
yarn add @rocketseat/gatsby-theme-docs
```

#### Using NPM:

```bash
npm i @rocketseat/gatsby-theme-docs
```

## Theme Options

| Key           | Default | Required | Description                                                                                                                                                            |
| ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| basePath      | /       | No       | Root url for all docs                                                                                                                                                  |
| configPath    | config  | No       | Location of config files                                                                                                                                               |
| docsPath      | docs    | No       | The site description for SEO and social (FB, Twitter) tags                                                                                                             |
| homePath      | -       | No       | Location of home file                                                                                                                                                  |
| githubUrl     | -       | -        | Deprecated in favor of `repositoryUrl`                                                                                                                                 |
| repositoryUrl | -       | No       | The complete URL of your repository (supports GitHub, GitLab and Bitbucket). Example: `https://github/jpedroschmitz/rocketdocs`                                        |
| baseDir       | -       | No       | If your Gatsby site does not live in the root of your project directory/git repo, pass the subdirectory name here (ex: `docs`)                                         |
| withMdx       | true    | No       | If necessary, you can add your own MDX options to the theme. To do so, make sure you turn this option to false and include `gatsby-plugin-mdx` on your `gatsby-config` |
| branch        | main    | No       | Default branch of the repository                                                                                                                                       |

<br />

> Note: When adding a BitBucket link on the `repositoryUrl` option, don't add the `src/<branch>` to it.
> Example of correct link: <br /> `https://bitbucket.org/jpedroschmitz/rocketdocs`

## Example usage

```js title=gatsby-config.js
module.exports = {
  siteMetadata: {
    siteTitle: `@rocketseat/gatsby-theme-docs`,
    defaultTitle: `@rocketseat/gatsby-theme-docs`,
    siteTitleShort: `gatsby-theme-docs`,
    siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,
    siteUrl: `https://rocketdocs.netlify.app`,
    siteAuthor: `@jpedroschmitz`,
    siteImage: `/banner.png`,
    siteLanguage: `en`,
    themeColor: `#8257E6`,
    basePath: `/`,
  },
  plugins: [
    {
      resolve: `@rocketseat/gatsby-theme-docs`,
      options: {
        basePath: `/`,
        configPath: `src/config`,
        docsPath: `src/docs`,
        homePath: `src/home`,
        repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,
        baseDir: `examples/gatsby-theme-docs`,
      },
    },
  ],
};
```

Once you have installed the dependencies you will need to create the [navigation](/usage/navigation) and [documentation](/usage/creating-docs) files.


================================================
FILE: src/docs/usage/creating-docs.mdx
================================================
---
title: Creating docs
description: Learn how to create docs using Rocket 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:

| Key                    | Required | Description                |
| ---------------------- | -------- | -------------------------- |
| title                  | Yes      | No                         |
| description            | No       | Page description           |
| image                  | No       | Used for og:image          |
| disableTableOfContents | No       | Disables Table Of Contents |

## Example

```mdx
---
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](https://www.gatsbyjs.com/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

We support many options for code components.

### Title

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

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

### Line numbers

To add line numbers for that code block, pass an 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 lineNumbers=true title=gatsby-config.js live=true
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](/usage/shadowing#adding-elements-to-react-live-scope).

### 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:

```jsx highlight={1-4,6-7,9}
function MyComponent() {
  function handleButtonClick() {
    alert('wowww');
  }

  return <button onClick={handleButtonClick}>Hey, click me!</button>;
}

render(<MyComponent />);
```


================================================
FILE: src/docs/usage/customizing.mdx
================================================
---
title: Customizing
description: Rocket Docs allows to customize the look by using Gatsby theme shadowing feature.
---

To shadow/override this theme, you will need to place your files into `src/@rocketseat/gatsby-theme-docs` folder.

If you don't know what shadowing is, or have questions about it, [check this tutorial](https://www.gatsbyjs.com/docs/themes/shadowing/) from the Gatsby documentation.

## Changing the logo

If you want to change the logo just create the following file:

```js title=src/@rocketseat/gatsby-theme-docs/components/Logo.js
import React from 'react';

export default function Logo(props) {
  return (
    <svg width={180} height={34} viewBox="0 0 180 34" fill="none" {...props}>
      <path
        d="M37.504 9.983c-1.515 0-2.763 1.204-2.763 2.723v11.521h2.763v-11.52h6.589V9.982h-6.589zM60.566 17.079V12.68c0-1.492-1.222-2.723-2.763-2.723h-8.927c-1.515 0-2.764 1.204-2.764 2.723v8.798c0 1.492 1.223 2.723 2.764 2.723h8.927c1.515 0 2.763-1.205 2.763-2.723v-4.4zm-2.763 0v4.399h-8.927V12.68h8.927v4.399zM66.093 9.983c-1.515 0-2.764 1.204-2.764 2.723v8.798c0 1.492 1.223 2.723 2.764 2.723l9.724-.13v-2.593h-9.724v-8.798h9.724v-2.592l-9.724-.131zM91.655 9.983H87.91l-5.474 5.734h-1.089V9.983h-2.763v14.218h2.763v-5.76H82.94l5.686 5.76h3.8l-7.307-7.436 6.536-6.782zM95.77 21.478V18.44l11.692-.13v-5.63c0-1.492-1.223-2.723-2.764-2.723h-8.927c-1.515 0-2.763 1.204-2.763 2.723v8.798c0 1.492 1.222 2.723 2.763 2.723l11.691-.131v-2.592H95.771zm0-8.798h8.928v3.037h-8.927V12.68zM114.396 5.82h-1.063l-1.7 2.069v2.068h-2.099v2.723l2.099-.026v8.824c0 1.493 1.222 2.723 2.763 2.723l4.464-.13v-2.593h-4.464v-8.85l4.862-.079V9.957h-4.862V5.82zM133.819 18.44c0-1.492-1.223-2.723-2.764-2.723h-6.961V12.68h9.725v-2.592l-9.725-.131c-1.514 0-2.763 1.204-2.763 2.723v3.037c0 1.493 1.222 2.723 2.763 2.723h6.961v3.038h-9.724v2.592l9.724.13c1.515 0 2.764-1.204 2.764-2.722V18.44zM148.246 9.983h-8.928c-1.514 0-2.763 1.204-2.763 2.723v8.798c0 1.492 1.222 2.723 2.763 2.723l11.691-.13v-2.593h-11.691v-3.037l11.691-.131v-5.63c0-1.518-1.222-2.723-2.763-2.723zm0 5.734h-8.928V12.68h8.928v3.037zM165.463 9.983l-11.691.13v2.593h11.691v3.037l-11.691.131v5.63c0 1.492 1.222 2.723 2.763 2.723h8.928c1.514 0 2.763-1.204 2.763-2.723v-8.798a2.759 2.759 0 00-2.763-2.723zm0 11.495h-8.928V18.44h8.928v3.038zM175.138 12.628l4.862-.079V9.957h-4.862V5.794h-1.063l-1.7 2.068v2.069h-2.099v2.723l2.099-.026v8.824c0 1.492 1.222 2.723 2.763 2.723l4.463-.131v-2.592h-4.463v-8.824z"
        fill="#121214"
      />
      <path
        d="M27.434.662l-4.49-.655a.389.389 0 00-.319.079l-1.913 2.46a.593.593 0 00-.106.55c.053.184-.106.341-.292.315l-1.568-.34a.657.657 0 00-.664.235l-6.217 7.855c-.107.157-.32.21-.505.131l-2.365-1.047a.62.62 0 00-.637.052l-1.196.812a.669.669 0 01-.664.052l-.585-.288a.666.666 0 00-.93.42l-.425 1.858c-.106.445.08.89.478 1.126l.904.55 2.896 1.754 1.408.864c.399.236.903.184 1.249-.104l2.364-2.043c.186-.157.479-.21.691-.078l.718.366a.61.61 0 00.717-.104l1.196-1.1a.618.618 0 01.69-.105l1.78.812c.266.13.585.052.771-.183l.824-1.048 6.244-7.881a.636.636 0 00-.372-1.021l-1.382-.314c-.292-.053-.425-.42-.213-.629l2.153-2.644c.212-.315.08-.655-.24-.707zM6.843 16.529c-.133-.078-.266.052-.213.183l.664 1.728c.054.131.054.262.027.393l-.585 2.252c-.026.157.027.314.133.393l1.674 1.283c.16.105.372.105.505-.026l1.754-1.52c.106-.078.239-.13.345-.156l1.993-.21c.133-.026.186-.21.053-.288l-6.35-4.032zM6.258 22.342a.43.43 0 00-.398-.052l-1.408.68c-.08.026-.133.105-.186.184l-3.003 7.305v.052c.027.026.053.053.107.053l.69-.262h.08c.027.026.053.078.027.105L.014 33.889c-.053.078.054.157.107.078l7.785-7.698a.496.496 0 00.133-.261l.159-1.99a.43.43 0 00-.133-.315l-1.807-1.361z"
        fill="#8257E6"
      />
    </svg>
  );
}
```

If your logo is a png, you could use it like this:

```js title=src/@rocketseat/gatsby-theme-docs/components/Logo.js
import React from 'react';

// Path to the logo file on your project
import rocketseatLogo from 'assets/logo.png';

const Logo = () => (
  <img src={rocketseatLogo} alt="Rocketseat logo" style={{ width: 180 }} />
);

export default Logo;
```

## Changing the home text

Create a file at `src/docs/index.mdx` with the text. Next, add the `homePath: 'src/home'` setting in the plugin options. Example:

```mdx title=src/docs/index.mdx
# Introduction

My awesome project!

import Navigation from '@rocketseat/gatsby-theme-docs/src/components/Docs/PostNav';

<Navigation
  prev={null}
  next={{
    label: 'Installation',
    link: '/installation',
  }}
/>
```

## Changing theme colors

We use Emotion for theming. To change the theme colors, create a file under `src/@rocketseat/gatsby-theme-docs/styles/theme.js`.

Remember that you need to restart your server to see the update.

```js title=src/@rocketseat/gatsby-theme-docs/styles/theme.js
export default {
  colors: {
    primary: '#8257E6',
    background: '#FFFFFF',
    shape: `#F2F2FA`,
    title: `#3D3D4D`,
    text: `#6C6C80`,
    components: {
      blockquote: {
        background: `#332616`,
        text: `#E1E1E6`,
      },
    },
  },
};
```

## Changing the font family

You can also change the default font family of the theme.

To do this, create a file under `src/@rocketseat/gatsby-theme-docs/styles/theme.js` (or add to the existing default object if you already started customizing the theme).

```js title=src/@rocketseat/gatsby-theme-docs/styles/theme.js
export default {
  fonts: {
    fontFace: {
      family: 'Roboto',
      file: '/fonts/roboto-regular-webfont',
    },
    body: 'Roboto',
  },
};
```

The `fontFace` property will define the name of the font family for later use, while the `file` property will provide the path and file name of the font files.

Font files should be placed in the [`static`](https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/) folder in the root of the project (or a subfolder therein, eg. `fonts`), and their path specified accordingly.

```
.
└── static
    └── fonts
        ├── roboto-regular-webfont.eot
        ├── roboto-regular-webfont.svg
        ├── roboto-regular-webfont.ttf
        ├── roboto-regular-webfont.woff
        └── roboto-regular-webfont.woff2
```

## Adding elements to React Live scope

By default we add some elements to React Live Scope. If you need to add more, just
shadow the following file:

```js title=src/@rocketseat/gatsby-theme-docs/components/Code/LiveCodeScope.js
import { mdx } from '@mdx-js/react';
import { css, jsx } from '@emotion/react';

export default {
  css,
  jsx,
  mdx,
};
```

If you want to know more about Scope, [check this explanation](https://github.com/FormidableLabs/react-live#how-does-the-scope-work).


================================================
FILE: src/docs/usage/navigation.mdx
================================================
---
title: Navigation
description: How to use the sidebar.yml file from Rocket Docs.
---

To add items on the sidebar, it's necessary you create a `sidebar.yml` file under the config folder. Example:

```yaml title=sidebar.yml
# Just a simple item
- label: 'Home'
  link: '/'
# With a list of items
- label: 'With subitems'
  items:
    - label: 'My Example'
      link: '/my-example'
```

If necessary, you can also add external links:

```yaml
- label: 'GitHub'
  link: 'https://github.com/jpedroschmitz'
```


================================================
FILE: src/docs/usage/remark-plugins.md
================================================
---
title: Remark plugins
description: Learn how to use Remark plugins in Rocket Docs.
---

To use a Remark plugin, you need to set the plugin name on this theme's `gatsbyRemarkPlugins` option.

## Example usage

Given that we want to use [Graphviz](https://graphviz.org/) in our Markdown files, we need to install the Remark plugin and add it on to `gatsbyRemarkPlugins` option on `gatsby.config.js`.

```sh
# Using Yarn:
yarn add gatsby-remark-graphviz
# Using NPM:
npm i gatsby-remark-graphviz
```

```js title=gatsby-config.js
module.exports = {
  siteMetadata: {
    // ...
  },
  plugins: [
    {
      resolve: `@rocketseat/gatsby-theme-docs`,
      options: {
        // ...
        gatsbyRemarkPlugins: [
          {
            `gatsby-remark-graphviz`,
          }
        ]
      },
    }
  ]
}
```

## Using a custom Remark Transformer plugin

If you use a local plugin, you must point to its location in the project through `require.resolve`.

```js title=gatsby-config.js
module.exports = {
  siteMetadata: {
    // ...
  },
  plugins: [
    {
      resolve: `@rocketseat/gatsby-theme-docs`,
      options: {
        // ...
        gatsbyRemarkPlugins: [
          {
            `gatsby-remark-graphviz`,
            resolve: require.resolve(`./plugins/gatsby-remark-purple-headers`)
          }
        ]
      },
    }
  ]
}
```

For more information on how to create a Remark Transformer plugin, please refer to the [Creating a Remark Transformer Plugin](https://www.gatsbyjs.com/tutorial/remark-plugin-tutorial/) document.


================================================
FILE: src/docs/usage/using-yaml-files.md
================================================
---
title: Using YAML files
description: Learn how to YAML files in Rocket Docs.
---

To use YAML files, create a new YAML file in a `yamlFiles` folder and it will be exposed as `all{FileName}Yaml` GraphQL node.

To store YAML in another folder, please change `yamlFilesPath` option of `@rocketseat/gatsby-theme-docs` plugin which is configured in `gatsby.config.js`.

## Example file

If our project has `letters.yml` or `letters.yaml` under a `yamlFiles` folder which looks like:

```yml
- character: a
- character: b
- character: c
```

Then the following three nodes would be created:

```json
[
  {
    "character": "a"
  },
  {
    "character": "b"
  },
  {
    "character": "c"
  }
]
```

## Query GraphQL node

We can query the GraphQL nodes which is created from the YAML file as the following code:

```graphql
{
  allLettersYaml {
    edges {
      node {
        character
      }
    }
  }
}
```

Which would return:

```json
{
  "allLettersYaml": {
    "edges": [
      {
        "node": {
          "character": "a"
        }
      },
      {
        "node": {
          "character": "b"
        }
      },
      {
        "node": {
          "character": "c"
        }
      }
    ]
  }
}
```

More information, please refer to [gatsby-transformer-yaml plugin page](https://www.gatsbyjs.com/plugins/gatsby-transformer-yaml/).


================================================
FILE: src/home/index.mdx
================================================
# Introduction

Rocket Docs is a complete and awesome Gatsby Theme for documentation websites. We've
developed it to be easy to use and customize. Forget about other
things and focus on what matters: **writing docs.**

## Features

- ⚛️ Ready for Gatsby v5;
- 📝 MDX for docs;
- 🛣 Yaml-based sidebar navigation;
- 📱 Responsive and mobile friendly;
- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;
- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).
- 📈 Google Analytics support;
- 📄 Custom docs schema;
- 🖱 Table of Contents;
- ⚡️ Offline Support & WebApp Manifest;
- and much more 🔥

<br />

[Get started now!](/getting-started)


================================================
FILE: src/pages/404.js
================================================
import React from 'react';
import { Link } from 'gatsby';

import Layout from '@rocketseat/gatsby-theme-docs/src/components/Layout';
import Seo from '@rocketseat/gatsby-theme-docs/src/components/SEO';

export default function NotFound() {
  return (
    <Layout title="Page not found!">
      <Seo title="404: Not found" />
      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
      <p>
        If you&#39;d like to go back to homepage, <Link to="/">click here</Link>
        .
      </p>
    </Layout>
  );
}


================================================
FILE: src/yamlFiles/letters.yml
================================================
- character: a
- character: b
- character: c