chapter: Internationalization (#32)

* configure lint

* i18n

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 }

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...
+  },
+})

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 }

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

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 -->

packages/guide/setup.md

@@ -1,3 +1,3 @@
-# 環境構築
+# Setup
 
 <!-- TODO: write how to setup -->

packages/guide/what-is-vueuse.md

@@ -1,3 +1,3 @@
-# VueUseとは
+# What is VueUse
 
 <!-- TODO: write what is vueuse -->

packages/ja/guide/index.md

@@ -0,0 +1,26 @@
+# はじめに
+
+## 本書の目的
+
+以下が本書の主な目的になります。
+
+- VueUse のような「再利用性」、「保守性」、「拡張性」を意識したコンポーザブルを作成できるようになる
+- 様々な機能のコンポーザブルを実際に作ることで、Vue.js と TypeScript の理解を深める
+- オープンソースのコードを読んで、実用的なコーディングテクニックやベストプラクティスを学ぶ
+
+## 本書の方針
+
+- **最低限で再現**: VueUse のコンポーザブルを完全再現することは目指しません。必要最低限で実装することによる読みやすさを重視します。
+
+- **分かりやすさ**: 複雑な概念も分かりやすく解説し、読者がストレスなく学習できるよう配慮します。わかりやすい説明や具体的な例を使用し、読者がスムーズに理解できるよう努めます。
+
+- **実用性**: 学んだ知識が現実の開発に役立つことを重視します。理論だけでなく、実践的な問題解決のアプローチやベストプラクティスに焦点を当てます。
+
+## 対象読者
+
+- Vue.js を使ったことがある
+- Typescript を使ったことがある
+
+## 本書の構成
+
+<!-- TODO: write about book structure  -->

packages/ja/guide/setup.md

@@ -0,0 +1,3 @@
+# 環境構築
+
+<!-- TODO: write how to setup -->

packages/ja/guide/what-is-vueuse.md

@@ -0,0 +1,3 @@
+# VueUseとは
+
+<!-- TODO: write what is vueuse -->

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
+---