[mdx][m]: Remove old mdx parser
This commit is contained in:
Rising Odegua
@@ -1,33 +0,0 @@
|
|||||||
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
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
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))
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import fs from 'fs'
|
|
||||||
import path from 'path'
|
|
||||||
|
|
||||||
import parse from '../lib/markdown.js'
|
|
||||||
|
|
||||||
import DataLiterate from '../components/DataLiterate'
|
|
||||||
|
|
||||||
import { postFilePaths, POSTS_PATH } from '../lib/mdxUtils'
|
|
||||||
|
|
||||||
|
|
||||||
export default function PostPage({ source, frontMatter }) {
|
|
||||||
return (
|
|
||||||
<DataLiterate source={source} frontMatter={frontMatter} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getStaticProps = async ({ params }) => {
|
|
||||||
const mdxPath = path.join(POSTS_PATH, `${params.slug.join('/')}.mdx`)
|
|
||||||
const postFilePath = fs.existsSync(mdxPath) ? mdxPath : mdxPath.slice(0, -1)
|
|
||||||
const source = fs.readFileSync(postFilePath)
|
|
||||||
|
|
||||||
const { mdxSource, frontMatter } = await parse(source)
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
source: mdxSource,
|
|
||||||
frontMatter: frontMatter,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getStaticPaths = async () => {
|
|
||||||
var paths = postFilePaths
|
|
||||||
// Remove file extensions for page paths
|
|
||||||
.map((path) => path.replace(/\.mdx?$/, ''))
|
|
||||||
|
|
||||||
// Map the path into the static paths object required by Next.js
|
|
||||||
paths = paths.map((slug) => {
|
|
||||||
// /demo => [demo]
|
|
||||||
const parts = slug.slice(1).split('/')
|
|
||||||
return { params: { slug: parts } }
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
paths,
|
|
||||||
fallback: false,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,268 +0,0 @@
|
|||||||
---
|
|
||||||
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 cols={[
|
|
||||||
{ key: 'id', name: 'ID' },
|
|
||||||
{ key: 'firstName', name: 'First name' },
|
|
||||||
{ key: 'lastName', name: 'Last name' },
|
|
||||||
{ key: 'age', name: 'Age' }
|
|
||||||
]} data={[
|
|
||||||
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
|
|
||||||
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
|
|
||||||
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
|
|
||||||
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
|
|
||||||
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
|
|
||||||
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
|
|
||||||
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
<Table cols={[
|
|
||||||
{ key: 'id', name: 'ID' },
|
|
||||||
{ key: 'firstName', name: 'First name' },
|
|
||||||
{ key: 'lastName', name: 'Last name' },
|
|
||||||
{ key: 'age', name: 'Age' }
|
|
||||||
]} data={[
|
|
||||||
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
|
|
||||||
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
|
|
||||||
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
|
|
||||||
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
|
|
||||||
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
|
|
||||||
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
|
|
||||||
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
### Table from Raw CSV
|
|
||||||
|
|
||||||
You can also pass raw CSV as the content ...
|
|
||||||
|
|
||||||
```
|
|
||||||
<Table csv={`
|
|
||||||
Year,Temp Anomaly
|
|
||||||
1850,-0.418
|
|
||||||
2020,0.923
|
|
||||||
`} />
|
|
||||||
```
|
|
||||||
|
|
||||||
<Table csv={`
|
|
||||||
Year,Temp Anomaly,
|
|
||||||
1850,-0.418
|
|
||||||
2020,0.923
|
|
||||||
`} />
|
|
||||||
|
|
||||||
### Table from a URL
|
|
||||||
|
|
||||||
<Table url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
|
|
||||||
|
|
||||||
```
|
|
||||||
<Table url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
|
|
||||||
```
|
|
||||||
|
|
||||||
## Charts
|
|
||||||
|
|
||||||
You can create charts using a simple syntax.
|
|
||||||
|
|
||||||
### Line Chart
|
|
||||||
|
|
||||||
<LineChart data={
|
|
||||||
[
|
|
||||||
["1850",-0.41765878],
|
|
||||||
["1851",-0.2333498],
|
|
||||||
["1852",-0.22939907],
|
|
||||||
["1853",-0.27035445],
|
|
||||||
["1854",-0.29163003]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
```
|
|
||||||
<LineChart data={
|
|
||||||
[
|
|
||||||
["1850",-0.41765878],
|
|
||||||
["1851",-0.2333498],
|
|
||||||
["1852",-0.22939907],
|
|
||||||
["1853",-0.27035445],
|
|
||||||
["1854",-0.29163003]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
NB: we have quoted years as otherwise not interpreted as dates but as integers ...
|
|
||||||
|
|
||||||
|
|
||||||
### Vega and Vega Lite
|
|
||||||
|
|
||||||
You can using vega or vega-lite. Here's an example using vega-lite:
|
|
||||||
|
|
||||||
<VegaLite data={ { "table": [
|
|
||||||
{
|
|
||||||
"y": -0.418,
|
|
||||||
"x": 1850
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"y": 0.923,
|
|
||||||
"x": 2020
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
} spec={
|
|
||||||
{
|
|
||||||
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
|
|
||||||
"mark": "bar",
|
|
||||||
"data": {
|
|
||||||
"name": "table"
|
|
||||||
},
|
|
||||||
"encoding": {
|
|
||||||
"x": {
|
|
||||||
"field": "x",
|
|
||||||
"type": "ordinal"
|
|
||||||
},
|
|
||||||
"y": {
|
|
||||||
"field": "y",
|
|
||||||
"type": "quantitative"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} />
|
|
||||||
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<VegaLite data={ { "table": [
|
|
||||||
{
|
|
||||||
"y": -0.418,
|
|
||||||
"x": 1850
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"y": 0.923,
|
|
||||||
"x": 2020
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
} spec={
|
|
||||||
{
|
|
||||||
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
|
|
||||||
"mark": "bar",
|
|
||||||
"data": {
|
|
||||||
"name": "table"
|
|
||||||
},
|
|
||||||
"encoding": {
|
|
||||||
"x": {
|
|
||||||
"field": "x",
|
|
||||||
"type": "ordinal"
|
|
||||||
},
|
|
||||||
"y": {
|
|
||||||
"field": "y",
|
|
||||||
"type": "quantitative"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} />
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Line Chart from URL with Tooltip
|
|
||||||
|
|
||||||
https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html
|
|
||||||
|
|
||||||
<VegaLite spec={
|
|
||||||
{
|
|
||||||
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
|
|
||||||
"data": {"url": "/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv"},
|
|
||||||
"width": 600,
|
|
||||||
"height": 250,
|
|
||||||
"mark": "line",
|
|
||||||
"encoding": {
|
|
||||||
"x": {"field": "Time", "type": "temporal"},
|
|
||||||
"y": {"field": "Anomaly (deg C)", "type": "quantitative"},
|
|
||||||
"tooltip": {"field": "Anomaly (deg C)", "type": "quantitative"}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} />
|
|
||||||
|
|
||||||
## Display Excel Files
|
|
||||||
|
|
||||||
Local file ...
|
|
||||||
|
|
||||||
```
|
|
||||||
<Excel src='/_files/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
|
|
||||||
```
|
|
||||||
|
|
||||||
<Excel src='/_files/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
|
|
||||||
|
|
||||||
Remote files work too (even without CORS) thanks to proxying:
|
|
||||||
|
|
||||||
```
|
|
||||||
<Excel src='https://github.com/datasets/awesome-data/files/6604635/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
|
|
||||||
```
|
|
||||||
|
|
||||||
<Excel src='https://github.com/datasets/awesome-data/files/6604635/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
|
|
||||||
Reference in New Issue
Block a user