diff --git a/src/content/docs/fr/guides/cms/builderio.mdx b/src/content/docs/fr/guides/cms/builderio.mdx index 6244e60ae03e4..4c38ae0e7f370 100644 --- 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,11 +141,13 @@ Dans l'exemple ci-dessus, `` indique à Builder où insérer #### Définir la nouvelle route comme URL de prévisualisation + 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. + :::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`. @@ -152,11 +155,13 @@ Lorsque vous déployez votre site, modifiez l'URL de prévisualisation pour qu'e #### Test de la configuration de l'URL de prévisualisation + 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. + :::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 + 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. + ### 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,15 +339,23 @@ Si votre projet utilise le mode statique par défaut d'Astro, vous devrez config ##### Netlify + 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. + ##### Vercel + 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. + ##### Ajouter un webhook à Builder @@ -345,9 +363,13 @@ Si votre projet utilise le mode statique par défaut d'Astro, vous devrez config Voir [Builder's guide on adding webhooks](https://www.builder.io/c/docs/webhooks) pour plus d'informations. ::: + 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. + 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. \ No newline at end of file diff --git a/src/content/docs/fr/guides/cms/buttercms.mdx b/src/content/docs/fr/guides/cms/buttercms.mdx index 70b1d443f56fa..b42c0193ec8d1 100644 --- 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 + 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); ``` + **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 index 411e9668cdd0a..8405b37dad334 100644 --- 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 : - + 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. + ##### Vercel Pour configurer un webhook dans Vercel : + 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. + ##### Ajouter un webhook à Contentful diff --git a/src/content/docs/fr/guides/cms/cosmic.mdx b/src/content/docs/fr/guides/cms/cosmic.mdx index 29c468d5da306..60fa48d73ae8c 100644 --- 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 + 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) + ## 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 : + 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. + #### Vercel Pour configurer un webhook dans Vercel : + 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. + ## Thèmes diff --git a/src/content/docs/fr/guides/cms/datocms.mdx b/src/content/docs/fr/guides/cms/datocms.mdx index 4d54b2b0727bd..1b900311a714c 100644 --- 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 : @@ -85,7 +85,6 @@ const data = json.data.home; ---

{data.title}

- ``` 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 : + 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. + ### Vercel Pour configurer un webhook dans Vercel : + 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. + ### Ajouter un webhook à DatoCMS diff --git a/src/content/docs/fr/guides/cms/decap-cms.mdx b/src/content/docs/fr/guides/cms/decap-cms.mdx index cb15ed719017a..0d9133fd33de2 100644 --- a/src/content/docs/fr/guides/cms/decap-cms.mdx +++ b/src/content/docs/fr/guides/cms/decap-cms.mdx @@ -6,10 +6,11 @@ stub: true service: Decap CMS i18nReady: true --- -import Grid from '~/components/FluidGrid.astro' -import Card from '~/components/ShowcaseCard.astro' -import { FileTree } from '@astrojs/starlight/components' -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'; +import { FileTree } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Decap CMS](https://www.decapcms.org/) (anciennement Netlify CMS) est un système de gestion de contenu open-source basé sur Git. @@ -23,7 +24,6 @@ Il existe deux options pour ajouter Decap à Astro : 1. [Installer Decap via un gestionnaire de paquets](https://decapcms.org/docs/install-decap-cms/#installing-with-npm) avec la commande suivante : - ```shell @@ -43,7 +43,7 @@ Il existe deux options pour ajouter Decap à Astro : -2. Importez le paquet dans une balise `