Add PostComponent and switch to component HTML syntax

Author: ker0x

composer.lock

@@ -4,11 +4,11 @@
       "js": [
         "/build/runtime.5feae901.js",
         "/build/41.64983f8e.js",
-        "/build/928.0e3059b2.js",
-        "/build/app.09886d85.js"
+        "/build/639.295ae6c2.js",
+        "/build/app.22ced1a0.js"
       ],
       "css": [
-        "/build/928.76194c5a.css",
+        "/build/639.76194c5a.css",
         "/build/app.3a149582.css"
       ]
     },
@@ -27,9 +27,9 @@
   "integrity": {
     "/build/runtime.5feae901.js": "sha384-Dj9HEwBUNZIrIUOJJ4vOrf8e+X7fhJTYGYb0F/RJLrIo5qMTyh/mBApfQI4FmH8F",
     "/build/41.64983f8e.js": "sha384-XfOM8D6kvkEmauUMaczMxByKTBpbb9/aDqt1hPMgWDJh1X2ZQu5rIyRn3Ipx+rmn",
-    "/build/928.0e3059b2.js": "sha384-KjnlXhwQ0i93knq1SMzG1q6DBwLVJszQEwEQQhCSkiWbtamCjJIwvE/EQf+Sj7tL",
-    "/build/app.09886d85.js": "sha384-4l0f6J9YNcH3yqxVehcZCX4fNgWG3y3lvsGqK0kxdMJvcFUZwtauRSDYlL4PBLCJ",
-    "/build/928.76194c5a.css": "sha384-PoA8WLGz/za3OOW7qjoDiv5f8mBVtREO35Z70PFH8PVIdu1+nWVUEetA6Q1o6DhV",
+    "/build/639.295ae6c2.js": "sha384-4mr0Q0pZGcH1xnbq69bTTnnhMQCEAynmxjF0PPEnDngNgQKjPMqqCO2kx7UDIr68",
+    "/build/app.22ced1a0.js": "sha384-zlbbpBjMsOQhWbu/y6oSuNjxPtxnQTuH2HP44M2WzqBeAGK7CZadXYlhsXsg3iD8",
+    "/build/639.76194c5a.css": "sha384-PoA8WLGz/za3OOW7qjoDiv5f8mBVtREO35Z70PFH8PVIdu1+nWVUEetA6Q1o6DhV",
     "/build/app.3a149582.css": "sha384-nfrD0DNMpZazGQQAucFPYcE1VsR4Gg5Wut28sAVfEpTl6T5xVyF5D0qoc7GtumrW",
     "/build/384.af623ff4.js": "sha384-DTkf7hVvZ08YUepoH5wzP+thJm6maRzLe8KxUgIc2OajdJkoSDct0pJMEPYcEEeF",
     "/build/admin.747eb0c9.js": "sha384-vDe3FhM5HnWbM4nEdbmSv8AB5n/PfPJv0y0Goloka7w6jppc6di5LpKD1A252aFg",

public/build/639.295ae6c2.js

@@ -1,13 +1,13 @@
 {
   "build/app.css": "/build/app.3a149582.css",
-  "build/app.js": "/build/app.09886d85.js",
+  "build/app.js": "/build/app.22ced1a0.js",
   "build/admin.css": "/build/admin.2b1a6c83.css",
   "build/admin.js": "/build/admin.747eb0c9.js",
   "build/runtime.js": "/build/runtime.5feae901.js",
   "build/206.b003fa5f.js": "/build/206.b003fa5f.js",
   "build/41.64983f8e.js": "/build/41.64983f8e.js",
-  "build/928.76194c5a.css": "/build/928.76194c5a.css",
-  "build/928.0e3059b2.js": "/build/928.0e3059b2.js",
+  "build/639.76194c5a.css": "/build/639.76194c5a.css",
+  "build/639.295ae6c2.js": "/build/639.295ae6c2.js",
   "build/630.ed629036.js": "/build/630.ed629036.js",
   "build/384.af623ff4.js": "/build/384.af623ff4.js",
   "build/images/fa-solid-900.svg": "/build/images/fa-solid-900.7a8b4f13.svg",

public/build/928.0e3059b2.js.LICENSE.txt renamed to public/build/639.295ae6c2.js.LICENSE.txt

@@ -0,0 +1,14 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Twig\Components;
+
+use App\Entity\Post;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent(name: 'post')]
+final class PostComponent
+{
+    public Post $post;
+}

public/build/928.76194c5a.css renamed to public/build/639.76194c5a.css

@@ -4,7 +4,7 @@
 
 {% block main %}
     {% for post in paginator.results %}
-        {{ include('blog/_post.html.twig') }}
+        <twig:post :post="post"/>
     {% else %}
         <div class="jumbotron">{{ 'post.no_posts_found'|trans }}</div>
     {% endfor %}

public/build/928.0e3059b2.js

@@ -4,12 +4,10 @@
 
 {% block main %}
     {#
-        Render a component by passing its name as first argument
-        See https://symfony.com/bundles/ux-twig-component/current/index.html
+        Render a component by using the HTML syntax
+        See https://symfony.com/bundles/ux-twig-component/current/index.html#component-html-syntax
     #}
-    {{ component('blog_search', {
-        query: query
-    }) }}
+    <twig:blog_search :query="query"/>
 {% endblock %}
 
 {% block sidebar %}

public/build/app.09886d85.js renamed to public/build/app.22ced1a0.js

@@ -15,7 +15,11 @@
     </div>
 
     {% for post in this.posts %}
-        {{ include('blog/_post.html.twig') }}
+        {#
+            You can nest components into another one
+            See https://symfony.com/bundles/ux-twig-component/current/index.html#nested-components
+        #}
+        <twig:post :post="post"/>
     {% else %}
         {% if query is not empty %}
             {{ 'post.search_no_results'|trans }}

public/build/entrypoints.json

@@ -1,4 +1,4 @@
-<article class="post">
+<article{{ attributes.defaults({class: 'post'}) }}>
     <h2>
         <a href="{{ path('blog_post', {slug: post.slug}) }}">
             {{ post.title }}