From 94b7a244fe9045019a0219956f8ba1d625dbe594 Mon Sep 17 00:00:00 2001 From: Thomas Bonnet Date: Tue, 25 Jun 2024 21:43:33 +0200 Subject: [PATCH] i18n(fr): Update all Guides files in French language (june 25) (#8673) * i18n(fr): Update guides/astro-db from #8478 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/backend from #8450 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/backend/google-firebase from #8422 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/cms/apostrophecms from #8480 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/cms/builderio from #8259 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/cms/directus from #8647 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/cms/ghost from #8518 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/cms/statamic from #7119 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/content-collections from #8447 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/data-fetching from #8210 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/deploy/cloudflare from #8421 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/deploy/netlify from #8233 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/deploy/render from #8233 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/deploy/vercel from #8217 (and fix little typos) Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/environment-variables from #8533 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/environment-variables from #8611 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/images from #8447 #8646 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/integrations-guide from #8575 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/integrations-guide/cloudflare from #8211 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/integrations-guide/lit from #8270 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/integrations-guide/markdoc from #8167 (Steeeeps) Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/integrations-guide/preact from #8644 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/integrations-guide/react from #8038 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/integrations-guide/vue from #8295 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/markdown-content from #7218 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/markdown-content from #8167 #8239 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/middleware from #8572 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/prefetch from #8246 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/routing from #8466 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/rss from #8632 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/testing from #8369 Signed-off-by: Thomas Bonnet * i18n(fr): Update guides/view-transitions from #8646 Signed-off-by: Thomas Bonnet * i18n(fr): Fix typo in routing.mdx Signed-off-by: Thomas Bonnet * i18n(fr): Fix links ? Signed-off-by: Thomas Bonnet * i18n(fr): Fix badge Signed-off-by: Thomas Bonnet * i18n(fr): Fix badge Signed-off-by: Thomas Bonnet * i18n(fr): Fix tabs Signed-off-by: Thomas Bonnet * i18n(fr): Fix tabs Signed-off-by: Thomas Bonnet * Update src/content/docs/fr/guides/environment-variables.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/integrations-guide/lit.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/integrations-guide/vue.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/markdown-content.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/middleware.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/testing.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/testing.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * Update src/content/docs/fr/guides/testing.mdx Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> * i18n(fr): Fix links Signed-off-by: Thomas Bonnet * i18n(fr): Update `tutorial/6-islands` because CI links err Signed-off-by: Thomas Bonnet * i18n(fr): fix links Signed-off-by: Thomas Bonnet * i18n(fr): fix links Signed-off-by: Thomas Bonnet --------- Signed-off-by: Thomas Bonnet Co-authored-by: pioupia <49518790+pioupia@users.noreply.github.com> Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> --- src/content/docs/fr/guides/astro-db.mdx | 10 +- src/content/docs/fr/guides/backend.mdx | 3 +- .../fr/guides/backend/google-firebase.mdx | 16 +- .../docs/fr/guides/cms/apostrophecms.mdx | 2 +- src/content/docs/fr/guides/cms/builderio.mdx | 6 +- src/content/docs/fr/guides/cms/directus.mdx | 4 +- src/content/docs/fr/guides/cms/ghost.mdx | 5 +- src/content/docs/fr/guides/cms/statamic.mdx | 49 ++- .../docs/fr/guides/content-collections.mdx | 10 +- src/content/docs/fr/guides/data-fetching.mdx | 3 +- .../docs/fr/guides/deploy/cloudflare.mdx | 4 +- src/content/docs/fr/guides/deploy/netlify.mdx | 2 +- src/content/docs/fr/guides/deploy/render.mdx | 2 +- src/content/docs/fr/guides/deploy/vercel.mdx | 14 +- .../docs/fr/guides/environment-variables.mdx | 6 +- src/content/docs/fr/guides/images.mdx | 227 +------------ .../docs/fr/guides/integrations-guide.mdx | 2 +- .../guides/integrations-guide/cloudflare.mdx | 38 ++- .../docs/fr/guides/integrations-guide/lit.mdx | 28 ++ .../fr/guides/integrations-guide/markdoc.mdx | 6 +- .../fr/guides/integrations-guide/preact.mdx | 2 +- .../fr/guides/integrations-guide/react.mdx | 2 +- .../docs/fr/guides/integrations-guide/vue.mdx | 22 ++ .../docs/fr/guides/markdown-content.mdx | 54 ++-- src/content/docs/fr/guides/middleware.mdx | 2 +- src/content/docs/fr/guides/prefetch.mdx | 44 ++- src/content/docs/fr/guides/routing.mdx | 9 +- src/content/docs/fr/guides/rss.mdx | 2 +- src/content/docs/fr/guides/testing.mdx | 303 ++++++++++-------- .../docs/fr/guides/view-transitions.mdx | 99 +----- src/content/docs/fr/tutorial/6-islands/3.mdx | 43 ++- 31 files changed, 440 insertions(+), 579 deletions(-) diff --git a/src/content/docs/fr/guides/astro-db.mdx b/src/content/docs/fr/guides/astro-db.mdx index 53df03478d820..95cc2dca0de96 100644 --- a/src/content/docs/fr/guides/astro-db.mdx +++ b/src/content/docs/fr/guides/astro-db.mdx @@ -124,7 +124,7 @@ const Author = defineTable({ const Comment = defineTable({ columns: { authorId: column.number({ references: () => Author.columns.id }), - content: column.text(), + body: column.text(), } }); ``` @@ -141,10 +141,10 @@ L'exemple suivant définit deux lignes de données de développement pour une ta import { db, Comment } from 'astro:db'; export default async function() { - await db.insert(Comment).values([ - { authorId: 1, body: "J'espère que vous aimerez Astro DB !" }, - { authorId: 2, body: 'Profitez !'}, - ]) + await db.insert(Author).values([ + { id: 1, name: "Kasim" }, + { id: 2, name: "Mina" }, + ]); } ``` diff --git a/src/content/docs/fr/guides/backend.mdx b/src/content/docs/fr/guides/backend.mdx index 393b7d783d3d4..67c715fa3c4dc 100644 --- a/src/content/docs/fr/guides/backend.mdx +++ b/src/content/docs/fr/guides/backend.mdx @@ -5,7 +5,7 @@ i18nReady: true --- import BackendGuidesNav from '~/components/BackendGuidesNav.astro'; -**Prêt à ajouter des fonctionnalités telles que l'authentification, du stockage ou des données à votre projet Astro ?** Suivez l'un de nos guides pour intégrer un service Backend. +**Prêt à ajouter des fonctionnalités telles que l'authentification, du monitoring, du stockage ou des données à votre projet Astro ?** Suivez l'un de nos guides pour intégrer un service Backend. :::tip Trouvez des [intégrations gérées par la communauté](https://astro.build/integrations/) pour ajouter des fonctionnalités populaires à votre projet dans notre répertoire d'intégrations. @@ -29,3 +29,4 @@ Vous pouvez envisager un service Backend si votre projet a des besoins complexes - stockage de fichiers téléversés par l'utilisateur - génération d'API - communication en temps réel +- surveillance des applications diff --git a/src/content/docs/fr/guides/backend/google-firebase.mdx b/src/content/docs/fr/guides/backend/google-firebase.mdx index 040920a65e65f..0acd680a078ad 100644 --- a/src/content/docs/fr/guides/backend/google-firebase.mdx +++ b/src/content/docs/fr/guides/backend/google-firebase.mdx @@ -145,9 +145,19 @@ const serviceAccount = { client_x509_cert_url: import.meta.env.FIREBASE_CLIENT_CERT_URL, }; -export const app = activeApps.length === 0 ? initializeApp({ - credential: cert(serviceAccount as ServiceAccount), -}) : activeApps[0]; +const initApp = () => { + if (import.meta.env.PROD) { + console.info('cPROD env détecté. Utilisation du compte de service par défaut.') + // Utiliser la configuration par défaut dans les fonctions de Firebase. Doit être déjà injecté dans le serveur par Firebase. + return initializeApp() + } + console.info("Chargement du compte de service à partir de l'environnement.") + return initializeApp({ + credential: cert(serviceAccount as ServiceAccount) + }) +} + +export const app = activeApps.length === 0 ? initApp() : activeApps[0]; ``` :::note diff --git a/src/content/docs/fr/guides/cms/apostrophecms.mdx b/src/content/docs/fr/guides/cms/apostrophecms.mdx index 7638b77d3228b..fb33ff86962fd 100644 --- a/src/content/docs/fr/guides/cms/apostrophecms.mdx +++ b/src/content/docs/fr/guides/cms/apostrophecms.mdx @@ -266,7 +266,7 @@ Avec l'intégration mise en place, vous pouvez maintenant créer un blog avec As ### Prérequis -1. **Un projet ApostropheCMS avec l'outil CLI d'Apostrophe installée** - Vous pouvez créer un nouveau projet ou utiliser un projet existant. Cependant, ce tutoriel ne montrera que la création d'un article de blog et d'un type de page d'article. Vous devrez intégrer le code de tout autre projet existant de manière indépendante. Si vous n'avez pas installé l'outil CLI, vous pouvez obtenir les instructions d'installation [ici](https://docs.apostrophecms.org/guide/setting-up.html#the-apostrophe-cli-tool). +1. **Un projet ApostropheCMS avec l'outil CLI d'Apostrophe installée** - Vous pouvez créer un nouveau projet ou utiliser un projet existant. Cependant, ce tutoriel ne montrera que la création d'un article de blog et d'un type de page d'article. Vous devrez intégrer le code de tout autre projet existant de manière indépendante. Si vous n'avez pas installé l'outil CLI, consulter les [instructions d'installation de l'Apostrophe CLI](https://docs.apostrophecms.org/guide/setting-up.html#the-apostrophe-cli-tool). 2. **Un projet Astro intégré à ApostropheCMS** - Pour créer un projet à partir de zéro, voir [integrating with Astro](#intégration-avec-astro) pour les instructions sur la façon de configurer l'intégration, ou utiliser le projet de démarrage [astro-frontend](https://github.com/apostrophecms/astro-frontend). ### Création d'un article de blog et d'un type de page d'article diff --git a/src/content/docs/fr/guides/cms/builderio.mdx b/src/content/docs/fr/guides/cms/builderio.mdx index 4c38ae0e7f370..71ce3ed475769 100644 --- a/src/content/docs/fr/guides/cms/builderio.mdx +++ b/src/content/docs/fr/guides/cms/builderio.mdx @@ -219,7 +219,7 @@ const { results: posts } = await fetch(
    { - posts.map(({ data: { slug, title } }) => ( + posts.flatMap(({ data: { slug, title } }) => (
  • {title}
    • @@ -318,7 +318,7 @@ const { html: postHTML } = await fetch(
    -
    Ceci est votre footer
    +
    Voici votre pied de page
    ``` @@ -382,4 +382,4 @@ Avec ce webhook en place, chaque fois que vous cliquez sur le bouton **Publish** ## Ressources communautaires -- Lire [Connecter le CMS visuel de Builder.io à Astro](https://www.hamatoyogi.dev/blog/astro-log/connecting-builderio-to-astro) par Yoav Ganbar. \ No newline at end of file +- Lire [Connecter le CMS visuel de Builder.io à Astro](https://www.hamatoyogi.dev/blog/astro-log/connecting-builderio-to-astro) par Yoav Ganbar. diff --git a/src/content/docs/fr/guides/cms/directus.mdx b/src/content/docs/fr/guides/cms/directus.mdx index cd4f79fdc2f31..4789787f52bb7 100644 --- a/src/content/docs/fr/guides/cms/directus.mdx +++ b/src/content/docs/fr/guides/cms/directus.mdx @@ -11,8 +11,8 @@ i18nReady: true ## Ressources officielles -- Directus fournit un [exemple de modèle de blog Astro](https://github.com/directus/examples/tree/main/astro). +- [Premiers pas avec Directus et Astro](https://docs.directus.io/blog/getting-started-directus-astro.html). ## Ressources communautaires -- Ajoutez les vôtres ! \ No newline at end of file +- Ajoutez les vôtres ! diff --git a/src/content/docs/fr/guides/cms/ghost.mdx b/src/content/docs/fr/guides/cms/ghost.mdx index a83fdddbc852f..2e1f22a5de488 100644 --- a/src/content/docs/fr/guides/cms/ghost.mdx +++ b/src/content/docs/fr/guides/cms/ghost.mdx @@ -58,22 +58,25 @@ Votre répertoire racine doit maintenant contenir ces nouveaux fichiers : ### Installation des dépendances -Pour se connecter à Ghost, installez l'API de contenu officielle [`@tryghost/content-api`](https://www.npmjs.com/package/@tryghost/content-api) en utilisant la commande ci-dessous pour votre gestionnaire de paquets préféré : +Pour se connecter à Ghost, installez l'API de contenu officielle [`@tryghost/content-api`](https://www.npmjs.com/package/@tryghost/content-api) en utilisant la commande ci-dessous pour votre gestionnaire de paquets préféré et, éventuellement, un paquet utile contenant des définitions de types si vous utilisez TypeScript : ```shell npm install @tryghost/content-api + npm install --save @types/tryghost__content-api ``` ```shell pnpm add @tryghost/content-api + pnpm add --save-dev @types/tryghost__content-api ``` ```shell yarn add @tryghost/content-api + yarn add --dev @types/tryghost__content-api ``` diff --git a/src/content/docs/fr/guides/cms/statamic.mdx b/src/content/docs/fr/guides/cms/statamic.mdx index da8c803db0f27..76ca7cfebb602 100644 --- a/src/content/docs/fr/guides/cms/statamic.mdx +++ b/src/content/docs/fr/guides/cms/statamic.mdx @@ -63,28 +63,45 @@ Par exemple, pour afficher une liste de titres et leur contenu à partir d'une [ ```astro title="src/pages/index.astro --- -const res = await fetch("https://[YOUR-SITE]/graphql/", - { - method: 'POST', - headers: {'Content-Type':'application/json'}, - body: JSON.stringify({ - query: ` - posts: entries(collection: "posts", sort: "date desc") { - data { - title - ... on Entry_Posts_Post { +const graphqlQuery = { + query: ` + query Entries($page: Int, $locale: String) { + entries( + collection: "posts" + sort: "date asc" + limit: 20 + page: $page + filter: { locale: $locale } + ) { + current_page + has_more_pages + data { + title + ... on Entry_Posts_Post { content } - } } - ` - }), - }); -const entries = await res.json() + } + } + `, + variables: { + page: page, + locale: locale, + }, +}; + +const res = await fetch("https://[YOUR-SITE]/graphql", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(graphqlQuery), +}) + +const { data } = await res.json(); +const entries = data?.entries; ---

    Astro + Statamic 🚀

    { - entries.data.posts.data.map((post) => ( + entries.data.map((post) => (

    )) diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index b9c7cbead301b..b975fc4257c8d 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -312,7 +312,7 @@ relatedPosts: ### Définition d'un slug personnalisée -Lorsque vous utilisez `type : 'content' `, chaque entrée de contenu génère une propriété `slug` conviviale à partir de son [file `id`](/fr/reference/api-reference/#id). Cette propriété est utilisée pour interroger l'entrée directement à partir de votre collection. Il est également utile pour créer de nouvelles pages et URL à partir de votre contenu. +Lorsque vous utilisez `type : 'content' `, chaque entrée de contenu génère une propriété `slug` conviviale à partir de son [fichier `id`](/fr/reference/api-reference/#id). Cette propriété est utilisée pour interroger l'entrée directement à partir de votre collection. Il est également utile pour créer de nouvelles pages et URL à partir de votre contenu. Vous pouvez remplacer la balise générée par une entrée en ajoutant votre propre propriété `slug` au fichier frontmatter. Ceci est similaire à la fonctionnalité "permalink" d'autres frameworks web. `"slug"` est un nom de propriété spécial et réservé qui n'est pas autorisé dans le `schema` de votre collection personnalisée et qui n'apparaîtra pas dans la propriété `data` de votre entrée. @@ -531,7 +531,7 @@ const { Content } = await entry.render(); --- ``` -## Migration basé sur le routage des fichiers +## Migration basée sur le routage des fichiers Si vous avez un projet Astro existant, comme un blog, qui utilise des fichiers Markdown ou MDX dans les sous-dossiers de `src/pages/`, envisagez de migrer le contenu associé ou les fichiers de données vers des collections de contenus. @@ -577,7 +577,7 @@ Les pipelines remark et rehype ne s'exécutent que lorsque votre contenu est ren Plusieurs formats de date sont possibles dans les collections de contenus, mais le schéma de votre collection doit correspondre au format utilisé dans votre texte de présentation YAML Markdown ou MDX. -YAML utilise la norme [ISO-8601] (https://www.iso.org/iso-8601-date-and-time-format.html) pour exprimer les dates. Utilisez le format `yyyy-mm-dd` (par exemple `2021-07-28`) avec un type de schéma `z.date()` : +YAML utilise la norme [ISO-8601](https://www.iso.org/iso-8601-date-and-time-format.html) pour exprimer les dates. Utilisez le format `yyyy-mm-dd` (par exemple `2021-07-28`) avec un type de schéma `z.date()` : ```markdown title="src/pages/posts/example-post.md" --- @@ -602,6 +602,6 @@ Pour ne rendre que le `YYY-MM-DD` de l'horodatage UTC complet, utilisez la méth const { frontmatter } = Astro.props; ---

    {frontmatter.title}

    -

    {frontmatter.pubDate.toString().slice(0,10)}

    +

    {frontmatter.pubDate.toISOString().slice(0,10)}

    ``` -Pour voir un exemple d'utilisation de `toLocaleDateString` pour formater le jour, le mois et l'année à la place, voir le [`` component] (https://github.com/withastro/astro/blob/latest/examples/blog/src/components/FormattedDate.astro) dans le modèle officiel du blog Astro. +Pour voir un exemple d'utilisation de `toLocaleDateString` pour formater le jour, le mois et l'année à la place, voir le [`` component](https://github.com/withastro/astro/blob/latest/examples/blog/src/components/FormattedDate.astro) dans le modèle officiel du blog Astro. diff --git a/src/content/docs/fr/guides/data-fetching.mdx b/src/content/docs/fr/guides/data-fetching.mdx index a13e56b870c3a..9a57ba423fed0 100644 --- a/src/content/docs/fr/guides/data-fetching.mdx +++ b/src/content/docs/fr/guides/data-fetching.mdx @@ -8,7 +8,8 @@ Les fichiers `.astro` peuvent récupérer des données distantes pour vous aider ## `fetch()` dans Astro -Tous les [composants Astro](/fr/basics/astro-components/) ont accès à la [fonction globale `fetch()`](https://developer.mozilla.org/fr/docs/Web/API/fetch) dans leur Script de composant pour effectuer des requêtes HTTP vers des APIs en utilisant l'URL complète (ex: https://example.com/api ou `Astro.url + "/api"`). +Tous les [composants Astro](/fr/basics/astro-components/) ont accès à la [fonction globale `fetch()`](https://developer.mozilla.org/fr/docs/Web/API/fetch) dans le script de leur composant pour effectuer des requêtes HTTP aux API en utilisant l'URL complète (par exemple https://example.com/api). +En outre, vous pouvez construire une URL vers les pages et les points d'extrémité de votre projet qui sont affichés à la demande sur le serveur en utilisant `new URL("/api", Astro.url)`. Cet appel sera exécuté au moment de la construction (Build), et les données seront disponibles pour le modèle de composant afin de générer du HTML dynamique. Si le mode [SSR](/fr/guides/server-side-rendering/) est activé, tous les appels de recherche seront exécutés au moment de l'exécution. diff --git a/src/content/docs/fr/guides/deploy/cloudflare.mdx b/src/content/docs/fr/guides/deploy/cloudflare.mdx index e93d53ca959fa..c8e06f4b4da3a 100644 --- a/src/content/docs/fr/guides/deploy/cloudflare.mdx +++ b/src/content/docs/fr/guides/deploy/cloudflare.mdx @@ -29,9 +29,9 @@ Pour commencer, vous aurez besoin : 2. Poussez votre code dans votre dépôt Git (GitHub, GitLab). -3. Connectez-vous au tableau de bord de Cloudflare et sélectionnez votre compte dans **Comptes** > **Workers et Pages**. +3. Connectez-vous au tableau de bord de Cloudflare et sélectionnez votre compte dans **Comptes** > **Workers et Pages** > **Vue d’ensemble**. -4. Sélectionnez **Créer une application**, naviguez dans l'onglet **Pages** et cliquez sur **Se connecter à Git**. +4. Sélectionnez **Créer**, naviguez dans l'onglet **Pages** et cliquez sur **Se connecter à Git**. 5. Sélectionnez le projet git que vous souhaitez déployer et cliquez sur **Commencer la configuration**. diff --git a/src/content/docs/fr/guides/deploy/netlify.mdx b/src/content/docs/fr/guides/deploy/netlify.mdx index ebb0918bd8bd1..84f6b2a9e471c 100644 --- a/src/content/docs/fr/guides/deploy/netlify.mdx +++ b/src/content/docs/fr/guides/deploy/netlify.mdx @@ -133,7 +133,7 @@ Vous pouvez également créer un nouveau site sur Netlify et relier votre dépô ### Définir une version de Node.js -Si vous utilisez une ancienne [image de build (EN)](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) sur Netlify, assurez-vous que votre version de Node.js est définie. Astro requiert la version `v18.14.1` ou une version plus récente. +Si vous utilisez une ancienne [image de build (EN)](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) sur Netlify, assurez-vous que votre version de Node.js est définie. Astro requiert la version `v18.17.1` or `v20.3.0` ou une version plus récente. Vous pouvez [spécifier votre version de Node.js dans Netlify (EN)](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) en utilisant : - un fichier [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) dans votre répertoire de base. diff --git a/src/content/docs/fr/guides/deploy/render.mdx b/src/content/docs/fr/guides/deploy/render.mdx index eca3fbef273e5..9e6d9df873506 100644 --- a/src/content/docs/fr/guides/deploy/render.mdx +++ b/src/content/docs/fr/guides/deploy/render.mdx @@ -20,7 +20,7 @@ Vous pouvez déployer votre projet Astro sur [Render](https://render.com/), un s 4. Donnez un nom à votre site web, sélectionnez la branche et spécifiez la commande de construction et le répertoire de publication - **build command:** `npm run build` (Commande de construction) - **publish directory:** `dist` (Répertoire de publication) - - **Environment variables (advanced)**: (Variables d'environnement) Par défaut, Render utilise Node.js 14.17.0, mais Astro [nécessite une version supérieure](/fr/install-and-setup/#prerequisites). Ajoutez une variable d'environnement avec une **Variable key** (clé de variable) de `NODE_VERSION` et une **Value** (Valeur) de `18.14.1` ou plus pour dire à Render d'utiliser une version compatible de Node.js. Alternativement, ajoutez un fichier [`.node-version`](https://render.com/docs/node-version) ou [`.nvmrc`](https://render.com/docs/node-version) a votre projet pour spécifier la version de Node.js. + - **Environment variables (advanced)**: (Variables d'environnement) Par défaut, Render utilise Node.js 14.17.0, mais Astro [nécessite une version supérieure](/fr/install-and-setup/#prerequisites). Ajoutez une variable d'environnement avec une **Variable key** (clé de variable) de `NODE_VERSION` et une **Value** (Valeur) de `v18.17.1` or `v20.3.0` ou plus pour dire à Render d'utiliser une version compatible de Node.js. Alternativement, ajoutez un fichier [`.node-version`](https://render.com/docs/node-version) ou [`.nvmrc`](https://render.com/docs/node-version) a votre projet pour spécifier la version de Node.js. 5. Cliquez sur le bouton **Create Static Site** diff --git a/src/content/docs/fr/guides/deploy/vercel.mdx b/src/content/docs/fr/guides/deploy/vercel.mdx index 6e6e6a28965b2..509882f700dc6 100644 --- a/src/content/docs/fr/guides/deploy/vercel.mdx +++ b/src/content/docs/fr/guides/deploy/vercel.mdx @@ -19,11 +19,11 @@ Votre projet Astro peut être déployé sur Vercel en tant que site statique, ou Votre projet Astro est un site statique par défaut. Vous n'avez besoin d'aucune configuration supplémentaire pour déployer un site Astro statique sur Vercel. -### Adapteur pour SSR +### Adaptateur pour SSR -Pour activer le SSR dans votre projet Astro et le déployer sur Vercel: +Pour activer le SSR dans votre projet Astro et le déployer sur Vercel : -Ajoutez [l'adapteur Vercel](/fr/guides/integrations-guide/vercel/) pour activer le SSR dans votre projet Astro avec la commande `astro add` suivante. Ceci installera l'adapteur et apportera les changements appropriés à votre fichier `astro.config.mjs` en une seule étape. +Ajoutez [l'adaptateur Vercel](/fr/guides/integrations-guide/vercel/) pour activer le SSR dans votre projet Astro avec la commande `astro add` suivante. Ceci installera l'adaptateur et apportera les changements appropriés à votre fichier `astro.config.mjs` en une seule étape. ```bash npx astro add vercel @@ -32,7 +32,7 @@ npx astro add vercel Si vous préférez installer l'adaptateur manuellement, suivez les deux étapes suivantes : -1. Installez [l'adapteur `@astrojs/vercel`](/fr/guides/integrations-guide/vercel/) dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré. Si vous utilisez npm ou si vous n'êtes pas sûr, exécutez ceci dans le terminal : +1. Installez [l'adaptateur `@astrojs/vercel`](/fr/guides/integrations-guide/vercel/) dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré. Si vous utilisez npm ou si vous n'êtes pas sûr, exécutez ceci dans le terminal : ```bash npm install @astrojs/vercel @@ -67,7 +67,7 @@ Vous pouvez déployer Vercel via l'interface utilisateur du site web ou en utili 4. Votre application est déployée ! (ex : [astro.vercel.app](https://astro.vercel.app/)) -Une fois que votre projet a été importé et déployé, tous les pushes ultérieures vers les bracnhes généreront des [Déploiements de prévisualisation (EN)](https://vercel.com/docs/concepts/deployments/environments#preview), et toutes les modifications apportées à la branche de production (communément appelée "main") donneront lieu à un [Déploiement de production (EN)](https://vercel.com/docs/concepts/deployments/environments#production). +Une fois que votre projet a été importé et déployé, tous les pushes ultérieures vers les branches généreront des [Déploiements de prévisualisation (EN)](https://vercel.com/docs/concepts/deployments/environments#preview), et toutes les modifications apportées à la branche de production (communément appelée "main") donneront lieu à un [Déploiement de production (EN)](https://vercel.com/docs/concepts/deployments/environments#production). Apprenez-en plus sur l'[Intégration Git de Vercel (EN)](https://vercel.com/docs/concepts/git). @@ -93,7 +93,3 @@ Une fois que votre projet a été importé et déployé, tous les pushes ultéri Vous pouvez utiliser `vercel.json` pour surcharger le comportement par défaut de Vercel et pour configurer des paramètres supplémentaires. Par exemple, vous pouvez souhaiter attacher des en-têtes aux réponses HTTP de vos déploiements. En savoir plus sur la [configuration Vercel (EN)](https://vercel.com/docs/project-configuration). - -### Mise à jour vers Astro 2.0 - -Astro v2.0 ne supporte plus Node 14, assurez-vous donc que votre projet utilise **Node `18.14.1` ou plus récent**. Vous pouvez [définir la version de Node.js (EN)](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings)utilisée pendant l'étape de construction et les fonctions Serverless à partir de la page General sous Project Settings. diff --git a/src/content/docs/fr/guides/environment-variables.mdx b/src/content/docs/fr/guides/environment-variables.mdx index 2d9710e56444a..f5db92a71dd12 100644 --- a/src/content/docs/fr/guides/environment-variables.mdx +++ b/src/content/docs/fr/guides/environment-variables.mdx @@ -5,7 +5,11 @@ i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -Astro utilise le support intégré de Vite pour les variables d'environnement, et vous permet [d'utiliser n'importe laquelle de ses méthodes](https://vitejs.dev/guide/env-and-mode.html) pour travailler avec elles. +:::tip[Vous cherchez astro:env\] +En savoir plus sur l'[API expérimentale `astro:env`](/fr/reference/configuration-reference/#experimentalenv) pour des variables d'environnement sûres ! +::: + +Astro utilise le support intégré de Vite pour les variables d'environnement, qui sont remplacées statiquement au moment de la construction, et vous permet [d'utiliser toutes ses méthodes](https://vitejs.dev/guide/env-and-mode.html) pour travailler avec elles. Notez que si _toutes_ les variables d'environnement sont disponibles dans le code côté serveur, seules les variables d'environnement préfixées par `PUBLIC_` sont disponibles dans le code côté client pour des raisons de sécurité. diff --git a/src/content/docs/fr/guides/images.mdx b/src/content/docs/fr/guides/images.mdx index 37ac77def873f..840eb48451306 100644 --- a/src/content/docs/fr/guides/images.mdx +++ b/src/content/docs/fr/guides/images.mdx @@ -7,7 +7,6 @@ import Since from '~/components/Since.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import RecipeLinks from "~/components/RecipeLinks.astro"; import { Steps } from '@astrojs/starlight/components' -import Badge from "~/components/Badge.astro" Astro vous propose plusieurs façons d'utiliser les images sur votre site, qu'elles soient stockées localement dans votre projet, liées à une URL externe, ou gérées dans un CMS ou un CDN ! @@ -150,7 +149,7 @@ Cependant, ces deux propriétés sont nécessaires pour les images stockées dan ##### Densités -

    +

    Une liste de densités de pixels à générer pour l'image. @@ -189,7 +188,7 @@ import myImage from '../assets/my_image.png'; ##### widths -

    +

    Une liste de largeurs à générer pour l'image. @@ -743,224 +742,4 @@ export default defineConfig({ ## Intégrations communautaires -Il existe plusieurs [intégrations d'images communautaires](https://astro.build/integrations?search=images) tierces pour optimiser et travailler avec des images dans votre projet Astro. - -## Mise à jour vers la v3.0 à partir de la v2.x - -`astro:assets` n'est plus derrière un drapeau expérimental dans Astro v3.0. - -`` est maintenant un composant intégré et l'intégration précédente `@astrojs/image` a été supprimée. - -Ces changements, ainsi que d'autres changements liés à l'utilisation des images dans Astro, peuvent entraîner des ruptures lorsque vous mettez à jour votre projet Astro à partir d'une version antérieure. - -Veuillez suivre les instructions ci-dessous pour mettre à jour un projet Astro v2.x vers la version 3.0. - -### Mise à jour à partir de `experimental.assets` - -Si vous aviez précédemment activé le drapeau expérimental pour `astro:assets`, vous devrez mettre à jour votre projet pour Astro v3.0 qui inclut maintenant les fonctionnalités des assets par défaut. - -#### Supprimer l'indicateur `experimental.assets - -Supprime le drapeau expérimental : - -```js title="astro.config.mjs" del={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - assets: true - } -}); -``` - -Si nécessaire, mettez également à jour votre fichier `src/env.d.ts` pour remplacer la référence `astro/client-image` par `astro/client` : - -```ts title="src/env.d.ts" del={1} ins={2} -/// -/// -``` - -#### Supprimer l'alias d'importation `~/assets` - -Cet alias d'importation n'est plus inclus par défaut avec `astro:assets`. Si vous utilisiez cet alias avec des actifs expérimentaux, vous devez les convertir en chemins de fichiers relatifs, ou [créer vos propres alias d'importation](/fr/guides/imports/#alias). - -```astro title="src/pages/posts/post-1.astro" del={2} ins={3} ---- -import rocket from '~/assets/rocket.png'; -import rocket from '../../assets/rocket.png'; ---- -``` - -#### Ajout d'un support simple pour Cloudflare, Deno, Vercel Edge et Netlify Edge - -Astro v3.0 permet à `astro:assets` de fonctionner sans erreur dans Cloudflare, Deno, Vercel Edge et Netlify Edge, qui ne supportent pas l'optimisation d'image Squoosh et Sharp intégrée à Astro. Notez qu'Astro n'effectue aucune transformation ou traitement d'image dans ces environnements. Cependant, vous pouvez toujours profiter des autres avantages de l'utilisation de `astro:assets`, y compris l'absence de décalage cumulatif de la mise en page (CLS), l'attribut `alt` imposé, et une expérience de création cohérente. - -Si vous évitiez auparavant d'utiliser `astro:assets` à cause de ces contraintes, vous pouvez maintenant le faire sans problème. Vous pouvez configurer le service d'images no-op pour qu'il accepte explicitement ce comportement : - -```js title="astro.config.mjs" ins={4-8} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - image: { - service: { - entrypoint: 'astro/assets/services/noop' - } - } -}); -``` - -### Décidez où stocker votre images - -Consultez le guide Images pour vous aider à décider [où stocker vos images](#où-stocker-les-images).Vous pouvez souhaiter profiter des nouvelles options pour stocker vos images avec la flexibilité ajoutée `astro:assets` brings. Par exemple, les images relatives de votre projet `src/` peuvent maintenant être référencées dans Markdown, MDX et Markdoc en utilisant la syntaxe Markdown standard `![alt](src)`. - -### Mise à jour des balises `` existantes - -Auparavant, l'importation d'une image renvoyait une simple chaîne de caractères contenant le chemin de l'image. Désormais, les images importées correspondent à la signature suivante : - -```ts -interface ImageMetadata { - src: string; - width: number; - height: number; - format: string; -} -``` - -Vous devez mettre à jour l'attribut `src` de toutes les balises `` existantes (y compris toutes les [images dans les composants du cadre de l'interface utilisateur](#images-dans-les-composants-framework-ui)) et vous pouvez également mettre à jour d'autres attributs qui sont maintenant disponibles pour vous à partir de l'image importée. - -```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6} ---- -import rocket from '../images/rocket.svg'; ---- -Une fusée dans l'espace. - -Une fusée dans l'espace. -``` - -### Mettez à jour vos fichiers Markdown, MDX et Markdoc - -Les images relatives de votre projet `src/` peuvent maintenant être référencées dans Markdown, MDX et Markdoc en utilisant la syntaxe Markdown standard `![alt](src)`. - -Cela vous permet de déplacer vos images du répertoire `public/` vers votre projet `src/` où elles seront traitées et optimisées. Vos images existantes dans `public/` et les images distantes sont toujours valides mais ne sont pas optimisées par le processus de construction d'Astro. - -```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/" -# Ma Page Markdown - - -![A starry night sky.](../../images/stars.png) - - -![A starry night sky.](./stars.png) -``` - -Si vous souhaitez avoir plus de contrôle sur les attributs de vos images, nous vous recommandons d'utiliser le format de fichier `.mdx`, qui vous permet d'inclure le composant `` d'Astro ou une balise JSX `` en plus de la syntaxe Markdown. Utilisez l'[intégration MDX](/fr/guides/integrations-guide/mdx/) pour ajouter la prise en charge de MDX à Astro. - -### Supprimer `@astrojs/image` - - -Si vous utilisiez l'intégration d'images dans Astro v2.x, suivez les étapes suivantes : - - -1. Supprimez l'intégration `@astrojs/image`. - - Vous devez [supprimer l'intégration](/fr/guides/integrations-guide/#supprimer-une-intégration) en la désinstallant puis en la supprimant de votre fichier `astro.config.mjs`. - - ```js del={3,7} - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import image from '@astrojs/image'; - - export default defineConfig({ - integrations: [ - image(), - ] - }) - ``` - -2. Mettre à jour les types (si nécessaire) - - Si vous aviez des types spéciaux configurés pour `@astrojs/image` dans `src/env.d.ts`, vous pouvez avoir besoin de les changer pour les types Astro par défaut si votre mise à jour vers la v3 n'a pas effectué cette étape pour vous. - - ```ts title="src/env.d.ts" del={1} ins={2} - /// - /// - ``` - - De même, mettez à jour `tsconfig.json` si nécessaire : - - ```json title="tsconfig.json" del={3} ins={4} - { - "compilerOptions": { - "types": ["@astrojs/image/client"] - "types": ["astro/client"] - } - } - ``` - -3. Migrer tous les composants `` existants - - Changez toutes les instructions `import` de `@astrojs/image/components` à `astro:assets` afin d'utiliser le nouveau composant intégré ``. - - Supprimez tous les attributs du composant qui ne sont pas des [propriétés d'image actuellement supportées](/fr/guides/images/#propriétés). - - Par exemple, `aspectRatio` n'est plus supporté, car il est maintenant automatiquement déduit des attributs `width` et `height`. - - ```astro title="src/components/MyComponent.astro" del= {2,11} ins={3} - --- - import { Image } from '@astrojs/image/components'; - import { Image } from 'astro:assets'; - import localImage from '../assets/logo.png'; - const localAlt = 'The Astro Logo'; - --- - - {localAlt} - ``` - -4. Choisir un service d'images par défaut - - [Sharp](https://github.com/lovell/sharp) est maintenant le service d'image par défaut utilisé pour `astro:assets`. Si vous souhaitez utiliser Sharp, aucune configuration n'est nécessaire. - - Si vous préférez utiliser [Squoosh](https://github.com/GoogleChromeLabs/squoosh) pour transformer vos images, mettez à jour votre configuration avec l'option `image.service` suivante : - - ```js title="astro.config.mjs" ins={4-6} - import { defineConfig, squooshImageService } from 'astro/config'; - - export default defineConfig({ - image: { - service: squooshImageService(), - }, - }); - ``` - - -### Mise à jour des schémas des collections de contenu - -Vous pouvez maintenant déclarer une image associée à une entrée de collection de contenu, telle que l'image de couverture d'un article de blog, dans votre frontmatter en utilisant son chemin relatif au dossier courant. - -La nouvelle aide `image` pour les collections de contenu vous permet de valider les métadonnées de l'image en utilisant Zod. En savoir plus sur [comment utiliser les images dans les collections de contenus](/fr/guides/images/#images-dans-les-collections-de-contenus) - -### Naviguer dans les importations d'images dans Astro v3.0 - -Dans Astro v3.0, si vous devez conserver l'ancien comportement d'importation des images et exiger une représentation sous forme de chaîne de l'URL de l'image, ajoutez `?url` à la fin du chemin de l'image lorsque vous l'importez. Par exemple : - -```astro title="src/pages/blog/MyImages.astro" ---- -import Sprite from '../assets/logo.svg?url'; ---- - - - - - -``` - -Cette approche permet d'obtenir la chaîne d'URL. Gardez à l'esprit que pendant le développement, Astro utilise un chemin `src/`, mais lors de la construction, il génère des chemins hachés comme `/_astro/cat.a6737dd3.png`. - -Si vous préférez travailler directement avec l'objet image lui-même, vous pouvez accéder à la propriété `.src`. Cette approche est la meilleure pour des tâches telles que la gestion des dimensions des images pour les métriques de Core Web Vitals et la prévention de CLS. - -Si vous êtes en train de passer au nouveau comportement d'importation, la combinaison des méthodes `?url` et `.src` peut être la bonne méthode pour une gestion transparente des images. +Il existe plusieurs [intégrations d'images communautaires](https://astro.build/integrations?search=images) pour optimiser et travailler avec des images dans votre projet Astro. diff --git a/src/content/docs/fr/guides/integrations-guide.mdx b/src/content/docs/fr/guides/integrations-guide.mdx index 2aad805dbf269..d35768788b64e 100644 --- a/src/content/docs/fr/guides/integrations-guide.mdx +++ b/src/content/docs/fr/guides/integrations-guide.mdx @@ -8,7 +8,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components' -Les **intégrations Astro** permettent d'ajouter de nouvelles fonctionnalités et de nouveaux comportements à votre projet en quelques lignes de code. Vous pouvez écrire une intégration personnalisée vous-même, utiliser une intégration officielle ou utiliser des intégrations construites par la communauté. +Les **intégrations Astro** permettent d'ajouter de nouvelles fonctionnalités et de nouveaux comportements à votre projet en quelques lignes de code. Vous pouvez utiliser une intégration officielle, [des intégrations créées par la communauté](#intégrations-officielles) ou même [créer vous-même une intégration personnalisée](#construire-votre-propre-intégration). Les intégrations peuvent... diff --git a/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx b/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx index 167bcf8b55d26..26958188544a0 100644 --- a/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx +++ b/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx @@ -204,28 +204,16 @@ export default defineConfig({ }); ``` -### `wasmModuleImports` +### `cloudflareModules`

    **Type :** `true | false`
    - **Par défaut :** `false` + **Par défaut :** `true`

    -Importer ou non les fichiers `.wasm` directement en tant que [modules ES](https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration). +Active [les importations des modules `.wasm`, `.bin`, et `.txt`](#cloudflaremodules). -Ajouter `wasmModuleImports: true` à `astro.config.mjs` pour l'activer à la fois dans la version Cloudflare et dans le serveur de développement Astro. En savoir plus sur l'[utilisation des modules Wasm](#utilisation-des-modules-wasm). - -```js title="astro.config.mjs" ins={6} -import {defineConfig} from "astro/config"; -import cloudflare from '@astrojs/cloudflare'; - -export default defineConfig({ - adapter: cloudflare({ - wasmModuleImports: true - }), - output: 'server' -}) -``` +Cette fonctionnalité est activée par défaut. Si vous souhaitez la désactiver, définissez `cloudflareModules : false`. ## Cloudflare runtime @@ -337,14 +325,24 @@ Vous pouvez [spécifier des modèles de routage supplémentaires à suivre](#rou La création d'un `public/_routes.json` personnalisé annulera la génération automatique. Voir [la documentation de Cloudflare sur la création d'un `_routes.json` personnalisé](https://developers.cloudflare.com/pages/platform/functions/routing/#create-a-_routesjson-file) pour plus de détails. -## Utilisation des modules Wasm + +## Importations de modules Cloudflare + +Le moteur d'exécution cloudflare worker prend en charge les importations de certains [types de modules non standard](https://developers.cloudflare.com/pages/functions/module-support/). La plupart des types de fichiers supplémentaires sont également disponibles dans astro : + +- `.wasm` ou `.wasm?module` : exporte un [`WebAssembly.Module`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Module) qui peut ensuite être instancié. +- `.bin` : exporte un [`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) du contenu binaire brut du fichier +- `.txt` : Exporte une chaîne de caractères du contenu du fichier + +Tous les types de modules exportent une seule valeur par défaut. Les modules peuvent être importés à partir de pages affichées côté serveur ou de pages pré-rendues pour la génération de sites statiques. Voici un exemple d'importation d'un module Wasm qui répond aux requêtes en additionnant les paramètres numériques de la requête. ```js title="pages/add/[a]/[b].js" -import mod from '../util/add.wasm?module'; +// Importer le module WebAssembly +import mod from '../util/add.wasm'; -// instanciation à l'avance pour partager le module +// Instancier d'abord pour l'utiliser const addModule: any = new WebAssembly.Instance(mod); export async function GET(context) { @@ -354,7 +352,7 @@ export async function GET(context) { } ``` -Bien que cet exemple soit trivial, Wasm peut être utilisé pour accélérer des opérations de calcul intensif qui n'impliquent pas d'E/S importantes, comme l'intégration d'une bibliothèque de traitement d'images. +Bien que cet exemple soit trivial, Wasm peut être utilisé pour accélérer des opérations de calcul intensif qui n'impliquent pas d'E/S importantes, comme l'intégration d'une bibliothèque de traitement d'images, ou l'intégration d'une petite base de données pré-indexée pour la recherche sur un ensemble de données en lecture seule. ## Compatibilité Node.js diff --git a/src/content/docs/fr/guides/integrations-guide/lit.mdx b/src/content/docs/fr/guides/integrations-guide/lit.mdx index 083d8ee292af2..be4a4de709f4e 100644 --- a/src/content/docs/fr/guides/integrations-guide/lit.mdx +++ b/src/content/docs/fr/guides/integrations-guide/lit.mdx @@ -126,6 +126,34 @@ import { MyElement } from '../components/my-element.js'; Lit nécessite la présence de variables globales du navigateur tel que `HTMLElement` et `customElements`. Pour cette raison, le moteur de rendu Lit adapte le serveur avec ces éléments globaux pour que Lit puisse fonctionner. Il se peut que vous rencontriez des bibliothèques qui fonctionnent mal à cause de cela. ::: +### Décorateurs expérimentaux + +Pour utiliser les [décorateurs expérimentaux dans Lit](https://lit.dev/docs/components/decorators/), ajoutez ce qui suit à votre fichier `tsconfig.json` : + +```json title="tsconfig.json" add={3} +{ + "compilerOptions": { + "experimentalDecorators": true, + } +} +``` + +Cela vous permet d'utiliser des décorateurs expérimentaux tels que `@customElement` et `@state` pour enregistrer un élément personnalisé et définir une propriété d'état dans votre composant Lit : + +```ts title="src/components/my-element.ts" +import { LitElement, html } from "lit"; +import { customElement, state } from "lit/decorators.js"; + +@customElement("my-element") +export class MyElement extends LitElement { + @state() name = "my-element"; + + override render() { + return html`

    Bonjour à tous ! De ${this.name}

    `; + } +} +``` + ### Polyfills et hydratation Le moteur de rendu gère automatiquement l'ajout des polyfills appropriés pour le support des navigateurs qui n'ont pas Declarative Shadow DOM. Le polyfill fait environ *1.5kB*. Si le navigateur supporte Declarative Shadow DOM, moins de 250 octets sont chargés (pour détecter le support). diff --git a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx index 4815f3fb5aaa7..c9822aee0695f 100644 --- a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; import ReadMore from '~/components/ReadMore.astro'; Cette **[intégration Astro][astro-integration]** permet d'utiliser [Markdoc](https://markdoc.dev/) pour créer des composants, des pages et des entrées de collection de contenu. @@ -411,6 +412,7 @@ Le composant Astro `` ne peut pas être utilisé directement dans Markd Pour remplacer le nœud d'image par défaut, vous pouvez configurer un composant `.astro` qui sera affiché à la place d'un `` standard. + 1. Créez un composant `MarkdocImage.astro` personnalisé pour passer les propriétés `src` et `alt` de votre image au composant `` : ```astro title="src/components/MarkdocImage.astro" @@ -467,6 +469,7 @@ Pour remplacer le nœud d'image par défaut, vous pouvez configurer un composant ![Une photo de chien](https://example.com/chien.jpg) ``` + #### Créer une balise d'image Markdoc personnalisée @@ -474,6 +477,7 @@ Une balise Markdoc `image` vous permet de définir des attributs supplémentaire Les étapes suivantes permettent de créer une balise image Markdoc personnalisée pour afficher un élément `
    ` avec une légende, en utilisant le composant Astro `` pour optimiser l'image. + 1. Créez un composant `MarkdocFigure.astro` pour recevoir les props nécessaires et afficher une image avec une légende : ```astro title="src/components/MarkdocFigure.astro" @@ -517,7 +521,7 @@ Les étapes suivantes permettent de créer une balise image Markdoc personnalis ```md {% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" caption="une légende !" %} ``` - + ### Configuration de Markdoc diff --git a/src/content/docs/fr/guides/integrations-guide/preact.mdx b/src/content/docs/fr/guides/integrations-guide/preact.mdx index 4d1662f167166..35d07c20580c8 100644 --- a/src/content/docs/fr/guides/integrations-guide/preact.mdx +++ b/src/content/docs/fr/guides/integrations-guide/preact.mdx @@ -19,7 +19,7 @@ Preact est une bibliothèque qui vous permet de créer des composants d'interfac Preact est également un excellent choix si vous avez déjà utilisé React. Preact fournit la même API que React, mais dans un format beaucoup plus petit de 3 Ko. Il supporte même le rendu de nombreux composants React en utilisant l'option de configuration `compat` (voir ci-dessous). **Vous souhaitez en savoir plus sur Preact avant d'utiliser cette intégration ?** -Consultez ["Apprendre Preact en 10 minutes"](https://preactjs.com/tutorial), un tutoriel interactif sur leur site web. +Consultez ["Learn Preact" (EN)](https://preactjs.com/tutorial), un tutoriel interactif sur leur site web. ## Installation diff --git a/src/content/docs/fr/guides/integrations-guide/react.mdx b/src/content/docs/fr/guides/integrations-guide/react.mdx index 73c80a9ea541f..c80622ebfe700 100644 --- a/src/content/docs/fr/guides/integrations-guide/react.mdx +++ b/src/content/docs/fr/guides/integrations-guide/react.mdx @@ -152,7 +152,7 @@ import ReactComponent from './ReactComponent'; Si vous utilisez une bibliothèque qui *attend* que plus d'un élément enfant soit passé, par exemple pour qu'elle puisse placer certains éléments à différents endroits, vous pourriez trouver cela bloquant. -Vous pouvez définir le drapeau expérimental `experimentalReactChildren` pour dire à Astro de toujours passer les enfants à React en tant que vnodes React. Il y a un coût d'exécution à cela, mais cela peut aider à la compatibilité. +Vous pouvez définir le drapeau expérimental `experimentalReactChildren` pour dire à Astro de toujours passer les enfants à React en tant que nœuds DOM virtuels React. Il y a un coût d'exécution à cela, mais cela peut aider à la compatibilité. Vous pouvez activer cette option dans la configuration de l'intégration de React : diff --git a/src/content/docs/fr/guides/integrations-guide/vue.mdx b/src/content/docs/fr/guides/integrations-guide/vue.mdx index e2a04af6be392..1ad376da4c9bd 100644 --- a/src/content/docs/fr/guides/integrations-guide/vue.mdx +++ b/src/content/docs/fr/guides/integrations-guide/vue.mdx @@ -211,3 +211,25 @@ export default defineConfig({ integrations: [vue({ devtools: true })], }); ``` + +#### Personnaliser Vue DevTools + +

    + +Pour plus de personnalisation, vous pouvez passer des options que [le plugin Vue DevTools Vite](https://devtools-next.vuejs.org/guide/vite-plugin#options) supporte. (Note : `appendTo` n'est pas supporté). + +Par exemple, vous pouvez définir `launchEditor` à votre éditeur préféré si vous n'utilisez pas Visual Studio Code : + +```js title="astro.config.mjs" +import { defineConfig } from "astro/config"; +import vue from "@astrojs/vue"; + +export default defineConfig({ + // ... + integrations: [ + vue({ + devtools: { launchEditor: "webstorm" }, + }), + ], +}); +``` diff --git a/src/content/docs/fr/guides/markdown-content.mdx b/src/content/docs/fr/guides/markdown-content.mdx index e324f21450bce..515141a15fbd5 100644 --- a/src/content/docs/fr/guides/markdown-content.mdx +++ b/src/content/docs/fr/guides/markdown-content.mdx @@ -3,11 +3,11 @@ title: Markdown & MDX description: Apprenez à créer du contenu en utilisant Markdown ou MDX avec Astro. i18nReady: true --- - -import Since from '~/components/Since.astro' +import Since from '~/components/Since.astro'; import { FileTree } from '@astrojs/starlight/components'; import RecipeLinks from "~/components/RecipeLinks.astro"; -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; Le [Markdown](https://daringfireball.net/projects/markdown/) est couramment utilisé pour créer des contenus à forte teneur en texte, tels que des articles de blog et de la documentation. Astro inclut une prise en charge intégrée des fichiers Markdown standard qui peuvent également inclure un [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) pour définir des métadonnées personnalisées telles qu'un titre, une description et des balises. @@ -442,6 +442,10 @@ export default defineConfig({ }); ``` +:::note +`getHeadings()` ne renvoie que les titres écrits directement dans un fichier Markdown ou MDX. Si un fichier MDX importe des composants qui contiennent leurs propres titres, ceux-ci ne seront pas retournés par `getHeadings()`. +::: + #### Personnaliser un plugin Pour personnaliser un plugin, il faut lui fournir un objet `options` dans un tableau imbriqué. @@ -469,22 +473,23 @@ Si vous utilisez des [collections de contenus](/fr/guides/content-collections/), Vous pouvez ajouter des propriétés frontmatter à tout vos fichiers Markdown et MDX en utilisant un [plugin remark ou rehype](#plugins-markdown). + 1. Ajoutez un `customProperty` à la propriété `data.astro.frontmatter` de l'argument `file` de votre plugin : - - ```js title="example-remark-plugin.mjs" - export function exampleRemarkPlugin() { - // Tous les plugins remark et rehype renvoient une fonction distincte - return function (tree, file) { - file.data.astro.frontmatter.customProperty = 'Propriété générée'; - } - } - ``` - - :::tip - - - `data.astro.frontmatter` contient toutes les propriétés d'un document Markdown ou MDX donné. Cela vous permet de modifier les propriétés existantes du frontmatter, ou de calculer de nouvelles propriétés à partir de ce frontmatter existant. - ::: + + ```js title="example-remark-plugin.mjs" + export function exampleRemarkPlugin() { + // Tous les plugins remark et rehype renvoient une fonction distincte + return function (tree, file) { + file.data.astro.frontmatter.customProperty = 'Propriété générée'; + } + } + ``` + + :::tip + + + `data.astro.frontmatter` contient toutes les propriétés d'un document Markdown ou MDX donné. Cela vous permet de modifier les propriétés existantes du frontmatter, ou de calculer de nouvelles propriétés à partir de ce frontmatter existant. + ::: 2. Appliquez ce plugin à votre configuration d'intégration `markdown` ou `mdx` : @@ -513,6 +518,7 @@ Vous pouvez ajouter des propriétés frontmatter à tout vos fichiers Markdown e ], }); ``` + Désormais, chaque fichier Markdown ou MDX contiendra `customProperty` dans son frontmatter, ce qui le rendra disponible lors de [l'importation de votre markdown](#importer-du-contenu-markdown) et depuis [la propriété `Astro.props.frontmatter` dans vos layouts](#frontmatter-layout) @@ -591,8 +597,8 @@ export default defineConfig({ // Choisissez parmi les thèmes intégrés de Shiki (ou ajoutez les vôtres) // https://shiki.style/themes theme: 'dracula', - // Alternativement, fournir plusieurs thèmes - // https://shiki.style/guide/dual-themes + // Alternativement, vous pouvez fournir des multiples thèmes + // Voir la note ci-dessous pour l'utilisation de deux thèmes claire/foncé themes: { light: 'github-light', dark: 'github-dark', @@ -611,6 +617,10 @@ export default defineConfig({ }); ``` +:::note[Personnalisation des thèmes Shiki] +Les blocs de code Astro sont stylisés en utilisant la classe `.astro-code`. Lorsque vous suivez la documentation de Shiki (par exemple pour [personnaliser un thème double clair/foncé ou de multiples thèmes](https://shiki.style/guide/dual-themes#query-based-dark-mode)), assurez-vous de remplacer la classe `.shiki` dans les exemples par `.astro-code` +::: + #### Ajouter votre propre thème Au lieu d'utiliser l'un des thèmes prédéfinis de Shiki, vous pouvez importer un thème personnalisé à partir d'un fichier local. @@ -647,9 +657,13 @@ export default defineConfig({ Si vous choisissez d'utiliser Prism, Astro appliquera les classes CSS de Prism à la place. Notez que **vous devez apporter votre propre feuille de style CSS** pour que la coloration syntaxique apparaisse ! + 1. Choisissez une feuille de style prédéfinie parmi les [Thèmes Prism](https://github.com/PrismJS/prism-themes) disponibles. + 2. Ajouter cette feuille de styles dans [le répertoire `public/` de votre projet](/fr/basics/project-structure/#public). + 3. Chargez-la dans la balise `` de votre page dans un [composant de feuille de style](/fr/basics/layouts/) via une balise ``. (Voir [utilisation basique de Prism](https://prismjs.com/#basic-usage).) + Vous pouvez aussi visiter la [liste des langages supportés par Prism](https://prismjs.com/#supported-languages) pour les options et leur usage. diff --git a/src/content/docs/fr/guides/middleware.mdx b/src/content/docs/fr/guides/middleware.mdx index 96b27c895e39e..54d09200b7fe0 100644 --- a/src/content/docs/fr/guides/middleware.mdx +++ b/src/content/docs/fr/guides/middleware.mdx @@ -6,7 +6,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { Steps } from '@astrojs/starlight/components'; -**Middleware** vous permet d'intercepter les demandes et les réponses et d'injecter des comportements de manière dynamique chaque fois qu'une page ou un point de terminaison est sur le point d'être rendu. Ce rendu a lieu au moment de la construction pour toutes les pages pré-rendues, mais il a lieu lorsque la route est demandée pour les pages rendues à la demande. +**Middleware** vous permet d'intercepter les demandes et les réponses et d'injecter des comportements de manière dynamique chaque fois qu'une page ou un point de terminaison est sur le point d'être rendu. Ce rendu a lieu au moment de la construction pour toutes les pages pré-rendues, mais il a lieu lorsque la route est demandée pour les pages rendues à la demande, rendant disponible [des fonctionnalités SSR supplémentaires telles que les cookies et les en-têtes](/fr/guides/server-side-rendering/#fonctions-de-rendu-à-la-demande). Le middleware vous permet également de définir et de partager des informations spécifiques aux requêtes entre les points de terminaison et les pages en modifiant un objet `locals` disponible dans tous les composants Astro et les points de terminaison de l'API. Cet objet est disponible même lorsque ce middleware s'exécute au moment de la construction. diff --git a/src/content/docs/fr/guides/prefetch.mdx b/src/content/docs/fr/guides/prefetch.mdx index 7ffa2ed346788..34fc06ea29811 100644 --- a/src/content/docs/fr/guides/prefetch.mdx +++ b/src/content/docs/fr/guides/prefetch.mdx @@ -51,7 +51,6 @@ Chaque stratégie est finement ajustée pour ne précharger que lorsque c'est n - Si un visiteur utilise le [mode d'économie de données](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/saveData) ou dispose d'une [connexion lente](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/effectiveType), la stratégie de préchargement sera remplacée par la stratégie `tap`. - Un survol ou un défilement rapide des liens ne les récupérera pas. -- Les liens qui utilisent la stratégie `viewport` ou `load` ont une priorité plus faible pour éviter d'encombrer le réseau. ### Stratégie de prefetch par défaut @@ -106,17 +105,6 @@ Comme certaines navigations n'apparaissent pas toujours comme des liens `` ``` -Vous pouvez également configurer la priorité du préchargement en passant l'option `with` : - -```js -// Prefetch avec `fetch()`, qui a une priorité plus élevée. -prefetch('/about', { with: 'fetch' }); - -// Prefetch avec ``, qui a une priorité plus faible -// et programmé manuellement par le navigateur. (par défaut) -prefetch('/about', { with: 'link' }); -``` - L'API `prefetch()` inclut la même détection de [mode d'économie de données](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/saveData) et de [connexion lente](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/effectiveType) de façon à ce qu'elle ne prenne en compte que ce qui est nécessaire. Pour ignorer la détection de connexion lente, vous pouvez utiliser l'option `ignoreSlowConnection` : @@ -154,6 +142,38 @@ export default defineConfig({ }); ``` +## Prise en charge du navigateur + +Astro utilise [``](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel/prefetch) si le navigateur le supporte, et revient à l'API [`fetch()`](https://developer.mozilla.org/fr/docs/Web/API/Fetch_API) dans le cas contraire. + +Les navigateurs les plus courants prennent en charge le système de préchargement d'Astro avec des différences subtiles : + +### Chrome + +Chrome supporte ``. La fonctionnalité "prefetch" fonctionne comme prévu. + +### Firefox + +Firefox supporte `` mais peut afficher des erreurs ou échouer complètement : + +- Sans un en-tête de cache explicite (par exemple [`Cache-Control`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Cache-Control) ou [`Expires`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Expires)), le prefetch se terminera par une erreur `NS_BINDING_ABORTED`. +- Même en cas d'erreur, si la réponse contient un en-tête [`ETag`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/ETag) correct, il sera réutilisé pour la navigation. +- Dans le cas contraire, s'il n'y a pas d'autres en-têtes de cache, le prefetch ne fonctionnera pas. + +### Safari + +Safari ne prend pas en charge `` et se rabattra sur l'API `fetch()` qui nécessite que les en-têtes de cache (par exemple [`Cache-Control`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Expires), et [`ETag`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/ETag)) soient définis. Dans le cas contraire, le prefetch ne fonctionnera pas. + +**Edge case :** Les en-têtes `ETag` ne fonctionnent pas dans les fenêtres privées. + +### Recommendations + +Pour une meilleure prise en charge de tous les navigateurs, assurez-vous que vos pages ont les bons en-têtes de cache. + +Pour les pages statiques ou pré-rendues, l'en-tête `ETag` est souvent défini automatiquement par la plateforme de déploiement et est censé fonctionner dès le départ. + +Pour les pages dynamiques et affiché côté serveur, définissez vous-même les en-têtes de cache appropriés en fonction du contenu de la page. Consultez la [documentation MDN sur la mise en cache HTTP](https://developer.mozilla.org/fr/docs/Web/HTTP/Caching) pour plus d'informations. + ## Migration depuis `@astrojs/prefetch` L'intégration `@astrojs/prefetch` a été dépréciée dans la version 3.5.0 et sera finalement entièrement supprimée. Utilisez les instructions suivantes pour migrer vers le prefetching intégré d'Astro qui remplace cette intégration. diff --git a/src/content/docs/fr/guides/routing.mdx b/src/content/docs/fr/guides/routing.mdx index 17341738409ab..2158933d9cfbd 100644 --- a/src/content/docs/fr/guides/routing.mdx +++ b/src/content/docs/fr/guides/routing.mdx @@ -8,14 +8,17 @@ import RecipeLinks from "~/components/RecipeLinks.astro" import Since from '~/components/Since.astro' import ReadMore from '~/components/ReadMore.astro' -Astro utilise un **routage basé sur les fichiers** pour générer vos URLs de construction en fonctionde la disposition des fichiers dans le répertoire `src/pages/` de votre projet. Lorsqu'un fichier est ajouté au répertoire `src/pages` de votre projet, il est automatiquement disponible en tant que route basée sur son nom de fichier. +Astro utilise **le routage basé sur les fichiers** pour générer vos URLs de construction en fonction de la disposition des fichiers dans le répertoire `src/pages/` de votre projet. ## Naviguer entre les pages -Astro utilise des éléments HTML standard [`` elements](https://developer.mozilla.org/fr-FR/docs/Web/HTML/Element/a) pour naviguer entre les itinéraires. Il n'y a pas de composant `` spécifique au cadre de travail. +Astro utilise des éléments HTML standard [``](https://developer.mozilla.org/fr-FR/docs/Web/HTML/Element/a) pour naviguer entre les itinéraires. Il n'y a pas de composant `` spécifique au cadre de travail. ```astro title="src/pages/index.astro" -

    En savoir plus a propos d'Astro!

    +

    En savoir plus about Astro !

    + + +

    Apprenez-en plus dans notre section référence !

    ``` ## Routes Statiques diff --git a/src/content/docs/fr/guides/rss.mdx b/src/content/docs/fr/guides/rss.mdx index 88560e9a559f1..2919858522dc9 100644 --- a/src/content/docs/fr/guides/rss.mdx +++ b/src/content/docs/fr/guides/rss.mdx @@ -269,7 +269,7 @@ Pour l'activer, ajoutez une balise `` avec les attributs suivants à l'él rel="alternate" type="application/rss+xml" title="Votre titre de site" - href={`${Astro.site}rss.xml`} + href={new URL("rss.xml", Astro.site)} /> ``` diff --git a/src/content/docs/fr/guides/testing.mdx b/src/content/docs/fr/guides/testing.mdx index 5d54e82df997c..ec6dc8e0448ac 100644 --- a/src/content/docs/fr/guides/testing.mdx +++ b/src/content/docs/fr/guides/testing.mdx @@ -3,14 +3,17 @@ title: Test description: Une introduction aux tests dans Astro i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Since from '~/components/Since.astro' Les tests vous aident à écrire et à maintenir un code Astro fonctionnel. Astro prend en charge de nombreux outils populaires pour les tests unitaires, les tests de composants et les tests de bout en bout, notamment Jest, Mocha, Jasmine, [Cypress](https://cypress.io) et [Playwright](https://playwright.dev). Vous pouvez même installer des bibliothèques de test spécifiques au framework, telles que React Testing Library, pour tester les composants de votre framework d'interface utilisateur. Les frameworks de test vous permettent d'énoncer des **assertions** ou des **attentes** sur la manière dont votre code devrait se comporter dans des situations spécifiques, puis de les comparer au comportement réel de votre code actuel. -## Vitest +## Tests unitaires et d'intégration + +### Vitest Un framework de test unitaire natif Vite avec support ESM, TypeScript et JSX propulsé par esbuild. @@ -43,11 +46,156 @@ export default getViteConfig( Voir le [modèle de démarrage Astro + Vitest](https://github.com/withastro/astro/tree/latest/examples/with-vitest) sur GitHub. -## Cypress +#### Vitest et l'API Conteneur + +

    + +Vous pouvez tester nativement les composants Astro en utilisant l'API [container](/fr/reference/container-reference/). Tout d'abord, configurez [`vitest` comme expliqué ci-dessus](#vitest), puis créez un fichier `.test.js` pour tester votre composant : + +```js title="example.test.js" +import { experimental_AstroContainer as AstroContainer } from 'astro/container'; +import { expect, test } from 'vitest'; +import Card from '../src/components/Card.astro'; + +test('Card with slots', async () => { + const container = await AstroContainer.create(); + const result = await container.renderToString(Card, { + slots: { + default: 'Contenu de la carte', + }, + }); + + expect(result).toContain('Ceci est une carte'); + expect(result).toContain('Ccontenu de la carte'); +}); +``` + +## Tests de bout en bout + +### Playwright + +Playwright est un outil de test de bout en bout pour les applications web modernes. Utilisez l'API Playwright en JavaScript ou TypeScript pour tester votre code Astro sur tous les moteurs de rendu modernes, notamment Chromium, WebKit et Firefox. + +#### Installation + +Vous pouvez démarrer et exécuter vos tests à l'aide de [l'extension VS Code](https://playwright.dev/docs/getting-started-vscode). + +Vous pouvez également installer Playwright dans votre projet Astro à l'aide du gestionnaire de paquets de votre choix. Suivez les étapes CLI pour choisir JavaScript/TypeScript, nommer votre dossier de test et ajoutez un flux de travail GitHub Actions (facultatif). + + + + ```shell + npm init playwright@latest + ``` + + + ```shell + pnpm dlx create-playwright + ``` + + + ```shell + yarn create playwright + ``` + + + +#### Créez votre premier test Playwright + + +1. Choisissez une page à tester. Cet exemple testera la page d'exemple `index.astro` ci-dessous. + + ```html title="src/pages/index.astro" + --- + --- + + + Astro est génial ! + + + + + ``` + +2. Créez un nouveau dossier et ajoutez le fichier de test suivant dans `src/test`. Copiez et collez le test suivant dans le fichier pour vérifier que les méta-informations de la page sont correctes. Mettez à jour la valeur de la page `` pour qu'elle corresponde à la page que vous testez. + + ```jsx title="src/test/index.spec.ts" "Astro est génial !" + import { test, expect } from '@playwright/test'; + + test('meta is correct', async ({ page }) => { + await page.goto("http://localhost:4321/"); + + await expect(page).toHaveTitle('Astro est génial !'); + }); + ``` + + :::tip[Fixer un `baseUrl`] + Vous pouvez définir [`"baseURL" : "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) dans le fichier de configuration `playwright.config.ts` pour utiliser `page.goto("/")` au lieu de `page.goto("http://localhost:4321/")` pour une URL plus pratique. + ::: +</Steps> + +#### Exécution des tests Playwright + +Vous pouvez exécuter un seul test ou plusieurs tests à la fois, en testant un ou plusieurs navigateurs. Par défaut, les résultats de vos tests s'affichent dans le terminal. En option, vous pouvez ouvrir le rapporteur de test HTML pour afficher un rapport complet et filtrer les résultats des tests. + +<Steps> +1. Pour exécuter le test de l'exemple précédent en ligne de commande, utilisez la commande `test`. Si vous le souhaitez, vous pouvez inclure le nom du fichier pour n'exécuter qu'un seul test : + + ```sh + npx playwright test index.spec.ts + ``` + +2. Pour voir le rapport de test HTML complet, ouvrez-le à l'aide de la commande suivante : + + ```sh + npx playwright show-report + ``` +</Steps> + +:::tip +Exécutez vos tests par rapport à votre code de production pour qu'ils ressemblent davantage à votre site réel et déployé. +::: + +##### Avancé : Lancement d'un serveur web de développement pendant les tests + +Vous pouvez également demander à Playwright de démarrer votre serveur lorsque vous exécutez votre script de test en utilisant l'option [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) dans le fichier de configuration de Playwright. + +Voici un exemple de la configuration et des commandes nécessaires à l'utilisation de npm : + +<Steps> +1. Ajoutez un script de test à votre fichier `package.json` à la racine du projet, comme `"test:e2e" : "playwright test"`. + +2. Dans `playwright.config.ts`, ajoutez l'objet `webServer` et mettez à jour la valeur de la commande à `npm run preview`. + + ```js title="playwright.config.ts" ins={4-9} "npm run preview" + import { defineConfig } from '@playwright/test'; + + export default defineConfig({ + webServer: { + command: 'npm run preview', + url: 'http://localhost:4321/', + timeout: 120 * 1000, + reuseExistingServer: !process.env.CI, + }, + use: { + baseURL: 'http://localhost:4321/', + }, + }); + ``` + +3. Lancez `npm run build`, puis `npm run test:e2e` pour lancer les tests Playwright. +</Steps> + +Vous trouverez plus d'informations sur Playwright dans les liens ci-dessous : + +- [Démarrer avec Playwright](https://playwright.dev/docs/intro) +- [Utiliser un serveur de développement](https://playwright.dev/docs/test-webserver#configuring-a-web-server) + +### Cypress Cypress est un outil de test frontal conçu pour le web moderne. Cypress vous permet d'écrire des tests de bout en bout pour votre site Astro. -### Installation +#### Installation Vous pouvez installer Cypress en utilisant le gestionnaire de paquets de votre choix. @@ -71,7 +219,7 @@ Vous pouvez installer Cypress en utilisant le gestionnaire de paquets de votre c </Fragment> </PackageManagerTabs> -### Configuration +#### Configuration À la racine de votre projet, créez un fichier `cypress.config.js` avec le contenu suivant : @@ -85,8 +233,9 @@ export default defineConfig({ }) ``` -### Créer votre premier test Cypress +#### Créer votre premier test Cypress +<Steps> 1. Choisissez une page à tester. Cet exemple testera la page d'exemple `index.astro` ci-dessous. ```html title="src/pages/index.astro" @@ -117,6 +266,7 @@ export default defineConfig({ :::tip[Configurez un `baseUrl`] Vous pouvez définir [`"baseUrl" : "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) dans le fichier de configuration `cypress.config.js` pour utiliser `cy.visit("/")` au lieu de `cy.visit("http://localhost:4321/")` pour une URL plus pratique. ::: +</Steps> ### Exécuter vos tests Cypress @@ -143,7 +293,6 @@ Une fois l'exécution du test terminée, vous devriez voir des coches vertes dan ```shell title="Output from npx cypress run" Running: index.cy.js (1 of 1) - ✓ titles are correct (107ms) 1 passing (1s) @@ -162,18 +311,18 @@ Pour vérifier que votre test fonctionne vraiment, vous pouvez modifier la ligne Exécutez à nouveau le test. Vous devriez voir un "x" rouge dans la sortie confirmant que votre test a échoué. ::: -### Prochaines étapes +#### Prochaines étapes Vous trouverez plus d'informations sur Cypress dans les liens ci-dessous : - [Introduction à Cypress](https://docs.cypress.io/guides/basics/introduction-to-cypress) - [Tester votre application](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app) -## NightwatchJS +### NightwatchJS Nightwatch.js est un framework d'automatisation des tests avec un ensemble puissant d'outils pour écrire, exécuter et déboguer vos tests sur le web avec un support intégré pour tous les principaux navigateurs et leurs équivalents mobiles, ainsi que pour les applications mobiles natives. -### Installation +#### Installation Vous pouvez installer NightwatchJS dans votre projet Astro en utilisant le gestionnaire de paquets de votre choix. Suivez les étapes CLI pour choisir JavaScript/TypeScript, nommer votre dossier de test et choisir d'inclure ou non les tests de composants et les tests sur les navigateurs mobiles. @@ -195,8 +344,9 @@ Vous pouvez installer NightwatchJS dans votre projet Astro en utilisant le gesti </Fragment> </PackageManagerTabs> -### Créez votre premier test Nightwatch +#### Créez votre premier test Nightwatch +<Steps> 1. Choisissez une page à tester. Cet exemple testera la page d'exemple `index.astro` ci-dessous. ```html title="src/pages/index.astro" @@ -228,6 +378,7 @@ Vous pouvez installer NightwatchJS dans votre projet Astro en utilisant le gesti :::tip[Configurez un `baseUrl] Vous pouvez définir [`"baseURL" : "http://localhost:4321"`](https://nightwatchjs.org/guide/reference/settings.html#setting-the-baseurl-property) dans le fichier de configuration `nightwatch.conf.js` pour utiliser `browser.navigateTo("/")` au lieu de `browser.navigateTo("http://localhost:4321/")` pour une URL plus pratique.. ::: +</Steps> ### Exécution des tests NightwatchJS @@ -235,23 +386,23 @@ Vous pouvez exécuter un seul test ou plusieurs tests à la fois, en testant un Vous pouvez exécuter les tests avec [NightwatchJS VSCode Extension](https://marketplace.visualstudio.com/items?itemName=browserstackcom.nightwatch) ou en utilisant les étapes CLI ci-dessous : -1. Pour exécuter tous les tests, entrez la commande suivante dans le terminal. Vous pouvez également inclure le nom du fichier pour n'exécuter qu'un seul test : +<Steps> +1. Pour exécuter tous les tests, entrez la commande suivante dans le terminal. Si vous le souhaitez, vous pouvez inclure le nom du fichier pour n'exécuter qu'un seul test : ```sh npx nightwatch test/index.js ``` - -2. Pour voir le rapport de test HTML complet, ouvrez-le à l'aide de la commande suivante : - + De plus, vous pouvez exécuter les tests avec un navigateur spécifique en utilisant l'argument CLI `--environment` ou `-e`. Si vous n'avez pas installé le navigateur approprié, Nightwatch essaiera de le configurer pour vous en utilisant [Selenium Manager] (https://www.selenium.dev/blog/2022/introducing-selenium-manager/) : + ```sh - npx nightwatch test/index.ts --open + npx nightwatch test/index.ts -e firefox ``` - -3. Pour exécuter les tests avec un navigateur spécifique, utilisez l'argument CLI `--environment` ou `-e`. Si vous n'avez pas installé le navigateur approprié, Nightwatch essaiera de le configurer pour vous en utilisant [Selenium Manager](https://www.selenium.dev/blog/2022/introducing-selenium-manager/) +2. Pour voir le rapport de test HTML complet, ouvrez-le à l'aide de la commande suivante : ```sh - npx nightwatch test/index.ts -e firefox + npx nightwatch test/index.ts --open ``` +</Steps> :::tip Exécutez vos tests par rapport à votre code de production pour qu'ils ressemblent davantage à votre site réel, déployé. @@ -261,115 +412,3 @@ Vous trouverez plus d'informations sur NightwatchJS dans les liens ci-dessous : - [Introduction à Nightwatch](https://nightwatchjs.org/guide/overview/what-is-nightwatch.html) - [Tester avec Nightwatch](https://nightwatchjs.org/guide/writing-tests/introduction.html) - -## Playwright - -Playwright est un cadre de test de bout en bout pour les applications web modernes. Utilisez l'API Playwright en JavaScript ou TypeScript pour tester votre code Astro sur tous les moteurs de rendu modernes, y compris Chromium, WebKit et Firefox. - -### Installation - -Vous pouvez démarrer et exécuter vos tests à l'aide de [VS Code Extension](https://playwright.dev/docs/getting-started-vscode). - -Vous pouvez également installer Playwright dans votre projet Astro à l'aide du gestionnaire de paquets de votre choix. Suivez les étapes CLI pour choisir JavaScript/TypeScript, nommer votre dossier de test et ajouter un flux de travail GitHub Actions facultatif. - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm init playwright@latest - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm dlx create-playwright - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn create playwright - ``` - </Fragment> -</PackageManagerTabs> - -### Créez votre premier test Playwright - -1. Choisissez une page à tester. Cet exemple testera la page d'exemple `index.astro` ci-dessous. - - ```html title="src/pages/index.astro" - --- - --- - <html lang="fr"> - <head> - <title>Astro est formidable ! - - - - - ``` - -1. Créez un nouveau dossier et ajoutez le fichier de test suivant dans `src/test`. Copiez et collez le test suivant dans le fichier pour vérifier que les méta-informations de la page sont correctes. Mettez à jour la valeur de la page `` pour qu'elle corresponde à la page que vous testez. - - ```jsx title="src/test/index.spec.ts" "Astro is awesome!" - import { test, expect } from '@playwright/test'; - - test('meta is correct', async ({ page }) => { - await page.goto("http://localhost:4321/"); - - await expect(page).toHaveTitle('Astro is awesome!'); - }); - ``` - - :::tip[Configurez un `baseUrl`] - Vous pouvez définir [`"baseURL" : "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) dans le fichier de configuration `playwright.config.ts` pour utiliser `page.goto("/")` au lieu de `page.goto("http://localhost:4321/")` pour une URL plus pratique. - ::: - -### Exécution des tests Playwright - -Vous pouvez exécuter un seul test ou plusieurs tests à la fois, en testant un ou plusieurs navigateurs. Par défaut, les résultats de vos tests s'affichent dans le terminal. En option, vous pouvez ouvrir le rapporteur de test HTML pour afficher un rapport complet et filtrer les résultats des tests. - -1. Pour exécuter le test de l'exemple précédent en ligne de commande, utilisez la commande `test`. Si vous le souhaitez, vous pouvez inclure le nom du fichier pour n'exécuter qu'un seul test : - - ```sh - npx playwright test index.spec.ts - ``` - -1. Pour voir le rapport de test HTML complet, ouvrez-le à l'aide de la commande suivante : - - ```sh - npx playwright show-report - ``` - -:::tip -Exécutez vos tests par rapport à votre code de production pour qu'ils ressemblent davantage à votre site réel, déployé. -::: - -#### Avancé : Lancement d'un serveur web de développement pendant les tests - -Vous pouvez également demander à Playwright de lancer votre serveur lorsque vous exécutez votre script de test en utilisant l'option [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) dans le fichier de configuration de Playwright. - -Voici un exemple de la configuration et des commandes nécessaires à l'utilisation de npm : - -1. Ajoutez un script de test à votre fichier `package.json` à la racine du projet, comme `"test:e2e" : "playwright test"`. -1.Dans `playwright.config.ts`, ajoutez l'objet `webServer` et mettez à jour la valeur de la commande à `npm run preview`. - - ```js title="playwright.config.ts" ins={4-9} "npm run preview" - import { defineConfig } from '@playwright/test'; - - export default defineConfig({ - webServer: { - command: 'npm run preview', - url: 'http://localhost:4321/', - timeout: 120 * 1000, - reuseExistingServer: !process.env.CI, - }, - use: { - baseURL: 'http://localhost:4321/', - }, - }); - ``` - -1. Lancez `npm run build`, puis `npm run test:e2e` pour exécuter les tests Playwright. - -Vous trouverez plus d'informations sur Playwright dans les liens ci-dessous : - -- [Démarrer avec Playwright](https://playwright.dev/docs/intro) -- [Utiliser un serveur de développement](https://playwright.dev/docs/test-webserver#configuring-a-web-server) diff --git a/src/content/docs/fr/guides/view-transitions.mdx b/src/content/docs/fr/guides/view-transitions.mdx index 8aaee9d32214b..ef770f87dcf0a 100644 --- a/src/content/docs/fr/guides/view-transitions.mdx +++ b/src/content/docs/fr/guides/view-transitions.mdx @@ -659,101 +659,4 @@ Nous vous recommandons vivement de toujours inclure un `<title>` dans chaque pag ### `prefers-reduced-motion` -Le composant `<ViewTransitions />` d'Astro inclut une requête média CSS qui désactive *toutes* les animations de transition de vue, y compris l'animation de repli, lorsque le paramètre [`prefer-reduced-motion`](https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion) est détecté. À la place, le navigateur échangera simplement les éléments DOM sans animation. - -## Mise à jour de la v2.x vers la v3.0 - -Les Transitions de Vues ne sont plus derrière un paramètre expérimental dans Astro v3.0. - -Si vous n'aviez pas activé ce paramètre expérimental dans Astro 2.x, il n'y aura pas de changement majeur dans votre projet. La nouvelle API de Transitions de Vues n'a aucun effet sur votre code existant. - -Si vous utilisiez auparavant des Transitions de Vue expérimentales, il se peut que vous ayez à effectuer des changements lors de la mise à jour de votre projet Astro à partir d'une version antérieure. - -Veuillez suivre les instructions ci-dessous pour mettre à jour **un projet Astro v2.x configuré avec `experimental.viewTransitions : true`** vers la v3.0. - -### Mise à jour de `experimental.viewTransitions` - -Si vous aviez précédemment activé le paramètre expérimental pour les Transitions de Vue, vous devriez mettre à jour votre projet pour la version 3.0 d'Astro qui autorise désormais les Transitions de Vue par défaut. - -#### Supprimer le paramètre `experimental.viewTransitions`. - -Supprimer le paramètre expérimental : - -```js title="astro.config.mjs" del={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - viewTransitions: true - } -}); -``` - -#### Mise à jour de la source d'importation - -Le composant `<ViewTransitions />` a été déplacé de `astro:components` vers `astro:transitions`. Mettez à jour la source d'importation pour toutes les occurrences dans votre projet. - -```astro title="src/layouts/BaseLayout.astro" del="astro:components" ins="astro:transitions" ---- -import { ViewTransitions } from "astro:components astro:transitions" ---- -<html lang="fr"> - <head> - <title>Ma page d'accueil - - - -

    Bienvenue sur mon site web !

    - - -``` - -#### Mise à jour des directives `transition:animate`. - -**Modifié :** La valeur `transition:animate` `morph` a été renommée en `initial`. De plus, ce n'est plus l'animation par défaut. Si aucune directive `transition:animate` n'est spécifiée, vos animations seront maintenant par défaut `fade`. - -1. Renommer toutes les animations `morph` en `initial`. - ```astro title="src/components/MyComponent.astro" del="morph" ins="initial" -
    - ``` -2. Pour conserver toutes les animations qui utilisaient précédemment `morph` par défaut, ajoutez explicitement `transition:animate="initial"` - - ```astro title="src/components/MyComponent.astro" ins='transition:animate="initial"' -
    - ``` -3. Vous pouvez en toute sécurité supprimer toutes les animations explicitement réglées sur `fade`. C'est maintenant le comportement par défaut : - - ```astro title="src/components/MyComponent.astro" del="transition:animate=\"fade\"" -
    - ``` - -**Ajouté :** Astro supporte également une nouvelle valeur de `transition:animate`, `none`. Cette valeur peut être utilisée sur l'élément `` d'une page pour désactiver les transitions pleine page animées sur une page entière. Cela ne remplacera que le comportement d'animation par **défaut** sur les éléments de la page sans directive d'animation. Vous pouvez toujours définir des animations sur des éléments individuels, et ces animations spécifiques se produiront. - -4. Vous pouvez désormais désactiver toutes les transitions par défaut sur une page individuelle, en animant uniquement les éléments qui utilisent explicitement une directive `transition:animate` : - - ```astro ins="transition:animate=\"none\"" - - - -

    Bonjour le monde !

    - - - ``` - -#### Mise à jour des noms d'événements - -L'événement `astro:load` a été renommé en `astro:page-load`. Renommez toutes les occurrences dans votre projet. - -```astro title="src/components/MyComponent.astro" del="astro:load" ins="astro:page-load" - -``` - -L'événement `astro:beforeload` a été renommé en `astro:after-swap`. Renommez toutes les occurrences dans votre projet. - -```astro title="src/components/MyComponent.astro" del="astro:beforeload" ins="astro:after-swap" - -``` +Le composant `` d'Astro inclut une requête média CSS qui désactive *toutes* les animations de transition de vue, y compris l'animation de secours, lorsque le paramètre [`prefer-reduced-motion`](https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion) est détecté. À la place, le navigateur échangera simplement les éléments DOM sans animation. diff --git a/src/content/docs/fr/tutorial/6-islands/3.mdx b/src/content/docs/fr/tutorial/6-islands/3.mdx index d6efabc472e94..51b159d2c7238 100644 --- a/src/content/docs/fr/tutorial/6-islands/3.mdx +++ b/src/content/docs/fr/tutorial/6-islands/3.mdx @@ -8,13 +8,13 @@ description: >- avec Astro ! i18nReady: true --- - import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; import CompletionConfetti from '~/components/tutorial/CompletionConfetti.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; import Button from '~/components/Button.astro'; +import { CardGrid, LinkCard } from '@astrojs/starlight/components'; Il reste une dernière modification à apporter... @@ -57,21 +57,40 @@ Bienvenue dans l'univers, astronaute. 👩🏼‍🚀👨🏿‍🚀🧑‍🚀 -## Étapes suivantes - -Poursuivez avec notre [guide pour migrer ce projet vers des collections de contenu](/fr/guides/content-collections/#migration-basé-sur-le-routage-des-fichiers) - -[Commencez un nouveau projet Astro](/fr/getting-started/) - -[Rejoignez-nous sur Discord](https://astro.build/chat) - -## Partage ton succès +## Partagez votre réussite ! Félicitations pour avoir complété le tutoriel sur le blog Astro ! Partage ton succès avec le monde et fait savoir à tout le monde que tu es un astronaute maintenant !
    - - + +
    + +## Étapes suivantes + +Poursuivez avec notre [guide pour migrer ce projet vers des collections de contenu](/fr/guides/content-collections/#migration-basée-sur-le-routage-des-fichiers) + + + + + + +