Allow links to anchors within components

[robmunger]

Is your feature request related to a problem?

Currently, if I link to an anchor that is defined within a component, the link validator throws an error. (I think.)

For example, in src/content/docs, I have the following two files:

testpage.mdx has:

---
title: Test page
---
import TestComponent from "./TestComponent.astro";

<a href="#testid">go to component</a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<TestComponent />

TestComponent.astro has:

---
---
<a id="testid" />

Because <a id="testid" /> is on /testpage via TestComponent, the link to #testid is valid.

When I run pnpm build, I get:

 validating links 
15:32:25 [ERROR] ✗ Found 1 invalid link in 1 file.
15:32:25 ▶ l0/testpage/
15:32:25   └─ #testid - invalid anchor        

Describe the solution you'd like

If I'm not doing anything wrong, I'd like to be able to link to anchors that are defined within components.

Describe alternatives you've considered

I could refactor my code to move the anchor outside of the component, but that would be harder to maintain.

Additional Context

Thanks for a great Plugin! It makes my work much easier!

[HiDeoo]

Thanks for the report 🙌

This is indeed a current limitation of the plugin and the approach used to validate links. A workaround right now would be use the following syntax in MDX:

<a href="#testid">go to component</a>

…

<Test>
  <h4 id="testid">Something</h4>
</Test>

and have the component render the element with the id attribute using a slot:

<slot />
<p>My component</p>

There are definitely cons to this approach like a worse DX altho it allows in this case to be explicit about the URI fragment and allow for multiple uses of the same component in the same page which would be impossible with the current approach and also nothing would prevent the page from having multiple elements with the same id attribute if a user were to use the component multiple times in the same page.

Fixing this behavior is definitely something that would be possible by refactoring the approach used to validate links altho this would prevent some future features I have planned for the plugin. I'm currently exploring various approaches to see what would be the best considering the limitations and possibilities for the plugin.