withastro · yanthomasdev · May 7, 2024 · May 7, 2024 · May 7, 2024 · May 7, 2024
diff --git a/src/content/docs/fr/guides/cms/builderio.mdx b/src/content/docs/fr/guides/cms/builderio.mdx
@@ -6,8 +6,9 @@ service: Builder.io
 stub: false
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import { FileTree } from '@astrojs/starlight/components';
+import { Steps } from '@astrojs/starlight/components';
 
 [Builder.io](https://www.builder.io/) est un CMS visuel qui prend en charge l'édition de contenu par glisser-déposer pour la construction de sites Web. 
 
@@ -140,23 +141,27 @@ Dans l'exemple ci-dessus, `<builder-component>` indique à Builder où insérer
 
 #### Définir la nouvelle route comme URL de prévisualisation
 
+<Steps>
 1. Copiez l'URL complète de votre aperçu, y compris le protocole, dans votre presse-papiers (par exemple `https://{votre_hôte}/builder-preview`). 
 
 2. Allez dans l'onglet **Models** de votre espace Builder, sélectionnez le modèle que vous avez créé et collez l'URL de l'étape 1 dans le champ **Preview URL**. Assurez-vous que l'URL est complète et inclut le protocole, par exemple `https://`.
 
 3. Cliquez sur le bouton **Save** en haut à droite.
+</Steps>
 
 :::tip
 Lorsque vous déployez votre site, modifiez l'URL de prévisualisation pour qu'elle corresponde à l'URL de production, par exemple `https://myAwesomeAstroBlog.com/builder-preview`.
 :::
 
 #### Test de la configuration de l'URL de prévisualisation
 
+<Steps>
 1. Assurez-vous que votre site est actif (c'est-à-dire que votre serveur de développement fonctionne) et que la route `/builder-preview` fonctionne.
 
 2. Dans votre espace Builder, sous l'onglet **Content**, cliquez sur **New** pour créer une nouvelle entrée de contenu pour votre modèle `blogpost`.
 
 3. Dans l'éditeur Builder qui vient de s'ouvrir, vous devriez pouvoir voir la page `builder-preview.astro` avec un gros **Add Block** au milieu.
+</Steps>
 
 :::tip[Dépannage]
 
@@ -172,13 +177,19 @@ Pour plus d'informations, lisez [Builder's troubleshooting guide](https://www.bu
 
 ### Création d'un article de blog
 
+<Steps>
 1. Dans l'éditeur visuel de Builder, créez une nouvelle entrée de contenu avec les valeurs suivantes :
     - **title:** 'premier article, woohoo !
     - **slug:** 'premier-article-woohoo'
+
 2. Complétez votre article à l'aide du bouton **Add Block** et ajoutez un champ de texte avec le contenu de l'article.
+
 3. Dans le champ de texte situé au-dessus de l'éditeur, donnez un nom à votre article. C'est ainsi qu'il sera listé dans l'application Builder.
+
 4. Lorsque vous êtes prêt, cliquez sur le bouton **Publish** dans le coin supérieur droit.
+
 5. Créez autant d'articles que vous le souhaitez en vous assurant que toutes les entrées de contenu contiennent un `titre` et un `slug` ainsi que le contenu de l'article.
+</Steps>
 
 ### Affichage d'une liste d'articles de blog
 
@@ -285,8 +296,7 @@ const { slug } = Astro.params;
 const { title } = Astro.props;
 const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL;
 const builderAPIpublicKey = import.meta.env.BUILDER_API_PUBLIC_KEY;
-// L'API de Builder requiert ce champ, mais pour ce cas d'utilisation, 
-// l'URL ne semble pas avoir d'importance - l'API renvoie le même HTML.
+// L'API de Builder requiert ce champ, mais pour ce cas d'utilisation, l'URL ne semble pas avoir d'importance - l'API renvoie le même HTML.
 const encodedUrl = encodeURIComponent("moot");
 const { html: postHTML } = await fetch(
   `https://cdn.builder.io/api/v1/qwik/${builderModel}?${new URLSearchParams({
@@ -329,25 +339,37 @@ Si votre projet utilise le mode statique par défaut d'Astro, vous devrez config
 
 ##### Netlify
 
+<Steps>
 1. Allez dans le tableau de bord de votre site, puis **Site Settings** et cliquez sur **Build & deploy**.
+
 2. Sous l'onglet **Continuous Deployment**, trouvez la section **Build hooks** et cliquez sur **Add build hook**.
+
 3. Donnez un nom à votre webhook et sélectionnez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Save** et copiez l'URL générée.
+</Steps>
 
 ##### Vercel
 
+<Steps>
 1. Allez sur le tableau de bord de votre projet et cliquez sur **Settings**.
+
 2. Sous l'onglet **Git**, trouvez la section **Deploy Hooks**.
+
 3. Donnez un nom à votre webhook et indiquez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Add** et copiez l'URL générée.
+</Steps>
 
 ##### Ajouter un webhook à Builder
 
 :::tip[Ressource officielle]
 Voir [Builder's guide on adding webhooks](https://www.builder.io/c/docs/webhooks) pour plus d'informations.
 :::
 
+<Steps>
 1. Dans votre tableau de bord Builder, allez dans votre modèle **`blogpost`**. Sous **Show More Options**, sélectionnez **Edit Webhooks** en bas.
+
 2. Ajoutez un nouveau webhook en cliquant sur **Webhook**. Collez l'URL générée par votre hébergeur dans le champ **Url**.
+
 3. Cliquez sur **Show Advanced** sous le champ URL et basculez l'option pour sélectionner **Disable Payload**. Lorsque la charge utile est désactivée, Builder envoie une requête POST plus simple à votre hébergeur, ce qui peut s'avérer utile au fur et à mesure de la croissance de votre site. Cliquez sur **Done** pour enregistrer cette sélection.
+</Steps>
 
 Avec ce webhook en place, chaque fois que vous cliquez sur le bouton **Publish** dans l'éditeur de Builder, votre hébergeur reconstruit votre site - et Astro récupère les données nouvellement publiées pour vous. Il ne vous reste plus qu'à vous détendre et à publier votre contenu !
 
@@ -360,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.
+- 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/buttercms.mdx b/src/content/docs/fr/guides/cms/buttercms.mdx
@@ -6,9 +6,9 @@ service: ButterCMS
 stub: false
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
-
 [ButterCMS](https://buttercms.com/) est un CMS headless et un moteur de blog, qui vous permet de publier du contenu structuré, et de l'utiliser dans votre projet.
 
 ## Intégrer avec Astro
@@ -27,6 +27,7 @@ Pour démarrer, vous aurez besoin de ce qui suit :
 
 ### Configuration
 
+<Steps>
 1. Créez un fichier `.env` dans le dossier racine de votre projet, et ajoutez votre jeton d'API en tant que variable d'environnement :
 
      ```ini title=".env"
@@ -63,6 +64,7 @@ Pour démarrer, vous aurez besoin de ce qui suit :
 
      export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);
      ```
+</Steps>
 
 **Cela authentifie le SDK en utilisant votre jeton d'API et l'exporte pour être utilisé dans tout votre projet.**
 

diff --git a/src/content/docs/fr/guides/cms/contentful.mdx b/src/content/docs/fr/guides/cms/contentful.mdx
@@ -6,8 +6,8 @@ service: Contentful
 i18nReady: true
 ---
 import { FileTree } from '@astrojs/starlight/components';
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 
 [Contentful](https://www.contentful.com/) est un CMS headless qui vous permet de gérer du contenu, de l'intégrer à d'autres services et de le publier sur plusieurs plateformes.
@@ -544,22 +544,25 @@ Si votre projet utilise le mode statique par défaut d'Astro, vous devrez config
 ##### Netlify
 
 Pour configurer un webhook dans Netlify :
-
+<Steps>
 1. Allez sur le tableau de bord de votre site et cliquez sur **Build & deploy**.
 
 2. Sous l'onglet **Continuous Deployment**, trouvez la section **Build hooks** et cliquez sur **Add build hook**.
 
 3. Donnez un nom à votre webhook et sélectionnez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Save** et copiez l'URL générée.
+</Steps>
 
 ##### Vercel
 
 Pour configurer un webhook dans Vercel :
 
+<Steps>
 1. Allez sur le tableau de bord de votre projet et cliquez sur **Settings**.
 
 2. Sous l'onglet **Git**, trouvez la section **Deploy Hooks**.
 
 3. Donnez un nom à votre webhook et indiquez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Add** et copiez l'URL générée.
+</Steps>
 
 ##### Ajouter un webhook à Contentful
 

diff --git a/src/content/docs/fr/guides/cms/cosmic.mdx b/src/content/docs/fr/guides/cms/cosmic.mdx
@@ -5,9 +5,10 @@ type: cms
 service: Cosmic
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-import Grid from '~/components/FluidGrid.astro'
-import Card from '~/components/ShowcaseCard.astro'
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Grid from '~/components/FluidGrid.astro';
+import Card from '~/components/ShowcaseCard.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 [Cosmic](https://www.cosmicjs.com/) est un [CMS headless](https://www.cosmicjs.com/headless-cms) qui fournit un tableau de bord d'administration pour gérer le contenu et une API qui peut s'intégrer à une gamme variée d'outils frontend.
 
@@ -17,10 +18,8 @@ import Card from '~/components/ShowcaseCard.astro'
 2. **Un compte Cosmic et un Bucket** - [Créez un compte Cosmic gratuitement](https://app.cosmicjs.com/signup) si vous n'en avez pas. Après avoir créé votre compte, vous serez invité à créer un nouveau projet vide. Il y a aussi un [modèle simple de Blog Astro](https://www.cosmicjs.com/marketplace/templates/simple-astro-blog) disponible (c'est le même modèle que le thème Astro Headless CMS) pour importer automatiquement tout le contenu utilisé dans ce guide.
 3. **Vos clés API Cosmic** - A partir de votre tableau de bord Cosmic, vous devrez localiser à la fois le **Bucket slug** et la **Bucket read key** afin de vous connecter à Cosmic.
 
-
 ## Intégration de Cosmic avec Astro
 
-
 ### Installation des dépendances nécessaires
 
 Ajoutez le [SDK Javascript Cosmic](https://www.npmjs.com/package/@cosmicjs/sdk) pour récupérer les données de votre Cosmic Bucket.
@@ -54,6 +53,7 @@ PUBLIC_COSMIC_READ_KEY=YOUR_READ_KEY
 
 ## Récupérer des données de Cosmic
 
+<Steps>
 1. Créez un nouveau fichier appelé `cosmic.js`. Placez ce fichier dans le dossier `src/lib` de votre projet.
 
 2. Ajoutez le code suivant pour récupérer les données de Cosmic en utilisant le SDK et vos variables d'environnement. 
@@ -111,6 +111,7 @@ PUBLIC_COSMIC_READ_KEY=YOUR_READ_KEY
     ```
 
     [Voir le code source du composant Card](https://github.com/cosmicjs/simple-astro-blog/blob/main/src/components/Card.astro)
+</Steps>
 
 ## Créer un blog avec Astro et Cosmic
 
@@ -230,17 +231,25 @@ Sous "Settings" > "webhooks", ajoutez le point de terminaison URL de Vercel et s
 
 Pour configurer un webhook dans Netlify :
 
+<Steps>
 1. Allez dans le tableau de bord de votre site et cliquez sur **Build & deploy**.
+
 2. Sous l'onglet **Continuous Deployment**, trouvez la section **Build hooks** et cliquez sur **Add build hook**.
+
 3. Donnez un nom à votre webhook et sélectionnez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Save** et copiez l'URL générée.
+</Steps>
 
 #### Vercel
 
 Pour configurer un webhook dans Vercel :
 
+<Steps>
 1. Allez sur le tableau de bord de votre projet et cliquez sur **Settings**.
+
 2. Sous l'onglet **Git**, trouvez la section **Deploy Hooks**.
+
 3. Donnez un nom à votre webhook et indiquez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Add** et copiez l'URL générée.
+</Steps>
 
 ## Thèmes
 

diff --git a/src/content/docs/fr/guides/cms/datocms.mdx b/src/content/docs/fr/guides/cms/datocms.mdx
@@ -6,6 +6,7 @@ stub: false
 service: DatoCMS
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 [DatoCMS](https://datocms.com/) est un système de gestion de contenu (CMS) Headless, basé sur le web, qui permet de gérer le contenu numérique de vos sites et applications.
@@ -38,7 +39,6 @@ interface ImportMetaEnv {
 }
 ```
 
-
 Votre répertoire racine doit maintenant contenir ces fichiers :
 
 <FileTree title="Project Structure">
@@ -85,7 +85,6 @@ const data = json.data.home;
 ---
 
 <h1>{data.title}</h1>
-
 ```
 
 Cette requête GraphQL va chercher le champ `title` dans la page `Accueil` de votre projet DatoCMS. Lorsque vous rafraîchissez votre navigateur, vous devriez voir le titre sur votre page.
@@ -169,10 +168,8 @@ const data = json.data.home;
     }
   })
 }
-
 ```
 
-
 ## Publier votre site
 
 Pour déployer votre site web, visitez nos [guides de déploiement](/fr/guides/deploy/) et suivez les instructions de votre hébergeur préféré.
@@ -185,17 +182,25 @@ Si votre projet utilise le mode statique par défaut d'Astro, vous devrez config
 
 Pour configurer un webhook dans Netlify :
 
+<Steps>
 1. Allez dans le tableau de bord de votre site et cliquez sur **Build & deploy**.
+
 2. Sous l'onglet **Continuous Deployment**, trouvez la section **Build hooks** et cliquez sur **Add build hook**.
+
 3. Donnez un nom à votre webhook et sélectionnez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Save** et copiez l'URL générée.
+</Steps>
 
 ### Vercel
 
 Pour configurer un webhook dans Vercel :
 
+<Steps>
 1. Allez sur le tableau de bord de votre projet et cliquez sur **Settings**.
+
 2. Sous l'onglet **Git**, trouvez la section **Deploy Hooks**.
+
 3. Donnez un nom à votre webhook et indiquez la branche sur laquelle vous souhaitez déclencher la construction. Cliquez sur **Add** et copiez l'URL générée.
+</Steps>
 
 ### Ajouter un webhook à DatoCMS