i18n(ja): Update tutorial/1-setup (#7600)

* i18n(ja): Update tutorial/1-setup/index.mdx * i18n(ja): Update tutorial/1-setup/1.mdx * 5bbe1fc * f519527 * 84d5090 * f519527 * i18n(ja): Update tutorial/1-setup/4.mdx * i18n(ja): Update tutorial/1-setup/5.mdx --------- Co-authored-by: Yan <[email protected]>
withastro · Mar 26, 2024 · e938d9e · e938d9e
1 parent 08ce911
commit e938d9e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 24 deletions.
diff --git a/src/content/docs/ja/tutorial/1-setup/1.mdx b/src/content/docs/ja/tutorial/1-setup/1.mdx
@@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - Astroウェブサイトの作成に使用するツールをインストールする
@@ -52,9 +51,9 @@ v18.14.1
 このチュートリアルでは**VS Code**を使用しますが、お使いのオペレーティングシステムに対応したエディタであれば何でも構いません。
 :::
 
+<Steps>
 1. [VS Code](https://code.visualstudio.com/#alt-downloads)またはお好みのコードエディタをダウンロードしてインストールしてください。
-
-
+</Steps>
 
 
 <Box icon="question-mark">

diff --git a/src/content/docs/ja/tutorial/1-setup/2.mdx b/src/content/docs/ja/tutorial/1-setup/2.mdx
@@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - `create astro` セットアップウィザードを実行して、新しいAstroプロジェクトを作成する
@@ -25,6 +24,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 新しいAstroサイトを作成するおすすめの方法は、`create astro`セットアップウィザードを使用することです。
 
+<Steps>
 1. ターミナルのコマンドラインで、お好みのパッケージマネージャーを使用して次のコマンドを実行します。
 
     <PackageManagerTabs>
@@ -57,21 +57,23 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 4. スターターテンプレートの短いリストが表示されます。矢印キー（上下）を使用して「Empty」テンプレートに移動し、リターン（エンター）キーを押して選択を確定します。
 
-5. プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、`y`を入力します。
+5. プロンプトがTypeScriptを使用する予定かどうか尋ねるので、`n`を入力します。
 
-6. プロンプトがTypeScriptを使用する予定かどうか尋ねるので、`n`を入力します。
+6. プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、`y`を入力します。
 
 7. プロンプトが「新しいgitリポジトリを初期化しますか？（Would you like to initialize a new git repository?）」と尋ねるので、`y`を入力します。
+</Steps>
 
 インストールウィザードが完了したら、このターミナルはもう不要です。VS Codeを開いて続きの作業をおこないます。
 
 ## VS Codeでプロジェクトを開く
 
-1. VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。
+<Steps>
+8. VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。
 
-2. Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、[Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。
+9. Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、[Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。
 
-3. 以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。
+10. 以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。
 
     ```sh
     user@machine:~/tutorial$
@@ -80,18 +82,19 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     :::tip[キーボードショートカット]
     ターミナルの表示と非表示を切り替えるには、<kbd>Ctrl + J</kbd>（macOSでは<kbd>Cmd ⌘ + J</kbd>）を使用します。
     :::
+</Steps>
 
 これで、コンピュータのターミナルアプリではなくウィンドウ内のターミナルを使用して、チュートリアルの残りの部分を進められるようになりました。
 
 
-
 ## Astroをdevモードで実行する
 
 作業中にプロジェクトファイルをウェブサイトとしてプレビューするには、Astroを開発（dev）モードで実行する必要があります。
 
 ### devサーバーを起動する
 
-1. VS Codeのターミナルに以下のコマンドを入力して、Astroのdevサーバーを起動します。
+<Steps>
+11. VS Codeのターミナルに以下のコマンドを入力して、Astroのdevサーバーを起動します。
 
     <PackageManagerTabs>
       <Fragment slot="npm">
@@ -112,18 +115,21 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     </PackageManagerTabs>
 
     Astroがdevモードで実行されていることをターミナル上で確認できるはずです。🚀
+</Steps>
 
 ## ウェブサイトのプレビューを確認する
 
 プロジェクトファイルには、Astroウェブサイトを表示するために必要なすべてのコードが含まれていますが、コードをウェブページとして表示するのはブラウザの役割です。
 
-1. ターミナルウィンドウの`http://localhost`リンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！
+<Steps>
+12. ターミナルウィンドウの`http://localhost`リンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！
 
     （Astroは、ポート4321が使用可能な場合、デフォルトで`http://localhost:4321`を使用します。）
 
     Astroの「Empty Project」スターターウェブサイトは、ブラウザ上では以下のように表示されます。
 
     ![Astroという単語が上部に表示された白い空白のページ。](/tutorial/minimal.png)
+</Steps>
 
 :::tip[Astroのdevサーバーを使用する]
 

diff --git a/src/content/docs/ja/tutorial/1-setup/3.mdx b/src/content/docs/ja/tutorial/1-setup/3.mdx
@@ -12,15 +12,15 @@ import Box from '~/components/tutorial/Box.astro';
 import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - 新しいウェブサイトに最初の編集を加える
 </PreCheck>
 
 ## ホームページを編集する
 
+<Steps>
 1. コードエディターのファイルエクスプローラーペインで`src/pages/index.astro`に移動し、これをクリックしてファイルの内容を編集可能なタブで開きます。
 
     `index.astro`ファイルの内容は以下のようになっています。
@@ -32,7 +32,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     <html lang="en">
       <head>
         <meta charset="utf-8" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} >
         <title>Astro</title>
@@ -55,6 +55,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     ```
 
 3. ブラウザ上のプレビューを確認すると、ページの内容が新しいテキストに更新されているはずです。
+</Steps>
 
 おめでとうございます！あなたはもうAstroの開発者です！
 

diff --git a/src/content/docs/ja/tutorial/1-setup/4.mdx b/src/content/docs/ja/tutorial/1-setup/4.mdx
@@ -10,8 +10,7 @@ import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - プロジェクトリポジトリをオンラインに保存する
@@ -27,20 +26,21 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 ローカルのコードをGitHubに保存する方法はいくつかありますが、このチュートリアルでは、コマンドラインのgitを使わない方法を紹介します。
 
+<Steps>
 1. ブラウザでGitHub.comにログインし、画面右上の<kbd>+</kbd>をクリックして新しいリポジトリを作成します。
 
 2. リポジトリの名前を決めます。プロジェクトフォルダーと同じ名前である必要はありません。
 
 3. いくつかのオプションが表示されますが、デフォルトのままで構いません。下にスクロールして<kbd>Create Repository</kbd>ボタンをクリックします。
 
 4. 次におこなうべきセットアップの手順が複数表示されますが、これらは必要ありません。リポジトリのURLをメモしておいてください。このままページを閉じて構いません。
-
+</Steps>
 
 ## ローカルのコードをGitHubにコミットする
 
 一つ前のセクションで、ページのコンテンツを変更しました。プロジェクトファイルが変更されたことにより、VS Codeの「ソース」メニューアイコンの上に数字が表示されているはずです。このソースタブは、GitHub上のファイルを更新するために定期的にアクセスする場所です。
 
-
+<Steps>
 1. ソース管理タブをクリックすると、変更されたファイルのリストが表示されます。`git`をインストールする必要があるというメッセージが表示された場合は、指示に従ってからVS Codeをリロードします。
 
 2. コミットメッセージの上にある「3点リーダー」<kbd>•••</kbd>メニューをクリックし、<kbd>リモート</kbd> > <kbd>リモートを追加する</kbd>を選択します。
@@ -54,7 +54,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 6. ステージされたコミットがないというメッセージが表示され、ステージするかどうか尋ねられる場合があります。<kbd>常時</kbd>をクリックして続行します。
 
 7. 最後に、変更されたファイルのリストが<kbd>公開</kbd>ボタンに置き換わります。これをクリックして、コミットした変更をGitHubに送信します。
-
+</Steps>
 
 ### GitHubでプロジェクトを確認する
 

diff --git a/src/content/docs/ja/tutorial/1-setup/5.mdx b/src/content/docs/ja/tutorial/1-setup/5.mdx
@@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - GitHubのリポジトリを新しいNetlifyアプリとして追加する
@@ -28,6 +27,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 ## 新しいNetlifyサイトを作成する
 
+<Steps>
 1. もしまだであれば、[Netlify](https://netlify.com)で無料アカウントを作成します。
 
     ユーザー名をメモしておきます。`https://app.netlify.com/teams/username`で、ダッシュボードと作成済みのサイトが表示されます。
@@ -37,6 +37,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     Gitプロバイダーに接続するように求められます。GitHubを選択し、画面の指示に従ってGitHubアカウントを認証します。次に、提供されたリストからAstroプロジェクトのGitHubリポジトリを選択します。
 
 3. 最後のステップでは、Netlifyがアプリのサイト設定を表示します。Astroプロジェクトの場合はデフォルトのままで問題ないため、下にスクロールして<kbd>Deploy site</kbd>をクリックします。
+</Steps>
 
 おめでとうございます、Astroウェブサイトが作成できました！
 

diff --git a/src/content/docs/ja/tutorial/1-setup/index.mdx b/src/content/docs/ja/tutorial/1-setup/index.mdx
@@ -10,6 +10,7 @@ i18nReady: true
 import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 これから何を作成するのかわかったところで、必要なツールを準備していきましょう！
 
@@ -22,23 +23,28 @@ import Box from '~/components/tutorial/Box.astro';
 <summary>以下の手順に従って、ユニット2に進んでください！</summary>
 
 **StackBlitzを設定する**
+
+<Steps>
 1. [astro.new](https://astro.new)にアクセスし、「Empty Project」テンプレートの「Open in StackBlitz」ボタンをクリックします。
 
 2. 右上にある「Sign in」ボタンをクリックして、GitHubの認証情報を使いログインします。
 
 3. StackBlitzのエディタウィンドウの左上にある「Fork」をクリックして、テンプレートを保存します。
 
 4. プロジェクトが読み込まれるまで待つと、「Empty Project」スターターのライブプレビューが表示されます。
+</Steps>
 
 **変更を加える**
 
 ファイルペインに`src/pages/index.astro`があるはずです。これをクリックして開き、[初めてのAstroコードを書く](/ja/tutorial/1-setup/3/)に従ってこのファイルを変更します。
 
 **GitHubリポジトリを作成する**
 
+<Steps>
 1. ファイルリストの一番上にある<kbd>Connect Repository</kbd>ボタンを押して、新しいリポジトリの名前を入力し、<kbd>Create repo & push</kbd>をクリックします。
 
 2. GitHubにコミットすべき変更があると、ワークスペースの左上に「Commit」ボタンが表示されます。これをクリックすると、コミットメッセージを入力してリポジトリを更新できます。
+</Steps>
 
 **サイトをデプロイする**