Skip to content

Commit 017bdef

Browse files
jaywcjlovejaywcjlove
committed
website: add footer & update home page.
1 parent d7bac10 commit 017bdef

File tree

13 files changed

+350
-48
lines changed

13 files changed

+350
-48
lines changed

‎website/src/component/Container/index.module.less‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,3 @@
33
display: flex;
44
padding-top: 60px;
55
}
6-
7-
.content {
8-
padding: 30px 26px 60px 26px;
9-
}

‎website/src/component/Container/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ import SubMenus, { MenuData } from '../SubMenus';
44
import styles from './index.module.less';
55

66
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
7-
data?: MenuData[]
7+
data?: MenuData[];
8+
path?: string;
89
}
910

1011
export default function Container(props: ContainerProps) {
11-
const { data, children } = props;
12+
const { data, children, path } = props;
13+
console.log(props, path, path === '/home')
1214
return (
1315
<Fragment>
14-
<Header />
16+
<Header showBorder={path !== '/home'}/>
1517
<div className={styles.warpper}>
1618
{data && data.length > 0 && (
1719
<SubMenus data={data} />

‎website/src/component/Contributors/index.module.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
.warpper {
3-
padding: 18px 0;
3+
padding: 42px 0 0 0;
44
display: flex;
55
}
66

‎website/src/component/Contributors/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function Contributors(props: ContributorsProps) {
1919
<path d="M404.945455 768l-102.4-97.745455L781.963636 190.836364c27.927273-27.927273 69.818182-27.927273 97.745455 0s27.927273 69.818182 0 97.745454" />
2020
<path d="M339.781818 833.163636l-116.363636 18.618182 18.618182-116.363636 32.581818-32.581818L372.363636 800.581818" />
2121
</svg>
22-
在 GitHub 上编译此页
22+
在 GitHub 上编辑此页
2323
</a>
2424
<AvatarList path={path}/>
2525
</div>

‎website/src/component/Footer/index.module.less‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.warpper {
2+
padding-bottom: 60px;
3+
background: white;
4+
border-top: 1px solid #e1e4e8;
5+
}
6+
7+
.inner {
8+
font-size: 16px;
9+
max-width: 1248px;
10+
margin: 0 auto;
11+
padding: 64px 32px 80px;
12+
label {
13+
padding: 8px 0;
14+
display: flex;
15+
font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
16+
font-weight: 500;
17+
color: var(--expo-theme-text-default);
18+
}
19+
ul li {
20+
padding: 8px 0;
21+
a {
22+
color: #596068;
23+
font-weight: 400;
24+
font-size: 16px;
25+
line-height: 150%;
26+
letter-spacing: -0.011em;
27+
&:hover {
28+
transition: opacity 200ms;
29+
opacity: 0.8;
30+
}
31+
}
32+
}
33+
section {
34+
p {
35+
font-weight: 400;
36+
font-size: 14px;
37+
line-height: 150%;
38+
letter-spacing: -0.006em;
39+
margin-top: 16px;
40+
color: #596068;
41+
transition: 200ms color ease;
42+
}
43+
}
44+
}
45+
46+
.icons {
47+
margin: 48px 0 0;
48+
display: flex;
49+
align-items: center;
50+
line-height: 14px;
51+
font-weight: bold;
52+
a {
53+
display: flex;
54+
align-items: center;
55+
color: #596068;
56+
margin-right: 10px;
57+
}
58+
svg {
59+
color: #596068;
60+
}
61+
}
62+
.icons + .icons {
63+
margin-top: 10px;
64+
}
65+
66+
.nav {
67+
display: grid;
68+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
69+
row-gap: 32px;
70+
}
71+
72+
.badges {
73+
padding-top: 26px;
74+
text-align: center;
75+
a {
76+
display: inline-block;
77+
}
78+
a {
79+
margin: 0 5px;
80+
}
81+
}

‎website/src/component/Footer/index.tsx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import styles from './index.module.less';
2+
import logo from '../../assets/logo-dark.svg';
3+
4+
const data = [
5+
{
6+
title: 'Product',
7+
childrens: [
8+
{
9+
href : 'https://github.com/uiwjs/react-native-uiw',
10+
title: 'React Native UIW on GitHub'
11+
},
12+
{
13+
href : 'https://github.com/uiwjs/react-native-template',
14+
title: 'React Native Template'
15+
},
16+
{
17+
href : 'https://github.com/uiwjs/uiw',
18+
title: 'UIW on GitHub'
19+
},
20+
{
21+
href : 'https://gitee.com/uiw/react-native-uiw',
22+
title: '国内镜像站点 🇨🇳'
23+
},
24+
]
25+
},
26+
{
27+
title: '相关资源',
28+
childrens: [
29+
{
30+
href : 'https://uiwjs.github.io/icons',
31+
title: 'Preview Icons'
32+
},
33+
{
34+
href : 'https://github.com/uiwjs/react-native-uiw',
35+
title: 'React Native Upgrade Helper'
36+
},
37+
{
38+
href : 'https://github.com/jondot/awesome-react-native',
39+
title: 'Awesome React Native'
40+
},
41+
]
42+
},
43+
{
44+
title: '相关组件',
45+
childrens: [
46+
{
47+
href : 'https://github.com/react-navigation/react-navigation',
48+
title: 'React Navigation'
49+
},
50+
{
51+
href : 'https://github.com/rematch/rematch',
52+
title: 'Rematch.js'
53+
},
54+
]
55+
},
56+
{
57+
title: '其它资料',
58+
childrens: [
59+
{
60+
href : 'https://github.com/facebook/react',
61+
title: 'React'
62+
},
63+
{
64+
href : 'https://github.com/facebook/react-native',
65+
title: 'React Native'
66+
},
67+
{
68+
href : 'https://github.com/jaywcjlove/mocker-api',
69+
title: 'Mocker API'
70+
},
71+
]
72+
}
73+
];
74+
75+
type FooterProps = {
76+
placement?: 'center' | 'left';
77+
}
78+
79+
export default function Footer(props: FooterProps) {
80+
const { placement } = props;
81+
return (
82+
<footer className={styles.warpper}>
83+
<div className={styles.inner} style={{ ...(placement === 'left' ? { margin: 'inherit' } : {})}}>
84+
<div className={styles.nav}>
85+
{data.map((item, idx) => {
86+
return (
87+
<nav key={idx}>
88+
<div>
89+
<label>{item.title}</label>
90+
<ul>
91+
{item.childrens.map((child, _idx) => {
92+
return (
93+
<li key={_idx}>
94+
<a href={child.href} target="__blank">{child.title}</a>
95+
</li>
96+
)
97+
})}
98+
</ul>
99+
</div>
100+
</nav>
101+
);
102+
})}
103+
</div>
104+
<section>
105+
<div className={styles.icons}>
106+
<a href="https://uiwjs.github.io/react-native-uiw/" target="__blank">
107+
<img src={logo} alt="uiw logo" style={{ height: 27 }}/>
108+
</a>
109+
<a href="https://github.com/uiwjs/react-native-uiw" target="__blank">
110+
<svg width="20px" height="20px" viewBox="0 0 20 20" role="img">
111+
<path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z" />
112+
</svg>
113+
</a>
114+
<a href="https://gitee.com/uiw/react-native-uiw" target="__blank">
115+
<svg viewBox="0 0 1024 1024" width="20" height="20">
116+
<path d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z" fill="#C71D23" />
117+
</svg>
118+
</a>
119+
</div>
120+
<div className={styles.icons}>
121+
<a href="https://github.com/uiwjs/react-native-uiw/issues" target="__blank">
122+
<img src="https://img.shields.io/github/issues/uiwjs/react-native-uiw.svg" alt="Github Issues" />
123+
</a>
124+
<a href="https://github.com/uiwjs/react-native-uiw/network" target="__blank">
125+
<img src="https://img.shields.io/github/forks/uiwjs/react-native-uiw.svg" alt="Github Forks" />
126+
</a>
127+
<a href="https://github.com/uiwjs/react-native-uiw/stargazers" target="__blank">
128+
<img src="https://img.shields.io/github/stars/uiwjs/react-native-uiw.svg" alt="Github Stars" />
129+
</a>
130+
<a href="https://github.com/uiwjs/react-native-uiw/releases" target="__blank">
131+
<img src="https://img.shields.io/github/release/uiwjs/react-native-uiw.svg" alt="Github Release" />
132+
</a>
133+
<a href="https://github.com/uiwjs/react-native-uiw" target="__blank">
134+
<img src="https://img.shields.io/dub/l/vibe-d.svg" alt="License MIT" />
135+
</a>
136+
<a href="https://www.npmjs.com/package/@uiw/react-native" target="__blank">
137+
<img src="https://img.shields.io/npm/v/@uiw/react-native.svg" alt="npm" />
138+
</a>
139+
</div>
140+
<p>Copyright © 2021 uiwjs. All rights reserved.</p>
141+
</section>
142+
</div>
143+
</footer>
144+
);
145+
}

‎website/src/component/Header/index.module.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
a {
2222
border-bottom: #fff solid 2px;
2323
transition: all .3s;
24+
color: #333;
2425
}
2526
a + a {
2627
margin-left: 16px;

‎website/src/component/Header/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@ import pkg from '@uiw/react-native/package.json';
44
import styles from './index.module.less';
55
import logo from '../../assets/logo-dark.svg';
66

7-
export default function Header() {
7+
type HeaderProps = {
8+
showBorder?: boolean;
9+
}
10+
11+
export default function Header(props: HeaderProps) {
12+
const { showBorder = true } = props;
813
// @ts-ignore
914
// eslint-disable-next-line
1015
const version = pkg.version || '2.0.0';
1116
return (
12-
<header className={styles.warpper}>
17+
<header className={styles.warpper} style={{ ...(showBorder ? {} : { borderBottom: 0, boxShadow: 'initial' })}}>
1318
<div className={styles.inner}>
1419
<Link to="/" className={styles.logo}>
1520
<img src={logo} alt="uiw logo" />

‎website/src/component/Markdown/index.module.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.warpper {
2+
padding: 36px 33px 30px 33px;
3+
}

‎website/src/component/Markdown/index.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, { useState } from 'react';
1+
import React, { Fragment, useState } from 'react';
22
import MarkdownPreview from '@uiw/react-markdown-preview';
33
// @ts-ignore
44
import rehypeAttr from 'rehype-attr';
55
import { useEffect } from 'react';
66
import Contributors from '../Contributors';
7+
import Footer from '../Footer';
78
import styles from './index.module.less';
89

910
export interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -37,35 +38,38 @@ export default function Markdown(props: MarkdownProps) {
3738
);
3839
}
3940
return (
40-
<div className={styles.warpper} style={style}>
41-
<MarkdownPreview
42-
source={mdStr}
43-
// className={styles.markdown}
44-
rehypePlugins={[[rehypeAttr as any, { properties: 'attr' }]]}
45-
components={{
46-
/**
47-
* bgWhite 设置代码预览背景白色，否则为格子背景。
48-
* noCode 不显示代码编辑器。
49-
* noPreview 不显示代码预览效果。
50-
* noScroll 预览区域不显示滚动条。
51-
* codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。
52-
*/
53-
code: ({
54-
inline,
55-
node,
56-
noPreview,
57-
noScroll,
58-
bgWhite,
59-
noCode,
60-
codePen,
61-
codeSandbox,
62-
...props
63-
}) => {
64-
return <code {...props} />;
65-
},
66-
}}
67-
/>
68-
<Contributors path={path}/>
69-
</div>
41+
<Fragment>
42+
<div className={styles.warpper} style={style}>
43+
<MarkdownPreview
44+
source={mdStr}
45+
// className={styles.markdown}
46+
rehypePlugins={[[rehypeAttr as any, { properties: 'attr' }]]}
47+
components={{
48+
/**
49+
* bgWhite 设置代码预览背景白色，否则为格子背景。
50+
* noCode 不显示代码编辑器。
51+
* noPreview 不显示代码预览效果。
52+
* noScroll 预览区域不显示滚动条。
53+
* codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。
54+
*/
55+
code: ({
56+
inline,
57+
node,
58+
noPreview,
59+
noScroll,
60+
bgWhite,
61+
noCode,
62+
codePen,
63+
codeSandbox,
64+
...props
65+
}) => {
66+
return <code {...props} />;
67+
},
68+
}}
69+
/>
70+
<Contributors path={path}/>
71+
</div>
72+
<Footer placement="left" />
73+
</Fragment>
7074
)
7175
}

0 commit comments

Comments
 (0)