fix: Incorrect anchor tag

next.dynamic.mjs

@@ -5,6 +5,8 @@ import { readFileSync } from 'node:fs';
 import { VFile } from 'vfile';
 import remarkGfm from 'remark-gfm';
 import remarkHeadings from '@vcarl/remark-headings';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
 import { serialize } from 'next-mdx-remote/serialize';
 import * as nextLocales from './next.locales.mjs';
 import * as nextConstants from './next.constants.mjs';
@@ -157,6 +159,16 @@ export const getStaticProps = async (source = '', filename = '') => {
     const { compiledSource } = await serialize(sourceAsVirtualFile, {
       parseFrontmatter: true,
       mdxOptions: {
+        rehypePlugins: [
+          rehypeSlug,
+          [
+            rehypeAutolinkHeadings,
+            {
+              behaviour: 'append',
+              properties: { ariaHidden: true, tabIndex: -1, class: 'anchor' },
+            },
+          ],
+        ],
         remarkPlugins: [remarkGfm, remarkHeadings],
         format: filename.includes('.mdx') ? 'mdx' : 'md',
       },

package.json

@@ -60,6 +60,8 @@
     "prismjs": "~1.29.0",
     "react-icons": "~4.10.1",
     "react-intl": "~6.4.4",
+    "rehype-autolink-headings": "~6.1.1",
+    "rehype-slug": "~5.1.0",
     "remark-gfm": "~3.0.1",
     "semver": "~7.5.4",
     "sharp": "0.32.4",

providers/mdxProvider.tsx

@@ -3,19 +3,12 @@ import { MDXProvider as BaseMDXProvider } from '@mdx-js/react';
 import { MDXRemote } from 'next-mdx-remote';
 import HighlightJS from 'highlight.js/lib/core';
 import HighlightJavaScript from 'highlight.js/lib/languages/javascript';
-import AnchoredHeading from '@/components/AnchoredHeading';
 import NodeApiVersionLinks from '@/components/Docs/NodeApiVersionLinks';
 import type { FC } from 'react';
 import type { MDXComponents } from 'mdx/types';
 
 const mdxComponents: MDXComponents = {
   NodeApiVersionLinks: NodeApiVersionLinks,
-  h1: props => <AnchoredHeading level={1} {...props} />,
-  h2: props => <AnchoredHeading level={2} {...props} />,
-  h3: props => <AnchoredHeading level={3} {...props} />,
-  h4: props => <AnchoredHeading level={4} {...props} />,
-  h5: props => <AnchoredHeading level={5} {...props} />,
-  h6: props => <AnchoredHeading level={6} {...props} />,
   blockquote: ({ children }) => <div className="highlight-box">{children}</div>,
 };