diff --git a/docs/docs/recipes/deploying-your-site.md b/docs/docs/recipes/deploying-your-site.md
deleted file mode 100644
index ac9d68e8615f6..0000000000000
--- a/docs/docs/recipes/deploying-your-site.md
+++ /dev/null
@@ -1,188 +0,0 @@
----
-title: "Recipes: Deploying Your Site"
-tableOfContentsDepth: 1
----
-
-Showtime. Once you are happy with your site, you are ready to go live with it!
-
-## Preparing for deployment
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start)
-- The [Gatsby CLI](/docs/reference/gatsby-cli) installed
-
-### Directions
-
-1. Stop your development server if it is running (`Ctrl + C` on your command line in most cases)
-
-2. For the standard site path at the root directory (`/`), run `gatsby build` using the Gatsby CLI on the command line. The built files will now be in the `public` folder.
-
-```shell
-gatsby build
-```
-
-3. To include a site path other than `/` (such as `/site-name/`), set a path prefix by adding the following to your `gatsby-config.js` and replacing `yourpathprefix` with your desired path prefix:
-
-```js:title=gatsby-config.js
-module.exports = {
-  pathPrefix: `/yourpathprefix`,
-}
-```
-
-There are a few reasons to do this -- for instance, hosting a blog built with Gatsby on a domain with another site not built on Gatsby. The main site would direct to `example.com`, and the Gatsby site with a path prefix could live at `example.com/blog`.
-
-4. With a path prefix set in `gatsby-config.js`, run `gatsby build` with the `--prefix-paths` flag to automatically add the prefix to the beginning of all Gatsby site URLs and `<Link>` tags.
-
-```shell
-gatsby build --prefix-paths
-```
-
-5. Make sure that your site looks the same when running `gatsby build` as with `gatsby develop`. By running `gatsby serve` when you build your site, you can test out (and debug if necessary) the finished product before deploying it live.
-
-```shell
-gatsby build && gatsby serve
-```
-
-### Additional resources
-
-- Walk through building and deploying an example site in [tutorial part one](/docs/tutorial/part-1/#deploying-a-gatsby-site)
-- Learn about [performance optimization](/docs/performance/)
-- Read about [other deployment related topics](/docs/preparing-for-deployment/)
-- Check out the [deployment docs](/docs/deploying-and-hosting/) for specific hosting platforms and how to deploy to them
-
-## Deploying to Netlify
-
-Use [`netlify-cli`](https://www.netlify.com/docs/cli/) to deploy your Gatsby application without leaving the command-line interface.
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start) with a single component `index.js`
-- The [netlify-cli](https://www.npmjs.com/package/netlify-cli) package installed
-- The [Gatsby CLI](/docs/reference/gatsby-cli) installed
-
-### Directions
-
-1. Build your gatsby application using `gatsby build`
-
-2. Login into Netlify using `netlify login`
-
-3. Run the command `netlify init`. Select the "Create & configure a new site" option.
-
-4. Choose a custom website name if you want or press enter to receive a random one.
-
-5. Choose your [Team](https://www.netlify.com/docs/teams/).
-
-6. Change the deploy path to `public/`
-
-7. Make sure that everything looks fine before deploying to production using `netlify deploy -d . --prod`
-
-### Additional resources
-
-- [Hosting on Netlify](/docs/hosting-on-netlify)
-- [gatsby-plugin-netlify](/plugins/gatsby-plugin-netlify)
-
-## Deploying to Vercel
-
-Use [Vercel CLI](https://vercel.com/download) to deploy your Gatsby application without leaving the command-line interface.
-
-### Prerequisites
-
-- A [Vercel](https://vercel.com/signup) account
-- A [Gatsby site](/docs/quick-start) with a single component `index.js`
-- [Vercel CLI](https://vercel.com/download) package installed
-- [Gatsby CLI](/docs/reference/gatsby-cli) installed
-
-### Directions
-
-1. Login into Vercel CLI using `vercel login`
-
-2. Change to the directory of your Gatsby.js application in the Terminal if you aren't already there
-
-3. Run `vercel` to deploy it
-
-### Additional resources
-
-- [Deploying to Vercel](/docs/how-to/previews-deploys-hosting/deploying-to-vercel/)
-
-## Deploying to Cloudflare Workers
-
-Use [`wrangler`](https://developers.cloudflare.com/workers/tooling/wrangler/) to deploy your Gatsby application globally without leaving the command-line interface.
-
-### Prerequisites
-
-- An account on [Cloudflare](https://dash.cloudflare.com/sign-up)
-- A [Workers Unlimited plan](https://developers.cloudflare.com/workers/about/pricing/) for \$5/month to enable the KV store, which is required to serve the Gatsby files.
-- A [Gatsby site](/docs/quick-start) set up with Gatsby's CLI
-- [wrangler](https://developers.cloudflare.com/workers/tooling/wrangler/install/) installed globally (`npm install -g @cloudflare/wrangler`)
-
-### Directions
-
-1. Build your Gatsby application using `gatsby build`
-2. Run `wrangler config` where you'll be prompted for your [Cloudflare API token](https://developers.cloudflare.com/workers/quickstart/#api-token)
-3. Run `wrangler init --site`
-4. Configure `wrangler.toml`. First add [account ID](https://developers.cloudflare.com/workers/quickstart/#account-id-and-zone-id) field and then either
-   1. A free workers.dev domain by setting `workers_dev = true`
-   2. A custom domain on Cloudflare by setting `workers_dev = false`, `zone_id = "abdc..` and `route = customdomain.com/*`
-5. In `wrangler.toml` set `bucket = "./public"`
-6. Run `wrangler publish` and your site will be deployed in seconds!
-
-### Additional resources
-
-- [Hosting on Cloudflare](/docs/deploying-to-cloudflare-workers)
-
-## Setting up Google Analytics
-
-Use `gatsby-plugin-google-analytics` to track site activity and provide insights into how users access your website.
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start) with a `gatsby-config.js` file and an `index.js` page
-- The [Gatsby CLI](/docs/reference/gatsby-cli) installed
-- A domain from your provider of choice, e.g. [AWS](https://aws.amazon.com/getting-started/tutorials/get-a-domain/)
-
-### Verify the domain in search.google.com
-
-1. Navigate to the [Google search console](https://search.google.com/search-console/not-verified) to verify the domain by clicking on **Search Property** > **Add Property**. Type in your domain and press Continue.
-2. Add a **TXT** record to your DNS configuration. Follow the directions for your provider, or refer to the [Google documentation](https://support.google.com/a/answer/183895?hl=en).
-
-### Linking the domain to Google Analytics admin
-
-1. Log into [Google Analytics](https://analytics.google.com/analytics/).
-2. Click **Admin**.
-3. Select **Create Property** in the Property column.
-4. Choose **Web**.
-5. Fill in the details and click **Create**.
-
-### Getting your Google Analytics `Tracking ID`
-
-1. Sign in to your Google Analytics account.
-2. Click **Admin**.
-3. Select an account from the menu in the ACCOUNT column.
-4. Select a property from the menu in the PROPERTY column.
-5. Under Property, click **Tracking Info** > **Tracking Code**. Your Tracking ID is displayed at the top of the page.
-
-### Using the ID in the plugin
-
-1. Run `npm install gatsby-plugin-google-analytics` in your terminal.
-2. Add the following to your `gatsby-config.js` file.
-
-```javascript:title="gatsby-config.js"
-module.exports = {
-  plugins: [
-    {
-      resolve: `gatsby-plugin-google-analytics`,
-      options: {
-        // replace "UA-XXXXXXXXX-X" with your own Tracking ID
-        trackingId: "UA-XXXXXXXXX-X",
-      },
-    },
-  ],
-}`
-```
-
-3. Build and deploy your site to start seeing traffic in your [Google Analytics dashboard](https://analytics.google.com/analytics/web/).
-
-### Additional resources
-
-- [Adding Analytics](/docs/how-to/adding-common-features/adding-analytics/)
diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md
deleted file mode 100644
index ab287b5563f7a..0000000000000
--- a/docs/docs/recipes/styling-css.md
+++ /dev/null
@@ -1,480 +0,0 @@
----
-title: "Recipes: Styling with CSS"
-tableOfContentsDepth: 1
----
-
-There are so many ways to add styles to your website; Gatsby supports almost every possible option, through official and community plugins.
-
-## Using global CSS files without a Layout component
-
-### Prerequisites
-
-- An existing [Gatsby site](/docs/quick-start/) with an index page component
-- A `gatsby-browser.js` file
-
-### Directions
-
-1. Create a global CSS file as `src/styles/global.css` and paste the following into the file:
-
-```css:title=src/styles/global.css
-html {
-  background-color: lavenderblush;
-}
-
-p {
-  color: maroon;
-}
-```
-
-2. Import the global CSS file in the `gatsby-browser.js` file such as the following:
-
-```javascript:title=gatsby-browser.js
-import "./src/styles/global.css"
-```
-
-> **Note:** You can also make use of `require('./src/styles/global.css')` to import the global CSS file in your `gatsby-browser.js` file.
-
-3. Run `gatsby-develop` to observe the global styling being applied across your site.
-
-> **Note:** This approach is not the best fit if you are using CSS-in-JS for styling your site, in which case a layout page with all the shared components should be used. This is covered in the next recipe.
-
-### Additional resources
-
-- More on [adding global styles without a layout component](/docs/how-to/styling/global-css/#adding-global-styles-without-a-layout-component)
-
-## Using global styles in a layout component
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start/) with an index page component
-
-### Directions
-
-You can add global styles to a [shared layout component](/docs/tutorial/part-2/#create-a-reusable-layout-component). This component is used for things that are common throughout the site, like a header or footer.
-
-1. If you don't already have one, create a new directory in your site at `/src/components`.
-
-2. Inside the components directory, create two files: `layout.css` and `layout.js`.
-
-3. Add the following to `layout.css`:
-
-```css:title=/src/components/layout.css
-body {
-  background: red;
-}
-```
-
-4. Edit `layout.js` to import the CSS file and output layout markup:
-
-```jsx:title=/src/components/layout.js
-import React from "react"
-import "./layout.css"
-
-export default function Layout({ children }) {
-  return <div>{children}</div>
-}
-```
-
-5. Now edit your site's homepage at `/src/pages/index.js` and use the new layout component:
-
-```jsx:title=/src/pages/index.js
-import React from "react"
-import Layout from "../components/layout"
-
-export default function Home() {
-  return <Layout>Hello world!</Layout>
-}
-```
-
-### Additional resources
-
-- [Standard Styling with Global CSS Files](/docs/how-to/styling/global-css/)
-- [More about layout components](/docs/tutorial/part-2/#create-a-reusable-layout-component)
-
-## Using Styled Components
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start/) with an index page component
-- [gatsby-plugin-styled-components, styled-components, and babel-plugin-styled-components](/plugins/gatsby-plugin-styled-components/) installed in `package.json`
-
-### Directions
-
-1. Inside your `gatsby-config.js` file add `gatsby-plugin-styled-components`
-
-```javascript:title=gatsby-config.js
-module.exports = {
-  plugins: [`gatsby-plugin-styled-components`],
-}
-```
-
-2. Open the index page component (`src/pages/index.js`) and import the `styled-components` package
-
-3. Style components by creating style blocks for each element type
-
-4. Apply to the page by including styled components in the JSX
-
-```jsx:title=src/pages/index.js
-import React from "react"
-import styled from "styled-components" //highlight-line
-
-const Container = styled.div`
-  margin: 3rem auto;
-  max-width: 600px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`
-
-const Avatar = styled.img`
-  flex: 0 0 96px;
-  width: 96px;
-  height: 96px;
-  margin: 0;
-`
-
-const Username = styled.h2`
-  margin: 0 0 12px 0;
-  padding: 0;
-`
-
-const User = props => (
-  <>
-    <Avatar src={props.avatar} alt={props.username} />
-    <Username>{props.username}</Username>
-  </>
-)
-
-export default function UsersList() {
-  return (
-    <Container>
-      <h1>About Styled Components</h1>
-      <p>Styled Components is cool</p>
-      <User
-        username="Jane Doe"
-        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
-      />
-      <User
-        username="Bob Smith"
-        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
-      />
-    </Container>
-  )
-}
-```
-
-4. Run `gatsby develop` to see the changes
-
-### Additional resources
-
-- [More on Using Styled Components](/docs/how-to/styling/styled-components/)
-- [Egghead lesson](https://egghead.io/lessons/gatsby-style-gatsby-sites-with-styled-components)
-
-## Using CSS Modules
-
-### Prerequisites
-
-- An existing [Gatsby site](/docs/quick-start/) with an index page component
-
-### Directions
-
-1. Create a CSS module as `src/pages/index.module.css` and paste the following into the module:
-
-```css:title=src/pages/index.module.css
-.feature {
-  margin: 2rem auto;
-  max-width: 500px;
-}
-```
-
-2. Import the CSS module as a JSX object `style` in the `index.js` file by modifying the page so it looks like the following:
-
-```jsx:title=src/pages/index.js
-import React from "react"
-
-// highlight-start
-import * as style from "./index.module.css"
-
-export default function Home() {
-  return (
-    <section className={style.feature}>
-      <h1>Using CSS Modules</h1>
-    </section>
-  )
-}
-// highlight-end
-```
-
-3. Run `gatsby develop` to see the changes.
-
-**Note:**
-Notice that the file extension is `.module.css` instead of `.css`, which tells Gatsby that this is a CSS module.
-
-### Additional resources
-
-- More on [Using CSS Modules](/docs/tutorial/part-2/#style-components-with-css-modules)
-- [Live example on Using CSS modules](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-css-modules)
-
-## Using Sass/SCSS
-
-Sass is an extension of CSS that gives you more advanced features like nested rules, variables, mixins, and more.
-
-Sass has 2 syntaxes. The most commonly used syntax is "SCSS", and is a superset of CSS. That means all valid CSS syntax, is valid SCSS syntax. SCSS files use the extension `.scss`
-
-Sass will compile `.scss` and `.sass` files to `.css` files for you, so you can write your stylesheets with more advanced features.
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start/).
-
-### Directions
-
-1. Install the Gatsby plugin [gatsby-plugin-sass](/plugins/gatsby-plugin-sass/) and `sass`.
-
-`npm install sass gatsby-plugin-sass`
-
-2. Include the plugin in your `gatsby-config.js` file.
-
-```javascript:title=gatsby-config.js
-plugins: [`gatsby-plugin-sass`],
-```
-
-3. Write your stylesheets as `.sass` or `.scss` files and import them. If you don't know how to import styles, take a look at [Styling with CSS](/docs/how-to/styling/built-in-css/)
-
-_Note: You can use Sass/SCSS files as modules too, like mentioned in the previous recipe about CSS modules, with the difference that instead of `.css` the extensions have to be `.scss` or `.sass`_
-
-Using `.scss`:
-
-```scss:title=styles.scss
-$font-stack: Helvetica, sans-serif;
-$primary-color: #333;
-
-body {
-  font: 100% $font-stack;
-  color: $primary-color;
-}
-```
-
-```javascript
-import "./styles.scss"
-```
-
-Using `.sass`:
-
-```scss:title=styles.sass
-$font-stack:    Helvetica, sans-serif
-$primary-color: #333
-
-body
-  font: 100% $font-stack
-  color: $primary-color
-```
-
-```javascript
-import "./styles.sass"
-```
-
-### Additional resources
-
-- [Difference between `.sass` and `.scss`](https://responsivedesign.is/articles/difference-between-sass-and-scss/)
-- [Sass guide from the official Sass website](https://sass-lang.com/guide)
-- [A more complete installation tutorial on Sass with some more explanations and more resources](/docs/how-to/styling/sass/)
-
-## Adding a Local Font
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start/)
-- A font file: `.woff2`, `.ttf`, etc.
-
-### Directions
-
-1. Copy a font file into your Gatsby project, such as `src/fonts/fontname.woff2`.
-
-2. Import the font asset into a CSS file to bundle it into your Gatsby site:
-
-```css:title=src/css/typography.css
-@font-face {
-  font-family: "Font Name";
-  src: url("../fonts/fontname.woff2");
-}
-```
-
-**Note:** Make sure the font name is referenced from the relevant CSS, e.g.:
-
-```css:title=src/components/layout.css
-body {
-  font-family: "Font Name", sans-serif;
-}
-```
-
-By targeting the HTML `body` element, your font will apply to most text on the page. Additional CSS can target other elements, such as `button` or `textarea`.
-
-If fonts are not updating following steps above, make sure to replace the existing font-family in relevant CSS.
-
-### Additional resources
-
-- More on [importing assets into files](/docs/how-to/images-and-media/importing-assets-into-files/)
-
-## Using Emotion
-
-[Emotion](https://emotion.sh) is a powerful CSS-in-JS library that supports both inline CSS styles and styled components. You can use each styling feature individually or together in the same file.
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start)
-
-### Directions
-
-1. Install the [Gatsby Emotion plugin](/plugins/gatsby-plugin-emotion/) and Emotion packages.
-
-```shell
-npm install gatsby-plugin-emotion @emotion/react @emotion/styled
-```
-
-2. Add the `gatsby-plugin-emotion` plugin to your `gatsby-config.js` file:
-
-```javascript:title=gatsby-config.js
-module.exports = {
-  plugins: [`gatsby-plugin-emotion`],
-}
-```
-
-3. If you don't already have one, create a page in your Gatsby site at `src/pages/emotion-sample.js`.
-
-Import Emotion's `css` core package. You can then use the `css` prop to add [Emotion object styles](https://emotion.sh/docs/object-styles) to any element inside a component:
-
-```jsx:title=src/pages/emotion-sample.js
-import React from "react"
-import { css } from "@emotion/react"
-
-export default function EmotionSample() {
-  return (
-    <div>
-      <p
-        css={{
-          background: "pink",
-          color: "blue",
-        }}
-      >
-        This page is using Emotion.
-      </p>
-    </div>
-  )
-}
-```
-
-4. To use Emotion's [styled components](https://emotion.sh/docs/styled), import the package and define them using the `styled` function.
-
-```jsx:title=src/pages/emotion-sample.js
-import React from "react"
-import styled from "@emotion/styled"
-
-const Content = styled.div`
-  text-align: center;
-  margin-top: 10px;
-  p {
-    font-weight: bold;
-  }
-`
-
-export default function EmotionSample() {
-  return (
-    <Content>
-      <p>This page is using Emotion.</p>
-    </Content>
-  )
-}
-```
-
-### Additional resources
-
-- [Using Emotion in Gatsby](/docs/how-to/styling/emotion/)
-- [Emotion website](https://emotion.sh)
-- [Getting started with Emotion and Gatsby](https://egghead.io/lessons/gatsby-getting-started-with-emotion-and-gatsby)
-
-## Using Google Fonts
-
-Hosting your own [Google Fonts](https://fonts.google.com/) locally within a project means they won't have to be fetched over the network when your site loads, increasing your site's speed index by up to ~300 milliseconds on desktop and 1+ seconds on 3G. It's also recommended to limit custom font usage to only the essential for performance.
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start)
-- The [Gatsby CLI](/docs/reference/gatsby-cli/) installed
-- A chosen font package from [Fontsource](https://github.com/fontsource/fontsource)
-
-### Directions
-
-This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).
-
-1. Run `npm install @fontsource/open-sans` to download the necessary package files.
-
-2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.
-
-```jsx:title=src/components/layout.js
-import "@fontsource/open-sans" // Defaults to weight 400.
-```
-
-If you wish to select a particular weight or style, you may specify it by changing the import path.
-
-```jsx:title=src/components/layout.js
-import "@fontsource/open-sans/500.css" // Weight 500.
-import "@fontsource/open-sans/900-italic.css" // Loads the italic variant.
-```
-
-**Note**: The range of supported weights and styles a font may support is shown in each package's README file.
-
-3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
-
-```css:title=src/components/layout.css
-body {
-  font-family: "Open Sans";
-}
-```
-
-### Additional resources
-
-- [Fontsource repo on GitHub](https://github.com/fontsource/fontsource)
-- [Typography.js](/docs/using-typography-js/) - Another option for using Google fonts on a Gatsby site
-
-## Using Font Awesome
-
-Using [Font Awesome](https://fontawesome.com/) gives you access to thousands of icons for use on your site. Since Gatsby sites are React sites, it's recommended to use the [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) SVG library.
-
-### Prerequisites
-
-- The [Gatsby CLI](/docs/reference/gatsby-cli/) installed
-- A [Gatsby site](/docs/quick-start)
-
-### Directions
-
-1. Install the `react-fontawesome` dependencies.
-
-```shell
-npm install @fortawesome/fontawesome-svg-core  @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome
-```
-
-> Note that there are multiple icon libraries within `react-fontawesome`. You may also be interested in `free-regular-svg-icons` and `free-solid-svg-icons` which you would install the same way.
-
-2. Import the `FontAwesomeIcon` component and the icon you want to use. Then use the icon as a component directly in your JSX files:
-
-```jsx:title=index.js
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faReact } from "@fortawesome/free-brands-svg-icons"
-
-const IndexPage = () => (
-  <Layout>
-    <FontAwesomeIcon icon={faReact} /> //highlight-line
-  </Layout>
-)
-
-export default IndexPage
-```
-
-> This example imports a single, specific icon and uses it for improved performance. As an alternative, you can [import the icons and build a library](https://github.com/FortAwesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently).
-
-### Additional resources
-
-- [Font Awesome](https://fontawesome.com/)
-- [react-fontawesome](https://github.com/FortAwesome/react-fontawesome)
diff --git a/docs/docs/recipes/transforming-data.md b/docs/docs/recipes/transforming-data.md
deleted file mode 100644
index 37021840c2f7e..0000000000000
--- a/docs/docs/recipes/transforming-data.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: "Recipes: Transforming Data"
-tableOfContentsDepth: 1
----
-
-Transforming data in Gatsby is plugin-driven. Transformer plugins take data fetched using source plugins, and process it into something more usable (e.g. JSON into JavaScript objects, and more).
-
-## Transforming Markdown into HTML
-
-The `gatsby-transformer-remark` plugin can transform Markdown files to HTML.
-
-### Prerequisites
-
-- A Gatsby site with `gatsby-config.js` and an `index.js` page
-- A Markdown file saved in your Gatsby site `src` directory
-- A source plugin installed, such as `gatsby-source-filesystem`
-- The `gatsby-transformer-remark` plugin installed
-
-### Directions
-
-1. Add the transformer plugin in your `gatsby-config.js`:
-
-```js:title=gatsby-config.js
-plugins: [
-  // not shown: gatsby-source-filesystem for creating nodes to transform
-  `gatsby-transformer-remark`
-],
-```
-
-2. Add a GraphQL query to the `index.js` file of your Gatsby site to fetch `MarkdownRemark` nodes:
-
-```jsx:title=src/pages/index.js
-export const query = graphql`
-  query {
-    allMarkdownRemark {
-      totalCount
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-            date(formatString: "DD MMMM, YYYY")
-          }
-          excerpt
-        }
-      }
-    }
-  }
-`
-```
-
-3. Restart the development server and open GraphiQL at `http://localhost:8000/___graphql`. Explore the fields available on the `MarkdownRemark` node.
-
-### Additional resources
-
-- [Tutorial on transforming Markdown to HTML](/docs/tutorial/part-6/#transformer-plugins) using `gatsby-transformer-remark`
-- Browse available transformer plugins in the [Gatsby plugin library](/plugins/?=transformer)
-
-## Transforming images into grayscale using GraphQL
-
-### Prerequisites
-
-- A [Gatsby site](/docs/quick-start) with a `gatsby-config.js` file and an `index.js` page
-- The `gatsby-image`, `gatsby-transformer-sharp`, and `gatsby-plugin-sharp` packages installed
-- A source plugin installed, such as `gatsby-source-filesystem`
-- An image (`.jpg`, `.png`, `.gif`, `.svg`, etc.) in the `src/images` folder
-
-### Directions
-
-1. Edit your `gatsby-config.js` file to source images and configure plugins for Gatsby's GraphQL data layer. A common approach is to source them from an images directory using the `gatsby-source-filesystem` plugin:
-
-```javascript:title=gatsby-config.js
-
- plugins: [
-   {
-     resolve: `gatsby-source-filesystem`,
-     options: {
-       name: `images`,
-       path: `${__dirname}/src/images`,
-     },
-   },
-   `gatsby-transformer-sharp`,
-   `gatsby-plugin-sharp`,
- ],
-```
-
-2. Query your image using GraphQL and apply a grayscale transformation to the image inline. The `relativePath` should be relative to the path you configured in `gatsby-source-filesystem`.
-
-```graphql
-  query {
-     file(relativePath: { eq: "corgi.jpg" }) {
-       childImageSharp {
-         // highlight-next-line
-         fluid(grayscale: true) {
-           ...GatsbyImageSharpFluid
-         }
-       }
-     }
-   }
-```
-
-Note: You can find these and other parameters in your GraphQL playground located at `http://localhost:8000/__graphql`
-
-3. Next import the `Img` component from "gatsby-image". You'll use this inside your JSX to display the image.
-
-```jsx:title=src/pages/index.js
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Layout from "../components/layout"
-// highlight-next-line
-import Img from "gatsby-image"
-
-export default function Home() {
-  const data = useStaticQuery(graphql`
-    query {
-     file(relativePath: { eq: "corgi.jpg" }) {
-       childImageSharp {
-         // highlight-next-line
-         fluid(grayscale: true) {
-           ...GatsbyImageSharpFluid
-         }
-       }
-     }
-   }
-  `)
-  return (
-    <Layout>
-      <h1>I love my corgi!</h1>
-      // highlight-start
-      <Img
-        fluid={data.file.childImageSharp.fluid}
-        alt="A corgi smiling happily"
-      />
-      // highlight-end
-    </Layout>
-  )
-}
-```
-
-4. Run `gatsby develop` to start the development server.
-
-5. View your image in the browser: `http://localhost:8000/`
-
-### Additional resources
-
-- [API docs, including grayscale and duotone query tips](/docs/reference/built-in-components/gatsby-image/#shared-query-parameters)
-- [Gatsby Image docs](/docs/reference/built-in-components/gatsby-image/)
-- [Image processing examples](https://github.com/gatsbyjs/gatsby/tree/master/examples/image-processing)
diff --git a/docs/docs/recipes/working-with-images.md b/docs/docs/recipes/working-with-images.md
deleted file mode 100644
index c6133651d1502..0000000000000
--- a/docs/docs/recipes/working-with-images.md
+++ /dev/null
@@ -1,402 +0,0 @@
----
-title: "Recipes: Working with Images"
-tableOfContentsDepth: 1
----
-
-Access images as static resources, or automate the process of optimizing them through powerful plugins.
-
-## Import an image into a component with webpack
-
-Images can be imported right into a JavaScript module with webpack. This process automatically minifies and copies the image to your site's `public` folder, providing a dynamic image URL for you to pass to an HTML `<img>` element like a regular file path.
-
-<EggheadEmbed
-  lessonLink="https://egghead.io/lessons/gatsby-import-a-local-image-into-a-gatsby-component-with-webpack"
-  lessonTitle="Import a Local Image into a Gatsby Component with webpack"
-/>
-
-### Prerequisites
-
-- A [Gatsby Site](/docs/quick-start) with a `.js` file exporting a React component
-- an image (`.jpg`, `.png`, `.gif`, `.svg`, etc.) in the `src` folder
-
-### Directions
-
-1. Import your file from its path in the `src` folder:
-
-```jsx:title=src/pages/index.js
-import React from "react"
-// Tell webpack this JS file uses this image
-import FiestaImg from "../assets/fiesta.jpg" // highlight-line
-```
-
-2. In `index.js`, add an `<img>` tag with the `src` as the name of the import you used from webpack (in this case `FiestaImg`), and add an `alt` attribute [describing the image](https://webaim.org/techniques/alttext/):
-
-```jsx:title=src/pages/index.js
-import React from "react"
-import FiestaImg from "../assets/fiesta.jpg"
-
-export default function Home() {
-  return (
-    // The import result is the URL of your image
-    <img src={FiestaImg} alt="A dog smiling in a party hat" /> // highlight-line
-  )
-}
-```
-
-3. Run `gatsby develop` to start the development server.
-4. View your image in the browser: `http://localhost:8000/`
-
-### Additional resources
-
-- [Example repo importing an image with webpack](https://github.com/gatsbyjs/gatsby/tree/master/examples/recipe-webpack-image)
-- [More on all image techniques in Gatsby](/docs/images-and-files/)
-
-## Reference an image from the `static` folder
-
-As an alternative to importing assets with webpack, the `static` folder allows access to content that gets automatically copied into the `public` folder when built.
-
-This is an **escape route** for [specific use cases](/docs/how-to/images-and-media/static-folder/#when-to-use-the-static-folder), and other methods like [importing with webpack](#import-an-image-into-a-component-with-webpack) are recommended to leverage optimizations made by Gatsby.
-
-<EggheadEmbed
-  lessonLink="https://egghead.io/lessons/gatsby-use-a-local-image-from-the-static-folder-in-a-gatsby-component"
-  lessonTitle="Use a local image from the static folder in a Gatsby component"
-/>
-
-### Prerequisites
-
-- A [Gatsby Site](/docs/quick-start) with a `.js` file exporting a React component
-- An image (`.jpg`, `.png`, `.gif`, `.svg`, etc.) in the `static` folder
-
-### Directions
-
-1. Ensure that the image is in your `static` folder at the root of the project. Your project structure might look something like this:
-
-```text
-├── gatsby-config.js
-├── src
-│   └── pages
-│       └── index.js
-├── static
-│       └── fiesta.jpg
-```
-
-2. In `index.js`, add an `<img>` tag with the `src` as the relative path of the file from the `static` folder, and add an `alt` attribute [describing the image](https://webaim.org/techniques/alttext/):
-
-```jsx:title=src/pages/index.js
-import React from "react"
-
-export default function Home() {
-  return (
-    <img src={`fiesta.jpg`} alt="A dog smiling in a party hat" /> // highlight-line
-  )
-}
-```
-
-3. Run `gatsby develop` to start the development server.
-4. View your image in the browser: `http://localhost:8000/`
-
-### Additional resources
-
-- [Example repo referencing an image from the static folder](https://github.com/gatsbyjs/gatsby/tree/master/examples/recipe-static-image)
-- [Using the Static Folder](/docs/how-to/images-and-media/static-folder/)
-- [More on all image techniques in Gatsby](/docs/images-and-files/)
-
-## Optimizing and querying local images with gatsby-image
-
-The `gatsby-image` plugin can relieve much of the pain associated with optimizing images in your site.
-
-Gatsby will generate optimized resources which can be queried with GraphQL and passed into Gatsby's image component. This takes care of the heavy lifting including creating several image sizes and loading them at the right time.
-
-### Prerequisites
-
-- The `gatsby-image`, `gatsby-transformer-sharp`, and `gatsby-plugin-sharp` packages installed and added to the plugins array in `gatsby-config`
-- [Images sourced](/plugins/gatsby-image/#install) in your `gatsby-config` using a plugin like `gatsby-source-filesystem`
-
-### Directions
-
-1. First, import `Img` from `gatsby-image`, as well as `graphql` and `useStaticQuery` from `gatsby`
-
-```jsx
-import { useStaticQuery, graphql } from "gatsby" // to query for image data
-import Img from "gatsby-image" // to take image data and render it
-```
-
-2. Write a query to get image data, and pass the data into the `<Img />` component:
-
-Choose any of the following options or a combination of them.
-
-a. a single image queried by its file [path](/docs/content-and-data/) (Example: `images/corgi.jpg`)
-
-```jsx
-const data = useStaticQuery(graphql`
-  query {
-    file(relativePath: { eq: "corgi.jpg" }) { // highlight-line
-      childImageSharp {
-        fluid {
-          base64
-          aspectRatio
-          src
-          srcSet
-          sizes
-        }
-      }
-    }
-  }
-`)
-
-return (
-  <Img fluid={data.file.childImageSharp.fluid} alt="A corgi smiling happily" />
-)
-```
-
-b. using a [GraphQL fragment](/docs/using-fragments/), to query for the necessary fields more tersely
-
-```jsx
-const data = useStaticQuery(graphql`
-  query {
-    file(relativePath: { eq: "corgi.jpg" }) {
-      childImageSharp {
-        fluid {
-          ...GatsbyImageSharpFluid // highlight-line
-        }
-      }
-    }
-  }
-`)
-
-return (
-  <Img fluid={data.file.childImageSharp.fluid} alt="A corgi smiling happily" />
-)
-```
-
-c. several images from a directory (Example: `images/dogs`) [filtered](/docs/graphql-reference/#filter) by the `extension` and `relativeDirectory` fields, and then mapped into `Img` components
-
-```jsx
-const data = useStaticQuery(graphql`
-  query {
-    allFile(
-      // highlight-start
-      filter: {
-        extension: { regex: "/(jpg)|(png)|(jpeg)/" }
-        relativeDirectory: { eq: "dogs" }
-      }
-      // highlight-end
-    ) {
-      edges {
-        node {
-          base
-          childImageSharp {
-            fluid {
-              ...GatsbyImageSharpFluid
-            }
-          }
-        }
-      }
-    }
-  }
-`)
-
-return (
-  <div>
-    // highlight-start
-    {data.allFile.edges.map(image => (
-      <Img
-        fluid={image.node.childImageSharp.fluid}
-        alt={image.node.base.split(".")[0]} // only use section of the file extension with the filename
-      />
-    ))}
-    // highlight-end
-  </div>
-)
-```
-
-**Note**: This method can make it difficult to match images with `alt` text for accessibility. This example uses images with `alt` text included in the filename, like `dog in a party hat.jpg`.
-
-d. an image of a fixed size using the `fixed` field instead of `fluid`
-
-```jsx
-const data = useStaticQuery(graphql`
-  query {
-    file(relativePath: { eq: "corgi.jpg" }) {
-      childImageSharp {
-        fixed(width: 250, height: 250) { // highlight-line
-          ...GatsbyImageSharpFixed
-        }
-      }
-    }
-  }
-`)
-return (
-  <Img fixed={data.file.childImageSharp.fixed} alt="A corgi smiling happily" />
-)
-```
-
-e. an image of a fixed size with a `maxWidth`
-
-```jsx
-const data = useStaticQuery(graphql`
-  query {
-    file(relativePath: { eq: "corgi.jpg" }) {
-      childImageSharp {
-        fixed(maxWidth: 250) { // highlight-line
-          ...GatsbyImageSharpFixed
-        }
-      }
-    }
-  }
-`)
-return (
-  <Img fixed={data.file.childImageSharp.fixed} alt="A corgi smiling happily" /> // highlight-line
-)
-```
-
-f. an image filling a fluid container with a max width (in pixels) and a higher quality (the default value is 50 i.e. 50%)
-
-```jsx
-const data = useStaticQuery(graphql`
-  query {
-    file(relativePath: { eq: "corgi.jpg" }) {
-      childImageSharp {
-        fluid(maxWidth: 800, quality: 75) { // highlight-line
-          ...GatsbyImageSharpFluid
-        }
-      }
-    }
-  }
-`)
-
-return (
-  <Img fluid={data.file.childImageSharp.fluid} alt="A corgi smiling happily" />
-)
-```
-
-3. (Optional) Add inline styles to the `<Img />` like you would to other components
-
-```jsx
-<Img
-  fluid={data.file.childImageSharp.fluid}
-  alt="A corgi smiling happily"
-  style={{ border: "2px solid rebeccapurple", borderRadius: 5, height: 250 }} // highlight-line
-/>
-```
-
-4. (Optional) Force an image into a desired aspect ratio by overriding the `aspectRatio` field returned by the GraphQL query before it is passed into the `<Img />` component
-
-```jsx
-<Img
-  fluid={{
-    ...data.file.childImageSharp.fluid,
-    aspectRatio: 1.6, // 1280 / 800 = 1.6
-  }}
-  alt="A corgi smiling happily"
-/>
-```
-
-5. Run `gatsby develop`, to generate images from files in the filesystem (if not done already) and cache them
-
-### Additional resources
-
-- [Example repository illustrating these examples](https://github.com/gatsbyjs/gatsby/tree/master/examples/recipes-gatsby-image)
-- [Gatsby Image API](/docs/reference/built-in-components/gatsby-image/)
-- [Using Gatsby Image](/docs/how-to/images-and-media/using-gatsby-image)
-- [More on working with images in Gatsby](/docs/working-with-images/)
-- [Free egghead.io videos explaining these steps](https://egghead.io/playlists/using-gatsby-image-with-gatsby-ea85129e)
-
-## Optimizing and querying images in post frontmatter with gatsby-image
-
-For use cases like a featured image in a blog post, you can _still_ use `gatsby-image`. The `Img` component needs processed image data, which can come from a local (or remote) file, including from a URL in the frontmatter of a `.md` or `.mdx` file.
-
-To inline images in markdown (using the `![]()` syntax), consider using a plugin like [`gatsby-remark-images`](/plugins/gatsby-remark-images/)
-
-### Prerequisites
-
-- The `gatsby-image`, `gatsby-transformer-sharp`, and `gatsby-plugin-sharp` packages installed and added to the plugins array in `gatsby-config`
-- [Images sourced](/plugins/gatsby-image/#install) in your `gatsby-config` using a plugin like `gatsby-source-filesystem`
-- Markdown files sourced in your `gatsby-config` with image URLs in frontmatter
-- [Pages created](/docs/creating-and-modifying-pages/) from Markdown using [`createPages`](/docs/reference/config-files/gatsby-node/#createPages)
-
-### Directions
-
-1. Verify that the Markdown file has an image URL with a valid path to an image file in your project
-
-```mdx:title=post.mdx
----
-title: My First Post
-featuredImage: ./corgi.png // highlight-line
----
-
-Post content...
-```
-
-2. Verify that a unique identifier (a slug in this example) is passed in context when `createPages` is called in `gatsby-node.js`, which will later be passed into a GraphQL query in the Layout component
-
-```js:title=gatsby-node.js
-exports.createPages = async ({ graphql, actions }) => {
-  const { createPage } = actions
-
-  // query for all markdown
-
-  result.data.allMdx.edges.forEach(({ node }) => {
-    createPage({
-      path: node.fields.slug,
-      component: path.resolve(`./src/components/markdown-layout.js`),
-      // highlight-start
-      context: {
-        slug: node.fields.slug,
-      },
-      // highlight-end
-    })
-  })
-}
-```
-
-3. Now, import `Img` from `gatsby-image`, and `graphql` from `gatsby` into the template component, write a [pageQuery](/docs/how-to/querying-data/page-query/) to get image data based on the passed in `slug` and pass that data to the `<Img />` component:
-
-```jsx:title=markdown-layout.jsx
-import React from "react"
-import { graphql } from "gatsby" // highlight-line
-import Img from "gatsby-image" // highlight-line
-
-export default function Layout({ children, data }) {
-  return (
-    <main>
-      // highlight-start
-      <Img
-        fluid={data.markdown.frontmatter.image.childImageSharp.fluid}
-        alt="A corgi smiling happily"
-      />
-      // highlight-end
-      {children}
-    </main>
-  )
-}
-
-// highlight-start
-export const pageQuery = graphql`
-  query PostQuery($slug: String) {
-    markdown: mdx(fields: { slug: { eq: $slug } }) {
-      id
-      frontmatter {
-        image {
-          childImageSharp {
-            fluid {
-              ...GatsbyImageSharpFluid
-            }
-          }
-        }
-      }
-    }
-  }
-`
-// highlight-end
-```
-
-4. Run `gatsby develop`, which will generate images for files sourced in the filesystem
-
-### Additional resources
-
-- [Example repository using this recipe](https://github.com/gatsbyjs/gatsby/tree/master/examples/recipes-gatsby-image)
-- [Featured images with frontmatter](/docs/working-with-images-in-markdown/#featured-images-with-frontmatter-metadata)
-- [Gatsby Image API](/docs/reference/built-in-components/gatsby-image/)
-- [Using Gatsby Image](/docs/how-to/images-and-media/using-gatsby-image)
-- [More on working with images in Gatsby](/docs/working-with-images/)
diff --git a/examples/no-trailing-slashes/README.md b/examples/no-trailing-slashes/README.md
deleted file mode 100644
index 4adb24701c8b5..0000000000000
--- a/examples/no-trailing-slashes/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# No trailing slashes
-
-Gatsby example site that shows how to remove trailing slashes from urls.
diff --git a/examples/no-trailing-slashes/gatsby-config.js b/examples/no-trailing-slashes/gatsby-config.js
deleted file mode 100644
index 722667ce958a0..0000000000000
--- a/examples/no-trailing-slashes/gatsby-config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = {
-  siteMetadata: {
-    title: `Client only paths`,
-  },
-  plugins: [
-    `gatsby-plugin-offline`,
-    {
-      resolve: `gatsby-plugin-google-analytics`,
-      options: {
-        trackingId: `UA-93349937-2`,
-      },
-    },
-  ],
-}
diff --git a/examples/no-trailing-slashes/gatsby-node.js b/examples/no-trailing-slashes/gatsby-node.js
deleted file mode 100644
index 4fa27588ac576..0000000000000
--- a/examples/no-trailing-slashes/gatsby-node.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const Promise = require(`bluebird`)
-
-exports.onCreatePage = ({ page, actions }) => {
-  const { createPage, deletePage } = actions
-
-  return new Promise((resolve, reject) => {
-    // Remove trailing slash
-    const newPage = Object.assign({}, page, {
-      path: page.path === `/` ? page.path : page.path.replace(/\/$/, ``),
-    })
-    if (newPage.path !== page.path) {
-      // Remove the old page
-      deletePage(page)
-      // Add the new page
-      createPage(newPage)
-    }
-
-    resolve()
-  })
-}
diff --git a/examples/no-trailing-slashes/package.json b/examples/no-trailing-slashes/package.json
deleted file mode 100644
index 51245d4edd019..0000000000000
--- a/examples/no-trailing-slashes/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "gatsby-example-removing-trailing-slashes",
-  "private": true,
-  "description": "Gatsby example site that shows how to remove trailing slashes from urls",
-  "version": "1.0.0",
-  "author": "Scotty Eckenthal <scott.eckenthal@gmail.com>",
-  "dependencies": {
-    "gatsby": "next",
-    "gatsby-plugin-google-analytics": "next",
-    "gatsby-plugin-offline": "next",
-    "lodash": "^4.17.20",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "slash": "^1.0.0"
-  },
-  "keywords": [
-    "gatsby"
-  ],
-  "license": "MIT",
-  "main": "n/a",
-  "scripts": {
-    "develop": "gatsby develop",
-    "build": "gatsby build",
-    "start": "npm run develop"
-  }
-}
\ No newline at end of file
diff --git a/examples/no-trailing-slashes/src/components/layout.js b/examples/no-trailing-slashes/src/components/layout.js
deleted file mode 100644
index 6d54e8057c5bb..0000000000000
--- a/examples/no-trailing-slashes/src/components/layout.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-class DefaultLayout extends React.Component {
-  render() {
-    return (
-      <div>
-        <Link to="/">
-          <h3>Example removing trailing slashes</h3>
-        </Link>
-        <ul>
-          <li>
-            <Link to="/a">a</Link>
-          </li>
-          <li>
-            <Link to="/b">b</Link>
-          </li>
-          <li>
-            <Link to="/c">c</Link>
-          </li>
-        </ul>
-        {this.props.children}
-      </div>
-    )
-  }
-}
-
-export default DefaultLayout
diff --git a/examples/no-trailing-slashes/src/pages/a.js b/examples/no-trailing-slashes/src/pages/a.js
deleted file mode 100644
index 9967eedf4c54c..0000000000000
--- a/examples/no-trailing-slashes/src/pages/a.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react"
-import Layout from "../components/layout"
-
-const A = () => (
-  <Layout>
-    <p>A</p>
-  </Layout>
-)
-
-export default A
diff --git a/examples/no-trailing-slashes/src/pages/b.js b/examples/no-trailing-slashes/src/pages/b.js
deleted file mode 100644
index 6d07016d0f645..0000000000000
--- a/examples/no-trailing-slashes/src/pages/b.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react"
-import Layout from "../components/layout"
-
-const B = () => (
-  <Layout>
-    <p>B</p>
-  </Layout>
-)
-
-export default B
diff --git a/examples/no-trailing-slashes/src/pages/c.js b/examples/no-trailing-slashes/src/pages/c.js
deleted file mode 100644
index a54704ef0e9c6..0000000000000
--- a/examples/no-trailing-slashes/src/pages/c.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react"
-import Layout from "../components/layout"
-
-const C = () => (
-  <Layout>
-    <p>C</p>
-  </Layout>
-)
-
-export default C
diff --git a/examples/no-trailing-slashes/src/pages/index.js b/examples/no-trailing-slashes/src/pages/index.js
deleted file mode 100644
index 560898bc64fbe..0000000000000
--- a/examples/no-trailing-slashes/src/pages/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react"
-import Layout from "../components/layout"
-
-const Home = () => (
-  <Layout>
-    <p>Home</p>
-  </Layout>
-)
-
-export default Home
diff --git a/examples/recipe-linking-between-pages/README.md b/examples/recipe-linking-between-pages/README.md
deleted file mode 100644
index cdfae250c2603..0000000000000
--- a/examples/recipe-linking-between-pages/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Linking Between Pages Recipe
-
-This example walks through linking between pages in a Gatsby site using Gatsby Link.
-
-Docs recipe: https://www.gatsbyjs.com/docs/recipes/pages-layouts#linking-between-pages
-
-## Install example
-
-Set up the project by installing dependencies in the directory:
-
-```
-cd recipe-linking-between-pages
-npm install
-```
-
-## Start the project
-
-```
-gatsby develop
-```
-
-## Run tests
-
-Run the Cypress integration tests to make sure everything still works.
-
-```
-npm test
-```
-
-This will start the Cypress app to inspect tests in more detail. You can also run them in a single-run for Continuous Integration (e.g. on a GitHub PR):
-
-```
-npm run test:ci
-```
diff --git a/examples/recipe-linking-between-pages/cypress.json b/examples/recipe-linking-between-pages/cypress.json
deleted file mode 100644
index a21a39e450910..0000000000000
--- a/examples/recipe-linking-between-pages/cypress.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "baseUrl": "http://localhost:8888/",
-  "fileServerFolder": "./src"
-}
diff --git a/examples/recipe-linking-between-pages/cypress/fixtures/example.json b/examples/recipe-linking-between-pages/cypress/fixtures/example.json
deleted file mode 100644
index 02e4254378e97..0000000000000
--- a/examples/recipe-linking-between-pages/cypress/fixtures/example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
diff --git a/examples/recipe-linking-between-pages/cypress/integration/linking.spec.js b/examples/recipe-linking-between-pages/cypress/integration/linking.spec.js
deleted file mode 100644
index 4cff87f61805c..0000000000000
--- a/examples/recipe-linking-between-pages/cypress/integration/linking.spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-
-context("Linking between pages", () => {
-  it("should navigate to Contact after clicking a Gatsby link", () => {
-    cy.visit("http://localhost:8888")
-
-    cy.get("a").click()
-
-    cy.location("pathname").should("eq", "/contact/")
-
-    cy.get("main").should("include.text", "Contact")
-  })
-  it("should link back to the homepage from Contact", () => {
-    cy.visit("http://localhost:8888/contact")
-
-    cy.get("a").click()
-
-    cy.location("pathname").should("eq", "/")
-
-    cy.get("main").should("include.text", "What a world.")
-  })
-})
diff --git a/examples/recipe-linking-between-pages/cypress/plugins/index.js b/examples/recipe-linking-between-pages/cypress/plugins/index.js
deleted file mode 100644
index aa9918d215305..0000000000000
--- a/examples/recipe-linking-between-pages/cypress/plugins/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}
diff --git a/examples/recipe-linking-between-pages/cypress/support/commands.js b/examples/recipe-linking-between-pages/cypress/support/commands.js
deleted file mode 100644
index ca4d256f3eb15..0000000000000
--- a/examples/recipe-linking-between-pages/cypress/support/commands.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/examples/recipe-linking-between-pages/cypress/support/index.js b/examples/recipe-linking-between-pages/cypress/support/index.js
deleted file mode 100644
index a80764cb2cb70..0000000000000
--- a/examples/recipe-linking-between-pages/cypress/support/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import "./commands"
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
diff --git a/examples/recipe-linking-between-pages/gatsby-config.js b/examples/recipe-linking-between-pages/gatsby-config.js
deleted file mode 100644
index 1e3518c7af78b..0000000000000
--- a/examples/recipe-linking-between-pages/gatsby-config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  siteMetadata: {
-    title: `Linking Between Pages Recipe`,
-    description: `Example using Gatsby Link`,
-    author: `@gatsbyjs`,
-  },
-}
diff --git a/examples/recipe-linking-between-pages/package.json b/examples/recipe-linking-between-pages/package.json
deleted file mode 100644
index 9576c816b2ea1..0000000000000
--- a/examples/recipe-linking-between-pages/package.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "recipe-links-between-pages",
-  "private": true,
-  "description": "A Gatsby docs recipe example on linking between pages",
-  "version": "0.1.0",
-  "author": "@gatsbyjs",
-  "dependencies": {
-    "gatsby": "next",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-helmet": "^5.2.1"
-  },
-  "devDependencies": {
-    "cypress": "^4.12.1",
-    "gatsby-cypress": "^0.4.10",
-    "prettier": "2.1.1",
-    "start-server-and-test": "^1.11.3"
-  },
-  "keywords": [
-    "gatsby"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
-    "test-develop": "gatsby develop --port 8888",
-    "test": "CYPRESS_SUPPORT=y start-server-and-test test-develop http://localhost:8888 cy:open",
-    "test:ci": "start-server-and-test test-develop http://localhost:8888 cy:run"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
-  }
-}
diff --git a/examples/recipe-linking-between-pages/src/pages/contact.js b/examples/recipe-linking-between-pages/src/pages/contact.js
deleted file mode 100644
index 5c7615f69f19d..0000000000000
--- a/examples/recipe-linking-between-pages/src/pages/contact.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-const ContactPage = () => (
-  <main>
-    <h1>Contact</h1>
-    <p>
-      <Link to="/">Go home</Link>
-    </p>
-  </main>
-)
-
-export default ContactPage
diff --git a/examples/recipe-linking-between-pages/src/pages/index.js b/examples/recipe-linking-between-pages/src/pages/index.js
deleted file mode 100644
index aadff0d468c04..0000000000000
--- a/examples/recipe-linking-between-pages/src/pages/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-const IndexPage = () => (
-  <main>
-    <h1>What a world.</h1>
-    <p>
-      <Link to="/contact/">Contact</Link>
-    </p>
-  </main>
-)
-
-export default IndexPage
diff --git a/examples/recipe-sourcing-contentful/README.md b/examples/recipe-sourcing-contentful/README.md
deleted file mode 100644
index e6b30fe89ea58..0000000000000
--- a/examples/recipe-sourcing-contentful/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Sourcing data from Contentful recipe example
-
-This repo is an example Gatsby site that shows how to source data from Contentful. To get started, [follow the Gatsby recipe to create a sample Contentful space](https://www.gatsbyjs.com/docs/recipes/sourcing-data#sourcing-data-from-contentful).
diff --git a/examples/recipe-sourcing-contentful/gatsby-config.js b/examples/recipe-sourcing-contentful/gatsby-config.js
deleted file mode 100644
index 0ffef492c8cf8..0000000000000
--- a/examples/recipe-sourcing-contentful/gatsby-config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = {
-  siteMetadata: {
-    title: `Gatsby Contentful Recipe`,
-    description: `Example Gatsby site sourcing data from Contentful.`,
-    author: `@gatsbyjs`,
-  },
-  plugins: [
-    {
-      resolve: `gatsby-source-contentful`,
-      options: {
-        spaceId: `[space ID]`, // or process.env.CONTENTFUL_SPACE_ID
-        accessToken: `[access token]`, // or process.env.CONTENTFUL_TOKEN
-      },
-    },
-    `gatsby-transformer-remark`,
-  ],
-}
diff --git a/examples/recipe-sourcing-contentful/gatsby-node.js b/examples/recipe-sourcing-contentful/gatsby-node.js
deleted file mode 100644
index 7d11e1319e3bb..0000000000000
--- a/examples/recipe-sourcing-contentful/gatsby-node.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const path = require(`path`)
-
-exports.createPages = async ({ graphql, actions }) => {
-  const { createPage } = actions
-  const result = await graphql(`
-    query {
-      allContentfulBlogPost {
-        edges {
-          node {
-            slug
-            title
-            childContentfulBlogPostBodyTextNode {
-              childMarkdownRemark {
-                html
-              }
-            }
-          }
-        }
-      }
-    }
-  `)
-
-  result.data.allContentfulBlogPost.edges.forEach(({ node }) => {
-    createPage({
-      path: `blog/${node.slug}`,
-      component: path.resolve(`./src/templates/blog-post.js`),
-      context: node,
-    })
-  })
-}
diff --git a/examples/recipe-sourcing-contentful/package.json b/examples/recipe-sourcing-contentful/package.json
deleted file mode 100644
index 587b0ee6f5714..0000000000000
--- a/examples/recipe-sourcing-contentful/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "gatsby-recipe-sourcing-contentful",
-  "private": true,
-  "description": "A simple starter to get up and developing quickly with Gatsby",
-  "version": "0.1.0",
-  "author": "@gatsbyjs",
-  "dependencies": {
-    "gatsby": "next",
-    "gatsby-image": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-source-contentful": "next",
-    "gatsby-transformer-remark": "next",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
-  },
-  "devDependencies": {
-    "prettier": "2.1.1"
-  },
-  "keywords": [
-    "gatsby"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
-  }
-}
diff --git a/examples/recipe-sourcing-contentful/src/components/header.js b/examples/recipe-sourcing-contentful/src/components/header.js
deleted file mode 100644
index 8990b7e31bb7a..0000000000000
--- a/examples/recipe-sourcing-contentful/src/components/header.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
-import React from "react"
-
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `rebeccapurple`,
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
-    </div>
-  </header>
-)
-
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
-
-export default Header
diff --git a/examples/recipe-sourcing-contentful/src/components/layout.css b/examples/recipe-sourcing-contentful/src/components/layout.css
deleted file mode 100644
index b6f63320fb8ae..0000000000000
--- a/examples/recipe-sourcing-contentful/src/components/layout.css
+++ /dev/null
@@ -1,622 +0,0 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}
diff --git a/examples/recipe-sourcing-contentful/src/components/layout.js b/examples/recipe-sourcing-contentful/src/components/layout.js
deleted file mode 100644
index 5cded509ac498..0000000000000
--- a/examples/recipe-sourcing-contentful/src/components/layout.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import { useStaticQuery, graphql } from "gatsby"
-
-import Header from "./header"
-import "./layout.css"
-
-const Layout = ({ children }) => {
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-
-  return (
-    <>
-      <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0px 1.0875rem 1.45rem`,
-          paddingTop: 0,
-        }}
-      >
-        <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.com">Gatsby</a>
-        </footer>
-      </div>
-    </>
-  )
-}
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
-export default Layout
diff --git a/examples/recipe-sourcing-contentful/src/pages/404.js b/examples/recipe-sourcing-contentful/src/pages/404.js
deleted file mode 100644
index 70bc752374a94..0000000000000
--- a/examples/recipe-sourcing-contentful/src/pages/404.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react"
-
-import Layout from "../components/layout"
-
-const NotFoundPage = () => (
-  <Layout>
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
-)
-
-export default NotFoundPage
diff --git a/examples/recipe-sourcing-contentful/src/pages/index.js b/examples/recipe-sourcing-contentful/src/pages/index.js
deleted file mode 100644
index c2c437619e8c8..0000000000000
--- a/examples/recipe-sourcing-contentful/src/pages/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react"
-import { graphql, Link } from "gatsby"
-import Layout from "../components/layout"
-
-const IndexPage = ({ data }) => (
-  <Layout>
-    <h1>Contentful data source example</h1>
-    <ul>
-      {data.allContentfulBlogPost.edges.map(({ node }, index) => (
-        <li key={index}>
-          <Link to={`/blog/${node.slug}`}>{node.title}</Link>
-        </li>
-      ))}
-    </ul>
-  </Layout>
-)
-
-export default IndexPage
-
-export const query = graphql`
-  {
-    allContentfulBlogPost(sort: { fields: [updatedAt] }) {
-      edges {
-        node {
-          title
-          slug
-        }
-      }
-    }
-  }
-`
diff --git a/examples/recipe-sourcing-contentful/src/templates/blog-post.js b/examples/recipe-sourcing-contentful/src/templates/blog-post.js
deleted file mode 100644
index e3c4d5fb96791..0000000000000
--- a/examples/recipe-sourcing-contentful/src/templates/blog-post.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react"
-import Layout from "../components/layout"
-
-const BlogPostTemplate = ({ pageContext }) => (
-  <Layout>
-    <h1>{pageContext.title}</h1>
-    <div
-      dangerouslySetInnerHTML={{
-        __html:
-          pageContext.childContentfulBlogPostBodyTextNode.childMarkdownRemark
-            .html,
-      }}
-    />
-  </Layout>
-)
-
-export default BlogPostTemplate
diff --git a/examples/recipe-sourcing-markdown/gatsby-config.js b/examples/recipe-sourcing-markdown/gatsby-config.js
deleted file mode 100644
index 7c315682c86a1..0000000000000
--- a/examples/recipe-sourcing-markdown/gatsby-config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = {
-  siteMetadata: {
-    title: `sourcing markdown recipe`,
-    description: `Example sourcing markdown`,
-    author: `@gatsbyjs`,
-  },
-  plugins: [
-    `gatsby-transformer-remark`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `content`,
-        path: `${__dirname}/src/content`,
-      },
-    },
-  ],
-}
diff --git a/examples/recipe-sourcing-markdown/gatsby-node.js b/examples/recipe-sourcing-markdown/gatsby-node.js
deleted file mode 100644
index 2ddbd2096a8b2..0000000000000
--- a/examples/recipe-sourcing-markdown/gatsby-node.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const path = require(`path`)
-
-exports.createPages = async ({ actions, graphql }) => {
-  const { createPage } = actions
-
-  const result = await graphql(`
-    {
-      allMarkdownRemark {
-        edges {
-          node {
-            frontmatter {
-              path
-            }
-          }
-        }
-      }
-    }
-  `)
-  if (result.errors) {
-    console.error(result.errors)
-  }
-
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-    createPage({
-      path: node.frontmatter.path,
-      component: path.resolve(`src/templates/post.js`),
-    })
-  })
-}
diff --git a/examples/recipe-sourcing-markdown/package.json b/examples/recipe-sourcing-markdown/package.json
deleted file mode 100644
index 34ba1a6fd29d7..0000000000000
--- a/examples/recipe-sourcing-markdown/package.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "recipe-sourcing-markdown",
-  "private": true,
-  "description": "A simple starter to get up and developing quickly with Gatsby",
-  "version": "0.1.0",
-  "author": "@gatsbyjs",
-  "dependencies": {
-    "gatsby": "next",
-    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-remark": "next",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-helmet": "^5.2.1"
-  },
-  "devDependencies": {
-    "prettier": "2.1.1"
-  },
-  "keywords": [
-    "gatsby"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
-  }
-}
diff --git a/examples/recipe-sourcing-markdown/src/content/my-first-post.md b/examples/recipe-sourcing-markdown/src/content/my-first-post.md
deleted file mode 100644
index f795826b538cf..0000000000000
--- a/examples/recipe-sourcing-markdown/src/content/my-first-post.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: My First Post
-date: 2019-07-10
-path: /my-first-post
----
-
-This is my first Gatsby post written in Markdown!
diff --git a/examples/recipe-sourcing-markdown/src/pages/index.js b/examples/recipe-sourcing-markdown/src/pages/index.js
deleted file mode 100644
index 4ac96760e34db..0000000000000
--- a/examples/recipe-sourcing-markdown/src/pages/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-const IndexPage = () => (
-  <main>
-    Sourcing markdown recipe (see page at{` `}
-    <Link to="my-first-post">/my-first-post</Link>)
-  </main>
-)
-
-export default IndexPage
diff --git a/examples/recipe-sourcing-markdown/src/templates/post.js b/examples/recipe-sourcing-markdown/src/templates/post.js
deleted file mode 100644
index 253e80d9d5e50..0000000000000
--- a/examples/recipe-sourcing-markdown/src/templates/post.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react"
-import { graphql } from "gatsby"
-
-export default function Template({ data }) {
-  const { markdownRemark } = data // data.markdownRemark holds your post data
-  const { frontmatter, html } = markdownRemark
-  return (
-    <div className="blog-post">
-      <h1>{frontmatter.title}</h1>
-      <h2>{frontmatter.date}</h2>
-      <div
-        className="blog-post-content"
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    </div>
-  )
-}
-
-export const pageQuery = graphql`
-  query($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
-      html
-      frontmatter {
-        date(formatString: "MMMM DD, YYYY")
-        path
-        title
-      }
-    }
-  }
-`
diff --git a/examples/recipe-static-image/README.md b/examples/recipe-static-image/README.md
deleted file mode 100644
index 6fd09161777ac..0000000000000
--- a/examples/recipe-static-image/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Referencing an image from the static folder
-
-Example site based on the recipe in the docs on adding an image to a site from the static foldere
diff --git a/examples/recipe-static-image/gatsby-config.js b/examples/recipe-static-image/gatsby-config.js
deleted file mode 100644
index 1e05d787a4355..0000000000000
--- a/examples/recipe-static-image/gatsby-config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Configure your Gatsby site with this file.
- *
- * See: https://www.gatsbyjs.com/docs/gatsby-config/
- */
-
-module.exports = {
-  /* Your site config here */
-}
diff --git a/examples/recipe-static-image/package.json b/examples/recipe-static-image/package.json
deleted file mode 100644
index 00588441716ae..0000000000000
--- a/examples/recipe-static-image/package.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "recipe-static-image",
-  "private": true,
-  "description": "A recipe example on using Gatsby's static folder for images",
-  "version": "0.1.0",
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --write src/**/*.{js,jsx}",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
-  },
-  "dependencies": {
-    "gatsby": "next",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
-  },
-  "devDependencies": {
-    "prettier": "2.1.1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
-  }
-}
\ No newline at end of file
diff --git a/examples/recipe-static-image/src/pages/index.js b/examples/recipe-static-image/src/pages/index.js
deleted file mode 100644
index eb6db034dc732..0000000000000
--- a/examples/recipe-static-image/src/pages/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react"
-
-export default () => (
-  <img src={`fiesta.jpg`} alt="Dogs in party hats celebrating at an event" />
-)
diff --git a/examples/recipe-static-image/static/fiesta.jpg b/examples/recipe-static-image/static/fiesta.jpg
deleted file mode 100644
index c95d1b3b2e351..0000000000000
Binary files a/examples/recipe-static-image/static/fiesta.jpg and /dev/null differ
diff --git a/examples/recipe-webpack-image/README.md b/examples/recipe-webpack-image/README.md
deleted file mode 100644
index 2587d933874d8..0000000000000
--- a/examples/recipe-webpack-image/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Importing an image with webpack
-
-Example site based on the recipe in the Gatsby docs on importing an image to a site using webpack
diff --git a/examples/recipe-webpack-image/gatsby-config.js b/examples/recipe-webpack-image/gatsby-config.js
deleted file mode 100644
index 1e05d787a4355..0000000000000
--- a/examples/recipe-webpack-image/gatsby-config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Configure your Gatsby site with this file.
- *
- * See: https://www.gatsbyjs.com/docs/gatsby-config/
- */
-
-module.exports = {
-  /* Your site config here */
-}
diff --git a/examples/recipe-webpack-image/package.json b/examples/recipe-webpack-image/package.json
deleted file mode 100644
index 79f490361f906..0000000000000
--- a/examples/recipe-webpack-image/package.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "recipe-webpack-image",
-  "private": true,
-  "description": "A recipe example showing how to import images with webpack",
-  "version": "0.1.0",
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --write src/**/*.{js,jsx}",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
-  },
-  "dependencies": {
-    "gatsby": "next",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
-  },
-  "devDependencies": {
-    "prettier": "2.1.1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
-  }
-}
\ No newline at end of file
diff --git a/examples/recipe-webpack-image/src/assets/fiesta.jpg b/examples/recipe-webpack-image/src/assets/fiesta.jpg
deleted file mode 100644
index c95d1b3b2e351..0000000000000
Binary files a/examples/recipe-webpack-image/src/assets/fiesta.jpg and /dev/null differ
diff --git a/examples/recipe-webpack-image/src/pages/index.js b/examples/recipe-webpack-image/src/pages/index.js
deleted file mode 100644
index 661f7247e8151..0000000000000
--- a/examples/recipe-webpack-image/src/pages/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react"
-import FiestaImg from "../assets/fiesta.jpg"
-
-export default () => (
-  <img src={FiestaImg} alt="Dogs in party hats celebrating at an event" />
-)
diff --git a/examples/recipes-gatsby-image/README.md b/examples/recipes-gatsby-image/README.md
deleted file mode 100644
index 4da18d6cb52a4..0000000000000
--- a/examples/recipes-gatsby-image/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Gatsby Image Recipes
-
-This repo contains examples for using `gatsby-image` to process images
diff --git a/examples/recipes-gatsby-image/gatsby-config.js b/examples/recipes-gatsby-image/gatsby-config.js
deleted file mode 100644
index 3013c5d92e516..0000000000000
--- a/examples/recipes-gatsby-image/gatsby-config.js
+++ /dev/null
@@ -1,41 +0,0 @@
-module.exports = {
-  siteMetadata: {
-    title: `Gatsby Image`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
-  },
-  plugins: [
-    `gatsby-plugin-sharp`,
-    `gatsby-transformer-sharp`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `pages`,
-        path: `${__dirname}/src/pages/`,
-      },
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `content`,
-        path: `${__dirname}/src/content/`,
-      },
-    },
-    {
-      resolve: `gatsby-plugin-mdx`,
-      options: {
-        defaultLayouts: {
-          default: require.resolve(`./src/components/layout.js`),
-        },
-      },
-    },
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
-  ],
-}
diff --git a/examples/recipes-gatsby-image/gatsby-node.js b/examples/recipes-gatsby-image/gatsby-node.js
deleted file mode 100644
index 5d63840aed8c9..0000000000000
--- a/examples/recipes-gatsby-image/gatsby-node.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const { createFilePath } = require(`gatsby-source-filesystem`)
-const path = require(`path`)
-
-exports.onCreateNode = ({ node, getNode, actions }) => {
-  const { createNodeField } = actions
-  if (node.internal.type === `Mdx`) {
-    const slug = createFilePath({ node, getNode, basePath: `pages` })
-    createNodeField({
-      node,
-      name: `slug`,
-      value: slug,
-    })
-  }
-}
-
-exports.createPages = async ({ graphql, actions }) => {
-  const { createPage } = actions
-  const result = await graphql(`
-    {
-      allMdx {
-        edges {
-          node {
-            fields {
-              slug
-            }
-          }
-        }
-      }
-    }
-  `)
-
-  result.data.allMdx.edges.forEach(({ node }) => {
-    createPage({
-      path: node.fields.slug,
-      component: path.resolve(`./src/components/markdown-layout.js`),
-      context: {
-        slug: node.fields.slug,
-      },
-    })
-  })
-}
diff --git a/examples/recipes-gatsby-image/package.json b/examples/recipes-gatsby-image/package.json
deleted file mode 100644
index 548b0ae5db608..0000000000000
--- a/examples/recipes-gatsby-image/package.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "gatsby-starter-default",
-  "private": true,
-  "description": "A simple starter to get up and developing quickly with Gatsby",
-  "version": "0.1.0",
-  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
-  "dependencies": {
-    "@mdx-js/mdx": "^1.6.18",
-    "@mdx-js/react": "^1.6.18",
-    "gatsby": "next",
-    "gatsby-image": "next",
-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-mdx": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-react-helmet": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-sharp": "next",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-helmet": "^5.2.1"
-  },
-  "devDependencies": {
-    "prettier": "2.1.1"
-  },
-  "keywords": [
-    "gatsby"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --write src/**/*.{js,jsx}",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
-  }
-}
\ No newline at end of file
diff --git a/examples/recipes-gatsby-image/src/components/header.js b/examples/recipes-gatsby-image/src/components/header.js
deleted file mode 100644
index dab30e5784e30..0000000000000
--- a/examples/recipes-gatsby-image/src/components/header.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
-import React from "react"
-
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `linear-gradient(44deg, hsl(270, 50%, 40%) 32%, hsl(259.29999999999995, 70.3%, 30.4%) 100%)`,
-      marginBottom: `1.45rem`,
-      boxShadow: `0 2px 4px 3px rgba(0,0,0,0.1)`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h3 style={{ margin: 0, textAlign: `center` }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h3>
-    </div>
-  </header>
-)
-
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
-
-export default Header
diff --git a/examples/recipes-gatsby-image/src/components/layout.css b/examples/recipes-gatsby-image/src/components/layout.css
deleted file mode 100644
index b6f63320fb8ae..0000000000000
--- a/examples/recipes-gatsby-image/src/components/layout.css
+++ /dev/null
@@ -1,622 +0,0 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}
diff --git a/examples/recipes-gatsby-image/src/components/layout.js b/examples/recipes-gatsby-image/src/components/layout.js
deleted file mode 100644
index 3bd93d85ba41f..0000000000000
--- a/examples/recipes-gatsby-image/src/components/layout.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import { useStaticQuery, graphql } from "gatsby"
-
-import Header from "./header"
-import "./layout.css"
-
-const Layout = ({ children }) => {
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-  console.log(data)
-
-  return (
-    <>
-      <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0px 1.0875rem 1.45rem`,
-          paddingTop: 0,
-        }}
-      >
-        <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.com">Gatsby</a>
-        </footer>
-      </div>
-    </>
-  )
-}
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
-export default Layout
diff --git a/examples/recipes-gatsby-image/src/components/markdown-layout.js b/examples/recipes-gatsby-image/src/components/markdown-layout.js
deleted file mode 100644
index 843e01936ea21..0000000000000
--- a/examples/recipes-gatsby-image/src/components/markdown-layout.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Header from "./header"
-import "./layout.css"
-
-const MarkdownLayout = ({ children, data }) => (
-  <>
-    <Header siteTitle={data.site.siteMetadata.title} />
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `0px 1.0875rem 1.45rem`,
-        paddingTop: 0,
-      }}
-    >
-      <main>
-        <Img
-          fluid={data.mdx.frontmatter.image.childImageSharp.fluid}
-          alt="A corgi smiling happily"
-        />
-        {children}
-      </main>
-      <footer>
-        © {new Date().getFullYear()}, Built with
-        {` `}
-        <a href="https://www.gatsbyjs.com">Gatsby</a>
-      </footer>
-    </div>
-  </>
-)
-
-MarkdownLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
-export default MarkdownLayout
-
-export const pageQuery = graphql`
-  query PostQuery($slug: String) {
-    mdx(fields: { slug: { eq: $slug } }) {
-      id
-      frontmatter {
-        image {
-          childImageSharp {
-            fluid {
-              ...GatsbyImageSharpFluid
-            }
-          }
-        }
-      }
-    }
-    site {
-      siteMetadata {
-        title
-      }
-    }
-  }
-`
diff --git a/examples/recipes-gatsby-image/src/content/using-frontmatter.mdx b/examples/recipes-gatsby-image/src/content/using-frontmatter.mdx
deleted file mode 100644
index 5ead5fffbc7f6..0000000000000
--- a/examples/recipes-gatsby-image/src/content/using-frontmatter.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Using Gatsby Image with Frontmatter
-image: ../images/corgi.jpg
----
-
-Using images
diff --git a/examples/recipes-gatsby-image/src/images/corgi.jpg b/examples/recipes-gatsby-image/src/images/corgi.jpg
deleted file mode 100644
index 1a7290819b3cd..0000000000000
Binary files a/examples/recipes-gatsby-image/src/images/corgi.jpg and /dev/null differ
diff --git a/examples/recipes-gatsby-image/src/images/dogs/dog in front of computer.jpg b/examples/recipes-gatsby-image/src/images/dogs/dog in front of computer.jpg
deleted file mode 100644
index 8a79b9ed3c36d..0000000000000
Binary files a/examples/recipes-gatsby-image/src/images/dogs/dog in front of computer.jpg and /dev/null differ
diff --git a/examples/recipes-gatsby-image/src/images/dogs/dog in party hat.jpg b/examples/recipes-gatsby-image/src/images/dogs/dog in party hat.jpg
deleted file mode 100644
index 9f14aee3e6e2e..0000000000000
Binary files a/examples/recipes-gatsby-image/src/images/dogs/dog in party hat.jpg and /dev/null differ
diff --git a/examples/recipes-gatsby-image/src/images/dogs/dog smiling on a swing.jpg b/examples/recipes-gatsby-image/src/images/dogs/dog smiling on a swing.jpg
deleted file mode 100644
index 7aa99506499bd..0000000000000
Binary files a/examples/recipes-gatsby-image/src/images/dogs/dog smiling on a swing.jpg and /dev/null differ
diff --git a/examples/recipes-gatsby-image/src/images/dogs/two dogs running down a trail.jpg b/examples/recipes-gatsby-image/src/images/dogs/two dogs running down a trail.jpg
deleted file mode 100644
index 8acf8a74b1aa8..0000000000000
Binary files a/examples/recipes-gatsby-image/src/images/dogs/two dogs running down a trail.jpg and /dev/null differ
diff --git a/examples/recipes-gatsby-image/src/pages/404.js b/examples/recipes-gatsby-image/src/pages/404.js
deleted file mode 100644
index 70bc752374a94..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/404.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react"
-
-import Layout from "../components/layout"
-
-const NotFoundPage = () => (
-  <Layout>
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
-)
-
-export default NotFoundPage
diff --git a/examples/recipes-gatsby-image/src/pages/examples/aspect-ratio.js b/examples/recipes-gatsby-image/src/pages/examples/aspect-ratio.js
deleted file mode 100644
index a0c6783ae5690..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/aspect-ratio.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-/*
-  1. write a query to get image
-  2. spread the returned object  into the fluid prop and override the aspectRatio
-*/
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fluid {
-            base64
-            aspectRatio # returns the images aspectRatio
-            src
-            srcSet
-            sizes
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        fluid={{
-          ...data.file.childImageSharp.fluid,
-          aspectRatio: 1, // override the original returned aspectRatio
-        }}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/directory.js b/examples/recipes-gatsby-image/src/pages/examples/directory.js
deleted file mode 100644
index da86ff6312017..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/directory.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-/*
-  1. make sure folders are sourced (add folder to images called dogs)
-  2. write a query to get images, filter
-  3. loop through images
-*/
-
-export default () => {
-  const allImagesQuery = graphql`
-    query {
-      allFile(
-        filter: {
-          extension: { regex: "/(jpg)|(png)|(jpeg)/" }
-          relativeDirectory: { eq: "dogs" }
-        }
-      ) {
-        edges {
-          node {
-            base
-            childImageSharp {
-              fluid {
-                base64
-                aspectRatio
-                src
-                srcSet
-                sizes
-              }
-            }
-          }
-        }
-      }
-    }
-  `
-  const {
-    allFile: { edges: images },
-  } = useStaticQuery(allImagesQuery)
-
-  return (
-    <Layout>
-      {images.map((image, index) => (
-        <Img
-          key={index}
-          fluid={image.node.childImageSharp.fluid}
-          alt={image.node.base.split(`.`)[0]}
-        />
-      ))}
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/fixed-max-width.js b/examples/recipes-gatsby-image/src/pages/examples/fixed-max-width.js
deleted file mode 100644
index 68ccdcadd3771..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/fixed-max-width.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-/*
-  1. write a query for sourced images
-  2. be sure to query for the fixed field
-  3. add a style prop to the Img component
-*/
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fixed {
-            base64
-            width
-            height
-            src
-            srcSet
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        style={{ maxWidth: 250 }}
-        fixed={data.file.childImageSharp.fixed}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/fixed-width-and-height.js b/examples/recipes-gatsby-image/src/pages/examples/fixed-width-and-height.js
deleted file mode 100644
index e9ae8ca5ca9be..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/fixed-width-and-height.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fixed(width: 250, height: 250) {
-            base64
-            width
-            height
-            src
-            srcSet
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        fixed={data.file.childImageSharp.fixed}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/fluid-by-height.js b/examples/recipes-gatsby-image/src/pages/examples/fluid-by-height.js
deleted file mode 100644
index 0e6ba1e0c62d4..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/fluid-by-height.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fluid(maxHeight: 800, quality: 100) {
-            base64
-            aspectRatio
-            src
-            srcSet
-            sizes
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        fluid={data.file.childImageSharp.fluid}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/fluid-max-width-and-quality.js b/examples/recipes-gatsby-image/src/pages/examples/fluid-max-width-and-quality.js
deleted file mode 100644
index 1c2040b3b4a7b..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/fluid-max-width-and-quality.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fluid(maxWidth: 800, quality: 75) {
-            base64
-            aspectRatio
-            src
-            srcSet
-            sizes
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        fluid={data.file.childImageSharp.fluid}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/fragment.js b/examples/recipes-gatsby-image/src/pages/examples/fragment.js
deleted file mode 100644
index 88b46a98b0048..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/fragment.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fluid {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        fluid={data.file.childImageSharp.fluid}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/inline-styles.js b/examples/recipes-gatsby-image/src/pages/examples/inline-styles.js
deleted file mode 100644
index 3fac6a9c63cb9..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/inline-styles.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-/*
-  1. write query
-  2. pass data into img component
-*/
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fluid {
-            base64
-            aspectRatio
-            src
-            srcSet
-            sizes
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        style={{ border: `2px solid rebeccapurple`, borderRadius: 5 }}
-        fluid={data.file.childImageSharp.fluid}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/relative-path.js b/examples/recipes-gatsby-image/src/pages/examples/relative-path.js
deleted file mode 100644
index cb1a555bb0990..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/relative-path.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-import Layout from "../../components/layout"
-
-/*
-  1. write query
-  2. pass data into img component
-*/
-
-export default () => {
-  const data = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "corgi.jpg" }) {
-        childImageSharp {
-          fluid {
-            base64
-            aspectRatio
-            src
-            srcSet
-            sizes
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <Layout>
-      <Img
-        fluid={data.file.childImageSharp.fluid}
-        alt="A corgi smiling happily"
-      />
-    </Layout>
-  )
-}
diff --git a/examples/recipes-gatsby-image/src/pages/examples/static-import.js b/examples/recipes-gatsby-image/src/pages/examples/static-import.js
deleted file mode 100644
index ec9e4441b2e17..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/static-import.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react"
-
-import Layout from "../../components/layout"
-
-export default () => (
-  <Layout>
-    <img src={`../../corgi.jpg`} alt="A corgi smiling happily" />
-  </Layout>
-)
diff --git a/examples/recipes-gatsby-image/src/pages/examples/webpack-import.js b/examples/recipes-gatsby-image/src/pages/examples/webpack-import.js
deleted file mode 100644
index da903b813dc27..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/examples/webpack-import.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react"
-import Dog from "../../images/corgi.jpg"
-
-import Layout from "../../components/layout"
-
-export default () => (
-  <Layout>
-    <img src={Dog} alt="A corgi smiling happily" />
-  </Layout>
-)
diff --git a/examples/recipes-gatsby-image/src/pages/index.js b/examples/recipes-gatsby-image/src/pages/index.js
deleted file mode 100644
index 147723a5cfc31..0000000000000
--- a/examples/recipes-gatsby-image/src/pages/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react"
-import { Link, graphql } from "gatsby"
-
-import Layout from "../components/layout"
-
-const IndexPage = ({
-  data: {
-    allSitePage: { nodes: pages },
-  },
-}) => (
-  <Layout>
-    {pages.map((page, index) => (
-      <>
-        <Link to={page.path}>{page.path}</Link>
-        <br />
-      </>
-    ))}
-  </Layout>
-)
-
-export default IndexPage
-
-export const query = graphql`
-  query HomePageQuery {
-    allSitePage(filter: { path: { regex: "/examples/" } }) {
-      nodes {
-        path
-      }
-    }
-  }
-`
diff --git a/examples/recipes-gatsby-image/static/corgi.jpg b/examples/recipes-gatsby-image/static/corgi.jpg
deleted file mode 100644
index 1a7290819b3cd..0000000000000
Binary files a/examples/recipes-gatsby-image/static/corgi.jpg and /dev/null differ
diff --git a/examples/using-glamor/README.md b/examples/using-glamor/README.md
deleted file mode 100644
index e0f2d00a39319..0000000000000
--- a/examples/using-glamor/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Using Glamor
-
-https://using-glamor.gatsbyjs.org
-
-Example site that demonstrates how to build Gatsby sites using the
-[Glamor](https://github.com/threepointone/glamor) css-in-js library.
diff --git a/examples/using-glamor/gatsby-config.js b/examples/using-glamor/gatsby-config.js
deleted file mode 100644
index 266c8d45de565..0000000000000
--- a/examples/using-glamor/gatsby-config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-module.exports = {
-  siteMetadata: {
-    title: `Gatsby with Glamor`,
-  },
-  plugins: [
-    `gatsby-plugin-glamor`,
-    // {
-    // resolve: `gatsby-plugin-google-analytics`,
-    // options: {
-    // trackingId: `UA-93349937-2`,
-    // },
-    // },
-    {
-      resolve: `gatsby-plugin-typography`,
-      options: {
-        pathToConfigModule: `src/utils/typography`,
-      },
-    },
-    `gatsby-plugin-offline`,
-  ],
-}
diff --git a/examples/using-glamor/package.json b/examples/using-glamor/package.json
deleted file mode 100644
index 211d5640e05db..0000000000000
--- a/examples/using-glamor/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "gatsby-example-using-glamor",
-  "private": true,
-  "description": "Gatsby example site using the Glamor plugin",
-  "version": "1.0.0",
-  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
-  "dependencies": {
-    "gatsby": "next",
-    "gatsby-plugin-glamor": "next",
-    "gatsby-plugin-google-analytics": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-typography": "next",
-    "glamor": "^2.20.40",
-    "lodash": "^4.17.20",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-typography": "^0.16.19",
-    "slash": "^1.0.0",
-    "typography": "^0.16.19",
-    "typography-breakpoint-constants": "^0.16.19"
-  },
-  "keywords": [
-    "gatsby"
-  ],
-  "license": "MIT",
-  "main": "n/a",
-  "scripts": {
-    "develop": "gatsby develop",
-    "build": "gatsby build",
-    "start": "npm run develop"
-  }
-}
\ No newline at end of file
diff --git a/examples/using-glamor/src/pages/index.js b/examples/using-glamor/src/pages/index.js
deleted file mode 100644
index ab13c17b9ec43..0000000000000
--- a/examples/using-glamor/src/pages/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-class IndexPage extends React.Component {
-  render() {
-    return (
-      <div
-        css={{
-          margin: `0 auto`,
-          marginTop: `3rem`,
-          padding: `1.5rem`,
-          maxWidth: 800,
-          color: `red`,
-        }}
-      >
-        <h1>Using Glamor + Gatsby</h1>
-        <p>
-          <a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-glamor/">
-            gatsby-plugin-glamor docs
-          </a>
-        </p>
-        <p css={{ color: `blue` }}>This is some cool stuff</p>
-        <p
-          css={{
-            color: `pink`,
-            "@media (min-width: 750px)": { color: `blue` },
-          }}
-        >
-          Make the screen narrower, on smaller screens I turn pink!
-        </p>
-        <p css={{ fontStyle: `italic` }}>
-          Edit me in your text editor, changes to styles hot reload!
-        </p>
-        <Link to="/other-page/">Go exploring</Link>
-      </div>
-    )
-  }
-}
-
-export default IndexPage
diff --git a/examples/using-glamor/src/pages/other-page.js b/examples/using-glamor/src/pages/other-page.js
deleted file mode 100644
index d7c9896744ad7..0000000000000
--- a/examples/using-glamor/src/pages/other-page.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-const OtherPage = () => (
-  <div
-    css={{
-      display: `flex`,
-      alignItems: `center`,
-      justifyContent: `center`,
-      flexDirection: `column`,
-      height: `100vh`,
-    }}
-  >
-    <h1>Weeee...</h1>
-    <img
-      src="https://media1.giphy.com/media/urVO9yrQhKwDK/200.webp#1-grid1"
-      alt="Man dancing on a bucking bronco. Wheeee!"
-    />
-    <Link to="/">Back home</Link>
-  </div>
-)
-
-export default OtherPage
diff --git a/examples/using-glamor/src/utils/typography.js b/examples/using-glamor/src/utils/typography.js
deleted file mode 100644
index 5b7fe4d106c8d..0000000000000
--- a/examples/using-glamor/src/utils/typography.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Typography from "typography"
-import {
-  MOBILE_MEDIA_QUERY,
-  TABLET_MEDIA_QUERY,
-} from "typography-breakpoint-constants"
-
-const options = {
-  baseFontSize: `18px`,
-  baseLineHeight: 1.45,
-  blockMarginBottom: 0.75,
-  scaleRatio: 2.15,
-  overrideStyles: ({ rhythm, scale }, options) => {
-    return {
-      "h1,h2,h3,h4": {
-        lineHeight: 1.2,
-      },
-      [TABLET_MEDIA_QUERY]: {
-        // Make baseFontSize on mobile 17px.
-        html: {
-          fontSize: `${(17 / 16) * 100}%`,
-        },
-      },
-      [MOBILE_MEDIA_QUERY]: {
-        // Make baseFontSize on mobile 16px.
-        html: {
-          fontSize: `${(16 / 16) * 100}%`,
-        },
-      },
-    }
-  },
-}
-
-const typography = new Typography(options)
-
-export const { rhythm, scale } = typography
-export default typography
diff --git a/examples/using-square-payments/README.md b/examples/using-square-payments/README.md
deleted file mode 100644
index 407d7c8a10b3e..0000000000000
--- a/examples/using-square-payments/README.md
+++ /dev/null
@@ -1,93 +0,0 @@
-<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
-<p align="center">
-  <a href="https://www.gatsbyjs.com">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
-  </a>
-</p>
-<h1 align="center">
-  Gatsby's default starter
-</h1>
-
-Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
-
-_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
-
-## 🚀 Quick start
-
-1.  **Create a Gatsby site.**
-
-    Use the Gatsby CLI to create a new site, specifying the default starter.
-
-    ```shell
-    # create a new Gatsby site using the default starter
-    gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
-    ```
-
-1.  **Start developing.**
-
-    Navigate into your new site’s directory and start it up.
-
-    ```shell
-    cd my-default-starter/
-    gatsby develop
-    ```
-
-1.  **Open the source code and start editing!**
-
-    Your site is now running at `http://localhost:8000`!
-
-    _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-5/#introducing-graphiql)._
-
-    Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
-
-## 🧐 What's inside?
-
-A quick look at the top-level files and directories you'll see in a Gatsby project.
-
-    .
-    ├── node_modules
-    ├── src
-    ├── .gitignore
-    ├── .prettierrc
-    ├── gatsby-browser.js
-    ├── gatsby-config.js
-    ├── gatsby-node.js
-    ├── gatsby-ssr.js
-    ├── LICENSE
-    ├── package-lock.json
-    ├── package.json
-    └── README.md
-
-1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
-
-2.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
-
-3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
-
-4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
-
-5.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
-
-6.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
-
-7.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
-
-8.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
-
-9.  **`LICENSE`**: Gatsby is licensed under the MIT license.
-
-10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
-
-11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
-
-12. **`README.md`**: A text file containing useful reference information about your project.
-
-## 🎓 Learning Gatsby
-
-Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
-
-- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
-
-- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
-
-<!-- AUTO-GENERATED-CONTENT:END -->
diff --git a/examples/using-square-payments/gatsby-config.js b/examples/using-square-payments/gatsby-config.js
deleted file mode 100644
index 999bd3d349f97..0000000000000
--- a/examples/using-square-payments/gatsby-config.js
+++ /dev/null
@@ -1,34 +0,0 @@
-module.exports = {
-  siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
-  },
-  plugins: [
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
-      },
-    },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
-  ],
-}
diff --git a/examples/using-square-payments/package.json b/examples/using-square-payments/package.json
deleted file mode 100644
index 601a2f9490135..0000000000000
--- a/examples/using-square-payments/package.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "name": "gatsby-starter-default",
-  "private": true,
-  "description": "A simple starter to get up and developing quickly with Gatsby",
-  "version": "0.1.0",
-  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
-  "dependencies": {
-    "gatsby": "next",
-    "gatsby-image": "next",
-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-react-helmet": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-square-payment-form": "latest",
-    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-sharp": "next",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1"
-  },
-  "devDependencies": {
-    "prettier": "2.1.1"
-  },
-  "keywords": ["gatsby"],
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
-  }
-}
diff --git a/examples/using-square-payments/src/components/header.js b/examples/using-square-payments/src/components/header.js
deleted file mode 100644
index 8990b7e31bb7a..0000000000000
--- a/examples/using-square-payments/src/components/header.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
-import React from "react"
-
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `rebeccapurple`,
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
-    </div>
-  </header>
-)
-
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
-
-export default Header
diff --git a/examples/using-square-payments/src/components/image.js b/examples/using-square-payments/src/components/image.js
deleted file mode 100644
index b134a7b80be74..0000000000000
--- a/examples/using-square-payments/src/components/image.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
-
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-}
-
-export default Image
diff --git a/examples/using-square-payments/src/components/layout.css b/examples/using-square-payments/src/components/layout.css
deleted file mode 100644
index b6f63320fb8ae..0000000000000
--- a/examples/using-square-payments/src/components/layout.css
+++ /dev/null
@@ -1,622 +0,0 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}
diff --git a/examples/using-square-payments/src/components/layout.js b/examples/using-square-payments/src/components/layout.js
deleted file mode 100644
index 67ae709096747..0000000000000
--- a/examples/using-square-payments/src/components/layout.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import { useStaticQuery, graphql } from "gatsby"
-
-import Header from "./header"
-import "./layout.css"
-
-const Layout = ({ children }) => {
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-
-  return (
-    <>
-      <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
-        <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.com">Gatsby</a>
-        </footer>
-      </div>
-    </>
-  )
-}
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
-export default Layout
diff --git a/examples/using-square-payments/src/components/paymentForm.css b/examples/using-square-payments/src/components/paymentForm.css
deleted file mode 100644
index 07d9d7e1beec9..0000000000000
--- a/examples/using-square-payments/src/components/paymentForm.css
+++ /dev/null
@@ -1,147 +0,0 @@
-#sq-cvv {
-  width: 60px;
-}
-
-#sq-expiration-date {
-  width: 75px;
-}
-
-.container {
-  width: 425px;
-  margin: 0 auto;
-}
-
-#sq-postal-code {
-  width: 75px;
-  text-align: center;
-}
-
-#sq-ccbox {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1;
-  position: relative;
-  min-width: 315px;
-  border-radius: 10px;
-  transition: all 400ms linear;
-  background-color: rgb(60, 121, 253);
-  padding: 10px;
-  margin: 0 auto;
-  color: #ccc;
-  font-weight: 600;
-}
-
-#sq-walletbox {
-  margin: 0 auto;
-  width: 385px;
-  text-align: center;
-}
-
-#sq-card-number {
-  width: 200px;
-}
-
-#cc-field-wrapper {
-  padding-top: 50px;
-  margin: 0;
-  display: inline-flex;
-}
-
-button.button-credit-card {
-  display: block;
-  line-height: 1.25em;
-  vertical-align: middle;
-  height: 45px;
-  width: 385px;
-  border-radius: 5px;
-  text-align: center;
-  margin: 5px auto;
-  font-size: 22px;
-  font-weight: 600;
-  background-color: #000;
-  color: #fff;
-}
-
-button.wallet-button {
-  display: block;
-  margin: 5px auto;
-  border-radius: 10px;
-  height: 45px;
-  width: 300px;
-  overflow: hidden;
-  background-clip: border-box;
-  background-position: center;
-}
-
-#form-container {
-  width: 100%;
-}
-
-/* Customize the Apple Pay on the Web button */
-#sq-apple-pay {
-  width: 100%;
-  margin: 24px 0 16px 0;
-  background-image: url(https://docs.connect.squareup.com/assets/docs/sqpaymentform/Apple_Pay_Mark_RGB_SMALL_052318-a40c688402e8a6684ee6938a380ba825e15163872bae3b9909f70ac028a9b780.png);
-  background-color: black;
-  background-size: 110%;
-  background-repeat: no-repeat;
-  background-position: center;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Customize the Masterpass button */
-#sq-masterpass {
-  width: 100%;
-  height: 48px;
-  padding: 0;
-  margin: 24px 0 24px;
-  background-image: url("https://masterpass.com/dyn/img/acc/global/mp_mark_hor_wht.svg");
-  background-color: black;
-  background-size: 100% 60%;
-  background-repeat: no-repeat;
-  background-position: calc((100% - 32px) / 2) 50%;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-#sq-masterpass::after {
-  box-sizing: border-box;
-  float: right;
-  width: 32px;
-  height: 48px;
-  padding-top: 12px;
-  content: url("data:image/svg+xml; utf8, <svg width='14' height='24' viewBox='0 0 14 24' xmlns='http://www.w3.org/2000/svg'><path d='M1.891 23.485c-.389 0-.778-.144-1.075-.436a1.46 1.46 0 0 1 0-2.102l9.141-8.944L.817 3.06a1.463 1.463 0 0 1 0-2.104 1.544 1.544 0 0 1 2.15 0l10.217 9.994a1.464 1.464 0 0 1 0 2.105L2.966 23.049a1.525 1.525 0 0 1-1.075.436' fill='#FFF' fill-rule='evenodd'/></svg>");
-  background-color: #e6761f;
-  border-radius: 0 4px 4px 0;
-}
-
-/* Customize the Google Pay button */
-#sq-google-pay {
-  min-width: 385px;
-  min-height: 40px;
-  padding: 11px 24px;
-  margin: 10px auto;
-  background-color: #000;
-  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%22103%22%20height%3D%2217%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M.148%202.976h3.766c.532%200%201.024.117%201.477.35.453.233.814.555%201.085.966.27.41.406.863.406%201.358%200%20.495-.124.924-.371%201.288s-.572.64-.973.826v.084c.504.177.912.471%201.225.882.313.41.469.891.469%201.442a2.6%202.6%200%200%201-.427%201.47c-.285.43-.667.763-1.148%201.001A3.5%203.5%200%200%201%204.082%2013H.148V2.976zm3.696%204.2c.448%200%20.81-.14%201.085-.42.275-.28.413-.602.413-.966s-.133-.684-.399-.959c-.266-.275-.614-.413-1.043-.413H1.716v2.758h2.128zm.238%204.368c.476%200%20.856-.15%201.141-.448.285-.299.427-.644.427-1.036%200-.401-.147-.749-.441-1.043-.294-.294-.688-.441-1.183-.441h-2.31v2.968h2.366zm5.379.903c-.453-.518-.679-1.239-.679-2.163V5.86h1.54v4.214c0%20.579.138%201.013.413%201.302.275.29.637.434%201.085.434.364%200%20.686-.096.966-.287.28-.191.495-.446.644-.763a2.37%202.37%200%200%200%20.224-1.022V5.86h1.54V13h-1.456v-.924h-.084c-.196.336-.5.611-.91.826-.41.215-.845.322-1.302.322-.868%200-1.528-.259-1.981-.777zm9.859.161L16.352%205.86h1.722l2.016%204.858h.056l1.96-4.858H23.8l-4.41%2010.164h-1.624l1.554-3.416zm8.266-6.748h1.666l1.442%205.11h.056l1.61-5.11h1.582l1.596%205.11h.056l1.442-5.11h1.638L36.392%2013h-1.624L33.13%207.876h-.042L31.464%2013h-1.596l-2.282-7.14zm12.379-1.337a1%201%200%200%201-.301-.735%201%201%200%200%201%20.301-.735%201%201%200%200%201%20.735-.301%201%201%200%200%201%20.735.301%201%201%200%200%201%20.301.735%201%201%200%200%201-.301.735%201%201%200%200%201-.735.301%201%201%200%200%201-.735-.301zM39.93%205.86h1.54V13h-1.54V5.86zm5.568%207.098a1.967%201.967%200%200%201-.686-.406c-.401-.401-.602-.947-.602-1.638V7.218h-1.246V5.86h1.246V3.844h1.54V5.86h1.736v1.358H45.75v3.36c0%20.383.075.653.224.812.14.187.383.28.728.28.159%200%20.299-.021.42-.063.121-.042.252-.11.392-.203v1.498c-.308.14-.681.21-1.12.21-.317%200-.616-.051-.896-.154zm3.678-9.982h1.54v2.73l-.07%201.092h.07c.205-.336.511-.614.917-.833.406-.22.842-.329%201.309-.329.868%200%201.53.254%201.988.763.457.509.686%201.202.686%202.079V13h-1.54V8.688c0-.541-.142-.947-.427-1.218-.285-.27-.656-.406-1.113-.406-.345%200-.656.098-.931.294a2.042%202.042%200%200%200-.651.777%202.297%202.297%200%200%200-.238%201.029V13h-1.54V2.976zm32.35-.341v4.083h2.518c.6%200%201.096-.202%201.488-.605.403-.402.605-.882.605-1.437%200-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0%205.52v4.736h-1.504V1.198h3.99c1.013%200%201.873.337%202.582%201.012.72.675%201.08%201.497%201.08%202.466%200%20.991-.36%201.819-1.08%202.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668%202.287c0%20.392.166.718.499.98.332.26.722.391%201.168.391.633%200%201.196-.234%201.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61%200-1.12.148-1.528.442-.409.294-.613.657-.613%201.093m1.946-5.815c1.112%200%201.989.297%202.633.89.642.594.964%201.408.964%202.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45%201.372-2.486%201.372-.882%200-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96%200-.828.313-1.486.94-1.976s1.463-.735%202.51-.735c.892%200%201.629.163%202.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132%202.132%200%200%200-1.455-.547c-.84%200-1.504.353-1.995%201.062l-1.324-.834c.73-1.045%201.81-1.568%203.238-1.568m11.853.262l-5.02%2011.53H96.42l1.864-4.034-3.302-7.496h1.635l2.387%205.749h.032l2.322-5.75z%22%20fill%3D%22%23FFF%22%2F%3E%3Cpath%20d%3D%22M75.448%207.134c0-.473-.04-.93-.116-1.366h-6.344v2.588h3.634a3.11%203.11%200%200%201-1.344%202.042v1.68h2.169c1.27-1.17%202.001-2.9%202.001-4.944%22%20fill%3D%22%234285F4%22%2F%3E%3Cpath%20d%3D%22M68.988%2013.7c1.816%200%203.344-.595%204.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754%200-3.244-1.182-3.776-2.774h-2.234v1.731a6.728%206.728%200%200%200%206.01%203.703%22%20fill%3D%22%2334A853%22%2F%3E%3Cpath%20d%3D%22M65.212%208.267a4.034%204.034%200%200%201%200-2.572V3.964h-2.234a6.678%206.678%200%200%200-.717%203.017c0%201.085.26%202.11.717%203.017l2.234-1.731z%22%20fill%3D%22%23FABB05%22%2F%3E%3Cpath%20d%3D%22M68.988%202.921c.992%200%201.88.34%202.58%201.008v.001l1.92-1.918c-1.165-1.084-2.685-1.75-4.5-1.75a6.728%206.728%200%200%200-6.01%203.702l2.234%201.731c.532-1.592%202.022-2.774%203.776-2.774%22%20fill%3D%22%23E94235%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
-  background-origin: content-box;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  border: 0;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px 0 rgba(60, 64, 67, 0.3),
-    0 1px 3px 1px rgba(60, 64, 67, 0.15);
-  cursor: pointer;
-}
-
-input::placeholder {
-  color: #000;
-}
-
-.sq-input--focus {
-  outline: -webkit-focus-ring-color auto 5px;
-}
-
-.sq-input--error {
-  box-shadow: inset 0px 0px 0px 3px rgba(255, 0, 0, 0.5);
-}
diff --git a/examples/using-square-payments/src/components/paymentForm.js b/examples/using-square-payments/src/components/paymentForm.js
deleted file mode 100644
index 40f512f63e2af..0000000000000
--- a/examples/using-square-payments/src/components/paymentForm.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import React, { Component } from "react"
-import "./paymentForm.css"
-
-const styles = {
-  name: {
-    verticalAlign: "top",
-    display: "none",
-    margin: 0,
-    border: "none",
-    fontSize: "16px",
-    fontFamily: "Helvetica Neue",
-    padding: "16px",
-    color: "#373F4A",
-    backgroundColor: "transparent",
-    lineHeight: "1.15em",
-    placeholderColor: "#000",
-    _webkitFontSmoothing: "antialiased",
-    _mozOsxFontSmoothing: "grayscale",
-  },
-  leftCenter: {
-    float: "left",
-    textAlign: "center",
-  },
-  blockRight: {
-    display: "block",
-    float: "right",
-  },
-  center: {
-    textAlign: "center",
-  },
-}
-
-export const loadSquareSdk = () => {
-  return new Promise((resolve, reject) => {
-    const sqPaymentScript = document.createElement("script")
-    sqPaymentScript.src = "https://js.squareup.com/v2/paymentform"
-    sqPaymentScript.crossorigin = "anonymous"
-    sqPaymentScript.onload = () => {
-      resolve()
-    }
-    sqPaymentScript.onerror = () => {
-      reject(`Failed to load ${sqPaymentScript.src}`)
-    }
-    document.getElementsByTagName("head")[0].appendChild(sqPaymentScript)
-  })
-}
-
-export default class PaymentForm extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      cardBrand: "",
-      nonce: undefined,
-      googlePay: false,
-      applePay: false,
-      masterpass: false,
-    }
-    this.requestCardNonce = this.requestCardNonce.bind(this)
-  }
-
-  requestCardNonce() {
-    this.paymentForm.requestCardNonce()
-  }
-
-  componentDidMount() {
-    const config = {
-      applicationId: "sq0idp-rARHLPiahkGtp6mMz2OeCA",
-      locationId: "GMT96A77XABR1",
-      inputClass: "sq-input",
-      autoBuild: false,
-      inputStyles: [
-        {
-          fontSize: "16px",
-          fontFamily: "Helvetica Neue",
-          padding: "16px",
-          color: "#373F4A",
-          backgroundColor: "transparent",
-          lineHeight: "1.15em",
-          placeholderColor: "#000",
-          _webkitFontSmoothing: "antialiased",
-          _mozOsxFontSmoothing: "grayscale",
-        },
-      ],
-      applePay: {
-        elementId: "sq-apple-pay",
-      },
-      masterpass: {
-        elementId: "sq-masterpass",
-      },
-      googlePay: {
-        elementId: "sq-google-pay",
-      },
-      cardNumber: {
-        elementId: "sq-card-number",
-        placeholder: "• • • •  • • • •  • • • •  • • • •",
-      },
-      cvv: {
-        elementId: "sq-cvv",
-        placeholder: "CVV",
-      },
-      expirationDate: {
-        elementId: "sq-expiration-date",
-        placeholder: "MM/YY",
-      },
-      postalCode: {
-        elementId: "sq-postal-code",
-        placeholder: "Zip",
-      },
-      callbacks: {
-        methodsSupported: methods => {
-          console.log(methods)
-          if (methods.googlePay) {
-            this.setState({
-              googlePay: methods.googlePay,
-            })
-          }
-          if (methods.applePay) {
-            this.setState({
-              applePay: methods.applePay,
-            })
-          }
-          if (methods.masterpass) {
-            this.setState({
-              masterpass: methods.masterpass,
-            })
-          }
-          return
-        },
-        createPaymentRequest: () => {
-          return {
-            requestShippingAddress: false,
-            requestBillingInfo: true,
-            currencyCode: "USD",
-            countryCode: "US",
-            total: {
-              label: "MERCHANT NAME",
-              amount: "100",
-              pending: false,
-            },
-            lineItems: [
-              {
-                label: "Subtotal",
-                amount: "100",
-                pending: false,
-              },
-            ],
-          }
-        },
-        cardNonceResponseReceived: (errors, nonce, cardData) => {
-          if (errors) {
-            // Log errors from nonce generation to the JavaScript console
-            console.log("Encountered errors:")
-            errors.forEach(function (error) {
-              console.log("  " + error.message)
-            })
-            return
-          }
-          this.setState({
-            nonce: nonce,
-          })
-          console.log(nonce)
-        },
-        unsupportedBrowserDetected: () => {},
-        inputEventReceived: inputEvent => {
-          switch (inputEvent.eventType) {
-            case "focusClassAdded":
-              break
-            case "focusClassRemoved":
-              break
-            case "errorClassAdded":
-              document.getElementById("error").innerHTML =
-                "Please fix card information errors before continuing."
-              break
-            case "errorClassRemoved":
-              document.getElementById("error").style.display = "none"
-              break
-            case "cardBrandChanged":
-              if (inputEvent.cardBrand !== "unknown") {
-                this.setState({
-                  cardBrand: inputEvent.cardBrand,
-                })
-              } else {
-                this.setState({
-                  cardBrand: "",
-                })
-              }
-              break
-            case "postalCodeChanged":
-              break
-            default:
-              break
-          }
-        },
-        paymentFormLoaded: function () {
-          document.getElementById("name").style.display = "inline-flex"
-        },
-      },
-    }
-    this.paymentForm = new this.props.paymentForm(config)
-    this.paymentForm.build()
-  }
-
-  render() {
-    return (
-      <div className="container">
-        <div id="form-container">
-          <div id="sq-walletbox">
-            <button
-              style={{ display: this.state.applePay ? "inherit" : "none" }}
-              className="wallet-button"
-              id="sq-apple-pay"
-            />
-            <button
-              style={{ display: this.state.masterpass ? "block" : "none" }}
-              className="wallet-button"
-              id="sq-masterpass"
-            />
-            <button
-              style={{ display: this.state.googlePay ? "inherit" : "none" }}
-              className="wallet-button"
-              id="sq-google-pay"
-            />
-            <hr />
-          </div>
-
-          <div id="sq-ccbox">
-            <p>
-              <span style={styles.leftCenter}>Enter Card Info Below </span>
-              <span style={styles.blockRight}>
-                {this.state.cardBrand.toUpperCase()}
-              </span>
-            </p>
-            <div id="cc-field-wrapper">
-              <label>
-                Card Number
-                <div id="sq-card-number" />
-              </label>
-              <input type="hidden" id="card-nonce" name="nonce" />
-              <label>
-                Expiration Date
-                <div id="sq-expiration-date" />
-              </label>
-              <label>
-                CVV
-                <div id="sq-cvv" />
-              </label>
-            </div>
-            <label>
-              Name
-              <input
-                id="name"
-                style={styles.name}
-                type="text"
-                placeholder="Name"
-              />
-            </label>
-            <label>
-              Postal Code
-              <div id="sq-postal-code" />
-            </label>
-          </div>
-          <button
-            className="button-credit-card"
-            onClick={this.requestCardNonce}
-          >
-            Pay
-          </button>
-        </div>
-        <p style={styles.center} id="error" />
-      </div>
-    )
-  }
-}
diff --git a/examples/using-square-payments/src/components/seo.js b/examples/using-square-payments/src/components/seo.js
deleted file mode 100644
index b40a909ae8c8b..0000000000000
--- a/examples/using-square-payments/src/components/seo.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-
-function SEO({ description, lang, meta, title }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-          }
-        }
-      }
-    `
-  )
-
-  const metaDescription = description || site.siteMetadata.description
-
-  return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:title`,
-          content: title,
-        },
-        {
-          property: `og:description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:type`,
-          content: `website`,
-        },
-        {
-          name: `twitter:card`,
-          content: `summary`,
-        },
-        {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author,
-        },
-        {
-          name: `twitter:title`,
-          content: title,
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription,
-        },
-      ].concat(meta)}
-    />
-  )
-}
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-}
-
-export default SEO
diff --git a/examples/using-square-payments/src/images/gatsby-astronaut.png b/examples/using-square-payments/src/images/gatsby-astronaut.png
deleted file mode 100644
index da58ece0a8c5b..0000000000000
Binary files a/examples/using-square-payments/src/images/gatsby-astronaut.png and /dev/null differ
diff --git a/examples/using-square-payments/src/images/gatsby-icon.png b/examples/using-square-payments/src/images/gatsby-icon.png
deleted file mode 100644
index 908bc78a7f559..0000000000000
Binary files a/examples/using-square-payments/src/images/gatsby-icon.png and /dev/null differ
diff --git a/examples/using-square-payments/src/pages/404.js b/examples/using-square-payments/src/pages/404.js
deleted file mode 100644
index bc4c31d79353c..0000000000000
--- a/examples/using-square-payments/src/pages/404.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react"
-
-import Layout from "../components/layout"
-import SEO from "../components/seo"
-
-const NotFoundPage = () => (
-  <Layout>
-    <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
-)
-
-export default NotFoundPage
diff --git a/examples/using-square-payments/src/pages/index.js b/examples/using-square-payments/src/pages/index.js
deleted file mode 100644
index fb2cbd1d07d95..0000000000000
--- a/examples/using-square-payments/src/pages/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useEffect, useState } from "react"
-import { Link } from "gatsby"
-
-import Layout from "../components/layout"
-import SEO from "../components/seo"
-import PaymentForm, { loadSquareSdk } from "../components/paymentForm"
-
-const IndexPage = () => {
-  const [squareStatus, setSquareStatus] = useState(null)
-
-  useEffect(() => {
-    loadSquareSdk()
-      .then(() => {
-        setSquareStatus("SUCCESS")
-      })
-      .catch(() => setSquareStatus("ERROR"))
-  }, []) // on mount, add the js script dynamically
-
-  return (
-    <Layout>
-      <SEO title="Home" />
-
-      {squareStatus === "ERROR" &&
-        "Failed to load SquareSDK. Please refresh the page."}
-      {squareStatus === "SUCCESS" && (
-        <PaymentForm paymentForm={window.SqPaymentForm} />
-      )}
-
-      <Link to="/page-2/">Go to page 2</Link>
-    </Layout>
-  )
-}
-
-export default IndexPage
diff --git a/examples/using-square-payments/src/pages/page-2.js b/examples/using-square-payments/src/pages/page-2.js
deleted file mode 100644
index 666c23ef30f9d..0000000000000
--- a/examples/using-square-payments/src/pages/page-2.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-import Layout from "../components/layout"
-import SEO from "../components/seo"
-
-const SecondPage = () => (
-  <Layout>
-    <SEO title="Page two" />
-    <h1>Hi from the second page</h1>
-    <p>Welcome to page 2</p>
-    <Link to="/">Go back to the homepage</Link>
-  </Layout>
-)
-
-export default SecondPage