Fix/wrong reading time on main page (#15)

* refactor: moving the calculation of the reading time to a centralized place

* fix: wrong estimated read time on main page

Author: RichardsonWTR

src/pages/blog/[...slug].astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 import BlogPost from '../../layouts/BlogPost.astro';
-import readingTime from 'reading-time'; // Add this import if it doesn't exist yet
+import calculateReadingTime from '../../utils/calculateReadingTime'
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('blog');
@@ -12,18 +12,8 @@ export async function getStaticPaths() {
   );
   
   return sortedEntries.map((entry, index) => {
-    // Calculate readingTime from markdown content
-    const readingTimeResult = readingTime(entry.body);
-    
-    // Format the read time into a readable string
-    let readingTimeStr;
-    if (readingTimeResult.minutes < 1) {
-      readingTimeStr = 'Under 1 min read';
-    } else {
-      // Round up and format to "X minutes read"
-      const minutes = Math.ceil(readingTimeResult.minutes);
-      readingTimeStr = `${minutes} min read`;
-    }
+
+    const { readingTimeResult, readingTimeStr } = calculateReadingTime(entry.body)
     
     return {
       params: { slug: entry.slug },

src/pages/index.astro

@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
 import FormattedDate from '../components/FormattedDate.astro';
 import { SITE_TITLE } from '../consts';
+import calculateReadingTime from '../utils/calculateReadingTime'
 
 // Get all blog posts
 const allPosts = await getCollection('blog');
@@ -94,7 +95,7 @@ const allTags = [...new Set(allPosts.flatMap(post => post.data.tags || []))].sli
                 <FormattedDate date={post.data.pubDate} format="long" />
               </time>
               <span class="relative z-10 rounded-full bg-zinc-100 dark:bg-zinc-800 px-2 sm:px-3 py-1 sm:py-1.5 font-medium text-zinc-600 dark:text-zinc-300 theme-transition-all">
-                {post.data.readingTime || `${Math.ceil(post.body.length / 2000)} min read`}
+                {post.data.readingTime || calculateReadingTime(post.body).readingTimeStr} 
               </span>
             </div>
 

src/utils/calculateReadingTime.ts

@@ -0,0 +1,23 @@
+import readingTime from 'reading-time';
+
+const calculateReadingTime = (content: string) => {
+  // Calculate readingTime from markdown content
+  const readingTimeResult = readingTime(content);
+  
+  // Format the read time into a readable string
+  let readingTimeStr;
+  if (readingTimeResult.minutes < 1) {
+    readingTimeStr = 'Under 1 min read';
+  } else {
+    // Round up and format to "X minutes read"
+    const minutes = Math.ceil(readingTimeResult.minutes);
+    readingTimeStr = `${minutes} min read`;
+  }
+
+  return {
+    readingTimeStr,
+    readingTimeResult
+  }
+}
+
+export default calculateReadingTime