docs: convert website from postcss to emotion (#2068)
This commit is contained in:
committed by
Shawn Erquhart
parent
7b0838dfef
commit
3d474b1944
@ -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 }) => {
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user