71 lines
2.4 KiB
HTML
71 lines
2.4 KiB
HTML
<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 & 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>
|