chore: add reading time plugin

beanloop · Dec 17, 2019 · 555c908 · 555c908
1 parent cdc77a4
commit 555c908
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 4 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -46,7 +46,7 @@ module.exports = {
             },
             aliases: {},
           },
-          // `gatsby-remark-prismjs`,
+          `gatsby-remark-reading-time`,
           `gatsby-remark-copy-linked-files`,
           `gatsby-remark-smartypants`,
         ],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "gatsby-remark-copy-linked-files": "^2.0.12",
     "gatsby-remark-images": "^2.0.6",
     "gatsby-remark-prismjs": "^3.3.27",
+    "gatsby-remark-reading-time": "^1.1.0",
     "gatsby-remark-responsive-iframe": "^2.1.1",
     "gatsby-remark-smartypants": "^2.0.9",
     "gatsby-source-filesystem": "^2.0.32",

diff --git a/src/components/bio.js b/src/components/bio.js
@@ -21,7 +21,6 @@ function Bio() {
       query={bioQuery}
       render={data => {
         const { author, social } = data.site.siteMetadata
-        console.log(data.avatar.childImageSharp.fixed)
         return (
           <div
             style={{

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -32,7 +32,7 @@ class BlogIndex extends React.Component {
                   {title}
                 </Link>
               </h3>
-              <small>{node.frontmatter.date}</small>
+              <small>{node.frontmatter.date} - {node.fields.readingTime.text}</small>
               <p
                 dangerouslySetInnerHTML={{
                   __html: node.frontmatter.description || node.excerpt,
@@ -61,6 +61,9 @@ export const pageQuery = graphql`
           excerpt
           fields {
             slug
+            readingTime {
+              text
+            }
           }
           frontmatter {
             date(formatString: "MMMM DD, YYYY")

diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -27,7 +27,7 @@ class BlogPostTemplate extends React.Component {
             marginTop: rhythm(-1),
           }}
         >
-          {post.frontmatter.date}
+          {post.frontmatter.date} - {post.fields.readingTime.text}
         </p>
         <div dangerouslySetInnerHTML={{ __html: post.html }} />
         <hr
@@ -85,6 +85,11 @@ export const pageQuery = graphql`
         date(formatString: "MMMM DD, YYYY")
         description
       }
+      fields {
+        readingTime {
+          text
+        }
+      }
     }
   }
 `