openpanel integration und entwurf blog

src/app/features/blog/pages/blog-list/blog-list.component.html

@@ -0,0 +1,70 @@
+<app-blog-nav></app-blog-nav>
+
+<main class="blog-list">
+  <div class="blog-list__wrapper">
+
+    <header class="blog-list__header">
+      <h1>Blog</h1>
+      <p class="text-muted">Einblicke, Tipps und Hintergründe rund um Webdesign &amp; digitale Präsenz.</p>
+    </header>
+
+    @if (loading()) {
+      <div class="blog-list__grid">
+        @for (_ of [1, 2, 3]; track $index) {
+          <div class="blog-card blog-card--skeleton">
+            <div class="blog-card__image blog-card__image--skeleton"></div>
+            <div class="blog-card__body">
+              <div class="skeleton-line skeleton-line--title"></div>
+              <div class="skeleton-line skeleton-line--text"></div>
+              <div class="skeleton-line skeleton-line--text skeleton-line--short"></div>
+            </div>
+          </div>
+        }
+      </div>
+    } @else if (error()) {
+      <div class="blog-list__error">
+        <p>{{ error() }}</p>
+      </div>
+    } @else if (posts().length === 0) {
+      <div class="blog-list__empty">
+        <p>Noch keine Artikel veröffentlicht – schau bald wieder vorbei.</p>
+      </div>
+    } @else {
+      <div class="blog-list__grid">
+        @for (post of posts(); track post.id) {
+          <a
+            class="blog-card"
+            [routerLink]="['/blog', post.slug]"
+            opTrack="blog_post_click"
+            [opTrackProps]="{ slug: post.slug, title: post.title }">
+
+            <div class="blog-card__image">
+              @if (getCoverUrl(post); as coverUrl) {
+                <img [src]="coverUrl" [alt]="post.title" loading="lazy" />
+              } @else {
+                <div class="blog-card__image-placeholder"></div>
+              }
+            </div>
+
+            <div class="blog-card__body">
+              @if (post.tags.length > 0) {
+                <div class="blog-card__tags">
+                  @for (tag of post.tags; track tag.tags_id.id) {
+                    <span class="blog-card__tag">{{ tag.tags_id.name }}</span>
+                  }
+                </div>
+              }
+              <h2 class="blog-card__title">{{ post.title }}</h2>
+              <p class="blog-card__summary">{{ post.summary }}</p>
+              <time class="blog-card__date" [dateTime]="post.published_at">
+                {{ post.published_at | date:'d. MMMM yyyy':'':'de' }}
+              </time>
+            </div>
+
+          </a>
+        }
+      </div>
+    }
+
+  </div>
+</main>