Accelarated MDX
Accelerated MDX
MDX to AMP
AMP Friendly Output
Opinionated remark settings
refract
amp-img
from img
with {amp: true}
configamp-mathml
from $$ ~ $$
Rich parser and thin runner to preprocess
Worker Friendy: Compile to pure JSON to postMessage
Use .mdx
extension to highlight
<!-- foo.mdx -->
import Bar from "./bar"
# Hello from Foo
<Bar />
<!-- bar.mdx -->
import Bar from "./bar"
# Bar
render foo.mdx (with amdx-loader/rollup-plugin-amdx)
import React from "react";
import ReactDOM from "react-dom/server";
import Foo from "./foo.mdx";
const str = ReactDOMServer.renderToString(<Foo />);
console.log(str);
amdx-loader
: webpack-loaderamdx
: parser and compiler by remarkamdx-runner
: runner for parsed jsonamdx-cli
: amdx
cli toolsrollup-plugin-amdx
: rollup pluginamdxg-docs
: Doc by amdx on next.js
amdxg-components
: ssg componentsamdxg-cli
: ssg components# install
$ npm install amdx-cli -g
module.exports = {
module: {
rules: [
// add this rule
{
test: /\.mdx?/,
loader: "amdx-loader",
},
],
},
};
// rollup.config.js
import { amdx } from "rollup-plugin-amdx";
export default {
// ...
plugins: [amdx()],
};
import React from "react";
import ReactDOM from "react-dom";
import { compile } from "amdx-runner";
import { parse } from "amdx";
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"));
styled-components
amp-img
fixed heightpages/*.mdx
=> auto gen /docs by getStaticPropsnew:script
boilerplateMIT