Skip to content

Commit

Permalink
docs: new site for v1.1.0 (#419)
Browse files Browse the repository at this point in the history
* docs: remove full legacy docs

* docs: add 1.1 docs structure

* docs: add tree builtin component

* docs: add basic usage of cn version

* docs: add advanced usage of cn version

* docs: add theme list of cn version

* docs: add theme development of cn version

* docs: add theme api of cn version

* docs: add base en (#420)

* docs: add base en

* fix: modal demo

* fix: add theme url

* Update docs/guide/basic.md

Co-authored-by: Peach <scdzwyxst@gmail.com>

* Update docs/guide/basic.zh-CN.md

* Update docs/guide/basic.md

Co-authored-by: Peach <scdzwyxst@gmail.com>

* docs: add advanced en (#421)

* docs: add advanced en

* Update docs/guide/advanced.md

Co-authored-by: Peach <scdzwyxst@gmail.com>

* fix: link url

* fix: link

* Update docs/guide/advanced.md

Co-authored-by: Peach <scdzwyxst@gmail.com>

Co-authored-by: Peach <scdzwyxst@gmail.com>

* docs: add theme en (#423)

* docs: add theme en

* docs: update

* docs: add lab of cn version

* docs: add lab en (#426)

* docs: add plugin of cn version

* docs: add plugin en (#428)

* docs: support to sync docs from umi

* docs: add config of cn version

* docs: add frontmatter of cn version

* docs: complete mode, navs, menus in config

* docs: add guide of cn version

* docs: add homepage of cn version

* docs: add frontmatter (#455)

* docs: add legacy faq

* docs: add introducation (#456)

* docs: add Introducation

* Update docs/guide/index.md

Co-authored-by: Peach <scdzwyxst@gmail.com>

* docs: add config of en version (#454)

* docs: make doc sync script can be running inside gh actions

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/basic.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/basic.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/basic.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/basic.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/basic.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/basic.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* Update docs/guide/advanced.md

Co-authored-by: 野迂迂 <yangwei1@outlook.com>

* docs: add home

* style: perf who using

* style: fix

* docs: hide umi words in homepage

* perf: readFileSync

* fix: utf8

* docs: use assets meta data instead of umi ui

Co-authored-by: xrkffgg <xrkffgg@gmail.com>
Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
Co-authored-by: ajuner <53512912+ajuner@users.noreply.github.com>
Co-authored-by: 野迂迂 <yangwei1@outlook.com>
  • Loading branch information
5 people authored Dec 31, 2020
1 parent 0d8b2d3 commit 89bdc0d
Showing 85 changed files with 3,053 additions and 3,126 deletions.
22 changes: 22 additions & 0 deletions .dumi/theme/builtins/Tree.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
@import (reference) '~dumi-theme-default/src/style/variables.less';

.__dumi-site-tree {
padding: 16px;
border: 1px solid @c-border;
border-radius: 2px;
background-color: @c-light-bg;

small {
padding-left: 24px;
font-size: 14px;
color: @c-secondary;

&::before {
content: '# ';
}
}

.ant-tree-switcher {
background: transparent;
}
}
58 changes: 58 additions & 0 deletions .dumi/theme/builtins/Tree.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { useEffect, useState, ReactNode, ComponentProps } from 'react';
import { Tree } from 'antd';
import { TreeProps } from 'antd/es/tree';
import './Tree.less';

function getTreeFromList(nodes: ReactNode, prefix = '') {
const data: TreeProps['treeData'] = [];

[].concat(nodes).forEach((node, i) => {
const key = `${prefix ? `${prefix}-` : ''}${i}`;

switch (node.type) {
case 'ul':
const parent = data[data.length - 1]?.children || data;
const ulLeafs = getTreeFromList(node.props.children || [], key);

parent.push(...ulLeafs);
break;

case 'li':
const liLeafs = getTreeFromList(node.props.children, key);

data.push({
title: [].concat(node.props.children).filter(child => child.type !== 'ul'),
key,
children: liLeafs,
isLeaf: !liLeafs.length,
});
break;

default:
}
});

return data;
}

const useListToTree = (nodes: ReactNode) => {
const [tree, setTree] = useState(getTreeFromList(nodes));

useEffect(() => {
setTree(getTreeFromList(nodes));
}, [nodes]);

return tree;
};

export default (props: ComponentProps<'div'>) => {
const data = useListToTree(props.children);

return <Tree.DirectoryTree
className="__dumi-site-tree"
showLine={{ showLeafIcon: false }}
selectable={false}
treeData={[{ key: '0', title: props.title || '<root>', children: data }]}
defaultExpandAll
/>;
};
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -19,3 +19,4 @@ dist
.umi-production
.umi-test
.now
/docs/.upstream
54 changes: 0 additions & 54 deletions config/config.js
Original file line number Diff line number Diff line change
@@ -4,60 +4,6 @@ export default {
title: 'dumi',
mode: 'site',
favicon: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
menus: {
'/zh-CN/guide': [
{
title: '介绍',
children: ['guide/index', 'guide/getting-started'],
},
{
title: '写组件 Demo',
children: ['guide/demo-principle', 'guide/demo-types', 'guide/control-demo-render'],
},
{
title: '控制菜单和路由生成',
children: [
'guide/control-route-generate',
'guide/control-menu-generate',
'guide/control-nav-generate',
],
},
{
title: '更多用法',
children: ['guide/mode', 'guide/multi-language', 'guide/seo'],
},
{
title: '其他',
children: ['guide/migration', 'guide/faq'],
},
],
'/guide': [
{
title: 'Introducation',
children: ['guide/index', 'guide/getting-started'],
},
{
title: 'How to write a demo',
children: ['guide/demo-principle', 'guide/demo-types', 'guide/control-demo-render'],
},
{
title: 'Control and generate',
children: [
'guide/control-route-generate',
'guide/control-menu-generate',
'guide/control-nav-generate',
],
},
{
title: 'More usage',
children: ['guide/mode', 'guide/multi-language', 'guide/seo'],
},
{
title: 'Others',
children: ['guide/migration', 'guide/faq'],
},
],
},
navs: {
'en-US': [
null,
7 changes: 6 additions & 1 deletion docs/demo/Hello/index.tsx → docs/.demos/Hello/index.tsx
Original file line number Diff line number Diff line change
@@ -2,10 +2,15 @@ import React from 'react';

export interface IHelloProps {
/**
* extra CSS className for this component
* Extra CSS className for this component
* @description.zh-CN 组件额外的 CSS className
*/
className?: string;
/**
* I'm required
* @description.zh-CN 我是一个必选属性
*/
type: string;
}

const Hello: React.FC<IHelloProps> = () => <>Hello World!</>;
File renamed without changes.
8 changes: 5 additions & 3 deletions docs/demo/modal.jsx → docs/.demos/modal/modal.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
/**
* title: 基础 Modal
* desc: 这是 antd Modal 组件的基础示例
* title: Basic Modal
* title.zh-CN: 基础 Modal
* desc: This is a basic example of the antd Modal component
* desc.zh-CN: 这是 antd Modal 组件的基础示例
*/

import React from 'react';
import { Button, Modal } from 'antd';
import ModalContent from './modal-content';
import ModalContent from './content';
import './modal.less';

class App extends React.Component {
File renamed without changes.
Binary file removed docs/assets/locale-menu.gif
Binary file not shown.
45 changes: 20 additions & 25 deletions docs/config/frontmatter.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,42 @@
---
title: FrontMatter
toc: menu
---

# FrontMatter

Like most documentation tools, in order to enable Markdown files to perform configurations capabilities, dumi also provides some FrontMatter configurations; There are some specials that dumi not only supports Markdown files for FrontMatter configuration, but also supports FrontMatter configuration of TSX/JSX imported by external demos.
FrontMatter refers to the part where the text is configured at the **top of the file**. In dumi, FrontMatter is written in YAML syntax; in addition to the Markdown file, dumi also supports the configuration of FrontMatter for demo display in the demo. Let’s look at two Examples:

The FrontMatter for Markdown files is as follows:
Write FrontMatter in Markdown file:

<pre>---
title: title content
<pre lang="md">---
title: The title content
---
</pre>

The FrontMatter for TSX/JSX files is as follows:
Write FrontMatter in the demo:

<pre>
<pre lang="js">
/**
* title: title content
* title: The title content
*/
</pre>

## The FrontMatter configurations supported by Markdown
Both the form of code blocks and external demos support FrontMatter. The external demos not only support configuration in the source code, but also add attributes to the `code` tag for configuration, such as:

```html
<code src="/path/to/demo.tsx" title="This way you can also configure the demo title"></code>
```

## Markdown configurations

### title

- Type: `String`
- Default: `null`
- Default: The first heading of the body
- Details:

Configure the page title, which will be used as the subtitle of the page title and the left menu.

If the user does not configure, the website title will only present the main title; The name of the left menu defaults to the file name of the Markdown file (without suffix).

### sidemenu

- Type: `Boolean`
@@ -216,15 +219,15 @@ Configure the footer of the current page. It is recommended to configure the hom

Whether to present the 『Help Translation』 prompt at the top of the page.

### hide <Badge>1.1.0-beta.30+</Badge>
### hide <Badge>1.1.0+</Badge>

- Type: `Boolean`
- Default: `false`
- Details:

You can hide specific documentation that you do not want to display on the webpack in production env, and this option does not affect the development env.

## FrontMatter configurations supported by TSX/JSX
## Demo configurations

### title

@@ -282,7 +285,7 @@ It is used to control whether the demo wrapper sets the CSS value of `transform`

It is used to control whether the demo wrapper expands the presentation of source code by default.

### debug <Badge>1.1.0-beta.30+</Badge>
### debug <Badge>1.1.0+</Badge>

- Type: `Boolean`
- Default: `false`
@@ -320,18 +323,10 @@ Configure via frontmatter:
// Both of the above methods can be identified
```

### iframe <Badge>1.1.0-beta.30+</Badge>
### iframe <Badge>1.1.0+</Badge>

- Type: `Boolean | Number`
- Default: `false`
- Details:

Use iframe mode to render this demo, it is very useful for layout demo, we can control the iframe height via pass a number value, check out [iframe mode](/guide/control-demo-render#iframe-mode) to get more informations.

### Controlled by `code` tag

All configurations supported by TSX/JSX can also be used when importing external demos using the `code` tag, like this:

```html
<code title="title" desc="desc" src="/path/to/demo" />
```
Use iframe mode to render this demo, it is very useful for layout demo, we can control the iframe height via pass a number value, check out [iframe mode](/guide/basic#iframe-mode) to get more informations.
45 changes: 20 additions & 25 deletions docs/config/frontmatter.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,42 @@
---
title: FrontMatter
toc: menu
---

# FrontMatter

和大多数文档工具一样,为了使 Markdown 文件能发挥出配置能力,dumi 也不能免俗地提供了一些 FrontMatter 的配置;有些特殊的是,dumi 不仅支持 Markdown 文件进行 FrontMatter 配置,也支持外部 Demo 引入的 TSX/JSX 文件的 FrontMatter 配置。
FrontMatter 是指**文件最顶部**对正文进行配置的部分,在 dumi 中,FrontMatter 均以 YAML 语法进行编写;除了 Markdown 文件,dumi 也支持在 demo 中配置用于 demo 展示的 FrontMatter,来看两个范例:

Markdown 文件的 FrontMatter 编写方法如下
Markdown 文件中编写 FrontMatter:

<pre>---
<pre lang="md">---
title: 标题内容
---
</pre>

TSX/JSX 文件的 FrontMatter 编写方法如下
在 demo 中编写 FrontMatter

<pre>
<pre lang="js">
/**
* title: 标题内容
*/
</pre>

## Markdown 支持的 FrontMatter 配置项
无论是代码块的形式还是外部 demo,均支持 FrontMatter,外部 demo 不仅支持在源代码中进行配置,也可以给 `code` 标签添加属性进行配置,比如:

```html
<code src="/path/to/demo.tsx" title="这样也可以配置 demo 标题"></code>
```

## Markdown 配置项

### title

- 类型:`String`
- 默认值:`null`
- 默认值:正文第一个标题
- 详细:

用于配置该页面的标题,将会被用作该页面标题的子标题以及左侧菜单。

如果用户不进行配置,网站标题将会仅显示主标题;左侧菜单项名称默认为该 Markdown 文件的文件名(不含后缀)。

### sidemenu

- 类型:`Boolean`
@@ -195,8 +198,8 @@ hero:
```yaml
features:
- icon: 图标的 URL 地址,建议切图尺寸为 144 * 144(可选)
title: 特性标题
link: 可以配置跳转链接
title: 性能强大
link: 可为标题配置超链接
desc: 可以配置 `markdown` 文本
```

@@ -216,15 +219,15 @@ features:

是否在该页面顶部展示『帮助翻译』的提示框。

### hide <Badge>1.1.0-beta.30+</Badge>
### hide <Badge>1.1.0+</Badge>

- 类型:`Boolean`
- 默认值:`false`
- 详细:

如果你暂时不希望在生产环境的站点中展示某些文档,可以打开这个配置临时隐藏它,该配置不会影响开发环境的渲染。

## TSX/JSX 支持的 FrontMatter 配置项
## demo 配置项

### title

@@ -282,7 +285,7 @@ features:

用于控制当前 demo 的包裹容器是否默认展开源代码显示。

### debug <Badge>1.1.0-beta.30+</Badge>
### debug <Badge>1.1.0+</Badge>

- 类型:`Boolean`
- 默认值:`false`
@@ -320,18 +323,10 @@ features:
// 以上两种方式均可识别
```

### iframe <Badge>1.1.0-beta.30+</Badge>
### iframe <Badge>1.1.0+</Badge>

- 类型:`Boolean | Number`
- 默认值:`false`
- 详细:

使用 iframe 模式渲染当前 demo,对于渲染 layout 型的 demo 非常有用,当我们传递数值时可以控制 iframe 的高度,访问 [iframe 模式](/zh-CN/guide/control-demo-render#iframe-模式) 了解更多。

### 通过 `code` 标签控制

所有 TSX/JSX 支持的配置项,在使用 `code` 标签引入外部 demo 时也可以使用,就像这样:

```html
<code title="标题" desc="说明文字" src="/path/to/demo" />
```
使用 iframe 模式渲染当前 demo,对于渲染 layout 型的 demo 非常有用,当我们传递数值时可以控制 iframe 的高度,访问 [iframe 模式](/zh-CN/guide/basic#iframe-模式) 了解更多。
Loading

0 comments on commit 89bdc0d

Please sign in to comment.