[
  {
    "path": ".gitignore",
    "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# Typescript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# dotenv environment variable files\n.env*\n\n# gatsby files\n.cache/\npublic\n\n# Mac files\n.DS_Store\n\n# Yarn\nyarn-error.log\n.pnp/\n.pnp.js\n# Yarn Integrity file\n.yarn-integrity\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 João Pedro\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\">\n  <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\">\n</p>\n\n<h2 align=\"center\">\n  Gatsby Starter: Rocket Docs\n</h2>\n\n<p align=\"center\">\n  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>\n</p>\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/badge/PRs-welcome-%238257E6.svg\" alt=\"PRs welcome!\" />\n\n  <img alt=\"License\" src=\"https://img.shields.io/badge/license-MIT-%238257E6\">\n\n  <a href=\"https://twitter.com/intent/follow?screen_name=jpedroschmitz\">\n    <img src=\"https://img.shields.io/twitter/follow/jpedroschmitz.svg?label=Follow%20@jpedroschmitz\" alt=\"Follow @jpedroschmitz\" />\n  </a>\n</p>\n\n## 🚀 Features\n\n- 📝 MDX for docs;\n- 🛣 Yaml-based sidebar navigation;\n- 📱 Responsive and mobile friendly;\n- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;\n- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).\n- 📈 Google Analytics support;\n- 📄 Custom docs schema;\n- 🖱 Table of Contents;\n- ⚡️ Offline Support & WebApp Manifest;\n- and much more 🔥\n\n## ⚡️ Getting started\n\n1. Create the website.\n\n   ```sh\n   npx gatsby new rocketdocs https://github.com/jpedroschmitz/gatsby-starter-rocketdocs\n   ```\n\n2. Start developing.\n\n   ```sh\n   cd rocketdocs\n   gatsby develop\n   ```\n\n3. Are you ready for launch?\n\n   Your site is now running at `http://localhost:8000`\n\n## 📄 Docs\n\nLooking for docs? Check our live demo and documentation [website](https://rocketdocs.netlify.app).\n\n---\n\nMade with 💜 by João Pedro\n"
  },
  {
    "path": "gatsby-config.js",
    "content": "module.exports = {\n  siteMetadata: {\n    siteTitle: `Rocket Docs`,\n    defaultTitle: `Rocket Docs`,\n    siteTitleShort: `Rocket Docs`,\n    siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,\n    siteUrl: `https://rocketdocs.netlify.app`,\n    siteAuthor: `@jpedroschmitz`,\n    siteImage: `/banner.png`,\n    siteLanguage: `en`,\n    themeColor: `#8257E6`,\n    basePath: `/`,\n  },\n  plugins: [\n    {\n      resolve: `@rocketseat/gatsby-theme-docs`,\n      options: {\n        configPath: `src/config`,\n        docsPath: `src/docs`,\n        homePath: `src/home`,\n        yamlFilesPath: `src/yamlFiles`,\n        repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,\n        baseDir: `examples/gatsby-theme-docs`,\n        gatsbyRemarkPlugins: [],\n      },\n    },\n    {\n      resolve: `gatsby-plugin-manifest`,\n      options: {\n        name: `Rocket Docs`,\n        short_name: `Rocket Docs`,\n        start_url: `/`,\n        background_color: `#ffffff`,\n        display: `standalone`,\n        icon: `static/favicon.png`,\n      },\n    },\n    `gatsby-plugin-sitemap`,\n    // {\n    //   resolve: `gatsby-plugin-google-analytics`,\n    //   options: {\n    //     trackingId: `YOUR_ANALYTICS_ID`,\n    //   },\n    // },\n    `gatsby-plugin-remove-trailing-slashes`,\n    {\n      resolve: `gatsby-plugin-canonical-urls`,\n      options: {\n        siteUrl: `https://rocketdocs.netlify.app`,\n      },\n    },\n    `gatsby-plugin-offline`,\n  ],\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"gatsby-starter-rocketdocs\",\n  \"private\": true,\n  \"version\": \"1.0.0\",\n  \"description\": \"Out of the box Gatsby Starter for creating documentation websites easily and quickly. With support for MDX, code highlight, Analytics, SEO and more\",\n  \"author\": \"João Pedro Schmitz <hey@joaopedro.dev> (@jpedroschmitz)\",\n  \"license\": \"MIT\",\n  \"starter-name\": \"gatsby-starter-rocketdocs\",\n  \"dependencies\": {\n    \"@rocketseat/gatsby-theme-docs\": \"^4.0.0\",\n    \"gatsby\": \"^5.9.0\",\n    \"gatsby-plugin-canonical-urls\": \"^5.9.0\",\n    \"gatsby-plugin-google-analytics\": \"^5.9.0\",\n    \"gatsby-plugin-manifest\": \"^5.9.0\",\n    \"gatsby-plugin-offline\": \"^6.9.0\",\n    \"gatsby-plugin-remove-trailing-slashes\": \"^4.2.0\",\n    \"gatsby-plugin-sitemap\": \"^6.9.0\",\n    \"prop-types\": \"^15.8.1\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {},\n  \"keywords\": [\n    \"gatsby\",\n    \"gatsby-starter\"\n  ],\n  \"scripts\": {\n    \"build\": \"gatsby build\",\n    \"start\": \"gatsby develop\",\n    \"serve\": \"gatsby serve\",\n    \"clean\": \"gatsby clean\"\n  }\n}\n"
  },
  {
    "path": "src/config/sidebar.yml",
    "content": "# Sidebar navigation\n\n- label: 'Introduction'\n  link: '/'\n- label: 'Getting started'\n  link: '/getting-started'\n- label: Usage\n  items:\n    - label: 'Creating docs'\n      link: '/usage/creating-docs'\n    - label: 'Navigation'\n      link: '/usage/navigation'\n    - label: 'Customizing'\n      link: '/usage/customizing'\n    - label: 'Using YAML files'\n      link: '/usage/using-yaml-files'\n    - label: 'Remark Plugins'\n      link: '/usage/remark-plugins'\n- label: More\n  items:\n    - label: FAQ\n      link: /faq\n    - label: 'Github'\n      link: https://github.com/jpedroschmitz/rocketdocs\n"
  },
  {
    "path": "src/docs/faq.mdx",
    "content": "---\ntitle: Frequently Asked Questions\ndescription: Frequently asked questions about the theme.\ndisableTableOfContents: true\n---\n\n## Will be included search or dark mode?\n\nThis theme is a great and complete option to build simple documentation websites.\nWe don't plan anymore to include search, dark mode or i18n to the project.\n\nRemember that if necessary, you can change colors and include a default\ndark theme. To do so, check this [doc](/usage/shadowing#changing-theme-colors).\n\n## How can I deploy my website?\n\nTo deploy this project, we recommend you take a look at this extensive documentation\nhosted on [Gatsby website](https://www.gatsbyjs.com/docs/deploying-and-hosting/). It\nincludes deploy tutorials for many services, like [Vercel](https://vercel.com/),\n[Netlify](https://www.netlify.com/), [GitHub Pages](https://pages.github.com/) and others.\n\n## What are good examples of the theme usage?\n\n- [Botmation](https://botmation.dev)\n- [Capmonster.cloud for Python](https://capmonster-python.alperenn.com/)\n- [ESPHome Devices](https://devices.esphome.io/)\n- [Label U](https://opendatalab.github.io/labelU-Kit/)\n- [React Observing](https://react-observing.web.app/)\n- [RudderStack Docs](https://rudderstack.com/docs/)\n- [Unform](https://unform.dev)\n- [Use Pandas](https://www.usepandas.com/)\n- [golangci-lint](https://golangci-lint.run/)\n- [use-cloudinary](https://use-cloudinary.netlify.app/)\n\nps: 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).\n"
  },
  {
    "path": "src/docs/getting-started.mdx",
    "content": "---\ntitle: 'Getting started'\ndescription: Learn how to get started with Rocket Docs.\n---\n\n> Rocket Docs is ready for Gatsby v5. New projects will use the new version!\n\nThe best way to start is by using our starter:\n\n```bash\nnpx gatsby new rocketdocs https://github.com/jpedroschmitz/gatsby-starter-rocketdocs\n```\n\nBut, if you prefer, you can install and configure manually.\n\n#### Using Yarn:\n\n```bash\nyarn add @rocketseat/gatsby-theme-docs\n```\n\n#### Using NPM:\n\n```bash\nnpm i @rocketseat/gatsby-theme-docs\n```\n\n## Theme Options\n\n| Key           | Default | Required | Description                                                                                                                                                            |\n| ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| basePath      | /       | No       | Root url for all docs                                                                                                                                                  |\n| configPath    | config  | No       | Location of config files                                                                                                                                               |\n| docsPath      | docs    | No       | The site description for SEO and social (FB, Twitter) tags                                                                                                             |\n| homePath      | -       | No       | Location of home file                                                                                                                                                  |\n| githubUrl     | -       | -        | Deprecated in favor of `repositoryUrl`                                                                                                                                 |\n| repositoryUrl | -       | No       | The complete URL of your repository (supports GitHub, GitLab and Bitbucket). Example: `https://github/jpedroschmitz/rocketdocs`                                        |\n| 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`)                                         |\n| 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` |\n| branch        | main    | No       | Default branch of the repository                                                                                                                                       |\n\n<br />\n\n> Note: When adding a BitBucket link on the `repositoryUrl` option, don't add the `src/<branch>` to it.\n> Example of correct link: <br /> `https://bitbucket.org/jpedroschmitz/rocketdocs`\n\n## Example usage\n\n```js title=gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    siteTitle: `@rocketseat/gatsby-theme-docs`,\n    defaultTitle: `@rocketseat/gatsby-theme-docs`,\n    siteTitleShort: `gatsby-theme-docs`,\n    siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,\n    siteUrl: `https://rocketdocs.netlify.app`,\n    siteAuthor: `@jpedroschmitz`,\n    siteImage: `/banner.png`,\n    siteLanguage: `en`,\n    themeColor: `#8257E6`,\n    basePath: `/`,\n  },\n  plugins: [\n    {\n      resolve: `@rocketseat/gatsby-theme-docs`,\n      options: {\n        basePath: `/`,\n        configPath: `src/config`,\n        docsPath: `src/docs`,\n        homePath: `src/home`,\n        repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,\n        baseDir: `examples/gatsby-theme-docs`,\n      },\n    },\n  ],\n};\n```\n\nOnce you have installed the dependencies you will need to create the [navigation](/usage/navigation) and [documentation](/usage/creating-docs) files.\n"
  },
  {
    "path": "src/docs/usage/creating-docs.mdx",
    "content": "---\ntitle: Creating docs\ndescription: Learn how to create docs using Rocket Docs.\n---\n\nAll MDX files created inside your docs folder will become pages, with the path defined by the filename.\nInside all docs files, you can define the following options:\n\n| Key                    | Required | Description                |\n| ---------------------- | -------- | -------------------------- |\n| title                  | Yes      | No                         |\n| description            | No       | Page description           |\n| image                  | No       | Used for og:image          |\n| disableTableOfContents | No       | Disables Table Of Contents |\n\n## Example\n\n```mdx\n---\ntitle: 'My Example'\ndescription: 'A simple description for this page'\nimage: /banner.jpeg\ndisableTableOfContents: false\n---\n\nWow, this is a nice page\n```\n\n## Embedding files\n\nIn a documentation website, sometimes you will need to embed well known services (like CodeSandbox, Twitter, or others...). If you need to\ndo it, you can simply copy-paste the link (powered by the awesome [gatsby-remark-embeder](https://www.gatsbyjs.com/packages/gatsby-remark-embedder/)).\nMake sure to check the [supported services](https://github.com/MichaelDeBoey/gatsby-remark-embedder#supported-services).\n\nhttps://youtu.be/QfcozcbDhNM\n\n## Code Highlight\n\nWe support many options for code components.\n\n### Title\n\nTo show a title, just add it to your code block. Ex: `title=src/myfile.css`\n\n```css title=src/myfile.css\n.gatsby::before {\n  content: 'niceee...';\n}\n```\n\n### Line numbers\n\nTo add line numbers for that code block, pass an option `lineNumbers=true`.\n\n```js lineNumbers=true\nconst rocket = {\n  launch: () => console.log('Launching...'),\n};\n\nrocket.launch();\n```\n\n### React live\n\nAs mentioned in the introduction, this theme uses `react-live`, so you can\ncreate a playground for live editing React components.\n\nTo use it, just add a `live=true` option to your code block.\n\n```jsx lineNumbers=true title=gatsby-config.js live=true\nfunction MyComponent() {\n  function handleButtonClick() {\n    alert('wowww');\n  }\n\n  return <button onClick={handleButtonClick}>Hey, click me!</button>;\n}\n\nrender(<MyComponent />);\n```\n\n> If you need to add elements to the scope, check this [guide](/usage/shadowing#adding-elements-to-react-live-scope).\n\n### Highlight lines\n\nTo highlight lines, you can pass ranges to a `highlight` option.\nFor example `highlight={1-4,6-7,9}` on the code below would result in:\n\n```jsx highlight={1-4,6-7,9}\nfunction MyComponent() {\n  function handleButtonClick() {\n    alert('wowww');\n  }\n\n  return <button onClick={handleButtonClick}>Hey, click me!</button>;\n}\n\nrender(<MyComponent />);\n```\n"
  },
  {
    "path": "src/docs/usage/customizing.mdx",
    "content": "---\ntitle: Customizing\ndescription: Rocket Docs allows to customize the look by using Gatsby theme shadowing feature.\n---\n\nTo shadow/override this theme, you will need to place your files into `src/@rocketseat/gatsby-theme-docs` folder.\n\nIf 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.\n\n## Changing the logo\n\nIf you want to change the logo just create the following file:\n\n```js title=src/@rocketseat/gatsby-theme-docs/components/Logo.js\nimport React from 'react';\n\nexport default function Logo(props) {\n  return (\n    <svg width={180} height={34} viewBox=\"0 0 180 34\" fill=\"none\" {...props}>\n      <path\n        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\"\n        fill=\"#121214\"\n      />\n      <path\n        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\"\n        fill=\"#8257E6\"\n      />\n    </svg>\n  );\n}\n```\n\nIf your logo is a png, you could use it like this:\n\n```js title=src/@rocketseat/gatsby-theme-docs/components/Logo.js\nimport React from 'react';\n\n// Path to the logo file on your project\nimport rocketseatLogo from 'assets/logo.png';\n\nconst Logo = () => (\n  <img src={rocketseatLogo} alt=\"Rocketseat logo\" style={{ width: 180 }} />\n);\n\nexport default Logo;\n```\n\n## Changing the home text\n\nCreate a file at `src/docs/index.mdx` with the text. Next, add the `homePath: 'src/home'` setting in the plugin options. Example:\n\n```mdx title=src/docs/index.mdx\n# Introduction\n\nMy awesome project!\n\nimport Navigation from '@rocketseat/gatsby-theme-docs/src/components/Docs/PostNav';\n\n<Navigation\n  prev={null}\n  next={{\n    label: 'Installation',\n    link: '/installation',\n  }}\n/>\n```\n\n## Changing theme colors\n\nWe use Emotion for theming. To change the theme colors, create a file under `src/@rocketseat/gatsby-theme-docs/styles/theme.js`.\n\nRemember that you need to restart your server to see the update.\n\n```js title=src/@rocketseat/gatsby-theme-docs/styles/theme.js\nexport default {\n  colors: {\n    primary: '#8257E6',\n    background: '#FFFFFF',\n    shape: `#F2F2FA`,\n    title: `#3D3D4D`,\n    text: `#6C6C80`,\n    components: {\n      blockquote: {\n        background: `#332616`,\n        text: `#E1E1E6`,\n      },\n    },\n  },\n};\n```\n\n## Changing the font family\n\nYou can also change the default font family of the theme.\n\nTo 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).\n\n```js title=src/@rocketseat/gatsby-theme-docs/styles/theme.js\nexport default {\n  fonts: {\n    fontFace: {\n      family: 'Roboto',\n      file: '/fonts/roboto-regular-webfont',\n    },\n    body: 'Roboto',\n  },\n};\n```\n\nThe `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.\n\nFont 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.\n\n```\n.\n└── static\n    └── fonts\n        ├── roboto-regular-webfont.eot\n        ├── roboto-regular-webfont.svg\n        ├── roboto-regular-webfont.ttf\n        ├── roboto-regular-webfont.woff\n        └── roboto-regular-webfont.woff2\n```\n\n## Adding elements to React Live scope\n\nBy default we add some elements to React Live Scope. If you need to add more, just\nshadow the following file:\n\n```js title=src/@rocketseat/gatsby-theme-docs/components/Code/LiveCodeScope.js\nimport { mdx } from '@mdx-js/react';\nimport { css, jsx } from '@emotion/react';\n\nexport default {\n  css,\n  jsx,\n  mdx,\n};\n```\n\nIf you want to know more about Scope, [check this explanation](https://github.com/FormidableLabs/react-live#how-does-the-scope-work).\n"
  },
  {
    "path": "src/docs/usage/navigation.mdx",
    "content": "---\ntitle: Navigation\ndescription: How to use the sidebar.yml file from Rocket Docs.\n---\n\nTo add items on the sidebar, it's necessary you create a `sidebar.yml` file under the config folder. Example:\n\n```yaml title=sidebar.yml\n# Just a simple item\n- label: 'Home'\n  link: '/'\n# With a list of items\n- label: 'With subitems'\n  items:\n    - label: 'My Example'\n      link: '/my-example'\n```\n\nIf necessary, you can also add external links:\n\n```yaml\n- label: 'GitHub'\n  link: 'https://github.com/jpedroschmitz'\n```\n"
  },
  {
    "path": "src/docs/usage/remark-plugins.md",
    "content": "---\ntitle: Remark plugins\ndescription: Learn how to use Remark plugins in Rocket Docs.\n---\n\nTo use a Remark plugin, you need to set the plugin name on this theme's `gatsbyRemarkPlugins` option.\n\n## Example usage\n\nGiven 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`.\n\n```sh\n# Using Yarn:\nyarn add gatsby-remark-graphviz\n# Using NPM:\nnpm i gatsby-remark-graphviz\n```\n\n```js title=gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    // ...\n  },\n  plugins: [\n    {\n      resolve: `@rocketseat/gatsby-theme-docs`,\n      options: {\n        // ...\n        gatsbyRemarkPlugins: [\n          {\n            `gatsby-remark-graphviz`,\n          }\n        ]\n      },\n    }\n  ]\n}\n```\n\n## Using a custom Remark Transformer plugin\n\nIf you use a local plugin, you must point to its location in the project through `require.resolve`.\n\n```js title=gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    // ...\n  },\n  plugins: [\n    {\n      resolve: `@rocketseat/gatsby-theme-docs`,\n      options: {\n        // ...\n        gatsbyRemarkPlugins: [\n          {\n            `gatsby-remark-graphviz`,\n            resolve: require.resolve(`./plugins/gatsby-remark-purple-headers`)\n          }\n        ]\n      },\n    }\n  ]\n}\n```\n\nFor 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.\n"
  },
  {
    "path": "src/docs/usage/using-yaml-files.md",
    "content": "---\ntitle: Using YAML files\ndescription: Learn how to YAML files in Rocket Docs.\n---\n\nTo use YAML files, create a new YAML file in a `yamlFiles` folder and it will be exposed as `all{FileName}Yaml` GraphQL node.\n\nTo store YAML in another folder, please change `yamlFilesPath` option of `@rocketseat/gatsby-theme-docs` plugin which is configured in `gatsby.config.js`.\n\n## Example file\n\nIf our project has `letters.yml` or `letters.yaml` under a `yamlFiles` folder which looks like:\n\n```yml\n- character: a\n- character: b\n- character: c\n```\n\nThen the following three nodes would be created:\n\n```json\n[\n  {\n    \"character\": \"a\"\n  },\n  {\n    \"character\": \"b\"\n  },\n  {\n    \"character\": \"c\"\n  }\n]\n```\n\n## Query GraphQL node\n\nWe can query the GraphQL nodes which is created from the YAML file as the following code:\n\n```graphql\n{\n  allLettersYaml {\n    edges {\n      node {\n        character\n      }\n    }\n  }\n}\n```\n\nWhich would return:\n\n```json\n{\n  \"allLettersYaml\": {\n    \"edges\": [\n      {\n        \"node\": {\n          \"character\": \"a\"\n        }\n      },\n      {\n        \"node\": {\n          \"character\": \"b\"\n        }\n      },\n      {\n        \"node\": {\n          \"character\": \"c\"\n        }\n      }\n    ]\n  }\n}\n```\n\nMore information, please refer to [gatsby-transformer-yaml plugin page](https://www.gatsbyjs.com/plugins/gatsby-transformer-yaml/).\n"
  },
  {
    "path": "src/home/index.mdx",
    "content": "# Introduction\n\nRocket Docs is a complete and awesome Gatsby Theme for documentation websites. We've\ndeveloped it to be easy to use and customize. Forget about other\nthings and focus on what matters: **writing docs.**\n\n## Features\n\n- ⚛️ Ready for Gatsby v5;\n- 📝 MDX for docs;\n- 🛣 Yaml-based sidebar navigation;\n- 📱 Responsive and mobile friendly;\n- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;\n- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).\n- 📈 Google Analytics support;\n- 📄 Custom docs schema;\n- 🖱 Table of Contents;\n- ⚡️ Offline Support & WebApp Manifest;\n- and much more 🔥\n\n<br />\n\n[Get started now!](/getting-started)\n"
  },
  {
    "path": "src/pages/404.js",
    "content": "import React from 'react';\nimport { Link } from 'gatsby';\n\nimport Layout from '@rocketseat/gatsby-theme-docs/src/components/Layout';\nimport Seo from '@rocketseat/gatsby-theme-docs/src/components/SEO';\n\nexport default function NotFound() {\n  return (\n    <Layout title=\"Page not found!\">\n      <Seo title=\"404: Not found\" />\n      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>\n      <p>\n        If you&#39;d like to go back to homepage, <Link to=\"/\">click here</Link>\n        .\n      </p>\n    </Layout>\n  );\n}\n"
  },
  {
    "path": "src/yamlFiles/letters.yml",
    "content": "- character: a\n- character: b\n- character: c\n"
  }
]