Skip to content
This repository was archived by the owner on Jul 6, 2025. It is now read-only.

Commit e809ba2

Browse files
ijeije
committed
Add i18n example
1 parent b8786a6 commit e809ba2

File tree

10 files changed

+297
-0
lines changed

10 files changed

+297
-0
lines changed

‎examples/hello-world-i18n/aleph.config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { Config } from 'aleph/types'
2+
3+
export default (): Config => ({
4+
i18n: {
5+
defaultLocale: 'en',
6+
locales: ['en', 'zh']
7+
}
8+
})

‎examples/hello-world-i18n/api/counter/[action].ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { APIHandler } from 'aleph/types.d.ts'
2+
3+
export const handler: APIHandler = ({ router, response }) => {
4+
let count = parseInt(localStorage.getItem('count') || '0')
5+
6+
switch (router.params['action']) {
7+
case 'increase':
8+
count++
9+
localStorage.setItem('count', count.toString())
10+
response.json({ count })
11+
break
12+
case 'decrease':
13+
count--
14+
localStorage.setItem('count', count.toString())
15+
response.json({ count })
16+
break
17+
default:
18+
response.status = 400
19+
response.json({
20+
error: 'UnknownAction',
21+
status: 400,
22+
message: `undefined action '${router.params['action']}'`
23+
})
24+
break
25+
}
26+
}

‎examples/hello-world-i18n/api/counter/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { APIHandler } from 'aleph/types.d.ts'
2+
3+
export const handler: APIHandler = ({ response }) => {
4+
const count = parseInt(localStorage.getItem('count') || '0')
5+
response.json({ count })
6+
}

‎examples/hello-world-i18n/app.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { FC } from 'react'
2+
3+
export default function App({ Page, pageProps }: { Page: FC, pageProps: any }) {
4+
return (
5+
<main>
6+
<head>
7+
<meta name="viewport" content="width=device-width" />
8+
</head>
9+
<Page {...pageProps} />
10+
</main>
11+
)
12+
}

‎examples/hello-world-i18n/components/logo.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default function Logo({ size = 75 }: { size?: number }) {
4+
return (
5+
<img src="/logo.svg" height={size} title="Aleph.js" />
6+
)
7+
}

‎examples/hello-world-i18n/lib/hooks.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useCallback, useEffect, useState } from 'react'
2+
import { useRouter } from 'aleph/react'
3+
4+
export function useLocaleText(...texts: string[]): string {
5+
const { locale, locales } = useRouter()
6+
return texts[locales.indexOf(locale)]
7+
}
8+
9+
export function useCounter(): [number, boolean, () => void, () => void] {
10+
const [count, setCount] = useState(0)
11+
const [isSyncing, setIsSyncing] = useState(true)
12+
const increase = useCallback(() => {
13+
setCount(n => n + 1)
14+
fetch('/api/counter/increase').catch(e => console.error(e))
15+
}, [])
16+
const decrease = useCallback(() => {
17+
setCount(n => n - 1)
18+
fetch('/api/counter/decrease').catch(e => console.error(e))
19+
}, [])
20+
21+
useEffect(() => {
22+
fetch('/api/counter').then(resp => resp.json().catch(() => ({})))
23+
.then(({ count }) => {
24+
if (typeof count === 'number' && !Number.isNaN(count)) {
25+
setCount(count)
26+
}
27+
})
28+
.catch(e => console.error(e))
29+
.finally(() => {
30+
setIsSyncing(false)
31+
})
32+
}, [])
33+
34+
return [count, isSyncing, increase, decrease]
35+
}

