From 8011afe7cdceefd783acaafa88bc7f3aac1d5574 Mon Sep 17 00:00:00 2001 From: Rising Odegua Date: Thu, 24 Feb 2022 15:11:29 +0100 Subject: [PATCH] [mdx][m]: Remove old mdx parser --- examples/data-literate/lib/markdown.js | 33 --- examples/data-literate/lib/mdxUtils.js | 23 -- examples/data-literate/pages/[...slug].js | 48 ---- .../data-literate/{content => pages}/demo.mdx | 0 examples/data-literate/pages/demo_new.mdx | 268 ------------------ 5 files changed, 372 deletions(-) delete mode 100644 examples/data-literate/lib/markdown.js delete mode 100644 examples/data-literate/lib/mdxUtils.js delete mode 100644 examples/data-literate/pages/[...slug].js rename examples/data-literate/{content => pages}/demo.mdx (100%) delete mode 100644 examples/data-literate/pages/demo_new.mdx diff --git a/examples/data-literate/lib/markdown.js b/examples/data-literate/lib/markdown.js deleted file mode 100644 index c4d3ceeb..00000000 --- a/examples/data-literate/lib/markdown.js +++ /dev/null @@ -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 diff --git a/examples/data-literate/lib/mdxUtils.js b/examples/data-literate/lib/mdxUtils.js deleted file mode 100644 index d89b09f4..00000000 --- a/examples/data-literate/lib/mdxUtils.js +++ /dev/null @@ -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)) diff --git a/examples/data-literate/pages/[...slug].js b/examples/data-literate/pages/[...slug].js deleted file mode 100644 index 0370be0a..00000000 --- a/examples/data-literate/pages/[...slug].js +++ /dev/null @@ -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 ( - - ) -} - -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, - } -} diff --git a/examples/data-literate/content/demo.mdx b/examples/data-literate/pages/demo.mdx similarity index 100% rename from examples/data-literate/content/demo.mdx rename to examples/data-literate/pages/demo.mdx diff --git a/examples/data-literate/pages/demo_new.mdx b/examples/data-literate/pages/demo_new.mdx deleted file mode 100644 index c3984a4b..00000000 --- a/examples/data-literate/pages/demo_new.mdx +++ /dev/null @@ -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 from Raw CSV - -You can also pass raw CSV as the content ... - -``` -
-``` - -
- -### Table from a URL - -
- -``` -
-``` - -## Charts - -You can create charts using a simple syntax. - -### Line Chart - - - -``` - -``` - -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: - - - - -```jsx - - -``` - -#### Line Chart from URL with Tooltip - -https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html - - - -## Display Excel Files - -Local file ... - -``` - -``` - - - -Remote files work too (even without CORS) thanks to proxying: - -``` - -``` - -