From d3b556f7ee04d8ca0dfaf69701fc4e29034a4472 Mon Sep 17 00:00:00 2001 From: Thomas Bonnet Date: Tue, 14 May 2024 22:40:55 +0200 Subject: [PATCH] i18n(fr): Update a bunch of file from #8167 (STEPS) (#8260) * i18n(fr): Update `ecommerce.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `rss.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `add-yaml-support.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `build-custom-img-component.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `build-forms-api.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `build-forms.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `call-endpoints.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `captcha.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `docker.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `dynamically-importing-images.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `external-links.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `i18n.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `modified-time.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `sharing-state.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Update `tailwind-rendered-markdown.mdx` file from #8167 (STEPS) Signed-off-by: Thomas Bonnet * i18n(fr): Fix Steps indents in external-links.mdx Signed-off-by: Thomas Bonnet * i18n(fr): Fix indents ? Signed-off-by: Thomas Bonnet * i18n(fr): Fix indents ? Signed-off-by: Thomas Bonnet * Discard changes to src/content/docs/en/recipes/external-links.mdx * Update `docker.mdx` to #8226 --------- Signed-off-by: Thomas Bonnet Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> --- src/content/docs/fr/guides/ecommerce.mdx | 10 ++ src/content/docs/fr/guides/rss.mdx | 4 +- .../docs/fr/recipes/add-yaml-support.mdx | 9 +- .../fr/recipes/build-custom-img-component.mdx | 3 + .../docs/fr/recipes/build-forms-api.mdx | 6 +- src/content/docs/fr/recipes/build-forms.mdx | 5 +- .../docs/fr/recipes/call-endpoints.mdx | 5 +- src/content/docs/fr/recipes/captcha.mdx | 4 + src/content/docs/fr/recipes/docker.mdx | 31 ++-- .../recipes/dynamically-importing-images.mdx | 3 + .../docs/fr/recipes/external-links.mdx | 52 +++--- src/content/docs/fr/recipes/i18n.mdx | 166 ++++++++++-------- src/content/docs/fr/recipes/modified-time.mdx | 4 +- src/content/docs/fr/recipes/sharing-state.mdx | 116 ++++++------ .../fr/recipes/tailwind-rendered-markdown.mdx | 4 +- 15 files changed, 238 insertions(+), 184 deletions(-) diff --git a/src/content/docs/fr/guides/ecommerce.mdx b/src/content/docs/fr/guides/ecommerce.mdx index 9b8d7d9eab1ae..17a1d6b5815e7 100644 --- a/src/content/docs/fr/guides/ecommerce.mdx +++ b/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,11 +23,13 @@ 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. + 1. Ajoutez la balise ` ``` + 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" @@ -34,6 +37,7 @@ Voici un exemple d'ajout d'un élément Lemon Squeezy "Acheter maintenant" à un Acheter maintenant ``` + #### 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. + 1. Ajoutez les deux balises ` ``` + 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" Acheter maintenant ``` + 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 ``` + #### Paddle.js @@ -116,6 +124,7 @@ Voici un exemple de configuration d'une caisse Snipcart et d'ajout d'éléments 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). + 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 ``. ```html title="src/pages/my-product-page.astro" @@ -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" ``` + #### Snipcart JavaScript SDK diff --git a/src/content/docs/fr/guides/rss.mdx b/src/content/docs/fr/guides/rss.mdx index 5c9c91a2c5587..88560e9a559f1 100644 --- a/src/content/docs/fr/guides/rss.mdx +++ b/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/). + 1. Installez `@astrojs/rss` en utilisant votre gestionnaire de paquets préféré : @@ -64,6 +65,7 @@ Le paquet [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packages }); } ``` + ## Générer des `items` diff --git a/src/content/docs/fr/recipes/add-yaml-support.mdx b/src/content/docs/fr/recipes/add-yaml-support.mdx index 3d12b2d230502..4697528ccaacd 100644 --- a/src/content/docs/fr/recipes/add-yaml-support.mdx +++ b/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 + 1. Installer `@rollup/plugin-yaml`: @@ -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. ::: + diff --git a/src/content/docs/fr/recipes/build-custom-img-component.mdx b/src/content/docs/fr/recipes/build-custom-img-component.mdx index 002e9ab680575..45e0082a836b2 100644 --- a/src/content/docs/fr/recipes/build-custom-img-component.mdx +++ b/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 `` vous permet d'afficher des images réactives et de travailler avec différents formats et tailles. Le composant `` 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 + 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 /> ``` + diff --git a/src/content/docs/fr/recipes/build-forms-api.mdx b/src/content/docs/fr/recipes/build-forms-api.mdx index 2abe8ada6873c..cf658900bdbce 100644 --- a/src/content/docs/fr/recipes/build-forms-api.mdx +++ b/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 + 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 - - + 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 ``` + {/* ## Extension: Utilisez Zod pour valider votre formulaire diff --git a/src/content/docs/fr/recipes/build-forms.mdx b/src/content/docs/fr/recipes/build-forms.mdx index c877c383f4693..cf7e65a19a22d 100644 --- a/src/content/docs/fr/recipes/build-forms.mdx +++ b/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 + 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 ``` - + diff --git a/src/content/docs/fr/recipes/call-endpoints.mdx b/src/content/docs/fr/recipes/call-endpoints.mdx index b30153fd87360..a710aae05500d 100644 --- a/src/content/docs/fr/recipes/call-endpoints.mdx +++ b/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 + 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 ---

