From a4659e8f8e566df882528f290fd31661e817c43d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Sat, 20 Sep 2025 12:58:39 +0200
Subject: [PATCH] Revise routing, part 3

---
 assets/styles/app.css                         |  5 ++
 .../Components/Organisms/MagazineHero.php     | 56 +++++++++++++++++++
 .../Organisms/MagazineHero.html.twig          | 21 +++++++
 templates/magazine/magazine-front.html.twig   | 36 ++++--------
 templates/pages/category.html.twig            | 28 +---------
 5 files changed, 95 insertions(+), 51 deletions(-)
 create mode 100644 src/Twig/Components/Organisms/MagazineHero.php
 create mode 100644 templates/components/Organisms/MagazineHero.html.twig

diff --git a/assets/styles/app.css b/assets/styles/app.css
index 0f8b5b2..135a567 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -41,6 +41,11 @@ h1.brand a {
     color: var(--brand-color);
 }
 
+h1:not(.brand) > a:hover {
+    text-decoration: none;
+    font-weight: 500;
+}
+
 h2 {
     font-size: 2.2rem;
 }
diff --git a/src/Twig/Components/Organisms/MagazineHero.php b/src/Twig/Components/Organisms/MagazineHero.php
new file mode 100644
index 0000000..c4d94f1
--- /dev/null
+++ b/src/Twig/Components/Organisms/MagazineHero.php
@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Twig\Components\Organisms;
+
+use App\Entity\Event;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class MagazineHero
+{
+    use DefaultActionTrait;
+
+    /**
+     * The magazine object/array (entity or hydrated structure) provided by the controller.
+     * @var mixed $magazine
+     */
+    public ?Event $magazine = null;
+
+    /**
+     * Slug/identifier for the magazine (route parameter), optional fallback if magazine slug not present.
+     */
+    public ?string $mag = null;
+
+    /**
+     * Compute category tags (those whose first element/key is the letter 'a').
+     * Supports multiple magazine shapes (object with getTags(), public property, or array key).
+     *
+     * @return array<int, mixed>
+     */
+    public function getCategoryTags(): array
+    {
+        $tags = [];
+        $magazine = $this->magazine;
+
+        if ($magazine) {
+            $tags = $magazine->getTags();
+        }
+
+        if (!is_iterable($tags)) {
+            return [];
+        }
+
+        // Filter: tag[0] === 'a'
+        $filtered = [];
+        foreach ($tags as $tag) {
+            if (is_array($tag) && isset($tag[0]) && $tag[0] === 'a') {
+                $filtered[] = $tag;
+            }
+        }
+
+        return $filtered;
+    }
+}
diff --git a/templates/components/Organisms/MagazineHero.html.twig b/templates/components/Organisms/MagazineHero.html.twig
new file mode 100644
index 0000000..23bbddd
--- /dev/null
+++ b/templates/components/Organisms/MagazineHero.html.twig
@@ -0,0 +1,21 @@
+<div {{ attributes }}>
+    <section class="d-flex gap-3 center ln-section--newsstand mb-3">
+        <div class="container mt-5 mb-5">
+            <h1><a href="{{ path('magazine-index', {mag: mag}) }}">{{ magazine.title|default(magazine.slug|default(mag)) }}</a></h1>
+            {% if magazine.summary is defined and magazine.summary %}
+                <p class="eyebrow">{{ magazine.summary }}</p>
+            {% endif %}
+
+            {# Use computed property via this.categoryTags #}
+            {% if this.categoryTags is not empty %}
+                <ul class="list-unstyled d-flex flex-row gap-3 justify-content-center mt-3">
+                    {% for catTag in this.categoryTags %}
+                        <li class="list-inline-item"><twig:Molecules:CategoryLink :coordinate="catTag" :mag="mag" /></li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <p class="text-muted mt-4">No categories yet.</p>
+            {% endif %}
+        </div>
+    </section>
+</div>
diff --git a/templates/magazine/magazine-front.html.twig b/templates/magazine/magazine-front.html.twig
index d1b1df6..ff14dc6 100644
--- a/templates/magazine/magazine-front.html.twig
+++ b/templates/magazine/magazine-front.html.twig
@@ -1,32 +1,18 @@
 {% extends 'layout.html.twig' %}
 
 {% block body %}
-    <section class="d-flex gap-3 center ln-section--newsstand mb-1">
-        <div class="container mt-5 mb-5">
-            <h1>{{ magazine.title|default(magazine.slug|default(mag)) }}</h1>
-            {% if magazine.summary is defined and magazine.summary %}
-                <p class="eyebrow">{{ magazine.summary }}</p>
-            {% endif %}
-            {# Category links (from 'a' tags) #}
-            {% set categoryTags = [] %}
-            {% if magazine.tags is defined %}
-                {% for tag in magazine.tags %}
-                    {% if tag[0] is defined and tag[0] == 'a' %}
-                        {% set categoryTags = categoryTags|merge([tag]) %}
-                    {% endif %}
-                {% endfor %}
-            {% endif %}
-            {% if categoryTags is not empty %}
-                <ul class="list-unstyled d-flex flex-row gap-3 justify-content-center mt-3">
-                    {% for catTag in categoryTags %}
-                        <li class="list-inline-item"><twig:Molecules:CategoryLink :coordinate="catTag" :mag="mag" /></li>
-                    {% endfor %}
-                </ul>
-            {% else %}
-                <p class="text-muted mt-4">No categories yet.</p>
+    <twig:Organisms:MagazineHero :magazine="magazine" :mag="mag" />
+
+    {# Compute categoryTags for FeaturedList rendering (hero has its own internal copy) #}
+    {% set categoryTags = [] %}
+    {% if magazine.tags is defined %}
+        {% for tag in magazine.tags %}
+            {% if tag[0] is defined and tag[0] == 'a' %}
+                {% set categoryTags = categoryTags|merge([tag]) %}
             {% endif %}
-        </div>
-    </section>
+        {% endfor %}
+    {% endif %}
+
     <section class="mb-5">
         {% if categoryTags is not empty %}
             {% for cat in categoryTags %}
diff --git a/templates/pages/category.html.twig b/templates/pages/category.html.twig
index f9dcf92..a2e31e4 100644
--- a/templates/pages/category.html.twig
+++ b/templates/pages/category.html.twig
@@ -12,32 +12,8 @@
 {% endblock %}
 
 {% block body %}
-    <section class="d-flex gap-3 center ln-section--newsstand mb-3">
-        <div class="container mt-5 mb-5">
-            <h1>{{ magazine.title|default(magazine.slug|default(mag)) }}</h1>
-            {% if magazine.summary is defined and magazine.summary %}
-                <p class="eyebrow">{{ magazine.summary }}</p>
-            {% endif %}
-            {# Category links (from 'a' tags) #}
-            {% set categoryTags = [] %}
-            {% if magazine.tags is defined %}
-                {% for tag in magazine.tags %}
-                    {% if tag[0] is defined and tag[0] == 'a' %}
-                        {% set categoryTags = categoryTags|merge([tag]) %}
-                    {% endif %}
-                {% endfor %}
-            {% endif %}
-            {% if categoryTags is not empty %}
-                <ul class="list-unstyled d-flex flex-row gap-3 justify-content-center mt-3">
-                    {% for catTag in categoryTags %}
-                        <li class="list-inline-item"><twig:Molecules:CategoryLink :coordinate="catTag" :mag="mag" /></li>
-                    {% endfor %}
-                </ul>
-            {% else %}
-                <p class="text-muted mt-4">No categories yet.</p>
-            {% endif %}
-        </div>
-    </section>
+    <twig:Organisms:MagazineHero :mag="mag" :magazine="magazine"  />
+
     <twig:Organisms:CardList :list="list" class="article-list" />
 {% endblock %}