Improve reading time calculation

rstacruz · May 15, 2020 · 5d9ecde · 5d9ecde
1 parent e934386
commit 5d9ecde
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 2 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -69,6 +69,8 @@ const plugins = () => [
       rehypePlugins: [require('@rstacruz/rehype-sectionize').plugin],
     },
   },
+
+  'gatsby-remark-reading-time',
 ]
 
 const metadata = () => ({ title: 'TIL' })

diff --git a/package.json b/package.json
@@ -17,10 +17,12 @@
     "gatsby-remark-copy-linked-files": "^2.3.1",
     "gatsby-remark-images": "^3.3.0",
     "gatsby-remark-prismjs": "^3.5.1",
+    "gatsby-remark-reading-time": "^1.1.0",
     "gatsby-source-filesystem": "^2.3.0",
     "lodash-es": "^4.17.15",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",
+    "pretty-ms": "^7.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
@@ -54,6 +56,7 @@
   "devDependencies": {
     "@types/classnames": "^2.2.10",
     "@types/mdx-js__react": "^1.5.1",
+    "@types/pretty-ms": "^5.0.1",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "@types/react-helmet": "^5.0.15",

diff --git a/src/simple/ListingLink.module.css b/src/simple/ListingLink.module.css
@@ -30,3 +30,6 @@
 .toRead {
   @apply text-n-mute;
 }
+
+.date {
+}
diff --git a/src/simple/ListingLink.tsx b/src/simple/ListingLink.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import CSS from './ListingLink.module.css'
-import { PageLink } from './ListingPage'
+import { PageLink } from '../types'
 
 export function ListingLink({ page }: { page: PageLink }) {
+  const { readingTime } = page
+
+  // Approximate reading time
+  const mins = Math.max(1, Math.round(readingTime.time / 60000))
+  const apples = mins <= 2 ? 1 : mins <= 5 ? 2 : 3
+
   return (
     <Link to={page.slug} className={CSS.link}>
       <article>
@@ -15,7 +21,12 @@ export function ListingLink({ page }: { page: PageLink }) {
 
         <span className={CSS.meta}>
           <span className={CSS.date}>{page.date || 'Draft'}</span>
-          <span className={CSS.toRead}>{page.timeToRead} mins</span>
+          <span className={CSS.toRead} title={`${readingTime.words} words`}>
+            {mins} {mins === 1 ? 'min' : 'mins'}{' '}
+            {[...Array(apples)].map((_, index) => (
+              <span key={index}>·</span>
+            ))}
+          </span>
         </span>
       </article>
     </Link>

diff --git a/src/templates/blog-index.tsx b/src/templates/blog-index.tsx
@@ -20,6 +20,7 @@ export const usePages = (data: any) => {
       tags: frontmatter.tags,
       description: frontmatter.description,
       timeToRead: node.timeToRead,
+      readingTime: fields.readingTime,
     }
   })
 
@@ -41,6 +42,10 @@ const query = graphql`
           fields {
             slug
             book
+            readingTime {
+              time
+              words
+            }
           }
           frontmatter {
             date(formatString: "YYYY-MM-DD")

diff --git a/src/types.ts b/src/types.ts
@@ -18,5 +18,10 @@ export type PageLink = {
   title: string
   book?: string | null | void
   tags: string
+  description?: string | null | void
+  readingTime: {
+    time: number
+    words: number
+  }
 }
 
diff --git a/yarn.lock b/yarn.lock
@@ -1544,6 +1544,13 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/pretty-ms@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/pretty-ms/-/pretty-ms-5.0.1.tgz#f2f0d7be58caf8613d149053d446e0282ae11ff3"
+  integrity sha512-FFR4uj0p47Yq6JCrOt7DCaiUJIw7t9Vh7wwt3bF6qq99QRqjSH/doEGZsIIgZqhDmwjBObVBkrn0ICm1pY+mPg==
+  dependencies:
+    pretty-ms "*"
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -6710,6 +6717,13 @@ gatsby-remark-prismjs@^3.5.1:
     parse-numeric-range "^0.0.2"
     unist-util-visit "^1.4.1"
 
+gatsby-remark-reading-time@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-reading-time/-/gatsby-remark-reading-time-1.1.0.tgz#f23590ae34233c3625e656e0368ad0e0e84761a1"
+  integrity sha512-J2I/Aerw6iEcYUs9MH5r7Ky5PIe7Aiq7+M3sDWdRa0ddWYIOZGxPq8U1xYsIBwQjVtPovk8N4aMTau9kjQQLQA==
+  dependencies:
+    reading-time "^1.1.3"
+
 gatsby-source-filesystem@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.0.tgz#2c308b7e023b6cb37814156da9b681a3deb7b4c3"
@@ -10735,6 +10749,11 @@ parse-latin@^4.0.0:
     unist-util-modify-children "^1.0.0"
     unist-util-visit-children "^1.0.0"
 
+parse-ms@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-2.1.0.tgz#348565a753d4391fa524029956b172cb7753097d"
+  integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
+
 parse-numeric-range@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4"
@@ -11812,6 +11831,13 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
+pretty-ms@*, pretty-ms@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.0.tgz#45781273110caf35f55cab21a8a9bd403a233dc0"
+  integrity sha512-J3aPWiC5e9ZeZFuSeBraGxSkGMOvulSWsxDByOcbD1Pr75YL3LSNIKIb52WXbCLE1sS5s4inBBbryjF4Y05Ceg==
+  dependencies:
+    parse-ms "^2.1.0"
+
 prismjs@~1.17.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
@@ -12376,6 +12402,11 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
+reading-time@^1.1.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.2.0.tgz#ced71c06715762f805506328dcc1fd45d8249ac4"
+  integrity sha512-5b4XmKK4MEss63y0Lw0vn0Zn6G5kiHP88mUnD8UeEsyORj3sh1ghTH0/u6m1Ax9G2F4wUZrknlp6WlIsCvoXVA==
+
 recursive-readdir@2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"