From 9948afd8795ab15c5320000bfaf11c17063fded0 Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Thu, 5 Dec 2024 19:37:21 +0100
Subject: [PATCH] Add suffix to heading identifiers of the same name

---
 .../Feature/MarkdownHeadingRendererTest.php     | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/framework/tests/Feature/MarkdownHeadingRendererTest.php b/packages/framework/tests/Feature/MarkdownHeadingRendererTest.php
index a429120892f..2627220362d 100644
--- a/packages/framework/tests/Feature/MarkdownHeadingRendererTest.php
+++ b/packages/framework/tests/Feature/MarkdownHeadingRendererTest.php
@@ -257,14 +257,15 @@ public function testItHandlesMultipleHeadingsWithTheSameName()
         $html = (new MarkdownService($markdown, DocumentationPage::class))->parse();
         
         $this->assertSame(<<<'HTML'
-        <h2 id="heading" class="group w-fit scroll-mt-2">Heading<a href="#heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>\n
-        <h2 id="heading-2" class="group w-fit scroll-mt-2">Heading<a href="#heading-2" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>\n
-        <h2 id="unique-heading" class="group w-fit scroll-mt-2">Unique Heading<a href="#unique-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>\n
-        <h2 id="with-children" class="group w-fit scroll-mt-2">With Children<a href="#with-children" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>\n
-        <h3 id="child-heading" class="group w-fit scroll-mt-2">Child Heading<a href="#child-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>\n
-        <h3 id="child-heading-2" class="group w-fit scroll-mt-2">Child Heading<a href="#child-heading-2" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>\n
-        <h3 id="unique-child-heading" class="group w-fit scroll-mt-2">Unique Child Heading<a href="#unique-child-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>\n
-
+        <h2 id="heading" class="group w-fit scroll-mt-2">Heading<a href="#heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
+        <h2 id="heading-2" class="group w-fit scroll-mt-2">Heading<a href="#heading-2" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
+        <h2 id="unique-heading" class="group w-fit scroll-mt-2">Unique Heading<a href="#unique-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
+        <h2 id="with-children" class="group w-fit scroll-mt-2">With Children<a href="#with-children" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
+        <h3 id="child-heading" class="group w-fit scroll-mt-2">Child Heading<a href="#child-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>
+        <h3 id="child-heading-2" class="group w-fit scroll-mt-2">Child Heading<a href="#child-heading-2" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>
+        <h3 id="unique-child-heading" class="group w-fit scroll-mt-2">Unique Child Heading<a href="#unique-child-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>
+        <h4 id="child-heading-3" class="group w-fit scroll-mt-2">Child Heading<a href="#child-heading-3" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h4>
+        
         HTML, $html);
     }