chore: use mdx with custom components

2 files changed, 16 insertions, 5 deletions

diff --git a/mdx.d.ts b/mdx.d.ts
index 7644488..f3a9a90 100644
--- a/mdx.d.ts
+++ b/mdx.d.ts
@@ -1,10 +1,13 @@
 declare module '*.mdx' {
+  import { MDXProps } from 'mdx/types';
   import { Meta } from '@ts/types/app';
 
-  let MDXComponent: (props: any) => JSX.Element;
+  let MDXComponent: (props: MDXProps) => JSX.Element;
   export default MDXComponent;
-  export const meta: Meta;
+  export const cover: string;
+  export const image: string;
   export const intro: string;
+  export const meta: Meta;
   export const pdf: string;
-  export const image: string;
+  export const seo: { title: string; description: string };
 }
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
index a9b5115..7ae50d6 100644
--- a/src/pages/projet/[slug].tsx
+++ b/src/pages/projet/[slug].tsx
@@ -1,4 +1,5 @@
 import { getLayout } from '@components/Layouts/Layout';
+import { CodeBlock, Gallery, Link, ResponsiveImage } from '@components/MDX';
 import PostHeader from '@components/PostHeader/PostHeader';
 import ProjectSummary from '@components/ProjectSummary/ProjectSummary';
 import Sidebar from '@components/Sidebar/Sidebar';
@@ -15,7 +16,7 @@ import {
   getAllProjectsFilename,
   getProjectData,
 } from '@utils/helpers/projects';
-import { MDXComponents } from 'mdx/types';
+import { MDXComponents, NestedMDXComponents } from 'mdx/types';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -36,6 +37,13 @@ const Project: NextPageWithLayout<ProjectProps> = ({
     update: meta.updatedOn,
   };
 
+  const components: NestedMDXComponents = {
+    Gallery: (props) => Gallery(props),
+    Image: (props) => ResponsiveImage({ caption: props.caption, ...props }),
+    Link: (props) => Link(props),
+    pre: ({ children }) => CodeBlock(children.props),
+  };
+
   const ProjectContent: ComponentType<MDXComponents> =
     require(`../../content/projects/${id}.mdx`).default;
 
@@ -104,7 +112,7 @@ const Project: NextPageWithLayout<ProjectProps> = ({
         </Sidebar>
         <div className={styles.body}>
           <ProjectSummary title={title} cover={cover} meta={meta} />
-          <ProjectContent />
+          <ProjectContent components={components} />
         </div>
         <Sidebar position="right">
           <Sharing title={title} excerpt={intro} />