chore: update Gatsby to v3

website/content/blog/implementing-a-jekyll-cms-in-3-days.md

@@ -6,7 +6,7 @@ description: >-
   website. Using Netlify CMS they added content management to a Jekyll site in
   three days.
 twitter_image: /img/netlify-cms.png
-date: '2019-06-06'
+date: 2019-06-06T12:00:00.000Z
 canonical_url: https://www.dwolla.com/updates/implementing-netlify-cms/
 ---
 
@@ -61,7 +61,7 @@ If you were using the built-in Jekyll gems and build process that GitHub provide
 <figure>
   <figcaption>Gemfile</figcaption>
 
-  ```x
+  ```bash
   source "https://rubygems.org"
   gem 'github-pages'
   ```
@@ -70,7 +70,7 @@ If you were using the built-in Jekyll gems and build process that GitHub provide
 <figure>
   <figcaption>netlify.toml</figcaption>
 
-  ```x
+  ```bash
   [build]
   publish = "_site/"
   command = "jekyll build"
@@ -83,7 +83,7 @@ Once you’re satisfied that everything looks good and is deploying correctly fr
 
 Netlify CMS itself consists of a [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application) built with [React](https://reactjs.org/) that lives in an admin folder on your site. For Jekyll, it goes right at the root of your project. It will contain two files:
 
-```x
+```bash
 admin
  ├ index.html
  └ config.yml

website/content/blog/netlify-cms-2-0-launches-with-bitbucket-support-and-a-new-monorepo-architecture.md

@@ -7,7 +7,7 @@ description: >-
   Announcing the release of Netlify CMS v2.0, with new Bitbucket support and an
   improved project architecture designed to ease contribution and the extension
   of features.
-date: '2018-07-26'
+date: 2018-07-26T12:00:00.000Z
 ---
 Today we’re releasing Netlify CMS 2.0, which adds support for using Bitbucket as a backend. 
 

website/content/blog/netlify-cms-now-supports-gitlab-as-a-backend.md

@@ -5,7 +5,7 @@ description: >-
   Netlify CMS, the open source, headless CMS that provides a user-friendly UI
   around your Git repository, can now be used with GitLab in addition to
   GitHub.
-date: '2018-06-13'
+date: 2018-06-13T00:00:10.000Z
 ---
 Netlify CMS is releasing support for GitLab as a backend, creating the world's first completely open source stack for Git-based content editing.
 

website/content/docs/add-to-your-site.md

@@ -29,7 +29,7 @@ If your generator isn't listed here, you can check its documentation, or as a sh
 
 Inside the `admin` folder, you'll create two files:
 
-```x
+```bash
 admin
  ├ index.html
  └ config.yml
@@ -277,4 +277,4 @@ If you left your site registration open, or for return visits after confirming a
 
 **Note:** No matter where you access Netlify CMS — whether running locally, in a staging environment, or in your published site — it always fetches and commits files in your hosted repository (for example, on GitHub), on the branch you configured in your Netlify CMS config.yml file. This means that content fetched in the admin UI matches the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI saves directly to the hosted repository, even if you're running the UI locally or in staging.
 
-Happy posting!
+Happy posting!

website/content/docs/beta-features.md

@@ -634,7 +634,7 @@ collections:
 ```
 
 Nested collections expect the following directory structure:
-```
+```bash
 content
 └── pages
     ├── authors
@@ -646,4 +646,4 @@ content
         ├── hello-world
         │   └── index.md
         └── index.md
-```
+```

website/content/docs/middleman.md

