Merge pull request #668 from datopian/update/next-mdx

Update/next mdx

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/lib/markdown.js

@@ -1,33 +0,0 @@
-import matter from 'gray-matter'
-import toc from 'remark-toc'
-import slug from 'remark-slug'
-import gfm from 'remark-gfm'
-import footnotes from 'remark-footnotes'
-
-import { serialize } from 'next-mdx-remote/serialize'
-
-/**
- * Parse a markdown or MDX file to an MDX source form + front matter data
- *
- * @source: the contents of a markdown or mdx file
- * @returns: { mdxSource: mdxSource, frontMatter: ...}
- */
-const parse = async function(source) {
-  const { content, data } = matter(source)
-
-  const mdxSource = await serialize(content, {
-    // Optionally pass remark/rehype plugins
-    mdxOptions: {
-      remarkPlugins: [gfm, toc, slug, footnotes],
-      rehypePlugins: [],
-    },
-    scope: data,
-  })
-
-  return {
-    mdxSource: mdxSource,
-    frontMatter: data
-  }
-}
-
-export default parse

examples/data-literate/lib/mdxUtils.js

@@ -1,23 +0,0 @@
-import fs from 'fs'
-import glob from 'glob'
-import path from 'path'
-
-// POSTS_PATH is useful when you want to get the path to a specific file
-export const POSTS_PATH = path.join(process.cwd(), 'content')
-
-const walkSync = (dir, filelist = []) => {
-  fs.readdirSync(dir).forEach(file => {
-
-    filelist = fs.statSync(path.join(dir, file)).isDirectory()
-      ? walkSync(path.join(dir, file), filelist)
-      : filelist.concat(path.join(dir, file))
-
-  })
-  return filelist
-}
-
-// postFilePaths is the list of all mdx files inside the POSTS_PATH directory
-export const postFilePaths = walkSync(POSTS_PATH)
-  .map((file) => { return file.slice(POSTS_PATH.length) })
-  // Only include md(x) files
-  .filter((path) => /\.mdx?$/.test(path))

examples/data-literate/next.config.js

@@ -0,0 +1,19 @@
+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,7 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export",
+    "build": "next build",
+    "export": "next export",
     "start": "next start"
   },
   "engines": {
@@ -13,13 +14,13 @@
   "dependencies": {
     "@headlessui/react": "^1.3.0",
     "@heroicons/react": "^1.0.3",
-    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/loader": "^2.0.0",
+    "@mdx-js/react": "^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": "12.1.0",
-    "next-mdx-remote": "^3.0.4",
     "papaparse": "^5.3.1",
     "postcss": "^8.2.10",
     "prop-types": "^15.7.2",
@@ -28,8 +29,8 @@
     "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",
     "remark-toc": "^7.2.0",
     "tailwindcss": "^2.2.16",
@@ -37,4 +38,4 @@
     "vega-lite": "^5.1.0",
     "xlsx": "^0.17.0"
   }
-}
+}

examples/data-literate/pages/[...slug].js

@@ -1,48 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-import parse from '../lib/markdown.js'
-
-import DataLiterate from '../components/DataLiterate'
-
-import { postFilePaths, POSTS_PATH } from '../lib/mdxUtils'
-
-
-export default function PostPage({ source, frontMatter }) {
-  return (
-    <DataLiterate source={source} frontMatter={frontMatter} />
-  )
-}
-
-export const getStaticProps = async ({ params }) => {
-  const mdxPath = path.join(POSTS_PATH, `${params.slug.join('/')}.mdx`)
-  const postFilePath = fs.existsSync(mdxPath) ? mdxPath : mdxPath.slice(0, -1)
-  const source = fs.readFileSync(postFilePath)
-
-  const { mdxSource, frontMatter } = await parse(source)
-
-  return {
-    props: {
-      source: mdxSource,
-      frontMatter: frontMatter,
-    },
-  }
-}
-
-export const getStaticPaths = async () => {
-  var paths = postFilePaths
-    // Remove file extensions for page paths
-    .map((path) => path.replace(/\.mdx?$/, ''))
-
-  // Map the path into the static paths object required by Next.js
-  paths = paths.map((slug) => {
-    // /demo => [demo]
-    const parts = slug.slice(1).split('/')
-    return { params: { slug: parts } }
-  })
-
-  return {
-    paths,
-    fallback: false,
-  }
-}

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