Merge branch 'main' into tabs

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

@@ -0,0 +1,158 @@
+---
+title: Encarts
+description: Apprenez à utiliser les encarts dans Starlight pour afficher des informations secondaires à côté du contenu principal d'une page.
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+Pour afficher des informations secondaires à côté du contenu principal d'une page, utilisez le composant `<Aside>`.
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Aside slot="preview">
+Incluez des informations supplémentaires non essentielles avec le composant `<Aside>`.
+</Aside>
+
+</Preview>
+
+## Import
+
+```tsx
+import { Aside } from '@astrojs/starlight/components';
+```
+
+## Utilisation
+
+Affichez un encart (également connus sous le nom de « admonition » ou « aside » en anglais) en utilisant le composant `<Aside>`.
+
+Le composant `<Aside>` peut avoir un attribut facultatif [`type`](#type), qui contrôle la couleur, l'icône et le titre par défaut de l'encart.
+
+<Preview>
+
+````mdx
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside>Un peu de contenu dans un encart.</Aside>
+
+<Aside type="caution">Quelques mises en garde.</Aside>
+
+<Aside type="tip">
+
+D'autres contenus sont également pris en charge dans les encarts.
+
+```js
+// Un extrait de code, par exemple.
+```
+
+</Aside>
+
+<Aside type="danger">Ne communiquez votre mot de passe à personne.</Aside>
+````
+
+<Fragment slot="markdoc">
+
+````markdoc
+{% aside %}
+Un peu de contenu dans un encart.
+{% /aside %}
+
+{% aside type="caution" %}
+Quelques mises en garde.
+{% /aside %}
+
+{% aside type="tip" %}
+D'autres contenus sont également pris en charge dans les encarts.
+
+```js
+// Un extrait de code, par exemple.
+```
+{% /aside %}
+
+{% aside type="danger" %}
+Ne communiquez votre mot de passe à personne.
+{% /aside %}
+````
+
+</Fragment>
+
+<Fragment slot="preview">
+
+    <Aside>Un peu de contenu dans un encart.</Aside>
+
+    <Aside type="caution">Quelques mises en garde.</Aside>
+
+    <Aside type="tip">
+
+    D'autres contenus sont également pris en charge dans les encarts.
+
+    ```js
+    // Un extrait de code, par exemple.
+    ```
+
+    </Aside>
+
+    <Aside type="danger">Ne communiquez votre mot de passe à personne.</Aside>
+
+</Fragment>
+
+</Preview>
+
+Starlight fournit également une syntaxe personnalisée pour afficher des encarts dans du contenu Markdown et MDX comme alternative au composant `<Aside>`.
+Voir le guide [« Création de contenu en Markdown »](/fr/guides/authoring-content/#encarts) pour plus de détails sur la syntaxe personnalisée.
+
+### Utiliser des titres personnalisés
+
+Remplacez les titres par défaut des encarts en utilisant l'attribut [`title`](#title).
+
+<Preview>
+
+```mdx 'title="Attention !"'
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside type="caution" title="Attention !">
+	Un encart d'avertissement *avec* un titre personnalisé.
+</Aside>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'title="Attention !"'
+{% aside type="caution" title="Attention !" %}
+Un encart d'avertissement *avec* un titre personnalisé.
+{% /aside %}
+```
+
+</Fragment>
+
+<Aside slot="preview" type="caution" title="Attention !">
+	Un encart d'avertissement *avec* un titre personnalisé.
+</Aside>
+
+</Preview>
+
+## Props de `<Aside>`
+
+**Implémentation :** [`Aside.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Aside.astro)
+
+Le composant `<Aside>` accepte les props suivantes :
+
+### `type`
+
+**Type :** `'note' | 'tip' | 'caution' | 'danger'`  
+**Par défaut :** `'note'`
+
+Le type d'encart à afficher :
+
+- L'encart `note` (par défaut) est bleu et affiche une icône d'information.
+- L'encart `tip` est violet et affiche une icône de fusée.
+- L'encart `caution` est jaune et affiche une icône d'avertissement triangulaire.
+- L'encart `danger` est rouge et affiche une icône d'avertissement octogonale.
+
+### `title`
+
+**Type :** `string`
+
+Le titre de l'encart à afficher.
+Si `title` n'est pas défini, le titre par défaut du `type` de l'encart en cours sera utilisé.

docs/src/content/docs/ko/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>` 컴포넌트를 사용하여 배지를 표시하고 표시할 콘텐츠를 `<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>
+
+### 배지 사용자 정의
+
+`class` 또는 `style`과 같은 다른 `<span>` 속성을 사용자 정의 CSS와 함께 사용하여 배지를 사용자 정의합니다.
+
+<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/ko/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'`
+
+표시할 배지의 크기를 정의합니다.