From 0ac690339083f01a0b12a74ec117eeccd055e932 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 22 Nov 2023 17:45:03 +0100 Subject: refactor(components,pages): extract MDX components mapping from pages Instead of repeating the overriding on each pages, we should define it in one place and reuse it in pages. By default it is not possible to override native HTML tags with MDX so I added a plugin in next config to allow it. --- next.config.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'next.config.js') diff --git a/next.config.js b/next.config.js index 8227603..6e404a5 100644 --- a/next.config.js +++ b/next.config.js @@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url'; import bundleAnalyzer from '@next/bundle-analyzer'; import nextMDX from '@next/mdx'; import rehypeSlug from 'rehype-slug'; +import { visit } from 'unist-util-visit'; const currentDir = dirname(fileURLToPath(import.meta.url)); @@ -161,11 +162,19 @@ const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true', }); +const overrideHTMLTags = () => (tree) => { + visit(tree, 'mdxJsxTextElement', (node) => { + if (node.data) { + delete node.data._mdxExplicitJsx; + } + }); +}; + const withMDX = nextMDX({ extension: /\.mdx?$/, options: { remarkPlugins: [], - rehypePlugins: [rehypeSlug], + rehypePlugins: [rehypeSlug, overrideHTMLTags], }, }); -- cgit v1.2.3