Added reading time to blog posts

Author: milan-codes

src/components/BlogPostCard.svelte

@@ -18,6 +18,7 @@
         </a>
     <p class="text-gray-600 dark:text-gray-400">{post.frontmatter.description}</p>
     <ul class="flex flex-wrap">
+        <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm">{post.readingTime} min read</li>
         {#each post.frontmatter.tags as tag}
             <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm font-medium hover:underline"><a href={`/tags/${tag}`}>{`#${tag}`}</a></li>
         {/each}

src/pages/blog/index.astro

@@ -9,9 +9,17 @@ const orderedPosts = nonDraftPosts.sort((a, b) => {
   const bDate = new Date(b.frontmatter.pubDate);
   return bDate.valueOf() - aDate.valueOf();
 });
+const postsWithReadingTime = orderedPosts.map((post) => {
+  const wordCount = post.rawContent().split(" ").length;
+  const readingTime = Math.ceil(wordCount / 200);
+  return {
+    ...post,
+    readingTime,
+  };
+});
 ---
 
 <BaseLayout title="Milán Herke - Blog">
   <Navbar />
-  {orderedPosts.map((post) => <BlogPostCard post={post} />)}
+  {postsWithReadingTime.map((post) => <BlogPostCard post={post} />)}
 </BaseLayout>