Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 3e13f59

Browse files
mydearxymmydearxym
committed
add i18n to theme & feature page
1 parent dd1be15 commit 3e13f59

File tree

10 files changed

+145
-52
lines changed

10 files changed

+145
-52
lines changed

‎components/BaseStyled/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const Ul = styled.ul`
2424
`
2525
export const Li = styled.li`
2626
padding-left: 16px;
27+
margin-bottom: 8px;
2728
&:before {
2829
content: '•'; /* Insert content that looks like bullets */
2930
padding-right: 8px;
@@ -32,3 +33,10 @@ export const Li = styled.li`
3233
`
3334

3435
export const Mark = styled.span`backgroun: lightgrey;`
36+
37+
export const Margin = styled.div`
38+
margin-top: ${props => (props.top ? props.top : 0)};
39+
margin-bottom: ${props => (props.bottom ? props.bottom : 0)};
40+
margin-left: ${props => (props.left ? props.left : 0)};
41+
margin-right: ${props => (props.right ? props.right : 0)};
42+
`

‎containers/Body/Feature.js‎

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,64 @@
11
import React from 'react'
22
// import styled from 'styled-components'
33

4+
import { FormattedMessage as I18n } from 'react-intl'
5+
import lang from './lang'
6+
47
import A from '../../components/A'
58
import {
69
Center,
710
HorizontalCenter,
811
Title,
912
Ul,
1013
Li,
14+
Margin,
1115
} from '../../components/BaseStyled'
1216

1317
const Feature = () => {
1418
return (
1519
<Center>
1620
<HorizontalCenter>
17-
<Title>主要特性</Title>
21+
<Title>
22+
<I18n {...lang.featureTitle} />
23+
</Title>
1824
</HorizontalCenter>
1925
<br />
20-
<Ul>
21-
<Li>
22-
server-side-render out of the box, power by{' '}
23-
<A href="https://zeit.co/blog/next3">next.js</A>
24-
</Li>
25-
<Li>
26-
elegant front-end ORM layer powered by{' '}
27-
<A href="https://github.com/mobxjs/mobx">mobx</A> &&{' '}
28-
<A href="https://github.com/mobxjs/mobx-state-tree">
29-
mobx-state-tree
30-
</A>
31-
</Li>
32-
<Li>awesome state manage use the full power of Ramada.js && Rx.js</Li>
33-
<Li>
34-
<A href="https://www.styled-components.com">styled-component</A> as
35-
the css solution
36-
</Li>
37-
<Li>multi language support</Li>
38-
<Li>well tested by use jest</Li>
39-
<Li>handy generators for quick development</Li>
40-
<Li>enjoyable dev experience by using modern web tools</Li>
41-
</Ul>
26+
<Margin left="8vw">
27+
<Ul>
28+
<Li>
29+
<I18n {...lang.feature1} />{' '}
30+
<A href="https://zeit.co/blog/next3">next.js</A>
31+
</Li>
32+
<Li>
33+
<I18n {...lang.feature2} />{' '}
34+
<A href="https://github.com/mobxjs/mobx">mobx</A> &&{' '}
35+
<A href="https://github.com/mobxjs/mobx-state-tree">
36+
mobx-state-tree
37+
</A>
38+
</Li>
39+
<Li>
40+
<I18n {...lang.feature3} />{' '}
41+
<A href="https://github.com/ramda/ramda">Ramada.js</A> &&{' '}
42+
<A href="https://github.com/ReactiveX/rxjs">Rx.js</A>
43+
</Li>
44+
<Li>
45+
<A href="https://www.styled-components.com">styled-component</A>
46+
<I18n {...lang.feature4} />
47+
</Li>
48+
<Li>
49+
<I18n {...lang.feature5} />
50+
</Li>
51+
<Li>
52+
<I18n {...lang.feature6} />
53+
</Li>
54+
<Li>
55+
<I18n {...lang.feature8} />
56+
</Li>
57+
<Li>
58+
<I18n {...lang.feature9} />
59+
</Li>
60+
</Ul>
61+
</Margin>
4262
</Center>
4363
)
4464
}

‎containers/Body/Theme.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import styled from 'styled-components'
3-
import TimeAgo from 'timeago-react'
3+
// import TimeAgo from 'timeago-react'
44

55
import { FormattedMessage as I18n } from 'react-intl'
66
import lang from './lang'
@@ -27,18 +27,14 @@ const Theme = ({ curTheme }) => {
2727
<Title>
2828
<I18n {...lang.themeTitle} />
2929
</Title>
30-
<TimeAgo datetime={'2016-08-08 08:08:08'} locale="en" />
3130
</HorizontalCenter>
3231
<br />
3332
<Desc>
34-
得益于 <A href="https://github.com/MicheleBertoli/css-in-js">
35-
css-in-js
36-
</A>{' '}
37-
的先进理念以及{' '}
38-
<A href="https://www.styled-components.com/">styled-components</A>{' '}
39-
的优雅实现, 主题可在几乎不增加项目复杂度的情况下按需求轻松扩展。 内置四套主题如下：
33+
<I18n {...lang.themeDesc} />
34+
<A href="https://www.styled-components.com/">styled-components</A>
4035
</Desc>
4136
<br />
37+
<br />
4238
<ThemeSelectorWraper>
4339
{themeNames.map(name => (
4440
<ThemeSelector

‎containers/Body/lang.js‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,60 @@ export default defineMessages({
1010
id: 'containers.Body.home.desc',
1111
defaultMessage: '可能是你能找到的最好的 react 项目模板',
1212
},
13+
featureTitle: {
14+
id: 'containers.Body.feature.title',
15+
defaultMessage: '主要特性',
16+
},
17+
18+
feature1: {
19+
id: 'containers.Body.feature.1',
20+
defaultMessage: '内置服务端渲染支持,详见',
21+
},
22+
23+
feature2: {
24+
id: 'containers.Body.feature.2',
25+
defaultMessage: '状态管理以及前端 ORM 层,详见',
26+
},
27+
28+
feature3: {
29+
id: 'containers.Body.feature.3',
30+
defaultMessage: '不使用局部状态， 逻辑统一由逻辑层处理，详见',
31+
},
32+
33+
feature4: {
34+
id: 'containers.Body.feature.4',
35+
defaultMessage: '作为 css 的解决方案',
36+
},
37+
38+
feature5: {
39+
id: 'containers.Body.feature.5',
40+
defaultMessage: '多主题支持，实时切换无需刷新页面',
41+
},
42+
43+
feature6: {
44+
id: 'containers.Body.feature.6',
45+
defaultMessage: '多语言支持，轻松扩展',
46+
},
47+
48+
feature8: {
49+
id: 'containers.Body.feature.8',
50+
defaultMessage: '自带模板代码生成器，方便快速开发',
51+
},
52+
53+
feature9: {
54+
id: 'containers.Body.feature.9',
55+
defaultMessage: '更多特性...',
56+
},
57+
1358
themeTitle: {
1459
id: 'containers.Body.theme.title',
1560
defaultMessage: '主题',
1661
},
17-
themeBtnDefault: {
18-
id: 'containers.Body.theme.btnDefault',
19-
defaultMessage: '默认',
20-
},
21-
themeBtnCyan: {
22-
id: 'containers.Body.theme.btnCyan',
23-
defaultMessage: '青色',
62+
63+
themeDesc: {
64+
id: 'containers.Body.theme.desc',
65+
defaultMessage:
66+
'采用 css-in-js 的方案，避免传统 css 的局限性，可在不增加项目复杂度的情况下轻松扩展，并支持无刷新实时切换, 详见： ',
2467
},
2568
i18nTitle: {
2669
id: 'containers.Body.i18n.title',

‎lang/en.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
{
22
"containers.Body.home.desc": "maybe the best react boilerplate you can find",
3+
"containers.Body.feature.title": "Features",
4+
"containers.Body.feature.1": "Server-Side-Render out of the box, power by ",
5+
"containers.Body.feature.2": "State management and front-end ORM layer powered by ",
6+
"containers.Body.feature.3": "No local state, Logic process layer build with",
7+
"containers.Body.feature.4": "as the css solution",
8+
"containers.Body.feature.5": "Multi Themes switch on the fly ",
9+
"containers.Body.feature.6": "Multi language support, scale easliy ",
10+
"containers.Body.feature.8": "Handy generators for quick development",
11+
"containers.Body.feature.9": "and lots more ... ",
312
"containers.Body.theme.title": "Theme",
13+
"containers.Body.theme.desc": "elegent css-in-js solution, realtime theme switch without refresh the page, powerby：",
414
"containers.Body.theme.btnDefault": "Default",
515
"containers.Body.theme.btnCyan": "Cyan",
616
"containers.Body.i18n.title": "international",

‎lang/zh.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
{
22
"containers.Body.home.desc": "可能是你能找到的最好的 react 项目模板",
3+
"containers.Body.feature.title": "主要特性",
4+
"containers.Body.feature.1": "内置服务端渲染支持,详见",
5+
"containers.Body.feature.2": "状态管理以及前端 ORM 层,详见",
6+
"containers.Body.feature.3": "不使用局部状态， 逻辑统一由逻辑层处理，详见",
7+
"containers.Body.feature.4": "作为 css 的解决方案",
8+
"containers.Body.feature.5": "多主题支持，实时切换无需刷新页面",
9+
"containers.Body.feature.6": "多语言支持，轻松扩展",
10+
"containers.Body.feature.8": "自带模板代码生成器，方便快速开发",
11+
"containers.Body.feature.9": "更多特性...",
312
"containers.Body.theme.title": "主题",
4-
"containers.Body.theme.btnDefault": "默认",
5-
"containers.Body.theme.btnCyan": "青色",
13+
"containers.Body.theme.desc": "采用 css-in-js 的方案，避免传统 css 的局限性，可在不增加项目复杂度的情况下轻松扩展，并支持无刷新实时切换, 详见：",
614
"containers.Body.i18n.title": "国际化",
715
"containers.Body.i18n.en": "English",
816
"containers.Body.i18n.zh": "中文",

‎static/en.json‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎static/locales/en.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
{
22
"containers.Body.home.desc": "maybe the best react boilerplate you can find",
3+
"containers.Body.feature.title": "Features",
4+
"containers.Body.feature.1": "Server-Side-Render out of the box, power by ",
5+
"containers.Body.feature.2": "State management and front-end ORM layer powered by ",
6+
"containers.Body.feature.3": "No local state, Logic process layer build with",
7+
"containers.Body.feature.4": "as the css solution",
8+
"containers.Body.feature.5": "Multi Themes switch on the fly ",
9+
"containers.Body.feature.6": "Multi language support, scale easliy ",
10+
"containers.Body.feature.8": "Handy generators for quick development",
11+
"containers.Body.feature.9": "and lots more ... ",
312
"containers.Body.theme.title": "Theme",
413
"containers.Body.theme.btnDefault": "Default",
514
"containers.Body.theme.btnCyan": "Cyan",

‎static/locales/zh.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
{
22
"containers.Body.home.desc": "可能是你能找到的最好的 react 项目模板",
3+
"containers.Body.feature.title": "主要特性",
4+
"containers.Body.feature.1": "内置服务端渲染支持,详见",
5+
"containers.Body.feature.2": "状态管理以及前端 ORM 层,详见",
6+
"containers.Body.feature.3": "不使用局部状态， 逻辑统一由逻辑层处理，详见",
7+
"containers.Body.feature.4": "作为 css 的解决方案",
8+
"containers.Body.feature.5": "多主题支持，实时切换无需刷新页面",
9+
"containers.Body.feature.6": "多语言支持，轻松扩展",
10+
"containers.Body.feature.8": "自带模板代码生成器，方便快速开发",
11+
"containers.Body.feature.9": "更多特性...",
312
"containers.Body.theme.title": "主题",
4-
"containers.Body.theme.btnDefault": "默认",
5-
"containers.Body.theme.btnCyan": "青色",
13+
"containers.Body.theme.desc": "采用 css-in-js 的方案，避免传统 css 的局限性，可在不增加项目复杂度的情况下轻松扩展，并支持无刷新实时切换, 详见：",
614
"containers.Body.i18n.title": "国际化",
715
"containers.Body.i18n.en": "English",
816
"containers.Body.i18n.zh": "中文",

‎utils/themes/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import CyanGreen from './CyanGreen'
2525
export const globalThemes = {
2626
default: { ...SolarizedDark },
2727
cyan: { ...Cyan },
28-
solarizedDark: { ...SolarizedDark },
28+
// solarizedDark: { ...SolarizedDark },
2929
muzli: { ...Muzli },
3030
yellow: { ...Yellow },
3131
// purpleDark: {...PurpleDark},

0 commit comments

Comments
 (0)