Review

Author: dunglas

_images/mercure/demo.gif

@@ -37,13 +37,9 @@ Unlike WebSocket, which is only compatible with HTTP 1.x,
 Mercure leverages the multiplexing capabilities provided by HTTP/2
 and HTTP/3 (but also supports older versions of HTTP).
 
-.. image:: /_images/mercure/demo.gif
-
-In this recording, the view of the webapp and of the mobile app are updated in
-real time when they receive a push sent by the Symfony-backed
-API Platform REST server.
-We'll learn how to create such web projects with ease in the end of this
-documentation entry.
+`In this recording`_ you can see how a Symfony web API leverages Mercure
+and API Platform to update in live a React app and a mobile app (React Native)
+generated using the API Platform client generator.
 
 Installation
 ------------
@@ -68,8 +64,6 @@ clients.
 
 .. image:: /_images/mercure/schema.png
 
-*Courtesy of Mercure.rocks*
-
 An official and open source (AGPL) implementation of a Hub can be downloaded
 as a static binary from `Mercure.rocks`_.
 
@@ -100,12 +94,12 @@ The preferred way to configure the Mercure Bundle is using
 Set the URL of your hub as the value of the ``MERCURE_PUBLISH_URL`` env var.
 The ``.env`` file of your project has been updated by the Flex recipe to
 provide example values.
-Set it to the URL of the Mercure Hub (`http://localhost:3000/hub` by default).
+Set it to the URL of the Mercure Hub (``http://localhost:3000/hub`` by default).
 
 In addition, the Symfony application must bear a `JSON Web Token`_ (JWT)
 to the Mercure Hub to be authorized to publish updates.
 
-This JWT should be stored in the `MERCURE_JWT_SECRET` environment variable.
+This JWT should be stored in the ``MERCURE_JWT_SECRET`` environment variable.
 
 The JWT must be signed with the same secret key than the one used by
 the Hub to verify the JWT (``aVerySecretKey`` in our example).
@@ -235,6 +229,10 @@ and to use URI Templates as patterns:
     * click on the request to the Mercure hub
     * click on the "EventStream" sub-tab.
 
+.. tip::
+
+    Test if a URI Template match an URL using `the online debugger`_
+
 Async dispatching
 -----------------
 
@@ -283,8 +281,6 @@ in a ``Link`` HTTP header.
 
 .. image:: /_images/mercure/discovery.png
 
-*Courtesy of Mercure.rocks*
-
 Symfony makes it easy to create ``Link`` headers thanks to
 :doc:`WebLink Component </web_link>`.
 Install it, then use it through the ``AbstractController::addLink`` helper method:
@@ -376,7 +372,7 @@ a JWT containing at least one target marking the update to the Hub.
 
 To provide this JWT, the subscriber can use a cookie,
 or a ``Authorization`` HTTP header.
-Cookies are automatically sent by the browsers when opening an `EventSource` connection.
+Cookies are automatically sent by the browsers when opening an ``EventSource`` connection.
 They are the most secure and preferred way when the client is a web browser.
 If the client is not a web browser, then using an authorization header is the way to go.
 
@@ -543,9 +539,9 @@ hypermedia API, and automatic update broadcasting through the Mercure hub:
         public $status;
     }
 
-As showcased in the recording, at the beginning of this article,
-the API Platform Client Generator also allows to scaffold complete React and React Native
-apps from this API. These apps will render the content of Mercure updates in real-time.
+As showcased `in this recording`_, the API Platform Client Generator also
+allows to scaffold complete React and React Native apps from this API.
+These apps will render the content of Mercure updates in real-time.
 
 Checkout `the dedicated API Platform documentation`_ to learn more about
 its Mercure support.
@@ -554,6 +550,7 @@ its Mercure support.
 .. _`Server-Sent Events (SSE)`: https://developer.mozilla.org/fr/docs/Server-sent_events
 .. _`a polyfill`: https://github.com/Yaffle/EventSource
 .. _`high-level implementations`: https://github.com/dunglas/mercure#resources
+.. _`In this recording`: https://www.youtube.com/watch?v=UI1l0JOjLeI
 .. _`API Platform`: https://api-platform.com
 .. _`Mercure.rocks`: https://mercure.rocks
 .. _`API Platform distribution`: https://api-platform.com/docs/distribution/
@@ -562,3 +559,4 @@ its Mercure support.
 .. _`IRI`: https://tools.ietf.org/html/rfc3987
 .. _`practical UI`: https://twitter.com/chromedevtools/status/562324683194785792
 .. _`the dedicated API Platform documentation`: https://api-platform.com/docs/core/mercure/
+.. _`the online debugger`: https://uri-template-tester.mercure.rocks