support writing React in markdown file

.gitignore

@@ -12,3 +12,5 @@ package-lock.json
 #.swp
 *.*~
 ~*.*
+
+docs/忽略文件.md

README-en.md

@@ -28,6 +28,7 @@ English | [简体中文](./README.md)
 * The idea of ​​building a site: Just write markdown files as a blog site [like me](https://github.com/MuYunyun/blog).
 * Out of box: One-click generation of documents and blog sites by specifying directories or documents, no need to care about site environment configuration information.
 * Performance: greatly improve site loading speed through pre-rendering and lazy loading.
+* Based on mdx: Support writing React components, mathematical formulas, etc. in markdown.
 * Search engine optimization: Support SEO, making documents easier to search. Related documents: [SEO Practice in SPA Site](https://github.com/MuYunyun/blog/issues/84)
 * Personalization: Support [custom theme](http://muyunyun.cn/create-react-doc/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB% E9%A2%98).
 * Workflow: Integrate Github actions, support automated packaging and publishing sites.

README.md

@@ -28,6 +28,7 @@
 * 建站理念: 文件即站点 (Files as a Site)。
 * 开箱即用: 通过指定目录或文档, 一键生成文档、博客站点, 无需关心站点环境配置信息。
 * 性能: 通过预渲染、懒加载大幅提升站点加载速度。
+* 基于 mdx: 支持在 markdown 中书写 React 组件、数学公式等。
 * 搜索引擎优化: 支持 SEO, 让文档更易被搜索。相关文档: [SEO 在 SPA 站点中的实践](https://github.com/MuYunyun/blog/issues/84)
 * 个性化: 支持[自定义主题](http://muyunyun.cn/create-react-doc/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98)。
 * 工作流: 集成 Github action, 支持自动化打包、发布站点。

components/Button/index.jsx

@@ -0,0 +1,9 @@
+import styles from './index.less'
+
+const Button = ({
+  children,
+}) => {
+  return <button className={styles.btn}>{children}</button>
+}
+
+export default Button

components/Button/index.less

@@ -0,0 +1,17 @@
+.btn {
+  color: #fff;
+  background: #1890ff;
+  border-color: #1890ff;
+  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+  box-shadow: 0 2px #0000000b;
+  height: 40px;
+  padding: 6.4px 15px;
+  font-size: 16px;
+  border-radius: 2px;
+  line-height: 1.5715;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  white-space: nowrap;
+  text-align: center;
+}

components/index.jsx

@@ -0,0 +1,5 @@
+import Button from './Button/index.jsx'
+
+export {
+  Button,
+}

config.yml

@@ -8,12 +8,14 @@ title: Create React Doc
 ## todo: auto menu
 menu: [
   docs/快速上手.md,
-  docs/默认主题.md,
+  docs/更新日志.md,
+  docs/主题,
   docs/站点发布.md,
-  docs/高阶用法.md,
-  docs/自定义主题.md,
   docs/其它工具.md,
-  docs/更新日志.md,
+  docs/书写组件.md,
+  docs/数学公式.md,
+  docs/高阶用法.md,
+  docs/忽略文件.md
 ]
 ## set init open menu keys
 # menuOpenKeys:

docs/自定义主题.md → docs/主题/自定义主题.md

@@ -1,4 +1,4 @@
-### 使用自定义主题
+## 使用自定义主题
 
 切换主题非常简单, 只需要将根目录文件 `config.yml` 中的 `theme` 更改为您想使用的主题即可。
 

docs/书写组件.md

@@ -0,0 +1,16 @@
+import { Button } from '../components/index.jsx'
+
+## 书写组件
+
+[create-react-doc](https://github.com/MuYunyun/create-react-doc) 内置了 [mdx](https://github.com/mdx-js/mdx), 你可以在 .md 文件中书写 React 组件, 因此你可以选择 create-react-doc 来快速搭建组件站点。
+
+## 例子
+### Button 组件
+
+```js
+import { Button } from '../components/index.jsx'
+
+<Button>Primary</Button>
+```
+
+<Button>Primary</Button>

docs/数学公式.md

@@ -0,0 +1,43 @@
+## 数学公式
+
+支持在 `$$` 与 `$$` 之间书写 latex 数学公式即能显示在网页上。
+
+```js
+$$
+z = \frac{x}{y}
+$$
+```
+
+被转化为:
+
+$$
+z = \frac{x}{y}
+$$
+
+```js
+$$
+C_1 \quad= \quad c_2 + c_4^3
+$$
+```
+
+被转化为:
+
+$$
+C_1 \quad= \quad c_2 + c_4^3
+$$
+
+```js
+$$
+y = \sqrt {x_1^2 + x_2^2 + x_3^2 + x_4^2}
+$$
+```
+
+被转化为:
+
+$$
+y = \sqrt {x_1^2 + x_2^2 + x_3^2 + x_4^2}
+$$
+
+## 参考链接
+
+* [latex 数学公式示例汇总](https://zhuanlan.zhihu.com/p/34799800)

docs/更新日志.md

@@ -2,6 +2,19 @@
 
 `create-react-doc` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
 
+### 1.3.0
+
+`2020-06-09`
+
+- **Feature**
+
+  - 🚀 create-react-doc 集成 MDX。[issue](https://github.com/MuYunyun/create-react-doc/issues/138)、[mr](https://github.com/MuYunyun/create-react-doc/pull/143)
+    - 🚀 支持在 markdown 文件中`书写 React 组件`。
+    - 🚀 支持在 markdown 文件中`书写数学公式`。
+
+- **Enhancement**
+
+  - 🎈 支持 yarn up、yarn up:dev 在 lerna 项目中快速安装包。[mr](https://github.com/MuYunyun/create-react-doc/pull/143/files?file-filters%5B%5D=.html&file-filters%5B%5D=.js&file-filters%5B%5D=.json&file-filters%5B%5D=.less&file-filters%5B%5D=.lock&file-filters%5B%5D=.sh)
 
 ### 1.2.0
 
@@ -105,7 +118,7 @@
 
 - **Enhancement**
 
-  - 🎈项目结构重构为 monorepo。[pr](https://github.com/MuYunyun/create-react-doc/pull/16)
+  - 🎈 项目结构重构为 monorepo。[pr](https://github.com/MuYunyun/create-react-doc/pull/16)
 
 ### 0.1.0
 

docs/高阶用法.md

@@ -2,64 +2,19 @@
 
 与 git 文件结构类似, 如果在展示的文件夹中有私有文件不方便展示在文档站点, 可以在 `.gitignore` 文件中设置过滤文件, 这样它们就不会展示在文档站点中了。eg: [.gitignore](https://github.com/MuYunyun/blog/blob/main/.gitignore)
 
-## 数学公式
-
-以 [MathJax](https://github.com/mathjax/MathJax) 为例, 当书写以下数学符号时
-
-```markdown
-<p>
-  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
-  $$x = {-b \pm \sqrt{\texttip{b^2-4ac}{descriminant}} \over 2a}.$$
-</p>
-```
-
-会被转换为:
-
-<p>
-  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
-  $$x = {-b \pm \sqrt{\texttip{b^2-4ac}{descriminant}} \over 2a}.$$
-</p>
-
-<!-- ![](http://with.muyunyun.cn/7a3edd13acb492afb4a3b1936c35e26d.jpg) -->
-
-### 使用方式
+### 插入自定义脚本
 
 在 `config.yml` 文件中加入 `inject` 字段。
 
 ```diff
 + inject: injectLogic/index.js
 ```
 
-然后在根目录新建与 `inject` 字段相对应的文件, 声明 `injectWithPathname` 函数, 写入[自定义逻辑](https://github.com/MuYunyun/create-react-doc/injectLogic/index.js), 完成 MathJax 的使用。
+然后在根目录新建与 `inject` 字段相对应的文件, 声明 `injectWithPathname` 函数, 写入[自定义逻辑](https://github.com/MuYunyun/create-react-doc/injectLogic/index.js)。
 
 ```js
 // perf injectWithPathname logic every pathname changes
-const injectWithPathname = (pathname) => {
-  // demo for using mathjax. see https://github.com/MuYunyun/create-react-doc/issues/63
-  if (pathname !== '/高阶用法') return;
-  window.MathJax = {
-    tex: {
-      inlineMath: [['$', '$'], ['\\(', '\\)']],
-    },
-    svg: {
-      fontCache: 'global',
-    },
-  };
-  const script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
-  const tag = 'mathjax';
-  script.id = tag;
-  script.async = true;
-  const scriptNode = document.getElementById(tag);
-  try {
-    if (!scriptNode) {
-      document.head.appendChild(script);
-    } else {
-      scriptNode.remove();
-      document.head.appendChild(script);
-    }
-  } catch (error) {}
-};
+const injectWithPathname = (pathname) => {}
 
-module.exports = { injectWithPathname };
+module.exports = { injectWithPathname }
 ```

injectLogic/index.js

@@ -9,31 +9,6 @@ const inject = () => {
 }
 
 // perf injectWithPathname logic every pathname changes
-const injectWithPathname = (pathname) => {
-  // demo for using mathjax. see https://github.com/MuYunyun/create-react-doc/issues/63
-  if (pathname !== '/高阶用法') return
-  window.MathJax = {
-    tex: {
-      inlineMath: [['$', '$'], ['\\(', '\\)']],
-    },
-    svg: {
-      fontCache: 'global',
-    },
-  }
-  const script = document.createElement('script')
-  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js'
-  const tag = 'mathjax'
-  script.id = tag
-  script.async = true
-  const scriptNode = document.getElementById(tag)
-  try {
-    if (!scriptNode) {
-      document.head.appendChild(script)
-    } else {
-      scriptNode.remove()
-      document.head.appendChild(script)
-    }
-  } catch (error) {}
-}
+const injectWithPathname = (pathname) => {}
 
 module.exports = { inject, injectWithPathname }

package.json

@@ -19,7 +19,9 @@
     "release": "lerna publish",
     "release-qa": "lerna publish --npm-tag=beta",
     "cleanup": "rm -rf node_modules/gh-pages/.cache",
-    "deploy:site": "npm run cleanup && node gh-pages"
+    "deploy:site": "npm run cleanup && node gh-pages",
+    "up:dev": "sh utils/uppackage-dev.sh",
+    "up": "sh utils/uppackage.sh"
   },
   "repository": {
     "type": "git",

packages/scripts/package.json

@@ -15,6 +15,7 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.3.4",
+    "@mdx-js/loader": "^1.6.22",
     "@nuxtjs/friendly-errors-webpack-plugin": "^2.0.2",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^8.0.5",
@@ -34,7 +35,6 @@
     "file-loader": "^1.1.11",
     "fs-extra": "^5.0.0",
     "gh-pages": "^1.2.0",
-    "highlight.js": "^10.5.0",
     "html-webpack-plugin": "^4.5.1",
     "less-loader": "^7.2.1",
     "loader-utils": "^2.0.0",
@@ -46,7 +46,8 @@
     "postcss-flexbugs-fixes": "^3.3.1",
     "postcss-loader": "^2.0.9",
     "process": "^0.11.10",
-    "raw-content-replace-loader": "^1.0.1",
+    "rehype-katex": "^5.0.0",
+    "remark-math": "^3.0.1",
     "rimraf": "^2.6.2",
     "string-replace-loader": "^3.0.1",
     "style-loader": "^0.19.1",

packages/scripts/src/conf/webpack.config.dev.js

@@ -3,10 +3,9 @@ const webpack = require('webpack')
 const path = require('path')
 const upath = require('upath')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { defaultHTMLPath, cacheDirPath } = require('crd-utils')
+const { defaultHTMLPath } = require('crd-utils')
 const FriendlyErrorsWebpackPlugin = require('@nuxtjs/friendly-errors-webpack-plugin')
 const { getDocsConfig } = require('crd-utils')
-const CreateSpareWebpackPlugin = require('./createSpareWebpackPlugin')
 const config = require('./webpack.config')
 const paths = require('./path')
 
@@ -121,16 +120,6 @@ module.exports = function (cmd) {
       template: defaultHTMLPath,
       title: docsConfig && docsConfig.title ? docsConfig.title : 'Create React Doc',
     }),
-    new CreateSpareWebpackPlugin({
-      // 备用文件目录，比对是否存在，不存在生成，根据 sep 目录规则生成
-      path: path.join(cacheDirPath, './md'),
-      sep: '___', // 检查目标目录文件，文件名存储，文件夹+下划线间隔+文件名
-      directoryTrees: { // 索引目录
-        dir: cmd.markdownPaths,
-        mdconf: true,
-        extensions: /\.md$/,
-      },
-    }),
     new FriendlyErrorsWebpackPlugin({
       clearConsole: true,
     }),

packages/scripts/src/conf/webpack.config.js

@@ -1,12 +1,13 @@
 /* eslint-disable global-require */
 /* eslint-disable import/no-dynamic-require */
-const path = require('path')
 const webpack = require('webpack')
 const webpackbar = require('webpackbar')
 const fs = require('fs')
 const { resolveApp, docsConfig, cacheDirPath, docsBuildDist } = require('crd-utils')
 const { getDocsConfig } = require('crd-utils')
 // const { getSearchContent } = require('../utils');
+const remarkMath = require('remark-math')
+const rehypeKatex = require('rehype-katex')
 const paths = require('./path')
 const pkg = require('../../package.json')
 
@@ -64,15 +65,32 @@ module.exports = {
             test: /\.md$/,
             use: [
               {
-                // https://github.com/react-doc/raw-content-replace-loader/blob/master/index.js
-                loader: require.resolve('raw-content-replace-loader'),
+                loader: require.resolve('babel-loader'),
+                options: require('../../.babelrc'), // eslint-disable-line
+              },
+              {
+                loader: require.resolve('@mdx-js/loader'),
                 options: {
-                  path: path.join(cacheDirPath, './md'), // dir need to replace
-                  replace: paths.projectPath, // the dir to replace
-                  sep: /___/g, // name saved, folder + __ + file
+                  remarkPlugins: [
+                    [
+                      remarkMath,
+                      {
+                        /* options */
+                      },
+                    ],
+                  ],
+                  rehypePlugins: [
+                    [
+                      rehypeKatex,
+                      {
+                        /* options */
+                      },
+                    ],
+                  ],
                 },
               },
             ],
+            exclude: /(node_modules)/,
           },
           // “file-loader”确保这些资源由WebpackDevServer服务。
           // 当您导入资源时，您将获得（虚拟）文件名。