{data.greeting} world!

- ``` \ No newline at end of file + ``` + diff --git a/src/content/docs/fr/recipes/captcha.mdx b/src/content/docs/fr/recipes/captcha.mdx index 54621cef49ec2..7c2e7a512c43a 100644 --- a/src/content/docs/fr/recipes/captcha.mdx +++ b/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 + 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 ``` + diff --git a/src/content/docs/fr/recipes/docker.mdx b/src/content/docs/fr/recipes/docker.mdx index 36f388b1bf50d..09a9643fb125f 100644 --- a/src/content/docs/fr/recipes/docker.mdx +++ b/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 + 1. Construisez votre conteneur en exécutant la commande suivante dans le répertoire racine de votre projet. Utilisez n'importe quel nom pour `` : -```bash -docker build -t . -``` - -Vous obtiendrez ainsi une image que vous pourrez exécuter localement ou déployer sur la plateforme de votre choix. + ```bash + docker build -t . + ``` + + 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 `` par un port ouvert sur votre machine. Remplacez `` par le port exposé par votre conteneur Docker (`4321`, `80`, ou `8080` dans les exemples ci-dessus). - -```bash -docker run -p : -``` - -Vous devriez pouvoir accéder à votre site à `http://localhost:`. + Remplacez `` par un port ouvert sur votre machine. Remplacez `` par le port exposé par votre conteneur Docker (`4321`, `80`, ou `8080` dans les exemples ci-dessus). + + ```bash + docker run -p : + ``` + + Vous devriez pouvoir accéder à votre site à `http://localhost:`. 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. + diff --git a/src/content/docs/fr/recipes/dynamically-importing-images.mdx b/src/content/docs/fr/recipes/dynamically-importing-images.mdx index bb70fa701710a..0bbdc2c0abb3e 100644 --- a/src/content/docs/fr/recipes/dynamically-importing-images.mdx +++ b/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 + 1. Créez un nouveau dossier `assets` sous le répertoire `src` et ajoutez vos images dans ce nouveau dossier. @@ -150,3 +152,4 @@ Dans cette recette, vous apprendrez à importer dynamiquement vos images en util age={25} /> ``` + diff --git a/src/content/docs/fr/recipes/external-links.mdx b/src/content/docs/fr/recipes/external-links.mdx index 596577f64f9c3..690179361f1c8 100644 --- a/src/content/docs/fr/recipes/external-links.mdx +++ b/src/content/docs/fr/recipes/external-links.mdx @@ -4,16 +4,18 @@ description: Apprendre à installer un plugin rehype pour ajouter des icônes au i18nReady: true type: recipe --- - +import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' Le plugin rehype vous permet d'identifier et de modifier les liens dans vos fichiers Markdown qui pointent vers des sites externes. Cet exemple ajoute des icônes à la fin de chaque lien externe, afin que les visiteurs sachent qu'ils quittent votre site. ## Prérequis + - Un projet Astro utilisant Markdown pour les pages de contenu. ## Méthode + 1. Installer le plugin `rehype-external-links`. @@ -36,30 +38,32 @@ Le plugin rehype vous permet d'identifier et de modifier les liens dans vos fich 2. Importez le plugin dans votre fichier `astro.config.mjs`. - Passez `rehypeExternalLinks` au tableau `rehypePlugins`, avec un objet options qui inclut une propriété content. Définissez le `type` de cette propriété à `text` si vous souhaitez ajouter du texte brut à la fin du lien. Pour ajouter du HTML à la fin du lien, mettez la propriété `type` à `raw`. - - ```ts - // ... - import rehypeExternalLinks from 'rehype-external-links'; - - export default defineConfig({ + Passez `rehypeExternalLinks` au tableau `rehypePlugins`, avec un objet options qui inclut une propriété content. Définissez le `type` de cette propriété à `text` si vous souhaitez ajouter du texte brut à la fin du lien. Pour ajouter du HTML à la fin du lien, mettez la propriété `type` à `raw`. + + ```ts // ... - markdown: { - rehypePlugins: [ - [ - rehypeExternalLinks, - { - content: { type: 'text', value: ' 🔗' } - } - ], - ] - }, - }); - ``` + import rehypeExternalLinks from 'rehype-external-links'; + + export default defineConfig({ + // ... + markdown: { + rehypePlugins: [ + [ + rehypeExternalLinks, + { + content: { type: 'text', value: ' 🔗' } + } + ], + ] + }, + }); + ``` + + :::note + La valeur de la propriété `content` est [non représentée dans l'arbre d'accessibilité](https://developer.mozilla.org/fr-FR/docs/Web/CSS/content#accessibilité). Il est donc préférable d'indiquer clairement que le lien est externe dans le contenu qui l'entoure, plutôt que de se fier uniquement à l'icône. + ::: + -:::note - La valeur de la propriété `content` est [non représentée dans l'arbre d'accessibilité](https://developer.mozilla.org/fr-FR/docs/Web/CSS/content#accessibilité). Il est donc préférable d'indiquer clairement que le lien est externe dans le contenu qui l'entoure, plutôt que de se fier uniquement à l'icône. -::: ## Resources -- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links) \ No newline at end of file +- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links) diff --git a/src/content/docs/fr/recipes/i18n.mdx b/src/content/docs/fr/recipes/i18n.mdx index 527f914ef83ea..e4fcb015a801d 100644 --- a/src/content/docs/fr/recipes/i18n.mdx +++ b/src/content/docs/fr/recipes/i18n.mdx @@ -6,6 +6,7 @@ i18nReady: true --- import { FileTree } from '@astrojs/starlight/components'; import ReadMore from '~/components/ReadMore.astro' +import { Steps } from '@astrojs/starlight/components'; import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro' Dans cette recette, vous apprendrez à utiliser les collections de contenus et le routage dynamique pour construire votre propre solution d'internationalisation (i18n) et servir votre contenu dans différentes langues. @@ -21,6 +22,7 @@ Si vous préférez que la langue par défaut ne soit pas visible dans l'URL cont ### Créer des pages pour chaque langue + 1. Créez un répertoire pour chaque langue que vous voulez supporter. Par exemple, `en/` et `fr/` si vous supportez l'anglais et le français : @@ -35,7 +37,6 @@ Si vous préférez que la langue par défaut ne soit pas visible dans l'URL cont - index.astro - 2. Configurez `src/pages/index.Astro` pour rediriger vers votre langue par défaut. @@ -61,9 +62,11 @@ Si vous préférez que la langue par défaut ne soit pas visible dans l'URL cont ``` + ### Utiliser des collections pour le contenu traduit + 1. Créez un dossier dans `src/content/` pour chaque type de contenu que vous voulez inclure et ajoutez des sous-répertoires pour chaque langue supportée. Par exemple, pour prendre en charge les articles de blog en anglais et en français : @@ -98,78 +101,80 @@ Si vous préférez que la langue par défaut ne soit pas visible dans l'URL cont ``` -En savoir plus sur [Collections de contenus](/fr/guides/content-collections/). + En savoir plus sur [Collections de contenus](/fr/guides/content-collections/). 3. Utilisez [dynamic routes](/fr/guides/routing/#routes-dynamiques) pour récupérer et rendre le contenu en fonction d'un paramètre `lang` et d'un paramètre `slug`. - - - En mode de rendu statique, utilisez `getStaticPaths` pour faire correspondre chaque entrée de contenu à une page : - - ```astro - //src/pages/[lang]/blog/[...slug].astro - --- - import { getCollection } from 'astro:content'; - - export async function getStaticPaths() { - const pages = await getCollection('blog'); - - const paths = pages.map(page => { - const [lang, ...slug] = page.slug.split('/'); - return { params: { lang, slug: slug.join('/') || undefined }, props: page }; - }); - - return paths; - } - - const { lang, slug } = Astro.params; - const page = Astro.props; - const formattedDate = page.data.date.toLocaleString(lang); - - const { Content } = await page.render(); - --- -

