[Site] improvements/fixes

symfony · Apr 18, 2024 · c2dcd14 · c2dcd14
1 parent d4df614
commit c2dcd14
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 9 deletions.
diff --git a/ux.symfony.com/assets/controllers/code-highlighter-controller.js b/ux.symfony.com/assets/controllers/code-highlighter-controller.js
@@ -4,10 +4,14 @@ import hljs_javascript from 'highlight.js/lib/languages/javascript';
 import hljs_php from 'highlight.js/lib/languages/php';
 import hljs_xml from 'highlight.js/lib/languages/xml';
 import hljs_twig from 'highlight.js/lib/languages/twig';
+import hljs_yaml from 'highlight.js/lib/languages/yaml';
+import hljs_diff from 'highlight.js/lib/languages/diff';
 
 hljs.registerLanguage('javascript', hljs_javascript);
 hljs.registerLanguage('php', hljs_php);
 hljs.registerLanguage('twig', hljs_twig);
+hljs.registerLanguage('yaml', hljs_yaml);
+hljs.registerLanguage('diff', hljs_diff);
 // xml is the language used for HTML
 hljs.registerLanguage('xml', hljs_xml);
 

diff --git a/ux.symfony.com/config/services.yaml b/ux.symfony.com/config/services.yaml
@@ -24,7 +24,8 @@ services:
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones
 
-    Highlight\Highlighter: ~
+    App\Service\CommonMark\CodeExtension:
+        tags: ['twig.markdown.league_extension']
 
     League\CommonMark\Extension\ExternalLink\ExternalLinkExtension:
         tags: ['twig.markdown.league_extension']
diff --git a/ux.symfony.com/importmap.php b/ux.symfony.com/importmap.php
@@ -207,4 +207,10 @@
     '@kurkle/color' => [
         'version' => '0.3.2',
     ],
+    'highlight.js/lib/languages/yaml' => [
+        'version' => '11.9.0',
+    ],
+    'highlight.js/lib/languages/diff' => [
+        'version' => '11.9.0',
+    ],
 ];
diff --git a/ux.symfony.com/src/Service/CommonMark/CodeExtension.php b/ux.symfony.com/src/Service/CommonMark/CodeExtension.php
@@ -0,0 +1,27 @@
+<?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\Service\CommonMark;
+
+use League\CommonMark\Environment\EnvironmentBuilderInterface;
+use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
+use League\CommonMark\Extension\ExtensionInterface;
+
+/**
+ * @author Kevin Bond <[email protected]>
+ */
+final class CodeExtension implements ExtensionInterface
+{
+    public function register(EnvironmentBuilderInterface $environment): void
+    {
+        $environment->addRenderer(FencedCode::class, new CodeRenderer(), 10);
+    }
+}
diff --git a/ux.symfony.com/src/Service/CommonMark/CodeRenderer.php b/ux.symfony.com/src/Service/CommonMark/CodeRenderer.php
@@ -0,0 +1,51 @@
+<?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\Service\CommonMark;
+
+use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
+use League\CommonMark\Node\Node;
+use League\CommonMark\Renderer\ChildNodeRendererInterface;
+use League\CommonMark\Renderer\NodeRendererInterface;
+use League\CommonMark\Util\HtmlElement;
+use League\CommonMark\Util\Xml;
+
+/**
+ * @author Kevin Bond <[email protected]>
+ */
+final class CodeRenderer implements NodeRendererInterface
+{
+    /**
+     * @param FencedCode $node
+     */
+    public function render(Node $node, ChildNodeRendererInterface $childRenderer): string|\Stringable|null
+    {
+        $codeAttr = ['data-code-highlighter-target' => 'codeBlock'];
+
+        if ($lang = $node->getInfo()) {
+            $codeAttr['class'] = 'language-'.$lang;
+        }
+
+        return new HtmlElement(
+            'div',
+            ['class' => 'Terminal_body mb-3'],
+            new HtmlElement(
+                'div',
+                ['class' => 'Terminal_content'],
+                new HtmlElement(
+                    'pre',
+                    ['data-controller' => 'code-highlighter'],
+                    new HtmlElement('code', $codeAttr, Xml::escape($node->getLiteral()))
+                )
+            )
+        );
+    }
+}
diff --git a/ux.symfony.com/templates/ux_packages/translator.html.twig b/ux.symfony.com/templates/ux_packages/translator.html.twig
@@ -54,7 +54,9 @@
         <div class="row mb-4">
             <div class="col-5">
                 <div class="Terminal_body">
-                    <pre data-translator-demo-target="helloCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="helloCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">
@@ -65,7 +67,9 @@
         <div class="row mb-4">
             <div class="col-5">
                 <div class="Terminal_body">
-                    <pre data-translator-demo-target="sayHelloCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="sayHelloCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">
@@ -91,7 +95,9 @@
         <div class="row mb-4">
             <div class="col-5">
                 <div class="Terminal_body">
-                    <pre data-translator-demo-target="invitationTitleCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="invitationTitleCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">
@@ -134,7 +140,9 @@
         <div class="row mb-4">
             <div class="col-5">
                 <div class="Terminal_body">
-                    <pre data-translator-demo-target="numOfApplesCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="numOfApplesCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">
@@ -162,7 +170,9 @@
         <div class="row mb-4">
             <div class="col-5">
                 <div class="Terminal_body">
-                    <pre data-translator-demo-target="finishPlaceCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="finishPlaceCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">
@@ -189,7 +199,9 @@
         <div class="row mb-4">
             <div class="col-5">
                 <div class="Terminal_body">
-                    <pre data-translator-demo-target="publishedAtCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="publishedAtCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">
@@ -215,7 +227,9 @@
         <div class="row mb-4">
             <div class="col-5">
                 <div class="Terminal_body">
-                    <pre data-translator-demo-target="progressAtCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="progressAtCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">
@@ -240,7 +254,9 @@
         <div class="row">
             <div class="col-5">
                 <div class="Terminal_body">
-                <pre data-translator-demo-target="valueOfObjectCode"></pre>
+                    <div class="Terminal_content">
+                        <pre data-translator-demo-target="valueOfObjectCode"></pre>
+                    </div>
                 </div>
             </div>
             <div class="col">