From 1a2edf44e1f53ab5d6cf5937e91146b2d97c1619 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 26 Jan 2022 19:02:30 +0100
Subject: chore: use mdx with custom components

---
 src/pages/projet/[slug].tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'src')

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} />
-- 
cgit v1.2.3