{page.data.title}

-

by {page.data.author} • {formattedDate}

- - ``` - - - - En [mode SSR](/fr/guides/server-side-rendering/), recherchez directement l'entrée demandée : - - ```astro - //src/pages/[lang]/blog/[...slug].astro - --- - import { getEntry } from 'astro:content'; - - const { lang, slug } = Astro.params; - const page = await getEntry('blog', `${lang}/${slug}`); - - if (!page) { - return Astro.redirect('/404'); - } - - const formattedDate = page.data.date.toLocaleString(lang); - const { Content, headings } = await page.render(); - --- -

{page.data.title}

-

by {page.data.author} • {formattedDate}

- - ``` - + + + En mode de rendu statique, utilisez `getStaticPaths` pour faire correspondre chaque entrée de contenu à une page : + + ```astro + //src/pages/[lang]/blog/[...slug].astro + --- + import { getCollection } from 'astro:content'; + + export async function getStaticPaths() { + const pages = await getCollection('blog'); + + const paths = pages.map(page => { + const [lang, ...slug] = page.slug.split('/'); + return { params: { lang, slug: slug.join('/') || undefined }, props: page }; + }); + + return paths; + } + + const { lang, slug } = Astro.params; + const page = Astro.props; + const formattedDate = page.data.date.toLocaleString(lang); + + const { Content } = await page.render(); + --- +

