i18n(fr): Update a bunch of file from withastro#8167 (STEPS) (withast…

…ro#8260)

* i18n(fr): Update `ecommerce.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `rss.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `add-yaml-support.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `build-custom-img-component.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `build-forms-api.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `build-forms.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `call-endpoints.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `captcha.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `docker.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `dynamically-importing-images.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `external-links.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `i18n.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `modified-time.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `sharing-state.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Update `tailwind-rendered-markdown.mdx` file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Fix Steps indents in external-links.mdx

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Fix indents ?

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* i18n(fr): Fix indents ?

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

* Discard changes to src/content/docs/en/recipes/external-links.mdx

* Update `docker.mdx` to withastro#8226

---------

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>

src/content/docs/fr/guides/ecommerce.mdx

@@ -4,6 +4,7 @@ description: Une introduction à l'ajout d'options d'e-commerce à votre site As
 i18nReady: true
 ---
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
 import ReadMore from '~/components/ReadMore.astro'
 
 Avec Astro, vous pouvez créer plusieurs options d'e-commerce, des liens de paiement aux pages de paiement hébergées, en passant par la création d'une boutique complète à l'aide d'une API de service de paiement.
@@ -22,18 +23,21 @@ La [bibliothèque JavaScript Lemon.js](https://docs.lemonsqueezy.com/help/lemonj
 
 Voici un exemple d'ajout d'un élément Lemon Squeezy "Acheter maintenant" à une page Astro. En cliquant sur ce lien, le visiteur ouvrira une fenêtre de paiement et pourra effectuer un seul achat.
 
+<Steps>
 1. Ajoutez la balise `<script>` suivante à l'en-tête ou au corps de votre page :
 
     ```html title="src/pages/my-product-page.astro"
     <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
     ```
+
 2. Créez une balise d'ancrage sur la page qui renvoie à l'URL de votre produit. Incluez la classe `lemonsqueezy-button` pour ouvrir une fenêtre de paiement lorsqu'on clique dessus.
 
     ```html title="src/pages/my-product-page.astro"
     <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
      Acheter maintenant
     </a>
     ```
+</Steps>
 
 #### Lemon.js
 
@@ -53,6 +57,7 @@ Voici un exemple d'ajout d'un élément Paddle "Acheter maintenant" à une page
 
 Une fois que votre domaine de lien de paiement par défaut (votre propre site web) est approuvé par Paddle, vous pouvez transformer n'importe quel élément de votre page en un déclencheur pour une superposition de paiement à l'aide d'attributs de données HTML.
 
+<Steps>
 1. Ajoutez les deux balises `<script>` suivantes à l'en-tête ou au corps de votre page :
 
     ```html title="src/pages/my-product-page.astro"
@@ -63,11 +68,13 @@ Une fois que votre domaine de lien de paiement par défaut (votre propre site we
      });
     </script>
     ```
+
 2. Transformez n'importe quel élément de votre page en bouton de paiement Paddle en ajoutant la classe `paddle_button` :
 
     ```html title="src/pages/my-product-page.astro"
     <a href="#" class="paddle_button">Acheter maintenant</a>
     ```
+
 3. Ajoutez un attribut `data-items` pour spécifier le Paddle `priceId` et `quantity` de votre produit. Vous pouvez également passer d'autres [attributs de données HTML pris en charge](https://developer.paddle.com/paddlejs/html-data-attributes) pour pré-remplir les données, gérer le succès de la commande, ou donner un style à votre bouton et à la fenêtre de commande :
 
     ```html title="src/pages/my-product-page.astro"
@@ -88,6 +95,7 @@ Une fois que votre domaine de lien de paiement par défaut (votre propre site we
       Acheter maintenant
     </a>
     ```
+</Steps>
 
 #### Paddle.js
 
@@ -116,6 +124,7 @@ Voici un exemple de configuration d'une caisse Snipcart et d'ajout d'éléments
 
 <ReadMore>Pour des instructions complètes, y compris la configuration de votre boutique Snipcart, veuillez consulter [la documentation d'installation de Snipcart](https://docs.snipcart.com/v3/setup/installation).</ReadMore>
 
+<Steps>
 1. Ajoutez le script [comme indiqué dans les instructions d'installation de Snipcart](https://docs.snipcart.com/v3/setup/installation) sur votre page après l'élément `<body>`.
     ```html title="src/pages/my-product-page.astro"
     <body></body>
@@ -169,6 +178,7 @@ Voici un exemple de configuration d'une caisse Snipcart et d'ajout d'éléments
     ```html title="src/pages/my-product-page.astro"
     <button class="snipcart-checkout">Cliquez ici pour payer</button>
     ```
+</Steps>
 
 #### Snipcart JavaScript SDK
 

src/content/docs/fr/guides/rss.mdx

@@ -5,15 +5,16 @@ i18nReady: true
 type: recipe
 ---
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
 import Since from '~/components/Since.astro'
 
-
 Astro prend en charge la génération rapide et automatique de flux RSS pour les blogs et autres sites web de contenu. Les flux RSS permettent aux utilisateurs de s'abonner facilement à votre contenu.
 
 ## Mise en place de `@astrojs/rss`
 
 Le paquet [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packages/astro-rss) fournit des aides pour générer des flux RSS en utilisant [des points de terminaison d'API](/fr/guides/endpoints/#points-de-terminaison-des-fichiers-statiques). . Cela débloque à la fois les constructions statiques _et_ la génération à la demande lors de l'utilisation d'un [adaptateur SSR](/fr/guides/server-side-rendering/).
 
+<Steps>
 1. Installez `@astrojs/rss` en utilisant votre gestionnaire de paquets préféré :
 
     <PackageManagerTabs>
@@ -64,6 +65,7 @@ Le paquet [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packages
       });
     }
     ```
+</Steps>
 
 ## Générer des `items`
 

src/content/docs/fr/recipes/add-yaml-support.mdx

@@ -4,13 +4,14 @@ description: Découvrez comment vous pouvez importer des données YAML en ajouta
 i18nReady: true
 type: recipe
 ---
-
+import { Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
-Astro se construit au dessus de Vite, et supporte à la fois les plugins Vite et Rollup. Cette recette utilise un plugin Rollup pour ajouter la possibilité d'importer un fichier YAML (`.yml`) dans Astro.
+Astro se construit au-dessus de Vite, et supporte à la fois les plugins Vite et Rollup. Cette recette utilise un plugin Rollup pour ajouter la possibilité d'importer un fichier YAML (`.yml`) dans Astro.
 
 ## Recette
 
+<Steps>
 1. Installer `@rollup/plugin-yaml`:
 
     <PackageManagerTabs>
@@ -43,8 +44,7 @@ Astro se construit au dessus de Vite, et supporte à la fois les plugins Vite et
       }
     });
     ```
-
-
+
 3. Enfin, vous pouvez importer des données YAML en utilisant une instruction `import` :
 
     ```js
@@ -62,3 +62,4 @@ Astro se construit au dessus de Vite, et supporte à la fois les plugins Vite et
     ```
     Cela permettra à votre éditeur de fournir des indications de type pour vos données YAML.
     :::
+</Steps>

src/content/docs/fr/recipes/build-custom-img-component.mdx

@@ -4,6 +4,7 @@ description: Apprendre à construire un composant image personnalisé qui suppor
 i18nReady: true
 type: recipe
 ---
+import { Steps } from '@astrojs/starlight/components';
 
 Astro fournit deux composants intégrés que vous pouvez utiliser pour afficher et optimiser vos images.  Le composant `<Picture>` vous permet d'afficher des images réactives et de travailler avec différents formats et tailles. Le composant `<Image>` optimisera vos images et vous permettra de passer dans différents formats et propriétés de qualité.
 
@@ -13,6 +14,7 @@ Dans cette recette, vous utiliserez la fonction [`getImage()`](/fr/guides/images
 
 ## Recette
 
+<Steps>
 1. Créez un nouveau composant Astro et importez la fonction `getImage()`.
 
     ```astro title="src/components/MyCustomImageComponent.astro" 
@@ -126,3 +128,4 @@ Dans cette recette, vous utiliserez la fonction [`getImage()`](/fr/guides/images
     />
 
     ```
+</Steps>

src/content/docs/fr/recipes/build-forms-api.mdx

@@ -4,6 +4,7 @@ description: Apprendre à utiliser JavaScript pour envoyer les soumissions de fo
 i18nReady: true
 type: recipe
 ---
+import { Steps } from '@astrojs/starlight/components';
 import UIFrameworkTabs from "~/components/tabs/UIFrameworkTabs.astro";
 import PackageManagerTabs from "~/components/tabs/PackageManagerTabs.astro"
 
@@ -17,6 +18,7 @@ Cette méthode vous montre comment envoyer les données du formulaire au point d
 
 ## Recette
 
+<Steps>
 1. Créez un point de terminaison API `POST` à `/api/feedback` qui recevra les données du formulaire. Utilisez `request.formData()` pour les traiter. Assurez-vous de valider les valeurs du formulaire avant de les utiliser. 
 
     Cet exemple envoie un objet JSON avec un message au client.
@@ -164,8 +166,7 @@ Cette méthode vous montre comment envoyer les données du formulaire au point d
       </Fragment>
 
     </UIFrameworkTabs>
-
-
+
 3. Créez une fonction qui accepte un événement submit, puis passez-la comme gestionnaire `submit` à votre formulaire. 
 
     Dans la fonction :
@@ -424,6 +425,7 @@ 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
 

src/content/docs/fr/recipes/build-forms.mdx

@@ -4,15 +4,16 @@ description: Apprenez à construire des formulaires HTML et à gérer les soumis
 i18nReady: true
 type: recipe
 ---
+import { Steps } from '@astrojs/starlight/components';
 
 En mode SSR, les pages Astro peuvent à la fois afficher et gérer des formulaires. Dans cette recette, vous utiliserez un formulaire HTML standard pour soumettre des données au serveur. Votre script frontmatter traitera les données sur le serveur, sans envoyer de JavaScript au client.
 
-
 ## Prérequis
 - Un projet avec [SSR](/fr/guides/server-side-rendering/) (`output: 'server'`) activé
 
 ## Recette
 
+<Steps>
 1. Créez ou identifiez une page `.astro` qui contiendra votre formulaire et votre code de manipulation. Par exemple, vous pouvez ajouter une page d'enregistrement :
 
     ```astro title="src/pages/register.astro"
@@ -201,4 +202,4 @@ En mode SSR, les pages Astro peuvent à la fois afficher et gérer des formulair
     </form>
 
     ```
-
+</Steps>

src/content/docs/fr/recipes/call-endpoints.mdx

@@ -4,6 +4,7 @@ description: Apprendre à appeler des points de terminaison à partir du serveur
 i18nReady: true
 type: recipe
 ---
+import { Steps } from '@astrojs/starlight/components';
 
 Les points de terminaison peuvent être utilisés pour servir de nombreux types de données. Cette recette appelle un point de terminaison du serveur à partir du script de composant d'une page pour afficher un message d'accueil, sans nécessiter de demande de récupération supplémentaire.
 
@@ -13,6 +14,7 @@ Les points de terminaison peuvent être utilisés pour servir de nombreux types
 
 ## Recette
 
+<Steps>
 1. Créer un endpoint dans un nouveau fichier `src/pages/api/hello.ts` qui retourne des données :
 
     ```ts title="src/pages/api/hello.ts"
@@ -38,4 +40,5 @@ Les points de terminaison peuvent être utilisés pour servir de nombreux types
     ---
 
     <h1>{data.greeting} world!</h1>
-    ```
+    ```
+</Steps>

src/content/docs/fr/recipes/captcha.mdx

@@ -4,16 +4,19 @@ description: Apprenez à créer une route API et à la récupérer auprès du cl
 i18nReady: true
 type: recipe
 ---
+import { Steps } from '@astrojs/starlight/components';
 
 Les [points de terminaison du serveur](/fr/guides/endpoints/#points-de-terminaison-du-serveur-routes-api) peuvent être utilisés comme points de terminaison de l'API REST pour exécuter des fonctions telles que l'authentification, l'accès à la base de données et les vérifications sans exposer de données sensibles au client.
 
 Dans cette recette, une route API est utilisée pour vérifier Google reCAPTCHA v3 sans exposer le secret aux clients.
 
 ## Prérequis
+
 - Un projet avec [SSR](/fr/guides/server-side-rendering/) (`output: 'server'`) activé
 
 ## Recette
 
+<Steps>
 1. Créez un point de terminaison `POST` qui accepte les données recaptcha, puis les vérifie avec l'API de reCAPTCHA. Ici, vous pouvez définir en toute sécurité des valeurs secrètes ou lire des variables d'environnement.
 
     ```js title="src/pages/recaptcha.js"
@@ -74,3 +77,4 @@ Dans cette recette, une route API est utilisée pour vérifier Google reCAPTCHA
       </body>
     </html>
     ```
+</Steps>

src/content/docs/fr/recipes/docker.mdx

@@ -4,6 +4,7 @@ description: Apprendre à construire votre site Astro en utilisant Docker.
 type: recipe
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 
 [Docker](https://docker.com) est un outil permettant de créer, de déployer et d'exécuter des applications à l'aide de conteneurs.
 
@@ -147,10 +148,10 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 
 FROM base AS prod-deps
-RUN npm install --production
+RUN npm install --omit=dev
 
 FROM base AS build-deps
-RUN npm install --production=false
+RUN npm install
 
 FROM build-deps AS build
 COPY . .
@@ -168,22 +169,24 @@ CMD node ./dist/server/entry.mjs
 
 ## Méthode
 
+<Steps>
 1. Construisez votre conteneur en exécutant la commande suivante dans le répertoire racine de votre projet. Utilisez n'importe quel nom pour `<votre-image-astro-name>` :
 
-```bash
-docker build -t <your-astro-image-name> .
-```
-
-Vous obtiendrez ainsi une image que vous pourrez exécuter localement ou déployer sur la plateforme de votre choix.
+    ```bash
+    docker build -t <your-astro-image-name> .
+    ```
+    
+    Vous obtiendrez ainsi une image que vous pourrez exécuter localement ou déployer sur la plateforme de votre choix.
 
 2. Pour exécuter votre image en tant que conteneur local, utilisez la commande suivante.
 
-Remplacez `<local-port>` par un port ouvert sur votre machine. Remplacez `<container-port>` par le port exposé par votre conteneur Docker (`4321`, `80`, ou `8080` dans les exemples ci-dessus).
-
-```bash
-docker run -p <local-port>:<container-port> <your-astro-image-name>
-```
-
-Vous devriez pouvoir accéder à votre site à `http://localhost:<port local>`.
+    Remplacez `<local-port>` par un port ouvert sur votre machine. Remplacez `<container-port>` par le port exposé par votre conteneur Docker (`4321`, `80`, ou `8080` dans les exemples ci-dessus).
+    
+    ```bash
+    docker run -p <local-port>:<container-port> <your-astro-image-name>
+    ```
+    
+    Vous devriez pouvoir accéder à votre site à `http://localhost:<port local>`.
 
 3. Maintenant que votre site web est construit et empaqueté avec succès dans un conteneur, vous pouvez le déployer vers un fournisseur de cloud. Voir le guide de déploiement [Google Cloud](/fr/guides/deploy/google-cloud/#cloud-run-ssr-et-statique) pour un exemple, et la page [Deployer votre app](https://docs.docker.com/language/nodejs/deploy/) dans la documentation Docker.
+</Steps>

src/content/docs/fr/recipes/dynamically-importing-images.mdx

@@ -4,6 +4,7 @@ description: Apprenez à importer dynamiquement des images en utilisant la fonct
 i18nReady: true
 type: recipe
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 Les [images](/fr/guides/images/) locales doivent être importées dans les fichiers `.astro` afin de les afficher. Il y aura des moments où vous voudrez ou devrez importer dynamiquement les chemins de vos images au lieu d'importer explicitement chaque image individuelle.
@@ -12,6 +13,7 @@ Dans cette recette, vous apprendrez à importer dynamiquement vos images en util
 
 ## Recette
 
+<Steps>
 1. Créez un nouveau dossier `assets` sous le répertoire `src` et ajoutez vos images dans ce nouveau dossier.
 
     <FileTree>
@@ -150,3 +152,4 @@ Dans cette recette, vous apprendrez à importer dynamiquement vos images en util
         age={25}
     />
     ```
+</Steps>