chore: update gatsby to v3 (#5057)

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,