diff --git a/postrify-frontend/src/app/components/post-detail/post-detail.component.ts b/postrify-frontend/src/app/components/post-detail/post-detail.component.ts index 6ed1ec8..6d5a108 100644 --- a/postrify-frontend/src/app/components/post-detail/post-detail.component.ts +++ b/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: `
@if (post) { @@ -86,6 +87,9 @@ import { ToastService } from '../../services/toast.service';
By: {{ post.user.username }} + {{ + post.content | readingTime + }} {{ post.createdAt | date: 'mediumDate' }}

{{ post.content }}

diff --git a/postrify-frontend/src/app/pipes/reading-time.pipe.spec.ts b/postrify-frontend/src/app/pipes/reading-time.pipe.spec.ts new file mode 100644 index 0000000..dd011cf --- /dev/null +++ b/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(); + }); +}); diff --git a/postrify-frontend/src/app/pipes/reading-time.pipe.ts b/postrify-frontend/src/app/pipes/reading-time.pipe.ts new file mode 100644 index 0000000..90192f6 --- /dev/null +++ b/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`; + } +}