i18n(ja): translated components section + alpha

docs/astro.config.mjs

@@ -136,6 +136,7 @@ export default defineConfig({
 					translations: {
 						fr: 'Composants',
 						ko: '컴포넌트',
+						ja: 'コンポーネント',
 					},
 					autogenerate: { directory: 'components' },
 				},

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

@@ -0,0 +1,154 @@
+---
+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="New" />
+
+</Preview>
+
+## インポート
+
+```tsx
+import { Badge } from '@astrojs/starlight/components';
+```
+
+## 使用方法
+
+バッジを表示するには、`<Badge>`コンポーネントを使用し、表示したい内容を[`text`](#text)属性に渡します。
+
+デフォルトでは、バッジはサイトのテーマのアクセントカラーを使用します。
+組み込みのバッジカラーを使用するには、[`variant`](#variant)属性をサポートされている値のいずれかに設定します。
+
+<Preview>
+
+```mdx
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="Note" variant="note" />
+<Badge text="Success" variant="success" />
+<Badge text="Tip" variant="tip" />
+<Badge text="Caution" variant="caution" />
+<Badge text="Danger" variant="danger" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% badge text="Note" variant="note" /%}
+{% badge text="Success" variant="success" /%}
+{% badge text="Tip" variant="tip" /%}
+{% badge text="Caution" variant="caution" /%}
+{% badge text="Danger" variant="danger" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="Note" variant="note" />
+	<Badge text="Success" variant="success" />
+	<Badge text="Tip" variant="tip" />
+	<Badge text="Caution" variant="caution" />
+	<Badge text="Danger" variant="danger" />
+</Fragment>
+
+</Preview>
+
+### 異なるサイズの使用
+
+[`size`](#size)属性を使用してバッジのテキストサイズを制御します。
+
+<Preview>
+
+```mdx /size="\w+"/
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="New" size="small" />
+<Badge text="New and improved" size="medium" />
+<Badge text="New, improved, and bigger" size="large" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc /size="\w+"/
+{% badge text="New" size="small" /%}
+{% badge text="New and improved" size="medium" /%}
+{% badge text="New, improved, and bigger" size="large" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="New" size="small" />
+	<Badge text="New and improved" size="medium" />
+	<Badge text="New, improved, and bigger" size="large" />
+</Fragment>
+
+</Preview>
+
+### バッジのカスタマイズ
+
+カスタムCSSを使用して、`class`や`style`などの他の`<span>`属性を使用してバッジをカスタマイズします。
+
+<Preview>
+
+```mdx "style={{ fontStyle: 'italic' }}"
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'style="font-style: italic;"'
+{% badge text="Custom" variant="success" style="font-style: italic;" /%}
+```
+
+</Fragment>
+
+<Badge
+	slot="preview"
+	text="Custom"
+	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/en-US/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'`
+
+表示するバッジのサイズを定義します。