feat: extend news section with tag filtering, improved layout, and homepage integration

Added tag filtering functionality to the blog and news sections, allowing users to filter posts by categories. Enhanced layout with improved tag display, author details, and responsive styling. Integrated the latest news preview into the homepage template. Adjusted visibility logic for navigation arrows in event carousel and refined related PHP snippets for better clarity and reusability.

site/templates/blog.php

@@ -1,17 +1,33 @@
 <?php snippet('layout', slots: true) ?>
 
-    <?php foreach($page->children() as $post): ?>
-    <article class="relative isolate flex flex-col gap-8 lg:flex-row">
+    <?php
+        // Filterfunktionalität implementieren
+        $posts = $page->children()->sortBy('date', 'desc');
+
+        // 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-2xl bg-gray-50 object-cover" />
+            <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-xs">
-                <time datetime="2020-03-16" class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
-                <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
+            <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 max-w-xl">
+            <div class="group relative">
                 <h2>
                     <a href="<?= $post->url() ?>" class="relative">
                         <span class="absolute inset-0"></span>
@@ -26,12 +42,10 @@
                     <img src="<?= $user->avatar()->url() ?>" alt="" class="size-10 rounded-full bg-gray-50" />
                     <div class="text-sm/6">
                         <p>
-                            <a href="#">
-                                <span class="absolute inset-0"></span>
-                                <div class="text-xl">
-                                    <?= $user->username() ?>
-                                </div>
-                            </a>
+                            <span class="absolute inset-0"></span>
+                            <div class="text-xl">
+                                <?= $user->username() ?>
+                            </div>
                         </p>
                         <p class="text-sm"><?= $user->role()->title() ?></p>
                     </div>
@@ -41,5 +55,13 @@
         </div>
     </article>
     <?php endforeach ?>
+    
+    <?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() ?>

site/templates/home.php

@@ -2,6 +2,13 @@
 
     <h1>Hallo Welt!</h1>
 
-    <?php snippet('termine-home') ?>
+    <?php snippet('home-news', [
+        'news' => page('news')
+        ->children()
+        ->limit(3)
+        ->sortBy('date', 'desc')
+    ]) ?>
+
+    <?php snippet('home-termine') ?>
 
 <?php endsnippet() ?>

site/templates/news.php

@@ -23,12 +23,23 @@
 
 
 <?php snippet('layout', slots: true) ?>
-    <p><?= $page->date()->toDate("d.m.Y") ?> - <?= $page->subheadline() ?></p>
+    <div class="text-right pb-2">
+        <?php foreach($page->tags()->split() as $tag): ?>
+            <a href="<?= page('news')->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>
+
+    <p>
+        <?= $page->date()->toDate("d.m.Y") ?>
+        <?php if ($page->subheadline()->isNotEmpty()): ?>
+            - <?= $page->subheadline() ?>
+        <?php endif ?>
+    </p>
 
     <h1><?= $page->headline() ?></h1>
 
     <div>
-        <img src="<?= $page->image()->url() ?>" alt="">
+        <img class="w-full rounded-xl object-cover" src="<?= $page->image()->url() ?>" alt="">
     </div>
     
     <div class="blockpage">
@@ -53,5 +64,4 @@
             </div>
         </div>
         <?php endif ?>
-
 <?php endsnippet() ?>