[site,#572][l]: merge in data literate material.

* Nav bar and layout
* Main catch all route that loads material from content
* Data Literate: demo plus all associated components
  * content/data-literate/demo.mdx
  * components/* (pretty much all are related to demo)
  * lib/markdown.js, lib/mdxUtils.js
  * api/proxy.js to proxy remote urls (to handle CORs)
  * content/data-literate.md (DL home page - old data literate home page converted to markdown)
* excel-viewer.js: excel viewer demo from data literate
* package.json / yarn.lock
  * Nav: @headlessui/react @heroicons/react/outline @heroicons/react
  * CSV support for table: papaparse
  * Excel support for tables etc: xlsx
  * Vega: react-vega vega vega-lite
  * MDX: next-mdx-remote (yarn rm @next/mdx)

site/components/DataLiterate.js

@@ -0,0 +1,45 @@
+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 CustomLink from '../components/CustomLink'
+import { Vega, VegaLite } from 'react-vega'
+
+// Custom components/renderers to pass to MDX.
+// Since the MDX files aren't loaded by webpack, they have no knowledge of how
+// to handle import statements. Instead, you must include components in scope
+// here.
+const components = {
+  a: CustomLink,
+  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,
+}
+
+export default function DataLiterate({ children, source, frontMatter }) {
+  return (
+    <Layout title={frontMatter.title}>
+      <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>
+      </header>
+      <main>
+        <MDXRemote {...source} components={components} />
+      </main>
+    </Layout>
+  )
+}