mizchi/amdx

Accelarated MDX

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

TODO

• title
• amp-img
• Social Share button
• CLI Scaffolding
• Google Analytics
• Header
• Fix css on export
• amdx-runner: amp option
• amdxg Support styled-components
• amdxg AMP Install Service Worker
• amdxg Refactor layout css
• amdxg amp-img fixed height
• compiler: heading slug
• compiler: toc
• amdxg Fix css
• amdxg Support amp-social-share
• amdxg amdxg-cli
• parser: Support amp-mathml
• CI
• amdxg Gen git history
• amdxg Link to GitHub PR
• amdxg-components: create
• amdxg Render mdx on pages/*.mdx => auto gen /docs by getStaticProps
• amdxg Gen RSS
• Rename to something => amdx
• amdxg amp-script compiler or new:script boilerplate
• amdxg clickable anchor
• Fix prism
• Fix amp-img
• Next 9.4 ssg fallback mode

LICENSE

MIT