MDX eXtended
- Parse to JSON for WebWorker
- Compile to react component (TODO: support other compiler like preact or vue)
mdxx-loader
: webpack-loaderrollup-plugin-mdxx
: rollup pluginmdxx-parser
: parser by remarkmdxx-compiler
: runner for parsed jsonmdxx-cli
:mdxx
cli toolsmdxx-ssg
: static site generator by mdxx on minimum next.js
# install
$ npm install mdxx-cli -g
module.exports = {
module: {
rules: [
// add this rule
{
test: /\.mdx?/,
loader: "mdxx-loader",
},
],
},
};
for AMP (transform img
to amp-img
)
module.exports = {
module: {
rules: [
// add this rule
{
test: /\.mdx?/,
loader: "mdxx-loader/lib/amp",
},
],
},
};
// rollup.config.js
import { mdxx } from "rollup-plugin-mdxx";
export default {
// ...
plugins: [mdxx()],
};
# install
$ npm install mdxx-cli -g
<!-- bar.mdx -->
import Bar from "./bar"
# Bar
<!-- foo.mdx -->
import Bar from "./bar"
# Hello from Foo
<Bar />
import React from "react";
import ReactDOM from "react-dom/server";
import Foo from "./foo.mdx";
const str = ReactDOMServer.renderToString(<Foo />);
console.log(str);
# run with js
$ mdxx foo.md # output as html
# Write js
$ mdxx index.tsx --mode js --out out.js
$ node out.js # dump js
# Write with chunk
$ mdxx index.tsx --mode js --outdir out
$ node out/index.js
import React from "react";
import ReactDOM from "react-dom";
import { compile } from "mdxx-compiler";
import { parse } from "mdxx-parser";
const ast = parse(`# hello`);
function App(props) {
return const el = compile(ast, {
props,
components: {},
h: React.createElement,
Fragment: React.Fragment
});
}
ReactDOM.render(<App />, document.querySelector("#main"));
rollup-mdxx-plugin
makes .md
and .mdx
loadable as react component.
// rollup.config.js
import { rollup } from "rollup";
import { mdxx } from "rollup-plugin-mdxx";
export default {
input: "index.mdx",
output: {
format: 'esm'
file: "out.js"
},
plugins: [
// your plugin...
mdxx()
]
};
index.mdx
# Hello mdxx
import Foo from "./foo.mdx" //
<Foo />
rollup -c rollup.config.js
- title
- amp-img
- Social Share button
- CLI Scaffolding
- Google Analytics
- Header
- Fix css on export
- mdxx-compiler: amp option
- ssg: Support
styled-components
- ssg: AMP Install Service Worker
- ssg: Refactor layout css
- ssg:
amp-img
fixed height - compiler: heading slug
- compiler: toc
- ssg: Fix css
- compiler: Support amp-mathml
- ssg: clickable anchor
- ssg: Gen git history
- ssg: Link to GitHub PR
- ssg: Render mdx on
pages/*.mdx
- ssg: amp-script
MIT