support I18n

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
   extends: [
     'plugin:vue-libs/recommended',
     'plugin:vue/vue3-recommended',
+    'plugin:@intlify/vue-i18n/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'prettier',

.vitepress/config.js

@@ -1,109 +1,95 @@
-/** @type {UserConfig['head']} */
-const head = [
-  ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
-  ['meta', { name: 'twitter:site', content: '@intlify' }],
-  ['meta', { name: 'twitter:url', content: 'https://intlify.dev' }],
-  ['meta', { name: 'twitter:title', content: 'Intlify' }],
-  [
-    'meta',
-    {
-      name: 'twitter:description',
-      content: 'The Borderless Internationalization'
-    }
-  ],
-  [
-    'meta',
-    { name: 'twitter:image', content: 'https://intlify.dev/ogimage.png' }
-  ],
-  ['meta', { property: 'og:type', content: 'article' }],
-  ['meta', { property: 'og:url', content: 'https://intlify.dev' }],
-  ['meta', { property: 'og:site_name', content: 'Intlify' }],
-  ['meta', { property: 'og:title', content: 'Intlify' }],
-  [
-    'meta',
-    {
-      property: 'og:description',
-      content: 'The Borderless Internationalization'
-    }
-  ],
-  ['meta', { property: 'og:image', content: 'https://intlify.dev/ogimage.png' }]
-]
+const head = require('./head')
 
-if (process.env.NODE_ENV === 'production') {
-  head.push([
-    'script',
-    {
-      src: 'https://unpkg.com/thesemetrics@latest',
-      async: ''
-    }
-  ])
+const mainInfo = {
+  title: 'Intlify',
+  description: 'The Borderless Internationalization'
 }
 
 /**
  * @type {UserConfig}
  */
 const config = {
-  title: 'Intlify',
-  description: 'The Borderless Internationalization',
+  ...mainInfo,
   head,
+  lang: 'en',
+  locales: {
+    '/': { lang: 'en', ...mainInfo },
+    '/ja/': { lang: 'ja', ...mainInfo }
+  },
   themeConfig: {
     docsBranch: 'master',
     logo: 'nav_logo.png',
-    nav: [
-      {
-        text: 'Blog',
-        link: 'https://blog.intlify.dev'
+    locales: {
+      '/': {
+        nav: [
+          {
+            text: 'Blog',
+            link: 'https://blog.intlify.dev'
+          },
+          {
+            text: 'GitHub',
+            link: 'https://github.com/intlify'
+          }
+        ]
       },
-      {
-        text: 'GitHub',
-        link: 'https://github.com/intlify'
+      '/ja/': {
+        nav: [
+          {
+            text: 'ブログ',
+            link: 'https://blog.intlify.dev'
+          },
+          {
+            text: 'GitHub',
+            link: 'https://github.com/intlify'
+          }
+        ]
       }
-    ]
+    }
   },
   customData: {
     projects: [
       {
         title: 'Vue I18n',
         link: 'https://github.com/kazupon/vue-i18n',
-        logo: 'projects/vue-i18n.png'
+        logo: '/projects/vue-i18n.png'
       },
       {
         title: 'ESLint Plugin Vue I18n',
         link: 'https://github.com/intlify/eslint-plugin-vue-i18n',
-        logo: 'projects/eslint-plugin-vue-i18n.png'
+        logo: '/projects/eslint-plugin-vue-i18n.png'
       }
     ],
     sponsors: {
       gold: [
         {
           title: 'NuxtJS',
           link: 'https://nuxtjs.org',
-          logo: 'sponsors/nuxt.png'
+          logo: '/sponsors/nuxt.png'
         }
       ],
       sliver: [
         {
           title: 'BabelEdit',
           link:
             'https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01',
-          logo: 'sponsors/babeledit.png'
+          logo: '/sponsors/babeledit.png'
         }
       ],
       bronze: [
         {
           title: 'ZenArchitects',
           link: 'https://zenarchitects.co.jp',
-          logo: 'sponsors/zenarchitects.png'
+          logo: '/sponsors/zenarchitects.png'
         },
         {
           title: 'Sendcloud',
           link: 'https://www.sendcloud.com',
-          logo: 'sponsors/sendcloud.png'
+          logo: '/sponsors/sendcloud.png'
         },
         {
           title: 'VueMastery',
           link: 'https://www.vuemastery.com/',
-          logo: 'sponsors/vuemastery.png'
+          logo: '/sponsors/vuemastery.png'
         }
       ]
     }

.vitepress/head.js

@@ -0,0 +1,44 @@
+/**
+ @type {UserConfig['head']}
+ */
+const head = [
+  ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+  ['meta', { name: 'twitter:site', content: '@intlify' }],
+  ['meta', { name: 'twitter:url', content: 'https://intlify.dev' }],
+  ['meta', { name: 'twitter:title', content: 'Intlify' }],
+  [
+    'meta',
+    {
+      name: 'twitter:description',
+      content: 'The Borderless Internationalization'
+    }
+  ],
+  [
+    'meta',
+    { name: 'twitter:image', content: 'https://intlify.dev/ogimage.png' }
+  ],
+  ['meta', { property: 'og:type', content: 'article' }],
+  ['meta', { property: 'og:url', content: 'https://intlify.dev' }],
+  ['meta', { property: 'og:site_name', content: 'Intlify' }],
+  ['meta', { property: 'og:title', content: 'Intlify' }],
+  [
+    'meta',
+    {
+      property: 'og:description',
+      content: 'The Borderless Internationalization'
+    }
+  ],
+  ['meta', { property: 'og:image', content: 'https://intlify.dev/ogimage.png' }]
+]
+
+if (process.env.NODE_ENV === 'production') {
+  head.push([
+    'script',
+    {
+      src: 'https://unpkg.com/thesemetrics@latest',
+      async: ''
+    }
+  ])
+}
+
+module.exports = head

.vitepress/locales/en.json

@@ -0,0 +1 @@
+{}

.vitepress/locales/ja.json

@@ -0,0 +1 @@
+{}

.vitepress/theme/Hero.vue

@@ -1,3 +1,5 @@
+<script>/* eslint-disable @intlify/vue-i18n/no-raw-text */</script>
+
 <template>
   <div class="inner">
     <figure class="left">

.vitepress/theme/Info.vue

@@ -1,10 +1,22 @@
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-unused-vars, @intlify/vue-i18n/no-raw-text */
+const current = new Date().getFullYear()
+</script>
+
 <template>
   <section class="py-16">
     <p class="text-white text-center">
-      {{ $frontmatter.license }}
+      Released under the 
+      <a
+        href="https://opensource.org/licenses/MIT"
+        target="_blank"
+        rel="noopener"
+      >
+        MIT License
+      </a>
     </p>
     <p class="text-white text-center">
-      {{ $frontmatter.copyright }}
+      Copyright © 2019-{{ current }} kazuya kawaguchi
     </p>
     <p class="text-white text-center">
       Logo art designed by

.vitepress/theme/Layout.vue

@@ -1,13 +1,34 @@
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { useI18n } from 'vue-i18n'
 import Navigation from './Navigation.vue'
 import Hero from './Hero.vue'
 import Sponsor from './Sponsor.vue'
 import Project from './Project.vue'
 import Info from './Info.vue'
-/* eslint-enable @typescript-eslint/no-unused-vars */
+
+const { t } = useI18n({
+  inheritLocale: true
+})
 </script>
 
+<i18n lang="yaml">
+en:
+  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.
+  About2: We will also aim to improve the Localization Experience by providing software that is easy to localize.
+  SponsorTitle: Sponsors
+  SponsorButton: Become a Supporting
+  ProjectTitle: Open Source Projects
+  ProjectButton: See more Open Source Projects
+ja:
+  About1: Intlifyは、ソフトウェアの国際化における開発者エクスペリエンスの向上を目的としたプロジェクトです。国際化の障壁を打ち破るライブラリ、フレームワーク、ツールを提供することで、国際化の開発者エクスペリエンスの向上を目指します。
+  About2: また、ローカライズしやすいソフトウェアを提供することで、ローカリゼーションエクスペリエンスの向上を目指します。
+  SponsorTitle: スポンサー
+  SponsorButton: サポーターになる
+  ProjectTitle: オープンソースプロジェクト
+  ProjectButton: もっとプロジェクトを見る
+</i18n>
+
 <template>
   <div class="antialiased">
     <header class="header layouts">
@@ -21,23 +42,14 @@ import Info from './Info.vue'
 
       <section class="about layouts">
         <div class="inner">
-          <p>
-            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.
-          </p>
-          <p>
-            We will also aim to improve the Localization Experience by providing
-            software that is easy to localize.
-          </p>
+          <p>{{ t('About1') }}</p>
+          <p>{{ t('About2') }}</p>
         </div>
       </section>
 
       <section class="sponsors layouts">
         <div class="inner">
-          <h2>Sponsors</h2>
+          <h2>{{ t('SponsorTitle') }}</h2>
           <Sponsor
             :banners="$site.customData.sponsors.gold"
             tier="gold"
@@ -54,20 +66,20 @@ import Info from './Info.vue'
             class="button"
             href="https://github.com/sponsors/kazupon?o=esc"
           >
-            Become a Supporting
+            {{ t('SponsorButton' )}}
           </a>
         </div>
       </section>
 
       <section class="projects layouts">
         <div class="inner">
-          <h2>Open Source Projects</h2>
+          <h2>{{ t('ProjectTitle') }}</h2>
           <Project :banners="$site.customData.projects" />
           <a
             class="button"
             href="https://github.com/intlify"
           >
-            See more Open Source Projects
+            {{ t('ProjectButton' )}}
           </a>
         </div>
       </section>

.vitepress/theme/Navigation.vue

@@ -1,3 +1,24 @@
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useSiteData, useRouter } from 'vitepress'
+
+const LOCALE_INFO = {
+  en: 'English',
+  ja: '日本語'
+} as const
+
+const router = useRouter()
+const siteData = useSiteData()
+const locales = Object.keys(siteData.value.locales).map(k => {
+  const lang = siteData.value.locales[k].lang
+  return { locale: lang, display: LOCALE_INFO[lang] }
+})
+
+const onChange = e => {
+  router.go(e.target.value === 'en' ? '/' : `/${e.target.value}/`)
+}
+</script>
+
 <template>
   <nav class="navigation">
     <div class="logo">
@@ -22,6 +43,17 @@
           {{ text }}
         </a>
       </template>
+      <form class="locale">
+        <select @change="onChange">
+          <option 
+            v-for="{ locale, display } in locales"
+            :selected="$i18n.locale === locale"
+            :value="locale"
+          >
+            {{ display }}
+          </option>
+        </select>
+      </form>
     </div>
   </nav>
 </template>
@@ -46,4 +78,9 @@
 .menu a {
   @apply hover:text-gray-700 mr-4;
 }
+
+.menu .locale {
+  @apply inline-block transition-colors duration-300
+    ease-linear text-gray-700 rounded-full;
+}
 </style>