99 lines
4.3 KiB
PHP
99 lines
4.3 KiB
PHP
<?php snippet('layout', slots: true) ?>
|
|
|
|
<?php
|
|
// Filterfunktionalität implementieren
|
|
$posts = $page->children()->sortBy('date', 'desc')->paginate(5);
|
|
|
|
// Nach Kategorie (Tag) filtern
|
|
if ($tag = param('tag')) {
|
|
$posts = $posts->filterBy('tags', $tag, ',');
|
|
}
|
|
?>
|
|
|
|
<?php foreach ($posts as $post): ?>
|
|
<article class="relative flex flex-col gap-8 lg:flex-row py-12">
|
|
<div class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0">
|
|
<img src="<?= $post->image()->url() ?>" alt="" class="absolute inset-0 size-full rounded-xl object-cover" />
|
|
<div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-x-4 text-m justify-between">
|
|
<div>
|
|
<time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
|
|
</div>
|
|
<div>
|
|
<?php foreach ($post->tags()->split() as $tag): ?>
|
|
<a href="<?= $page->url(['params' => ['tag' => $tag]]) ?>"
|
|
class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"><?= $tag ?></a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<div class="group relative">
|
|
<h2>
|
|
<a href="<?= $post->url() ?>" class="relative">
|
|
<span class="absolute inset-0"></span>
|
|
<?= $post->headline() ?>
|
|
</a>
|
|
</h2>
|
|
<p><?= $post->summary() ?></p>
|
|
</div>
|
|
<?php if ($user = $post->author()->toUser()): ?>
|
|
<div class="mt-6 flex border-t border-gray-900/5 pt-6">
|
|
<div class="relative flex items-center gap-x-4">
|
|
<?php if ($user->avatar()): ?>
|
|
<img src="<?= $user->avatar()->url() ?>" alt="" class="size-10 rounded-full bg-gray-50" />
|
|
<?php endif; ?>
|
|
<div class="text-sm/6">
|
|
<p>
|
|
<span class="absolute inset-0"></span>
|
|
<div class="text-xl">
|
|
<?= $user->username() ?>
|
|
</div>
|
|
</p>
|
|
<p class="text-sm"><?= $user->role()->title() ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif ?>
|
|
</div>
|
|
</article>
|
|
<?php endforeach ?>
|
|
<?php $pagination = $posts->pagination(); ?>
|
|
<?php if ($pagination->hasPages()): ?>
|
|
<nav class="flex justify-between items-center my-12 border-t border-gray-100 pt-8">
|
|
<?php if ($pagination->hasPrevPage()): ?>
|
|
<a href="<?= $pagination->prevPageUrl() ?>"
|
|
class="flex items-center gap-2 rounded-full bg-gray-50 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors">
|
|
← Neuere Beiträge
|
|
</a>
|
|
<?php else: ?>
|
|
<span class="flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-gray-300 cursor-not-allowed">
|
|
← Neuere Beiträge
|
|
</span>
|
|
<?php endif ?>
|
|
|
|
<span class="text-xs font-medium text-gray-400">
|
|
Seite <?= $pagination->page() ?> von <?= $pagination->pages() ?>
|
|
</span>
|
|
|
|
<?php if ($pagination->hasNextPage()): ?>
|
|
<a href="<?= $pagination->nextPageUrl() ?>"
|
|
class="flex items-center gap-2 rounded-full bg-gray-50 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors">
|
|
Ältere Beiträge →
|
|
</a>
|
|
<?php else: ?>
|
|
<span class="flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-gray-300 cursor-not-allowed">
|
|
Ältere Beiträge →
|
|
</span>
|
|
<?php endif ?>
|
|
</nav>
|
|
<?php endif ?>
|
|
|
|
|
|
<?php if (param('tag')): ?>
|
|
<div class="my-8">
|
|
<a href="<?= $page->url() ?>" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded">
|
|
Alle Beiträge anzeigen
|
|
</a>
|
|
</div>
|
|
<?php endif ?><?php endsnippet() ?>
|