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

@@ -0,0 +1,92 @@
+import { Fragment } from 'react'
+import { Disclosure, Menu, Transition } from '@headlessui/react'
+import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
+
+import Link from 'next/link'
+
+const navigation = [
+  { name: 'Docs', href: '/docs' },
+  { name: 'Components', href: '/docs/components' },
+  { name: 'Learn', href: '/learn' },
+  { name: 'Gallery', href: '/gallery' },
+  { name: 'Data Literate', href: '/data-literate/', current: false },
+  { name: 'DL Demo', href: '/data-literate/demo/', current: false },
+  { name: 'Excel Viewer', href: '/excel-viewer/', current: false },
+  { name: 'Github', href: 'https://github.com/datopian/portal.js', current: false },
+]
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Nav() {
+  return (
+    <Disclosure as="nav" className="bg-gray-800">
+      {({ open }) => (
+        <>
+          <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+            <div className="relative flex items-center justify-between h-16">
+              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                {/* Mobile menu button*/}
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                  <span className="sr-only">Open main menu</span>
+                  {open ? (
+                    <XIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+              <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+                <div className="flex-shrink-0 flex items-center">
+                  <Link href="/">
+                    <a className="text-white">
+                      Portal.JS
+                    </a>
+                  </Link>
+                </div>
+                <div className="hidden sm:block sm:ml-6">
+                  <div className="flex space-x-4">
+                    {navigation.map((item) => (
+                      <Link href={item.href}>
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className={classNames(
+                          item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                          'px-3 py-2 rounded-md text-sm font-medium'
+                        )}
+                        aria-current={item.current ? 'page' : undefined}
+                      >
+                        {item.name}
+                      </a>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Disclosure.Panel className="sm:hidden">
+            <div className="px-2 pt-2 pb-3 space-y-1">
+              {navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className={classNames(
+                    item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                    'block px-3 py-2 rounded-md text-base font-medium'
+                  )}
+                  aria-current={item.current ? 'page' : undefined}
+                >
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  )
+}