feat: add the missing anchors on the website homepage + cleanup (#141)

README.md

@@ -113,7 +113,7 @@ You can also directly use the [FrankenPHP](https://github.com/strangebuzz/MicroS
 * The [Symfony CLI](https://symfony.com/download)
 
 
-### Optional requirements ⚙
+### Optional requirements 🚦
 
 * The [Xdebug](https://xdebug.org/) PHP extension if you want to run the code coverage report
 * [Castor](https://github.com/jolicode/castor) task runner if you don't want to use
@@ -122,11 +122,12 @@ You can also directly use the [FrankenPHP](https://github.com/strangebuzz/MicroS
 
 ## Stack 🔗
 
+* [PHP 8.2](https://www.php.net/releases/8.2/en.php) to [8.4](https://www.php.net/releases/8.4/en.php)
 * [Symfony 7.2](https://symfony.com/7)
 * [Twig 3.8](https://twig.symfony.com)
-* Hotwired [stimulus 3.2](https://stimulus.hotwired.dev/) and [Turbo 8.0](https://turbo.hotwired.dev/)
-* [PHPUnit 11.0](https://phpunit.de/announcements/phpunit-11.html)
-* The [Pico CSS](https://picocss.com) framework
+* [Hotwired](https://hotwired.dev/) [Stimulus 3.2](https://stimulus.hotwired.dev/) and [Turbo 8.0](https://turbo.hotwired.dev/)
+* [PHPUnit 11.5](https://phpunit.de/announcements/phpunit-11.html)
+* [Pico CSS 2.0](https://picocss.com)
 
 
 ## Features 🚀

src/Twig/Extension/MarkdownExtension.php

@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Twig\Extension;
+
+use App\Helper\StringHelper;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+use function Symfony\Component\String\u;
+
+final class MarkdownExtension extends AbstractExtension
+{
+    public function __construct(
+        private readonly StringHelper $stringHelper,
+    ) {
+    }
+
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('add_headers_anchors', $this->addHeadersAnchors(...)),
+        ];
+    }
+
+    /**
+     * Add the missing anchors on demo website homepage displaying the Githb README.
+     *
+     * @see https://microsymfony.ovh
+     * @see https://github.com/strangebuzz/MicroSymfony/blob/main/README.md?plain=1
+     */
+    public function addHeadersAnchors(string $html): string
+    {
+        $dom = new \DOMDocument();
+        $dom->loadHTML(mb_encode_numericentity($html, [0x80, 0x10FFFF, 0, ~0], 'UTF-8'), \LIBXML_HTML_NOIMPLIED | \LIBXML_HTML_NODEFDTD);
+
+        /** @var \DOMNodeList<\DOMNode> $tags */
+        $tags = (new \DOMXPath($dom))->query('//h1 | //h2 | //h3 | //h4 | //h5 | //h6');
+        // Allow to have the same "buggy" anchors as GitHub
+        foreach ($tags as $headerTag) {
+            $slug = $this->stringHelper->slugify($headerTag->textContent);
+            /** @var \DOMElement $headerTag */
+            $headerTag->setAttribute('id', $slug.(u($slug)->length() !== u($headerTag->textContent)->length() ? '-' : '')); // add "-" when we have a final Emoji.
+        }
+
+        return (string) $dom->saveHTML();
+    }
+}

templates/App/Controller/HomeAction.html.twig

@@ -8,20 +8,22 @@
 
     <hr/>
 
-    {{ readme|raw|markdown_to_html|raw }}
+    {{ readme|raw|markdown_to_html|add_headers_anchors|raw }}
 
-    {# Uncomment this and adapat it to your needs.
+    {# Uncomment and adapt to your needs.
 
     <h1>MicroSymfony 🎶</h1>
 
+    <h2>About 🖋</h1>
+
     <h2>Table of Contents 📖</h2>
 
     <h2>Demos 🌈</h2>
 
     <h2>Quick-start ⚡</h2>
 
     <h2>Stack 🔗</h2>
-
+🔆
     <h2>Features 🚀</h2>
 
     <h2>Notes 📒</h2>
@@ -37,6 +39,8 @@
     <h2>Credits 🙏</h2>
 
     <h2>License ⚖️</h2>
+
+    <h2>Built with MicroSymfony 🛠️️</h2>
     #}
 
 {% endblock %}

templates/base.html.twig

@@ -57,7 +57,7 @@
                         <a class="contrast" data-tooltip="{{ website }}" data-placement="bottom" href="{{ website }}" target="_blank"><img alt="GitHub" class="github-icon" src="{{ asset('icons/github.svg') }}" width="24" height="24"></a>
                     </li>
                     <li>
-                        <a class="theme-icon" {{ stimulus_target('header', 'lightEmoji') }} {{ stimulus_action('header', 'setDarkMode', 'click') }} data-tooltip="Switch to dark mode" data-placement="bottom">🌞</a>
+                        <a class="theme-icon" {{ stimulus_target('header', 'lightEmoji') }} {{ stimulus_action('header', 'setDarkMode', 'click') }} data-tooltip="Switch to dark mode" data-placement="bottom">🔆</a>
                         <a class="theme-icon" {{ stimulus_target('header', 'darkEmoji') }} {{ stimulus_action('header', 'setLightMode', 'click') }} data-tooltip="Switch to light mode" data-placement="bottom">🌘 </a>
                     </li>
                 </ul>

tests/Integration/Twig/Extension/MarkdownExtensionTest.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Tests\Integration\Twig\Extension;
+
+use App\Twig\Extension\MarkdownExtension;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+
+final class MarkdownExtensionTest extends KernelTestCase
+{
+    public function testRoutingExtensionInvalidArgumentException(): void
+    {
+        self::bootKernel();
+        $extension = self::getContainer()->get(MarkdownExtension::class);
+        self::assertNotEmpty($extension->getFilters());
+    }
+}