41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { MarkdownService } from '../../core/services/markdown.service';
|
|
import { PublicBlogPost } from '../../core/services/blog.service';
|
|
|
|
@Component({
|
|
selector: 'app-blog-presenter',
|
|
standalone: true,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [CommonModule],
|
|
styles: [`
|
|
.blog-item { display: block; margin: 0 0 16px 0; }
|
|
.blog-title { margin: 0 0 4px 0; font-size: 18px; }
|
|
.blog-date { display: block; font-size: 12px; opacity: 0.7; margin-bottom: 8px; }
|
|
.blog-body { font-size: 14px; }
|
|
`],
|
|
template: `
|
|
<article class="blog-item" [attr.data-testid]="'blog-presenter-' + post().id">
|
|
<h2 class="blog-title" [attr.data-testid]="'blog-presenter-title-' + post().id">
|
|
{{ post().title }}
|
|
</h2>
|
|
<time class="blog-date" [attr.data-testid]="'blog-presenter-date-' + post().id">
|
|
{{ post().publishedAt | date: 'medium' }}
|
|
</time>
|
|
<div
|
|
class="blog-body"
|
|
[attr.data-testid]="'blog-presenter-body-' + post().id"
|
|
[innerHTML]="renderedHtml()"
|
|
></div>
|
|
</article>
|
|
`,
|
|
})
|
|
export class BlogPresenterComponent {
|
|
readonly post = input.required<PublicBlogPost>();
|
|
private readonly markdown = new MarkdownService();
|
|
|
|
renderedHtml(): string {
|
|
return this.markdown.render(this.post()?.bodyMd ?? '');
|
|
}
|
|
}
|