Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(fr): Update multiple files with EC markers #1114

Merged
merged 2 commits into from
Nov 23, 2023
Merged

i18n(fr): Update multiple files with EC markers #1114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26be13d
i18n(fr): update multiple files with ec markers
HiDeoo Nov 23, 2023
8cb9432
Merge branch 'main' into hd-i18n-fr-0-13-0-ec-markers
HiDeoo Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions docs/src/content/docs/fr/guides/components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Ces balises ressemblent à des balises HTML mais commencent par une lettre majus

```mdx
---
# src/content/docs/index.mdx
# src/content/docs/example.mdx
title: Bienvenue dans ma documentation
---

Expand All @@ -38,7 +38,7 @@ Pour en savoir plus sur [l'utilisation de composants dans MDX](https://docs.astr
Starlight applique des styles par défaut à votre contenu Markdown, par exemple en ajoutant une marge entre les éléments.
Si ces styles entrent en conflit avec l'apparence de votre composant, définissez la classe `not-content` sur votre composant pour les désactiver.

```astro
```astro 'class="not-content"'
---
// src/components/Example.astro
---
Expand All @@ -61,6 +61,8 @@ Vous pouvez afficher une interface à onglets en utilisant les composants `<Tabs
Chaque `<TabItem>` doit avoir un `label` à afficher aux utilisateurs.

```mdx
# src/content/docs/example.mdx

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
Expand All @@ -86,6 +88,8 @@ Enveloppez plusieurs cartes dans le composant `<CardGrid>` pour afficher les car
Une `<Card>` nécessite un `title` et peut optionellement inclure un attribut `icon` fixé au nom de [l'une des icônes intégrées de Starlight](#toutes-les-icônes).

```mdx
# src/content/docs/example.mdx

import { Card, CardGrid } from '@astrojs/starlight/components';

<Card title="Check this out">
Expand Down Expand Up @@ -138,6 +142,8 @@ Une `<LinkCard>` nécessite les attributs `title` et [`href`](https://developer.
Regroupez plusieurs composants `<LinkCard>` dans `<CardGrid>` pour afficher les cartes côte à côte lorsqu'il y a suffisamment d'espace.

```mdx
# src/content/docs/example.mdx

import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<LinkCard
Expand Down Expand Up @@ -183,6 +189,8 @@ Starlight fournit un ensemble d'icônes courantes que vous pouvez afficher dans
Chaque `<Icon>` nécessite un [`name`](#toutes-les-icônes) et peut optionellement inclure un attribut `label`, `size` et `color`.

```mdx
# src/content/docs/example.mdx

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" color="goldenrod" size="2rem" />
Expand Down
6 changes: 3 additions & 3 deletions docs/src/content/docs/fr/guides/css-and-tailwind.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Personnalisez les styles appliqués à votre site Starlight en fournissant des f

2. Ajoutez le chemin vers votre fichier CSS au tableau `customCss` de Starlight dans votre configuration `astro.config.mjs` :

```js
```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand All @@ -32,8 +32,8 @@ Personnalisez les styles appliqués à votre site Starlight en fournissant des f
starlight({
title: 'Documentation avec CSS personnalisé',
customCss: [
// Chemin relatif vers votre fichier CSS personnalisé
'./src/styles/custom.css',
+ // Chemin relatif vers votre fichier CSS personnalisé
+ './src/styles/custom.css',
],
}),
],
Expand Down
85 changes: 51 additions & 34 deletions docs/src/content/docs/fr/guides/customization.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ L’ajout d’un logo personnalisé à l’en-tête du site est un moyen rapide

