docs: migrate website to Gatsby v2 (#1623)

* website: initial conversion to gatsby v2

* fix unexpected history use warning

* use commonjs only to fix gatsby error

* fix gatsby import error with sidecar

* remove unused postcss-colour-functions

* remove unused prop

* lowercase layout filename import to match actual file

* chore(lint): format code
This commit is contained in:
Zeb Pykosz
2018-08-23 17:58:38 -04:00
committed by Caleb
parent a1677b0e24
commit f58db5fb08
17 changed files with 4084 additions and 4662 deletions

View File

@ -1,5 +1,8 @@
import React from 'react';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
const BlogPost = ({ data }) => {
const { html, frontmatter } = data.markdownRemark;
@ -8,23 +11,25 @@ const BlogPost = ({ data }) => {
const desc = meta_description || description;
return (
<div className="docs page">
<Helmet>
<title>{title}</title>
{desc && <meta name="description" content={desc} />}
</Helmet>
<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>
<div dangerouslySetInnerHTML={{ __html: html }} />
</article>
<Layout>
<div className="docs page">
<Helmet>
<title>{title}</title>
{desc && <meta name="description" content={desc} />}
</Helmet>
<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>
<div dangerouslySetInnerHTML={{ __html: html }} />
</article>
</div>
</div>
</div>
</Layout>
);
};

View File

@ -1,7 +1,8 @@
import React from 'react';
import Helmet from 'react-helmet';
import { matchPath } from 'react-router-dom';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import EditLink from '../components/edit-link';
import Widgets from '../components/widgets';
import DocsNav from '../components/docs-nav';
@ -20,24 +21,26 @@ const DocPage = ({ data, location, history }) => {
const { nav, page, widgets, menu } = data;
const docsNav = toMenu(menu.siteMetadata.menu.docs, nav);
const showWidgets = matchPath(location.pathname, { path: '/docs/widgets' });
const showWidgets = location.pathname.indexOf('/docs/widgets') !== -1;
return (
<div className="docs detail page">
<Helmet title={page.frontmatter.title} />
<div className="container">
<aside id="sidebar" className="sidebar">
<DocsNav items={docsNav} location={location} />
<MobileNav items={docsNav} history={history} />
</aside>
<article className="docs-content" id="docs-content">
<EditLink path={page.fields.path} />
<h1>{page.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: page.html }} />
{showWidgets && <Widgets widgets={widgets} />}
</article>
<Layout>
<div className="docs detail page">
<Helmet title={page.frontmatter.title} />
<div className="container">
<aside id="sidebar" className="sidebar">
<DocsNav items={docsNav} location={location} />
<MobileNav items={docsNav} history={history} />
</aside>
<article className="docs-content" id="docs-content">
<EditLink path={page.fields.path} />
<h1>{page.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: page.html }} />
{showWidgets && <Widgets widgets={widgets} />}
</article>
</div>
</div>
</div>
</Layout>
);
};