diff --git a/examples/data-literate-content/README.md b/examples/data-literate-content/README.md
new file mode 100644
index 00000000..96df64b4
--- /dev/null
+++ b/examples/data-literate-content/README.md
@@ -0,0 +1,60 @@
+This example renders markdown + CSV into an elegant web page. These type of data setup we term [data literate][]
+
+[data literate]: https://portaljs.org/data-literate
+
+## How to use
+
+```bash
+npx create-next-app -e https://github.com/datopian/portal.js/tree/main/examples/data-literate
+# choose a name for your portal when prompted e.g. your-portal or go with default my-app
+
+# then run it
+cd your-portal
+yarn #install packages
+yarn dev # start app in dev mode
+```
+
+You should see the demo portal running with the example dataset provided in `http://localhost:3000/demo`
+
+For the moment there is no root path and each markdown file will have it's own path (route) for the generated html code.
+
+TODO
+### Use your own dataset
+
+You can try it out with your own data literate setups:
+
+In the directory of your portal do:
+
+```bash
+export PORTAL_DATASET_PATH=/path/to/my/dataset
+```
+
+Then restart the dev server:
+
+```
+yarn dev
+```
+
+Check the portal page and it should have updated e.g. like:
+
+TODO
+
+### Static Export
+
+Build the export:
+
+```
+yarn build
+```
+
+Results will be in `out/` subfolder.
+
+To test you will need to run a local webserver in the folder (just opening the relevant file in your browser won't work):
+
+Here we do this with another (non nodejs based) server to show that the static site works. Python3 as a really useful simple http server that one can use here:
+
+```
+cd out
+python3 -m http.server
+```
+
diff --git a/examples/data-literate-content/components/DataLiterate.js b/examples/data-literate-content/components/DataLiterate.js
new file mode 100644
index 00000000..a39dbaef
--- /dev/null
+++ b/examples/data-literate-content/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 { 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 = {
+ 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 (
+
+
+
+
+
{frontMatter.title}
+ {frontMatter.author && (
+
{frontMatter.author}
+ )}
+ {frontMatter.description && (
+
{frontMatter.description}
+ )}
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/data-literate-content/components/Excel.js b/examples/data-literate-content/components/Excel.js
new file mode 100644
index 00000000..b96d318c
--- /dev/null
+++ b/examples/data-literate-content/components/Excel.js
@@ -0,0 +1,74 @@
+import axios from 'axios'
+import XLSX from 'xlsx'
+import React, { useEffect, useState } from 'react'
+
+import Table from './Table'
+
+export default function Excel ({ src='' }) {
+ const [data, setData] = React.useState([])
+ const [cols, setCols] = React.useState([])
+ const [workbook, setWorkbook] = React.useState(null)
+ const [error, setError] = React.useState('')
+ const [hasMounted, setHasMounted] = React.useState(0)
+
+ // so this is here so we re-render this in the browser
+ // and not just when we build the page statically in nextjs
+ useEffect(() => {
+ if (hasMounted==0) {
+ handleUrl(src)
+ }
+ setHasMounted(1)
+ })
+
+ function handleUrl(url) {
+ // 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, {
+ responseType: 'arraybuffer'
+ }).then((res) => {
+ let out = new Uint8Array(res.data)
+ let workbook = XLSX.read(out, {type: "array"})
+ // Get first worksheet
+ const wsname = workbook.SheetNames[0]
+ const ws = workbook.Sheets[wsname]
+ // Convert array of arrays
+ const datatmp = XLSX.utils.sheet_to_json(ws, {header:1})
+ const colstmp = make_cols(ws['!ref'])
+ setData(datatmp)
+ setCols(colstmp)
+ setWorkbook(workbook)
+ }).catch((e) => {
+ setError(e.message)
+ })
+ }
+
+ return (
+ <>
+ {error &&
+
+ There was an error loading the excel file at {src}:
+
+ )
+}
+
+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
+ }
+}
diff --git a/examples/data-literate-content/content/demo.mdx b/examples/data-literate-content/content/demo.mdx
new file mode 100644
index 00000000..c3984a4b
--- /dev/null
+++ b/examples/data-literate-content/content/demo.mdx
@@ -0,0 +1,268 @@
+---
+title: Demo
+---
+
+This demos and documents Data Literate features live.
+
+You can see the raw source of this page here: https://raw.githubusercontent.com/datopian/data-literate/main/content/demo.mdx
+
+## Table of Contents
+
+## GFM
+
+We can have github-flavored markdown including markdown tables, auto-linked links and checklists:
+
+```
+https://github.com/datopian/portal.js
+
+| a | b |
+|---|---|
+| 1 | 2 |
+
+* [x] one thing to do
+* [ ] a second thing to do
+```
+
+https://github.com/datopian/portal.js
+
+| a | b |
+|---|---|
+| 1 | 2 |
+
+* [x] one thing to do
+* [ ] a second thing to do
+
+## Footnotes
+
+```
+here is a footnote reference[^1]
+
+[^1]: a very interesting footnote.
+```
+
+here is a footnote reference[^1]
+
+[^1]: a very interesting footnote.
+
+
+## Frontmatter
+
+Posts can have frontmatter like:
+
+```
+---
+title: Hello World
+author: Rufus Pollock
+---
+```
+
+The title and description are pulled from the MDX file and processed using `gray-matter`. Additionally, links are rendered using a custom component passed to `next-mdx-remote`.
+
+## A Table of Contents
+
+You can create a table of contents by having a markdown heading named `Table of Contents`. You can see an example at the start of this post.
+
+
+## A Table
+
+You can create tables ...
+
+```
+
+```
+
+
+
+### Table from Raw CSV
+
+You can also pass raw CSV as the content ...
+
+```
+