Add PostComponent and switch to component HTML syntax

symfony · Jul 24, 2023 · b3d8913 · b3d8913
1 parent e8a7547
commit b3d8913
Show file tree

Hide file tree

Showing 13 changed files with 231 additions and 132 deletions.
diff --git a/composer.lock b/composer.lock
diff --git a/public/build/639.295ae6c2.js b/public/build/639.295ae6c2.js
diff --git a/public/build/928.0e3059b2.js.LICENSE.txt → public/build/639.295ae6c2.js.LICENSE.txt b/public/build/928.0e3059b2.js.LICENSE.txt → public/build/639.295ae6c2.js.LICENSE.txt
diff --git a/public/build/928.76194c5a.css → public/build/639.76194c5a.css b/public/build/928.76194c5a.css → public/build/639.76194c5a.css
diff --git a/public/build/928.0e3059b2.js b/public/build/928.0e3059b2.js
diff --git a/public/build/app.09886d85.js → public/build/app.22ced1a0.js b/public/build/app.09886d85.js → public/build/app.22ced1a0.js
diff --git a/public/build/entrypoints.json b/public/build/entrypoints.json
@@ -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",

diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -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",

diff --git a/src/Twig/Components/PostComponent.php b/src/Twig/Components/PostComponent.php
@@ -0,0 +1,28 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Twig\Components;
+
+use App\Entity\Post;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+/**
+ * Twig component to display a Post.
+ *
+ * See https://symfony.com/bundles/ux-twig-component/current/index.html
+ *
+ * @author Romain Monteil <[email protected]>
+ */
+#[AsTwigComponent(name: 'post')]
+final class PostComponent
+{
+    public Post $post;
+}
diff --git a/templates/blog/index.html.twig b/templates/blog/index.html.twig
@@ -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 %}

diff --git a/templates/blog/search.html.twig b/templates/blog/search.html.twig
@@ -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 %}

diff --git a/templates/components/blog_search.html.twig b/templates/components/blog_search.html.twig
@@ -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 }}

diff --git a/templates/blog/_post.html.twig → templates/components/post.html.twig b/templates/blog/_post.html.twig → templates/components/post.html.twig
@@ -1,4 +1,4 @@
-<article class="post">
+<article{{ attributes.defaults({class: 'post'}) }}>
     <h2>
         <a href="{{ path('blog_post', {slug: post.slug}) }}">
             {{ post.title }}