-
Notifications
You must be signed in to change notification settings - Fork 9
/
BlogPostTpl.js
91 lines (85 loc) · 2.25 KB
/
BlogPostTpl.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { graphql } from "gatsby";
import { object, shape } from "prop-types";
import React, { Component } from "react";
import Img from "gatsby-image";
import { Body, Header, Helmet, Layout } from "ui/partials";
import { Copy, Tile } from "ui/components";
export default class BlogPostTpl extends Component {
constructor(props) {
super(props);
const readingTime = Math.random() * 300;
if (typeof window !== "undefined") {
this.tick = this.tick.bind(this);
setInterval(this.tick, 3000);
}
this.state = {
readingTime
};
}
tick() {
this.setState(prevState => ({
readingTime: prevState.readingTime + Math.random() * 15 - 4
}));
}
render() {
const blogPost = this.props.data.markdownRemark;
const { frontmatter, html } = blogPost;
const { cover, date, title } = frontmatter;
return (
<>
<Helmet {...this.props} title={title} />
<Layout {...this.props}>
<Header>
<span className="small">
Reading Time: {this.state.readingTime.toFixed(2)} seconds
</span>
<h1 className="hero">{title}</h1>
<span className="small">{date}</span>
</Header>
<Body
style={{
marginLeft: "auto",
marginRight: "auto",
maxWidth: "900px"
}}
>
{cover ? (
<Img fluid={cover.childImageSharp.fluid} alt={title} />
) : null}
<Tile space="h">
<Copy dangerouslySetInnerHTML={{ __html: html }} />
</Tile>
</Body>
</Layout>
</>
);
}
}
BlogPostTpl.propTypes = {
data: shape({
markdownRemark: object.isRequired
}).isRequired
};
export const pageQuery = graphql`
query BlogPostsByUID($uid: String!) {
markdownRemark(frontmatter: { uid: { eq: $uid } }) {
html
frontmatter {
uid
date(formatString: "MMMM DD, YYYY")
title
cover {
childImageSharp {
fluid(
maxWidth: 800
quality: 90
traceSVG: { color: "lightgray" }
) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
}
}
`;