changelog turbo test

ux.symfony.com/src/Controller/ChangelogController.php

@@ -13,6 +13,7 @@
 
 use App\Service\Changelog\ChangelogProvider;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
@@ -32,4 +33,32 @@ public function __invoke(): Response
             'changelog' => $changelog,
         ]);
     }
+
+    #[Route('/changelog/{version}', name: 'app_changelog_version')]
+    public function tag(Request $request): Response
+    {
+        $changelog = $this->changeLogProvider->getChangelog();
+
+        foreach ($changelog as $version) {
+            if ($version['version'] === $request->get('version')) {
+                break;
+            }
+            $version = null;
+        }
+
+        if (!isset($version)) {
+            throw $this->createNotFoundException('Version not found');
+        }
+
+        if ($turboFrame = $request->headers->has('Turbo-Frame')) {
+            return $this->renderBlock('changelog/changelog_version.html.twig', 'version', [
+                'version' => $version,
+            ]);
+        }
+
+        return $this->render('changelog/changelog_version.html.twig', [
+            'version' => $version,
+            'changelog' => $changelog,
+        ]);
+    }
 }

ux.symfony.com/templates/changelog.html.twig

@@ -15,6 +15,29 @@
             <p class="text-center mt-2 mb-5">New features, bug fixes, performances and security improvements.</p>
         </div>
     </div>
+
+    <div class="container--large container-xxl px-4 pt-4 px-md-5">
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+            <div>
+                <h2>Versions</h2>
+                <ul>
+                    {% for entry in changelog %}
+                        <li><a 
+                                href="{{ url('app_changelog_version', {version: entry.version}) }}"
+                                data-turbo-frame="version"
+                                data-turbo-action="advance"
+                            >{{ entry.version }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+            <div>
+                <twig:Turbo:Frame id="version">
+                    ...
+                </twig:Turbo:Frame>
+            </div>
+        </div>
+    </div>
 
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
         <div class="Changelog">

ux.symfony.com/templates/changelog/changelog_version.html.twig

@@ -0,0 +1,44 @@
+{% extends 'base.html.twig' %}
+
+{% set meta = {
+    title: 'Changelog',
+    title_suffix: ' - Symfony UX',
+    description: 'Symfony UX changelog - New features, bug fixes, performances and security improvements about Symfony Live Components, Twig Components, Autocomplete, Icons...',
+    canonical: url('app_changelog'),
+} %}
+
+{% block content %}
+
+    <div class="hero">
+        <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
+            <h1 class="text-center mt-5"><a href="{{ url('app_changelog') }}">Changelog</a></h1>
+            <p class="text-center mt-2 mb-5">New features, bug fixes, performances and security improvements.</p>
+        </div>
+    </div>
+
+    <div class="container--large container-xxl px-4 pt-4 px-md-5">
+        <div style="display: grid; grid-template-columns: 2fr 7fr; gap: 20px;">
+            <div>
+                <h2>Versions</h2>
+                <ul>
+                    {% for entry in changelog %}
+                        <li><a 
+                                href="{{ url('app_changelog_version', {version: entry.version}) }}"
+                                data-turbo-frame="version"
+                                data-turbo-action="advance"
+                            >{{ entry.version }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+            <div>
+                {% block version %}
+                    <turbo-frame id="version">
+                        <twig:ChangelogItem item="{{ version }}" isOpen />
+                    </turbo-frame>
+                {% endblock %}
+            </div>
+        </div>
+    </div>
+
+{% endblock %}