docs: convert website from postcss to emotion (#2068)

website/src/templates/blog-post.js

@@ -2,24 +2,31 @@ 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 const BlogPostTemplate = ({ title, author, date, body, html }) => (
-  <div className="docs page">
-    <div className="container">
-      <article className="blog-content" id="blog-content">
-        <div className="blog-post-header">
-          <h1>{title}</h1>
-          <p className="meta-info">
-            by {author} on {date}
-          </p>
-        </div>
-        {body ? body : <div dangerouslySetInnerHTML={{ __html: html }} />}
-      </article>
-    </div>
-  </div>
+  <Container size="sm">
+    <Page as="article">
+      <h1
+        css={css`
+          margin-bottom: 0;
+        `}
+      >
+        {title}
+      </h1>
+      <MetaInfo>
+        by {author} on {date}
+      </MetaInfo>
+      <Markdown html={body || html} />
+    </Page>
+  </Container>
 );
 
 const BlogPost = ({ data }) => {

website/src/templates/doc-page.js

@@ -7,9 +7,9 @@ import Layout from '../components/layout';
 import EditLink from '../components/edit-link';
 import Widgets from '../components/widgets';
 import DocsNav from '../components/docs-nav';
-import MobileNav from '../components/mobile-nav';
-
-import '../css/imports/docs.css';
+import Container from '../components/container';
+import SidebarLayout from '../components/sidebar-layout';
+import Markdown from '../components/markdown';
 
 const toMenu = (menu, nav) =>
   menu.map(group => ({
@@ -17,10 +17,9 @@ const toMenu = (menu, nav) =>
     group: nav.group.find(g => g.fieldValue === group.name),
   }));
 
-const DocsSidebar = ({ docsNav, location, history }) => (
-  <aside id="sidebar" className="sidebar">
+const DocsSidebar = ({ docsNav, location }) => (
+  <aside>
     <DocsNav items={docsNav} location={location} />
-    <MobileNav items={docsNav} history={history} />
   </aside>
 );
 
@@ -34,22 +33,22 @@ export const DocsTemplate = ({
   showSidebar,
   docsNav,
   location,
-  history,
 }) => (
-  <div className="docs detail page">
-    <div className="container">
-      {showSidebar && <DocsSidebar docsNav={docsNav} location={location} history={history} />}
-      <article className="docs-content" id="docs-content">
+  <Container size="md">
+    <SidebarLayout
+      sidebar={<div>{showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}</div>}
+    >
+      <article data-docs-content>
         {editLinkPath && <EditLink path={editLinkPath} />}
         <h1>{title}</h1>
-        {body ? body : <div dangerouslySetInnerHTML={{ __html: html }} />}
+        <Markdown html={body || html} />
         {showWidgets && <Widgets widgets={widgets} />}
       </article>
-    </div>
-  </div>
+    </SidebarLayout>
+  </Container>
 );
 
-const DocPage = ({ data, location, history }) => {
+const DocPage = ({ data, location }) => {
   const { nav, page, widgets, menu } = data;
 
   const docsNav = toMenu(menu.siteMetadata.menu.docs, nav);
@@ -66,7 +65,6 @@ const DocPage = ({ data, location, history }) => {
         widgets={widgets}
         docsNav={docsNav}
         location={location}
-        history={history}
         showSidebar
       />
     </Layout>