Revise routing, part 3

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;
 }

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;
+    }
+}

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>

templates/magazine/magazine-front.html.twig

@@ -1,13 +1,9 @@
 {% 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) #}
+    <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 %}
@@ -16,17 +12,7 @@
             {% 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>
+
     <section class="mb-5">
         {% if categoryTags is not empty %}
             {% for cat in categoryTags %}

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 %}