fix reviews

Author: WebMamba

ux.symfony.com/assets/images/cookbook/component_architecture.png

@@ -82,7 +82,7 @@
 @import "components/ProductGrid";
 @import "components/PackageHeader";
 @import "components/PackageBox";
-@import "components/Recipe";
+@import "components/Cookbook";
 @import "components/Tabs";
 @import "components/Tag";
 @import "components/Terminal";

ux.symfony.com/assets/styles/app.scss

@@ -1,4 +1,4 @@
-.Recipe {
+.Cookbook {
   h1 {
     margin-top: 3rem;
     margin-bottom: 1rem;
@@ -8,24 +8,14 @@
     line-height: 60px;
   }
 
-  h2 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 40px;
-  }
-
-  h3 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
+  .description {
+    text-align: center;
     font-size: 24px;
-    font-weight: 700;
-    line-height: 32px;
-    color: #FFFFFF;
+    font-weight: 600;
+    margin-top: 1.5rem;
   }
 
-  ul:first-of-type {
+  .tags {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -60,7 +50,30 @@
     }
   }
 
-  .Terminal {
-    margin-bottom: 3rem;
+  .content {
+    h2 {
+      margin-top: 3rem;
+      margin-bottom: 1rem;
+      font-size: 32px;
+      font-weight: 700;
+      line-height: 40px;
+    }
+
+    h3 {
+      margin-top: 3rem;
+      margin-bottom: 1rem;
+      font-size: 24px;
+      font-weight: 700;
+      line-height: 32px;
+      color: #FFFFFF;
+    }
+  }
+
+  pre {
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+    border-radius: 4px;
+    background-color: #0A0A0A;
+    padding: 2rem;
   }
 }

ux.symfony.com/assets/styles/components/_Recipe.scss renamed to ux.symfony.com/assets/styles/components/_Cookbook.scss

@@ -10,6 +10,8 @@ services:
     _defaults:
         autowire: true      # Automatically injects dependencies in your services.
         autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.
+        bind:
+            string $cookbookPath: '%kernel.project_dir%/cookbook'
 
     # makes classes in src/ available to be used as services
     # this creates a service per class whose id is the fully-qualified class name
@@ -24,6 +26,3 @@ services:
     # please note that last definitions always *replace* previous ones
     Tempest\Highlight\Highlighter:
         tags: ['twig.runtime']
-
-    Twig\Extension\StringLoaderExtension:
-        tags: ['twig.extension']

ux.symfony.com/composer.lock

@@ -1,23 +1,12 @@
 ---
 title: Architecture component
 description: Rules and pattern to work with components
-image: /assets/images/cookbook/component_architecture-620bbd49fffc53d13e56941a359c0d1a.png
+image: images/cookbook/component_architecture.png
 tags: 
     - javascript
     - symfony
 ---
 
-# Architecture component
-
-- javascript
-- symfony
-
-*Rules and pattern to work with components*
-
-<div class="image-title">
-    <img src="{{ asset('images/cookbook/component_architecture.png') }}" alt="Stimulus and Symfony" />
-</div>
-
 ## Introduction
 
 In SymfonyUX exist two packages: [TwigComponents](https://symfony.com/bundles/ux-twig-component/current/index.html) and [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html).
@@ -36,24 +25,33 @@ These components can be assembled to form a page. For example, there could be a
 The training list component could even be composed of smaller components, such as a training card component. 
 The goal is to create the most atomic, and reusable components possible.
 
-***How does it work into Symfony?***
+#### How does it work into Symfony?
 
 In Symfony you can have a component Alert for example with the following template:
 
-<div>
-    <twig:CodeBlock filename="cookbook/codeblock/architecture_component/alert.html.twig" />
+```twig
+<div class="alert alert-{{ type }}">
+    <twig:Icon name="{{ icon }}" />
+    {{ message }}
 </div>
+```
 
 So here you can see we have an alert component that his himself use an Icon component.
 Or you can make composition with the following syntax:
 
-<div>
-    <twig:CodeBlock filename="cookbook/codeblock/architecture_component/index.html.twig" />
-</div>
+```twig
+<twig:Card>
+    <twig:CardHeader>
+        <h2>My Card</h2>
+    </twig:CardHeader>
+    <twig:CardBody>
+        <p>This is the content of my card.</p>
+    </twig:CardBody>
+</twig:Card>
+```
 
 So here we Card component, and we give to the content of this component mutliple other components.
 
-
 ### Independence
 
 This is a really important rule, and not obvious. But your component should leave on his own context,
@@ -78,22 +76,32 @@ this props at his initialization and keep it all his life long.
 Let's take the example of the Alert component an [anonymous component](https://symfony.com/bundles/ux-twig-component/current/index.html#anonymous-components).
 We have the following template:
 
-<div>
-<twig:CodeBlock filename="cookbook/codeblock/architecture_component/alert2.html.twig" />
+```twig
+{% props type, icon, message %}
+
+<div class="alert alert-{{ type }}">
+    <twig:Icon name="{{ icon }}" />
+    {{ message }}
 </div>
+```
 
 Just like that we define three props for our Alert component. And know we can use like this:
 
-<div>
-<twig:CodeBlock filename="cookbook/codeblock/architecture_component/index2.html.twig" />
-</div>
+```twig
+<twig:Alert type="success" icon="check" message="Your account has been created." />
+```
 
 If your component anonymous but a class component, you can simply define props
 by adding property to your class.
 
-<div>
-<twig:CodeBlock filename="cookbook/codeblock/architecture_component/Alert.php" />
-</div>
+```php
+class Alert
+{
+    public string $type;
+    public string $icon;
+    public string $message;
+}
+```
 
 There are something really important to notice with props. It's your props
 should only go into one direction from the parent to child. But your props should never
@@ -112,15 +120,31 @@ And when the loading is done, the state `loading` can be set to `false` and the
 In symfony you 2 different approach to handle state. The first one is to use stimulus directly
 in to your component. What we recommend to do is to set a controller stimulus at the root of your component.
 
-<div>
-<twig:CodeBlock filename="cookbook/codeblock/architecture_component/button.html.twig" />
-</div>
+```twig
+{% props label %}
+
+<button data-controller="button" data-button-label="{{ label }}">
+    {{ label }}
+</button>
+```
 
 And then you can define your controller like this:
 
-<div>
-<twig:CodeBlock filename="cookbook/codeblock/architecture_component/button_controller.js" />
-</div>
+```js
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+    static values = { label: String };
+
+    connect() {
+        this.element.textContent = this.labelValue;
+    }
+
+    loading() {
+        this.element.textContent = 'Loading...';
+    }
+}
+```
 
 The second approach is to use the [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html) package.
 How to choose between the two? If your component don't need any backend logic 
@@ -129,9 +153,23 @@ backend logic for your state, use LiveComponent.
 With live component a live prop is a state. So if you want store the number of click on a button you can do
 the following component:
 
-<div>
-<twig:CodeBlock filename="cookbook/codeblock/architecture_component/LiveButton.php" />
-</div>
+```php
+<?php
+
+#[AsLiveComponent]
+class Button
+{
+    #[LiveProp]
+    public int $clicks = 0;
+
+    public function increment()
+    {
+        $this->clicks++;
+
+        $this->save();
+    }
+}
+```
 
 ## Conclusion
 

ux.symfony.com/config/services.yaml

@@ -0,0 +1,46 @@
+<?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\Controller;
+
+use App\Service\CookbookFactory;
+use App\Service\CookbookRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class CookbookController extends AbstractController
+{
+    public function __construct(
+        private CookbookRepository $cookbookRepository,
+        private CookbookFactory $cookbookFactory,
+    ) {
+    }
+
+    #[Route('/cookbook', name: 'app_cookbook_index')]
+    public function index(): Response
+    {
+        return $this->render('cookbook/index.html.twig');
+    }
+
+    #[Route('/cookbook/{slug}', name: 'app_cookbook_show')]
+    public function show(string $slug): Response
+    {
+        $file = $this->cookbookRepository->findOneByName($slug);
+
+        $cookbook = $this->cookbookFactory->buildFromFile($file);
+
+        return $this->render('cookbook/show.html.twig', [
+            'slug' => $slug,
+            'cookbook' => $cookbook,
+        ]);
+    }
+}

ux.symfony.com/cookbook/architecture_component.md

@@ -11,14 +11,17 @@
 
 namespace App\Model;
 
-class Recipe
+class Cookbook
 {
     public function __construct(
-        public string $name,
+        public string $title,
         public string $description,
         public string $route,
         public string $image,
         public string $content,
+        /**
+         * @var string[]
+         */
         public array $tags = [],
     ) {
     }