Skip to content

Commit

Permalink
📝 docs: 为主题包组件增加头部引导说明
Browse files Browse the repository at this point in the history
  • Loading branch information
arvinxx committed Feb 14, 2023
1 parent 53d8aaf commit f82c133
Show file tree
Hide file tree
Showing 11 changed files with 45 additions and 64 deletions.
7 changes: 5 additions & 2 deletions example/.dumirc.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { defineConfig } from 'dumi';
import path from 'path';

import { homepage } from '../package.json';
import { homepage, name } from '../package.json';

import { features } from './config/features';

Expand Down Expand Up @@ -39,8 +39,11 @@ export default defineConfig({
],
},
features,

apiHeader: {
match: ['/components'],
pkg: name,
sourceUrl: `{github}/tree/master/src/components/{atomId}/index.tsx`,
docUrl: `{github}/tree/master/example/docs/components/{atomId}.{locale}.md`,
},
},

Expand Down
2 changes: 1 addition & 1 deletion example/docs/components/DumiSiteProvider.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
order: 2
title: DumiSiteProvider 主题容器
apiHeader: true
atomId: DumiSiteProvider
group:
title: 其他
order: 100
Expand Down
11 changes: 6 additions & 5 deletions example/docs/components/Features.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
---
order: 2
title: Features 特性
apiHeader: true
description: 首页的特性组件
atomId: Features
group: 风格化组件
---

:::info
只有包裹在 `DumiSiteProvider` 里面才能正常使用。
:::

## Demo

<code src="./demos/Features"></code>

:::info
只有包裹在 `DumiSiteProvider` 里面才能正常使用。
:::

## API

| 属性名 | 描述 | 类型 | 默认值 |
Expand Down
3 changes: 2 additions & 1 deletion example/docs/components/Footer.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: Footer 页脚
apiHeader: true
atomId: Footer
description: 页面布局的页脚,基于 rc-footer 封装
group:
title: 布局
---
Expand Down
11 changes: 6 additions & 5 deletions example/docs/components/Hero.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
---
order: 1
title: Hero 头图
apiHeader: true
atomId: Hero
description: 风格化头图
group:
title: 风格化组件
order: 2
---

:::info
只有包裹在 `DumiSiteProvider` 里面才能正常使用。
:::

## Demo

<code src="./demos/Hero"></code>

:::info
只有包裹在 `DumiSiteProvider` 里面才能正常使用。
:::

## API

| 属性名 | 描述 | 类型 | 默认值 |
Expand Down
11 changes: 6 additions & 5 deletions example/docs/components/Highlighter.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
---
title: Highlighter 语法高亮器
apiHeader: true
atomId: Highlighter
description: 代码高亮组件,基于 Shiki 和 Prism 两种语法高亮引擎封装
group:
title: 功能组件
---

:::info
只有包裹在 `DumiSiteProvider` 里面才能正常使用。
:::

## Demo

## Shiki 语法高亮器
Expand All @@ -27,6 +24,10 @@ group:

<code src="./demos/Highlighter/Prism"></code>

:::info
只有包裹在 `DumiSiteProvider` 里面才能正常使用。
:::

## API

请查阅类型定义
3 changes: 2 additions & 1 deletion example/docs/components/Toc.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: Toc 目录
apiHeader: true
atomId: Toc
description: 页面目录组件
group:
title: 布局
---
Expand Down
29 changes: 4 additions & 25 deletions example/docs/components/demos/DumiSiteProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,19 @@
* iframe: 460
*/
import { useAntdTheme, useTheme } from 'antd-style';
import { DumiSiteProvider } from 'dumi-theme-antd-style';
import { DumiSiteProvider, Highlighter } from 'dumi-theme-antd-style';
import { omit } from 'lodash';
import { JSONTree } from 'react-json-tree';
import { Flexbox } from 'react-layout-kit';

const jsonTheme = {
scheme: 'monokai',
author: 'wimer hazenberg (http://www.monokai.nl)',
base00: '#272822',
base01: '#383830',
base02: '#49483e',
base03: '#75715e',
base04: '#a59f85',
base05: '#f8f8f2',
base06: '#f5f4f1',
base07: '#f9f8f5',
base08: '#f92672',
base09: '#fd971f',
base0A: '#f4bf75',
base0B: '#a6e22e',
base0C: '#a1efe4',
base0D: '#66d9ef',
base0E: '#ae81ff',
base0F: '#cc6633',
};

const App = () => {
const antdTheme = useAntdTheme();
const theme = useTheme();
const siteTheme = omit(theme, Object.keys(antdTheme));
const json = JSON.stringify(siteTheme, null, 2);
return (
<Flexbox padding={16}>
<Flexbox padding={16} gap={16}>
DumiSiteProvider 主题配置:
<JSONTree hideRoot data={siteTheme} theme={jsonTheme} />
<Highlighter language={'json'}>{json}</Highlighter>
</Flexbox>
);
};
Expand Down
3 changes: 2 additions & 1 deletion example/docs/components/index.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
---
order: 1
title: 概览
apiHeader: false
nav:
title: 组件
order: 3
order: 4
---

# 主题组件
Expand Down
26 changes: 11 additions & 15 deletions example/docs/config.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,26 +81,22 @@ export default defineConfig({

该配置底层使用本主题包的 Feature 组件,详见 [Features](/components/features) 文档。

### sidebarGroupModePath
## 高级配置

- 类型:`Array<string | RegExp>`
### apiHeader

- 类型:``
- 默认值:`[]`

```ts
export default {
export default defineConfig({
themeConfig: {
antdTheme: {
sidebarGroupModePath: [
// 匹配以 /config 开头的路由
'/config',
// 支持正则匹配
/\/guide\//,
],
apiHeader: {
// 组件库包名,可以从 package.json 中引入名称
pkg: 'dumi-theme-antd-style',
// 匹配路由,默认为 /api 或 /components
match: ['/api', '/components'],
},
},
};
});
```

左侧导航栏是否需要作为分组处理,参考 antd [menuitemgrouptype][antd-menuitemgrouptype-url]

[antd-menuitemgrouptype-url]: https://ant.design/components/menu-cn#menuitemgrouptype---
3 changes: 0 additions & 3 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,5 @@
"preview": "dumi preview",
"setup": "dumi setup",
"start": "dumi dev"
},
"devDependencies": {
"react-json-tree": "^0.18"
}
}

0 comments on commit f82c133

Please sign in to comment.