Skip to content

mizchi/amdx

Repository files navigation

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