Skip to content

Commit fd643db

Browse files
kbondkbond
committed
bug #1743 [Site] improvements/fixes (kbond)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] improvements/fixes | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Issues | n/a | License | MIT - adds yaml/diff as highlight.js languages - fix styling on translator page - add code highlighting to markdown On `/changelog`, the diffs are now rendered nicely: ![Screenshot Capture - 2024-04-16 - 19-44-10](https://github.com/symfony/ux/assets/127811/bd079929-d8f2-43eb-8092-20414d3d30d2) Commits ------- c2dcd14 [Site] improvements/fixes
2 parents 65e8a96 + c2dcd14 commit fd643db

File tree

6 files changed

+114
-9
lines changed

6 files changed

+114
-9
lines changed

‎ux.symfony.com/assets/controllers/code-highlighter-controller.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ import hljs_javascript from 'highlight.js/lib/languages/javascript';
44
import hljs_php from 'highlight.js/lib/languages/php';
55
import hljs_xml from 'highlight.js/lib/languages/xml';
66
import hljs_twig from 'highlight.js/lib/languages/twig';
7+
import hljs_yaml from 'highlight.js/lib/languages/yaml';
8+
import hljs_diff from 'highlight.js/lib/languages/diff';
79

810
hljs.registerLanguage('javascript', hljs_javascript);
911
hljs.registerLanguage('php', hljs_php);
1012
hljs.registerLanguage('twig', hljs_twig);
13+
hljs.registerLanguage('yaml', hljs_yaml);
14+
hljs.registerLanguage('diff', hljs_diff);
1115
// xml is the language used for HTML
1216
hljs.registerLanguage('xml', hljs_xml);
1317

‎ux.symfony.com/config/services.yaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ services:
2424
# add more service definitions when explicit configuration is needed
2525
# please note that last definitions always *replace* previous ones
2626

27-
Highlight\Highlighter: ~
27+
App\Service\CommonMark\CodeExtension:
28+
tags: ['twig.markdown.league_extension']
2829

2930
League\CommonMark\Extension\ExternalLink\ExternalLinkExtension:
3031
tags: ['twig.markdown.league_extension']

‎ux.symfony.com/importmap.php

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,4 +207,10 @@
207207
'@kurkle/color' => [
208208
'version' => '0.3.2',
209209
],
210+
'highlight.js/lib/languages/yaml' => [
211+
'version' => '11.9.0',
212+
],
213+
'highlight.js/lib/languages/diff' => [
214+
'version' => '11.9.0',
215+
],
210216
];

‎ux.symfony.com/src/Service/CommonMark/CodeExtension.php

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <fabien@symfony.com>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Service\CommonMark;
13+
14+
use League\CommonMark\Environment\EnvironmentBuilderInterface;
15+
use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
16+
use League\CommonMark\Extension\ExtensionInterface;
17+
18+
/**
19+
* @author Kevin Bond <kevinbond@gmail.com>
20+
*/
21+
final class CodeExtension implements ExtensionInterface
22+
{
23+
public function register(EnvironmentBuilderInterface $environment): void
24+
{
25+
$environment->addRenderer(FencedCode::class, new CodeRenderer(), 10);
26+
}
27+
}

‎ux.symfony.com/src/Service/CommonMark/CodeRenderer.php

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <fabien@symfony.com>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Service\CommonMark;
13+
14+
use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
15+
use League\CommonMark\Node\Node;
16+
use League\CommonMark\Renderer\ChildNodeRendererInterface;
17+
use League\CommonMark\Renderer\NodeRendererInterface;
18+
use League\CommonMark\Util\HtmlElement;
19+
use League\CommonMark\Util\Xml;
20+
21+
/**
22+
* @author Kevin Bond <kevinbond@gmail.com>
23+
*/
24+
final class CodeRenderer implements NodeRendererInterface
25+
{
26+
/**
27+
* @param FencedCode $node
28+
*/
29+
public function render(Node $node, ChildNodeRendererInterface $childRenderer): string|\Stringable|null
30+
{
31+
$codeAttr = ['data-code-highlighter-target' => 'codeBlock'];
32+
33+
if ($lang = $node->getInfo()) {
34+
$codeAttr['class'] = 'language-'.$lang;
35+
}
36+
37+
return new HtmlElement(
38+
'div',
39+
['class' => 'Terminal_body mb-3'],
40+
new HtmlElement(
41+
'div',
42+
['class' => 'Terminal_content'],
43+
new HtmlElement(
44+
'pre',
45+
['data-controller' => 'code-highlighter'],
46+
new HtmlElement('code', $codeAttr, Xml::escape($node->getLiteral()))
47+
)
48+
)
49+
);
50+
}
51+
}

