Skip to content

Commit 5b4f1ab

Browse files
kazuponkazupon
authored
support I18n (#13)
* WIP: Why has vue dependency resolution by ES Import in vue-i18n been included in pre-bundling? * update i18n
1 parent 2842411 commit 5b4f1ab

File tree

16 files changed

+743
-438
lines changed

16 files changed

+743
-438
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = {
99
extends: [
1010
'plugin:vue-libs/recommended',
1111
'plugin:vue/vue3-recommended',
12+
'plugin:@intlify/vue-i18n/recommended',
1213
'plugin:@typescript-eslint/recommended',
1314
'plugin:@typescript-eslint/eslint-recommended',
1415
'prettier',

‎.vitepress/config.js‎

Lines changed: 41 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,95 @@
1-
/** @type {UserConfig['head']} */
2-
const head = [
3-
['meta', { name: 'twitter:card', content: 'summary_large_image' }],
4-
['meta', { name: 'twitter:site', content: '@intlify' }],
5-
['meta', { name: 'twitter:url', content: 'https://intlify.dev' }],
6-
['meta', { name: 'twitter:title', content: 'Intlify' }],
7-
[
8-
'meta',
9-
{
10-
name: 'twitter:description',
11-
content: 'The Borderless Internationalization'
12-
}
13-
],
14-
[
15-
'meta',
16-
{ name: 'twitter:image', content: 'https://intlify.dev/ogimage.png' }
17-
],
18-
['meta', { property: 'og:type', content: 'article' }],
19-
['meta', { property: 'og:url', content: 'https://intlify.dev' }],
20-
['meta', { property: 'og:site_name', content: 'Intlify' }],
21-
['meta', { property: 'og:title', content: 'Intlify' }],
22-
[
23-
'meta',
24-
{
25-
property: 'og:description',
26-
content: 'The Borderless Internationalization'
27-
}
28-
],
29-
['meta', { property: 'og:image', content: 'https://intlify.dev/ogimage.png' }]
30-
]
1+
const head = require('./head')
312

32-
if (process.env.NODE_ENV === 'production') {
33-
head.push([
34-
'script',
35-
{
36-
src: 'https://unpkg.com/thesemetrics@latest',
37-
async: ''
38-
}
39-
])
3+
const mainInfo = {
4+
title: 'Intlify',
5+
description: 'The Borderless Internationalization'
406
}
417

428
/**
439
* @type {UserConfig}
4410
*/
4511
const config = {
46-
title: 'Intlify',
47-
description: 'The Borderless Internationalization',
12+
...mainInfo,
4813
head,
14+
lang: 'en',
15+
locales: {
16+
'/': { lang: 'en', ...mainInfo },
17+
'/ja/': { lang: 'ja', ...mainInfo }
18+
},
4919
themeConfig: {
5020
docsBranch: 'master',
5121
logo: 'nav_logo.png',
52-
nav: [
53-
{
54-
text: 'Blog',
55-
link: 'https://blog.intlify.dev'
22+
locales: {
23+
'/': {
24+
nav: [
25+
{
26+
text: 'Blog',
27+
link: 'https://blog.intlify.dev'
28+
},
29+
{
30+
text: 'GitHub',
31+
link: 'https://github.com/intlify'
32+
}
33+
]
5634
},
57-
{
58-
text: 'GitHub',
59-
link: 'https://github.com/intlify'
35+
'/ja/': {
36+
nav: [
37+
{
38+
text: 'ブログ',
39+
link: 'https://blog.intlify.dev'
40+
},
41+
{
42+
text: 'GitHub',
43+
link: 'https://github.com/intlify'
44+
}
45+
]
6046
}
61-
]
47+
}
6248
},
6349
customData: {
6450
projects: [
6551
{
6652
title: 'Vue I18n',
6753
link: 'https://github.com/kazupon/vue-i18n',
68-
logo: 'projects/vue-i18n.png'
54+
logo: '/projects/vue-i18n.png'
6955
},
7056
{
7157
title: 'ESLint Plugin Vue I18n',
7258
link: 'https://github.com/intlify/eslint-plugin-vue-i18n',
73-
logo: 'projects/eslint-plugin-vue-i18n.png'
59+
logo: '/projects/eslint-plugin-vue-i18n.png'
7460
}
7561
],
7662
sponsors: {
7763
gold: [
7864
{
7965
title: 'NuxtJS',
8066
link: 'https://nuxtjs.org',
81-
logo: 'sponsors/nuxt.png'
67+
logo: '/sponsors/nuxt.png'
8268
}
8369
],
8470
sliver: [
8571
{
8672
title: 'BabelEdit',
8773
link:
8874
'https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01',
89-
logo: 'sponsors/babeledit.png'
75+
logo: '/sponsors/babeledit.png'
9076
}
9177
],
9278
bronze: [
9379
{
9480
title: 'ZenArchitects',
9581
link: 'https://zenarchitects.co.jp',
96-
logo: 'sponsors/zenarchitects.png'
82+
logo: '/sponsors/zenarchitects.png'
9783
},
9884
{
9985
title: 'Sendcloud',
10086
link: 'https://www.sendcloud.com',
101-
logo: 'sponsors/sendcloud.png'
87+
logo: '/sponsors/sendcloud.png'
10288
},
10389
{
10490
title: 'VueMastery',
10591
link: 'https://www.vuemastery.com/',
106-
logo: 'sponsors/vuemastery.png'
92+
logo: '/sponsors/vuemastery.png'
10793
}
10894
]
10995
}

‎.vitepress/head.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
@type {UserConfig['head']}
3+
*/
4+
const head = [
5+
['meta', { name: 'twitter:card', content: 'summary_large_image' }],
6+
['meta', { name: 'twitter:site', content: '@intlify' }],
7+
['meta', { name: 'twitter:url', content: 'https://intlify.dev' }],
8+
['meta', { name: 'twitter:title', content: 'Intlify' }],
9+
[
10+
'meta',
11+
{
12+
name: 'twitter:description',
13+
content: 'The Borderless Internationalization'
14+
}
15+
],
16+
[
17+
'meta',
18+
{ name: 'twitter:image', content: 'https://intlify.dev/ogimage.png' }
19+
],
20+
['meta', { property: 'og:type', content: 'article' }],
21+
['meta', { property: 'og:url', content: 'https://intlify.dev' }],
22+
['meta', { property: 'og:site_name', content: 'Intlify' }],
23+
['meta', { property: 'og:title', content: 'Intlify' }],
24+
[
25+
'meta',
26+
{
27+
property: 'og:description',
28+
content: 'The Borderless Internationalization'
29+
}
30+
],
31+
['meta', { property: 'og:image', content: 'https://intlify.dev/ogimage.png' }]
32+
]
33+
34+
if (process.env.NODE_ENV === 'production') {
35+
head.push([
36+
'script',
37+
{
38+
src: 'https://unpkg.com/thesemetrics@latest',
39+
async: ''
40+
}
41+
])
42+
}
43+
44+
module.exports = head

‎.vitepress/locales/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎.vitepress/locales/ja.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎.vitepress/theme/Hero.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<script>/* eslint-disable @intlify/vue-i18n/no-raw-text */</script>
2+
13
<template>
24
<div class="inner">
35
<figure class="left">

‎.vitepress/theme/Info.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1+
<script setup lang="ts">
2+
/* eslint-disable @typescript-eslint/no-unused-vars, @intlify/vue-i18n/no-raw-text */
3+
const current = new Date().getFullYear()
4+
</script>
5+
16
<template>
27
<section class="py-16">
38
<p class="text-white text-center">
4-
{{ $frontmatter.license }}
9+
Released under the
10+
<a
11+
href="https://opensource.org/licenses/MIT"
12+
target="_blank"
13+
rel="noopener"
14+
>
15+
MIT License
16+
</a>
517
</p>
618
<p class="text-white text-center">
7-
{{ $frontmatter.copyright }}
19+
Copyright © 2019-{{ current }} kazuya kawaguchi
820
</p>
921
<p class="text-white text-center">
1022
Logo art designed by

‎.vitepress/theme/Layout.vue‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,34 @@
11
<script setup lang="ts">
22
/* eslint-disable @typescript-eslint/no-unused-vars */
3+
import { useI18n } from 'vue-i18n'
34
import Navigation from './Navigation.vue'
45
import Hero from './Hero.vue'
56
import Sponsor from './Sponsor.vue'
67
import Project from './Project.vue'
78
import Info from './Info.vue'
8-
/* eslint-enable @typescript-eslint/no-unused-vars */
9+
10+
const { t } = useI18n({
11+
inheritLocale: true
12+
})
913
</script>
1014

15+
<i18n lang="yaml">
16+
en:
17+
About1: Intlify is a project that aims to improve Developer Experience in software internationalization. We will aim to improve the Developer Experience of internationalization by providing libraries, frameworks, and tools that break down barriers to internationalization.
18+
About2: We will also aim to improve the Localization Experience by providing software that is easy to localize.
19+
SponsorTitle: Sponsors
20+
SponsorButton: Become a Supporting
21+
ProjectTitle: Open Source Projects
22+
ProjectButton: See more Open Source Projects
23+
ja:
24+
About1: Intlifyは、ソフトウェアの国際化における開発者エクスペリエンスの向上を目的としたプロジェクトです。国際化の障壁を打ち破るライブラリ、フレームワーク、ツールを提供することで、国際化の開発者エクスペリエンスの向上を目指します。
25+
About2: また、ローカライズしやすいソフトウェアを提供することで、ローカリゼーションエクスペリエンスの向上を目指します。
26+
SponsorTitle: スポンサー
27+
SponsorButton: サポーターになる
28+
ProjectTitle: オープンソースプロジェクト
29+
ProjectButton: もっとプロジェクトを見る
30+
</i18n>
31+
1132
<template>
1233
<div class="antialiased">
1334
<header class="header layouts">
@@ -21,23 +42,14 @@ import Info from './Info.vue'
2142

2243
<section class="about layouts">
2344
<div class="inner">
24-
<p>
25-
Intlify is a project that aims to improve Developer Experience in
26-
software internationalization. We will aim to improve the Developer
27-
Experience of internationalization by providing libraries,
28-
frameworks, and tools that break down barriers to
29-
internationalization.
30-
</p>
31-
<p>
32-
We will also aim to improve the Localization Experience by providing
33-
software that is easy to localize.
34-
</p>
45+
<p>{{ t('About1') }}</p>
46+
<p>{{ t('About2') }}</p>
3547
</div>
3648
</section>
3749

3850
<section class="sponsors layouts">
3951
<div class="inner">
40-
<h2>Sponsors</h2>
52+
<h2>{{ t('SponsorTitle') }}</h2>
4153
<Sponsor
4254
:banners="$site.customData.sponsors.gold"
4355
tier="gold"
@@ -54,20 +66,20 @@ import Info from './Info.vue'
5466
class="button"
5567
href="https://github.com/sponsors/kazupon?o=esc"
5668
>
57-
Become a Supporting
69+
{{ t('SponsorButton' )}}
5870
</a>
5971
</div>
6072
</section>
6173

6274
<section class="projects layouts">
6375
<div class="inner">
64-
<h2>Open Source Projects</h2>
76+
<h2>{{ t('ProjectTitle') }}</h2>
6577
<Project :banners="$site.customData.projects" />
6678
<a
6779
class="button"
6880
href="https://github.com/intlify"
6981
>
70-
See more Open Source Projects
82+
{{ t('ProjectButton' )}}
7183
</a>
7284
</div>
7385
</section>

‎.vitepress/theme/Navigation.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
1+
<script setup lang="ts">
2+
/* eslint-disable @typescript-eslint/no-unused-vars */
3+
import { useSiteData, useRouter } from 'vitepress'
4+
5+
const LOCALE_INFO = {
6+
en: 'English',
7+
ja: '日本語'
8+
} as const
9+
10+
const router = useRouter()
11+
const siteData = useSiteData()
12+
const locales = Object.keys(siteData.value.locales).map(k => {
13+
const lang = siteData.value.locales[k].lang
14+
return { locale: lang, display: LOCALE_INFO[lang] }
15+
})
16+
17+
const onChange = e => {
18+
router.go(e.target.value === 'en' ? '/' : `/${e.target.value}/`)
19+
}
20+
</script>
21+
122
<template>
223
<nav class="navigation">
324
<div class="logo">
@@ -22,6 +43,17 @@
2243
{{ text }}
2344
</a>
2445
</template>
46+
<form class="locale">
47+
<select @change="onChange">
48+
<option
49+
v-for="{ locale, display } in locales"
50+
:selected="$i18n.locale === locale"
51+
:value="locale"
52+
>
53+
{{ display }}
54+
</option>
55+
</select>
56+
</form>
2557
</div>
2658
</nav>
2759
</template>
@@ -46,4 +78,9 @@
4678
.menu a {
4779
@apply hover:text-gray-700 mr-4;
4880
}
81+
82+
.menu .locale {
83+
@apply inline-block transition-colors duration-300
84+
ease-linear text-gray-700 rounded-full;
85+
}
4986
</style>

0 commit comments

Comments
 (0)