[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>
   )
 }

examples/data-literate/components/Metadata.js

@@ -1,18 +0,0 @@
-
-
-export default function MetaData({ title, author, description }) {
-    return (
-        <header>
-            <div className="mb-6">
-                <h1>{title}</h1>
-                {author && (
-                    <div className="-mt-6"><p className="opacity-60 pl-1">{author}</p></div>
-                )}
-                {description && (
-                    <p className="description">{description}</p>
-                )}
-            </div>
-        </header>
-    )
-
-}

examples/data-literate/components/TableGrid.js

@@ -1,81 +0,0 @@
-import axios from 'axios'
-import React, { useEffect } from 'react'
-import { Table } from 'portal'
-
-const papa = require("papaparse")
-
-/*
-  Portaljs Table Grid
-  usage: <TableGrid url="" data={data} cols={cols} csv="" />
-*/
-export default function TableGrid({ data = [], cols = [], csv = '', url = '' }) {
-
-  if (csv) {
-    const out = parseCsv(csv)
-    data = prepareRowsForPortalJsTable(out.rows)
-    cols = out.fields
-  }
-
-  if (cols) {
-    cols = prepareColsForPortalJsTable(cols)
-  }
-
-  const [ourdata, setData] = React.useState(data)
-  const [ourcols, setCols] = React.useState(cols)
-
-  useEffect(() => {
-    if (url) {
-      loadUrl(url)
-    }
-  }, [url])
-
-  function loadUrl(path) {
-    // HACK: duplicate of Excel code - maybe refactor
-    // if url is external may have CORS issue so we proxy it ...
-    if (url.startsWith('http')) {
-      const PROXY_URL = window.location.origin + '/api/proxy'
-      url = PROXY_URL + '?url=' + encodeURIComponent(url)
-    }
-    axios.get(url).then((res) => {
-      const { rows, fields } = parseCsv(res.data)
-      setData(rows)
-      setCols(prepareColsForPortalJsTable(fields))
-    })
-  }
-  return (
-    <div>
-      <Table columns={ourcols} data={ourdata} height={"400px"} />
-    </div>
-  )
-}
-
-function prepareColsForPortalJsTable(cols) {
-  return cols.map((col) => {
-    return {
-      field: col.key,
-      headerName: col.name,
-      flex: true
-    }
-  })
-}
-
-function prepareRowsForPortalJsTable(rows) {
-  return rows.map((r) => {
-    return {
-      ...r,
-      id: r.id || r.key
-    }
-  })
-}
-
-function parseCsv(csv) {
-  csv = csv.trim()
-  const rawdata = papa.parse(csv, { header: true })
-  const cols = rawdata.meta.fields.map((r, i) => {
-    return { key: r, name: r }
-  })
-  return {
-    rows: rawdata.data,
-    fields: cols
-  }
-}