feat(mdx-loader): Remark plugin to report unused MDX / Markdown anchors links #9512
Conversation
OzakIOne
changed the title
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
⚡️ Lighthouse report for the deploy preview of this PR
|
There was a problem hiding this comment.
The algorithm doesn't look good to me, and we already implemented a better broken anchor link checker
I thought maybe a remark plugin could be a good idea to give quicker feedback, but I don't think so anymore.
There would be no good way for this remark plugin to report cases such as:
<Link id="customId"/>
[link to custom id](#customId)So, this remark plugin would report a false positive error while the other "slower" broken link checker would not report it.
Also I don't think we could support checking remote files efficiently.
It wouldn't be a very good experience to only support local anchors, and to support them less reliably than our existing solution
So I'm going to close this draft PR for now
| type NodeType = { | ||
| heading: 'heading'; | ||
| link: 'link'; | ||
| text: 'text'; | ||
| }; | ||
|
|
||
| const nodeType: NodeType = { | ||
| heading: 'heading', | ||
| link: 'link', | ||
| text: 'text', | ||
| }; |
There was a problem hiding this comment.
FYI using this TS is kind of equivalent and simpler:
const nodeType = {
heading: 'heading',
link: 'link',
text: 'text',
} as const;
type NodeType = typeof nodeType;| visit<Parent, ['heading', 'link']>( | ||
| tree, | ||
| nodeTypes, | ||
| (directive: Heading | Link) => { |
There was a problem hiding this comment.
headings and links are not directives (:x ::xy or :::xyz), they are just headings and links, or nodes
Pre-flight checklist
Motivation
As of today, Docusaurus only check broken links and numerous people would like Docusaurus to check broken anchors.
I've made a PoC remark plugin that aims to detect broken anchors and warn the user about it, so far here is the functionality implemented :
# Title {#custom-id}For the custom id it should be fairly easy to support it, the problem is just that in the jest tests the remark plugin for custom id doesn't seems to work, and implement the custom id in the rendered html, it just renders it as text
For the broken anchors related to an other
.mdfile, I don't know how to implement it, I thought we could do it in this remark plugin by recursively checking.mdfiles and checking the anchors however it doesn't seems to be the right way to do it.For now the only way for users to check the anchors in other files is to setup a ci with remark validate links
Test Plan
Test links
yarn jest brokenAnchors --watchDeploy preview: https://deploy-preview-9512--docusaurus-2.netlify.app/
Related issues/PRs
#3321