docs: add homepage link (#38486)

* fix: site issue

* fix: homepage link
This commit is contained in:
MadCcc 2022-11-10 19:46:44 +08:00 committed by GitHub
parent 382b2cacf7
commit b54c7db3e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 51 deletions

View File

@ -1,8 +1,10 @@
import * as React from 'react';
import { Space, Button, Typography, theme } from 'antd';
import { Button, Space, Typography } from 'antd';
import useLocale from '../../../hooks/useLocale';
import useSiteToken from '../../../hooks/useSiteToken';
import { GroupMask } from './Group';
import { Link, useLocation } from 'dumi';
import * as utils from '../../../theme/utils';
const locales = {
cn: {
@ -23,9 +25,12 @@ export interface BannerProps {
}
export default function Banner({ children }: BannerProps) {
const [locale] = useLocale(locales);
const [locale, lang] = useLocale(locales);
const { pathname, search } = useLocation();
const { token } = useSiteToken();
const isZhCN = utils.isZhCN(pathname);
return (
<>
{/* Banner Placeholder Motion */}
@ -121,10 +126,14 @@ export default function Banner({ children }: BannerProps) {
</Typography.Paragraph>
<Space size="middle" style={{ marginBottom: token.marginFar }}>
<Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}>
<Button size="large" type="primary">
{locale.start}
</Button>
</Link>
<Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
<Button size="large">{locale.designLanguage}</Button>
</Link>
</Space>
{children}

View File

@ -3,21 +3,8 @@ import { Col, Row, Typography } from 'antd';
import React from 'react';
import { css } from '@emotion/react';
import useLocale from '../../../hooks/useLocale';
const MAINLY_LIST = [
{
img: 'https://gw.alipayobjects.com/zos/bmw-prod/36a89a46-4224-46e2-b838-00817f5eb364.svg',
key: 'values',
},
{
img: 'https://gw.alipayobjects.com/zos/bmw-prod/8379430b-e328-428e-8a67-666d1dd47f7d.svg',
key: 'guide',
},
{
img: 'https://gw.alipayobjects.com/zos/bmw-prod/1c363c0b-17c6-4b00-881a-bc774df1ebeb.svg',
key: 'lib',
},
];
import { Link, useLocation } from 'dumi';
import * as utils from '../../../theme/utils';
const SECONDARY_LIST = [
{
@ -109,15 +96,36 @@ export default function DesignFramework() {
const [locale] = useLocale(locales);
const { token } = useSiteToken();
const style = useStyle();
const { pathname, search } = useLocation();
const isZhCN = utils.isZhCN(pathname);
const MAINLY_LIST = [
{
img: 'https://gw.alipayobjects.com/zos/bmw-prod/36a89a46-4224-46e2-b838-00817f5eb364.svg',
key: 'values',
path: utils.getLocalizedPathname('/docs/spec/values/', isZhCN, search),
},
{
img: 'https://gw.alipayobjects.com/zos/bmw-prod/8379430b-e328-428e-8a67-666d1dd47f7d.svg',
key: 'guide',
path: utils.getLocalizedPathname('/docs/spec/colors/', isZhCN, search),
},
{
img: 'https://gw.alipayobjects.com/zos/bmw-prod/1c363c0b-17c6-4b00-881a-bc774df1ebeb.svg',
key: 'lib',
path: utils.getLocalizedPathname('/docs/react/introduce/', isZhCN, search),
},
];
return (
<Row gutter={[token.marginXL, token.marginXL]}>
{MAINLY_LIST.map(({ img, key }, index) => {
{MAINLY_LIST.map(({ img, key, path }, index) => {
const title = locale[key as keyof typeof locale];
const desc = locale[`${key}Desc` as keyof typeof locale];
return (
<Col key={index} span={8}>
<Link to={path}>
<div css={style.card}>
<img alt={title} src={img} />
@ -131,6 +139,7 @@ export default function DesignFramework() {
{desc}
</Typography.Paragraph>
</div>
</Link>
</Col>
);
})}

View File

@ -23,24 +23,24 @@ ReactDOM.render(<Alert message="在 4.24.0 版本后,我们提供了 <Steps it
## 代码演示
<code src="./demo/deprecated.tsx">Basic (deprecated syntactic sugar)</code>
<code src="./demo/simple.tsx">Basic</code>
<code src="./demo/small-size.tsx">Mini version</code>
<code src="./demo/icon.tsx">With icon</code>
<code src="./demo/step-next.tsx">Switch Step</code>
<code src="./demo/vertical.tsx">Vertical</code>
<code src="./demo/vertical-small.tsx">Vertical mini version</code>
<code src="./demo/error.tsx">Error status</code>
<code src="./demo/progress-dot.tsx">Dot Style</code>
<code src="./demo/customized-progress-dot.tsx">Customized Dot Style</code>
<code src="./demo/progress-dot-small.tsx" debug>Dot Style Size Small</code>
<code src="./demo/clickable.tsx">Clickable</code>
<code src="./demo/nav.tsx">Navigation Steps</code>
<code src="./demo/progress.tsx">Steps with progress</code>
<code src="./demo/label-placement.tsx">Label Placement</code>
<code src="./demo/deprecated.tsx">基本用法 (废弃的语法糖)</code>
<code src="./demo/simple.tsx">基本用法</code>
<code src="./demo/small-size.tsx">迷你版</code>
<code src="./demo/icon.tsx">带图标的步骤条</code>
<code src="./demo/step-next.tsx">步骤切换</code>
<code src="./demo/vertical.tsx">竖直方向的步骤条</code>
<code src="./demo/vertical-small.tsx">竖直方向的小型步骤条</code>
<code src="./demo/error.tsx">步骤运行错误</code>
<code src="./demo/progress-dot.tsx">点状步骤条</code>
<code src="./demo/customized-progress-dot.tsx">自定义点状步骤条</code>
<code src="./demo/progress-dot-small.tsx" debug>迷你版点状步骤条</code>
<code src="./demo/clickable.tsx">可点击</code>
<code src="./demo/nav.tsx">导航步骤</code>
<code src="./demo/progress.tsx">带有进度的步骤</code>
<code src="./demo/label-placement.tsx">标签放置位置</code>
<code src="./demo/progress-debug.tsx" debug>Progress Debug</code>
<code src="./demo/steps-in-steps.tsx" debug>Steps inside Steps</code>
<code src="./demo/inline.tsx">Inline Steps</code>
<code src="./demo/steps-in-steps.tsx" debug>Steps 嵌套 Steps</code>
<code src="./demo/inline.tsx">内联步骤</code>
```jsx
// >=4.24.0 可用,推荐的写法 ✅