[Site] Clean cook

Author: smnandre

ux.symfony.com/assets/images/cookbook/component-architecture-1280x720.png

@@ -1,51 +1,15 @@
 .Cookbook {
-  h1 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-    text-align: center;
-    font-size: 52px;
-    font-weight: 700;
-    line-height: 60px;
-  }
-
-  .description {
-    text-align: center;
-    font-size: 24px;
-    font-weight: 600;
-    margin-top: 1.5rem;
-  }
-
-  .tags {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    gap: 1rem;
-    text-decoration: none;
-    list-style: none;
-    margin-bottom: 3rem;
-
-    li {
-      background-color: rgb(74 29 150);
-      color: rgb(202 191 253);
-      font-weight: 500;
-      font-size: 0.75rem;
-      line-height: 1rem;
-      padding: .125rem .625rem;
-      border-radius: 0.25rem;
-    }
-  }
 
   .image-title {
-    width: 100%;
-    max-height: 40vh;
     overflow: hidden;
-    border-radius: 4px;
-    margin-bottom: 3rem;
+    width: auto;
+    border-radius: .75rem;
+    aspect-ratio: 16 / 9;
+    max-width: 1280px;
 
     img {
       display: block;
-      object-fit: contain;
+      object-fit: cover;
       width: 100%;
     }
   }
@@ -65,15 +29,22 @@
       font-size: 24px;
       font-weight: 700;
       line-height: 32px;
-      color: #FFFFFF;
+      color: var(--color-text);
+    }
+
+    h4 {
+      margin-top: 3rem;
+      margin-bottom: 1rem;
     }
   }
 
   pre {
-    margin-top: 4rem;
-    margin-bottom: 2rem;
-    border-radius: 4px;
+    margin-block: 2rem;
+    border-radius: .75rem;
     background-color: #0A0A0A;
-    padding: 2rem;
+    padding: 1rem 1.5rem;
+    color: #d7e2e3;
+    font-size: 1rem;
+    line-height: 1.5;
   }
-}
+}

ux.symfony.com/assets/images/cookbook/component-architecture-640x360.png

@@ -17,6 +17,7 @@
   box-shadow: 0 0 0 transparent;
   background: var(--bs-body-bg);
 }
+
 .DemoCard:hover {
   transition: color 250ms ease-in-out, transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
   transform: translateY(-.25rem);
@@ -36,11 +37,12 @@
 }
 
 .DemoCard__image {
-  max-height: 100%;
-  width: 100%;
+  max-width: 100%;
   display: block;
+  object-fit: cover;
   opacity: .90;
 }
+
 .DemoCard:hover .DemoCard__image {
   opacity: .93;
 }
@@ -71,6 +73,7 @@
   line-height: 1.4;
   margin: 0;
 }
+
 .DemoCard:hover .DemoCard__description {
   opacity: .85;
 }
@@ -80,5 +83,5 @@
   margin-bottom: 0;
   display: flex;
   flex-wrap: wrap;
-    gap: .5rem;
+  gap: .5rem;
 }

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

@@ -4,6 +4,7 @@ twig:
 
     paths:
         '%kernel.project_dir%/templates/demos/live_memory': ~
+        '%kernel.project_dir%/cookbook/': 'Cookbook'
 
 when@test:
     twig:

ux.symfony.com/assets/styles/components/_Cookbook.scss

@@ -10,8 +10,6 @@ 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

ux.symfony.com/assets/styles/components/_DemoCard.scss

@@ -1,7 +1,7 @@
 ---
-title: Architecture component
+title: Component architecture
 description: Rules and pattern to work with components
-image: images/cookbook/component_architecture.png
+image: images/cookbook/component-architecture.png
 tags: 
     - javascript
     - symfony
@@ -174,5 +174,5 @@ class Button
 ## Conclusion
 
 Even in Symfony, you can use the component architecture.
-Follow those rules help your front developpers working on codebase
-their are familiar with since those rules are already used in the js world.
+Follow those rules help your front developers working on codebase
+they are familiar with since those rules are already used in the JS world.

ux.symfony.com/config/packages/twig.yaml

@@ -11,21 +11,20 @@
 
 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;
+use Symfony\Component\Routing\Requirement\Requirement;
 
 class CookbookController extends AbstractController
 {
     public function __construct(
-        private CookbookRepository $cookbookRepository,
-        private CookbookFactory $cookbookFactory,
+        private readonly CookbookRepository $cookbookRepository,
     ) {
     }
 
-    #[Route('/cookbook', name: 'app_cookbook_index')]
+    #[Route('/cookbook', name: 'app_cookbook')]
     public function index(): Response
     {
         $cookbooks = $this->cookbookRepository->findAll();
@@ -35,13 +34,15 @@ public function index(): Response
         ]);
     }
 
-    #[Route('/cookbook/{slug}', name: 'app_cookbook_show')]
+    #[Route('/cookbook/{slug}', name: 'app_cookbook_show', requirements: ['slug' => Requirement::ASCII_SLUG])]
     public function show(string $slug): Response
     {
-        $cookbook = $this->cookbookRepository->findOneByName($slug);
+        $cookbook = $this->cookbookRepository->findOneBySlug($slug);
+        if (!$cookbook) {
+            throw $this->createNotFoundException(\sprintf('Cookbook "%s" not found', $slug));
+        }
 
         return $this->render('cookbook/show.html.twig', [
-            'slug' => $slug,
             'cookbook' => $cookbook,
         ]);
     }

ux.symfony.com/config/services.yaml

@@ -11,18 +11,18 @@
 
 namespace App\Model;
 
-class Cookbook
+final readonly class Cookbook
 {
+    /**
+     * @param list<string> $tags
+     */
     public function __construct(
         public string $title,
-        public string $description,
-        public string $route,
+        public string $slug,
         public string $image,
+        public string $description,
         public string $content,
-        /**
-         * @var string[]
-         */
-        public array $tags = [],
+        public array $tags,
     ) {
     }
 }