chore(docs): Fix the heading order

docs/docs/add-a-manifest-file.md

@@ -16,7 +16,7 @@ Quoting [Google](https://developers.google.com/web/fundamentals/web-app-manifest
 
 [Gatsby's manifest plugin](/packages/gatsby-plugin-manifest/) configures Gatsby to create a `manifest.webmanifest` file on every site build.
 
-### Using `gatsby-plugin-manifest`
+## Using `gatsby-plugin-manifest`
 
 1.  Install the plugin:
 

docs/docs/add-offline-support-with-a-service-worker.md

@@ -7,19 +7,19 @@ If you've run an [audit with Lighthouse](/docs/audit-with-lighthouse/), you may
 1.  You can [add a manifest file](/docs/add-a-manifest-file/). Ensure that the manifest plugin is listed _before_ the offline plugin so that the offline plugin can cache the created `manifest.webmanifest`.
 2.  You can also add offline support, since another requirement for a website to qualify as a PWA is the use of a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). [Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline--and makes it more resistant to bad network conditions--by creating a service worker for your site.
 
-### What is a service worker?
+## What is a service worker?
 
 A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. They increase your site availability in spotty connections, and are essential to making a nice user experience.
 
 It supports features like push notifications and background synchronization.
 
-### Using service workers in Gatsby with `gatsby-plugin-offline`
+## Using service workers in Gatsby with `gatsby-plugin-offline`
 
 Gatsby provides an awesome plugin interface to create and load a service worker into your site: [gatsby-plugin-offline](https://www.npmjs.com/package/gatsby-plugin-offline).
 
 We recommend using this plugin together with the [manifest plugin](https://www.npmjs.com/package/gatsby-plugin-manifest). (Don’t forget to list the offline plugin after the manifest plugin so that the manifest file can be included in the service worker).
 
-### Installing `gatsby-plugin-offline`
+## Installing `gatsby-plugin-offline`
 
 `npm install --save gatsby-plugin-offline`
 
@@ -43,7 +43,7 @@ That's all you need to add offline support to your Gatsby site.
 
 Note: Service worker registers only in production builds (`gatsby build`).
 
-### Displaying a message when a service worker updates
+## Displaying a message when a service worker updates
 
 To display a custom message once your service worker finds an update, you can use the [`onServiceWorkerUpdateReady`](/docs/browser-apis/#onServiceWorkerUpdateReady) browser API in your `gatsby-browser.js` file. The following code will display a confirm prompt asking the user whether they would like to refresh the page when an update is found:
 
@@ -60,7 +60,7 @@ export const onServiceWorkerUpdateReady = () => {
 }
 ```
 
-### Using a custom service worker in Gatsby
+## Using a custom service worker in Gatsby
 
 You can add a custom service worker if your use case requires something that `gatsby-plugin-offline` doesn't support.
 
@@ -74,7 +74,7 @@ export const registerServiceWorker = () => true
 
 That's all! Gatsby will register your custom service worker.
 
-### Removing the service worker
+## Removing the service worker
 
 If you would like to fully remove the service worker from your site, you can use the plugin `gatsby-plugin-remove-serviceworker` in place of `gatsby-plugin-offline`. See [the README for `gatsby-plugin-offline`](/packages/gatsby-plugin-offline/#remove) for instructions how to do this.
 

docs/docs/add-page-metadata.md

@@ -10,7 +10,7 @@ Adding metadata to pages (such as a title or description) is key in helping sear
 
 Gatsby's [react helmet plugin](/packages/gatsby-plugin-react-helmet/) provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds.
 
-### Using `React Helmet` and `gatsby-plugin-react-helmet`
+## Using `React Helmet` and `gatsby-plugin-react-helmet`
 
 1. Install both packages:
 

docs/docs/adding-a-list-of-markdown-blog-posts.md

@@ -4,7 +4,7 @@ title: Adding a List of Markdown Blog Posts
 
 Once you have added Markdown pages to your site, you are just one step away from being able to list your posts on a dedicated index page.
 
-### Creating posts
+## Creating posts
 
 As described [here](/docs/adding-markdown-pages), you will have to create your posts in Markdown files which will look like this:
 
@@ -18,7 +18,7 @@ title: "My first blog post"
 Has anyone heard about GatsbyJS yet?
 ```
 
-### Creating the page
+## Creating the page
 
 The first step will be to create the page which will display your posts, in `src/pages/`. You can for example use `index.js`.
 
@@ -41,7 +41,7 @@ const IndexPage = ({
 export default IndexPage
 ```
 
-### Creating the GraphQL query
+## Creating the GraphQL query
 
 Second, you need to provide the data to your component with a GraphQL query. Let's add it, so that `index.js` looks like this:
 
@@ -83,7 +83,7 @@ export const pageQuery = graphql`
 `
 ```
 
-### Creating the `PostLink` component
+## Creating the `PostLink` component
 
 The only thing left to do is to add the `PostLink` component. Create a new file `post-link.js` in `src/components/` and add the following:
 

docs/docs/adding-markdown-pages.md

@@ -17,11 +17,11 @@ Here are the steps Gatsby follows for making this happen.
 
 Use the plugin [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/#gatsby-source-filesystem) to read files.
 
-#### Install
+### Install
 
 `npm install --save gatsby-source-filesystem`
 
-#### Add plugin
+### Add plugin
 
 **NOTE:** There are two ways to add a plugin in `gatsby-config.js`. Either you can pass a string with the plugin name or in case you want to include options, pass an object.
 
@@ -41,15 +41,15 @@ plugins: [
 
 Completing the above step means that you've "sourced" the Markdown files from the filesystem. You can now "transform" the Markdown to HTML and the YAML frontmatter to JSON.
 
-### Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark`
+## Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark`
 
 You'll use the plugin [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) to recognize files which are Markdown and read their content. The plugin will convert the frontmatter metadata part of your Markdown files as `frontmatter` and the content part as HTML.
 
-#### Install
+### Install transformer plugin
 
 `npm install --save gatsby-transformer-remark`
 
-#### Add plugin
+### Configure plugin
 
 Add this to `gatsby-config.js` after the previously added `gatsby-source-filesystem`.
 
@@ -66,12 +66,12 @@ plugins: [
 ]
 ```
 
-### Add a Markdown file
+## Add a Markdown file
 
 Create a folder in the `/src` directory of your Gatsby application called `markdown-pages`.
 Now create a Markdown file inside it with the name `post-1.md`.
 
-#### Frontmatter for metadata in markdown files
+### Frontmatter for metadata in Markdown files
 
 When you create a Markdown file, you can include a set of key value pairs that can be used to provide additional data relevant to specific pages in the GraphQL data layer. This data is called frontmatter and is denoted by the triple dashes at the start and end of the block. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide the key value pairs as data in your React components.
 
@@ -85,7 +85,7 @@ title: "My first blog post"
 
 What is important in this step is the key pair `path`. The value that is assigned to the key `path` is used in order to navigate to your post.
 
-### Create a page template for the Markdown files
+## Create a page template for the Markdown files
 
 Create a folder in the `/src` directory of your Gatsby application called `templates`.
 Now create a `blogTemplate.js` inside it with the following content:

docs/docs/adding-page-transitions-with-plugin-transition-link.md

@@ -71,7 +71,7 @@ You have two main methods of creating page transitions:
 
 Additionally, you can specify a number of props and options on the `TransitionLink` component, like `length`, `delay`, and more. For more options and details, see [the documentation of TransitionLink](https://transitionlink.tylerbarnes.ca/docs/transitionlink/). For further examples of usage, visit the [plugin's GitHub repository.](https://github.com/TylerBarnes/gatsby-plugin-transition-link)
 
-#### Using the trigger function
+### Using the trigger function
 
 You can specify a `trigger` function that will handle the animation. This is useful for _imperative_ animation libraries like [animejs](https://animejs.com/) or [GSAP](https://greensock.com/gsap) that specify animations with function calls.
 
@@ -95,7 +95,7 @@ You can specify a `trigger` function that will handle the animation. This is use
 </TransitionLink>
 ```
 
-#### Using passed props
+### Using passed props
 
 The exiting and entering pages/templates involved in the transition will receive props indicating the current transition status, as well as the `exit` or `enter` props defined on the `TransitionLink`.
 

docs/docs/adding-pagination.md

@@ -11,7 +11,7 @@ Each page will [query GraphQL](/docs/querying-with-graphql/) for those specific
 
 The information needed to query for those specific items (i.e. values for [`limit`](/docs/graphql-reference/#limit) and [`skip`](/docs/graphql-reference/#skip)) will come from the [`context`](/docs/graphql-reference/#query-variables) that is added when [creating pages](/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs) in `gatsby-node`.
 
-### Example
+## Example
 
 ```js:title=src/templates/blog-list-template.js
 import React from "react"
@@ -126,7 +126,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
 The code above will create an amount of pages that is based on the total number of posts. Each page will list `postsPerPage`(6) posts, until there are less than `postsPerPage`(6) posts left.
 The path for the first page is `/blog`, following pages will have a path of the form: `/blog/2`, `/blog/3`, etc.
 
-### Other resources
+## Other resources
 
 - Follow this [step-by-step tutorial](https://nickymeuleman.netlify.com/blog/gatsby-pagination/) to add links to the previous/next page and the traditional page-navigation at the bottom of the page
 

docs/docs/adding-search-with-algolia.md

@@ -341,7 +341,7 @@ Passing this `indices` array as a prop allows you to reuse the same `Search` com
 
 Note that you fed `algoliasearch` with the same app ID you specified in our `.env` file and used in `src/utils/algolia.js` as well as with your search-only API key to generate a search client which connects to your backend. _Don't paste in your Algolia admin API key here!_ `algoliasearch` only needs to _read_ your indices. Pasting your admin key here would allow others to obtain it once your site is deployed. They could then start messing with your indexed data on Algolia.
 
-## `input.js`
+### `input.js`
 
 ```js:title=src/components/search/input.js
 import React from "react"
@@ -367,7 +367,7 @@ The `Input` component is where the user enters the search string. It is quite sh
 
 Now let's look at the styled components `SearchIcon`, `Form`, `Input` as well as the ones imported in `index.js`.
 
-## `styles.js`
+### `styles.js`
 
 ```js:title=src/components/search/styles.js
 import React from "react"
@@ -507,7 +507,7 @@ Styles will of course be different from one site to the next so I only list thes
 
 Now you're almost done, two small steps remain. First you need to put together a hit component for every type of result you want to display. In this example, these are blog posts and pages. And second, you need to call your `Search` component somewhere on your site. Here are the hit components.
 
-## `hitComps.js`
+### `hitComps.js`
 
 ```js:title=src/components/search/hitComps.js
 import React, { Fragment } from "react"

docs/docs/api-files-gatsby-config.md

@@ -100,7 +100,7 @@ module.exports = {
 }
 ```
 
-### Mixed plugins
+#### Mixed plugins
 
 You can add plugins with and without options in the same array. Your site's config file could look like this:
 

docs/docs/api-specification.md

@@ -55,9 +55,9 @@ in some of its data fields.
 See
 [the full list of (official only for now — adding support for community plugins later) plugins](/docs/plugins/).
 
-# API
+## API
 
-## Concepts
+### Concepts
 
 - _Page_ — a site page with a pathname, a template component, and optional
   GraphQL query.
@@ -78,15 +78,15 @@ See
 
 _More definitions and terms are defined in the [Glossary](/docs/glossary/)_
 
-## Operators
+### Operators
 
 - _Create_ — make a new thing
 - _Get_ — get an existing thing
 - _Delete_ — remove an existing thing
 - _Replace_ — replace an existing thing
 - _Set_ — merge into an existing thing
 
-## Extension APIs
+### Extension APIs
 
 Gatsby has multiple processes. The most prominent is the "bootstrap" process. It
 has several subprocesses. One tricky part to their design is that they run both

docs/docs/audit-with-lighthouse.md

@@ -10,7 +10,7 @@ Lighthouse is included in Chrome DevTools. Running its audit -- and then address
 
 If you haven't yet, you need to create a production build of your Gatsby site. The Gatsby development server is optimized for making development fast, but the site that it generates, while closely resembling a production version of the site, isn't as optimized.
 
-### Create a production build
+## Create a production build
 
 1.  Stop the development server (if it's still running) and run:
 
@@ -28,7 +28,7 @@ gatsby serve
 
 Once this starts, you can now view your site at `localhost:9000`.
 
-### Run a Lighthouse audit
+## Run a Lighthouse audit
 
 Now let's run your first Lighthouse test.
 

docs/docs/bulma.md

@@ -6,7 +6,7 @@ title: Bulma
 
 This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start), then come back.
 
-### Installation
+## Installation
 
 For starters, lets install all the required packages we're going to need.
 
@@ -18,7 +18,7 @@ Then add the `gatsby-plugin-sass` in to `gatsby-config.js`.
 plugins: [`gatsby-plugin-sass`],
 ```
 
-### File for styles
+## File for styles
 
 Now is the time to create a scss-file that holds our simple style customisation and the import statement for bulma.
 
@@ -33,7 +33,7 @@ $title-color: #ff0000;
 @import "~bulma/bulma.sass";
 ```
 
-### Using Bulma
+## Using Bulma
 
 The last step is to import the style and use it.
 
@@ -66,6 +66,6 @@ export default IndexPage
 
 And that's all there is to it! Now you can use Bulma as you normally would.
 
-### Resources
+## Resources
 
 - [Bulma documentation on how to use sass](https://bulma.io/documentation/customize/with-node-sass/)

docs/docs/custom-html.md

@@ -17,23 +17,23 @@ And then make modifications as needed.
 
 If you need to insert custom html into the `<head>` or `<footer>` of each page on your site, you can use `html.js`.
 
-### Required props
+## Required props
 
 Note: the various props that are rendered into pages _are_ required e.g.
 `headComponents`, `preBodyComponents`, `body`, and `postBodyComponents`.
 
-### Inserting html into the `<head>`
+## Inserting html into the `<head>`
 
 Anything you render in the `html.js` component will _not_ be made "live" in
 the client like other components. If you want to dynamically update your
 `<head>` we recommend using
 [React Helmet](/packages/gatsby-plugin-react-helmet/)
 
-### Inserting html into the `<footer>`
+## Inserting html into the `<footer>`
 
 If you want to insert custom html into the footer, html.js is the preferred way of doing this. If you're writing a plugin, consider using the `setPostBodyComponents` prop in the [Gatsby SSR API](/docs/ssr-apis/).
 
-### Target container
+## Target container
 
 If you see this error: `Uncaught Error: _registerComponent(...): Target container is not a DOM element.` it means your `html.js` is missing the required
 "target container". Inside your `<body>` you must have a div with an id of
@@ -47,7 +47,7 @@ If you see this error: `Uncaught Error: _registerComponent(...): Target containe
 />
 ```
 
-### Adding custom JavaScript
+## Adding custom JavaScript
 
 You can add custom JavaScript to your HTML document by using React's [dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) attribute.
 

docs/docs/end-to-end-testing.md

@@ -42,7 +42,7 @@ This means your `test:e2e` script would look like this:
 "test:e2e": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test develop http://localhost:8000 cy:open"
 ```
 
-### Continuous Integration
+## Continuous Integration
 
 If you want to run Cypress in Continuous Integration (CI) you have to use `cypress run` instead of `cypress open`:
 

docs/docs/gatsby-agency-partnership.md

@@ -4,7 +4,7 @@ title: Agency Partnership Program
 
 If you're in the business of building websites or web apps for clients, and you're building with Gatsby, we're building an Agency Partnership Program to get the support you need and the visibility you deserve.
 
-### What's provided
+## What's provided
 
 Depending on the amount of websites you build with Gatsby, the partner program will include:
 
@@ -13,7 +13,7 @@ Depending on the amount of websites you build with Gatsby, the partner program w
 - A lead capture form on this page so people can get in touch with you directly
 - Live training for developers (in-person or virtual)
 
-### Application process
+## Application process
 
 **Step 1**: Build a client (or agency) website with Gatsby.