initiale Entwicklung

src/app/components/blog.component.ts

@@ -0,0 +1,59 @@
+// 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
+  }
+}