Highlight code & simplify render

Author: smnandre

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

@@ -1,31 +1,11 @@
 .Cookbook {
-  .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 {
     overflow: hidden;
     width: auto;
     border-radius: .75rem;
-    margin-bottom: 3rem;
     aspect-ratio: 16 / 9;
+    max-width: 1280px;
 
     img {
       display: block;
@@ -53,15 +33,18 @@
     }
 
     h4 {
-        margin-top: 3rem;
-        margin-bottom: 1rem;
-      }
+      margin-top: 3rem;
+      margin-bottom: 1rem;
+    }
   }
 
   pre {
     margin-block: 2rem;
     border-radius: .75rem;
     background-color: #0A0A0A;
     padding: 1rem 1.5rem;
+    color: #d7e2e3;
+    font-size: 1rem;
+    line-height: 1.5;
   }
 }

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

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

ux.symfony.com/src/Model/Cookbook.php

@@ -22,7 +22,7 @@ public function __construct(
         public string $image,
         public string $description,
         public string $content,
-        public array $tags = [],
+        public array $tags,
     ) {
     }
 }

ux.symfony.com/src/Service/CookbookFactory.php

@@ -12,15 +12,18 @@
 namespace App\Service;
 
 use App\Model\Cookbook;
-use League\CommonMark\Environment\Environment;
-use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
-use League\CommonMark\Extension\FrontMatter\FrontMatterExtension;
-use League\CommonMark\Extension\FrontMatter\FrontMatterProviderInterface;
-use League\CommonMark\MarkdownConverter;
+use League\CommonMark\Extension\FrontMatter\Data\SymfonyYamlFrontMatterParser;
+use League\CommonMark\Extension\FrontMatter\FrontMatterParser;
+use League\CommonMark\Extension\FrontMatter\FrontMatterParserInterface;
 
 final class CookbookFactory
 {
-    private MarkdownConverter $converter;
+    private FrontMatterParserInterface $frontMatterParser;
+
+    public function __construct()
+    {
+        $this->frontMatterParser = new FrontMatterParser(new SymfonyYamlFrontMatterParser());
+    }
 
     public function createFromFile(string $file): Cookbook
     {
@@ -30,14 +33,10 @@ public function createFromFile(string $file): Cookbook
 
         $content = file_get_contents($file);
 
-        $parsedContent = $this->getConverter()->convert($content);
-        if (!$parsedContent instanceof FrontMatterProviderInterface) {
-            throw new \RuntimeException('Unable to parse the cookbook.');
-        }
-
-        if (!\is_array($frontMatter = $parsedContent->getFrontMatter())) {
+        if (!\is_array($frontMatter = $this->frontMatterParser->parse($content)->getFrontMatter())) {
             throw new \RuntimeException(\sprintf('Cookbook file "%s" does not contains Front Matter data.', $file));
         }
+
         if (!isset($frontMatter['title']) || !\is_string($frontMatter['title'])) {
             throw new \RuntimeException('Missing title in Front Matter.');
         }
@@ -56,21 +55,8 @@ public function createFromFile(string $file): Cookbook
             slug: str_replace('_', '-', basename($file, '.md')),
             image: $frontMatter['image'],
             description: $frontMatter['description'],
-            content: $parsedContent->getContent(),
+            content: $content,
             tags: $frontMatter['tags'],
         );
     }
-
-    private function getConverter(): MarkdownConverter
-    {
-        if (!isset($this->converter)) {
-            $environment = new Environment();
-            $environment->addExtension(new CommonMarkCoreExtension());
-            $environment->addExtension(new FrontMatterExtension());
-
-            $this->converter = new MarkdownConverter($environment);
-        }
-
-        return $this->converter;
-    }
 }

ux.symfony.com/templates/cookbook/show.html.twig

@@ -41,17 +41,24 @@
                 </div>
                 <div class="pt-4">
                     <div class="image-title">
-                        <img src="{{ asset('images/cookbook/%s-1280x720.png'|format(cookbook.slug)) }}" alt="{{ cookbook.title }} Illustration"  />
+                        <img src="{{ asset('images/cookbook/%s-1280x720.png'|format(cookbook.slug)) }}"
+                             alt="{{ cookbook.title }} Illustration"
+                             width="1280" height="720"
+                        />
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="container container-xl x-4 pt-4 px-md-5 pt-md-5">
-            <div class="content" style="max-width: 75ch;margin-inline: auto;font-size: 1.25rem;line-height: 1.75;font-weight: 200;">
-                {{ cookbook.content|markdown_to_html }}
+            <div class="content"  style="max-width: 75ch;margin-inline: auto;font-size: 1.25rem;line-height: 1.75;font-weight: 300;">
+                {{ cookbook.content|raw|markdown_to_html }}
             </div>
         </div>
 
     </article>
 {% endblock %}
+
+{% block aside %}
+    {{ include('_aside.html.twig') }}
+{% endblock %}