added reading time calc

Author: Kyle-Undefined

src/components/PostCard.astro

@@ -1,12 +1,14 @@
 ---
 import type { CollectionEntry } from 'astro:content';
+import { getReadingTimeLabel } from '../utils/readingTime';
 
 interface Props {
   post: CollectionEntry<'blog'>;
 }
 
 const { post } = Astro.props;
 const { title, description, pubDate } = post.data;
+const readingTime = getReadingTimeLabel(post.body);
 ---
 
 <a href={`/blog/${post.slug}`} class="group flex flex-col h-full bg-blog-code-bg rounded-2xl overflow-hidden shadow-sm hover:shadow-md duration-300 border border-blog-border hover:border-blog-accent transition-all duration-300">
@@ -17,14 +19,16 @@ const { title, description, pubDate } = post.data;
   </div>
 
   <div class="p-6 flex flex-col flex-grow">
-    <div class="text-sm text-blog-text mb-2">
+    <div class="mb-2 flex items-center gap-2 text-sm text-blog-text">
       <time datetime={pubDate.toISOString()}>
         {pubDate.toLocaleDateString('en-us', {
           year: 'numeric',
           month: 'short',
           day: 'numeric',
         })}
       </time>
+      <span aria-hidden="true">&middot;</span>
+      <span>{readingTime}</span>
     </div>
     <p class="text-blog-text text-sm line-clamp-3">
       {description}

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

@@ -2,6 +2,7 @@
 import { type CollectionEntry, getCollection } from 'astro:content';
 import Layout from '../../layouts/Layout.astro';
 import PostHogLayout from '../../layouts/PostHogLayout.astro';
+import { getReadingTimeLabel } from '../../utils/readingTime';
 
 export async function getStaticPaths() {
 	const posts = await getCollection('blog');
@@ -15,6 +16,7 @@ type Props = CollectionEntry<'blog'>;
 const post = Astro.props;
 const { Content, headings } = await post.render();
 const tocHeadings = headings.filter((heading) => heading.depth >= 2 && heading.depth <= 3);
+const readingTime = getReadingTimeLabel(post.body);
 ---
 
 <PostHogLayout>
@@ -36,6 +38,9 @@ const tocHeadings = headings.filter((heading) => heading.depth >= 2 && heading.d
               {post.data.title}
             </h1>
             <h2>{post.data.description}</h2>
+            <h3 class="mx-auto mt-3 inline-flex rounded-full border border-blog-border bg-blog-code-bg/60 px-3 py-1 text-sm font-medium italic tracking-wide text-blog-link/90">
+              {readingTime}
+            </h3>
           </div>
 
           {tocHeadings.length > 0 && (

src/utils/readingTime.ts

@@ -0,0 +1,26 @@
+const WORDS_PER_MINUTE = 200;
+
+function stripMarkdown(markdown: string) {
+  return markdown
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/`[^`]*`/g, ' ')
+    .replace(/!\[\[[^\]]+]]/g, ' ')
+    .replace(/\[\[[^\]]+]]/g, ' ')
+    .replace(/!\[[^\]]*]\([^)]*\)/g, ' ')
+    .replace(/\[([^\]]+)]\([^)]*\)/g, '$1')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/[>#*_~`-]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+export function getReadingTimeMinutes(markdown: string, wordsPerMinute = WORDS_PER_MINUTE) {
+  const plainText = stripMarkdown(markdown);
+  const words = plainText ? plainText.split(' ').length : 0;
+  return Math.max(1, Math.ceil(words / wordsPerMinute));
+}
+
+export function getReadingTimeLabel(markdown: string, wordsPerMinute = WORDS_PER_MINUTE) {
+  const minutes = getReadingTimeMinutes(markdown, wordsPerMinute);
+  return `${minutes} min read`;
+}