https://github.com/mizchi/amdx

Accelarated MDX
https://github.com/mizchi/amdx

md mdx mdxx

Last synced: 2 months ago
JSON representation

Accelarated MDX

• Host: GitHub
• URL: https://github.com/mizchi/amdx
• Owner: mizchi
• Created: 2020-03-25T19:29:42.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T06:15:15.000Z (almost 2 years ago)
• Last Synced: 2024-09-30T00:43:35.699Z (3 months ago)
• Topics: md, mdx, mdxx
• Language: JavaScript
• Homepage:
• Size: 2.02 MB
• Stars: 83
• Watchers: 4
• Forks: 12
• Open Issues: 32
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

```md

import Bar from "./bar"

# Hello from Foo

```

```md

import Bar from "./bar"

# Bar

```

render foo.mdx (with amdx-loader/rollup-plugin-amdx)

```tsx

import React from "react";

import ReactDOM from "react-dom/server";

import Foo from "./foo.mdx";

const str = ReactDOMServer.renderToString();

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

```bash

# install

$ npm install amdx-cli -g

```

## webpack loader

```js

module.exports = {

  module: {

    rules: [

      // add this rule

      {

        test: /\.mdx?/,

        loader: "amdx-loader",

      },

    ],

  },

};

```

## rollup

```js

// rollup.config.js

import { amdx } from "rollup-plugin-amdx";

export default {

  // ...

  plugins: [amdx()],

};

```

## API

```js

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(, document.querySelector("#main"));

```

## TODO

- [x] title

- [x] amp-img

- [x] Social Share button

- [x] CLI Scaffolding

- [x] Google Analytics

- [x] Header

- [x] Fix css on export

- [x] amdx-runner: amp option

- [x] amdxg Support `styled-components`

- [x] amdxg AMP Install Service Worker

- [x] amdxg Refactor layout css

- [x] amdxg `amp-img` fixed height

- [x] compiler: heading slug

- [x] compiler: toc

- [x] amdxg Fix css

- [x] amdxg Support amp-social-share

- [x] amdxg amdxg-cli

- [x] parser: Support amp-mathml

- [x] CI

- [x] amdxg Gen git history

- [x] amdxg Link to GitHub PR

- [x] amdxg-components: create

- [x] amdxg Render mdx on `pages/*.mdx` => auto gen /docs by getStaticProps

- [x] amdxg Gen RSS

- [x] 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