From 981a4d208c82cbabf3b52b3eb2845527f40de1c9 Mon Sep 17 00:00:00 2001 From: Rising Odegua Date: Tue, 8 Mar 2022 10:50:43 +0100 Subject: [PATCH 1/5] [Frontmatter][s]: Fix frontmatter parising in mdx file --- examples/data-literate/next.config.mjs | 4 +- examples/data-literate/package-lock.json | 118 +++++++++++++++++++++++ examples/data-literate/package.json | 1 + 3 files changed, 122 insertions(+), 1 deletion(-) diff --git a/examples/data-literate/next.config.mjs b/examples/data-literate/next.config.mjs index 5be15562..fe5e5043 100644 --- a/examples/data-literate/next.config.mjs +++ b/examples/data-literate/next.config.mjs @@ -1,12 +1,14 @@ import gfm from 'remark-gfm' import toc from 'remark-toc' import slug from 'remark-slug' +import remarkFrontmatter from 'remark-frontmatter' +import { remarkMdxFrontmatter } from 'remark-mdx-frontmatter' import withMDXImp from '@next/mdx' const withMDX = withMDXImp({ extension: /\.mdx?$/, options: { - remarkPlugins: [gfm, toc, slug], + remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter, gfm, toc, slug], rehypePlugins: [], // If you use `MDXProvider`, uncomment the following line. providerImportSource: "@mdx-js/react", diff --git a/examples/data-literate/package-lock.json b/examples/data-literate/package-lock.json index 2e58bcb0..03f3755c 100644 --- a/examples/data-literate/package-lock.json +++ b/examples/data-literate/package-lock.json @@ -28,6 +28,7 @@ "remark-footnotes": "^3.0.0", "remark-frontmatter": "^4.0.1", "remark-gfm": "^1.0.0", + "remark-mdx-frontmatter": "^1.1.1", "remark-slug": "^6.1.0", "remark-toc": "^7.2.0", "tailwindcss": "^3.0.23", @@ -9056,6 +9057,28 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/estree-util-value-to-estree": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-1.3.0.tgz", + "integrity": "sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==", + "dependencies": { + "is-plain-obj": "^3.0.0" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/estree-util-value-to-estree/node_modules/is-plain-obj": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", + "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/estree-util-visit": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.1.0.tgz", @@ -22631,6 +22654,45 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remark-mdx-frontmatter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/remark-mdx-frontmatter/-/remark-mdx-frontmatter-1.1.1.tgz", + "integrity": "sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==", + "dependencies": { + "estree-util-is-identifier-name": "^1.0.0", + "estree-util-value-to-estree": "^1.0.0", + "js-yaml": "^4.0.0", + "toml": "^3.0.0" + }, + "engines": { + "node": ">=12.2.0" + } + }, + "node_modules/remark-mdx-frontmatter/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + }, + "node_modules/remark-mdx-frontmatter/node_modules/estree-util-is-identifier-name": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-1.1.0.tgz", + "integrity": "sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/remark-mdx-frontmatter/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/remark-parse": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz", @@ -25977,6 +26039,11 @@ "node": ">=0.6" } }, + "node_modules/toml": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", + "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==" + }, "node_modules/topojson-client": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz", @@ -35628,6 +35695,21 @@ "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.0.0.tgz", "integrity": "sha512-aXXZFVMnBBDRP81vS4YtAYJ0hUkgEsXea7lNKWCOeaAquGb1Jm2rcONPB5fpzwgbNxulTvrWuKnp9UElUGAKeQ==" }, + "estree-util-value-to-estree": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-1.3.0.tgz", + "integrity": "sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==", + "requires": { + "is-plain-obj": "^3.0.0" + }, + "dependencies": { + "is-plain-obj": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", + "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==" + } + } + }, "estree-util-visit": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.1.0.tgz", @@ -46007,6 +46089,37 @@ "micromark-extension-mdxjs": "^1.0.0" } }, + "remark-mdx-frontmatter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/remark-mdx-frontmatter/-/remark-mdx-frontmatter-1.1.1.tgz", + "integrity": "sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==", + "requires": { + "estree-util-is-identifier-name": "^1.0.0", + "estree-util-value-to-estree": "^1.0.0", + "js-yaml": "^4.0.0", + "toml": "^3.0.0" + }, + "dependencies": { + "argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + }, + "estree-util-is-identifier-name": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-1.1.0.tgz", + "integrity": "sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==" + }, + "js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "requires": { + "argparse": "^2.0.1" + } + } + } + }, "remark-parse": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz", @@ -48453,6 +48566,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "toml": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", + "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==" + }, "topojson-client": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz", diff --git a/examples/data-literate/package.json b/examples/data-literate/package.json index 3ac84467..49eebcaa 100644 --- a/examples/data-literate/package.json +++ b/examples/data-literate/package.json @@ -32,6 +32,7 @@ "remark-footnotes": "^3.0.0", "remark-frontmatter": "^4.0.1", "remark-gfm": "^1.0.0", + "remark-mdx-frontmatter": "^1.1.1", "remark-slug": "^6.1.0", "remark-toc": "^7.2.0", "tailwindcss": "^3.0.23", From 4a34208cab2af3e18ef8d7e694995cdea903671c Mon Sep 17 00:00:00 2001 From: Rising Odegua Date: Tue, 8 Mar 2022 11:09:09 +0100 Subject: [PATCH 2/5] [Metadata][m]: Add new component Metadata to display parsed Frontmatter --- examples/data-literate/components/Metadata.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 examples/data-literate/components/Metadata.js diff --git a/examples/data-literate/components/Metadata.js b/examples/data-literate/components/Metadata.js new file mode 100644 index 00000000..2a7bc247 --- /dev/null +++ b/examples/data-literate/components/Metadata.js @@ -0,0 +1,18 @@ + + +export default function MetaData({ title, author, description }) { + return ( +
+
+

{title}

+ {author && ( +

{author}

+ )} + {description && ( +

{description}

+ )} +
+
+ ) + +} \ No newline at end of file From 581d7542b50d40cfe7d437c5adcd35bff6e6216f Mon Sep 17 00:00:00 2001 From: Rising Odegua Date: Tue, 8 Mar 2022 11:10:16 +0100 Subject: [PATCH 3/5] [Layout][m] remove unneccessary sections from layout component --- .../data-literate/components/DataLiterate.js | 39 +++++++------------ examples/data-literate/components/Layout.js | 4 +- 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/examples/data-literate/components/DataLiterate.js b/examples/data-literate/components/DataLiterate.js index 771a4da2..ea71aa2b 100644 --- a/examples/data-literate/components/DataLiterate.js +++ b/examples/data-literate/components/DataLiterate.js @@ -1,9 +1,10 @@ -import Layout from '../components/Layout' +import Layout from './Layout' import Head from 'next/head' -import Excel from '../components/Excel' -import Table from '../components/Table' -import TableGrid from '../components/TableGrid' -import LineChart from '../components/LineChart' +import Excel from './Excel' +import Table from './Table' +import TableGrid from './TableGrid' +import LineChart from './LineChart' +import MetaData from './Metadata' import { MDXProvider } from '@mdx-js/react' import { Vega, VegaLite } from 'react-vega' @@ -18,7 +19,8 @@ const components = { VegaLite, LineChart, Head, - TableGrid + TableGrid, + MetaData, } @@ -26,25 +28,12 @@ export default function DataLiterate({ children }) { const { Component, pageProps } = children return ( - -
-
-
-

{pageProps.title}

- {pageProps.author && ( -

{pageProps.author}

- )} - {pageProps.description && ( -

{pageProps.description}

- )} -
-
-
- - - -
-
+ +
+ + + +
) } diff --git a/examples/data-literate/components/Layout.js b/examples/data-literate/components/Layout.js index e5a1d8ba..a0c2591e 100644 --- a/examples/data-literate/components/Layout.js +++ b/examples/data-literate/components/Layout.js @@ -11,7 +11,9 @@ export default function Layout({ children, title = 'Home' }) {
- {children} +
+ {children} +