From 26be13d03c895e78618fcc0dd2342fec85568848 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 23 Nov 2023 16:45:25 +0100 Subject: [PATCH] i18n(fr): update multiple files with ec markers --- .../src/content/docs/fr/guides/components.mdx | 12 ++- .../docs/fr/guides/css-and-tailwind.mdx | 6 +- .../content/docs/fr/guides/customization.mdx | 85 +++++++++++-------- docs/src/content/docs/fr/guides/sidebar.mdx | 23 ++--- .../content/docs/fr/reference/frontmatter.md | 21 ++++- .../content/docs/fr/reference/overrides.md | 1 + 6 files changed, 97 insertions(+), 51 deletions(-) diff --git a/docs/src/content/docs/fr/guides/components.mdx b/docs/src/content/docs/fr/guides/components.mdx index 23761d9deef..3637b7c62fa 100644 --- a/docs/src/content/docs/fr/guides/components.mdx +++ b/docs/src/content/docs/fr/guides/components.mdx @@ -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 --- @@ -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 --- @@ -61,6 +61,8 @@ Vous pouvez afficher une interface à onglets en utilisant les composants `` doit avoir un `label` à afficher aux utilisateurs. ```mdx +# src/content/docs/example.mdx + import { Tabs, TabItem } from '@astrojs/starlight/components'; @@ -86,6 +88,8 @@ Enveloppez plusieurs cartes dans le composant `` pour afficher les car Une `` 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'; @@ -138,6 +142,8 @@ Une `` nécessite les attributs `title` et [`href`](https://developer. Regroupez plusieurs composants `` dans `` 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'; ` 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'; diff --git a/docs/src/content/docs/fr/guides/css-and-tailwind.mdx b/docs/src/content/docs/fr/guides/css-and-tailwind.mdx index e204e070db3..6fc57aa0040 100644 --- a/docs/src/content/docs/fr/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/fr/guides/css-and-tailwind.mdx @@ -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'; @@ -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', ], }), ], diff --git a/docs/src/content/docs/fr/guides/customization.mdx b/docs/src/content/docs/fr/guides/customization.mdx index f8f7acce4a2..05c0f6dfb62 100644 --- a/docs/src/content/docs/fr/guides/customization.mdx +++ b/docs/src/content/docs/fr/guides/customization.mdx @@ -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'; @@ -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', }, }), ], @@ -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: { @@ -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', }, }), ``` @@ -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({ @@ -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 @@ -126,7 +126,7 @@ Par défaut, les titres `

` et `

