Merge pull request #96 from timlrx/mdx-bundler

feat: mdx-bundler and xdm

components/Card.js

@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from '@/components/Link'
+import Image from './Image'
+import Link from './Link'
 
 const Card = ({ title, description, imgSrc, href }) => (
   <div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}>

components/MDXComponents.js

@@ -1,4 +1,6 @@
-import { MDXRemote } from 'next-mdx-remote'
+/* eslint-disable react/display-name */
+import { useMemo } from 'react'
+import { getMDXComponent } from 'mdx-bundler/client'
 import Image from './Image'
 import CustomLink from './Link'
 import Pre from './Pre'
@@ -7,14 +9,14 @@ export const MDXComponents = {
   Image,
   a: CustomLink,
   pre: Pre,
+  wrapper: ({ components, layout, ...rest }) => {
+    const Layout = require(`../layouts/${layout}`).default
+    return <Layout {...rest} />
+  },
 }
 
 export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
-  const LayoutComponent = require(`../layouts/${layout}`).default
+  const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])
 
-  return (
-    <LayoutComponent {...rest}>
-      <MDXRemote {...mdxSource} components={MDXComponents} />
-    </LayoutComponent>
-  )
+  return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
 }