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

This commit is contained in:
Zeb Pykosz
2020-01-23 21:55:18 -05:00
committed by Shawn Erquhart
parent 7b0838dfef
commit 3d474b1944
69 changed files with 7769 additions and 6834 deletions

View File

@ -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 }) => {

View File

@ -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>