fix: trim trailing slash from slug for heading w markup

packages/starlight-links-validator/libs/remark.ts

@@ -56,7 +56,12 @@ export const remarkStarlightLinksValidator: Plugin<[{ base: string; srcDir: URL
             break
           }
 
-          fileHeadings.push(slugger.slug(content))
+          // Remove trailing -, given that a heading can contain trailing markup e.g. a deprecation <Badge>
+          // GitHub Slugger considers it as content and adds a -
+          // Whereas Astro Markdown renderer removes this trailing - from the DOM node's id
+          // See: tests/markup-in-heading
+          const headingSlug = slugger.slug(content).replace(/-$/, '')
+          fileHeadings.push(headingSlug)
 
           break
         }

packages/starlight-links-validator/tests/fixtures/markup-in-heading/astro.config.ts

@@ -0,0 +1,14 @@
+import starlight from '@astrojs/starlight'
+import { defineConfig } from 'astro/config'
+
+import starlightLinksValidator from 'starlight-links-validator'
+
+export default defineConfig({
+  integrations: [
+    starlight({
+      pagefind: false,
+      plugins: [starlightLinksValidator()],
+      title: 'Starlight Links Validator Tests - markup in heading',
+    }),
+  ],
+})

packages/starlight-links-validator/tests/fixtures/markup-in-heading/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@starlight-links-validator-tests/markup-in-heading",
+  "version": "0.0.0",
+  "dependencies": {
+    "@astrojs/starlight": "0.26.1",
+    "astro": "4.8.6",
+    "starlight-links-validator": "workspace:*"
+  },
+  "private": true
+}

packages/starlight-links-validator/tests/fixtures/markup-in-heading/src/content/config.ts

@@ -0,0 +1,6 @@
+import { docsSchema } from '@astrojs/starlight/schema'
+import { defineCollection } from 'astro:content'
+
+export const collections = {
+  docs: defineCollection({ schema: docsSchema() }),
+}

packages/starlight-links-validator/tests/fixtures/markup-in-heading/src/content/docs/page-two.md

@@ -0,0 +1,7 @@
+---
+title: Page Two
+---
+
+- [Heading with trailing no content markup](/page#heading-with-trailing-no-content-markup)
+- [Heading with trailing content markup](/page#heading-with-trailing-content-markup-foo)
+- [Heading with complicated markup](/page#-foo-heading-with--foo-complicated-markup-foo)

packages/starlight-links-validator/tests/fixtures/markup-in-heading/src/content/docs/page.mdx

@@ -0,0 +1,15 @@
+---
+title: Test
+---
+
+import { Badge } from '@astrojs/starlight/components'
+
+## Heading with trailing no content markup <Badge text="x"/>
+
+## Heading with trailing content markup <Badge text="x">Foo</Badge>
+
+## <Badge text="x"/> <Badge text="x">Foo</Badge> Heading with <Badge text="x"/> <Badge text="x">Foo</Badge> complicated markup <Badge text="x">Foo</Badge> <Badge text="x"/>
+
+- [Local link](#heading-with-trailing-no-content-markup)
+- [Local link 2](#heading-with-trailing-content-markup-foo)
+- [Local link 3](#-foo-heading-with--foo-complicated-markup-foo)

packages/starlight-links-validator/tests/fixtures/markup-in-heading/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="../.astro/types.d.ts" />

packages/starlight-links-validator/tests/markup-in-heading.test.ts

@@ -0,0 +1,19 @@
+import { expect, test } from 'vitest'
+
+import { buildFixture } from './utils'
+
+/**
+ * When there is markup in a heading, Astro to renders the heading elements with an id
+ * that matches the textContent of the heading (excluding the text content of the inner markup elements)
+ * and then it lowercase & kebabizes it and removes trailing hyphens (but not leading hyphens!)
+ *
+ * We use GitHub Slugger to convert the remark heading node string content to a slug.
+ * Since that util does not remove trailing hyphens, we do so to close the gap with the Astro MD to html renderer
+ *
+ * This means Astro sluggifies `## Heading <Foo>` as "heading" for the id attr, but GitHub sluggers renders it as "heading-"
+ */
+test('validates links using anchors that refer to headings that contain markup', async () => {
+  const { status } = await buildFixture('markup-in-heading')
+
+  expect(status).toBe('success')
+})