8c3b1bccd3
* 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)
46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
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>
|
|
)
|
|
}
|