‎ux.symfony.com/templates/ux_packages/translator.html.twig

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@
5454
<div class="row mb-4">
5555
<div class="col-5">
5656
<div class="Terminal_body">
57-
<pre data-translator-demo-target="helloCode"></pre>
57+
<div class="Terminal_content">
58+
<pre data-translator-demo-target="helloCode"></pre>
59+
</div>
5860
</div>
5961
</div>
6062
<div class="col">
@@ -65,7 +67,9 @@
6567
<div class="row mb-4">
6668
<div class="col-5">
6769
<div class="Terminal_body">
68-
<pre data-translator-demo-target="sayHelloCode"></pre>
70+
<div class="Terminal_content">
71+
<pre data-translator-demo-target="sayHelloCode"></pre>
72+
</div>
6973
</div>
7074
</div>
7175
<div class="col">
@@ -91,7 +95,9 @@
9195
<div class="row mb-4">
9296
<div class="col-5">
9397
<div class="Terminal_body">
94-
<pre data-translator-demo-target="invitationTitleCode"></pre>
98+
<div class="Terminal_content">
99+
<pre data-translator-demo-target="invitationTitleCode"></pre>
100+
</div>
95101
</div>
96102
</div>
97103
<div class="col">
@@ -134,7 +140,9 @@
134140
<div class="row mb-4">
135141
<div class="col-5">
136142
<div class="Terminal_body">
137-
<pre data-translator-demo-target="numOfApplesCode"></pre>
143+
<div class="Terminal_content">
144+
<pre data-translator-demo-target="numOfApplesCode"></pre>
145+
</div>
138146
</div>
139147
</div>
140148
<div class="col">
@@ -162,7 +170,9 @@
162170
<div class="row mb-4">
163171
<div class="col-5">
164172
<div class="Terminal_body">
165-
<pre data-translator-demo-target="finishPlaceCode"></pre>
173+
<div class="Terminal_content">
174+
<pre data-translator-demo-target="finishPlaceCode"></pre>
175+
</div>
166176
</div>
167177
</div>
168178
<div class="col">
@@ -189,7 +199,9 @@
189199
<div class="row mb-4">
190200
<div class="col-5">
191201
<div class="Terminal_body">
192-
<pre data-translator-demo-target="publishedAtCode"></pre>
202+
<div class="Terminal_content">
203+
<pre data-translator-demo-target="publishedAtCode"></pre>
204+
</div>
193205
</div>
194206
</div>
195207
<div class="col">
@@ -215,7 +227,9 @@
215227
<div class="row mb-4">
216228
<div class="col-5">
217229
<div class="Terminal_body">
218-
<pre data-translator-demo-target="progressAtCode"></pre>
230+
<div class="Terminal_content">
231+
<pre data-translator-demo-target="progressAtCode"></pre>
232+
</div>
219233
</div>
220234
</div>
221235
<div class="col">
@@ -240,7 +254,9 @@
240254
<div class="row">
241255
<div class="col-5">
242256
<div class="Terminal_body">
243-
<pre data-translator-demo-target="valueOfObjectCode"></pre>
257+
<div class="Terminal_content">
258+
<pre data-translator-demo-target="valueOfObjectCode"></pre>
259+
</div>
244260
</div>
245261
</div>
246262
<div class="col">

0 commit comments

Comments
 (0)