@@ -8,27 +8,27 @@ This guide will help you get started using Netlify CMS and Middleman.
 ## Installation
 To get up and running with Middleman, you need both the Ruby language runtime and RubyGems installed on your computer. Check out the [Middleman installation docs](https://middlemanapp.com/basics/install/) for more details. If you already have your environment set up, use the following command to install Middleman:
 
-```
+```bash
 gem install middleman
 ```
 
 ## Create a new Middleman site
 Let's create a new site from scratch. Run the following commands in the terminal, in the folder where you'd like to create the blog:
 
-```
+```bash
 middleman init blog
 cd blog
 ```
 
 ### Add the Middleman blog extension
 Middleman has an official extension to support blogging, articles and tagging. `middleman-blog` ships as an extension and must be installed to use. Simply specify the gem in your Gemfile:
 
-```
+```bash
 gem "middleman-blog"
 ```
 Install the dependencies and run Middleman with the following commands:
 
-```
+```bash
 bundle install
 middleman server
 ```
@@ -50,7 +50,7 @@ This is an example article. You probably want to delete it and write your own ar
 ### Activate the blog extension
 We can then activate the blog in `config.rb`. Be sure to check out the [Middleman blogging docs](https://middlemanapp.com/basics/blogging/) for all the configuration options.
 
-```
+```bash
 activate :blog do | blog |
   blog.permalink = "blog/{title}.html"
   blog.sources = "posts/{year}-{month}-{day}-{title}.html"
@@ -61,7 +61,7 @@ end
 ### Load the articles
 Time to load our articles in `index.html.erb`.
 
-```
+```ruby
 <h1>Recent articles</h1>
 
 <% blog.articles.each do | article | %>
@@ -78,7 +78,7 @@ Time to load our articles in `index.html.erb`.
 
 ### Add an article layout
 In the last step before we add Netlify CMS, we add a layout for the article page. Create a new layout `source/layouts/blog-layout.html.erb`. For now we will get the title and the content:
-```
+```ruby
 <h1>
   <%= current_page.data.title %>
 </h1>
@@ -91,7 +91,7 @@ Now that we have a functioning blog, let's get started with Netlify CMS!
 ## Add Netlify CMS to your site
 
 Create two files in a new folder called `admin`, `index.html` and `config.yml`. Also add an `upload` folder in the images directory that will function as our `media_folder`.
-```
+```bash
 ├── source
 │   ├── admin
 │   │   ├── index.html
@@ -104,7 +104,7 @@ Create two files in a new folder called `admin`, `index.html` and `config.yml`.
 
 In the newly created `index.html` we add scripts for Netlify CMS and the Netlify Identity Widget:
 
-```
+```html
 <!doctype html>
 <html>
   <head>
@@ -125,7 +125,7 @@ In the newly created `index.html` we add scripts for Netlify CMS and the Netlify
 
 For the purpose of this guide we will deploy to Netlify from a GitHub repository which requires the minimum configuration. In `config.yml` file paste the following code:
 
-```
+```yml
 backend:
   name: git-gateway
 
@@ -149,7 +149,7 @@ collections:
 ### Push to GitHub
 It's now time to commit your changes and push to GitHub. 
 
-```
+```bash
 git init
 git add .
 git commit -m "Initial Commit"
@@ -176,4 +176,4 @@ It's time to create your first blog post. Login to your site's `/admin/` page an
 
 Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.
 
-Be sure to checkout the official [Middleman Starter](https://github.com/tomrutgers/middleman-starter-netlify-cms) for more examples.
+Be sure to checkout the official [Middleman Starter](https://github.com/tomrutgers/middleman-starter-netlify-cms) for more examples.

website/content/docs/netlify-large-media.md

@@ -32,7 +32,7 @@ In repositories enabled with Netlify Large Media, Netlify CMS will use the image
 
 You can disable the automatic image transformations with the `use_large_media_transforms_in_media_library` configuration setting, nested under `backend` in the CMS `config.yml` file:
 
-```
+```yaml
 backend:
   name: git-gateway
   ## Set to false to prevent transforming images in media gallery view

website/content/docs/nextjs.md

@@ -196,7 +196,7 @@ Create a new repository at GitHub (or one of the other supported git services) a
 
 Now is probably also a good time to add a `.gitignore` file:
 
-```
+```bash
 .next/
 node_modules/
 /npm-debug.log

website/content/docs/nuxt.md

@@ -70,7 +70,7 @@ You can build whatever collections and content modeling you want. The important
 
 In your root directory, you can create a new directory `content/`. As you might guess, this is where our content will live. Your filesystem should look about like this, so far:
 
-```sh
+```bash
 root/
 ├ content/
 ├ components/
@@ -266,4 +266,4 @@ export default {
 };
 ```
 
-To see the generated site, navigate to name-of-your-website.netlify.app/blog
+To see the generated site, navigate to name-of-your-website.netlify.app/blog

website/content/docs/open-authoring.md

@@ -52,17 +52,17 @@ Users who _do_ have write access to the original repository continue to use the
 ## Linking to specific entries in the CMS
 Open authoring often includes some sort of "Edit this page" link on the live site. Netlify CMS supports this via the **edit** path:
 
-```
+```js
 /#/edit/{collectionName}/{entryName}
 ```
 
 For the entry named "general" in the "settings" file collection
-```
+```html
 https://www.example.com/path-to-cms/#/edit/settings/general
 ```
 
 For blog post "test.md" in the "posts" folder collection
-```
+```html
 https://www.example.com/path-to-cms/#/edit/posts/test
 ```
 

website/content/docs/writing-style-guide.md

@@ -15,7 +15,7 @@ Use angle brackets for placeholders. Tell the reader what a placeholder represen
 
 1. Display information about a cli command:
 
-```
+```bash
 npm install <package-name>
 ```
 

website/package.json

@@ -14,44 +14,42 @@
   "homepage": "https://www.netlifycms.org/",
   "license": "MIT",
   "dependencies": {
+    "@emotion/cache": "^10.0.29",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
     "dayjs": "^1.8.23",
     "emotion-theming": "^10.0.27",
-    "gatsby": "2.32.8",
-    "gatsby-plugin-catch-links": "2.10.0",
+    "gatsby": "3.0.1",
+    "gatsby-plugin-catch-links": "3.0.0",
     "gatsby-plugin-emotion": "^4.2.0",
-    "gatsby-plugin-manifest": "2.12.1",
-    "gatsby-plugin-netlify-cms": "^4.2.0",
-    "gatsby-plugin-react-helmet": "3.10.0",
-    "gatsby-remark-autolink-headers": "2.11.0",
+    "gatsby-plugin-manifest": "3.0.0",
+    "gatsby-plugin-netlify-cms": "^5.0.0",
+    "gatsby-plugin-react-helmet": "4.0.0",
+    "gatsby-remark-autolink-headers": "3.0.0",
     "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-remark-prismjs": "3.13.0",
-    "gatsby-source-filesystem": "2.11.1",
-    "gatsby-transformer-json": "2.11.0",
-    "gatsby-transformer-remark": "2.16.1",
-    "gatsby-transformer-yaml": "2.11.0",
+    "gatsby-remark-prismjs": "4.0.0",
+    "gatsby-source-filesystem": "3.0.0",
+    "gatsby-transformer-json": "3.0.0",
+    "gatsby-transformer-remark": "3.0.0",
+    "gatsby-transformer-yaml": "3.0.0",
     "js-yaml": "^4.0.0",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "netlify-cms-app": "^2.14.26",
     "prismjs": "^1.21.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-github-btn": "^1.1.1",
     "react-helmet": "^6.0.0",
     "react-markdown": "^5.0.0",
     "smooth-scroll": "^16.1.2"
   },
   "devDependencies": {
     "babel-plugin-prismjs": "^2.0.1",
-    "babel-preset-gatsby": "^0.12.0",
+    "babel-preset-gatsby": "^1.0.0",
     "eslint": "^7.4.0",
     "eslint-plugin-import": "^2.20.1",
-    "markdownlint-cli": "^0.26.0"
-  },
-  "resolutions": {
-    "mini-css-extract-plugin": "0.11.2"
+    "markdownlint-cli": "^0.27.1"
   },
   "private": true
 }

website/src/cms/cms.js

@@ -4,9 +4,9 @@ import dayjs from 'dayjs';
 import Prism from 'prismjs';
 import { CacheProvider } from '@emotion/core';
 import createCache from '@emotion/cache';
-import { BlogPostTemplate } from '../templates/blog-post';
+import BlogPostTemplate from '../components/blog-post-template';
 import { LayoutTemplate as Layout } from '../components/layout';
-import { DocsTemplate } from '../templates/doc-page';
+import DocsTemplate from '../components/docs-template';
 import WidgetDoc from '../components/widget-doc';
 import WhatsNew from '../components/whats-new';
 import Notification from '../components/notification';

website/src/components/blog-post-template.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { css } from '@emotion/core';
+
+import Container from './container';
+import Markdown from './markdown';
+import MetaInfo from './meta-info';
+import Page from './page';
+
+export default function BlogPostTemplate({ title, author, date, body, html }) {
+  return (
+    <Container size="sm">
+      <Page as="article">
+        <h1
+          css={css`
+            margin-bottom: 0;
+          `}
+        >
+          {title}
+        </h1>
+        <MetaInfo>
+          by {author} on {date}
+        </MetaInfo>
+        <Markdown body={body} html={html} />
+      </Page>
+    </Container>
+  );
+}

website/src/components/docs-template.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import Container from './container';
+import SidebarLayout from './sidebar-layout';
+import EditLink from './edit-link';
+import Widgets from './widgets';
+import Markdown from './markdown';
+import DocsNav from './docs-nav';
+
+function DocsSidebar({ docsNav, location }) {
+  return (
+    <aside>
+      <DocsNav items={docsNav} location={location} />
+    </aside>
+  );
+}
+
+export default function DocsTemplate({
+  title,
+  filename,
+  body,
+  html,
+  showWidgets,
+  widgets,
+  showSidebar,
+  docsNav,
+  location,
+  group,
+}) {
+  return (
+    <Container size="md">
+      <SidebarLayout sidebar={showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}>
+        <article data-docs-content>
+          {filename && <EditLink collection={`docs_${group}`} filename={filename} />}
+          <h1>{title}</h1>
+          <Markdown body={body} html={html} />
+          {showWidgets && <Widgets widgets={widgets} location={location} />}
+        </article>
+      </SidebarLayout>
+    </Container>
+  );
+}