From ea9427f474111954fb736fc8661dbcbf7da0d0bd Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Mon, 30 Dec 2019 17:39:01 +0530
Subject: [PATCH] Display post reading time via @tryghost/helpers

---
 package.json            |  1 +
 src/components/Card.vue |  9 ++++++++-
 src/pages/Index.vue     |  1 +
 yarn.lock               | 12 ++++++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7cbb5bb..7c2f9ae 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@gridsome/source-filesystem": "^0.6.0",
     "@gridsome/source-ghost": "^0.2.0",
     "@gridsome/transformer-remark": "^0.3.0",
+    "@tryghost/helpers": "^1.1.20",
     "gridsome": "^0.7.0"
   },
   "devDependencies": {
diff --git a/src/components/Card.vue b/src/components/Card.vue
index b424714..413fd51 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -30,7 +30,7 @@
           </li>
         </ul>
 
-        <span class="reading-time">{{ cardData.timeToRead }} MIN READ</span>
+        <span class="reading-time">{{ readingTime }}</span>
       </footer>
     </div>
   </article>
@@ -39,6 +39,7 @@
 <script>
 import Avatar from "./icons/Avatar";
 import changeUrls from '../filters/changeUrls';
+import { readingTime as readingTimeHelper } from '@tryghost/helpers'
 
 export default {
   components: {
@@ -49,6 +50,12 @@ export default {
     isLarge: Boolean
   },
   computed: {
+    readingTime() {
+      return readingTimeHelper({
+        html: this.cardData.content,
+        feature_image: this.cardData.coverImage
+      })
+    },
     articleClass() {
       let classes = ["post-card", "post"];
       if (this.cardData.fields === null) {
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 628d7de..23a7dd6 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -74,6 +74,7 @@
         slug
         id
         coverImage: feature_image
+        content: html
         authors {
           name
           url
diff --git a/yarn.lock b/yarn.lock
index a63be4e..88e9616 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -832,6 +832,13 @@
     axios "0.19.0"
     ghost-ignition "^3.0.0"
 
+"@tryghost/helpers@^1.1.20":
+  version "1.1.20"
+  resolved "https://registry.yarnpkg.com/@tryghost/helpers/-/helpers-1.1.20.tgz#e0b829b00b3fba83938cad979afc35e458bc698a"
+  integrity sha512-qnvBwbqPK54jbrp1FoigTS5HOz8NhCkE9Aknm357zSEmBzyhNqilivjV1DoDP/G2Ebwt9Bt9drPhTR+1MlBwvA==
+  dependencies:
+    lodash-es "^4.17.11"
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -5291,6 +5298,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash-es@^4.17.11:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"