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

@@ -0,0 +1,33 @@
+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

site/lib/mdxUtils.js

@@ -0,0 +1,23 @@
+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))