[Site] Fix package meta

ux.symfony.com/src/Controller/Icons/IconsController.php

@@ -12,6 +12,7 @@
 namespace App\Controller\Icons;
 
 use App\Service\Icon\IconSetRepository;
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
@@ -22,8 +23,10 @@
 final class IconsController extends AbstractController
 {
     #[Route('/icons', name: 'app_icons')]
-    public function index(IconSetRepository $iconSetRepository): Response
-    {
+    public function index(
+        UxPackageRepository $packageRepository,
+        IconSetRepository $iconSetRepository,
+    ): Response {
         // Homepage "Popular Icon Sets"
         // Hard-coded until we bring the IconSet's lists / views back
         $iconSets = [
@@ -40,6 +43,7 @@ public function index(IconSetRepository $iconSetRepository): Response
         $iconSets = array_map(fn ($iconSet) => $iconSetRepository->find($iconSet), $iconSets);
 
         return $this->render('icons/index.html.twig', [
+            'package' => $packageRepository->find('icons'),
             'iconSets' => $iconSets,
         ]);
     }

ux.symfony.com/src/Model/UxPackage.php

@@ -58,7 +58,7 @@ public function getGradient(): string
 
     public function getImageFilename(?string $format = null): string
     {
-        return $this->imageFileName ?? ltrim($this->name, 'ux-').($format ? ('-'.$format) : '').'.png';
+        return $this->imageFileName ?? $this->name.($format ? '-'.$format : '').'.png';
     }
 
     public function getTagLine(): string
@@ -127,6 +127,11 @@ public function getCreateString(): string
         return $this->createString;
     }
 
+    public function getSocialImage(?string $format = null): string
+    {
+        return 'images/ux_packages/'.$this->name.($format ? ('-'.$format) : '').'.png';
+    }
+
     public function getImage(?string $format = null): string
     {
         return 'images/ux_packages/'.$this->getImageFilename($format);

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

@@ -34,6 +34,29 @@ public function findAll(?string $query = null): array
                 ->setDocsLink('https://turbo.hotwired.dev/handbook/introduction', 'Documentation specifically for the Turbo JavaScript library.')
                 ->setScreencastLink('https://symfonycasts.com/screencast/turbo', 'Go deep into all 3 parts of Turbo.'),
 
+            new UxPackage(
+                'icons',
+                'UX Icons',
+                'app_icons',
+                '#fff',
+                'linear-gradient(to bottom right, cyan, purple)',
+                'SVG icons made easy',
+                'Render SVG icons seamlessly from your Twig templates.',
+                'I need to render SVG icons.',
+                'icons.svg',
+            ),
+
+            new UxPackage(
+                'twig-component',
+                'Twig Components',
+                'app_twig_component',
+                '#7FA020',
+                'linear-gradient(95deg, #7FA020 -5%, #A1C94E 105%)',
+                'Render Reusable UI Elements',
+                'Create PHP classes that can render themselves',
+                'I need to create PHP classes that render'
+            ),
+
             new UxPackage(
                 'live-component',
                 'Live Components',
@@ -57,15 +80,15 @@ public function findAll(?string $query = null): array
             ),
 
             new UxPackage(
-                'icons',
-                'UX Icons',
-                'app_icons',
-                '#fff',
-                'linear-gradient(to bottom right, cyan, purple)',
-                'SVG icons made easy',
-                'Render SVG icons seamlessly from your Twig templates.',
-                'I need to render SVG icons.',
-                'icons.svg',
+                'translator',
+                'Translator',
+                'app_translator',
+                '#2248D0',
+                'linear-gradient(139deg, #2248D0 -20%, #00FFB2 113%)',
+                'Symfony Translations in JavaScript',
+                "Use Symfony's translations in JavaScript",
+                'I need to translate strings in JavaScript',
+                'translator.svg'
             ),
 
             (new UxPackage(
@@ -140,17 +163,6 @@ public function findAll(?string $query = null): array
                 'I need to delay large image loading'
             ),
 
-            new UxPackage(
-                'twig-component',
-                'Twig Components',
-                'app_twig_component',
-                '#7FA020',
-                'linear-gradient(95deg, #7FA020 -5%, #A1C94E 105%)',
-                'Render Reusable UI Elements',
-                'Create PHP classes that can render themselves',
-                'I need to create PHP classes that render'
-            ),
-
             new UxPackage(
                 'dropzone',
                 'Stylized Dropzone',
@@ -207,18 +219,6 @@ public function findAll(?string $query = null): array
                 'I need to type onto the screen... like this'
             ))
                 ->setDocsLink('https://github.com/mattboldt/typed.js/', 'Typed.js documentation'),
-
-            new UxPackage(
-                'translator',
-                'Translator',
-                'app_translator',
-                '#2248D0',
-                'linear-gradient(139deg, #2248D0 -20%, #00FFB2 113%)',
-                'Symfony Translations in JavaScript',
-                "Use Symfony's translations in JavaScript",
-                'I need to translate strings in JavaScript',
-                'translator.svg'
-            ),
         ];
 
         if (!$query) {

ux.symfony.com/templates/icons/index.html.twig

@@ -9,6 +9,17 @@
     title: 'UX Icons - SVG icons made easy',
     description: 'Render SVG icons seamlessly from your Twig templates. Find the perfect icon among 200,000 choices from the most popular icon sets.',
     canonical: url('app_icons'),
+    social: {
+        title: 'Symfony UX Icons - SVG icons made easy',
+        description: 'Render SVG icons seamlessly from your Twig templates. Find the perfect icon among 200,000 choices from the most popular icon sets.',
+        image: {
+            url: absolute_url(asset(package.getSocialImage('1200x675'))),
+            type: 'image/png',
+            width: 1200,
+            height: 675,
+            alt: package.humanName ~ ' - Component Icon',
+        },
+    }
 } %}
 
 {% block content %}

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

@@ -5,14 +5,14 @@
     description: package.description,
     canonical: url(package.route),
     social: {
-        title: package.tagline ~ ' - Symfony UX ' ~ package.humanName,
+        title: package.tagline ~ ' - Symfony UX ' ~ package.humanName|u.trimStart('UX '),
         description: package.description|striptags,
         image: {
-            url: absolute_url(asset(package.imageFileName('1200x675'))),
+            url: absolute_url(asset(package.getSocialImage('1200x675'))),
             type: 'image/png',
             width: 1200,
             height: 675,
-            alt: package.name ~ ' - Component Icon',
+            alt: package.humanName ~ ' - Component Icon',
         },
     }
 } %}