Skip to content

Commit

Permalink
i18n(fr): fix inconsistent use of props/prop/property in French…
Browse files Browse the repository at this point in the history 
… translation (#9463)

* i18n(fr): update `basics/astro-components.mdx`

* Use `props` with feminine form (`une propriété`)
* Replace singular `prop` with `property`
* Reword some sentences/Fix typo
* Use French quotes
* Add missing changes from #6793 and #5712

* i18n(fr): update `guides/cms/apostrophecms.mdx`

* Make usage of `props`/`property` consistent
* Fix some typo
* Translate in French an untranslated part

* i18n(fr): make usage of props/prop consistent

* fix anchor link in `typescript.mdx`

---------

Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
  • Loading branch information
@ArmandPhilippot @yanthomasdev
ArmandPhilippot and yanthomasdev committed Sep 23, 2024
1 parent da13ca6 commit 63aaff9
Show file tree
Hide file tree
Showing 29 changed files with 165 additions and 161 deletions.
51 changes: 26 additions & 25 deletions src/content/docs/fr/basics/astro-components.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Vous pouvez utiliser le script du composant pour écrire du code JavaScript qui
- Importer d'autres composants Astro
- Importer des composants de Framework, comme React
- Importer des données, comme un fichier JSON
- Récupérer le contenu d'une API ou une base de données
- Récupérer le contenu d'une API ou d'une base de données
- Créer des variables que vous voulez référencer dans votre template


Expand All @@ -43,23 +43,23 @@ import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';
// Accéder aux propriétés passées dans le composant, comme `<X title="Hello, World" />`
const {title} = Astro.props;
// Récupérer des données externes, même depuis une API privée ou une base de données
// Accéder aux props de composants transmis, comme `<X title="Hello, World" />`
const { title } = Astro.props;
// Récupérer des données externes, même à partir d'une API ou d'une base de données privée
const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---
<!-- Votre template ici ! -->
```

Les barres de code sont conçues pour garantir que le code JavaScript que vous écrivez à l'intérieur "ne puisse pas s'échapper". Ce code n'apparaîtra pas dans le code final de votre page et ne sera pas visible à vos utilisateur. Vous pouvez écrire du code JavaScript coûteux (en terme de performance) ou sensible (comme un appel à votre base de données privée) sans vous soucier qu'il se retrouve dans le navigateur l'utilisateur.
Les barres de code sont conçues pour garantir que le code JavaScript que vous écrivez à l'intérieur « ne puisse pas s'échapper ». Il ne sera pas visible dans le frontend de votre application et ne tombera pas entre les mains de votre utilisateur. Vous pouvez écrire du code JavaScript coûteux (en terme de performance) ou sensible (comme un appel à votre base de données privée) sans vous soucier qu'il se retrouve dans le navigateur l'utilisateur.

:::tip
Vous pouvez même écrire du TypeScript dans votre script de composant !
:::

### Le Template du composant

En dessous du script du composant se trouve le template du composant. Le template du composant détermine le HTML résultant de votre composant.
En dessous du script du composant se trouve le template du composant. Ce dernier détermine le HTML résultant de votre composant.

Si vous écrivez du HTML simple ici, votre composant affichera cet HTML dans toutes les pages où il est importé et utilisé.

Expand All @@ -73,13 +73,13 @@ import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- les commentaires HTML sont supportés ! -->
<!-- Les commentaires HTML sont supportés ! -->
{/* La syntaxe des commentaires JavaScript est aussi valide ! */}
<Banner />
<h1>Hello, world!</h1>
<!-- Utilisez les propriétés et autres variables du script du composant : -->
<!-- Utilisez les props et autres variables du script du composant : -->
<p>{title}</p>
<!-- Incluez d'autres composants avec une directive `client:` pour l'hydrater : -->
Expand All @@ -94,7 +94,7 @@ const { title } = Astro.props;
<p class:list={["add", "dynamic", {classNames : true}]} />
```

## Conception à base de composant
## Conception basée sur les composants

Les composants sont conçus pour être **réutilisables** et **composables**. Vous pouvez utiliser des composants à l'intérieur d'autres composants pour créer une interface utilisateur de plus en plus complexe. Par exemple, un composant `Button` pourrait être utilisé pour créer un composant `ButtonGroup` comme ceci :

Expand All @@ -112,20 +112,20 @@ import Button from './Button.astro';

## Props de composant

Un composant Astro peut définir et accepter des "props". Ces props deviennent alors accessible dans le template du composant pour le rendu du HTML. Les props sont disponibles sur la variable globale `Astro.props` entre les barres de codes.
Un composant Astro peut définir et accepter des props (diminutif pour « propriétés »). Ces dernières deviennent alors disponibles dans le template du composant pour le rendu du HTML. Les props sont accessibles à l'aide de la variable globale `Astro.props` dans le frontmatter, ou script du composant.

Voici un exemple de composant qui reçoit un prop nommé `greeting` et un prop nommé `name`. Notez que les props à recevoir sont déstructurés de l'objet global `Astro.props`.
Voici un exemple de composant qui reçoit une propriété nommée `greeting` et une autre nommée `name`. Notez que les props à recevoir sont déstructurées de l'objet global `Astro.props`.

```astro "Astro.props"
---
// src/components/GreetingHeadline.astro
// Utilisation: <GreetingHeadline greeting="Comment ça va" name="Partenaire" />
// Utilisation : <GreetingHeadline greeting="Comment ça va" name="Partenaire" />
const { greeting, name } = Astro.props;
---
<h2>{greeting}, {name} !</h2>
```

Ce composant, lorsqu'il est importé et utilisé dans d'autres composants standards, Composants Layout ou pages Astro, peut recevoir ces props sous forme d'attributs :
Ce composant, lorsqu'il est importé et rendu dans d'autres composants, mises en page ou pages Astro, peut transmettre ces props sous forme d'attributs :

```astro /(\w+)=\S+/
---
Expand All @@ -138,7 +138,7 @@ const name = 'Astro';
<p>J'espère que vous passez une merveilleuse journée !</p>
```

Vous pouvez également définir le type de vos props avec TypeScript en créant une interface nommée `Props`. Astro sélectionnera automatiquement l'interface `Props` dans le Script du Composant et donnera des avertissements/erreurs de type. Ces props peuvent également recevoir des valeurs par défaut lorsqu'ils sont déstructurés à partir d' `Astro.props`.
Vous pouvez également définir le type de vos props avec TypeScript en créant une interface nommée `Props`. Astro sélectionnera automatiquement l'interface `Props` dans le frontmatter et donnera des avertissements/erreurs de type. Ces props peuvent également recevoir des valeurs par défaut lorsqu'elles sont déstructurées à partir d'`Astro.props`.

```astro ins={3-6}
---
Expand All @@ -153,7 +153,7 @@ const { greeting = "Salut", name } = Astro.props;
<h2>{greeting}, {name}!</h2>
```

Les props de composant peuvent recevoir des valeurs par défaut à utiliser lorsqu'aucune n'est fournie
Les props de composant peuvent recevoir des valeurs par défaut à utiliser lorsqu'aucune n'est fournie.

```astro ins="= \"Salut\"" ins="= \"Astronaute\""
---
Expand Down Expand Up @@ -198,11 +198,11 @@ import Wrapper from '../components/Wrapper.astro';
---
<Wrapper title="Page de Fred">
<h2>Tout ce qui est a savoir sur Fred</h2>
<p>Voici quelques truc à propos de Fred.</p>
<p>Voici quelques trucs à propos de Fred.</p>
</Wrapper>
```

Ce modèle est la base d'un [Composant Layout dans Astro](/fr/basics/layouts/) : une page entière de contenu HTML peut être "enveloppée" avec des balises `<Layout></Layout>` et envoyée au composant pour être rendue à l'intérieur des éléments de page communs qui y sont définis.
Ce modèle est la base d'un [Composant Layout dans Astro](/fr/basics/layouts/) : une page entière de contenu HTML peut être « enveloppée » avec des balises `<Layout></Layout>` et envoyée au composant pour être rendue à l'intérieur des éléments de page communs qui y sont définis.



Expand Down Expand Up @@ -243,7 +243,7 @@ import Wrapper from '../components/Wrapper.astro';
<Wrapper title="Page de Fred">
<img src="https://my.photo/fred.jpg" slot="after-header" />
<h2>Tout ce qui est a savoir sur Fred</h2>
<p>Voici quelques truc à propos de Fred.</p>
<p>Voici quelques trucs à propos de Fred.</p>
<p slot="after-footer">Copyright 2022</p>
</Wrapper>
```
Expand All @@ -252,7 +252,7 @@ import Wrapper from '../components/Wrapper.astro';
Utilisez un attribut `slot="my-slot"` sur l'élément enfant que vous voulez passer à un emplacement correspondant `<slot name="my-slot" />` dans votre composant.
:::

Pour faire passer plusieurs éléments HTML dans l'espace réservé `<slot/>` d'un composant sans qu'ils soient enveloppés par un `<div>`, utilisez l'attribut `slot=""` sur le [composant `<Fragment/>` d'Astro](/fr/reference/api-reference/#fragment-):
Pour faire passer plusieurs éléments HTML dans l'espace réservé `<slot/>` d'un composant sans qu'ils soient enveloppés par une balise `<div>`, utilisez l'attribut `slot=""` sur le [composant `<Fragment/>` d'Astro](/fr/reference/api-reference/#fragment-):

```astro title="src/components/CustomTable.astro" "<slot name="header"/>" "<slot name="body" />"
---
Expand All @@ -271,32 +271,32 @@ Injecter plusieurs lignes et colonnes de contenu HTML en utilisant un attribut `
import CustomTable from './CustomTable.astro';
---
<CustomTable>
<Fragment slot="header"> <!-- pass table header -->
<Fragment slot="header"> <!-- passer l'en-tête du tableau -->
<tr><th>Nom du produit</th><th>Unités en stock</th></tr>
</Fragment>
<Fragment slot="body"> <!-- pass table body -->
<Fragment slot="body"> <!-- passer le corps du tableau -->
<tr><td>Tongs</td><td>64</td></tr>
<tr><td>Bottes</td><td>32</td></tr>
<tr><td>Baskets</td><td class="text-red-500">0</td></tr>
</Fragment>
</CustomTable>
```

Notez que les emplacements nommés doivent être des enfants immédiats du composant. Il n'est pas possible de faire passer des emplacements nommés dans des éléments imbriqués.
Notez que les emplacements nommés doivent être des enfants immédiats du composant. Il n'est pas possible de transmettre des emplacements nommés à travers des éléments imbriqués.

:::tip
Les emplacements nommés peuvent aussi être passés aux [composants de framework](/fr/guides/framework-components/) !
:::


:::note
Il n'est pas possible de générer dynamiquement un nom de slot Astro, par exemple dans une fonction de carte. Si cette fonctionnalité est nécessaire dans les composants du framework UI, il est préférable de générer ces slots dynamiques dans le framework lui-même.
Il n'est pas possible de générer dynamiquement un nom de slot Astro en utilisant, par exemple, la méthode `map`. Si cette fonctionnalité est nécessaire dans les composants du framework UI, il est préférable de générer ces slots dynamiques dans le framework lui-même.
:::


### Contenu par défaut pour les emplacements
La génération dynamique d'un nom de slot Astro, par exemple dans une fonction map, a été ajoutée dans Astro v4.2.0. Pour les versions antérieures d'Astro, il est préférable de générer ces slots dynamiques dans le cadre lui-même.
Les slots peuvent également restituer du **contenu de secours** (ou « fallback »). Lorsqu'aucun enfant correspondant n'est transmis à un slot, un élément `<slot />` restituera ses propres enfants fictifs.

```astro {14}
---
Expand Down Expand Up @@ -382,8 +382,9 @@ Les composants HTML ne doivent contenir que du code HTML valide et ne disposent
- Ils ne peuvent [référencer que les assets qui se trouvent dans le dossier `public/`](/fr/basics/project-structure/#public).

:::note
Un [élément `<slot />`](#les-emplacements-slots) à l'intérieur d'un composant HTML fonctionnera comme il le ferait dans un composant Astro. Pour utiliser l'élément [Slot des Web Components (composants web)](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot) à la place, ajoutez `is:inline` à votre élément `<slot>`.
Un [élément `<slot />`](#les-emplacements-slots) à l'intérieur d'un composant HTML fonctionnera comme il le ferait dans un composant Astro. Pour utiliser l'élément [Slot des composants web (Web Components)](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot) à la place, ajoutez `is:inline` à votre élément `<slot>`.
:::

## Étapes suivantes

import ReadMore from '~/components/ReadMore.astro';
Expand Down
6 changes: 4 additions & 2 deletions src/content/docs/fr/basics/astro-pages.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ Pendant le développement, si vous avez un `500.astro`, l'erreur lancée à l'ex

`src/pages/500.astro` est une page spéciale à laquelle on passe automatiquement une propriété `error` pour toute erreur survenant lors du rendu. Cela vous permet d'utiliser les détails d'une erreur (par exemple, d'une page, d'un middleware, etc.) pour afficher des informations à votre visiteur.

Le type de données du prop d'erreur peut être quelconque, ce qui peut affecter la façon dont vous tapez ou utilisez la valeur dans votre code :
Le type de données de la propriété `error` peut être quelconque, ce qui peut affecter la façon dont vous tapez ou utilisez la valeur dans votre code :

```astro title="src/pages/500.astro"
---
Expand Down Expand Up @@ -160,6 +160,7 @@ Configurez un fichier dans le répertoire `src/pages/` pour être un partiel en
---
export const partial = true;
---
<li>Je suis un partiel!</li>
```

Expand All @@ -184,7 +185,8 @@ L'`export const partial` doit être identifiable statiquement. Il peut avoir la
</head>
</html>
<section>
<div id="parent-div">Target here</div>
<div id="parent-div">Cible ici</div>
<button hx-post="/partials/clicked/"
hx-trigger="click"
hx-target="#parent-div"
Expand Down
Loading

0 comments on commit 63aaff9

Please sign in to comment.