chore: add website preview templates (#1716)
This commit is contained in:
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user