refactor(v2): shift to docusaurus/mdx-loader (#1339)

packages/docusaurus-mdx-loader/README.md

@@ -0,0 +1,48 @@
+# `@docusaurus/mdx-loader`
+
+Docusaurus webpack loader of [MDX](https://github.com/mdx-js/mdx)
+
+The extra idea here is to simplify things by adding prismjs syntax highlighting by default through https://github.com/mapbox/rehype-prism and add the prism css theme import directly.
+
+
+## Installation
+
+```sh
+yarn add @docusaurus/mdx-loader
+```
+
+## Usage
+```js
+
+// ...
+module: {
+  rules: [
+    // ...
+    {
+        test: /\.css$/,
+        // Make sure your webpack loader can import css files too
+    },
+    {
+      test: /\.mdx?$/,
+      use: [
+        'babel-loader',
+        {
+            loader: '@docuaurus/mdx-loader',
+            options: {
+                // .. See options
+            }
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Options
+
+### `prismTheme`
+  - Default: `prism-themes/themes/prism-atom-dark.css`;
+
+This is the PrismJS theme CSS that will be imported. The supported themes are :
+- prismjs/themes/XXXXXX.css (See https://github.com/PrismJS/prism/tree/master/themes)
+- prism-themes/themes/XXXXXX.css (See https://github.com/PrismJS/prism-themes/tree/master/themes)

packages/docusaurus-mdx-loader/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@docusaurus/mdx-loader",
+  "version": "1.0.0",
+  "description": "Docusaurus Loader for MDX",
+  "main": "src/index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@mapbox/rehype-prism": "^0.3.1",
+    "@mdx-js/mdx": "^1.0.0-rc.0",
+    "@mdx-js/react": "^1.0.0-rc.0",
+    "loader-utils": "^1.2.3",
+    "prism-themes": "^1.1.0",
+    "prismjs": "^1.16.0"
+  }
+}

packages/docusaurus-mdx-loader/src/index.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const {getOptions} = require('loader-utils');
+const mdx = require('@mdx-js/mdx');
+const rehypePrism = require('@mapbox/rehype-prism');
+
+const DEFAULT_OPTIONS = {
+  rehypePlugins: [[rehypePrism, {ignoreMissing: true}]],
+  prismTheme: 'prism-themes/themes/prism-atom-dark.css',
+};
+
+module.exports = async function(content) {
+  const callback = this.async();
+
+  const options = Object.assign(DEFAULT_OPTIONS, getOptions(this), {
+    filepath: this.resourcePath,
+  });
+  let result;
+
+  try {
+    result = await mdx(content, options);
+  } catch (err) {
+    return callback(err);
+  }
+
+  const code = `
+  import React from 'react';
+  import { mdx } from '@mdx-js/react';
+  import '${options.prismTheme}';
+  ${result}
+  `;
+
+  return callback(null, code);
+};