diff options
| -rw-r--r-- | mdx.d.ts | 9 | ||||
| -rw-r--r-- | src/pages/projet/[slug].tsx | 12 |
2 files changed, 16 insertions, 5 deletions
@@ -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} /> |