[Site] UX Map page

.env

@@ -41,3 +41,9 @@ DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
 ###> symfony/mercure-notifier ###
 MERCURE_DSN=mercure://default
 ###< symfony/mercure-notifier ###
+
+###> symfony/ux-leaflet-map ###
+# Options available at https://github.com/symfony/symfony-ux/blob/2.x/src/Map/src/Bridge/Leaflet/README.md
+#
+UX_MAP_DSN=leaflet://default
+###< symfony/ux-leaflet-map ###

assets/controllers.json

@@ -42,6 +42,12 @@
                 "fetch": "lazy"
             }
         },
+        "@symfony/ux-leaflet-map": {
+            "map": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
         "@symfony/ux-live-component": {
             "live": {
                 "enabled": true,

assets/images/ux_packages/map.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 186 223">
+  <path fill-rule="evenodd" d="M139.43 92.9a46.69 46.69 0 0 1-46.66 46.72A46.69 46.69 0 0 1 46.1 92.91a46.69 46.69 0 0 1 46.67-46.72 46.69 46.69 0 0 1 46.66 46.72Zm-19 0a27.69 27.69 0 0 1-27.66 27.72A27.69 27.69 0 0 1 65.1 92.91a27.69 27.69 0 0 1 27.67-27.72 27.69 27.69 0 0 1 27.66 27.72Z" clip-rule="evenodd"/>
+  <path fill-rule="evenodd" d="m81.35 218.96 11.42-15.19 11.41 15.2a19 19 0 0 1-22.83 0Zm11.42-15.19S19 148.34 19 92.91a74 74 0 0 1 21.6-52.26 73.7 73.7 0 0 1 104.33 0 73.98 73.98 0 0 1 21.6 52.26c0 55.43-73.76 110.86-73.76 110.86Zm11.42 15.19-11.42-15.19c-11.42 15.2-11.42 15.19-11.43 15.19v-.01l-.03-.02-.07-.05-.22-.17a120.52 120.52 0 0 1-3.34-2.63 308.25 308.25 0 0 1-36.01-34.34C22.79 160.45 0 128.12 0 92.9a92.98 92.98 0 0 1 27.16-65.68 92.7 92.7 0 0 1 131.21 0 92.98 92.98 0 0 1 27.16 65.68c0 35.2-22.79 67.54-41.67 88.83a308.17 308.17 0 0 1-38.61 36.4l-.74.57-.22.17-.07.05-.03.03Z" clip-rule="evenodd"/>
+</svg>

assets/styles/components/_PackageBox.scss

@@ -77,10 +77,6 @@
   justify-content: center;
   flex-shrink: 0;
 
-  [data-bs-theme="dark"] & {
-    background-blend-mode: darken;
-  }
-
   img {
     width: calc(0.4 * var(--logo-size));
     height: auto;

assets/styles/components/_PackageHeader.scss

@@ -15,8 +15,4 @@
   .AppHeader + * &  {
     padding-top: 3rem;
   }
-
-  [data-bs-theme="dark"] & {
-    background-blend-mode: hue !important;
-  }
 }

assets/styles/sections/_hero.scss

@@ -16,7 +16,8 @@
 }
 
 .hero-sub-text {
-  width: 35%;
+  width: 40%;
+  text-wrap: balance;
 }
 
 @media (max-width: 1114px) {

composer.json

@@ -38,7 +38,9 @@
         "symfony/ux-dropzone": "2.x-dev",
         "symfony/ux-icons": "2.x-dev",
         "symfony/ux-lazy-image": "2.x-dev",
+        "symfony/ux-leaflet-map": "2.x-dev",
         "symfony/ux-live-component": "2.x-dev",
+        "symfony/ux-map": "2.x-dev",
         "symfony/ux-notify": "2.x-dev",
         "symfony/ux-react": "2.x-dev",
         "symfony/ux-svelte": "2.x-dev",

config/bundles.php

@@ -31,4 +31,5 @@ return [
     Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true],
     Symfonycasts\SassBundle\SymfonycastsSassBundle::class => ['all' => true],
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
+    Symfony\UX\Map\UXMapBundle::class => ['all' => true],
 ];

config/packages/ux_map.yaml

@@ -0,0 +1,3 @@
+ux_map:
+    # https://symfony.com/bundles/ux-map/current/index.html#available-renderers
+    renderer: '%env(resolve:default::UX_MAP_DSN)%'

importmap.php

@@ -190,4 +190,17 @@ return [
     'chart.js' => [
         'version' => '4.4.3',
     ],
+    '@symfony/ux-map/abstract-map-controller' => [
+        'path' => './vendor/symfony/ux-map/assets/dist/abstract_map_controller.js',
+    ],
+    'leaflet' => [
+        'version' => '1.9.4',
+    ],
+    'leaflet/dist/leaflet.min.css' => [
+        'version' => '1.9.4',
+        'type' => 'css',
+    ],
+    '@symfony/ux-leaflet-map/map-controller' => [
+        'path' => './vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js',
+    ],
 ];

src/Controller/UxPackage/MapController.php

@@ -0,0 +1,53 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Controller\UxPackage;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions;
+use Symfony\UX\Map\Bridge\Leaflet\Option\TileLayer;
+use Symfony\UX\Map\InfoWindow;
+use Symfony\UX\Map\Map;
+use Symfony\UX\Map\Marker;
+use Symfony\UX\Map\Point;
+
+class MapController extends AbstractController
+{
+    #[Route('/map', name: 'app_map')]
+    public function __invoke(): Response
+    {
+        $map = (new Map('default'))
+            ->center(new Point(45.7534031, 4.8295061))
+            ->zoom(6)
+
+            ->addMarker(new Marker(
+                position: new Point(45.7534031, 4.8295061),
+                title: 'Lyon',
+                infoWindow: new InfoWindow(
+                    content: '<p>Thank you <a href="https://github.com/Kocal">@Kocal</a> for this component!</p>',
+                )
+            ))
+
+            ->options((new LeafletOptions())
+                ->tileLayer(new TileLayer(
+                    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                    options: ['maxZoom' => 19]
+                ))
+            );
+
+        return $this->render('ux_packages/map.html.twig', [
+            'map' => $map,
+        ]);
+    }
+}

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 @@ class UxPackageRepository
                 '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 @@ class UxPackageRepository
                 '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',

src/Twig/Extension/PackageExtension.php

@@ -0,0 +1,34 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * 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(...)),
+        ];
+    }
+}

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"
     },

