Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 11 additions & 11 deletions src/content/docs/fr/guides/actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Astro Actions vous permet de définir et d'appeler des fonctions backend avec s

Utilisez des actions à la place de points de terminaison d'API pour une communication transparente entre votre code client et votre code serveur et pour :

- Valider automatiquement les entrées de données JSON et de formulaire à l'aide de la [validation Zod](https://zod.dev/?id=primitives).
- Valider automatiquement les entrées de données JSON et de formulaire à l'aide de la [validation Zod](/fr/reference/modules/astro-zod/).
- Générer des fonctions avec sûreté du typage pour appeler votre backend à partir du client et même [à partir des actions de formulaire HTML](#appeler-des-actions-depuis-une-action-de-formulaire-html). Pas besoin d'appels manuels à `fetch()`.
- Standardiser les erreurs du backend avec l'objet [`ActionError`](/fr/reference/modules/astro-actions/#actionerror).

Expand All @@ -24,7 +24,7 @@ Les actions sont définies dans un objet `server` exporté depuis `src/actions/i

```ts title="src/actions/index.ts"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
myAction: defineAction({ /* ... */ })
Expand Down Expand Up @@ -62,22 +62,22 @@ Suivez ces étapes pour définir une action et pour l'appeler dans une balise `s
}
```

2. Importez l'utilitaire `defineAction()` depuis `astro:actions` et l'objet `z` depuis `astro:schema`.
2. Importez l'utilitaire `defineAction()` depuis `astro:actions` et l'objet `z` depuis `astro/zod`.

```ts ins={1-2} title="src/actions/index.ts"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
// déclarations d'action
}
```

3. Utilisez l'utilitaire `defineAction()` pour définir une action `getGreeting`. La propriété `input` sera utilisée pour valider les paramètres d'entrée avec un schéma [Zod](https://zod.dev) et la fonction `handler()` inclut la logique backend à exécuter sur le serveur.
3. Utilisez l'utilitaire `defineAction()` pour définir une action `getGreeting`. La propriété `input` sera utilisée pour valider les paramètres d'entrée avec un [schéma Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants) et la fonction `handler()` inclut la logique backend à exécuter sur le serveur.

```ts ins={5-12} title="src/actions/index.ts"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
getGreeting: defineAction({
Expand Down Expand Up @@ -213,7 +213,7 @@ Cet exemple génère une erreur d'une action `likePost` lorsqu'un utilisateur n'

```ts title="src/actions/index.ts" ins=/ActionError(?= )/ ins={9-12}
import { defineAction, ActionError } from "astro:actions";
import { z } from "astro:schema";
import { z } from "astro/zod";

export const server = {
likePost: defineAction({
Expand Down Expand Up @@ -290,7 +290,7 @@ Les actions acceptent les données JSON par défaut. Pour accepter les données

```ts title="src/actions/index.ts" ins={6}
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
comment: defineAction({
Expand Down Expand Up @@ -319,7 +319,7 @@ Pour appliquer une union de différents validateurs, utilisez l'encapsuleur `z.d

```ts title="src/actions/index.ts" {7-21} "create" "update"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
changeUser: defineAction({
Expand Down Expand Up @@ -378,7 +378,7 @@ L'exemple suivant montre un formulaire d'inscription à une newsletter validé q

```ts title="src/actions/index.ts" ins={5-12}
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
newsletter: defineAction({
Expand Down Expand Up @@ -492,7 +492,7 @@ Par exemple, supposons que vous ayez une action `createProduct` qui renvoie l'id

```ts title="src/actions/index.ts" mark={10}
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
createProduct: defineAction({
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/fr/guides/astro-db.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ Vous pouvez également utiliser [Astro Actions](/fr/guides/actions/) pour insér
// src/actions/index.ts
import { db, Comment } from 'astro:db';
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
addComment: defineAction({
Expand Down
62 changes: 19 additions & 43 deletions src/content/docs/fr/guides/content-collections.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,19 @@ Pour définir des collections, vous devez créer un fichier `src/content.config.

```ts title="src/content.config.ts"
// 1. Importer des utilitaires depuis `astro:content`
import { defineCollection, z } from 'astro:content';
import { defineCollection } from 'astro:content';

// 2. Importer un ou plusieurs chargeurs
import { glob, file } from 'astro/loaders';

// 3. Définir votre/vos collection(s)
// 3. Importer Zod
import { z } from 'astro/zod';

// 4. Définir votre/vos collection(s)
const blog = defineCollection({ /* ... */ });
const dogs = defineCollection({ /* ... */ });

// 4. Exporter un seul objet « collections » pour enregistrer votre/vos collection(s)
// 5. Exporter un seul objet `collections` pour enregistrer votre/vos collection(s)
export const collections = { blog, dogs };
```

Expand All @@ -89,9 +92,10 @@ Le [chargeur `glob()`](/fr/reference/content-loader-reference/#le-chargeur-glob)

Le [chargeur `file()`](/fr/reference/content-loader-reference/#le-chargeur-file) crée plusieurs entrées à partir d'un seul fichier local. Chaque entrée du fichier doit avoir un nom de propriété `id` unique. Il accepte un chemin de fichier `base` vers votre fichier et éventuellement une [fonction `parser`](#fonction-parser) pour les fichiers de données qu'il ne peut pas analyser automatiquement. Utilisez ce chargeur lorsque votre fichier de données peut être analysé comme un tableau d'objets.

```ts title="src/content.config.ts" {5,9}
import { defineCollection, z } from 'astro:content';
```ts title="src/content.config.ts" {6,10}
import { defineCollection } from 'astro:content';
import { glob, file } from 'astro/loaders'; // Non disponible avec l'API héritée
import { z } from 'astro/zod';

const blog = defineCollection({
loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
Expand Down Expand Up @@ -208,11 +212,12 @@ Les schémas alimentent également les typages automatiques TypeScript d'Astro p
Pour qu'Astro reconnaisse un schéma nouveau ou mis à jour, vous devrez peut-être redémarrer le serveur de développement ou [synchroniser la couche de contenu](/fr/reference/cli-reference/#astro-dev) (<code>s + Entrée</code>) pour définir le module `astro:content`.
:::

Chaque frontmatter ou propriété de données de vos entrées de collection doit être défini à l’aide d’un type de données Zod :
Chaque frontmatter ou propriété de données de vos entrées de collection doit être défini à l’aide d’un [type de données Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants) :

```ts title="src/content.config.ts" {6-11,15-19}
import { defineCollection, z } from 'astro:content';
import { glob, file } from 'astro/loaders'; // Non disponible avec l'API héritée
```ts title="src/content.config.ts" {7-12,16-20}
import { defineCollection } from 'astro:content';
import { glob, file } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
Expand All @@ -239,43 +244,13 @@ export const collections = { blog, dogs };

Astro utilise [Zod](https://github.com/colinhacks/zod) pour alimenter ses schémas de contenu. Avec Zod, Astro est capable de valider les données de chaque fichier au sein d'une collection *et* de fournir des types TypeScript automatiques lorsque vous interrogez le contenu à partir de votre projet.

Pour utiliser Zod dans Astro, importez l'utilitaire `z` depuis `"astro:content"`. Il s'agit d'une réexportation de la bibliothèque Zod, et elle prend en charge toutes les fonctionnalités de Zod.

```ts
// Exemple : une aide-mémoire de nombreux types de données Zod courants
import { z, defineCollection } from 'astro:content';

defineCollection({
schema: z.object({
isDraft: z.boolean(),
title: z.string(),
sortOrder: z.number(),
image: z.object({
src: z.string(),
alt: z.string(),
}),
author: z.string().default('Anonyme'),
language: z.enum(['en', 'es']),
tags: z.array(z.string()),
footnote: z.string().optional(),

// En YAML, les dates écrites sans guillemets sont interprétées comme des objets Date
publishDate: z.date(), // par exemple 2024-09-17

// Transformer une chaîne de date (par exemple « 2022-07-08 ») en objet Date
updatedDate: z.string().transform((str) => new Date(str)),

authorContact: z.string().email(),
canonicalURL: z.string().url(),
})
})
```
Pour utiliser Zod dans Astro, importez l'utilitaire `z` depuis `"astro/zod"`. Il s'agit d'une réexportation de la bibliothèque Zod, et elle prend en charge toutes les fonctionnalités de Zod.

<ReadMore>Consultez [le fichier README de Zod](https://github.com/colinhacks/zod) pour obtenir une documentation complète sur le fonctionnement de Zod et les fonctionnalités disponibles.</ReadMore>
<ReadMore>Consultez la [référence de l'utilitaire `z`](/fr/reference/modules/astro-zod/) pour obtenir un aide-mémoire des types de données courants et pour apprendre comment Zod fonctionne et quelles fonctionnalités sont disponibles.</ReadMore>

##### Méthodes de schéma Zod

Toutes [les méthodes de schéma Zod](https://zod.dev/?id=schema-methods) (p. ex. `.parse()`, `.transform()`) sont disponibles, avec certaines limitations. Notamment, l'exécution de contrôles de validation personnalisés sur les images à l'aide de `image().refine()` n'est pas prise en charge.
Toutes [les méthodes de schéma Zod](/fr/reference/modules/astro-zod/#utilisation-des-méthodes-de-zod) (p. ex. `.parse()`, `.transform()`) sont disponibles, avec certaines limitations. Notamment, l'exécution de contrôles de validation personnalisés sur les images à l'aide de `image().refine()` n'est pas prise en charge.

#### Définition des références de collection

Expand All @@ -286,8 +261,9 @@ Avec la [fonction `reference()`](/fr/reference/modules/astro-content/#reference)
Un exemple courant est un article de blog qui fait référence à des profils d'auteur réutilisables stockés au format JSON ou à des URL d'articles associés stockées dans la même collection :

```ts title="src/content.config.ts"
import { defineCollection, reference, z } from 'astro:content';
import { defineCollection, reference } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
loader: glob({ pattern: '**/[^_]*.md', base: "./src/data/blog" }),
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/fr/guides/images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -590,7 +590,8 @@ Ceci est un article de blog
L'assistant `image` pour le schéma des collections de contenu vous permet de valider et d'importer l'image.

```ts title="src/content.config.ts"
import { defineCollection, z } from "astro:content";
import { defineCollection } from "astro:content";
import { z } from "astro/zod";

const blogCollection = defineCollection({
schema: ({ image }) => z.object({
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/fr/guides/integrations-guide/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,9 @@ Les fichiers `.mdx` doivent être écrits en [syntaxe MDX](https://mdxjs.com/doc
Pour inclure des fichiers MDX dans une collection de contenus, assurez-vous que votre [chargeur de collection](/fr/guides/content-collections/#définir-le-chargeur-de-collection-loader) est configuré pour charger du contenu à partir de fichiers `.mdx` :

```js title="src/content.config.ts" ins="mdx"
import { defineCollection, z } from 'astro:content';
import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }),
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/fr/guides/integrations-guide/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ L'exemple ci-dessous récupère la valeur actuelle des mentions « J'aime »

```ts title="actions.ts" ins={3,11}
import { defineAction, type SafeResult } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';
import { getActionState } from '@astrojs/react/actions';

export const server = {
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/fr/guides/sessions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Dans les actions, l'objet session est disponible dans l'objet `context`. Par exe

```ts title="src/actions/addToCart.ts" "context.session"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
addToCart: defineAction({
Expand Down
26 changes: 0 additions & 26 deletions src/content/docs/fr/recipes/build-forms-api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -428,29 +428,3 @@ Cette méthode vous montre comment envoyer les données du formulaire au point d
</Fragment>
</UIFrameworkTabs>
</Steps>

{/* ## Extension: Utilisez Zod pour valider votre formulaire

[Zod form data](https://www.npmjs.com/package/zod-form-data) s'appuie sur [Zod](https://github.com/colinhacks/zod) pour valider votre formulaire à l'aide d'un schéma. Cela simplifie votre code, car vous pouvez déclarer les champs et leurs exigences, et laisser Zod s'occuper de la validation.

1. Installer `zod` et `zod-form-data`.

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm i zod zod-form-data
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm i zod zod-form-data
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add zod zod-form-data
```
</Fragment>
</PackageManagerTabs>

2. Dans votre fichier de route d'API, déclarez votre schéma en utilisant `zfd.formData` et exportez-le. */}
3 changes: 2 additions & 1 deletion src/content/docs/fr/recipes/i18n.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ Si vous préférez que la langue par défaut ne soit pas visible dans l'URL cont

```ts
//src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { defineCollection } from 'astro:content';
import { z } from 'astro/zod';

const blogCollection = defineCollection({
schema: z.object({
Expand Down
9 changes: 5 additions & 4 deletions src/content/docs/fr/reference/content-loader-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ Le modèle recommandé consiste à définir une fonction qui accepte les options

```ts title=loader.ts
import type { Loader, LoaderContext } from 'astro/loaders';
import { z } from 'astro:content';
import { z } from 'astro/zod';
import { loadFeedData } from "./feed.js";

// Définir toutes les options dont le chargeur a besoin
Expand All @@ -209,9 +209,10 @@ export function myLoader(options: { url: string, apiKey: string }): Loader {

Ces options de configuration peuvent ensuite être définies lors de la définition d'une collection :

```ts title="src/content.config.ts" {2,5-8}
import { defineCollection, z } from 'astro:content';
import myLoader from '../../loader.ts';
```ts title="src/content.config.ts" {3,6-9}
import { defineCollection } from 'astro:content';
import { z } from 'astro/zod';
import myLoader from '../../loader.ts';

const blog = defineCollection({
loader: myLoader({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,8 @@ if (error) {
Tout comme avec les collections au moment de la compilation, vous pouvez utiliser des [schémas Zod](/fr/guides/content-collections/#définition-dun-schéma-de-collection) avec des collections en ligne pour valider et transformer les données au moment de l'exécution. Lorsque vous définissez un schéma, il a la priorité sur [les types du chargeur](#données-avec-sûreté-du-typage) lorsque vous interrogez la collection :

```ts title="src/live.config.ts"
import { z, defineLiveCollection } from 'astro:content';
import { defineLiveCollection } from 'astro:content';
import { z } from 'astro/zod';
import { apiLoader } from './loaders/api-loader';

const products = defineLiveCollection({
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/fr/reference/legacy-flags.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Lorsque vous êtes prêt à supprimer cette option et à migrer vers la nouvelle

```js
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { defineCollection } from 'astro:content';

const blog = defineCollection({ })

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/fr/reference/modules/astro-actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Un utilitaire permettant de définir de nouvelles actions dans le fichier `src/a

```ts title="src/actions/index.ts"
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { z } from 'astro/zod';

export const server = {
getGreeting: defineAction({
Expand Down Expand Up @@ -76,7 +76,7 @@ Les valeurs de retour sont analysées à l'aide de la [bibliothèque devalue](ht
**Type :** `ZodType | undefined`
</p>

Une propriété facultative qui accepte un validateur Zod (par exemple, un objet Zod, une union discriminée Zod) pour valider les entrées du gestionnaire lors de l'exécution. Si la validation de l'action échoue, [une erreur `BAD_REQUEST`](#actionerror) est renvoyée et le gestionnaire (`handler`) n'est pas appelé.
Une propriété facultative qui accepte un [validateur Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants) (par exemple, un objet Zod, une union discriminée Zod) pour valider les entrées du gestionnaire lors de l'exécution. Si la validation de l'action échoue, [une erreur `BAD_REQUEST`](#actionerror) est renvoyée et le gestionnaire (`handler`) n'est pas appelé.

Si `input` est omis, le gestionnaire (`handler`) recevra une entrée de type `unknown` pour les requêtes JSON et de type `FormData` pour les requêtes de formulaire.

Expand Down
3 changes: 1 addition & 2 deletions src/content/docs/fr/reference/modules/astro-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ Les collections de contenu proposent des API pour configurer et interroger vos d

```js
import {
z,
defineCollection,
getCollection,
getEntry,
Expand Down Expand Up @@ -76,7 +75,7 @@ Un `loader` est soit un objet, soit une fonction qui vous permet de charger des
<Since v="2.0.0" />
</p>

`schema` est un objet Zod facultatif pour configurer le type et la forme du document pour une collection. Chaque valeur doit utiliser [un validateur Zod](https://github.com/colinhacks/zod).
`schema` est un objet Zod facultatif pour configurer le type et la forme du document pour une collection. Chaque valeur doit utiliser [un validateur Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants).

[Consultez le guide Collections de contenu](/fr/guides/content-collections/#définition-dun-schéma-de-collection) pour un exemple d'utilisation.

Expand Down
Loading