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>

examples/data-literate/next.config.js

@@ -0,0 +1,20 @@
+const matter = require('gray-matter')
+const toc = require('remark-toc')
+const slug = require('remark-slug')
+const gfm = require('remark-gfm')
+const footnotes = require('remark-footnotes')
+
+
+
+const withMDX = require('@next/mdx')({
+    extension: /\.mdx?$/,
+    options: {
+        remarkPlugins: [gfm, toc, slug, footnotes],
+        rehypePlugins: [],
+        providerImportSource: '@mdx-js/react',
+    },
+})
+module.exports = withMDX({
+    // Append the default value with md extensions
+    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+})

examples/data-literate/package.json

@@ -4,19 +4,19 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
     "build": "next build && next export",
     "start": "next start"
   },
   "dependencies": {
     "@headlessui/react": "^1.3.0",
     "@heroicons/react": "^1.0.3",
-    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/loader": "^2.0.0",
+    "@next/mdx": "^12.1.0",
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.0.4",
     "frictionless.js": "^0.13.4",
     "gray-matter": "^4.0.3",
-    "next": "11.1.3",
+    "next": "12.1.0",
     "next-mdx-remote": "^3.0.4",
     "papaparse": "^5.3.1",
     "postcss": "^8.2.10",
@@ -26,6 +26,7 @@
     "react-vega": "^7.4.4",
     "remark": "^13.0.0",
     "remark-footnotes": "^3.0.0",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^1.0.0",
     "remark-html": "^13.0.2",
     "remark-slug": "^6.1.0",

examples/data-literate/pages/_app.js

@@ -1,8 +1,12 @@
 import '../styles/globals.css'
 import '../styles/tailwind.css'
+import DataLiterate from '../components/DataLiterate'
+
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <DataLiterate children={{ Component, pageProps }}/>
+  )
 }
 
 export default MyApp