Use nextjs mdx feature and configure plugins

examples/data-literate/components/DataLiterate.js

@@ -1,10 +1,9 @@
 import Layout from '../components/Layout'
-
-import { MDXRemote } from 'next-mdx-remote'
-import dynamic from 'next/dynamic'
 import Head from 'next/head'
-import Link from 'next/link'
-
+import Excel from '../components/Excel'
+import Table from '../components/Table'
+import LineChart from '../components/LineChart'
+import { MDXProvider } from '@mdx-js/react'
 import { Vega, VegaLite } from 'react-vega'
 
 // Custom components/renderers to pass to MDX.
@@ -12,32 +11,36 @@ import { Vega, VegaLite } from 'react-vega'
 // to handle import statements. Instead, you must include components in scope
 // here.
 const components = {
-  Table: dynamic(() => import('../components/Table')),
-  Excel: dynamic(() => import('../components/Excel')),
-  // TODO: try and make these dynamic ...
-  Vega: Vega,
-  VegaLite: VegaLite,
-  LineChart: dynamic(() => import('../components/LineChart')),
+  Table,
+  Excel,
+  Vega,
+  VegaLite,
+  LineChart,
   Head,
 }
 
-export default function DataLiterate({ children, source, frontMatter }) {
+
+export default function DataLiterate({ children }) {
+  const { Component, pageProps } = children
+
   return (
-    <Layout title={frontMatter.title}>
+    <Layout title={pageProps.title}>
       <div className="prose mx-auto">
         <header>
           <div className="mb-6">
-            <h1>{frontMatter.title}</h1>
-            {frontMatter.author && (
-              <div className="-mt-6"><p className="opacity-60 pl-1">{frontMatter.author}</p></div>
+            <h1>{pageProps.title}</h1>
+            {pageProps.author && (
+              <div className="-mt-6"><p className="opacity-60 pl-1">{pageProps.author}</p></div>
             )}
-            {frontMatter.description && (
-              <p className="description">{frontMatter.description}</p>
+            {pageProps.description && (
+              <p className="description">{pageProps.description}</p>
             )}
           </div>
         </header>
         <main>
-          <MDXRemote {...source} components={components} />
+          <MDXProvider components={components}>
+            <Component {...pageProps} />
+          </MDXProvider>
         </main>
       </div>
     </Layout>