amdx's Introduction

AMDX

Accelerated MDX

Features

MDX to AMP
AMP Friendly Output
Opinionated remark settings
- Highlight with refract
- frontmatter
- Gen amp-img from img with {amp: true} config
- Gen amp-mathml from $$ ~ $$
Rich parser and thin runner to preprocess
Worker Friendy: Compile to pure JSON to postMessage

AMDX document example

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);

packages

amdx-loader: webpack-loader
amdx: parser and compiler by remark
amdx-runner: runner for parsed json
amdx-cli: amdx cli tools
rollup-plugin-amdx: rollup plugin

AMDXG: Static Site generator with next.js

amdxg-docs: Doc by amdx on next.js
amdxg-components: ssg components
amdxg-cli: ssg components

CLI

# install
$ npm install amdx-cli -g

webpack loader

module.exports = {
  module: {
    rules: [
      // add this rule
      {
        test: /\.mdx?/,
        loader: "amdx-loader",
      },
    ],
  },
};

rollup

// rollup.config.js
import { amdx } from "rollup-plugin-amdx";
export default {
  // ...
  plugins: [amdx()],
};

API

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"));