60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
// src/app/components/blog/blog.component.ts
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { RouterLink } from '@angular/router';
|
|
import { BlogService } from '../services/blog.service';
|
|
|
|
@Component({
|
|
selector: 'app-blog',
|
|
standalone: true,
|
|
imports: [CommonModule, RouterLink],
|
|
template: `
|
|
<section id="blog" class="py-20 bg-gray-100" data-aos="fade-up">
|
|
<div class="container mx-auto px-6">
|
|
<h2 class="text-3xl font-bold text-center">Latest Insights</h2>
|
|
<p class="mt-4 text-center text-gray-600">Stay updated with our latest news and articles.</p>
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div *ngFor="let post of blogPosts" class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
|
|
<img [src]="post.image" [alt]="post.title" class="rounded-t-lg mb-4 w-full h-auto object-cover">
|
|
<h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
{{ getShortContent(post.content) }}
|
|
</p>
|
|
<a [routerLink]="['/blog', getPostId(post.title)]" class="text-blue-600 hover:underline">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
`
|
|
})
|
|
export class BlogComponent implements OnInit {
|
|
blogPosts: any[] = [];
|
|
|
|
constructor(private blogService: BlogService) {}
|
|
|
|
ngOnInit() {
|
|
const posts = this.blogService.getAllPosts();
|
|
// Convert the blogPosts object to an array
|
|
this.blogPosts = Object.keys(posts).map(key => posts[key]);
|
|
}
|
|
|
|
// Function to get a short preview of the content
|
|
getShortContent(content: string): string {
|
|
const div = document.createElement('div');
|
|
div.innerHTML = content;
|
|
const text = div.textContent || div.innerText || '';
|
|
return text.substring(0, 150) + '...';
|
|
}
|
|
|
|
// Function to get post ID based on the title
|
|
getPostId(title: string): string {
|
|
const posts = this.blogService.getAllPosts();
|
|
for (const id in posts) {
|
|
if (posts[id].title === title) {
|
|
return id;
|
|
}
|
|
}
|
|
return '1'; // Default to '1' if not found
|
|
}
|
|
}
|