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.

5 files changed, 14 insertions, 312 deletions

diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index fd19a83..edf267d 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,30 +1,24 @@
 /* eslint-disable max-statements */
-import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import NextImage from 'next/image';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import React, {
-  type AnchorHTMLAttributes,
-  type HTMLAttributes,
-  type ReactNode,
-} from 'react';
+import React, { type ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import {
   getLayout,
   Heading,
   ImageWidget,
   Link,
-  List,
   SocialMediaWidget,
-  ListItem,
   Page,
   PageHeader,
   PageSidebar,
   TocWidget,
   PageBody,
 } from '../components';
+import { mdxComponents } from '../components/mdx';
 import CVContent, { data, meta } from '../content/pages/cv.mdx';
 import type { NextPageWithLayout } from '../types';
 import { CONFIG } from '../utils/config';
@@ -37,102 +31,6 @@ import {
 import { loadTranslation } from '../utils/helpers/server';
 import { useBreadcrumb, useHeadingsTree } from '../utils/hooks';
 
-const ExternalLink = ({
-  children = '',
-  href = '',
-  ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement>) => (
-  <Link {...props} isExternal href={href}>
-    {children}
-  </Link>
-);
-
-const H1 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={1}>
-    {children}
-  </Heading>
-);
-
-const H2 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={2}>
-    {children}
-  </Heading>
-);
-
-const H3 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={3}>
-    {children}
-  </Heading>
-);
-
-const H4 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={4}>
-    {children}
-  </Heading>
-);
-
-const H5 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={5}>
-    {children}
-  </Heading>
-);
-
-const H6 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={6}>
-    {children}
-  </Heading>
-);
-
-const OrderedList = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLUListElement>) => (
-  <List {...props} isOrdered spacing="2xs">
-    {children}
-  </List>
-);
-
-const UnorderedList = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLUListElement>) => (
-  <List {...props} spacing="2xs">
-    {children}
-  </List>
-);
-
-const components: MDXComponents = {
-  a: ExternalLink,
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6,
-  li: ({ ref, ...props }) => <ListItem {...props} />,
-  Link,
-  ol: OrderedList,
-  ul: UnorderedList,
-};
-
 /**
  * CV page.
  */
@@ -258,7 +156,7 @@ const CVPage: NextPageWithLayout = () => {
         />
       </PageSidebar>
       <PageBody ref={ref}>
-        <CVContent components={components} />
+        <CVContent components={mdxComponents} />
       </PageBody>
       <PageSidebar>
         <ImageWidget
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 81883fc..32c2e7f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,7 @@
-/* eslint-disable max-statements */
 import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
-import NextImage, { type ImageProps as NextImageProps } from 'next/image';
+import NextImage from 'next/image';
 import Script from 'next/script';
 import type { FC, HTMLAttributes, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
@@ -14,11 +13,9 @@ import {
   CardHeader,
   CardMeta,
   CardTitle,
-  Figure,
   getLayout,
   Grid,
   type GridItem,
-  Heading,
   Icon,
   List,
   ListItem,
@@ -27,6 +24,7 @@ import {
   Time,
   MetaItem,
 } from '../components';
+import { mdxComponents } from '../components/mdx';
 import HomePageContent from '../content/pages/homepage.mdx';
 import { getArticlesCard } from '../services/graphql';
 import styles from '../styles/pages/home.module.scss';
@@ -46,66 +44,6 @@ const Column = ({ children, ...props }: HTMLAttributes<HTMLDivElement>) => (
   <div {...props}>{children}</div>
 );
 
-const H1 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={1}>
-    {children}
-  </Heading>
-);
-
-const H2 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={2}>
-    {children}
-  </Heading>
-);
-
-const H3 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={3}>
-    {children}
-  </Heading>
-);
-
-const H4 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={4}>
-    {children}
-  </Heading>
-);
-
-const H5 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={5}>
-    {children}
-  </Heading>
-);
-
-const H6 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={6}>
-    {children}
-  </Heading>
-);
-
-const ResponsiveImage = (props: NextImageProps) => (
-  <Figure>
-    <NextImage {...props} />
-  </Figure>
-);
-
 /**
  * Retrieve a list of coding links.
  *
@@ -368,17 +306,11 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
   };
 
   const components: MDXComponents = {
+    ...mdxComponents,
     CodingLinks,
     ColdarkRepos,
     Column,
     Grid: StyledGrid,
-    h1: H1,
-    h2: H2,
-    h3: H3,
-    h4: H4,
-    h5: H5,
-    h6: H6,
-    Image: ResponsiveImage,
     LibreLinks,
     MoreLinks,
     RecentPosts: getRecentPosts,
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index e3aabc5..d5958a6 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -1,15 +1,11 @@
 /* eslint-disable max-statements */
