docs: add basic documentation (#14)

.gitignore

@@ -10,3 +10,4 @@
 /packages/father-doc/src/fixtures/e2e/normal/.docz
 /.changelog
 yarn.lock
+dist

config/config.js

@@ -0,0 +1,15 @@
+export default {
+  // for GitHub Pages before prerender be supported
+  history: 'hash',
+  publicPath: '/father-doc/',
+  doc: {
+    title: 'father-doc',
+  },
+  extraBabelPlugins: [
+    [ 'import', {
+      libraryName: 'antd',
+      libraryDirectory: 'es',
+      style: 'css',
+    }],
+  ],
+}

docs/config/frontmatter.md

@@ -0,0 +1,100 @@
+---
+title: FrontMatter
+group:
+  title: 配置项
+---
+
+# FrontMatter
+
+和大多数文档工具一样，为了使 Markdown 文件能发挥出配置能力，father-doc 也不能免俗地提供了一些 FrontMatter 的配置；值得一提的是，father-doc 不仅支持 Markdown 文件进行 FrontMatter 配置，也支持外部 Demo 引入的 TSX/JSX 文件的 FrontMatter 配置。
+
+Markdown 文件的 FrontMatter 编写方法如下：
+
+<pre>---
+title: 标题内容
+---
+</pre>
+
+TSX/JSX 文件的 FrontMatter 编写方法如下：
+
+<pre>
+/**
+&nbsp;* title: 标题内容
+&nbsp;*/
+</pre>
+
+## Markdown 支持的 FrontMatter 配置项
+
+### title
+
+- 类型：`String`
+- 默认值：`null`
+- 详细：
+
+用于配置该页面的标题，将会被用作该页面标题的子标题以及左侧菜单。
+
+如果用户不进行配置，网站标题将会仅显示主标题；左侧菜单项名称默认为该 Markdown 文件的文件名（不含后缀）。
+
+### sidebar
+
+- 类型：`Boolean`
+- 默认值：`true`
+- 详细：
+
+控制侧边栏菜单的显示或隐藏，通常用于展示全屏 Demo 的场景。
+
+### order
+
+- 类型：`Number`
+- 默认值：`null`
+- 详细：
+
+控制该文档的显示顺序，数值越大排序越靠前。
+
+### group
+
+- 类型：`Object`
+- 默认值：`null`
+- 详细：
+
+该配置用于对当前页面进行分组，这样可以在侧边栏菜单进行分组显示，该值有 3 项子配置：
+
+#### group.title
+
+- 类型：`String`
+- 详细：
+
+用于配置侧边栏菜单中该组别的菜单项名称。
+
+#### group.path
+
+- 类型：`String`
+- 详细：
+
+配置该组别的路由前缀，当 `location.pathname` 匹配到该前缀时，菜单组会进行 active 标记。
+
+#### group.order
+
+- 类型：`Number`
+- 默认值：`null`
+- 详细：
+
+控制该文档组的显示顺序，数值越大排序越靠前。
+
+## TSX/JSX 支持的 FrontMatter 配置项
+
+### title
+
+- 类型：`String`
+- 默认值：`null`
+- 详细：
+
+用于配置该外部 Demo 的标题，配置后会在 Demo 预览器中显示。
+
+### desc
+
+- 类型：`String`
+- 默认值：`null`
+- 详细：
+
+用于配置该外部 Demo 的简介，配置后会在 Demo 预览器中显示。

docs/config/index.md

@@ -0,0 +1,70 @@
+---
+title: Config
+order: 1
+group:
+  title: 配置项
+---
+
+# Config
+
+father-doc 基于 Umi，配置的方式与 Umi 项目一致，使用 `.umirc.js` 或 `config/config.js` 都可进行配置，内容大致如下：
+
+``` js
+// 配置文件内容
+export default {
+  // Umi 配置
+  doc : {
+    // father-doc 独有配置
+  }
+}
+```
+
+## father-doc 独有配置
+
+### doc.title
+
+- 类型：`String`
+- 默认值：`package.name`
+- 详细：
+
+配置文档的名称，通常是所开发的组件的名称，等同于配置 Umi `title` 配置中的 `defaultTitle`，该配置除用于网站标题之外，还会显示在侧边栏菜单中。
+
+### doc.desc
+
+- 类型：`String`
+- 默认值：`null`
+- 详细：
+
+配置文档的介绍，会显示在侧边栏菜单标题的下方。
+
+### doc.logo
+
+- 类型：`String`
+- 默认值：Umi 的 LOGO
+- 详细：
+
+配置文档的 LOGO，会显示在侧边栏菜单标题上方。
+
+### doc.include
+
+- 类型：`Array<String>`
+- 默认值：`['docs']`
+- 详细：
+
+配置默认会嗅探的除 `src` 目录以外的目录，该目录下的 `.md` 文件也会被加入进路由，而且优先级高于 `src` 目录。
+
+## Umi 的配置
+
+### routes
+
+- 类型：`Array`
+- 默认值：`null`
+- 详细：
+
+<Alert>注意：暂不支持配置嵌套路由</Alert>
+
+配置式路由，配置方式与 Umi 一致，可通过 `meta` 属性传递支持的 <a href="#/config/frontmatter">FrontMatter</a> 属性。
+
+### 其他配置
+
+详见 Umi 的 [官方文档](https://umijs.org/config)。

docs/demo/modal.jsx

@@ -0,0 +1,56 @@
+/**
+ * title: 基础 Modal
+ * desc: 这是 antd Modal 组件的基础示例
+ */
+
+import React from 'react';
+import Modal from 'antd/es/modal';
+import 'antd/es/modal/style/css';
+import Button from 'antd/es/button';
+import 'antd/es/button/style/css';
+
+class App extends React.Component {
+  state = { visible: false }
+
+  showModal = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  handleOk = e => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleCancel = e => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <Button type="primary" onClick={this.showModal}>
+          Open Modal
+        </Button>
+        <Modal
+          title="Basic Modal"
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default () => <App />;

docs/demo/typescript.tsx

@@ -0,0 +1,19 @@
+/**
+ * title: 源代码类型转换
+ * desc: 如果我们的 demo 是采用 TSX 编写的，在展开源代码后，点击一旁的语言切换按钮，可切换显示成 JSX 的代码
+ */
+
+import Button from 'antd/es/button';
+import 'antd/es/button/style/css';
+
+type MsgType = string;
+
+function hello(msg: MsgType) {
+  alert(msg);
+}
+
+export default () => (
+  <Button type="primary" onClick={hello.bind(null, 'Hello!')}>
+    点击我就 Hello!
+  </Button>
+);

docs/example.md

@@ -0,0 +1,97 @@
+---
+title: 文档示例
+---
+
+# 文档示例
+
+## Demo 嵌入
+
+``` jsx
+import { Button } from 'antd';
+import 'antd/es/button/style/css';
+
+export default () => <Button type="primary">我是 antd 的按钮</Button>;
+```
+
+## 外部 Demo
+<code src="./demo/modal.jsx" />
+
+## TS 转 JS
+<code src="./demo/typescript.tsx" />
+
+# 一级标题
+## 二级标题
+### 三级标题
+#### 四级标题
+##### 五级标题
+###### 六级标题
+
+
+## 水平线
+
+---
+
+## 强调样式
+
+**字体加粗**
+
+*斜体样式*
+
+~~删除线样式~~
+
+## 引用
+
+
+> 引用可以被嵌套
+>> 只要引用符号比上一级多就能产生嵌套
+
+
+## 列表
+
+无序列表
+
++ 使用 `+`、`-` 或 `*` 来创建无序列表
++ 列表可以嵌套，嵌套会产生缩进
+  - 我是子列表项
+
+有序列表
+
+1. father-doc 不基于 father
+2. father-doc 基于 Umi
+3. father-doc 核心是一个 Umi 插件
+
+## 代码
+
+行内 `code`
+
+代码块：
+
+```
+// some code here
+```
+
+语法高亮
+
+``` js
+console.log('Hello World!');
+```
+
+## 表格
+
+| 名词    | 解释 |
+| ------ | ----------- |
+| father | Library toolkit based on rollup, docz, storybook, jest, prettier and eslint. |
+| Umi    | Pluggable enterprise-level react application framework. |
+
+单元格右对齐
+
+| 名词    | 解释 |
+| ------:| -----------:|
+| father | Library toolkit based on rollup, docz, storybook, jest, prettier and eslint. |
+| Umi    | Pluggable enterprise-level react application framework. |
+
+## 超链接
+
+[前往 Umi 官网](https://umijs.org)
+
+自动转换超链接 https://umijs.org