diff --git a/ux.symfony.com/assets/images/ux_packages/chartsjs-1200x675.png b/ux.symfony.com/assets/images/ux_packages/chartjs-1200x675.png similarity index 100% rename from ux.symfony.com/assets/images/ux_packages/chartsjs-1200x675.png rename to ux.symfony.com/assets/images/ux_packages/chartjs-1200x675.png diff --git a/ux.symfony.com/assets/images/ux_packages/cropper-1200x675.png b/ux.symfony.com/assets/images/ux_packages/cropperjs-1200x675.png similarity index 100% rename from ux.symfony.com/assets/images/ux_packages/cropper-1200x675.png rename to ux.symfony.com/assets/images/ux_packages/cropperjs-1200x675.png diff --git a/ux.symfony.com/assets/images/ux_packages/ux-icons-1200x675.png b/ux.symfony.com/assets/images/ux_packages/icons-1200x675.png similarity index 100% rename from ux.symfony.com/assets/images/ux_packages/ux-icons-1200x675.png rename to ux.symfony.com/assets/images/ux_packages/icons-1200x675.png diff --git a/ux.symfony.com/assets/images/ux_packages/norify-1200x675.png b/ux.symfony.com/assets/images/ux_packages/notify-1200x675.png similarity index 100% rename from ux.symfony.com/assets/images/ux_packages/norify-1200x675.png rename to ux.symfony.com/assets/images/ux_packages/notify-1200x675.png diff --git a/ux.symfony.com/src/Controller/Icons/IconsController.php b/ux.symfony.com/src/Controller/Icons/IconsController.php index 3d34374a13c..774bb221862 100644 --- a/ux.symfony.com/src/Controller/Icons/IconsController.php +++ b/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, ]); } diff --git a/ux.symfony.com/src/Model/UxPackage.php b/ux.symfony.com/src/Model/UxPackage.php index 55f2b8cd7f1..94d12af42b6 100644 --- a/ux.symfony.com/src/Model/UxPackage.php +++ b/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); diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php index 7fa5e577502..6f703c8b189 100644 --- a/ux.symfony.com/src/Service/UxPackageRepository.php +++ b/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) { diff --git a/ux.symfony.com/templates/icons/index.html.twig b/ux.symfony.com/templates/icons/index.html.twig index f4ebba15829..eb0bbad4668 100644 --- a/ux.symfony.com/templates/icons/index.html.twig +++ b/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 %} diff --git a/ux.symfony.com/templates/ux_packages/package.html.twig b/ux.symfony.com/templates/ux_packages/package.html.twig index d4e8a4b5e7b..a714e64e85c 100644 --- a/ux.symfony.com/templates/ux_packages/package.html.twig +++ b/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', }, } } %}