` sont inclus dans la table des matières -```md +```md {4-6} --- # src/content/docs/example.md title: Page avec seulement les H2s dans la table des matières @@ -139,13 +139,13 @@ tableOfContents: -```js +```js {7} // astro.config.mjs defineConfig({ integrations: [ starlight({ - title: '', + title: 'Site avec une configuration de table des matières personnalisée', tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 2 }, }), ], @@ -160,7 +160,7 @@ Désactivez la table des matières complètement en définissant l’option `tab -```md +```md {4} --- # src/content/docs/example.md title: Page sans table des matières @@ -171,7 +171,7 @@ tableOfContents: false -```js +```js {7} // astro.config.mjs defineConfig({ @@ -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'; @@ -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'; @@ -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 @@ -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'; @@ -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', ], }), ], @@ -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. - - - ```sh npm install @fontsource/ibm-plex-serif ``` - - - ```sh pnpm install @fontsource/ibm-plex-serif ``` - - ```sh yarn add @fontsource/ibm-plex-serif ``` - + + + + + ```sh + npm install @fontsource/ibm-plex-serif + ``` + + + + + ```sh + pnpm install @fontsource/ibm-plex-serif + ``` + + + + + ```sh + yarn add @fontsource/ibm-plex-serif + ``` + + + + 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"; @@ -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", ], }), ], diff --git a/docs/src/content/docs/fr/guides/sidebar.mdx b/docs/src/content/docs/fr/guides/sidebar.mdx index cb5611b13d1..0ba8b67b005 100644 --- a/docs/src/content/docs/fr/guides/sidebar.mdx +++ b/docs/src/content/docs/fr/guides/sidebar.mdx @@ -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. @@ -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". @@ -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: [ { @@ -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 @@ -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: [ { @@ -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: [ { @@ -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: [ { @@ -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: [ { @@ -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: [ { @@ -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: [ { @@ -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: [ { diff --git a/docs/src/content/docs/fr/reference/frontmatter.md b/docs/src/content/docs/fr/reference/frontmatter.md index 4ef8ba7ffe0..16b2ea71601 100644 --- a/docs/src/content/docs/fr/reference/frontmatter.md +++ b/docs/src/content/docs/fr/reference/frontmatter.md @@ -5,8 +5,9 @@ description: Une vue d'ensemble des champs du frontmatter par défaut pris en ch Vous pouvez personnaliser des pages Markdown et MDX individuelles dans Starlight en définissant des valeurs dans leur frontmatter. Par exemple, une page normale peut définir les champs `title` et `description` : -```md +```md {3-4} --- +# src/content/docs/example.md title: A propos de ce projet description: En savoir plus sur le projet sur lequel je travaille. --- @@ -42,6 +43,7 @@ Vous pouvez ajouter des balises supplémentaires au champ `` de votre page ```md --- +# src/content/docs/example.md title: A propos de nous head: # Utiliser une balise personnalisée @@ -59,6 +61,7 @@ Personnalisez les niveaux d'en-tête à inclure ou mettez `false` pour cacher la ```md --- +# src/content/docs/example.md title: Pagee avec seulement des H2s dans la table des matières tableOfContents: minHeadingLevel: 2 @@ -68,6 +71,7 @@ tableOfContents: ```md --- +# src/content/docs/example.md title: Page sans table des matières tableOfContents: false --- @@ -92,6 +96,7 @@ Par exemple, cette configuration montre quelques options communes, y compris le ```md --- +# src/content/docs/example.md title: Ma page d'accueil template: splash hero: @@ -115,6 +120,7 @@ Vous pouvez afficher différentes versions de l'image de premier plan en mode cl ```md --- +# src/content/docs/example.md hero: image: alt: Un logo scintillant aux couleurs vives @@ -169,6 +175,7 @@ Par exemple, cette page affiche une bannière comprenant un lien vers `example.c ```md --- +# src/content/docs/example.md title: Page avec une bannière banner: content: | @@ -185,6 +192,7 @@ Remplace la [configuration globale `lastUpdated`](/fr/reference/configuration/#l ```md --- +# src/content/docs/example.md title: Page avec une date de dernière mise à jour personnalisée lastUpdated: 2022-08-09 --- @@ -198,6 +206,7 @@ Remplace la [configuration globale `pagination`](/fr/reference/configuration/#pa ```md --- +# src/content/docs/example.md # Masquer le lien de la page précédente prev: false --- @@ -205,6 +214,7 @@ prev: false ```md --- +# src/content/docs/example.md # Remplacer le texte du lien de la page prev: Poursuivre the tutorial --- @@ -212,6 +222,7 @@ prev: Poursuivre the tutorial ```md --- +# src/content/docs/example.md # Remplacer le lien et le texte de la page prev: link: /unrelated-page/ @@ -227,6 +238,7 @@ La même chose que [`prev`](#prev) mais pour le lien de la page suivante. ```md --- +# src/content/docs/example.md # Masquer le lien de la page suivante next: false --- @@ -241,6 +253,7 @@ Définit si cette page doit être incluse dans l'index de recherche de [Pagefind ```md --- +# src/content/docs/example.md # Exclut cette page de l'index de recherche pagefind: false --- @@ -273,6 +286,7 @@ Définir l'étiquette de cette page dans la barre latérale lorsqu'elle est affi ```md --- +# src/content/docs/example.md title: About this project sidebar: label: About @@ -288,6 +302,7 @@ Les numéros inférieurs sont affichés plus haut dans le groupe de liens. ```md --- +# src/content/docs/example.md title: Page à afficher en premier sidebar: order: 1 @@ -303,6 +318,7 @@ Empêche cette page d'être incluse dans un groupe de liens généré automatiqu ```md --- +# src/content/docs/example.md title: Page à masquer de la barre latérale générée automatiquement sidebar: hidden: true @@ -319,6 +335,7 @@ Passez éventuellement un [objet `BadgeConfig`](/fr/reference/configuration/#bad ```md --- +# src/content/docs/example.md title: Page avec un badge sidebar: # Utilise la variante par défaut correspondant à la couleur d'accentuation de votre site @@ -328,6 +345,7 @@ sidebar: ```md --- +# src/content/docs/example.md title: Page avec un badge sidebar: badge: @@ -344,6 +362,7 @@ Attributs HTML à ajouter au lien de la page dans la barre latérale lorsqu'il e ```md --- +# src/content/docs/example.md title: Page s'ouvrant dans un nouvel onglet sidebar: # Ouvre la page dans un nouvel onglet diff --git a/docs/src/content/docs/fr/reference/overrides.md b/docs/src/content/docs/fr/reference/overrides.md index 89f373dcf11..96d49752961 100644 --- a/docs/src/content/docs/fr/reference/overrides.md +++ b/docs/src/content/docs/fr/reference/overrides.md @@ -18,6 +18,7 @@ Pour typer vos composants personnalisés, importez le type `Props` depuis Starli ```astro --- +// src/components/Custom.astro import type { Props } from '@astrojs/starlight/props'; const { hasSidebar } = Astro.props;