chore: Dev containerの更新 (#151)

Signed-off-by: Shunsuke Kimura <[email protected]>
Co-authored-by: 3w36zj6 <[email protected]>

Author: kimushun1101

.devcontainer/Dockerfile

@@ -1,12 +1,12 @@
 {
   "name": "typst-jp-documentation",
-  "build": {
-    "dockerfile": "Dockerfile",
-    "context": ".."
+  "image": "mcr.microsoft.com/devcontainers/base:bookworm",
+  "features": {
+    "ghcr.io/devcontainers-extra/features/mise:1": {}
   },
-  "remoteUser": "typst-jp",
-  "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",
-  "workspaceFolder": "/workspace",
-  "postCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
-  "postStartCommand": "bun install --frozen-lockfile && cargo test --package typst-docs --lib -- tests::test_docs --exact --nocapture && python3 ./gen.py && python3 -m http.server -d dist"
+  "onCreateCommand": "echo 'eval \"$(mise activate bash)\"' >> ~/.bashrc && mise trust && mise install",
+  "postStartCommand": "mise run generate && mise run dev",
+  "remoteEnv": {
+    "VITE_LISTEN_ALL_ADDRESSES": "true"  // See /website/.env.example
+  }
 }

.devcontainer/README.md

@@ -2,9 +2,9 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "generate-docs",
+      "label": "generate",
       "type": "shell",
-      "command": "cargo test --package typst-docs --lib -- tests::test_docs --exact --nocapture && python3 ./gen.py && echo reload or open http://localhost:8000",
+      "command": "mise run generate",
       "problemMatcher": [],
       "group": {
         "kind": "build",
@@ -14,19 +14,19 @@
     {
       "label": "textlint-md",
       "type": "shell",
-      "command": "bun run textlint-md",
+      "command": "mise run textlint-md",
       "problemMatcher": []
     },
     {
       "label": "textlint-md:fix",
       "type": "shell",
-      "command": "bun run textlint-md:fix",
+      "command": "mise run textlint-md:fix",
       "problemMatcher": []
     },
     {
       "label": "textlint-html",
       "type": "shell",
-      "command": "bun run textlint-html",
+      "command": "mise run textlint-html",
       "problemMatcher": []
     }
   ]

.devcontainer/devcontainer.json

@@ -40,6 +40,8 @@ Typst日本語ドキュメント翻訳プロジェクトにご興味をお持ち
 
 また、当プロジェクトが独自に導入しているRustを除く開発ツールおよびコマンドは[mise](https://mise.jdx.dev/)で一元管理しています。導入していない場合は、[Getting Started | mise-en-place](https://mise.jdx.dev/getting-started.html)に従ってインストールしてください。
 
+Dockerで作業したい方へ向けて、[Dev Containerの環境](#dev-containerを用いた方法)もご用意しております。
+
 #### TL;DR
 
 > [!NOTE]
@@ -123,9 +125,21 @@ mise run preview
 mise run generate
 ```
 
-#### Dev Containerについて
+#### Dev Containerによる開発環境のセットアップ
 
-> [!WARNING]
-> Dev Containerは現在miseに対応していません。そのため、Dev Containerを使用する場合は、`.mise.toml`を参考に手動で上記の手順を実行してください。
+[Docker](https://docs.docker.com/)コンテナー上に上記と同一の環境を構築して作業することも可能です。
+以下の操作はDockerがインストール済み、かつDockerデーモンを起動していることが前提となります。
+このプロジェクトでは[Dev Container](https://code.visualstudio.com/docs/devcontainers/containers)もご使用いただけます。
+Visual Studio Codeにおける操作フロー例は以下の通りです。
+
+1. Ctrl+Shift+Pを押してから`> Dev Containers: Reopen in Container`を実行します。
+2. Webサーバーが起動したらブラウザで http://localhost:5173 にアクセスします。
+3. 翻訳したファイルの変更を反映させるためにはCtrl+Shift+Bで再ビルドしてください。
+4. 体裁を確認したい場合、Ctrl+Shift+Pを押してから`> Tasks: Run task`を実行し以下のいずれかを選択します。
+    - `textlint-md` : Markdownファイルを翻訳した場合
+    - `textlint-html` : Rustソースコードを翻訳した場合
+5. 自動修正を実施したい場合も同様に以下から選択します。
+    - `textlint-md:fix` : Markdownファイルを自動修正します。
+    - Rustコードの自動修正は対応していなため、該当箇所を手動で修正してください。
 
-上記のローカル環境を構築するDockerfileも整備しております。詳細は[.devcontainer/README.md](.devcontainer/README.md)をご参照ください。
+`> Tasks: Run task`はDocker環境でなく、miseで環境構築した際にも使用できます。

.vscode/tasks.json

@@ -0,0 +1 @@
+VITE_LISTEN_ALL_ADDRESSES=true  # 開発用にViteが全てのアドレスでlistenするかどうか

CONTRIBUTING.md

@@ -30,4 +30,7 @@ export default defineConfig({
 			},
 		},
 	},
+	server: {
+		host: process.env.VITE_LISTEN_ALL_ADDRESSES === 'true'
+	},
 });