mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-11 08:07:26 +02:00
refactor(v2): shift to docusaurus/mdx-loader (#1339)
This commit is contained in:
Endilie Yacop Sucipto
GitHub
parent
1a8e12048e
commit
aa27f82acc
8 changed files with 179 additions and 40 deletions
48
packages/docusaurus-mdx-loader/README.md
Normal file
48
packages/docusaurus-mdx-loader/README.md
Normal file
|
|
@ -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)
|
||||
15
packages/docusaurus-mdx-loader/package.json
Normal file
15
packages/docusaurus-mdx-loader/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
38
packages/docusaurus-mdx-loader/src/index.js
Normal file
38
packages/docusaurus-mdx-loader/src/index.js
Normal file
|
|
@ -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);
|
||||
};
|
||||
|
|
@ -7,8 +7,7 @@
|
|||
"dependencies": {
|
||||
"@babel/polyfill": "^7.4.0",
|
||||
"@docusaurus/utils": "^1.0.0",
|
||||
"@mapbox/rehype-prism": "^0.3.1",
|
||||
"@mdx-js/mdx": "^0.20.3",
|
||||
"@docusaurus/mdx-loader": "^1.0.0",
|
||||
"front-matter": "^3.0.1",
|
||||
"fs-extra": "^7.0.1",
|
||||
"globby": "^9.1.0",
|
||||
|
|
@ -16,7 +15,6 @@
|
|||
"loader-utils": "^1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@docusaurus/core": "^2.0.0",
|
||||
"@mdx-js/tag": "^0.20.3"
|
||||
"@docusaurus/core": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ const globby = require('globby');
|
|||
const importFresh = require('import-fresh');
|
||||
const path = require('path');
|
||||
const {getSubFolder, idx, normalizeUrl} = require('@docusaurus/utils');
|
||||
const rehypePrism = require('@mapbox/rehype-prism');
|
||||
|
||||
const createOrder = require('./order');
|
||||
const loadSidebars = require('./sidebars');
|
||||
|
|
@ -246,6 +245,9 @@ class DocusaurusPluginContentDocs {
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: '@docusaurus/mdx-loader',
|
||||
},
|
||||
{
|
||||
loader: path.resolve(__dirname, './markdown/index.js'),
|
||||
options: {
|
||||
|
|
@ -254,7 +256,6 @@ class DocusaurusPluginContentDocs {
|
|||
translatedDir,
|
||||
docsDir: this.content.docsDir,
|
||||
sourceToMetadata: this.content.sourceToMetadata,
|
||||
hastPlugins: [[rehypePrism, {ignoreMissing: true}]],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
|
||||
const fm = require('front-matter');
|
||||
const mdx = require('@mdx-js/mdx');
|
||||
const {getOptions} = require('loader-utils');
|
||||
const path = require('path');
|
||||
const {resolve} = require('url');
|
||||
|
|
@ -74,25 +73,5 @@ module.exports = async function(fileString) {
|
|||
content = lines.join('\n');
|
||||
}
|
||||
|
||||
let result;
|
||||
|
||||
try {
|
||||
result = await mdx(content, options);
|
||||
} catch (err) {
|
||||
return callback(err);
|
||||
}
|
||||
|
||||
// TODO: Allow choosing prismjs theme
|
||||
// prismjs/themes/XXXXXX.css https://github.com/PrismJS/prism/tree/master/themes
|
||||
// prism-themes/themes/XXXXXX.css https://github.com/PrismJS/prism-themes/tree/master/themes
|
||||
const prismThemeImport = 'prism-themes/themes/prism-atom-dark.css';
|
||||
|
||||
const code = `
|
||||
import React from 'react';
|
||||
import { MDXTag } from '@mdx-js/tag';
|
||||
import '${prismThemeImport}';
|
||||
${result}
|
||||
`;
|
||||
|
||||
return callback(null, code);
|
||||
return callback(null, content);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
"@babel/preset-react": "^7.0.0",
|
||||
"@docusaurus/utils": "^1.0.0",
|
||||
"@hot-loader/react-dom": "^16.8.4",
|
||||
"@mdx-js/tag": "^0.20.3",
|
||||
"babel-jest": "^24.1.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"babel-plugin-dynamic-import-node": "^2.2.0",
|
||||
|
|
@ -56,8 +55,6 @@
|
|||
"lodash": "^4.17.11",
|
||||
"mini-css-extract-plugin": "^0.4.1",
|
||||
"portfinder": "^1.0.13",
|
||||
"prism-themes": "^1.1.0",
|
||||
"prismjs": "^1.16.0",
|
||||
"react-dev-utils": "^8.0.0",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-hot-loader": "^4.8.2",
|
||||
|
|
|
|||
81
yarn.lock
81
yarn.lock
|
|
@ -36,6 +36,26 @@
|
|||
semver "^5.4.1"
|
||||
source-map "^0.5.0"
|
||||
|
||||
"@babel/core@^7.2.2":
|
||||
version "7.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.3.tgz#198d6d3af4567be3989550d97e068de94503074f"
|
||||
integrity sha512-oDpASqKFlbspQfzAE7yaeTmdljSH2ADIvBlb0RwbStltTuWa0+7CCI1fYVINNv9saHPa1W7oaKeuNuKj+RQCvA==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.0.0"
|
||||
"@babel/generator" "^7.4.0"
|
||||
"@babel/helpers" "^7.4.3"
|
||||
"@babel/parser" "^7.4.3"
|
||||
"@babel/template" "^7.4.0"
|
||||
"@babel/traverse" "^7.4.3"
|
||||
"@babel/types" "^7.4.0"
|
||||
convert-source-map "^1.1.0"
|
||||
debug "^4.1.0"
|
||||
json5 "^2.1.0"
|
||||
lodash "^4.17.11"
|
||||
resolve "^1.3.2"
|
||||
semver "^5.4.1"
|
||||
source-map "^0.5.0"
|
||||
|
||||
"@babel/generator@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
|
||||
|
|
@ -265,6 +285,15 @@
|
|||
"@babel/traverse" "^7.4.0"
|
||||
"@babel/types" "^7.4.0"
|
||||
|
||||
"@babel/helpers@^7.4.3":
|
||||
version "7.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.3.tgz#7b1d354363494b31cb9a2417ae86af32b7853a3b"
|
||||
integrity sha512-BMh7X0oZqb36CfyhvtbSmcWc3GXocfxv3yNsAEuM0l+fAqSO22rQrUpijr3oE/10jCTrB6/0b9kzmG4VetCj8Q==
|
||||
dependencies:
|
||||
"@babel/template" "^7.4.0"
|
||||
"@babel/traverse" "^7.4.3"
|
||||
"@babel/types" "^7.4.0"
|
||||
|
||||
"@babel/highlight@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
|
||||
|
|
@ -288,6 +317,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.2.tgz#b4521a400cb5a871eab3890787b4bc1326d38d91"
|
||||
integrity sha512-9fJTDipQFvlfSVdD/JBtkiY0br9BtfvW2R8wo6CX/Ej2eMuV0gWPk1M67Mt3eggQvBqYW1FCEk8BN7WvGm/g5g==
|
||||
|
||||
"@babel/parser@^7.4.3":
|
||||
version "7.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.3.tgz#eb3ac80f64aa101c907d4ce5406360fe75b7895b"
|
||||
integrity sha512-gxpEUhTS1sGA63EGQGuA+WESPR/6tz6ng7tSHFCmaTJK/cGK8y37cBTspX+U2xCAue2IQVvF6Z0oigmjwD8YGQ==
|
||||
|
||||
"@babel/plugin-proposal-async-generator-functions@^7.2.0":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
|
||||
|
|
@ -773,6 +807,21 @@
|
|||
globals "^11.1.0"
|
||||
lodash "^4.17.11"
|
||||
|
||||
"@babel/traverse@^7.4.3":
|
||||
version "7.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.3.tgz#1a01f078fc575d589ff30c0f71bf3c3d9ccbad84"
|
||||
integrity sha512-HmA01qrtaCwwJWpSKpA948cBvU5BrmviAief/b3AVw936DtcdsTexlbyzNuDnthwhOQ37xshn7hvQaEQk7ISYQ==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.0.0"
|
||||
"@babel/generator" "^7.4.0"
|
||||
"@babel/helper-function-name" "^7.1.0"
|
||||
"@babel/helper-split-export-declaration" "^7.4.0"
|
||||
"@babel/parser" "^7.4.3"
|
||||
"@babel/types" "^7.4.0"
|
||||
debug "^4.1.0"
|
||||
globals "^11.1.0"
|
||||
lodash "^4.17.11"
|
||||
|
||||
"@babel/types@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
|
||||
|
|
@ -1575,10 +1624,10 @@
|
|||
refractor "^2.3.0"
|
||||
unist-util-visit "^1.1.3"
|
||||
|
||||
"@mdx-js/mdx@^0.20.3":
|
||||
version "0.20.3"
|
||||
resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-0.20.3.tgz#1f32b4a4a0cc176a3192ef51a0a3502cdfdca3f0"
|
||||
integrity sha512-IIlssEIPPAqo04krm270ifGjSVPqtTmjlryYGi8/4VXHCdi42l8v2piTJPo2NVc7J+HizY1uxxZb6AeoFsO/Iw==
|
||||
"@mdx-js/mdx@^1.0.0-rc.0":
|
||||
version "1.0.0-rc.0"
|
||||
resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.0.0-rc.0.tgz#c31c8dae9c08e6494018e0fde4a0d87a7364f7a8"
|
||||
integrity sha512-PpDmC9i1LJKAK/BNce75D8QZS05ccfVMJZKGalogvGw0b8R+vQcMBtlklbVOqk10oVBe1TYYbRdniOkt1ziHMw==
|
||||
dependencies:
|
||||
"@babel/plugin-proposal-object-rest-spread" "^7.3.2"
|
||||
"@babel/plugin-syntax-jsx" "^7.2.0"
|
||||
|
|
@ -1586,6 +1635,7 @@
|
|||
detab "^2.0.0"
|
||||
hast-util-raw "^5.0.0"
|
||||
mdast-util-to-hast "^4.0.0"
|
||||
remark-mdx "^1.0.0-rc.0"
|
||||
remark-parse "^6.0.0"
|
||||
remark-squeeze-paragraphs "^3.0.1"
|
||||
to-style "^1.3.3"
|
||||
|
|
@ -1593,10 +1643,10 @@
|
|||
unist-builder "^1.0.1"
|
||||
unist-util-visit "^1.3.0"
|
||||
|
||||
"@mdx-js/tag@^0.20.3":
|
||||
version "0.20.3"
|
||||
resolved "https://registry.yarnpkg.com/@mdx-js/tag/-/tag-0.20.3.tgz#9e2306040b6469248c45a5f5baf44d0014db0493"
|
||||
integrity sha512-Co3gUFmNDv9z2LjuvLTpTj2NaOSHFxuoZjohcG0YK/KfECO+Ns9idzThMYjfEDe1vAf4c824rqlBYseedJdFNw==
|
||||
"@mdx-js/react@^1.0.0-rc.0":
|
||||
version "1.0.0-rc.0"
|
||||
resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.0.0-rc.0.tgz#1863287fe20a396c13280e155a29dbf9f8a40889"
|
||||
integrity sha512-yE/eEUDBkdSdsSdXvantAn8Q6CdM+u2Nor2IRaN8Fe+p8IGpMfHqLFS3WSIZpodGB4PYUxRsGINDl7ITSZXQyg==
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
|
|
@ -6962,7 +7012,7 @@ is-accessor-descriptor@^1.0.0:
|
|||
dependencies:
|
||||
kind-of "^6.0.0"
|
||||
|
||||
is-alphabetical@^1.0.0:
|
||||
is-alphabetical@^1.0.0, is-alphabetical@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.2.tgz#1fa6e49213cb7885b75d15862fb3f3d96c884f41"
|
||||
integrity sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg==
|
||||
|
|
@ -11270,6 +11320,19 @@ relateurl@0.2.x:
|
|||
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
|
||||
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
|
||||
|
||||
remark-mdx@^1.0.0-rc.0:
|
||||
version "1.0.0-rc.0"
|
||||
resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.0.0-rc.0.tgz#c6886f208bf7ca06368fd10a123106af7284dbac"
|
||||
integrity sha512-hCh7/HV8aSGGWRudqThCXsxuu6j3FaXh5x2nfqLysm+50la2evldzXWxZmBU15WoNwTP5W4akXKFad+tMt1Eig==
|
||||
dependencies:
|
||||
"@babel/core" "^7.2.2"
|
||||
"@babel/helper-plugin-utils" "^7.0.0"
|
||||
"@babel/plugin-proposal-object-rest-spread" "^7.3.2"
|
||||
"@babel/plugin-syntax-jsx" "^7.2.0"
|
||||
is-alphabetical "^1.0.2"
|
||||
remark-parse "^6.0.0"
|
||||
unified "^7.0.0"
|
||||
|
||||
remark-parse@^6.0.0:
|
||||
version "6.0.3"
|
||||
resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-6.0.3.tgz#c99131052809da482108413f87b0ee7f52180a3a"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue