Skip to content
Permalink
Browse files

Install and configure gatsby-remark-reading-time plugin

  • Loading branch information...
mariusbalcytis committed Jan 10, 2019
1 parent fd8ece6 commit bea65a9e85f5da23716b77e05c71088c77f8f9d8
@@ -268,6 +268,7 @@ module.exports = {
options: {
include: /svg-icons/
}
}
},
'gatsby-remark-reading-time'
]
};
@@ -27,6 +27,7 @@
"gatsby-remark-external-links": "^0.0.4",
"gatsby-remark-images": "^2.0.1",
"gatsby-remark-prismjs": "^3.0.0",
"gatsby-remark-reading-time": "^1.0.1",
"gatsby-remark-responsive-iframe": "^2.0.5",
"gatsby-remark-smartypants": "^2.0.5",
"gatsby-source-filesystem": "^2.0.1",
@@ -2,6 +2,7 @@ import { FaArrowRight } from "react-icons/fa/";
import { FaCalendar } from "react-icons/fa/";
import { FaTag } from "react-icons/fa/";
import { FaUser } from "react-icons/fa/";
import { FaClock } from "react-icons/fa/";
import Img from "gatsby-image";
import { Link } from "gatsby";
import PropTypes from "prop-types";
@@ -12,7 +13,7 @@ const Item = props => {
theme,
post: {
excerpt,
fields: { slug, prefix, author },
fields: { slug, prefix, author, readingTime: {text: readingTime} },
frontmatter: {
title,
category,
@@ -36,6 +37,9 @@ const Item = props => {
{title} <FaArrowRight className="arrow" />
</h1>
<p className="meta">
<span>
<FaClock size={18} /> {readingTime}
</span>
<span>
<FaCalendar size={18} /> {prefix}
</span>
@@ -5,12 +5,16 @@ import {Link} from "gatsby";
import {FaCalendar} from "react-icons/fa/";
import {FaUser} from "react-icons/fa/";
import {FaTag} from "react-icons/fa/";
import {FaClock} from "react-icons/fa/";

const Meta = props => {
const {prefix, authorName: authorName, category, theme} = props;
const {prefix, authorName, category, theme, readingTime} = props;

return (
<p className="meta">
{readingTime && (<span>
<FaClock size={18}/> {readingTime}
</span>)}
<span>
<FaCalendar size={18}/> {prefix}
</span>
@@ -55,6 +59,7 @@ const Meta = props => {
Meta.propTypes = {
prefix: PropTypes.string.isRequired,
authorName: PropTypes.string,
readingTime: PropTypes.string,
category: PropTypes.string,
theme: PropTypes.object.isRequired
};
@@ -23,7 +23,7 @@ const Post = props => {
post,
post: {
html,
fields: { prefix, slug },
fields: { prefix, slug, readingTime: {text: readingTime} },
frontmatter: { title, category }
},
author,
@@ -37,7 +37,8 @@ const Post = props => {
<React.Fragment>
<header>
<Headline title={title} theme={theme} />
<Meta prefix={prefix} authorName={author && author.frontmatter.name} category={category} theme={theme} />
<Meta prefix={prefix} authorName={author && author.frontmatter.name} category={category} theme={theme}
readingTime={readingTime}/>
</header>
<Bodytext html={html} theme={theme} />
<footer>
@@ -7,66 +7,66 @@ import Hero from "../components/Hero";
import Seo from "../components/Seo";

class IndexPage extends React.Component {
separator = React.createRef();
separator = React.createRef();

scrollToContent = e => {
this.separator.current.scrollIntoView({ block: "start", behavior: "smooth" });
};
scrollToContent = e => {
this.separator.current.scrollIntoView({ block: "start", behavior: "smooth" });
};

render() {
const {
data: {
posts: { edges: posts = [] },
bgDesktop: {
resize: { src: desktop }
},
bgTablet: {
resize: { src: tablet }
},
bgMobile: {
resize: { src: mobile }
},
site: {
siteMetadata: { facebook }
}
}
} = this.props;
render() {
const {
data: {
posts: { edges: posts = [] },
bgDesktop: {
resize: { src: desktop }
},
bgTablet: {
resize: { src: tablet }
},
bgMobile: {
resize: { src: mobile }
},
site: {
siteMetadata: { facebook }
}
}
} = this.props;

const backgrounds = {
desktop,
tablet,
mobile
};
const backgrounds = {
desktop,
tablet,
mobile
};

return (
<React.Fragment>
<ThemeContext.Consumer>
{theme => (
<Hero scrollToContent={this.scrollToContent} backgrounds={backgrounds} theme={theme} />
)}
</ThemeContext.Consumer>
return (
<React.Fragment>
<ThemeContext.Consumer>
{theme => (
<Hero scrollToContent={this.scrollToContent} backgrounds={backgrounds} theme={theme} />
)}
</ThemeContext.Consumer>

<hr ref={this.separator} />
<hr ref={this.separator} />

<ThemeContext.Consumer>
{theme => <Blog posts={posts} theme={theme} />}
</ThemeContext.Consumer>
<ThemeContext.Consumer>
{theme => <Blog posts={posts} theme={theme} />}
</ThemeContext.Consumer>

<Seo facebook={facebook} />
<Seo facebook={facebook} />

<style jsx>{`
<style jsx>{`
hr {
margin: 0;
border: 0;
}
`}</style>
</React.Fragment>
);
}
</React.Fragment>
);
}
}

IndexPage.propTypes = {
data: PropTypes.object.isRequired
data: PropTypes.object.isRequired
};

export default IndexPage;
@@ -89,6 +89,9 @@ export const query = graphql`
name
}
}
readingTime {
text
}
}
frontmatter {
title
@@ -61,6 +61,9 @@ export const postQuery = graphql`
fields {
slug
prefix
readingTime {
text
}
}
frontmatter {
title

0 comments on commit bea65a9

Please sign in to comment.
You can’t perform that action at this time.