docs: add contents and ideas

docs/.vitepress/config/en.ts

@@ -26,11 +26,21 @@ export const enConfig = defineConfig({
     ['meta', { name: 'twitter:image:alt', content: 'chibivite' }],
   ],
   themeConfig: {
-    nav: [{ text: 'Guide', link: '/guide/' }],
+    nav: [
+      { text: 'Guide', link: '/introduction' },
+      { text: 'Hands-On', link: '/project-setup' },
+    ],
     sidebar: [
       {
         text: 'Guide',
-        items: [{ text: 'Introduction', link: '/guide/' }],
+        items: [
+          { text: 'Introduction', link: '/introduction' },
+          { text: 'Tools', link: '/tools' },
+        ],
+      },
+      {
+        text: 'Hands-On',
+        items: [{ text: 'Project Setup', link: '/project-setup' }],
       },
     ],
     editLink: {

docs/.vitepress/config/ja.ts

@@ -31,7 +31,10 @@ export const jaConfig = defineConfig({
      * Some theme config can't be localized due to VitePress bug.
      * See https://github.com/vuejs/vitepress/issues/3056
      */
-    nav: [{ text: 'ガイド', link: '/ja/guide/' }],
+    nav: [
+      { text: 'ガイド', link: '/ja/introduction' },
+      { text: 'ハンズオン', link: '/ja/project-setup' },
+    ],
     langMenuLabel: '言語を切り替える',
     darkModeSwitchLabel: '外観',
     lightModeSwitchTitle: 'ライトモードに切り替える',
@@ -40,7 +43,16 @@ export const jaConfig = defineConfig({
     sidebar: [
       {
         text: 'ガイド',
-        items: [{ text: 'はじめに', link: '/ja/guide/' }],
+        items: [
+          { text: 'はじめに', link: '/ja/introduction' },
+          { text: '必要なツールのインストール', link: '/ja/tools' },
+        ],
+      },
+      {
+        text: 'ハンズオン',
+        items: [
+          { text: 'プロジェクトのセットアップ', link: '/ja/project-setup' },
+        ],
       },
     ],
     outline: {

docs/content/index.md

@@ -7,7 +7,7 @@ hero:
   actions:
     - theme: brand
       text: Get Started
-      link: /guide/
+      link: /introduction
     - theme: alt
       text: View on GitHub
       link: https://github.com/NozomuIkuta/chibivite

docs/content/guide/index.md → docs/content/introduction.md

@@ -1,11 +1,11 @@
 <script setup>
-import AuthorProfile from '../../.vitepress/components/AuthorProfile.vue'
+import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
 </script>
 
 # Introduction
 
 ::: warning 🚧 English version is stil under development
-Please check [Japanese version](/ja/guide/) at the moment.
+Please check [Japanese version](/ja/) at the moment.
 :::
 
 ## About Author

docs/content/ja/index.md

@@ -7,7 +7,7 @@ hero:
   actions:
     - theme: brand
       text: はじめる
-      link: /ja/guide/
+      link: /ja/introduction
     - theme: alt
       text: GitHubで見る
       link: https://github.com/NozomuIkuta/chibivite

docs/content/ja/guide/index.md → docs/content/ja/introduction.md

@@ -1,22 +1,23 @@
 <script setup>
-import AuthorProfile from '../../../.vitepress/components/AuthorProfile.vue'
+import AuthorProfile from '../../.vitepress/components/AuthorProfile.vue'
 </script>
 
 # はじめに
 
 本書に興味をもっていただき、ありがとうございます！
 
-本書は、chibivite（`/tʃibʲivit/`）という名前のミニマルなViteをフルスクラッチで実装しながら、
-現代の代表的なフロントエンドツールのひとつであるViteがどのように動作しているかを学ぶことができる、
-実践的なオンラインブックです。
+本書は、現代の代表的なフロントエンドツールのひとつであるViteがどのように動作しているかを学ぶことができる実践的なオンラインブックです。
+
+読者は、chibivite（`/tʃibʲivit/`）という名前のミニマルなViteをフルスクラッチで実装しながら、
+Viteのアーキテクチャや内部実装、関連知識を学ぶことができます。
 
 ## 本書の目的
 
 本書は、読者が以下のいずれかまたは複数のゴールを達成することを目的とします。
 
 - Viteのアーキテクチャを理解し、説明できるようになること
 - Viteの基本的な機能を実装できるようになること
-- Viteにコントリビューションできるようになること
+- Viteとそのコミュニティにコントリビューションできるようになること
 
 ## 想定する読者
 

docs/content/ja/project-setup.md

@@ -0,0 +1,74 @@
+# プロジェクトのセットアップ
+
+## モノレポの構築
+
+::: details モノレポである理由
+[Viteのレポジトリ](https://github.com/vitejs/vite)は、関連する複数のパッケージを一元管理するために[モノレポ](https://monorepo.tools/)を採用しています。本書ではchibiviteパッケージのみを開発するため、モノレポを採用する必要はありません。しかし、可能な限りViteのコードベースと同じ構成を採用することで、Viteのコードベースに慣れることができるでしょう。
+:::
+
+1. 開発エディタで、chibiviteを開発するディレクトリを開きます。
+2. `package.json`を作成し、以下の内容をコピーしてください。
+
+   ```json
+   {
+     "name": "chibivite-monorepo",
+     "private": true,
+     "version": "0.0.0",
+     "type": "module",
+     "sideEffects": false,
+     "engines": {
+       "node": ">=20.12.0"
+     },
+     "packageManager": "[email protected]",
+     "scripts": {},
+     "devDependencies": {}
+   }
+   ```
+
+3. ターミナルで以下のコマンドを実行して、Corepackとpnpmを有効化します。`package.json`に記載されているpnpmのバージョンが表示されれば成功です。
+
+   ```bash
+   corepack enable && pnpm --version
+   ```
+
+4. ターミナルで以下のコマンドを実行して、`packages/chibivite`ディレクトリを作成します。
+
+   ```bash
+   mkdir -p packages/chibivite
+   ```
+
+5. `packages/chibivite`ディレクトリに`package.json`を作成し、以下の内容をコピーしてください。
+
+   ```json
+   {
+     "name": "chibivite",
+     "private": true,
+     "version": "0.0.0",
+     "type": "module",
+     "sideEffects": false,
+     "engines": {
+       "node": ">=20.12.0"
+     },
+     "packageManager": "[email protected]",
+     "scripts": {},
+     "dependencies": {},
+     "devDependencies": {}
+   }
+   ```
+
+6. プロジェクトルートに`pnpm-workspace.yaml`を作成し、以下の内容をコピーしてください。
+
+   ```yaml
+   packages:
+     - packages/*
+   ```
+
+7. ターミナルでプロジェクトルートに移動し以下のコマンドを実行して、`pnpm-lock.yaml`を作成します。
+
+   ```bash
+   cd /path/to/project/root
+   ```
+
+   ```bash
+   pnpm install
+   ```

docs/content/ja/tools.md

@@ -0,0 +1,38 @@
+# 必要なツールのインストール
+
+chibiviteを開発するために必要なツールをインストールしましょう！
+
+もし以下のツールのインストールが済んでいる場合は、次に進んで大丈夫です。
+
+- VSCode
+- Node.js v20.12.0 またはそれ以上のバージョン
+- プロジェクトディレクトリの作成
+- [Corepack](https://github.com/nodejs/corepack)
+- [pnpm](https://pnpm.io/)
+
+## VSCodeのインストール
+
+1. [VSCode公式サイト](https://code.visualstudio.com/)にアクセスします。
+2. VSCodeをダウンロードし、インストールします。
+
+## Node.jsのインストール
+
+1. [Node.js公式サイト](https://nodejs.org/en)にアクセスします。
+2. Node.js v20.12.0 またはそれ以上のバージョンをダウンロードし、インストールします。
+
+   ::: tip Node.jsのバージョン管理
+   すでにv20.12.0 未満のNode.jsがインストールされている場合、以下の選択肢があります。
+
+   - 既存のNode.jsをアンインストールして、新しいバージョンをインストールする
+   - （推奨）Node.jsバージョンマネージャー（例：[nvm](https://github.com/nvm-sh/nvm)）を使って複数のバージョンのNode.jsをインストールする
+     :::
+
+3. ターミナルで以下のコマンドを実行し、インストールしたNode.jsのバージョンと、同封されているnpmのバージョンが表示されれば成功です。
+
+   ```bash
+   node --version
+   ```
+
+   ```bash
+   npm --version
+   ```

docs/content/project-setup.md

@@ -0,0 +1,9 @@
+<script setup>
+import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
+</script>
+
+# Project Setup
+
+::: warning 🚧 English version is stil under development
+Please check [Japanese version](/ja/) at the moment.
+:::

docs/content/tools.md

@@ -0,0 +1,9 @@
+<script setup>
+import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
+</script>
+
+# Project Setup
+
+::: warning 🚧 English version is stil under development
+Please check [Japanese version](/ja/) at the moment.
+:::