Merge pull request #33 from jorbush/reading-time

adding reading time pipe

postrify-frontend/src/app/components/post-detail/post-detail.component.ts

@@ -5,11 +5,12 @@ import { AuthService } from '../../services/auth.service';
 import { PostService } from '../../services/post.service';
 import { CommonModule } from '@angular/common';
 import { ToastService } from '../../services/toast.service';
+import { ReadingTimePipe } from '../../pipes/reading-time.pipe';
 
 @Component({
   selector: 'app-post-detail',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, ReadingTimePipe],
   template: `
     <div class="post-detail-container">
       @if (post) {
@@ -86,6 +87,9 @@ import { ToastService } from '../../services/toast.service';
           </div>
           <div class="post-meta">
             <span class="author">By: {{ post.user.username }}</span>
+            <span class="reading-time" aria-label="Estimated reading time">{{
+              post.content | readingTime
+            }}</span>
             <span class="date">{{ post.createdAt | date: 'mediumDate' }}</span>
           </div>
           <p class="post-body">{{ post.content }}</p>

postrify-frontend/src/app/pipes/reading-time.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ReadingTimePipe } from './reading-time.pipe';
+
+describe('ReadingTimePipe', () => {
+  it('create an instance', () => {
+    const pipe = new ReadingTimePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

postrify-frontend/src/app/pipes/reading-time.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'readingTime',
+  standalone: true,
+})
+export class ReadingTimePipe implements PipeTransform {
+  transform(content: string): string {
+    if (!content) return '0 min read';
+    const wordsPerMinute = 200;
+    const words = content.trim().split(/\s+/).length;
+    const minutes = Math.ceil(words / wordsPerMinute);
+    return `${minutes} min read`;
+  }
+}