Skip to content

Commit

Permalink
docs: add beta site to deployment
Browse files Browse the repository at this point in the history
  • Loading branch information
PeachScript committed Sep 30, 2022
1 parent a612223 commit b3232a8
Show file tree
Hide file tree
Showing 14 changed files with 516 additions and 5 deletions.
46 changes: 46 additions & 0 deletions .dumi/theme/builtins/Hero/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.dumi-tmp-hero {
margin-bottom: 80px;
padding-top: 80px;
padding-bottom: 100px;
text-align: center;
border-bottom: 1px solid #eee;

h1 {
padding-left: 56px;
letter-spacing: 2px;
margin-bottom: 50px;
color: #333;
font-size: 80px;

small {
display: inline-block;
padding: 0 4px 0 6px;
color: #fff;
font-size: 14px;
line-height: 1.4;
font-weight: normal;
vertical-align: text-top;
background-color: rgb(255 91 26);
border-radius: 3px;
}
}

p {
color: #666;
text-align: center !important;

+ p {
color: rgb(255 91 26);
}
}

> a {
margin-top: 24px;
display: inline-block;
color: #1677ff;
text-decoration: none;
padding: 12px 48px !important;
border: 1px solid #1677ff;
border-radius: 30px;
}
}
17 changes: 17 additions & 0 deletions .dumi/theme/builtins/Hero/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// @ts-ignore
import { Link } from 'dumi';
import React, { type FC } from 'react';
import './index.less';

const Hero: FC = () => (
<div className="dumi-tmp-hero">
<h1>
dumi 2<small>Beta</small>
</h1>
<p>为组件研发而生的静态站点框架,现已进入 Beta 测试阶段,欢迎试用尝鲜</p>
<p>注:Beta 版尚不稳定,功能也可能会有调整,请谨慎用于正式项目</p>
<Link to="/guide">抢先体验</Link>
</div>
);

export default Hero;
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/node_modules
/examples/*/node_modules
/dist
/docs-dist
/theme-default
.DS_Store
.umi
Expand Down
14 changes: 11 additions & 3 deletions .prettierrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,18 @@ module.exports = {
pluginSearchDirs: false,
plugins: [
require.resolve('prettier-plugin-organize-imports'),
require.resolve('prettier-plugin-packagejson')
require.resolve('prettier-plugin-packagejson'),
],
printWidth: 80,
proseWrap: 'never',
singleQuote: true,
trailingComma: 'all'
}
trailingComma: 'all',
overrides: [
{
files: '*.md',
options: {
proseWrap: 'preserve',
},
},
],
};
7 changes: 7 additions & 0 deletions .umirc.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default {
mfsu: false,
outputPath: 'docs-dist',
themeConfig: {
name: 'dumi',
},
};
3 changes: 2 additions & 1 deletion bin/dumi.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
#!/usr/bin/env node

require('v8-compile-cache');
// disable for TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
// require('v8-compile-cache');
require('../dist/cli');
Empty file removed docs/.gitkeep
Empty file.
75 changes: 75 additions & 0 deletions docs/config/demo.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
# Demo 配置

Demo 的配置用于控制 demo 渲染。

对于代码块 demo 来说,仅有 FrontMatter 一种配置方式:

<pre>
```jsx
/**
* title: demo 标题
*/
import React from 'react';

export default () => <>Hello world!</>;
```
</pre>

对于外部 demo 来说,除了可以和代码块 demo 一样通过 FrontMatter 配置外,还可以通过 `code` 标签属性进行配置:

```md
<!-- 通过 code 标签配置 -->

