Skip to content

Commit cc674db

Browse files
nozomuikutanozomuikuta
committed
docs: add contents and ideas
1 parent 6ede3bf commit cc674db

11 files changed

+166
-13
lines changed

‎docs/.vitepress/config/en.ts

+12-2
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,21 @@ export const enConfig = defineConfig({
2626
['meta', { name: 'twitter:image:alt', content: 'chibivite' }],
2727
],
2828
themeConfig: {
29-
nav: [{ text: 'Guide', link: '/guide/' }],
29+
nav: [
30+
{ text: 'Guide', link: '/introduction' },
31+
{ text: 'Hands-On', link: '/project-setup' },
32+
],
3033
sidebar: [
3134
{
3235
text: 'Guide',
33-
items: [{ text: 'Introduction', link: '/guide/' }],
36+
items: [
37+
{ text: 'Introduction', link: '/introduction' },
38+
{ text: 'Tools', link: '/tools' },
39+
],
40+
},
41+
{
42+
text: 'Hands-On',
43+
items: [{ text: 'Project Setup', link: '/project-setup' }],
3444
},
3545
],
3646
editLink: {

‎docs/.vitepress/config/ja.ts

+14-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,10 @@ export const jaConfig = defineConfig({
3131
* Some theme config can't be localized due to VitePress bug.
3232
* See https://github.com/vuejs/vitepress/issues/3056
3333
*/
34-
nav: [{ text: 'ガイド', link: '/ja/guide/' }],
34+
nav: [
35+
{ text: 'ガイド', link: '/ja/introduction' },
36+
{ text: 'ハンズオン', link: '/ja/project-setup' },
37+
],
3538
langMenuLabel: '言語を切り替える',
3639
darkModeSwitchLabel: '外観',
3740
lightModeSwitchTitle: 'ライトモードに切り替える',
@@ -40,7 +43,16 @@ export const jaConfig = defineConfig({
4043
sidebar: [
4144
{
4245
text: 'ガイド',
43-
items: [{ text: 'はじめに', link: '/ja/guide/' }],
46+
items: [
47+
{ text: 'はじめに', link: '/ja/introduction' },
48+
{ text: '必要なツールのインストール', link: '/ja/tools' },
49+
],
50+
},
51+
{
52+
text: 'ハンズオン',
53+
items: [
54+
{ text: 'プロジェクトのセットアップ', link: '/ja/project-setup' },
55+
],
4456
},
4557
],
4658
outline: {

‎docs/content/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ hero:
77
actions:
88
- theme: brand
99
text: Get Started
10-
link: /guide/
10+
link: /introduction
1111
- theme: alt
1212
text: View on GitHub
1313
link: https://github.com/NozomuIkuta/chibivite

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup>
2-
import AuthorProfile from '../../.vitepress/components/AuthorProfile.vue'
2+
import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
33
</script>
44

55
# Introduction
66

77
::: warning 🚧 English version is stil under development
8-
Please check [Japanese version](/ja/guide/) at the moment.
8+
Please check [Japanese version](/ja/) at the moment.
99
:::
1010

1111
## About Author

‎docs/content/ja/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ hero:
77
actions:
88
- theme: brand
99
text: はじめる
10-
link: /ja/guide/
10+
link: /ja/introduction
1111
- theme: alt
1212
text: GitHubで見る
1313
link: https://github.com/NozomuIkuta/chibivite

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
<script setup>
2-
import AuthorProfile from '../../../.vitepress/components/AuthorProfile.vue'
2+
import AuthorProfile from '../../.vitepress/components/AuthorProfile.vue'
33
</script>
44

55
# はじめに
66

77
本書に興味をもっていただき、ありがとうございます！
88

9-
本書は、chibivite（`/tʃibʲivit/`）という名前のミニマルなViteをフルスクラッチで実装しながら、
10-
現代の代表的なフロントエンドツールのひとつであるViteがどのように動作しているかを学ぶことができる、
11-
実践的なオンラインブックです。
9+
本書は、現代の代表的なフロントエンドツールのひとつであるViteがどのように動作しているかを学ぶことができる実践的なオンラインブックです。
10+
11+
読者は、chibivite（`/tʃibʲivit/`）という名前のミニマルなViteをフルスクラッチで実装しながら、
12+
Viteのアーキテクチャや内部実装、関連知識を学ぶことができます。
1213

1314
## 本書の目的
1415

1516
本書は、読者が以下のいずれかまたは複数のゴールを達成することを目的とします。
1617

1718
- Viteのアーキテクチャを理解し、説明できるようになること
1819
- Viteの基本的な機能を実装できるようになること
19-
- Viteにコントリビューションできるようになること
20+
- Viteとそのコミュニティにコントリビューションできるようになること
2021

2122
## 想定する読者
2223

‎docs/content/ja/project-setup.md

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# プロジェクトのセットアップ
2+
3+
## モノレポの構築
4+
5+
::: details モノレポである理由
6+
[Viteのレポジトリ](https://github.com/vitejs/vite)は、関連する複数のパッケージを一元管理するために[モノレポ](https://monorepo.tools/)を採用しています。本書ではchibiviteパッケージのみを開発するため、モノレポを採用する必要はありません。しかし、可能な限りViteのコードベースと同じ構成を採用することで、Viteのコードベースに慣れることができるでしょう。
7+
:::
8+
9+
1. 開発エディタで、chibiviteを開発するディレクトリを開きます。
10+
2. `package.json`を作成し、以下の内容をコピーしてください。
11+
12+
```json
13+
{
14+
"name": "chibivite-monorepo",
15+
"private": true,
16+
"version": "0.0.0",
17+
"type": "module",
18+
"sideEffects": false,
19+
"engines": {
20+
"node": ">=20.12.0"
21+
},
22+
"packageManager": "[email protected]",
23+
"scripts": {},
24+
"devDependencies": {}
25+
}
26+
```
27+
28+
3. ターミナルで以下のコマンドを実行して、Corepackとpnpmを有効化します。`package.json`に記載されているpnpmのバージョンが表示されれば成功です。
29+
30+
```bash
31+
corepack enable && pnpm --version
32+
```
33+
34+
4. ターミナルで以下のコマンドを実行して、`packages/chibivite`ディレクトリを作成します。
35+
36+
```bash
37+
mkdir -p packages/chibivite
38+
```
39+
40+
5. `packages/chibivite`ディレクトリに`package.json`を作成し、以下の内容をコピーしてください。
41+
42+
```json
43+
{
44+
"name": "chibivite",
45+
"private": true,
46+
"version": "0.0.0",
47+
"type": "module",
48+
"sideEffects": false,
49+
"engines": {
50+
"node": ">=20.12.0"
51+
},
52+
"packageManager": "[email protected]",
53+
"scripts": {},
54+
"dependencies": {},
55+
"devDependencies": {}
56+
}
57+
```
58+
59+
6. プロジェクトルートに`pnpm-workspace.yaml`を作成し、以下の内容をコピーしてください。
60+
61+
```yaml
62+
packages:
63+
- packages/*
64+
```
65+
66+
7. ターミナルでプロジェクトルートに移動し以下のコマンドを実行して、`pnpm-lock.yaml`を作成します。
67+
68+
```bash
69+
cd /path/to/project/root
70+
```
71+
72+
```bash
73+
pnpm install
74+
```

‎docs/content/ja/tools.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# 必要なツールのインストール
2+
3+
chibiviteを開発するために必要なツールをインストールしましょう！
4+
5+
もし以下のツールのインストールが済んでいる場合は、次に進んで大丈夫です。
6+
7+
- VSCode
8+
- Node.js v20.12.0 またはそれ以上のバージョン
9+
- プロジェクトディレクトリの作成
10+
- [Corepack](https://github.com/nodejs/corepack)
11+
- [pnpm](https://pnpm.io/)
12+
13+
## VSCodeのインストール
14+
15+
1. [VSCode公式サイト](https://code.visualstudio.com/)にアクセスします。
16+
2. VSCodeをダウンロードし、インストールします。
17+
18+
## Node.jsのインストール
19+
20+
1. [Node.js公式サイト](https://nodejs.org/en)にアクセスします。
21+
2. Node.js v20.12.0 またはそれ以上のバージョンをダウンロードし、インストールします。
22+
23+
::: tip Node.jsのバージョン管理
24+
すでにv20.12.0 未満のNode.jsがインストールされている場合、以下の選択肢があります。
25+
26+
- 既存のNode.jsをアンインストールして、新しいバージョンをインストールする
27+
- （推奨）Node.jsバージョンマネージャー（例：[nvm](https://github.com/nvm-sh/nvm)）を使って複数のバージョンのNode.jsをインストールする
28+
:::
29+
30+
3. ターミナルで以下のコマンドを実行し、インストールしたNode.jsのバージョンと、同封されているnpmのバージョンが表示されれば成功です。
31+
32+
```bash
33+
node --version
34+
```
35+
36+
```bash
37+
npm --version
38+
```

‎docs/content/ja/memo.draft.md ‎docs/content/memo.draft.md

File renamed without changes.

‎docs/content/project-setup.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup>
2+
import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
3+
</script>
4+
5+
# Project Setup
6+
7+
::: warning 🚧 English version is stil under development
8+
Please check [Japanese version](/ja/) at the moment.
9+
:::

‎docs/content/tools.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup>
2+
import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
3+
</script>
4+
5+
# Project Setup
6+
7+
::: warning 🚧 English version is stil under development
8+
Please check [Japanese version](/ja/) at the moment.
9+
:::

0 commit comments

Comments
 (0)