From 3c0917a765a0f08daf084cb5036c99437cff2670 Mon Sep 17 00:00:00 2001
From: Maxi Ferreira <charca@gmail.com>
Date: Tue, 30 Nov 2021 22:50:55 -0800
Subject: [PATCH] Added reading time

---
 TODO                        |  2 +-
 package-lock.json           |  7 ++++++-
 package.json                |  3 +++
 src/pages/blog/[slug].astro |  5 +++--
 src/utils/getPostData.ts    | 14 ++++++++++++++
 5 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/getPostData.ts

diff --git a/TODO b/TODO
index f1acff9..b573592 100644
--- a/TODO
+++ b/TODO
@@ -5,6 +5,6 @@
 [ ] Use css variables
 [ ] Dark mode
 [x] Resize Logo
-[ ] Reading time
+[x] Reading time
 [x] Bio component
 [x] Add social image
diff --git a/package-lock.json b/package-lock.json
index 3f014e7..4ed5f84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "@example/starter",
+  "name": "astro-blog-template",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
@@ -3341,6 +3341,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "reading-time": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="
+    },
     "rehype-raw": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.0.tgz",
diff --git a/package.json b/package.json
index 737285f..cb58ef7 100644
--- a/package.json
+++ b/package.json
@@ -11,5 +11,8 @@
   "devDependencies": {
     "astro": "^0.21.5",
     "@astrojs/renderer-svelte": "^0.2.1"
+  },
+  "dependencies": {
+    "reading-time": "^1.5.0"
   }
 }
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 1361a5d..4603536 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -1,6 +1,7 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import Bio from '../../components/Bio.astro';
+import getPostData from '../../utils/getPostData';
 
 export function getStaticPaths() {
   const posts = Astro.fetchContent('../../data/blog-posts/*.md');
@@ -11,13 +12,13 @@ export function getStaticPaths() {
 }
 
 const { Content, title, description, publishDate, heroImage } = Astro.props.post;
-const slug = Astro.props.post.file.pathname.split('/').pop().split('.').shift();
+const { slug, readingTime } = getPostData(Astro.props.post);
 const permalink = `${Astro.site.href}${slug}`;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">
   <header>
-    <p>{publishDate} ~ {'TODO: READING TIME'}</p>
+    <p>{publishDate} ~ {readingTime}</p>
     <h1>{title}</h1>
     <hr />
   </header>
diff --git a/src/utils/getPostData.ts b/src/utils/getPostData.ts
new file mode 100644
index 0000000..7ceabdf
--- /dev/null
+++ b/src/utils/getPostData.ts
@@ -0,0 +1,14 @@
+import readingTime from 'reading-time';
+
+type Post = {
+  title: string,
+  file: URL,
+  content: { source: string }
+}
+
+export default function getPostData(post: Post) {
+  return {
+    slug: post.file.pathname.split('/').pop().split('.').shift(),
+    readingTime: readingTime(post.content.source).text,
+  }
+}