<code src="./demos/a.tsx" description="demo 描述">demo 标题</code>
```

目前 dumi 支持以下 demo 配置项。

## title

- 类型:`string`
- 默认值:`undefined`

配置 demo 的标题,会展示在 demo 预览器里,后续也会用于搜索。

## description

- 类型:`string`
- 默认值:`undefined`

配置 demo 的描述,会展示在 demo 预览器里,后续也会用于搜索。

## iframe

- 类型:`boolean`
- 默认值:`false`

使用 iframe 形式渲染 demo,通常用于 Layout 等需要与页面隔离的 demo。

## compact

- 类型:`boolean`
- 默认值:`false`

以紧凑模式渲染 demo,开启时 demo 预览容器将不会有内边距。

## transform

- 类型:`boolean`
- 默认值:`false`

开启时 demo 预览容器将会添加 `transform` 的 CSS 值,以控制 `position: fixed;` 的元素相对于 demo 容器定位。

## background

- 类型:`string`
- 默认值:`undefined`

用于设置 demo 渲染容器的背景色。

## demoUrl

- 类型:`string`
- 默认值:`dumi 自动生成的 demo 独立访问链接`

用于指定该 demo 的访问链接,仅在 `iframe` 呈现模式下才会生效;通常在 dumi 默认渲染的 demo 无法满足展示需要时使用,例如需要呈现 ReactNative 的渲染结果。
105 changes: 105 additions & 0 deletions docs/config/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
---
nav: 配置项
---

# 框架配置

dumi 2 基于 Umi 4,除了自身特有的配置项以外,也支持 Umi 4 的配置项,两者均在 `.umirc.ts``config/config.ts` 中配置。

```ts
// .umirc.ts or config/config.ts
import { defineConfig } from 'dumi';

export default defineConfig({
...
});
```

## dumi 配置项

### resolve

用于配置 Markdown 解析相关的行为,包含如下子项。

#### docDirs

- 类型:`string[]`
- 默认值:`['docs']`

配置 Markdown 文档的解析目录,路径下的 Markdown 文档会根据目录结构解析为路由。

#### entityDirs

- 类型:`{ type: string; dir: string }[]`
- 默认值:`[{ type: 'components', dir: 'src' }]`

配置 Markdown 实体(例如组件、函数、工具等)的解析目录,该目录下 **第一层级** 的 Markdown 文档会被解析为该实体分类下的路由,嵌套层级将不会识别。比如在默认配置下,`src/Foo/index.md` 将被解析为 `components/foo` 的路由。

设计实体的概念是为了解决 dumi 1 中普通文档与源码目录下的组件文档混淆不清、分组困难的问题。

#### codeBlockMode

- 类型:`'active' | 'passive'`
- 默认值:`'active'`

### locales

- 类型:`{ id: string, name: string, base?: string }[]`
- 默认值:`[{ id: 'zh-CN', name: '中文' }]`

配置站点的多语言,各子项释义如下:

1. `id` 值会作为 dumi 识别 Markdown 文件后缀的依据,以及主题国际化文案的 `key`。例如,值为 `zh-CN` 时意味着 `index.zh-CN.md` 的文件会被归类到该语言下
2. 对于默认语言的 Markdown 文件而言,后缀是可选的。例如,在默认配置下,`index.zh-CN.md``index.md` 等价
3. `name` 值会作为页面渲染语言切换链接的文本值,当只有一种语言时,不会展示切换链接
4. `base` 值指定该雨燕的基础路由,对默认语言来说默认值为 `/`,对非默认雨语言来说默认值为 `/${id}`,仅在希望 `id``base` 不一致时才需要配置

### extraRemarkPlugins

- 类型:`(string | function | [string, object] | [function, object])[]`
- 默认值:`[]`

配置额外的 [remark](https://remark.js.org/) 插件,用于处理 Markdown 语法树的编译。数组项的值可以是:

1. 插件名称或路径
2. 插件函数
3. 传递数组时,第一项为插件名称/路径/函数,第二项为插件配置

### extraRehypePlugins

- 类型:`(string | function | [string, object] | [function, object])[]`
- 默认值:`[]`

配置额外的 [rehype](https://github.com/rehypejs/rehype) 插件,用于处理 HTML 语法树的编译。数组项的值可以是:

1. 插件名称或路径
2. 插件函数
3. 传递数组时,第一项为插件名称/路径/函数,第二项为插件配置

### themeConfig

配置传递给主题的配置项,具体包含哪些配置取决于主题实现。默认主题目前支持如下配置项:

```ts
{
themeConfig: {
name: '站点名称(可选)';
logo: '站点 LOGO 地址';
nav: [{ title: '导航标题', link: '导航路由' }]; // 可选,未配置时走约定式导航
sidebar: { // 可选,未配置时走约定式菜单
'/guide': [
{
title: '侧边菜单分组名称(可选)',
children: [
{ title: '菜单项标题', link: '菜单项路由' }
]
}
]
};
}
}
```

## Umi 配置项

参考 Umi 4 的文档:https://umijs.org/docs/api/config
Loading

0 comments on commit b3232a8

Please sign in to comment.