{page.data.title}

+

by {page.data.author} • {formattedDate}

+ + ``` + + + + En [mode SSR](/fr/guides/server-side-rendering/), recherchez directement l'entrée demandée : + + ```astro + //src/pages/[lang]/blog/[...slug].astro + --- + import { getEntry } from 'astro:content'; + + const { lang, slug } = Astro.params; + const page = await getEntry('blog', `${lang}/${slug}`); + + if (!page) { + return Astro.redirect('/404'); + } + + const formattedDate = page.data.date.toLocaleString(lang); + const { Content, headings } = await page.render(); + --- +

{page.data.title}

+

by {page.data.author} • {formattedDate}

+ + ``` + -En savoir plus sur les [routes dynamiques](/fr/guides/routing/#routes-dynamiques). - -:::tip[Mise en forme de la date] -L'exemple ci-dessus utilise la méthode intégrée de mise en forme de la date [`toLocaleString()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) pour créer une chaîne lisible par un humain à partir de la date de la page d'accueil. -Cela permet de s'assurer que la date et l'heure sont formatées pour correspondre à la langue de l'utilisateur. -::: + En savoir plus sur les [routes dynamiques](/fr/guides/routing/#routes-dynamiques). + + :::tip[Mise en forme de la date] + L'exemple ci-dessus utilise la méthode intégrée de mise en forme de la date [`toLocaleString()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) pour créer une chaîne lisible par un humain à partir de la date de la page d'accueil. + Cela permet de s'assurer que la date et l'heure sont formatées pour correspondre à la langue de l'utilisateur. + ::: + ### Traduire les chaînes de l'UI Créez des dictionnaires de vocabulaire pour traduire les appellations des éléments de l'interface utilisateur de votre site. Cela permet à vos visiteurs de découvrir votre site dans leur langue. + 1. Créez un fichier `src/i18n/ui.ts` pour stocker vos chaînes de traduction : ```ts @@ -281,11 +286,13 @@ Créez des dictionnaires de vocabulaire pour traduire les appellations des élé ... ``` + ### Permettre aux utilisateurs de passer d'une langue à l'autre Créez des liens vers les différentes langues que vous prenez en charge afin que les utilisateurs puissent choisir la langue dans laquelle ils souhaitent lire votre site. + 1. Créez un composant pour afficher un lien pour chaque langue : ```astro @@ -327,9 +334,11 @@ Créez des liens vers les différentes langues que vous prenez en charge afin qu ``` + ### Masquer la langue par défaut dans l'URL + 1. Créez un répertoire pour chaque langue à l'exception de la langue par défaut. Par exemple, stockez vos pages dans la langue par défaut directement dans `pages/`, et vos pages traduites dans `fr/` : @@ -344,23 +353,23 @@ Créez des liens vers les différentes langues que vous prenez en charge afin qu 2. Ajoutez une autre ligne au fichier `src/i18n/ui.ts` pour basculer la fonctionnalité : - ```ts - // src/i18n/ui.ts - export const showDefaultLang = false; - ``` + ```ts + // src/i18n/ui.ts + export const showDefaultLang = false; + ``` 3. Ajouter une fonction d'aide à `src/i18n/utils.ts`, pour traduire les chemins en fonction de la langue courante : - - ```js - // src/i18n/utils.ts - import { ui, defaultLang, showDefaultLang } from './ui'; - - export function useTranslatedPath(lang: keyof typeof ui) { - return function translatePath(path: string, l: string = lang) { - return !showDefaultLang && l === defaultLang ? path : `/${l}${path}` + + ```js + // src/i18n/utils.ts + import { ui, defaultLang, showDefaultLang } from './ui'; + + export function useTranslatedPath(lang: keyof typeof ui) { + return function translatePath(path: string, l: string = lang) { + return !showDefaultLang && l === defaultLang ? path : `/${l}${path}` + } } - } - ``` + ``` 4. Importez l'aide là où c'est nécessaire. Par exemple, un composant `nav` peut ressembler à ceci : @@ -407,11 +416,13 @@ Créez des liens vers les différentes langues que vous prenez en charge afin qu ))} ``` + ### Traduire les routes Traduisez les routes de vos pages pour chaque langue. + 1. Ajouter les mappings de routes à `src/i18n/ui.ts` : ```ts @@ -497,6 +508,7 @@ Traduisez les routes de vos pages pour chaque langue. ))} ``` + ## Ressources - [Choisir une étiquette de langue](https://www.w3.org/International/questions/qa-choosing-language-tags) diff --git a/src/content/docs/fr/recipes/modified-time.mdx b/src/content/docs/fr/recipes/modified-time.mdx index ae42562c33215..cc38da738c073 100644 --- a/src/content/docs/fr/recipes/modified-time.mdx +++ b/src/content/docs/fr/recipes/modified-time.mdx @@ -4,13 +4,14 @@ description: Construire un plugin Remark pour ajouter l'heure de la dernière mo i18nReady: true type: recipe --- - +import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' Apprenez à construire un [plugin remark](https://github.com/remarkjs/remark) qui ajoute l'heure de la dernière modification au Front Matter de vos fichiers Markdown et MDX. Utilisez cette propriété pour afficher l'heure de modification dans vos pages. ## Recette + 1. Installer les paquets d'aide Installez [`Day.js`](https://www.npmjs.com/package/dayjs) pour modifier et formater les heures : @@ -142,3 +143,4 @@ Apprenez à construire un [plugin remark](https://github.com/remarkjs/remark) qu ``` + diff --git a/src/content/docs/fr/recipes/sharing-state.mdx b/src/content/docs/fr/recipes/sharing-state.mdx index f16509858d83d..cb9e11fab3bfa 100644 --- a/src/content/docs/fr/recipes/sharing-state.mdx +++ b/src/content/docs/fr/recipes/sharing-state.mdx @@ -3,84 +3,86 @@ title: Partage d'état entre composants Astro description: Apprendre à partager des états entre composants Astro avec Nano Stores. i18nReady: true type: recipe - --- +import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' :::tip -Vous utilisez des composants de Framework? Voir [comment partager l'état entre les îles](/fr/recipes/sharing-state-islands/)! +Vous utilisez des composants de Framework ? Voir [comment partager l'état entre les îles](/fr/recipes/sharing-state-islands/)! ::: Lors de la création d'un site web Astro, il se peut que vous deviez partager l'état des composants. Astro recommande l'utilisation de [Nano Stores](https://github.com/nanostores/nanostores) pour le stockage partagé des clients. ## Méthode + 1. Installer Nano Stores: - - - ```shell - npm install nanostores - ``` - - - ```shell - pnpm add nanostores - ``` - - - ```shell - yarn add nanostores - ``` - - + + + ```shell + npm install nanostores + ``` + + + ```shell + pnpm add nanostores + ``` + + + ```shell + yarn add nanostores + ``` + + 2. Créez un store. Dans cet exemple, le store indique si un dialogue est ouvert ou non : - ```ts title="src/store.js" - import { atom } from 'nanostores'; + ```ts title="src/store.js" + import { atom } from 'nanostores'; - export const isOpen = atom(false); - ``` + export const isOpen = atom(false); + ``` 3. Importez et utilisez le store dans une balise ` - ``` - - ```astro title="src/components/Dialog.astro" -
Hello world!
- - - ``` + + // Ajouter un écouteur d'événement au bouton + document.getElementById('openDialog').addEventListener('click', openDialog); + + ``` + + ```astro title="src/components/Dialog.astro" +
Hello world!
+ + + ``` + ## Resources - [Nano Stores sur NPM](https://www.npmjs.com/package/nanostores) -- [Documentation Nano Stores pour Vanilla JS](https://github.com/nanostores/nanostores#vanilla-js) \ No newline at end of file +- [Documentation Nano Stores pour Vanilla JS](https://github.com/nanostores/nanostores#vanilla-js) diff --git a/src/content/docs/fr/recipes/tailwind-rendered-markdown.mdx b/src/content/docs/fr/recipes/tailwind-rendered-markdown.mdx index b38ed4c6fcc42..3b75e4e653671 100644 --- a/src/content/docs/fr/recipes/tailwind-rendered-markdown.mdx +++ b/src/content/docs/fr/recipes/tailwind-rendered-markdown.mdx @@ -4,7 +4,7 @@ description: Apprenez à utiliser @tailwind/typography pour styliser votre rendu i18nReady: true type: recipe --- - +import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Vous pouvez utiliser le plugin Typography de [Tailwind](https://tailwindcss.com) pour styliser le rendu Markdown à partir de sources telles que les [**collections de contenu**](/fr/guides/content-collections/) d'Astro. @@ -58,6 +58,7 @@ export default { ## Recette + 1. Créez un composant `` pour fournir un élément `
` avec une balise `` pour votre Markdown rendu. Ajoutez la classe de style `prose` ainsi que les [modificateurs d'éléments Tailwind](https://tailwindcss.com/docs/typography-plugin#element-modifiers) dans l'élément parent. ```astro title="src/components/Prose.astro" @@ -100,6 +101,7 @@ export default { ``` + ## Resources