Community Plugin
View plugin on GitHubgatsby-remark-reading-time
Adds a medium-like reading time estimate to your Gatsby remark posts. Powered by reading-time
.
This plugin supports both MD and MDX formats.
Installation
Install
yarn add gatsby-remark-reading-time
Markdown (MD)
Add to gatsby-transformer-remark
plugins in gatsby-config.js
// gatsby-config.js
...
plugins: [
...
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-reading-time`,
// ...
],
},
},
]
MDX
Add this plugin outside your gatsby-plugin-mdx
config, i.e. this plugin should not live within either of remarkPlugins
or gatsbyRemarkPlugins
config options:
// gatsby-config.js
...
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [...],
remarkPlugins: [...],
},
},
'gatsby-remark-reading-time',
...
],
Usage
The reading time can be queried in the relevant markdown fields. An example of this is shown below for a single post:
Markdown (MD)
If you are using the gatsby-transformer-remark
plugin then you can use:
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
htmlAst
excerpt(pruneLength: 200)
frontmatter {
title
date(formatString: "MMMM Do, YYYY")
}
fields {
slug
readingTime {
text
}
}
}
}
`;
MDX
If you are using the gatsby-plugin-mdx
plugin then you can use:
export const query = graphql`
query($slug: String!) {
mdx(fields: { slug: { eq: $slug } }) {
body
excerpt(pruneLength: 160)
frontmatter {
title
date(formatString: "MMMM Do, YYYY")
}
fields {
readingTime {
text
}
}
}
}
`;
Fields
There are 4 available fields within readingTime
:
text
: ‘1 min read’,minutes
: 1,time
: 60000, (milliseconds)words
: 200
License
MIT