[data-literate old][m]: Rename new data literate folder

examples/data-literate/components/DataLiterate.js

@@ -1,11 +1,10 @@
-import Layout from './Layout'
+import Layout from '../components/Layout'
+
+import { MDXRemote } from 'next-mdx-remote'
+import dynamic from 'next/dynamic'
 import Head from 'next/head'
-import Excel from './Excel'
-import Table from './Table'
-import TableGrid from './TableGrid'
-import LineChart from './LineChart'
-import MetaData from './Metadata'
-import { MDXProvider } from '@mdx-js/react'
+import Link from 'next/link'
+
 import { Vega, VegaLite } from 'react-vega'
 
 // Custom components/renderers to pass to MDX.
@@ -13,29 +12,34 @@ import { Vega, VegaLite } from 'react-vega'
 // to handle import statements. Instead, you must include components in scope
 // here.
 const components = {
-  Table,
-  Excel,
-  Vega,
-  VegaLite,
-  LineChart,
+  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')),
   Head,
-  TableGrid,
-  MetaData,
 }
 
-
-export default function DataLiterate({ children }) {
-  const { Component, pageProps } = children
-
+export default function DataLiterate({ children, source, frontMatter }) {
   return (
-    <Layout>
-      <main>
-        <MDXProvider components={components}>
-          <div className="prose mx-auto">
-            <Component {...pageProps} />
+    <Layout title={frontMatter.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>
+            )}
+            {frontMatter.description && (
+              <p className="description">{frontMatter.description}</p>
+            )}
           </div>
-        </MDXProvider>
-      </main>
+        </header>
+        <main>
+          <MDXRemote {...source} components={components} />
+        </main>
+      </div>
     </Layout>
   )
 }