i18n(ja): translated components section + alpha (#2384)

Co-authored-by: HiDeoo <[email protected]>

docs/astro.config.mjs

@@ -137,6 +137,7 @@ export default defineConfig({
 						fr: 'Composants',
 						ru: 'Компоненты',
 						ko: '컴포넌트',
+						ja: 'コンポーネント',
 					},
 					autogenerate: { directory: 'components' },
 				},

docs/src/content/docs/ja/components/asides.mdx

@@ -0,0 +1,155 @@
+---
+title: 補足情報
+description: Starlightで補足情報を使用して、ページのメインコンテンツの横に補足情報を表示する方法を学びます。
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+ページのメインコンテンツの横に補足情報を表示するには、`<Aside>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+<Aside slot="preview">
+    `<Aside>`に重要ではない補足情報を含めます。
+</Aside>
+</Preview>
+
+## インポート
+
+```tsx
+import { Aside } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+`<Aside>`コンポーネントを使用して補足情報（「アドモニション」や「コールアウト」とも呼ばれる）を表示します。
+
+`<Aside>`にはオプションの[`type`](#type)属性があり、これによって補足情報の色、アイコン、およびデフォルトのタイトルが制御されます。
+
+<Preview>
+
+````mdx
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside>補足情報のコンテンツ。</Aside>
+
+<Aside type="caution">注意が必要なコンテンツ。</Aside>
+
+<Aside type="tip">
+
+補足情報には他のコンテンツも対応しています。
+
+```js
+// たとえば、コードスニペットなど。
+```
+
+</Aside>
+
+<Aside type="danger">パスワードを誰にも教えないでください。</Aside>
+````
+
+<Fragment slot="markdoc">
+
+````markdoc
+{% aside %}
+補足情報のコンテンツ。
+{% /aside %}
+
+{% aside type="caution" %}
+注意が必要なコンテンツ。
+{% /aside %}
+
+{% aside type="tip" %}
+補足情報には他のコンテンツも対応しています。
+
+```js
+// たとえば、コードスニペットなど。
+```
+{% /aside %}
+
+{% aside type="danger" %}
+パスワードを誰にも教えないでください。
+{% /aside %}
+````
+
+</Fragment>
+
+<Fragment slot="preview">
+
+    <Aside>補足情報のコンテンツ。</Aside>
+
+    <Aside type="caution">注意が必要なコンテンツ。</Aside>
+
+    <Aside type="tip">
+
+    補足情報には他のコンテンツも対応しています。
+
+    ```js
+    // たとえば、コードスニペットなど。
+    ```
+    </Aside>
+
+    <Aside type="danger">パスワードを誰にも教えないでください。</Aside>
+
+</Fragment>
+
+</Preview>
+
+Starlightは、`<Aside>`コンポーネントの代替として、MarkdownとMDXで補足情報をレンダリングするためのカスタム構文も提供しています。
+カスタム構文の詳細については、["MarkdownでのContent作成"](/ja/guides/authoring-content/#補足情報)ガイドを参照してください。
+
+### カスタムタイトルの使用
+
+[`title`](#title)属性を使用して、デフォルトの補足情報タイトルを上書きできます。
+
+<Preview>
+
+```mdx 'title="注意してください！"'
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside type="caution" title="注意してください！">
+	カスタムタイトル*付きの*警告補足情報。
+</Aside>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'title="注意してください！"'
+{% aside type="caution" title="注意してください！" %}
+カスタムタイトル*付きの*警告補足情報。
+{% /aside %}
+```
+
+</Fragment>
+
+<Aside slot="preview" type="caution" title="注意してください！">
+	カスタムタイトル*付きの*警告補足情報。
+</Aside>
+
+</Preview>
+
+## `<Aside>` プロパティ
+
+**実装:** [`Aside.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Aside.astro)
+
+`<Aside>`コンポーネントは以下のプロパティを受け入れます：
+
+### `type`
+
+**型:** `'note' | 'tip' | 'caution' | 'danger'`  
+**デフォルト:** `'note'`
+
+表示する補足情報のタイプ：
+
+- `note`補足情報（デフォルト）は青色で、情報アイコンを表示します。
+- `tip`補足情報は紫色で、ロケットアイコンを表示します。
+- `caution`補足情報は黄色で、三角形の警告アイコンを表示します。
+- `danger`補足情報は赤色で、八角形の警告アイコンを表示します。
+
+### `title`
+
+**型:** `string`
+
+補足情報に表示するタイトル。
+`title`が設定されていない場合、現在の補足情報に`type`のデフォルトタイトルが使用されます。

docs/src/content/docs/ja/components/badges.mdx

@@ -0,0 +1,150 @@
+---
+title: バッジ
+description: Starlightでバッジを使用して追加の情報を表示する方法を学びましょう。
+---
+
+import { Badge } from '@astrojs/starlight/components';
+
+ステータスやカテゴリーのような小さな情報を表示するには、`<Badge>`コンポーネントを使用します。
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Badge slot="preview" text="新着" />
+
+</Preview>
+
+## インポート
+
+```tsx
+import { Badge } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+バッジを表示するには、`<Badge>`コンポーネントを使用し、表示したい内容を[`text`](#text)属性に渡します。
+
+デフォルトでは、バッジはサイトのテーマのアクセントカラーを使用します。
+組み込みのバッジカラーを使用するには、[`variant`](#variant)属性をサポートされている値のいずれかに設定します。
+
+<Preview>
+
+```mdx
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="ノート" variant="note" />
+<Badge text="成功" variant="success" />
+<Badge text="ヒント" variant="tip" />
+<Badge text="注意" variant="caution" />
+<Badge text="危険" variant="danger" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% badge text="ノート" variant="note" /%}
+{% badge text="危険" variant="success" /%}
+{% badge text="ヒント" variant="tip" /%}
+{% badge text="注意" variant="caution" /%}
+{% badge text="危険" variant="danger" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="ノート" variant="note" />
+	<Badge text="成功" variant="success" />
+	<Badge text="ヒント" variant="tip" />
+	<Badge text="注意" variant="caution" />
+	<Badge text="危険" variant="danger" />
+</Fragment>
+
+</Preview>
+
+### 異なるサイズの使用
+
+[`size`](#size)属性を使用してバッジのテキストサイズを制御します。
+
+<Preview>
+
+```mdx /size="\w+"/
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="新着" size="small" />
+<Badge text="新着かつ改良" size="medium" />
+<Badge text="新着、改良、もっと大きく" size="large" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc /size="\w+"/
+{% badge text="新着" size="small" /%}
+{% badge text="新着かつ改良" size="medium" /%}
+{% badge text="新着、改良、もっと大きく" size="large" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="新着" size="small" />
+	<Badge text="新着かつ改良" size="medium" />
+	<Badge text="新着、改良、もっと大きく" size="large" />
+</Fragment>
+
+</Preview>
+
+### バッジのカスタマイズ
+
+カスタムCSSを使用して、`class`や`style`などの他の`<span>`属性を使用してバッジをカスタマイズします。
+
+<Preview>
+
+```mdx "style={{ fontStyle: 'italic' }}"
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="カスタム" variant="success" style={{ fontStyle: 'italic' }} />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'style="font-style: italic;"'
+{% badge text="カスタム" variant="success" style="font-style: italic;" /%}
+```
+
+</Fragment>
+
+<Badge
+	slot="preview"
+	text="カスタム"
+	variant="success"
+	style={{ fontStyle: 'italic' }}
+/>
+
+</Preview>
+
+## `<Badge>` プロパティ
+
+**実装:** [`Badge.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Badge.astro)
+
+`<Badge>`コンポーネントは、以下のプロパティおよびその他の[`<span>`要素の属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes)を受け付けます。
+
+### `text`
+
+**必須**  
+**型:** `string`
+
+バッジに表示するテキスト内容。
+
+### `variant`
+
+**型:** `'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'`  
+**デフォルト:** `'default'`
+
+使用するバッジのカラーバリアント: `note` (青), `tip` (紫), `danger` (赤), `caution` (オレンジ), `success` (緑), または `default` (テーマのアクセントカラー)。
+
+### `size`
+
+**型:** `'small' | 'medium' | 'large'`
+
+表示するバッジのサイズを定義します。