-import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
-import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import {
   getLayout,
-  Link,
-  Figure,
   Page,
   PageHeader,
   PageSidebar,
@@ -17,6 +13,7 @@ import {
   Heading,
   PageBody,
 } from '../components';
+import { mdxComponents } from '../components/mdx';
 import LegalNoticeContent, { meta } from '../content/pages/legal-notice.mdx';
 import type { NextPageWithLayout } from '../types';
 import { CONFIG } from '../utils/config';
@@ -29,17 +26,6 @@ import {
 import { loadTranslation } from '../utils/helpers/server';
 import { useBreadcrumb, useHeadingsTree } from '../utils/hooks';
 
-const ResponsiveImage = (props: NextImageProps) => (
-  <Figure>
-    <NextImage {...props} />
-  </Figure>
-);
-
-const components: MDXComponents = {
-  Image: ResponsiveImage,
-  Link,
-};
-
 /**
  * Legal Notice page.
  */
@@ -119,7 +105,7 @@ const LegalNoticePage: NextPageWithLayout = () => {
         />
       </PageSidebar>
       <PageBody ref={ref}>
-        <LegalNoticeContent components={components} />
+        <LegalNoticeContent components={mdxComponents} />
       </PageBody>
     </Page>
   );
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 82d9149..2911951 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -3,22 +3,16 @@ import type { MDXComponents } from 'mdx/types';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import NextImage, { type ImageProps as NextImageProps } from 'next/image';
+import NextImage from 'next/image';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
+import type { ComponentType } from 'react';
 import { useIntl } from 'react-intl';
 import {
-  Code,
   getLayout,
-  Link,
   SharingWidget,
   Spinner,
   Heading,
-  List,
-  ListItem,
-  Figure,
-  Grid,
   ProjectOverview,
   type ProjectMeta,
   type Repository,
@@ -28,6 +22,7 @@ import {
   TocWidget,
   PageBody,
 } from '../../components';
+import { mdxComponents } from '../../components/mdx';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
 import { CONFIG } from '../../utils/config';
@@ -49,110 +44,6 @@ import {
   useHeadingsTree,
 } from '../../utils/hooks';
 
-const BorderedImage = (props: NextImageProps) => (
-  <Figure hasBorders>
-    <NextImage {...props} />
-  </Figure>
-);
-
-const H1 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={1}>
-    {children}
-  </Heading>
-);
-
-const H2 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={2}>
-    {children}
-  </Heading>
-);
-
-const H3 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={3}>
-    {children}
-  </Heading>
-);
-
-const H4 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={4}>
-    {children}
-  </Heading>
-);
-
-const H5 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={5}>
-    {children}
-  </Heading>
-);
-
-const H6 = ({
-  children = '',
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) => (
-  <Heading {...props} level={6}>
-    {children}
-  </Heading>
-);
-
-const OrderedList = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLUListElement>) => (
-  <List {...props} isOrdered spacing="2xs">
-    {children}
-  </List>
-);
-
-const UnorderedList = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLUListElement>) => (
-  <List {...props} spacing="2xs">
-    {children}
-  </List>
-);
-
-const Gallery = ({ children }: { children: ReactNode[] }) => (
-  <Grid
-    gap="sm"
-    items={children.map((child, index) => {
-      return { id: `${index}`, item: child };
-    })}
-    sizeMin="250px"
-  />
-);
-
-const components: MDXComponents = {
-  Code,
-  Gallery,
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6,
-  Image: BorderedImage,
-  li: ({ ref, ...props }) => <ListItem {...props} />,
-  Link,
-  ol: OrderedList,
-  ul: UnorderedList,
-};
-
 type ProjectPageProps = {
   project: ProjectPreview;
   translation: Messages;
@@ -326,7 +217,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
           meta={overviewMeta}
           name={project.title}
         />
-        <ProjectContent components={components} />
+        <ProjectContent components={mdxComponents} />
       </PageBody>
       <PageSidebar>
         <SharingWidget
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 0b9a91c..fc6eb5f 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable max-statements */
-import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import NextImage from 'next/image';
@@ -16,13 +15,13 @@ import {
   getLayout,
   Grid,
   type GridItem,
-  Link,
   MetaList,
   MetaItem,
   Page,
   PageHeader,
   PageBody,
 } from '../../components';
+import { mdxComponents } from '../../components/mdx';
 import PageContent, { meta } from '../../content/pages/projects.mdx';
 import styles from '../../styles/pages/projects.module.scss';
 import type { NextPageWithLayout, ProjectCard } from '../../types';
@@ -40,10 +39,6 @@ import {
 } from '../../utils/helpers/server';
 import { useBreadcrumb } from '../../utils/hooks';
 
-const components: MDXComponents = {
-  Link,
-};
-
 type ProjectsPageProps = {
   projects: ProjectCard[];
   translation?: Messages;
@@ -167,7 +162,7 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
       />
       <PageHeader
         heading={title}
-        intro={<PageContent components={components} />}
+        intro={<PageContent components={mdxComponents} />}
       />
       <PageBody className={styles.body}>
         <Grid