‎examples/hello-world-i18n/pages/index.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { useDeno } from 'aleph/react'
2+
import React from 'react'
3+
import Logo from '../components/logo.tsx'
4+
import { useCounter, useLocaleText } from '../lib/hooks.ts'
5+
6+
export default function Home() {
7+
const welcomeText = useLocaleText('Welcome to use', '欢迎使用')
8+
const websiteText = useLocaleText('Website', '网站')
9+
const getStartedText = useLocaleText('Get Started', '快速开始')
10+
const docsText = useLocaleText('Docs', '文档')
11+
const counterText = useLocaleText('Counter', '计数器')
12+
const [count, isSyncing, increase, decrease] = useCounter()
13+
const version = useDeno(() => Deno.version.deno)
14+
15+
return (
16+
<div className="page">
17+
<head>
18+
<title>Hello World - Aleph.js</title>
19+
<link rel="stylesheet" href="../style/index.css" />
20+
</head>
21+
<p className="logo"><Logo /></p>
22+
<h1>{welcomeText} <strong>Aleph.js</strong>!</h1>
23+
<p className="links">
24+
<a href="https://alephjs.org" target="_blank">{websiteText}</a>
25+
<span></span>
26+
<a href="https://alephjs.org/docs/get-started" target="_blank">{getStartedText}</a>
27+
<span></span>
28+
<a href="https://alephjs.org/docs" target="_blank">{docsText}</a>
29+
<span></span>
30+
<a href="https://github.com/alephjs/aleph.js" target="_blank">Github</a>
31+
</p>
32+
<p className="copyinfo">
33+
<a href="/en"><small>En</small></a>
34+
<span>/</span>
35+
<a href="/zh"><small>中</small></a>
36+
</p>
37+
<div className="counter">
38+
<span>{counterText}:</span>
39+
{isSyncing && (
40+
<em>...</em>
41+
)}
42+
{!isSyncing && (
43+
<strong>{count}</strong>
44+
)}
45+
<button onClick={decrease}>-</button>
46+
<button onClick={increase}>+</button>
47+
</div>
48+
<p className="copyinfo">Built by Aleph.js in Deno {version}</p>
49+
</div>
50+
)
51+
}

‎examples/hello-world-i18n/public/logo.svg

Lines changed: 15 additions & 0 deletions
Loading

‎examples/hello-world-i18n/style/index.css

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
@import url('./reset.css');
2+
3+
main {
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
height: 100vh;
8+
}
9+
10+
.page h1 {
11+
margin: 0;
12+
line-height: 1.5;
13+
font-size: 18px;
14+
font-weight: 400;
15+
text-align: center;
16+
color: #000;
17+
}
18+
19+
.page h1 strong {
20+
font-weight: 700;
21+
}
22+
23+
.page p {
24+
margin: 0;
25+
line-height: 1.5;
26+
text-align: center;
27+
color: #333;
28+
}
29+
30+
.logo + p {
31+
margin-top: 6px;
32+
}
33+
34+
.links span,
35+
.links a {
36+
display: inline-block;
37+
vertical-align: middle;
38+
}
39+
40+
.links span {
41+
color: #999;
42+
}
43+
44+
.links span::after {
45+
content: '·';
46+
}
47+
48+
.links a,
49+
.copyinfo a {
50+
margin: 0 9px;
51+
color: #666;
52+
text-decoration: none;
53+
transition: color 0.15s ease-in;
54+
}
55+
56+
.links a:hover,
57+
.copyinfo a:hover {
58+
color: #000;
59+
}
60+
61+
.counter {
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
65+
width: 270px;
66+
height: 48px;
67+
margin: 30px auto 0;
68+
border: 1px solid #eee;
69+
border-radius: 6px;
70+
transition: border-color 0.15s ease-in;
71+
}
72+
73+
.counter:hover {
74+
border-color: #ccc;
75+
}
76+
77+
.counter em {
78+
display: inline-block;
79+
width: 48px;
80+
font-weight: 400;
81+
text-align: center;
82+
color: #999;
83+
}
84+
85+
.counter strong {
86+
display: inline-block;
87+
width: 48px;
88+
font-weight: 600;
89+
text-align: center;
90+
}
91+
92+
.counter button {
93+
display: line-flex;
94+
align-items: center;
95+
justify-content: center;
96+
width: 18px;
97+
height: 18px;
98+
border-radius: 3px;
99+
border: 1px solid #ddd;
100+
line-height: 1;
101+
font-size: 12px;
102+
font-family: Courier, monospace;
103+
font-weight: 600;
104+
color: #999;
105+
transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;
106+
cursor: pointer;
107+
}
108+
109+
.counter button:hover {
110+
color: #000;
111+
border-color:#ccc;
112+
}
113+
114+
.counter button + button {
115+
margin-left: 9px;
116+
}
117+
118+
.page .copyinfo {
119+
margin-top: 30px;
120+
font-size: 14px;
121+
color: #999;
122+
}

‎examples/hello-world-i18n/style/reset.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
border: none;
5+
outline: none;
6+
font: inherit;
7+
font-size: 100%;
8+
vertical-align: baseline;
9+
background: transparent;
10+
}
11+
12+
body {
13+
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
14+
font-size: 16px;
15+
}

0 commit comments

Comments
 (0)