2. Ajoutez le chemin vers votre logo à votre option de configuration Starlight [`logo.src`](/fr/reference/configuration/#logo) dans `astro.config.mjs`:

```js
```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand All @@ -37,7 +37,7 @@ L’ajout d’un logo personnalisé à l’en-tête du site est un moyen rapide
starlight({
title: 'Docs Avec Mon Logo',
logo: {
src: './src/assets/mon-logo.svg',
+ src: './src/assets/mon-logo.svg',
},
}),
],
Expand All @@ -48,7 +48,7 @@ Par défaut, le logo sera affiché à côté du nom de votre site (option `title
Si l’image de votre logo inclut déjà le titre du site, vous pouvez masquer visuellement le texte du titre en définissant l’option `replacesTitle` à `true`.
Le texte du titre (`title`) le texte sera toujours inclus pour les lecteurs d’écran afin que l’en-tête reste accessible.

```js
```js {5}
starlight({
title: 'Docs Avec Mon Logo',
logo: {
Expand Down Expand Up @@ -77,12 +77,12 @@ Vous pouvez afficher différentes versions de votre logo en modes clair et sombr

2. Ajouter les chemins vers vos variantes de logo dans les options `light` (clair) et `dark` (sombre) en remplacement de l’option `src` dans `astro.config.mjs`:

```js
```diff lang="js"
starlight({
title: 'Docs Avec Mon Logo',
logo: {
light: './src/assets/logo-clair.svg',
dark: './src/assets/logo-sombre.svg',
+ light: './src/assets/logo-clair.svg',
+ dark: './src/assets/logo-sombre.svg',
},
}),
```
Expand All @@ -91,7 +91,7 @@ Vous pouvez afficher différentes versions de votre logo en modes clair et sombr

Starlight possède une prise en charge intégrée pour la génération d’un plan de site. Activez la génération du plan de site en définissant votre URL comme `site` dans `astro.config.mjs`:

```js
```js {4}
// astro.config.mjs

export default defineConfig({
Expand All @@ -107,7 +107,7 @@ Par défaut, les pages Starlight utilisent une mise en page avec une barre laté
Vous pouvez appliquer une mise en page plus large sans barres latérales en définissant [`template: splash`](/fr/reference/frontmatter/#template) dans le frontmatter de votre page.
Cela fonctionne particulièrement bien pour les pages d’atterissage et vous pouvez le voir en action sur la [page d’accueil de ce site](/fr/).

```md
```md {5}
---
# src/content/docs/index.md

Expand All @@ -126,7 +126,7 @@ Par défaut, les titres `<h2>` et `<h3>` sont inclus dans la table des matières
<Tabs>
<TabItem label="Frontmatter">

```md
```md {4-6}
---
# src/content/docs/example.md
title: Page avec seulement les H2s dans la table des matières
Expand All @@ -139,13 +139,13 @@ tableOfContents:
</TabItem>
<TabItem label="Configuration globale">

```js
```js {7}
// astro.config.mjs

defineConfig({
integrations: [
starlight({
title: '',
title: 'Site avec une configuration de table des matières personnalisée',
delucis marked this conversation as resolved.
Show resolved Hide resolved
tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 2 },
}),
],
Expand All @@ -160,7 +160,7 @@ Désactivez la table des matières complètement en définissant l’option `tab
<Tabs>
<TabItem label="Frontmatter">

```md
```md {4}
---
# src/content/docs/example.md
title: Page sans table des matières
Expand All @@ -171,7 +171,7 @@ tableOfContents: false
</TabItem>
<TabItem label="Configuration globale">

```js
```js {7}
// astro.config.mjs

defineConfig({
Expand All @@ -194,7 +194,7 @@ Starlight supporte par défaut l’ajout de liens vers vos comptes de médias so
Vous pouvez retrouver une liste complète des icônes de liens prises en charge dans la [référence de configuration](/fr/reference/configuration/#social).
Faites-nous savoir sur GitHub ou Discord si vous avez besoin de la prise en charge d’un autre service !

```js
```js {9-12}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand Down Expand Up @@ -230,7 +230,7 @@ Si votre projet Starlight ne se trouve pas à la racine de votre dépôt, inclue

Cet exemple montre le lien d’édition configuré pour les documents Starlight, qui se trouvent dans le sous-répertoire `docs/` sur la branche `main` du dépôt `withastro/starlight` sur GitHub :

```js
```js {9-11}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand Down Expand Up @@ -265,8 +265,9 @@ Vous pouvez personnaliser cela en ajoutant un fichier `404.md` (ou `404.mdx`) à

Vous pouvez utiliser toutes les techniques de mise en page et de personnalisation de Starlight dans votre page 404. Par exemple, la page 404 par défaut utilise la [mise en page `splash`](#mise-en-page) et le composant [`hero`](/fr/reference/frontmatter/#hero) dans son frontmatter :

```md
```md {4,6-8}
---
# src/content/docs/404.md
title: '404'
template: splash
editUrl: false
Expand Down Expand Up @@ -321,7 +322,7 @@ Pour utiliser Google Fonts, suivez le [Guide de configuration de Fontsource](#co

3. Ajoutez le chemin de votre fichier `font-face.css` au tableau `customCss` de Starlight dans `astro.config.mjs` :

```js
```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
Expand All @@ -331,8 +332,8 @@ Pour utiliser Google Fonts, suivez le [Guide de configuration de Fontsource](#co
starlight({
title: 'Site avec polices personnalisées',
customCss: [
// Chemin relatif vers votre fichier CSS @font-face.
'/src/fonts/font-face.css',
+ // Chemin relatif vers votre fichier CSS @font-face.
+ '/src/fonts/font-face.css',
],
}),
],
Expand All @@ -344,23 +345,39 @@ Pour utiliser Google Fonts, suivez le [Guide de configuration de Fontsource](#co
Le projet [Fontsource](https://fontsource.org/) simplifie l’utilisation des polices Google et d’autres polices open source.
Il fournit des modules npm que vous pouvez installer pour les polices que vous souhaitez utiliser et inclut des fichiers CSS prêts à l’emploi à ajouter à votre projet.

1. Trouvez la police que vous souhaitez utiliser dans le [catalogue de Fontsource](https://fontsource.org/). Cet exemple utilisera [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif).
1. Trouvez la police que vous souhaitez utiliser dans le [catalogue de Fontsource](https://fontsource.org/). Cet exemple utilisera [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif).

2. Installez le package pour la police choisie. Vous pouvez trouver le nom du package en cliquant sur "Installer" sur la page de police Fontsource.
2. Installez le package pour la police choisie. Vous pouvez trouver le nom du package en cliquant sur "Installer" sur la page de police Fontsource.

<Tabs>
<TabItem label="npm">
```sh npm install @fontsource/ibm-plex-serif ```
</TabItem>
<TabItem label="pnpm">
```sh pnpm install @fontsource/ibm-plex-serif ```
</TabItem>
<TabItem label="Yarn">```sh yarn add @fontsource/ibm-plex-serif ```</TabItem>
</Tabs>
<Tabs>

<TabItem label="npm">

```sh
npm install @fontsource/ibm-plex-serif
```

</TabItem>
<TabItem label="pnpm">

```sh
pnpm install @fontsource/ibm-plex-serif
```

</TabItem>
<TabItem label="Yarn">

```sh
yarn add @fontsource/ibm-plex-serif
```

</TabItem>

</Tabs>
delucis marked this conversation as resolved.
Show resolved Hide resolved

3. Ajoutez les fichiers CSS Fontsource au tableau `customCss` de Starlight dans `astro.config.mjs` :

```js
```diff lang="js"
// astro.config.mjs
import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
Expand All @@ -370,9 +387,9 @@ Il fournit des modules npm que vous pouvez installer pour les polices que vous s
starlight({
title: "Site avec polices personnalisées Fontsource",
customCss: [
// Fichiers Fontsource pour les graisses regular et semi-bold.
"@fontsource/ibm-plex-serif/400.css",
"@fontsource/ibm-plex-serif/600.css",
+ // Fichiers Fontsource pour les graisses regular et semi-bold.
+ "@fontsource/ibm-plex-serif/400.css",
+ "@fontsource/ibm-plex-serif/600.css",
],
}),
],
Expand Down
23 changes: 12 additions & 11 deletions docs/src/content/docs/fr/guides/sidebar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ En combinant les liens et les groupes, vous pouvez créer une grande variété d

Ajoutez un lien vers une page interne ou externe en utilisant un objet avec les propriétés `label` et `link`.

```js
```js "label:" "link:"
starlight({
sidebar: [
// Un lien vers le guide CSS et mise en forme.
Expand Down Expand Up @@ -91,7 +91,7 @@ Ajoutez un groupe en utilisant un objet avec les propriétés `label` et `items`
Le `label` sera utilisé comme en-tête pour le groupe.
Ajoutez des liens ou des sous-groupes au tableau `items`.

```js
```js /^\s*(label:|items:)/
starlight({
sidebar: [
// Un groupe de liens avec le label "Guides".
Expand Down Expand Up @@ -145,7 +145,7 @@ Les pages seront triées par ordre alphabétique en fonction du nom de fichier p

Ajoutez un groupe généré automatiquement en utilisant un objet avec les propriétés `label` et `autogenerate`. La configuration de `autogenerate` doit spécifier le répertoire à utiliser pour les entrées de la barre latérale avec la propriété `directory`. Par exemple, avec la configuration suivante :

```js
```js "label:" "autogenerate:"
starlight({
sidebar: [
{
Expand Down Expand Up @@ -201,8 +201,9 @@ Utilisez le [champ `sidebar` du frontmatter](/fr/reference/frontmatter/#sidebar)

Les options du frontmatter pour la barre latérale vous permettent de définir une [étiquette personnalisée](/fr/reference/frontmatter/#label) ou d'ajouter un [badge](/fr/reference/frontmatter/#badge) à un lien, de [masquer](/fr/reference/frontmatter/#hidden) un lien de la barre latérale, ou de définir une [pondération de tri personnalisée](/fr/reference/frontmatter/#order).

```md
```md "sidebar:"
---
# src/content/docs/example.md
title: Ma page
sidebar:
# Définit une étiquette personnalisée pour le lien dans la barre latérale
Expand Down Expand Up @@ -244,7 +245,7 @@ La configuration du frontmatter `sidebar` n'est utilisée que pour les liens gé

Les liens, groupes et groupes générés automatiquement peuvent inclure une propriété `badge` pour afficher un badge à côté de leurs étiquettes.

```js
```js {10,17}
starlight({
sidebar: [
{
Expand Down Expand Up @@ -310,7 +311,7 @@ Personnalisez le style du badge en utilisant un objet avec les propriétés `tex
La propriété `text` représente le contenu à afficher (par exemple, "Nouveau").
Remplacez le style `default`, qui utilise la couleur d'accentuation de votre site, en définissant la propriété `variant` avec l'une des valeurs suivantes : `note`, `tip`, `danger`, `caution` ou `success`.

```js
```js {10}
starlight({
sidebar: [
{
Expand Down Expand Up @@ -351,7 +352,7 @@ Les liens peuvent aussi inclure une propriété `attrs` pour ajouter des attribu

Dans l'exemple suivant, `attrs` est utilisé pour ajouter un attribut `target="_blank"`, afin que le lien s'ouvre dans un nouvel onglet, et pour appliquer un attribut `style` personnalisé pour mettre en italique l'étiquette du lien :

```js
```js {10}
starlight({
sidebar: [
{
Expand Down Expand Up @@ -394,7 +395,7 @@ La configuration ci-dessus génère la barre latérale suivante :
Utilisez la propriété `translations` sur les liens et les groupes pour traduire l'étiquette du lien ou du groupe pour chaque langue prise en charge en spécifiant une étiquette d'identification de langue [BCP-47](https://www.w3.org/International/questions/qa-choosing-language-tags), par exemple `"en"`, `"ar"` ou `"zh-CN"`, comme clé et l'étiquette traduite comme valeur.
La propriété `label` sera utilisée pour la langue par défaut et pour les langues sans traduction.

```js
```js {5-7,11-13,18-20}
starlight({
sidebar: [
{
Expand Down Expand Up @@ -441,7 +442,7 @@ Parcourir la documentation en portugais brésilien générera la barre latérale

Les groupes de liens peuvent être rétractés par défaut en définissant la propriété `collapsed` à `true`.

```js
```js {5-6}
starlight({
sidebar: [
{
Expand Down Expand Up @@ -474,7 +475,7 @@ La configuration ci-dessus génère la barre latérale suivante :

Les [groupes générés automatiquement](#groupes-générés-automatiquement) respectent la valeur `collapsed` de leur groupe parent :

```js
```js {5-7}
starlight({
sidebar: [
{
Expand Down Expand Up @@ -515,7 +516,7 @@ La configuration ci-dessus génère la barre latérale suivante :

Ce comportement peut être remplacé en définissant la propriété `autogenerate.collapsed`.

```js
```js {5-7} "collapsed: true"
starlight({
sidebar: [
{
Expand Down
Loading