From 462bf261cfb64c24b574903f6c7918182043cb14 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 17 Aug 2021 14:41:46 +0100
Subject: [PATCH] Add reading time

---
 package.json          |  1 +
 pages/blog/[slug].tsx | 10 +++++++---
 yarn.lock             |  5 +++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 1afae26..829bba1 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "prism-react-renderer": "^1.1.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "reading-time": "^1.4.0",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index 8ff186f..a26827b 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -13,10 +13,12 @@ import AllComponents from '../../components/All';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
+import readingTime from 'reading-time';
 
 interface Props {
 	source: MdxRemote.Source;
 	frontMatter: any;
+	text: string;
 }
 
 const Wrapper = styled.div`
@@ -97,9 +99,10 @@ const Wrapper = styled.div`
 
 const components = AllComponents;
 
-const BlogPost: FC<Props> = ({ source, frontMatter }) => {
+const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 	const content = hydrate(source, { components });
 	const router = useRouter();
+	const stats = readingTime(text);
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -149,7 +152,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
 					<h1>{frontMatter.title}</h1>
 					<p>{frontMatter.description}</p>
 					<p>
-						Written by <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b>
+						By <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b> ({stats.text})
 					</p>
 					{frontMatter.tags && (
 						<div className='tags-wrapper'>
@@ -190,7 +193,8 @@ export const getStaticProps: GetStaticProps = async ({ params }: any) => {
 	return {
 		props: {
 			source: mdxSource,
-			frontMatter: data
+			frontMatter: data,
+			text: content
 		}
 	};
 };
diff --git a/yarn.lock b/yarn.lock
index 036823f..1e14291 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3098,6 +3098,11 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+reading-time@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.4.0.tgz#53fd822ceed6ca44e07497b3e975af1712ba5a86"
+  integrity sha512-0I9aP583rqQhm6T6Y+pYgYaM4w649VHgQPC24xSWXpn/4qRs08Zu6KgXRf0da6/k7IHoC6idm76fU6vz4mmzHQ==
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"