templates/components/Hero.html.twig

@@ -0,0 +1,15 @@
+<div class="hero">
+    <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
+        {% if eyebrows|default %}
+            <p class="eyebrows text-center mt-5">{{ eyebrows }}</p>
+        {% endif %}
+        <h1 class="text-center">
+            <a href="{{ url ?? url(app.current_route) }}">{{ title }}</a>
+        </h1>
+        {% if block('content') is defined %}
+            <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 text-center demo-introduction">
+                {{ block('content') }}
+            </div>
+        {% endif %}
+    </div>
+</div>

templates/ux_packages/map.html.twig

@@ -0,0 +1,44 @@
+{% extends 'ux_packages/package.html.twig' %}
+
+{% set package = 'map'|ux_package %}
+
+{% block package_header %}
+    <twig:Hero
+        eyebrows="Assert('Mapper')"
+        title="UX Map"
+        url="{{ url('app_map') }}"
+    >
+        Embed <code>interactive maps</code> in your Symfony application in a breeze!
+        <br />
+        Decouple your code from your map provider: <code>Google Maps</code>, <code>LeaftLet</code>.
+    </twig:Hero>
+{% endblock %}
+
+{% block code_block_left %}
+    <twig:CodeBlock filename="src/Controller/UxPackage/MapController.php" height="250px"/>
+{% endblock %}
+
+{% block code_block_right %}
+    <twig:CodeBlock
+        filename="templates/ux_packages/map.html.twig"
+        targetTwigBlock="demo_content"
+        height="250px"
+    />
+{% endblock %}
+
+{% block demo_title %}UX Map{% endblock %}
+
+{% block demo_content %}
+    <div>
+        {# The map must have a defined height #}
+        {{ render_map(map, {style: 'height: 600px;'}) }}
+    </div>
+{% endblock %}
+
+{% block package_install '' %}
+
+{% block package_links %}
+    {{ include('ux_packages/map/_aside.html.twig', {
+        package: 'map'|ux_package,
+    }) }}
+{% endblock %}

templates/ux_packages/map/_aside.html.twig

@@ -0,0 +1,24 @@
+<aside style="background-color: var(--bs-secondary-bg-subtle);" class="mt-5">
+    <div class="container-fluid container-xxl p-4 p-md-5">
+        <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));">
+            <twig:DocsLink
+                title="Documentation"
+                text="Symfony UX Map documentation"
+                url="https://symfony.com/bundles/ux-map/current/index.html"
+                icon="symfony"
+            />
+            <twig:DocsLink
+                title="Screencasts"
+                text="Watch UX screencasts on SymfonyCasts."
+                url="https://symfonycasts.com/screencast/stimulus"
+                icon="symfonycast"
+            />
+            <twig:DocsLink
+                title="Community"
+                text="Feedback · support · contributions."
+                url="https://github.com/symfony/ux"
+                icon="github"
+            />
+        </div>
+    </div>
+</aside>

templates/ux_packages/package.html.twig

@@ -31,14 +31,16 @@
     {% block package_content %}
         <section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
             <div class="arrow mb-3 d-none d-md-block"></div>
-            <div class="row mb-5">
-                <div class="col-12 col-md-6">
-                    {% block code_block_left %}{% endblock %}
+            {% block package_code_blocks %}
+                <div class="row mb-5">
+                    <div class="col-12 col-md-6">
+                        {% block code_block_left %}{% endblock %}
+                    </div>
+                    <div class="col-12 col-md-6 mt-3 mt-md-0">
+                        {% block code_block_right %}{% endblock %}
+                    </div>
                 </div>
-                <div class="col-12 col-md-6 mt-3 mt-md-0">
-                    {% block code_block_right %}{% endblock %}
-                </div>
-            </div>
+            {% endblock %}
             {% block package_demo %}
                 {% if block('demo_title') is defined %}
                     {% set demo_title = block('demo_title') %}

tests/Functional/UxPackagesTest.php

@@ -36,6 +36,7 @@ class UxPackagesTest extends KernelTestCase
     public function testPackagePagesAllLoad(UxPackage $package, string $expectedText): void
     {
         $this->browser()
+            ->throwExceptions()
             ->visit('/'.$package->getName())
             ->assertSuccessful()
             ->assertSeeIn('title', $package->getHumanName())
@@ -58,7 +59,7 @@ class UxPackagesTest extends KernelTestCase
                 continue;
             }
 
-            yield $package->getName() => [$package, \sprintf('%s Docs', $package->getHumanName())];
+            yield $package->getName() => [$package, \sprintf('%s Doc', $package->getHumanName())];
         }
     }
 }