chore: update gatsby to v3 (#5057)

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

website/content/docs/beta-features.md

@@ -634,7 +634,7 @@ collections:
 ```
 
 Nested collections expect the following directory structure:
-```
+```bash
 content
 └── pages
     ├── authors

website/content/docs/middleman.md

@@ -8,14 +8,14 @@ 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
 ```
@@ -23,12 +23,12 @@ 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"

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/

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,30 +14,31 @@
   "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",
@@ -45,13 +46,10 @@
   },
   "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/public/img/nextjs.svg

@@ -1 +0,0 @@
-<svg height="1024pt" viewBox=".5 -.2 1023 1024.1" width="1024pt" xmlns="http://www.w3.org/2000/svg"><path d="m478.5.6c-2.2.2-9.2.9-15.5 1.4-145.3 13.1-281.4 91.5-367.6 212-48 67-78.7 143-90.3 223.5-4.1 28.1-4.6 36.4-4.6 74.5s.5 46.4 4.6 74.5c27.8 192.1 164.5 353.5 349.9 413.3 33.2 10.7 68.2 18 108 22.4 15.5 1.7 82.5 1.7 98 0 68.7-7.6 126.9-24.6 184.3-53.9 8.8-4.5 10.5-5.7 9.3-6.7-.8-.6-38.3-50.9-83.3-111.7l-81.8-110.5-102.5-151.7c-56.4-83.4-102.8-151.6-103.2-151.6-.4-.1-.8 67.3-1 149.6-.3 144.1-.4 149.9-2.2 153.3-2.6 4.9-4.6 6.9-8.8 9.1-3.2 1.6-6 1.9-21.1 1.9h-17.3l-4.6-2.9c-3-1.9-5.2-4.4-6.7-7.3l-2.1-4.5.2-200.5.3-200.6 3.1-3.9c1.6-2.1 5-4.8 7.4-6.1 4.1-2 5.7-2.2 23-2.2 20.4 0 23.8.8 29.1 6.6 1.5 1.6 57 85.2 123.4 185.9s157.2 238.2 201.8 305.7l81 122.7 4.1-2.7c36.3-23.6 74.7-57.2 105.1-92.2 64.7-74.3 106.4-164.9 120.4-261.5 4.1-28.1 4.6-36.4 4.6-74.5s-.5-46.4-4.6-74.5c-27.8-192.1-164.5-353.5-349.9-413.3-32.7-10.6-67.5-17.9-106.5-22.3-9.6-1-75.7-2.1-84-1.3zm209.4 309.4c4.8 2.4 8.7 7 10.1 11.8.8 2.6 1 58.2.8 183.5l-.3 179.8-31.7-48.6-31.8-48.6v-130.7c0-84.5.4-132 1-134.3 1.6-5.6 5.1-10 9.9-12.6 4.1-2.1 5.6-2.3 21.3-2.3 14.8 0 17.4.2 20.7 2z"/><path d="m784.3 945.1c-3.5 2.2-4.6 3.7-1.5 2 2.2-1.3 5.8-4 5.2-4.1-.3 0-2 1-3.7 2.1zm-6.9 4.5c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-5 3c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-5 3c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-7.6 4c-3.8 2-3.6 2.8.2.9 1.7-.9 3-1.8 3-2 0-.7-.1-.6-3.2 1.1z"/></svg>

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>
+  );
+}

website/src/components/features.js

@@ -28,7 +28,7 @@ const Text = styled.p`
 function FeatureItem({ feature, description, imgpath, kind }) {
   return (
     <Box>
-      {imgpath && <img src={require(`../img/${imgpath}`)} alt="" />}
+      {imgpath && <img src={require(`../img/${imgpath}`).default} alt="" />}
       <Title kind={kind}>
         <Markdownify source={feature} />
       </Title>

website/src/pages/blog.js

@@ -54,7 +54,7 @@ export const pageQuery = graphql`
   query blogList {
     allMarkdownRemark(
       filter: { fields: { slug: { regex: "/blog/" } } }
-      sort: { order: DESC, fields: [fields___date] }
+      sort: { order: DESC, fields: [frontmatter___date] }
     ) {
       edges {
         node {

website/src/templates/blog-post.js

@@ -2,34 +2,10 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { graphql } from 'gatsby';
 import { trimStart, trimEnd } from 'lodash';
-import { css } from '@emotion/core';
 
 import TwitterMeta from '../components/twitter-meta';
 import Layout from '../components/layout';
-import Container from '../components/container';
-import Markdown from '../components/markdown';
-import MetaInfo from '../components/meta-info';
-import Page from '../components/page';
-
-export 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>
-  );
-}
+import BlogPostTemplate from '../components/blog-post-template';
 
 function BlogPost({ data }) {
   const { html, frontmatter } = data.markdownRemark;

website/src/templates/doc-page.js

@@ -4,12 +4,7 @@ import { graphql } from 'gatsby';
 import 'prismjs/themes/prism-tomorrow.css';
 
 import Layout from '../components/layout';
-import DocsNav from '../components/docs-nav';
-import Container from '../components/container';
-import SidebarLayout from '../components/sidebar-layout';
-import EditLink from '../components/edit-link';
-import Widgets from '../components/widgets';
-import Markdown from '../components/markdown';
+import DocsTemplate from '../components/docs-template';
 
 function filenameFromPath(p) {
   return p
@@ -25,40 +20,6 @@ function toMenu(menu, nav) {
   }));
 }
 
-function DocsSidebar({ docsNav, location }) {
-  return (
-    <aside>
-      <DocsNav items={docsNav} location={location} />
-    </aside>
-  );
-}
-
-export 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>
-  );
-}
-
 function DocPage({ data, location }) {
   const {
     nav,

website/static/admin/config.yml

@@ -18,16 +18,16 @@ docs_collection: &docs_collection
   create: true
   summary: '{{weight}} - {{title}}'
   preview_path: 'docs/{{slug}}'
-  sortableFields: ['weight', 'title', 'group']
+  sortable_fields: ['weight', 'title', 'group']
   fields:
     - label: Section
       name: group
       widget: relation
       collection: settings
       file: docs_sections
-      searchFields: ["menu.docs.*.name", "menu.docs.*.title"]
-      displayFields: ["menu.docs.*.title"]
-      valueField: "menu.docs.*.name"
+      search_fields: ['menu.docs.*.name', 'menu.docs.*.title']
+      display_fields: ['menu.docs.*.title']
+      value_field: 'menu.docs.*.name'
     - { label: 'Order', name: weight, widget: number }
     - { label: Title, name: title }
     - { label: Body, name: body, widget: markdown }
@@ -37,7 +37,7 @@ word_list: &word_list
     - label: Extends
       name: extends
       widget: hidden
-      default: "existence"
+      default: 'existence'
     - label: Output message
       name: message
       widget: string
@@ -51,9 +51,9 @@ word_list: &word_list
       widget: select
       default: suggestion
       options:
-        - {label: "Suggestion", value: "suggestion"}
-        - {label: "Warning", value: "warning"}
-        - {label: "Error", value: "error"}
+        - { label: 'Suggestion', value: 'suggestion' }
+        - { label: 'Warning', value: 'warning' }
+        - { label: 'Error', value: 'error' }
     - label: Entries
       name: tokens
       widget: list