From 9b775cbe4f26b26b95be917ab54aa1ec9ebcad86 Mon Sep 17 00:00:00 2001
From: ubugeeei <71201308+Ubugeeei@users.noreply.github.com>
Date: Sat, 13 Apr 2024 21:57:58 +0900
Subject: [PATCH] chapter: Internationalization (#32)

* configure lint

* i18n
---
 packages/.vitepress/config.ts        | 36 ----------------------------
 packages/.vitepress/config/en.ts     | 14 +++++++++++
 packages/.vitepress/config/index.ts  | 17 +++++++++++++
 packages/.vitepress/config/ja.ts     | 14 +++++++++++
 packages/.vitepress/config/shared.ts | 15 ++++++++++++
 packages/guide/index.md              | 30 +++++++++++------------
 packages/guide/setup.md              |  2 +-
 packages/guide/what-is-vueuse.md     |  2 +-
 packages/ja/guide/index.md           | 26 ++++++++++++++++++++
 packages/ja/guide/setup.md           |  3 +++
 packages/ja/guide/what-is-vueuse.md  |  3 +++
 packages/ja/index.md                 | 26 ++++++++++++++++++++
 12 files changed, 135 insertions(+), 53 deletions(-)
 delete mode 100644 packages/.vitepress/config.ts
 create mode 100644 packages/.vitepress/config/en.ts
 create mode 100644 packages/.vitepress/config/index.ts
 create mode 100644 packages/.vitepress/config/ja.ts
 create mode 100644 packages/.vitepress/config/shared.ts
 create mode 100644 packages/ja/guide/index.md
 create mode 100644 packages/ja/guide/setup.md
 create mode 100644 packages/ja/guide/what-is-vueuse.md
 create mode 100644 packages/ja/index.md

diff --git a/packages/.vitepress/config.ts b/packages/.vitepress/config.ts
deleted file mode 100644
index 8d4d6e7..0000000
--- a/packages/.vitepress/config.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineConfig } from 'vitepress'
-
-const Guide = [
-  { text: 'はじめに', link: '/guide/' },
-  { text: 'VueUseとは', link: '/guide/what-is-vueuse' },
-  { text: '環境構築', link: '/guide/setup' },
-]
-
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
-  title: 'VueYous',
-  description: 'Craft Your Own VueUse Composables From Scratch',
-
-  head: [['link', { rel: 'icon', href: '/logo.png' }]],
-
-  // https://vitepress.dev/reference/default-theme-config
-  themeConfig: {
-    search: { provider: 'local' },
-    logo: '/logo.png',
-    // https://vitepress.dev/reference/default-theme-config
-
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Guide', items: Guide },
-    ],
-
-    sidebar: [
-      {
-        text: 'Guide',
-        items: Guide,
-      },
-    ],
-
-    socialLinks: [{ icon: 'github', link: 'https://github.com/pei-pay/VueYous' }],
-  },
-})
diff --git a/packages/.vitepress/config/en.ts b/packages/.vitepress/config/en.ts
new file mode 100644
index 0000000..78219c8
--- /dev/null
+++ b/packages/.vitepress/config/en.ts
@@ -0,0 +1,14 @@
+import type { i18nTheme } from '.'
+
+const nav: i18nTheme['nav'] = [
+  { text: 'Home', link: '/' },
+  { text: 'Guide', link: '/guide/' },
+]
+
+const sidebar: i18nTheme['sidebar'] = [
+  { text: 'Getting Started', link: '/guide/' },
+  { text: 'What is VueUse?', link: '/guide/what-is-vueuse' },
+  { text: 'Setup', link: '/guide/setup' },
+]
+
+export const en: i18nTheme = { nav, sidebar }
diff --git a/packages/.vitepress/config/index.ts b/packages/.vitepress/config/index.ts
new file mode 100644
index 0000000..e2caec8
--- /dev/null
+++ b/packages/.vitepress/config/index.ts
@@ -0,0 +1,17 @@
+import type { DefaultTheme, UserConfig } from 'vitepress'
+import { defineConfig } from 'vitepress'
+import { sharedConfig } from './shared'
+import { ja } from './ja'
+import { en } from './en'
+
+export type i18nTheme = Partial<NonNullable<UserConfig<DefaultTheme.Config>['themeConfig']>>
+
+export default defineConfig({
+  ...sharedConfig,
+  themeConfig: sharedConfig.themeConfig,
+  locales: {
+    root: { label: 'English', lang: 'en', themeConfig: { ...en } },
+    ja: { label: '日本語', lang: 'ja', themeConfig: { ...ja } },
+    // other languages...
+  },
+})
diff --git a/packages/.vitepress/config/ja.ts b/packages/.vitepress/config/ja.ts
new file mode 100644
index 0000000..44fb658
--- /dev/null
+++ b/packages/.vitepress/config/ja.ts
@@ -0,0 +1,14 @@
+import type { i18nTheme } from '.'
+
+const nav: i18nTheme['nav'] = [
+  { text: 'Home', link: '/ja/' },
+  { text: 'Guide', link: '/ja/guide/' },
+]
+
+const sidebar: i18nTheme['sidebar'] = [
+  { text: 'はじめに', link: '/ja/guide/' },
+  { text: 'VueUseとは', link: '/ja/guide/what-is-vueuse' },
+  { text: '環境構築', link: '/ja/guide/setup' },
+]
+
+export const ja: i18nTheme = { nav, sidebar }
diff --git a/packages/.vitepress/config/shared.ts b/packages/.vitepress/config/shared.ts
new file mode 100644
index 0000000..50b6596
--- /dev/null
+++ b/packages/.vitepress/config/shared.ts
@@ -0,0 +1,15 @@
+import type { DefaultTheme, UserConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export const sharedConfig: UserConfig<DefaultTheme.Config> = {
+  title: 'VueYous',
+  description: 'Craft Your Own VueUse Composables From Scratch',
+
+  head: [['link', { rel: 'icon', href: '/logo.png' }]],
+
+  themeConfig: {
+    search: { provider: 'local' },
+    logo: '/logo.png',
+    socialLinks: [{ icon: 'github', link: 'https://github.com/pei-pay/VueYous' }],
+  },
+} as const
diff --git a/packages/guide/index.md b/packages/guide/index.md
index 7f3dda6..d843828 100644
--- a/packages/guide/index.md
+++ b/packages/guide/index.md
@@ -1,26 +1,26 @@
-# はじめに
+# Introduction
 
-## 本書の目的
+## Purpose of this book
 
-以下が本書の主な目的になります。
+The main objectives of this book are as follows:
 
-- VueUse のような「再利用性」、「保守性」、「拡張性」を意識したコンポーザブルを作成できるようになる
-- 様々な機能のコンポーザブルを実際に作ることで、Vue.js と TypeScript の理解を深める
-- オープンソースのコードを読んで、実用的なコーディングテクニックやベストプラクティスを学ぶ
+- To be able to create composable functions with a focus on "reusability," "maintainability," and "extensibility" like VueUse
+- To deepen the understanding of Vue.js and TypeScript by actually creating composable functions with various functionalities
+- To learn practical coding techniques and best practices by reading open-source code
 
-## 本書の方針
+## Approach of this book
 
-- **最低限で再現**: VueUse のコンポーザブルを完全再現することは目指しません。必要最低限で実装することによる読みやすさを重視します。
+- **Minimal Reproduction**: We do not aim to fully replicate the composable functions of VueUse. We prioritize readability by implementing only the necessary minimum.
 
-- **分かりやすさ**: 複雑な概念も分かりやすく解説し、読者がストレスなく学習できるよう配慮します。わかりやすい説明や具体的な例を使用し、読者がスムーズに理解できるよう努めます。
+- **Clarity**: We explain complex concepts in an easy-to-understand manner and take care to ensure that readers can learn without stress. We use clear explanations and concrete examples to help readers understand smoothly.
 
-- **実用性**: 学んだ知識が現実の開発に役立つことを重視します。理論だけでなく、実践的な問題解決のアプローチやベストプラクティスに焦点を当てます。
+- **Practicality**: We emphasize that the knowledge learned is useful in real-world development. We focus not only on theory but also on practical approaches to problem-solving and best practices.
 
-## 対象読者
+## Target Audience
 
-- Vue.js を使ったことがある
-- Typescript を使ったことがある
+- Those who have used Vue.js
+- Those who have used TypeScript
 
-## 本書の構成
+## Structure of this book
 
-<!-- TODO: write about book structure  -->
+<!-- TODO: write about book structure -->
diff --git a/packages/guide/setup.md b/packages/guide/setup.md
index bc1b625..065e87b 100644
--- a/packages/guide/setup.md
+++ b/packages/guide/setup.md
@@ -1,3 +1,3 @@
-# 環境構築
+# Setup
 
 <!-- TODO: write how to setup -->
diff --git a/packages/guide/what-is-vueuse.md b/packages/guide/what-is-vueuse.md
index 6956a06..c279ed0 100644
--- a/packages/guide/what-is-vueuse.md
+++ b/packages/guide/what-is-vueuse.md
@@ -1,3 +1,3 @@
-# VueUseとは
+# What is VueUse
 
 <!-- TODO: write what is vueuse -->
diff --git a/packages/ja/guide/index.md b/packages/ja/guide/index.md
new file mode 100644
index 0000000..7f3dda6
--- /dev/null
+++ b/packages/ja/guide/index.md
@@ -0,0 +1,26 @@
+# はじめに
+
+## 本書の目的
+
+以下が本書の主な目的になります。
+
+- VueUse のような「再利用性」、「保守性」、「拡張性」を意識したコンポーザブルを作成できるようになる
+- 様々な機能のコンポーザブルを実際に作ることで、Vue.js と TypeScript の理解を深める
+- オープンソースのコードを読んで、実用的なコーディングテクニックやベストプラクティスを学ぶ
+
+## 本書の方針
+
+- **最低限で再現**: VueUse のコンポーザブルを完全再現することは目指しません。必要最低限で実装することによる読みやすさを重視します。
+
+- **分かりやすさ**: 複雑な概念も分かりやすく解説し、読者がストレスなく学習できるよう配慮します。わかりやすい説明や具体的な例を使用し、読者がスムーズに理解できるよう努めます。
+
+- **実用性**: 学んだ知識が現実の開発に役立つことを重視します。理論だけでなく、実践的な問題解決のアプローチやベストプラクティスに焦点を当てます。
+
+## 対象読者
+
+- Vue.js を使ったことがある
+- Typescript を使ったことがある
+
+## 本書の構成
+
+<!-- TODO: write about book structure  -->
diff --git a/packages/ja/guide/setup.md b/packages/ja/guide/setup.md
new file mode 100644
index 0000000..bc1b625
--- /dev/null
+++ b/packages/ja/guide/setup.md
@@ -0,0 +1,3 @@
+# 環境構築
+
+<!-- TODO: write how to setup -->
diff --git a/packages/ja/guide/what-is-vueuse.md b/packages/ja/guide/what-is-vueuse.md
new file mode 100644
index 0000000..6956a06
--- /dev/null
+++ b/packages/ja/guide/what-is-vueuse.md
@@ -0,0 +1,3 @@
+# VueUseとは
+
+<!-- TODO: write what is vueuse -->
diff --git a/packages/ja/index.md b/packages/ja/index.md
new file mode 100644
index 0000000..96ead39
--- /dev/null
+++ b/packages/ja/index.md
@@ -0,0 +1,26 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: 'VueYous'
+  text: 'Craft Your Own VueUse Composables From Scratch'
+  tagline: powered by VitePress
+  image: /logo.png
+  actions:
+    - theme: brand
+      text: 始める
+      link: /ja/guide/
+    - theme: alt
+      text: VueUse 公式
+      link: https://vueuse.org/
+
+# TODO: Write features
+features:
+  - title: Feature A
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature B
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature C
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---