From 07814712d7fdde605af2e6a0c063b2e9a953a936 Mon Sep 17 00:00:00 2001
From: Tobias Feigel <info@feigel.it>
Date: Sun, 13 Jul 2025 12:58:21 +0200
Subject: [PATCH] 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/blueprints/pages/news.yml                | 12 +++++
 site/snippets/home-news.php                   | 48 +++++++++++++++++++
 .../{termine-home.php => home-termine.php}    | 30 +++++++-----
 site/templates/blog.php                       | 48 ++++++++++++++-----
 site/templates/home.php                       |  9 +++-
 site/templates/news.php                       | 16 +++++--
 6 files changed, 134 insertions(+), 29 deletions(-)
 create mode 100644 site/snippets/home-news.php
 rename site/snippets/{termine-home.php => home-termine.php} (94%)

diff --git a/site/blueprints/pages/news.yml b/site/blueprints/pages/news.yml
index 7e6168b..2c2ef20 100644
--- a/site/blueprints/pages/news.yml
+++ b/site/blueprints/pages/news.yml
@@ -13,6 +13,7 @@ columns:
             fieldsets:
               - heading
               - text
+              - markdown
               - image
               - line
               - gallery
@@ -51,6 +52,17 @@ columns:
             label: Zusammenfassung
             type: textarea
             size: small
+          tags:
+            label: Tags
+            type: multiselect
+            min: 1
+            max: 3
+            options:
+              Spielbericht: Spielbericht
+              Vereinsleben: Vereinsleben
+              Vereinsmeisterschaft: Vereinsmeisterschaft
+              Pressebericht: Pressebericht
+              Turnierbericht: Turnierbericht
           author:
             label: Autor
             type: users
diff --git a/site/snippets/home-news.php b/site/snippets/home-news.php
new file mode 100644
index 0000000..66256e4
--- /dev/null
+++ b/site/snippets/home-news.php
@@ -0,0 +1,48 @@
+<div class="py-16">
+    <h2>Neuigkeiten aus dem Verein</h2>
+    <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+        <?php foreach($news as $post): ?>
+        <article class="flex flex-col items-start justify-between">
+            <div class="relative w-full">
+                <img src="<?= $post->image()->url() ?>" alt="" class="w-full h-64 rounded-xl object-cover" />
+                <div class="absolute inset-0 rounded-2xl inset-ring inset-ring-gray-900/10"></div>
+            </div>
+            <div class="flex max-w-xl grow flex-col justify-between">
+                <div class="mt-8 flex items-center gap-x-4 text-xs">
+                    <time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
+                    <?php foreach($post->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>
+                <div class="group relative grow">
+                    <h2>
+                        <a href="<?= $post->url() ?>">
+                            <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">
+                            <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>
+                                </p>
+                                <p class="text-sm"><?= $user->role()->title() ?></p>
+                            </div>
+                        </div>
+                    </div>
+                <?php endif; ?>
+            </div>
+        </article>
+        <?php endforeach; ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/site/snippets/termine-home.php b/site/snippets/home-termine.php
similarity index 94%
rename from site/snippets/termine-home.php
rename to site/snippets/home-termine.php
index 66dcb1c..bb92f9c 100644
--- a/site/snippets/termine-home.php
+++ b/site/snippets/home-termine.php
@@ -107,16 +107,28 @@
 
         // Funktion zum Aktualisieren der Sichtbarkeit der Pfeile
         function updateArrowVisibility() {
-            scrollLeftBtn.classList.toggle('opacity-50', currentPosition <= 0);
-            scrollRightBtn.classList.toggle('opacity-50', currentPosition >= maxPosition);
+            // Linker Pfeil nur anzeigen, wenn es vorherige Termine gibt
+            if (currentPosition <= 0) {
+                scrollLeftBtn.classList.add('hidden');
+            } else {
+                scrollLeftBtn.classList.remove('hidden');
+            }
+            
+            // Rechter Pfeil nur anzeigen, wenn es weitere Termine gibt
+            if (currentPosition >= maxPosition) {
+                scrollRightBtn.classList.add('hidden');
+            } else {
+                scrollRightBtn.classList.remove('hidden');
+            }
         }
 
-        // Initialisierung - verstecke die Pfeile wenn weniger als cardsToShow+1 Karten vorhanden sind
+        // Initialisierung - zeige die Pfeile nur, wenn es genug Karten gibt
         if (totalCards <= cardsToShow) {
             scrollLeftBtn.classList.add('hidden');
             scrollRightBtn.classList.add('hidden');
         } else {
-            scrollLeftBtn.classList.remove('hidden');
+            // Am Anfang ist der linke Pfeil ausgeblendet, da wir bei Position 0 sind
+            scrollLeftBtn.classList.add('hidden');
             scrollRightBtn.classList.remove('hidden');
         }
 
@@ -161,14 +173,8 @@
             // Position aktualisieren
             scrollToPosition();
 
-            // Pfeile aktualisieren
-            if (totalCards <= cardsToShow) {
-                scrollLeftBtn.classList.add('hidden');
-                scrollRightBtn.classList.add('hidden');
-            } else {
-                scrollLeftBtn.classList.remove('hidden');
-                scrollRightBtn.classList.remove('hidden');
-            }
+            // Pfeile-Sichtbarkeit aktualisieren
+            updateArrowVisibility();
         });
     });
 </script>
diff --git a/site/templates/blog.php b/site/templates/blog.php
index a31c0fd..574b11b 100644
--- a/site/templates/blog.php
+++ b/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() ?>
\ No newline at end of file
diff --git a/site/templates/home.php b/site/templates/home.php
index e5a8214..d7f2791 100644
--- a/site/templates/home.php
+++ b/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() ?>
\ No newline at end of file
diff --git a/site/templates/news.php b/site/templates/news.php
index f2c4d05..3026bb3 100644
--- a/site/templates/news.php
+++ b/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() ?>
\ No newline at end of file