Thank you @Kocal for this component!
', + ) + )) + + ->options((new LeafletOptions()) + ->tileLayer(new TileLayer( + url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + attribution: '© OpenStreetMap', + options: ['maxZoom' => 19] + )) + ); + + return $this->render('ux_packages/map.html.twig', [ + 'map' => $map, + ]); + } +} diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php index 9fefded98c4..85f00eb2734 100644 --- a/ux.symfony.com/src/Service/UxPackageRepository.php +++ b/ux.symfony.com/src/Service/UxPackageRepository.php @@ -21,19 +21,6 @@ class UxPackageRepository public function findAll(?string $query = null): array { $packages = [ - (new UxPackage( - 'turbo', - 'Turbo', - 'app_turbo', - '#5920A0', - 'linear-gradient(95deg, #5920A0 -5%, #844EC9 105%)', - 'Single-page Symfony app', - 'Integration with Turbo for single-page-app and real-time experience', - 'I need to transform my app into an SPA!' - )) - ->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', @@ -46,6 +33,19 @@ public function findAll(?string $query = null): array 'icons.svg', ), + new UxPackage( + 'map', + 'UX Map', + 'app_map', + '#fff', + // 'linear-gradient(to bottom right, #58D984EB, #0083A2D1), #3386dfd4', + 'linear-gradient(to bottom right, #1BA980, #209127 75%, #C0CB2A)', + 'Interactive Maps', + 'Render interactive Maps in PHP with Leaflet or Google Maps.', + 'I need to display markers on a Map.', + 'map.svg', + ), + new UxPackage( 'twig-component', 'Twig Components', @@ -68,6 +68,19 @@ public function findAll(?string $query = null): array 'I need Twig templates that update in real-time!' ), + (new UxPackage( + 'turbo', + 'Turbo', + 'app_turbo', + '#5920A0', + 'linear-gradient(95deg, #5920A0 -5%, #844EC9 105%)', + 'Single-page Symfony app', + 'Integration with Turbo for single-page-app and real-time experience', + 'I need to transform my app into an SPA!' + )) + ->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( 'autocomplete', 'Autocomplete', diff --git a/ux.symfony.com/src/Twig/Extension/PackageExtension.php b/ux.symfony.com/src/Twig/Extension/PackageExtension.php new file mode 100644 index 00000000000..45e9ca9cf66 --- /dev/null +++ b/ux.symfony.com/src/Twig/Extension/PackageExtension.php @@ -0,0 +1,34 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\Twig\Extension; + +use App\Service\UxPackageRepository; +use Twig\Extension\AbstractExtension; +use Twig\TwigFilter; + +/** + * @author Simon André + */ +final class PackageExtension extends AbstractExtension +{ + public function __construct( + private readonly UxPackageRepository $packageRepository, + ) { + } + + public function getFilters(): array + { + return [ + new TwigFilter('ux_package', $this->packageRepository->find(...)), + ]; + } +} diff --git a/ux.symfony.com/symfony.lock b/ux.symfony.com/symfony.lock index b0ebbfe198c..98914f57672 100644 --- a/ux.symfony.com/symfony.lock +++ b/ux.symfony.com/symfony.lock @@ -563,6 +563,15 @@ "symfony/ux-lazy-image": { "version": "v2.1.1" }, + "symfony/ux-leaflet-map": { + "version": "2.19", + "recipe": { + "repo": "github.com/symfony/recipes", + "branch": "main", + "version": "2.19", + "ref": "e696e4124071004125072f3b582a2b7e43ad58c1" + } + }, "symfony/ux-live-component": { "version": "2.9999999", "recipe": { @@ -575,6 +584,18 @@ "config/routes/ux_live_component.yaml" ] }, + "symfony/ux-map": { + "version": "2.19", + "recipe": { + "repo": "github.com/symfony/recipes", + "branch": "main", + "version": "2.19", + "ref": "04de870967555f00bd82f542e9e2d29683c3d39e" + }, + "files": [ + "config/packages/ux_map.yaml" + ] + }, "symfony/ux-notify": { "version": "2.x-dev" }, diff --git a/ux.symfony.com/templates/components/Hero.html.twig b/ux.symfony.com/templates/components/Hero.html.twig new file mode 100644 index 00000000000..b16fcbd82c6 --- /dev/null +++ b/ux.symfony.com/templates/components/Hero.html.twig @@ -0,0 +1,15 @@ +{{ eyebrows }}
+ {% endif %} +interactive maps in your Symfony application in a breeze!
+ Google Maps, LeaftLet.
+