Added reading time

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

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",

package.json

@@ -11,5 +11,8 @@
   "devDependencies": {
     "astro": "^0.21.5",
     "@astrojs/renderer-svelte": "^0.2.1"
+  },
+  "dependencies": {
+    "reading-time": "^1.5.0"
   }
 }

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>

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,
+  }
+}