Render the heading permalink symbol using a pseudo element

This should hopefully fix #1801
hydephp · Jul 8, 2024 · 8e5407d · 8e5407d
1 parent 4b63503
commit 8e5407d
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/packages/framework/src/Framework/Services/MarkdownService.php b/packages/framework/src/Framework/Services/MarkdownService.php
@@ -206,7 +206,7 @@ protected function configurePermalinksExtension(): void
             'heading_permalink' => [
                 'id_prefix' => '',
                 'fragment_prefix' => '',
-                'symbol' => '#',
+                'symbol' => '',
                 'insert' => 'after',
                 'min_heading_level' => 2,
                 'aria_hidden' => false,

diff --git a/packages/framework/tests/Feature/MarkdownServiceTest.php b/packages/framework/tests/Feature/MarkdownServiceTest.php
@@ -34,7 +34,7 @@ public function testServiceCanParseMarkdownToHtmlWithPermalinks()
         $this->assertIsString($html);
         $this->assertSame(
             '<h2>Hello World!<a id="hello-world" href="#hello-world" class="heading-permalink" '.
-            'title="Permalink">#</a></h2>'."\n",
+            'title="Permalink"></a></h2>'."\n",
             $html
         );
     }

diff --git a/packages/framework/tests/Feature/StaticSiteBuilderDocumentationModuleTest.php b/packages/framework/tests/Feature/StaticSiteBuilderDocumentationModuleTest.php
@@ -44,7 +44,7 @@ public function testPageContainsExpectedContent()
     {
         $this->inspectHtml([
             'Adventures in Wonderland',
-            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink">#</a></h2>',
+            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink"></a></h2>',
             '<p>So she was considering in her own mind, as well as she could',
         ]);
     }
@@ -55,7 +55,7 @@ public function testCanCompilePageToRootOutputDirectory()
 
         $this->inspectHtml([
             'Adventures in Wonderland',
-            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink">#</a></h2>',
+            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink"></a></h2>',
             '<p>So she was considering in her own mind, as well as she could',
         ], '_site/test-page.html');
     }

diff --git a/packages/hydefront/sass/docs/heading-permalinks.scss b/packages/hydefront/sass/docs/heading-permalinks.scss
@@ -17,6 +17,9 @@
 				transition: opacity 0.3s ease;
 				padding: 0 0.25rem;
 				scroll-margin: 1rem;
+				&::before {
+					content: '#';
+				}
 				&:hover, &:focus {
 					opacity: 1;
 					filter: unset;