[Site] Display deprecated packages separately

Author: Kocal

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

@@ -22,10 +22,12 @@ class UxPackagesController extends AbstractController
     #[Route('/packages', name: 'app_packages')]
     public function __invoke(UxPackageRepository $packageRepository): Response
     {
-        $packages = $packageRepository->findAll();
+        $packages = $packageRepository->findAll(deprecated: false);
+        $deprecatedPackages = $packageRepository->findAll(deprecated: true);
 
         return $this->render('main/packages.html.twig', [
             'packages' => $packages,
+            'deprecated_packages' => $deprecatedPackages,
         ]);
     }
 

ux.symfony.com/src/Service/UxPackageRepository.php

@@ -18,7 +18,7 @@ class UxPackageRepository
     /**
      * @return array<UxPackage>
      */
-    public function findAll(?string $query = null): array
+    public function findAll(?string $query = null, ?bool $deprecated = null): array
     {
         $packages = [
             new UxPackage(
@@ -258,13 +258,15 @@ public function findAll(?string $query = null): array
                 ->setDocsLink('https://github.com/mattboldt/typed.js/', 'Typed.js documentation'),
         ];
 
-        if (!$query) {
-            return $packages;
+        if ($query) {
+            $packages = array_filter($packages, fn(UxPackage $package) => str_contains($package->getName(), $query) || str_contains($package->getHumanName(), $query));
         }
 
-        return array_filter($packages, function (UxPackage $package) use ($query) {
-            return str_contains($package->getName(), $query) || str_contains($package->getHumanName(), $query);
-        });
+        if (null !== $deprecated) {
+            $packages = array_filter($packages, fn(UxPackage $package) => $package->isDeprecated() === $deprecated);
+        }
+
+        return $packages;
     }
 
     public function find(string $name): UxPackage

ux.symfony.com/templates/main/packages.html.twig

@@ -21,6 +21,15 @@
                 <twig:Package:PackageBox package="{{ package }}" titleTag="h2" />
             {% endfor %}
         </div>
+
+        <h2 class="text-center mt-5">Deprecated packages</h2>
+        <p class="text-center mt-2 mb-5">Packages that are still available but will be removed in future versions</p>
+
+        <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
+            {% for package in deprecated_packages %}
+                <twig:Package:PackageBox package="{{ package }}" titleTag="h3" />
+            {% endfor %}
+        </div>
     {% endblock %}
 </div>
 {% endblock %}

ux.symfony.com/templates/ux_packages/swup.html.twig

@@ -22,8 +22,8 @@
         <div class="">
             <p class="deprecated-badge">Deprecated Package</p>
             <h1 class="mb-4">UX Swup 2.x</h1>
-            <p>This component is <strong>deprecated</strong> and will not receive further updates. Please consider
-                using <a href="/turbo" class="link">Symfony UX Turbo</a> for modern page
+            <p>This component is <strong>deprecated</strong> and will not receive further updates.<br>
+                Please consider using <a href="{{ path('app_turbo') }}" class="link">Symfony UX Turbo</a> for modern page
                 transitions.</p>
         </div>
     </main>