feat(antdsite): add markdown syntax of alert component

YvesCoding · Aug 24, 2019 · 8b30183 · 8b30183
1 parent e85108d
commit 8b30183
Show file tree

Hide file tree

Showing 22 changed files with 611 additions and 54 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -1,77 +1,127 @@
- <p align="center"><a href="https://www.yvescoding.com/antdsite/"><img width="100" src="https://www.yvescoding.com/antdsite/favicon.png" /></a></p>
-
-<h1 align="center">AntdSite</h1>
-<p align="center">
-一款基于 React.js 的静态网站生成器
-</p>
-<p align="center">
-  <a href="https://www.npmjs.com/package/antdsite"><img src="https://img.shields.io/npm/v/antdsite.svg" alt="Version"></a><a href="https://circleci.com/gh/YvesCoding/antdsite/tree/master"><img src="https://circleci.com/gh/YvesCoding/antdsite/tree/master.png?style=shield" alt="Build Status"></a> 
-  <a href="https://www.npmjs.com/package/antdsite"><img src="https://img.shields.io/npm/l/antdsite.svg" alt="License"></a>
-<a href="https://www.npmjs.com/package/antdsite"><img src="https://img.shields.io/npm/dm/antdsite.svg" alt="Download"></a>
-<a href="https://github.com/YvesCoding/antdsite"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
-</p>
-
-[![](https://github.com/wangyi7099/pictureCdn/blob/master/allPic/antdsite/screenshot-readme.png?raw=true)](https://www.yvescoding.com/antdsite/)
-
-[English](./README.md) | 简体中文
+## 前言
 
 ## 简介
 
-- Antdsite 是一个基于 React.js 的静态文档生成器。
+- Antdsite 是一个基于 React.js 的静态网站生成器。
 - 它是由[Gatsby Js](https://www.gatsbyjs.org/)驱动的
 - 使用 [Ant Design](https://ant.design/)设计构建， 并且它的配置项借鉴了[Vuepress](https://vuepress.vuejs.org/)
 
+### 由来
+
+以前我是[vuepress](VuePress)的用户，在开发 vue 组件中使用它来写文档感觉非常顺手。 后来我开始研究上了 react，开发 react 组件就得有文档呀，我在这期间陆续试了几个基于 react 的文档生成器，像[docz](https://github.com/pedronauck/docz), [docusaurus](https://github.com/facebook/docusaurus) . 但是试用了下，感觉都不如 vuepree 顺手。后来，我访问[Ant Design](https://ant.design/index-cn)官网的时候突然冒出来一个想法： 把`Ant Design`官网做成可配置可以吗？ 答案是可以的。于是，[antdsite](https://www.yvescoding.com/antdsite/)就诞生了。
+
+总的来说就是：
+
+- 文档的配置模仿了 vuepress 的配置。
+- 文档的界面设计来源于 Ant Design 的官网。
+- 说白了就是 Ant Design 官网，我给它改成可配置的了，并且让它功能更强大！
+
 ## 特点
 
 - [Vuepree](https://vuepress.vuejs.org/) 配置风格，使用起来功能强大，简单方便。
 - 支持[mdx](https://github.com/mdx-js/mdx).
 - 内置了 [Ant Design](https://ant.design).
 - 支持[custom layout](https://www.yvescoding.com/antdsite/zh/guide/theme#custom-layout)(例如自定义网站头部，底部， 首页等等).
 
-## 文档
+## 快速开始
 
-获取详细的文档， 推荐访问网站上的[向导一节](https://www.yvescoding.com/antdsite/guide/getting-started)。
+### 安装
 
-## 安装
-
-安装命令行工具 `antdsite-cli`
+使用 cli 快速初始化一个项目
 
 ```bash
 
 yarn global add antdsite-cli
 
-# 或者如果你使用npm
+# 或者如果你使用 npm
 
 npm i antdsite-cli -g
-
 ```
 
-## 用法
+### 用法
 
 使用命令行工具`antdsite-cli`初始化项目
 
 ```bash
 antdsite my-docs
 ```
 
-访问`8000`端口即可。
+然后访问本地`8000`端口就可以啦,具体可以参考官网的[快速上手](https://www.yvescoding.com/antdsite/zh/guide/getting-started).
+
+### 截图
+
+![](/img/remote/1460000020055048?w=1445&h=414)
+
+## 在 markdown 里面使用 Ant Design
+
+两种方法使用 Ant Design
+
+### 直接在 markdown 中导入 antd 组件
+
+```js
+import { Button } from 'antd';
+
+<Button />;
+```
+
+参考链接和 demo：[使用 antd](https://www.yvescoding.com/antdsite/zh/guide/usejsx#%E4%BD%BF%E7%94%A8antd)
+
+### 设置 antd 为全局组件
+
+可以在 globalComponent.js 中设置全局组件，这样可以不用在 markdown 中频繁导入 antd 就能直接使用它的 UI 组件了。
+
+```js
+// .antdsite/globalComponent.js
+import { Button } from 'antd';
+
+export default {
+  Button
+};
+```
+
+直接在 markdown 中使用`Button`
+
+```js
+<Button />
+```
+
+参考链接和 demo：[全局组件](https://www.yvescoding.com/antdsite/zh/guide/global-component)
+
+## 关于 gatsby
+
+antdsite 涉及 gatsby 还是很少的，具体只包括：
+
+- 打包命令，运行命令：`gatsby build` `gatsby develop`
+- 在 gatsby-config 里设置主题为`antdsite`
+
+```js
+// gatsby-config.js
+module.exports = {
+  __experimentalThemes: ['antdsite']
+};
+```
+
+- 在设置了[base](https://www.yvescoding.com/antdsite/zh/config/#base)的情况下，打包命令加上`--prefix-paths`参数 `gatsby build --prefix-paths`
+
+## 常见问题
+
+> 这个和 vuepress 配置完全一样的吗？
+
+大部分是模仿的 vuepress 的配置的，但也有一些不同。比如配置中没有自定义端口，地址,PWA 等。 那些需要配置[Gatsby](https://www.gatsbyjs.org/docs/static-folder/)的，交给 AntdSite 反而更加繁琐。
 
-## 截图
+> 我不会 react 可以使用吗？
 
-<p align="center">
-<img src="https://www.yvescoding.com/antdsite/screenshot.png" width="700" />
-</p>
+完全可以。上手的要是是仅仅是 markdown 基础知识和一点 js 知识。
 
-<p align="center">
-<img src="https://www.yvescoding.com/antdsite/screenshot-1.png" width="700" />
-</p>
+> 可以将自定义主题做成插件形式发布到 npm 上吗？
 
-## 交流
+这个暂时不可以，不过未来可以考虑加入这个功能。
 
-添加我的微信我将邀请你到交流群讨论。
+如果还有问题可以留言一起讨论～
 
- <img src="https://github.com/wangyi7099/pictureCdn/blob/master/allPic/vuescroll/wx.png?raw=true" width="400" alt="Demo" style="max-width:100%;">
+## 写在最后
 
-## 许可证
+希望大家能踊跃尝试，有好的意见和建议可以反馈给我
 
-**MIT** By Yves Wang(Wangyi Yi)
+- [github 地址](https://github.com/YvesCoding/antdsite)
+- [官网](https://www.yvescoding.com/antdsite/)
diff --git a/packages/antdsite/gatsby-config.js b/packages/antdsite/gatsby-config.js
@@ -24,7 +24,11 @@ module.exports = {
           {
             resolve: getPlugin('remark-default-class-name')
           },
-          'gatsby-remark-prismjs'
+          'gatsby-remark-prismjs',
+          {
+            resolve: getPlugin('gatsby-remark-custom-blocks'),
+            pluginOptions: finalConfig.markdown.alert
+          }
         ]
       }
     },

diff --git a/packages/antdsite/lib/config.js b/packages/antdsite/lib/config.js
@@ -53,6 +53,40 @@ const defaultConfig = {
     maxTocDeep: 3,
     search: true,
     searchMaxSuggestions: 10
+  },
+  markdown: {
+    alert: {
+      info: [
+        {
+          alias: 'tip',
+          defaultTitle: 'Tip'
+        },
+        {
+          alias: 'tip-zh',
+          defaultTitle: '提示'
+        }
+      ],
+      warning: [
+        {
+          alias: 'warning',
+          defaultTitle: 'Warning'
+        },
+        {
+          alias: 'warning-zh',
+          defaultTitle: '警告'
+        }
+      ],
+      error: [
+        {
+          alias: 'error',
+          defaultTitle: 'Caveat'
+        },
+        {
+          alias: 'error-zh',
+          defaultTitle: '严重警告'
+        }
+      ]
+    }
   }
 };
 

diff --git a/packages/antdsite/lib/plugins/gatsby-remark-custom-blocks/custom-blocks/index.js b/packages/antdsite/lib/plugins/gatsby-remark-custom-blocks/custom-blocks/index.js
@@ -0,0 +1,124 @@
+'use strict';
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+function _nonIterableRest() {
+  throw new TypeError('Invalid attempt to destructure non-iterable instance');
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i['return'] != null) _i['return']();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+  return _arr;
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+module.exports = function blockPlugin() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var regex = /\:\:\: (.*?)(?:\|(.*?))?\n([\s\S]*?)\n *?\:\:\:/;
+
+  function findTypeAndTitle(option, type) {
+    var primitiveType = '';
+    var title = '';
+
+    for (var key in option) {
+      var value = option[key];
+      for (var j = 0; j < value.length; j++) {
+        if (value[j].alias == type) {
+          primitiveType = key;
+          title = value[j].defaultTitle;
+          break;
+        }
+      }
+
+      if (primitiveType && title) {
+        return {
+          type: primitiveType,
+          title
+        };
+      }
+    }
+
+    return {
+      type: primitiveType,
+      title
+    };
+  }
+
+  function blockTokenizer(eat, value, silent) {
+    var now = eat.now();
+    var keep = regex.exec(value);
+    if (!keep) return;
+    if (keep.index !== 0) return;
+
+    var _keep = _slicedToArray(keep, 3),
+      eaten = _keep[0],
+      blockType = _keep[1],
+      blockTitle = _keep[2],
+      blockContent = _keep[3];
+
+    blockType = blockType.trim();
+    var { type, title } = findTypeAndTitle(options, blockType);
+
+    if (silent || !type) return !!type;
+
+    var stringToEat = eaten;
+    var add = eat(stringToEat);
+
+    var exit = this.enterBlock();
+    var contents = this.tokenizeBlock((blockContent || '').replace(/\n/g, '\n\n'), now);
+    exit();
+
+    return add({
+      type: 'MdAlert',
+      children: contents,
+      hProperties: {
+        className: 'md-alert'
+      },
+      data: {
+        hName: 'MdAlert',
+        hProperties: {
+          message: blockTitle || title,
+          type
+        }
+      }
+    });
+  }
+
+  var Parser = this.Parser; // Inject blockTokenizer
+
+  var blockTokenizers = Parser.prototype.blockTokenizers;
+  var blockMethods = Parser.prototype.blockMethods;
+  blockTokenizers.mdAlert = blockTokenizer;
+  blockMethods.splice(blockMethods.indexOf('fencedCode') + 1, 0, 'mdAlert');
+
+  var interruptParagraph = Parser.prototype.interruptParagraph;
+  var interruptList = Parser.prototype.interruptList;
+  var interruptBlockquote = Parser.prototype.interruptBlockquote;
+  interruptParagraph.splice(interruptParagraph.indexOf('fencedCode') + 1, 0, ['mdAlert']);
+  interruptList.splice(interruptList.indexOf('fencedCode') + 1, 0, ['mdAlert']);
+  interruptBlockquote.splice(interruptBlockquote.indexOf('fencedCode') + 1, 0, ['mdAlert']);
+};
diff --git a/packages/antdsite/lib/plugins/gatsby-remark-custom-blocks/index.js b/packages/antdsite/lib/plugins/gatsby-remark-custom-blocks/index.js
@@ -0,0 +1,5 @@
+const remarkCustomBlocks = require(`./custom-blocks`);
+
+module.exports.setParserPlugins = options => {
+  return [[remarkCustomBlocks, options]];
+};
diff --git a/packages/antdsite/lib/plugins/gatsby-remark-custom-blocks/package.json b/packages/antdsite/lib/plugins/gatsby-remark-custom-blocks/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "gatsby-remark-custom-blocks",
+  "version": "0.0.1"
+}
diff --git a/packages/antdsite/package.json b/packages/antdsite/package.json
@@ -50,11 +50,14 @@
     "react-github-button-fix-iebug": "^0.0.1",
     "react-helmet": "^5.2.1",
     "react-media": "^1.9.2",
+    "space-separated-tokens": "^1.1.1",
     "style-loader": "^0.21.0",
+    "unist-util-find": "^1.0.1",
     "unist-util-select": "^2.0.2"
   },
   "devDependencies": {
     "@types/react-helmet": "^5.0.8",
+    "dedent": "^0.7.0",
     "eslint": "^5.3.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^2.9.0",
@@ -69,6 +72,8 @@
     "intersection-observer": "^0.7.0",
     "js-beautify": "^1.7.5",
     "prettier": "^1.14.0",
+    "rehype-stringify": "6.0.0",
+    "remark-rehype": "5.0.0",
     "scrollama": "^2.0.0",
     "stylelint": "^9.4.0",
     "stylelint-config-prettier": "^3.3.0",

diff --git a/packages/antdsite/src/default-theme/assets/common.less b/packages/antdsite/src/default-theme/assets/common.less
@@ -24,7 +24,7 @@ a {
 }
 
 .main-container {
-  padding: 0 194px 84px 64px;
+  padding: 0 194px 0 0;
   margin-left: -1px;
   background: #fff;
   overflow: hidden;

diff --git a/packages/antdsite/src/default-theme/assets/custom-md-block.less b/packages/antdsite/src/default-theme/assets/custom-md-block.less
@@ -0,0 +1,9 @@
+.md-alert.ant-alert {
+  .ant-alert-description {
+    p {
+      margin: 0.3rem 0;
+    }
+  }
+
+  margin-bottom: 16px;
+}