Render heading links on the server

laravel · Aug 26, 2024 · 622188e · 622188e
1 parent 627ca99
commit 622188e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 25 deletions.
diff --git a/app/Markdown/GithubFlavoredMarkdownConverter.php b/app/Markdown/GithubFlavoredMarkdownConverter.php
@@ -2,25 +2,22 @@
 
 namespace App\Markdown;
 
-use Illuminate\Support\Str;
+use Laravel\Unfenced\UnfencedExtension;
+use League\CommonMark\Environment\Environment;
+use League\CommonMark\Environment\EnvironmentInterface;
+use League\CommonMark\Event\DocumentParsedEvent;
+use League\CommonMark\Extension\Attributes\AttributesExtension;
 use League\CommonMark\Extension\Autolink\AutolinkExtension;
+use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
+use League\CommonMark\Extension\CommonMark\Node\Block\BlockQuote;
+use League\CommonMark\Extension\CommonMark\Node\Block\Heading;
+use League\CommonMark\Extension\CommonMark\Node\Inline\HtmlInline;
 use League\CommonMark\Extension\Strikethrough\StrikethroughExtension;
 use League\CommonMark\Extension\Table\TableExtension;
 use League\CommonMark\Extension\TaskList\TaskListExtension;
 use League\CommonMark\MarkdownConverter;
-use League\CommonMark\Environment\Environment;
-use App\Markdown\GithubFlavoredMarkdownExtension;
-use Illuminate\Support\Facades\Vite;
-use League\CommonMark\Node\Node;
-use League\CommonMark\Renderer\ChildNodeRendererInterface;
-use League\CommonMark\Util\HtmlElement;
+use League\CommonMark\Node\Block\Paragraph;
 use Torchlight\Commonmark\V2\TorchlightExtension;
-use Laravel\Unfenced\UnfencedExtension;
-use League\CommonMark\Environment\EnvironmentInterface;
-use League\CommonMark\Extension\Attributes\AttributesExtension;
-use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
-use League\CommonMark\Extension\CommonMark\Node\Block\BlockQuote;
-use League\CommonMark\Renderer\NodeRendererInterface;
 
 /**
  * Converts GitHub Flavored Markdown to HTML.
@@ -46,6 +43,49 @@ public function __construct(array $config = [])
 
         $environment->addRenderer(BlockQuote::class, new BlockQuoteRenderer());
 
+        $environment->addEventListener(DocumentParsedEvent::class, function (DocumentParsedEvent $event) {
+            $walker = $event->getDocument()->walker();
+
+            while ($event = $walker->next()) {
+                [
+                    $paragraph,
+                    $heading,
+                    $linkOpener,
+                    $linkCloser,
+                ] = [
+                    $event->getNode(),
+                    $event->getNode()->next(),
+                    $event->getNode()->firstChild(),
+                    $event->getNode()->lastChild(),
+                ];
+
+                if (
+                    ! $heading instanceof Heading ||
+                    ! $paragraph instanceof Paragraph ||
+                    count($paragraph->children()) !== 2 ||
+                    ! $linkOpener instanceof HtmlInline ||
+                    ! $linkCloser instanceof HtmlInline ||
+                    ! str_starts_with($linkOpener->getLiteral(), '<a name="') ||
+                    ! str_ends_with($linkOpener->getLiteral(), '">') ||
+                    substr_count($linkOpener->getLiteral(), '"') !== 2 ||
+                    $paragraph->firstChild()->next() !== $paragraph->lastChild() ||
+                    ! str_starts_with($linkCloser->getLiteral(), '</a>')
+                ) {
+                    continue;
+                }
+
+                $link = str($linkOpener->getLiteral())->after('<a name="')->beforeLast('">')->toString();
+
+                $heading->data->set('attributes.id', $link);
+                $heading->prependChild(new HtmlInline('<a href="#'.$link.'">'));
+                $heading->appendChild(new HtmlInline('</a>'));
+
+                $walker->resumeAt($heading->next());
+
+                $paragraph->detach();
+            }
+        });
+
         parent::__construct($environment);
     }
 

diff --git a/resources/js/docs.js b/resources/js/docs.js
@@ -2,7 +2,6 @@ import './clipboard';
 import './theme'
 
 document.addEventListener('DOMContentLoaded', () => {
-    wrapHeadingsInAnchors();
     setupNavCurrentLinkHandling();
     highlightSupportPolicyTable();
 
@@ -20,17 +19,6 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 })
 
-function wrapHeadingsInAnchors() {
-    [...document.querySelector('.docs_main').querySelectorAll('a[name]')].forEach(anchor => {
-        const heading = anchor.parentNode.nextElementSibling;
-        heading.id = anchor.name;
-        anchor.href = `#${anchor.name}`;
-        anchor.removeAttribute('name');
-        [...heading.childNodes].forEach(node => anchor.appendChild(node));
-        heading.appendChild(anchor);
-    });
-}
-
 function setupNavCurrentLinkHandling() {
     [...document.querySelectorAll('.docs_sidebar h2')].forEach(el => {
         el.addEventListener('click', (e) => {