docs: modify styles

nozomuikuta · Nov 7, 2024 · 9ab48a3 · 9ab48a3
1 parent 162905d
commit 9ab48a3
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 34 deletions.
diff --git a/docs/content/ja/concepts/command-line-interface.md b/docs/content/ja/concepts/command-line-interface.md
@@ -1,8 +1,10 @@
 # コマンドラインインターフェイス
 
-::: tip このページのゴール
-✅ Viteのコマンドラインインターフェースが担う責任を理解しましょう
-:::
+::: tip 🎯 このページのゴール
+
+- Viteのコマンドラインインターフェースが担う責任を理解しましょう
+- Viteのコマンドラインインターフェースが担う責任を理解しましょう
+  :::
 
 開発者は２種類の方法でViteを使用できます。ひとつは[JavaScript API](https://ja.vitejs.dev/guide/api-javascript.html)で、もうひとつは[コマンドラインインターフェース](https://ja.vitejs.dev/guide/cli.html)（以下、Vite CLIまたは単にCLIと表記します）です。
 
@@ -22,7 +24,7 @@ chibiviteでもViteにならい `chibivite.js` を作成しますが、パフォ
 
 ---
 
-::: info まとめ
+::: info ✨ まとめ
 
 - Vite CLIは、JavaScript APIを呼び出します
 - Vite CLIのエントリーポイントは、 `vite.js` です

diff --git a/docs/content/ja/concepts/dev-server.md b/docs/content/ja/concepts/dev-server.md
@@ -1,14 +1,15 @@
 # 開発サーバー
 
-::: tip このページのゴール
-✅ Viteの開発サーバーのがリクエストを処理する仕組みを理解しましょう
-:::
+::: tip 🎯 このページのゴール
+
+- Viteの開発サーバーのがリクエストを処理する仕組みを理解しましょう
+  :::
 
 Viteの開発サーバーは、一般的なWebサーバーと同様に、特定のURLに対するリクエストを受け取り、特定のリソースを返します。
 
 どんなURLへのリクエストに対してどんなリソースを返すかは、Webサーバーの実装次第です。たとえば、 `/index.html` というURLに対するリクエストに、Webサーバーのファイルシステムにおける `/index.html` を返す必要はありません。かわりに `/www/index.html` ファイルを返すことが可能です。また、 `/src/main.ts` というURLに対するリクエストに、URLの見た目から推測されるとおりにTypeScriptのコードを返す必要もありません。
 
-::: info :bulb: ポイント
+::: info 💡 ポイント
 URL (Uniform Resource Locator) とは、インターネット上の固有のリソースのアドレスであって、そのアドレスに実際に何があるかをあらわしたものではないことに留意してください。
 :::
 
@@ -27,7 +28,7 @@ URL (Uniform Resource Locator) とは、インターネット上の固有のリ
 | CSS          | `/src/style.css` | `transformMiddleware`   | `/src/style.css`                     |
 | 静的ファイル | `/favicon.ico`   | `servePublicMiddleware` | `/public/favicon.ico`                |
 
-::: info :bulb: ポイント
+::: info 💡 ポイント
 実際は、「ファイルシステム上で対応するファイル」の各パスには、Viteの開発サーバーが起動しているディレクトリまでのパスが先頭についています。
 :::
 
@@ -62,9 +63,11 @@ stateDiagram
 
 実際のViteの開発サーバーには、このページで紹介した３つのミドルウェア以外のミドルウェアも登録されていますが、「判定・処理・委譲」という考え方で実装されている点は同じです。
 
-なお、Viteの場合はあてはまりませんが、ミドルウェアは、特定の処理をおこなったあとにレスポンスを返す必要は必ずしもなく、副作用を起こしたのち、次のミドルウェアに処理を移譲する場合もあります（例：ロギング、リクエストの変更）。
+::: info 💡 ポイント
+なお、Viteの場合はあてはまりませんが、ミドルウェアは、特定の処理をおこなったあとにレスポンスを返す必要は必ずしもありません。副作用を起こしたのち、次のミドルウェアに処理を移譲する場合もあります（例：ロギング、リクエストの変更）。
+:::
 
-## :coffee: コラム「Viteの開発サーバーの内部実装を読み取る」
+## ☕ コラム「Viteの開発サーバーの内部実装を読み取る」
 
 ここで、以下のようなプロジェクト構成を考えてみましょう。
 
@@ -128,7 +131,7 @@ stateDiagram
 
 ---
 
-::: info まとめ
+::: info ✨ まとめ
 
 - Viteの開発サーバーは、一般的なWebサーバーと同じ原理で動いています
 - Viteの開発サーバーは、リクエストをミドルウェアのパイプラインによって処理します

diff --git a/docs/content/ja/concepts/plugin-system.draft.md b/docs/content/ja/concepts/plugin-system.draft.md
@@ -1,18 +1,18 @@
 # プラグインシステム
 
-::: tip このページのゴール
-✅ Viteのプラグインシステムの概要を理解しましょう
+::: tip 🎯 このページのゴール
 
-✅ Viteが、開発モードでどのようにコード変換をおこなうのか理解しましよう
-:::
+- Viteのプラグインシステムの概要を理解しましょう
+- Viteが、開発モードでどのようにコード変換をおこなうのか理解しましよう
+  :::
 
 ## Rollupのプラグインシステム
 
 ## Viteのプラグインシステム
 
 ---
 
-::: info まとめ
+::: info ✨ まとめ
 
 - Viteのプラグインは、
 - Viteの開発サーバーは、リクエストをミドルウェアのパイプラインによって処理します

diff --git a/docs/content/ja/hands-on/chibivite-cli.draft.md b/docs/content/ja/hands-on/chibivite-cli.draft.md
@@ -1,10 +1,10 @@
 # chibivite CLI
 
-::: tip このページのゴール
-✅ chibivite CLIにコマンドを追加しましょう
+::: tip 🎯 このページのゴール
 
-✅ chibivite CLIをRollupでビルドできるようにしましょう
-:::
+- chibivite CLIにコマンドを追加しましょう
+- chibivite CLIをRollupでビルドできるようにしましょう
+  :::
 
 これまでのchibivite CLIは「Hello, chibivite!」と表示するだけの簡単なものです。
 

diff --git a/docs/content/ja/hands-on/cli-build-setup.md b/docs/content/ja/hands-on/cli-build-setup.md
@@ -1,8 +1,9 @@
 # chibivite CLIのビルド
 
-::: tip このページのゴール
-✅ chibivite CLIをTypeScriptで実装してビルドできるようにしましょう
-:::
+::: tip 🎯 このページのゴール
+
+- chibivite CLIをTypeScriptで実装してビルドできるようにしましょう
+  :::
 
 chibivite CLIの詳細をTypeScriptで実装できるようにして、より堅牢なコードベースで開発できるようにしましょう！
 

diff --git a/docs/content/ja/hands-on/hello-chibivite.md b/docs/content/ja/hands-on/hello-chibivite.md
@@ -1,10 +1,10 @@
 # Hello, chibivite!
 
-::: tip このページのゴール
-✅ chibiviteの[コマンドラインインターフェース](/ja/concepts/command-line-interface)を実装しましょう
+::: tip 🎯 このページのゴール
 
-✅ chibiviteを実際に動作させることができるプレイグラウンドを立ち上げましょう
-:::
+- chibiviteの[コマンドラインインターフェース](/ja/concepts/command-line-interface)を実装しましょう
+- chibiviteを実際に動作させることができるプレイグラウンドを立ち上げましょう
+  :::
 
 chibiviteのコマンドラインインターフェース（以下、chibivite CLIと表記します）を実装して、実際に動かしてみましょう！
 

diff --git a/docs/content/ja/hands-on/project-setup.md b/docs/content/ja/hands-on/project-setup.md
@@ -1,8 +1,9 @@
 # プロジェクトのセットアップ
 
-::: tip このページのゴール
-✅ chibiviteを実装するためのプロジェクトを立ち上げましょう
-:::
+::: tip 🎯 このページのゴール
+
+- chibiviteを実装するためのプロジェクトを立ち上げましょう
+  :::
 
 さあ、chibiviteの実装をはじめましょう！
 

diff --git a/docs/content/ja/hands-on/tool-setup.md b/docs/content/ja/hands-on/tool-setup.md
@@ -1,8 +1,9 @@
 # ツールのセットアップ
 
-::: tip このページのゴール
-✅ chibiviteを開発するために必要なツールを準備しましょう
-:::
+::: tip 🎯 このページのゴール
+
+- chibiviteを開発するために必要なツールを準備しましょう
+  :::
 
 ## VSCodeのインストール