chore: add website preview templates (#1716)

This commit is contained in:
Shawn Erquhart
2018-09-06 14:44:58 -04:00
committed by GitHub
parent 9b18596fa2
commit 4fadf3fdb6
13 changed files with 1497 additions and 135 deletions

View File

@ -4,6 +4,22 @@ import { graphql } from 'gatsby';
import Layout from '../components/layout';
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>
);
const BlogPost = ({ data }) => {
const { html, frontmatter } = data.markdownRemark;
const { author, title, date, description, meta_description } = frontmatter;
@ -12,23 +28,11 @@ const BlogPost = ({ data }) => {
return (
<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>
<Helmet>
<title>{title}</title>
{desc && <meta name="description" content={desc} />}
</Helmet>
<BlogPostTemplate title={title} author={author} date={date} html={html} />
</Layout>
);
};

View File

@ -17,6 +17,38 @@ const toMenu = (menu, nav) =>
group: nav.group.find(g => g.fieldValue === group.name),
}));
const DocsSidebar = ({ docsNav, location, history }) => (
<aside id="sidebar" className="sidebar">
<DocsNav items={docsNav} location={location} />
<MobileNav items={docsNav} history={history} />
</aside>
);
export const DocsTemplate = ({
title,
editLinkPath,
body,
html,
showWidgets,
widgets,
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">
{editLinkPath && <EditLink path={editLinkPath} />}
<h1>{title}</h1>
{body ? body : <div dangerouslySetInnerHTML={{ __html: html }} />}
{showWidgets && <Widgets widgets={widgets} />}
</article>
</div>
</div>
);
const DocPage = ({ data, location, history }) => {
const { nav, page, widgets, menu } = data;
@ -25,21 +57,18 @@ const DocPage = ({ data, location, history }) => {
return (
<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>
<Helmet title={page.frontmatter.title} />
<DocsTemplate
title={page.frontmatter.title}
editLinkPath={page.fields.path}
html={page.html}
showWidgets={showWidgets}
widgets={widgets}
docsNav={docsNav}
location={location}
history={history}
showSidebar
/>
</Layout>
);
};