Dev Container の追加 (#55)

Co-authored-by: 3w36zj6 <[email protected]>

Author: kimushun1101

.devcontainer/Dockerfile

@@ -0,0 +1,19 @@
+# Rust v1.77 as a base image
+FROM rust:1.77-slim
+
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    curl \
+    # install python3, jinja2 pyyaml
+    python3 \
+    python3-pip \
+    && python3 -m pip install --break-system-packages jinja2 PyYAML \
+    # install nodejs and serve
+    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && npm install -g [email protected] \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/* \
+
+WORKDIR /workspace
+ENV PATH="/root/.cargo/bin:${PATH}"

.devcontainer/README.md

@@ -0,0 +1,30 @@
+# ローカル環境を構築するDockerfile
+
+[Docker](https://docs.docker.com/)を用いてWebページの仕上がりを確認できます。
+以下の操作はDockerがインストール済み、かつDockerデーモンを起動していることが前提となります。
+
+
+## VS Codeを使用している場合
+
+[Dev Container](https://code.visualstudio.com/docs/devcontainers/containers)を使用します。
+Visual Studio Codeでtypst-jp.github.ioディレクトリを開き、以下の操作を実施してください。
+1. Ctrl+Shift+Pから`> Dev Containers: Reopen in Container`を実行
+2. Webサーバーが起動したらブラウザで http://localhost:3000 に接続
+3. ページを更新した際には、Ctrl+Shift+Pから`> Tasks: Run task`を実行し`gen: typst-jp documentation`を選択。ビルドが完了したらブラウザを更新。
+
+
+## 別のエディターを使用している場合
+
+ターミナルからDockerfileをビルドして、コマンド実行します。
+typst-jp.github.io ディレクトリ上で以下のコマンドを実行してください。
+1. Docker imageをビルドしてコンテナを作成
+    ```
+    docker build . -f .devcontainer/Dockerfile -t typst-jp-doc
+    docker run --name typst-jp-doc -p 3000:3000 -it -v "$(pwd):/workspace" -w /workspace --rm typst-jp-doc /bin/bash
+    ```
+2. Dockerコンテナ内でページを生成
+    ```
+    cargo test --package typst-docs --lib -- tests::test_docs --exact --nocapture && python3 ./gen.py && npx serve -n ./dist
+    ```
+3. Webサーバーが起動したらブラウザで http://localhost:3000 に接続
+4. ファイルを更新した際には、2 のコマンドを一旦 Ctrl+C で終了して再度実行、その後ブラウザを更新。

.devcontainer/devcontainer.json

@@ -0,0 +1,11 @@
+{
+  "name": "typst-jp-domumentation",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },
+  "forwardPorts": [3000],
+  "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",
+  "workspaceFolder": "/workspace",
+  "postStartCommand": "cargo test --package typst-docs --lib -- tests::test_docs --exact --nocapture && python3 ./gen.py && npx serve -n ./dist"
+}

.gitignore

@@ -1,5 +1,5 @@
 # General
-.vscode
+# .vscode
 .idea
 _things
 desktop.ini

.vscode/tasks.json

@@ -0,0 +1,11 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "gen: typst-jp documentation",
+      "type": "shell",
+      "command": "cargo test --package typst-docs --lib -- tests::test_docs --exact --nocapture && python3 ./gen.py && echo reload or open http://localhost:3000",
+      "problemMatcher": []
+    }
+  ]
+}

CONTRIBUTING.md

@@ -50,6 +50,8 @@ python ./gen.py
 
 Node.jsがインストールされている場合は、`npx serve ./dist`でプレビューできます。
 
+上記のローカル環境を構築するDockerfileも整備しております。詳細は[.devcontainer/README.md](.devcontainer/README.md)をご参照ください。
+
 ## スタイルマニュアル
 
 スタイルマニュアルでは、当プロジェクトにおける翻訳の品質確保のための、統一したスタイルの参照基準を提供します。具体的には、基本、文体、表記、用語の4つの観点から、翻訳の際に留意すべき事項を示します。