From d67b9628ec7ff572a482b0538326193a501d88a9 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 10 Dec 2024 18:43:22 +0100 Subject: [PATCH 1/6] i18n(fr): update all the `migrate-to` guides Signed-off-by: Armand Philippot --- .../migrate-to-astro/from-create-react-app.mdx | 12 +++++++----- .../guides/migrate-to-astro/from-docusaurus.mdx | 6 ++++-- .../fr/guides/migrate-to-astro/from-eleventy.mdx | 4 +++- .../fr/guides/migrate-to-astro/from-gatsby.mdx | 14 ++++++++------ .../fr/guides/migrate-to-astro/from-gitbook.mdx | 5 +++-- .../fr/guides/migrate-to-astro/from-gridsome.mdx | 10 ++++++---- .../fr/guides/migrate-to-astro/from-hugo.mdx | 4 +++- .../fr/guides/migrate-to-astro/from-jekyll.mdx | 4 +++- .../fr/guides/migrate-to-astro/from-nextjs.mdx | 16 +++++++++------- .../fr/guides/migrate-to-astro/from-nuxtjs.mdx | 10 ++++++---- .../fr/guides/migrate-to-astro/from-pelican.mdx | 4 +++- .../guides/migrate-to-astro/from-sveltekit.mdx | 6 ++++-- .../fr/guides/migrate-to-astro/from-vuepress.mdx | 6 ++++-- .../guides/migrate-to-astro/from-wordpress.mdx | 6 ++++-- .../docs/fr/guides/migrate-to-astro/index.mdx | 4 +++- 15 files changed, 70 insertions(+), 41 deletions(-) diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx index 99aadc42411b4..b9b9bc03bc2e1 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Create React App (CRA) description: Conseils pour migrer un projet Create React App existant vers Astro +sidebar: + label: Create React App type: migration stub: true framework: Create React App @@ -143,7 +145,7 @@ import App from '../cra-project/App.jsx'; :::note[Directives client] Votre application a besoin d'une [directive client](/fr/reference/directives-reference/#directives-client) pour l'interactivité. Astro affichera votre application React en HTML statique jusqu'à ce que vous optiez pour le JavaScript côté client. -Utilisez `client:load` pour vous assurer que votre application se charge immédiatement depuis le serveur, ou `client:only="react"` pour ignorer le rendu côté serveur et exécuter votre application entièrement côté client. +Utilisez `client:load` pour vous assurer que votre application se charge immédiatement depuis le serveur, ou `client:only="react"` pour ignorer le rendu sur le serveur et exécuter votre application entièrement côté client. ::: ## Convertir votre CRA en Astro @@ -272,7 +274,7 @@ Voici quelques conseils pour convertir un composant CRA `.js` en un composant `. 5. Décidez si les composants importés doivent également être convertis en Astro. Vous pouvez les garder en tant que composants React pour le moment, ou pour toujours. Mais vous pouvez éventuellement vouloir les convertir en composants `.astro`, surtout s'ils n'ont pas besoin d'être interactifs ! -6. Remplacez `useEffect()` par des déclarations d'importation ou [`Astro.glob()`](/fr/reference/api-reference/#astroglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. +6. Remplacez `useEffect()` par des déclarations d'importation ou [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. ### Tests de migration @@ -323,7 +325,7 @@ En savoir plus sur [l'utilisation spécifique de `` dans Astro](/fr/basi La récupération de données dans un composant Create React App est similaire à Astro, avec quelques légères différences. -Vous devrez supprimer toutes les instances d'un crochet d'effet secondaire (`useEffect`) pour `Astro.glob()` ou `getCollection()`/`getEntryBySlug()` pour accéder aux données depuis d'autres fichiers dans la source de votre projet. +Vous devrez supprimer toutes les instances d'un crochet d'effet secondaire (`useEffect`) pour `import.meta.glob()` ou `getCollection()`/`getEntryBySlug()` pour accéder aux données depuis d'autres fichiers dans la source de votre projet. Pour [récupérer des données distantes](/fr/guides/data-fetching/), utilisez `fetch()`. @@ -337,7 +339,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Obtention de toutes les entrées `src/pages/posts/` -const allPosts = await Astro.glob('../pages/posts/*.md'); +const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true })); // Récupération des données à distance const response = await fetch('https://randomuser.me/api/'); @@ -346,7 +348,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur [l'importation de fichiers locaux avec `Astro.glob()`](/fr/guides/imports/#astroglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou [la récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/en/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou [la récupération de données distantes](/fr/guides/data-fetching/). ### Le style de CRA à Astro diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx index 7b75674ed41ff..5c8b4516a3b64 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-docusaurus.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Docusaurus description: Conseils pour migrer un projet Docusaurus existant vers Astro +sidebar: + label: Docusaurus type: migration stub: true framework: Docusaurus @@ -31,7 +33,7 @@ Docusaurus et Astro partagent certaines similitudes qui vous aideront à migrer Lorsque vous reconstruisez votre site Docusaurus avec Astro, vous remarquerez quelques différences importantes : -- Docusaurus est une application monopage (SPA) basée sur React. Les sites Astro sont des applications multi-pages construites en utilisant des [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- Docusaurus est une application monopage (SPA) basée sur React. Les sites Astro sont des applications multi-pages construites en utilisant des [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - Docusaurus a été conçu pour construire des sites web de documentation et possède des fonctionnalités intégrées spécifiques aux sites web de documentation que vous devriez construire vous-même dans Astro. Au lieu de cela, Astro propose certaines de ces fonctionnalités via [Starlight : un thème officiel pour la documentation](https://starlight.astro.build). Ce site web a inspiré Starlight et fonctionne désormais avec lui ! Vous pouvez également trouver d'autres [thèmes de documentation communautaires](https://astro.build/themes?search=&categories%5B%5D=docs) avec des fonctionnalités intégrées dans notre vitrine de thèmes. @@ -63,7 +65,7 @@ Vous pouvez passer un argument `--template` à la commande `create astro` pour d L'intégration MDX d'Astro est incluse par défaut, ce qui vous permet de [transférer vos fichiers de contenu existants vers Starlight](https://starlight.astro.build/fr/getting-started/#ajouter-du-contenu) immédiatement. -Vous pouvez trouver la documentation d'Astro, et d'autres modèles officiels, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Vous pouvez trouver la documentation d'Astro, et d'autres modèles officiels, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx index 18c882054e470..889d0b66dfcd6 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-eleventy.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Eleventy description: Conseils pour la migration d'un projet Eleventy existant vers Astro +sidebar: + label: Eleventy type: migration stub: true framework: Eleventy @@ -59,7 +61,7 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option Votre projet Eleventy vous a permis d'utiliser une variété de langages de templates pour construire votre site. Dans un projet Astro, la modélisation de vos pages sera principalement réalisée à l'aide de composants Astro, qui peuvent être utilisés comme éléments d'interface utilisateur, de mise en page et même de pages complètes. Vous pouvez explorer [la syntaxe des composants Astro](/fr/basics/astro-components/) pour voir comment créer des modèles dans Astro en utilisant des composants. -Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx index 5d4ab2e198d45..c30f096c906c6 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Gatsby description: Astuces pour migrer un projet Gatsby existant vers Astro +sidebar: + label: Gatsby type: migration stub: false framework: Gatsby @@ -34,7 +36,7 @@ Lorsque vous reconstruisez votre site Gatsby dans Astro, vous remarquerez quelqu - [Les composants `.astro`](/fr/basics/astro-components/) ne sont pas écrits sous forme de fonctions exportées renvoyant des modèles de page. Au lieu de cela, vous diviserez votre code en une « barrière de code » pour votre JavaScript et en un corps dédié au HTML que vous générez. -- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`Astro.glob()`](/fr/guides/imports/#astroglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. +- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. ## Convertir votre projet Gatsby @@ -78,7 +80,7 @@ Vous pouvez utiliser un argument `--template` avec la commande `create astro` po Ensuite, copiez les fichiers existants de votre projet Gatsby vers votre nouveau projet Astro dans un dossier séparé en dehors de `src`. :::tip -Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans StackBlitz, CodeSandbox ou Gitpod. +Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans IDX, StackBlitz, CodeSandbox ou Gitpod. ::: ### Installer des intégrations (facultatif) @@ -123,7 +125,7 @@ Voici quelques conseils pour convertir un composant Gatsby `.js` en un composant 5. Décidez si les composants importés doivent également être convertis en syntaxe Astro. Avec l'intégration officielle installée, vous pouvez [utiliser les composants React existants dans votre fichier Astro](/fr/guides/framework-components/). Mais vous souhaiterez peut-être les convertir en composants `.astro`, surtout s'ils n'ont pas besoin d'être interactifs ! -6. Supprimez toutes les requêtes GraphQL. Utilisez plutôt les instructions d'importation et [`Astro.glob()`](/fr/reference/api-reference/#astroglob) pour interroger vos fichiers locaux. +6. Supprimez toutes les requêtes GraphQL. Utilisez plutôt les instructions d'importation et [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour interroger vos fichiers locaux. Voir [un exemple de modèle de démarrage de blog Gatsby converti étape par étape](#exemple-guidé-mise-en-page-de-gatsby-à-astro) @@ -222,7 +224,7 @@ Ces [pages `.astro`](/fr/basics/astro-pages/) doivent être situées dans `src/p Astro dispose d'une prise en charge intégrée pour Markdown et d'une intégration facultative pour les fichiers MDX. Vous pouvez réutiliser tous les [fichiers Markdown et MDX existants](/fr/guides/markdown-content/), mais ils peuvent nécessiter quelques ajustements dans leur frontmatter, comme l'ajout de [la propriété spéciale `layout` d'Astro](/fr/basics/layouts/#mises-en-page-markdown). Ces fichiers peuvent également être placés dans `src/pages/` pour profiter du routage automatique basé sur les fichiers. -Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Lorsqu'ils font partie d'une collection, les fichiers Markdown et MDX résideront dans des dossiers dans `src/content/`. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). +Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). ### Migration des tests @@ -351,7 +353,7 @@ Vous pouvez en apprendre davantage sur [l'utilisation d'images dans Astro](/fr/g ### GraphQL : de Gatsby à Astro -Supprimez toutes les références aux requêtes GraphQL et utilisez à la place [`Astro.glob()`](/fr/guides/imports/#astroglob) pour accéder aux données de vos fichiers locaux. +Supprimez toutes les références aux requêtes GraphQL et utilisez à la place [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour accéder aux données de vos fichiers locaux. Ou, si vous utilisez des collections de contenu, interrogez vos fichiers Markdown et MDX dans `src/content/` en utilisant [`getEntry()` et `getCollection()`](/fr/guides/content-collections/#interroger-les-collections). @@ -366,7 +368,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Récupérer toutes les entrées dans `src/pages/posts/` -const allPosts = await Astro.glob('../pages/posts/*.md'); +const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true })); --- export const pageQuery = graphql` diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx index 39c334c56cbdf..01142bc4116c5 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gitbook.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis GitBook description: Conseils pour migrer un projet GitBook existant vers Astro +sidebar: + label: GitBook type: migration stub: true framework: GitBook @@ -23,7 +25,7 @@ GitBook et Astro partagent certaines similitudes qui vous aideront à migrer vot Lorsque vous migrez vos documents GitBook vers Astro, vous remarquerez quelques différences importantes : -- Un site GitBook est édité à l'aide d'un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine, ou choisir un éditeur/environnement de développement en nuage comme StackBlitz, CodeSandbox, ou Gitpod. +- Un site GitBook est édité à l'aide d'un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine, ou choisir un éditeur/environnement de développement en nuage comme IDX, StackBlitz, CodeSandbox, ou Gitpod. - GitBook stocke votre contenu dans une base de données. Dans Astro, vous aurez des fichiers individuels (typiquement Markdown ou MDX) dans votre [répertoire de projet](/fr/basics/project-structure/) pour le contenu de chaque page. Vous pouvez également choisir d'utiliser un [CMS pour votre contenu](/fr/guides/cms/) et utiliser Astro pour récupérer et présenter les données. @@ -73,4 +75,3 @@ Notez que bien que vous ayez maintenant votre contenu migré dans votre projet A ## Ressources de la communauté - Ajoutez le vôtre ! - diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx index 74a6c86cbf1ba..c69bb6373bccf 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gridsome.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Gridsome description: Conseils pour la migration d'un projet Gridsome existant vers Astro +sidebar: + label: Gridsome type: migration stub: true framework: Gridsome @@ -27,11 +29,11 @@ Gridsome et Astro partagent certaines similitudes qui vous aideront à migrer vo Lorsque vous reconstruisez votre site Gridsome dans Astro, vous remarquerez quelques différences importantes : -- Gridsome est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- Gridsome est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - En tant que SPA, Gridsome utilise `vue-router` pour le routage SPA, et `vue-meta` pour gérer ``. Dans Astro, vous créerez des pages HTML séparées et contrôlerez le `` de votre page directement, ou dans un [composant de mise en page](/fr/basics/layouts/). -- [Données de fichiers locaux](/fr/guides/imports/) : Gridsome utilise GraphQL pour récupérer les données de vos fichiers de projet. Astro utilise les importations ESM et l'aide [`Astro.glob()`](/fr/guides/imports/#astroglob) pour importer des données à partir de fichiers de projets locaux. Les ressources distantes peuvent être chargées en utilisant l'API standard `fetch()`. GraphQL peut être optionnellement ajouté à votre projet, mais n'est pas inclus par défaut. +- [Données de fichiers locaux](/fr/guides/imports/) : Gridsome utilise GraphQL pour récupérer les données de vos fichiers de projet. Astro utilise les importations ESM et l'aide [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour importer des données à partir de fichiers de projets locaux. Les ressources distantes peuvent être chargées en utilisant l'API standard `fetch()`. GraphQL peut être optionnellement ajouté à votre projet, mais n'est pas inclus par défaut. ## Passer de Gridsome à Astro @@ -61,9 +63,9 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option La structure de projet de Gridsome étant similaire à celle d'Astro, vous pourrez peut-être copier plusieurs fichiers existants de votre projet au même endroit dans votre nouveau projet Astro. Cependant, les deux structures de projet ne sont pas identiques. Vous pouvez examiner [la structure de projet d'Astro](/fr/basics/project-structure/) pour voir quelles sont les différences. -Comme Astro interroge et importe vos fichiers locaux différemment de Gridsome, vous pouvez lire [comment charger des fichiers en utilisant `Astro.glob()`](/fr/guides/imports/#astroglob) pour comprendre comment travailler avec vos fichiers locaux. +Comme Astro interroge et importe vos fichiers locaux différemment de Gridsome, vous pouvez lire [comment charger des fichiers en utilisant `import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour comprendre comment travailler avec vos fichiers locaux. -Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez d'autres modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez d'autres modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx index 2aaad8d923f82..747c881138089 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-hugo.mdx @@ -1,6 +1,8 @@ --- title: Migrer depuis Hugo description: Conseils pour la migration d'un projet Hugo existant vers Astro +sidebar: + label: Hugo type: migration stub: true framework: Hugo @@ -60,7 +62,7 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option Pour continuer à utiliser du contenu dynamique tel que des variables, des expressions ou des composants d'interface utilisateur dans votre contenu Markdown, ajoutez l'intégration MDX facultative d'Astro et convertissez vos fichiers Markdown existants en [pages MDX](/fr/guides/markdown-content/). MDX prend en charge le frontmatter YAML, vous pouvez donc conserver vos propriétés de frontmatter existantes. Mais vous devez remplacer toute syntaxe de shortcode par [la syntaxe propre à MDX](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax), qui autorise les expressions JSX et/ou les importations de composants. -Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez les modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez les modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx index b2670bf52d068..d2de906822da6 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-jekyll.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Jekyll description: Conseils pour migrer un projet Jekyll existant vers Astro +sidebar: + label: Jekyll type: migration stub: true framework: Jekyll @@ -61,7 +63,7 @@ Une grande partie du contenu de vos pages HTML existantes peut être convertie e Astro n'a pas de propriété `permalink` qui accepte les espaces réservés. Vous pouvez avoir besoin d'en savoir plus sur [le routage des pages d'Astro](/fr/guides/routing/) si vous voulez conserver votre structure d'URL existante. Vous pouvez également envisager de [définir des redirections chez un hébergeur comme Netlify](https://docs.netlify.com/routing/redirects/). -Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, tels qu'un site de portfolio ou de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx index 9a93b83ba536b..e05cf8de22df9 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Next.js description: Astuces pour migrer un projet Next.js existant vers Astro +sidebar: + label: Next.js type: migration stub: false framework: Next.js @@ -76,7 +78,7 @@ Vous pouvez utiliser un argument `--template` avec la commande `create astro` po Ensuite, copiez les fichiers existants de votre projet Next vers votre nouveau projet Astro dans un dossier séparé en dehors de `src`. :::tip -Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans StackBlitz, CodeSandbox ou Gitpod. +Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans IDX, StackBlitz, CodeSandbox ou Gitpod. ::: ### Installer des intégrations (facultatif) @@ -119,7 +121,7 @@ Voici quelques conseils pour convertir un composant Next `.js` en un composant ` 5. Décidez si les composants importés doivent également être convertis en syntaxe Astro. Avec l'intégration officielle installée, vous pouvez [utiliser les composants React existants dans votre fichier Astro](/fr/guides/framework-components/). Mais vous souhaiterez peut-être les convertir en composants `.astro`, surtout s'ils n'ont pas besoin d'être interactifs ! -6. Remplacez `getStaticProps()` avec des déclarations d'importation ou avec [`Astro.glob()`](/fr/reference/api-reference/#astroglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. +6. Remplacez `getStaticProps()` avec des déclarations d'importation ou avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour interroger vos fichiers locaux. Utilisez `fetch()` pour récupérer des données externes. Voir [un exemple d'un fichier`.js` converti étape par étape depuis Next](#exemple-guidé-récupération-des-données-de-next-vers-astro). @@ -304,7 +306,7 @@ export default function Head() { Dans Next.js, vos articles se trouvent soit dans `/pages`, soit dans `/app/routeName/page.jsx`. -Avec Astro, **tous les contenus de vos pages doivent vivre à l'intérieur du dossier `src/`**, soit dans `src/pages`, soit dans `src/content`. +Avec Astro, **tous les contenus de vos pages doivent vivre à l'intérieur du dossier `src/`**, sauf si vous utilisez les [collections de contenu](/fr/guides/content-collections/). #### Pages React @@ -316,7 +318,7 @@ Ces [pages `.astro`](/fr/basics/astro-pages/) doivent être situées dans `src/p Astro dispose d'une prise en charge intégrée pour Markdown et d'une intégration facultative pour les fichiers MDX. Vous pouvez réutiliser tous les [fichiers Markdown et MDX existants](/fr/guides/markdown-content/), mais ils peuvent nécessiter quelques ajustements dans leur frontmatter, comme l'ajout de [la propriété spéciale `layout` d'Astro](/fr/basics/layouts/#mises-en-page-markdown). Vous n'aurez plus besoin de créer manuellement des pages pour chaque itinéraire généré par Markdown. Ces fichiers peuvent être placés dans `src/pages/` pour profiter du routage automatique basé sur les fichiers. -Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Lorsqu'ils font partie d'une collection, les fichiers Markdown et MDX résideront dans des dossiers dans `src/content/`. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). +Alternativement, vous pouvez utiliser les [collections de contenu](/fr/guides/content-collections/) dans Astro pour stocker et gérer votre contenu. Vous récupérerez vous-même le contenu et [générerez ces pages de manière dynamique](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). ### Migration des tests @@ -383,7 +385,7 @@ En savoir plus sur [l'utilisation spécifique de `` dans Astro](/fr/basi ### La récupération des données : de Next vers Astro -Convertissez toutes les instances de `getStaticProps()` en `Astro.glob()` ou `getCollection()`/`getEntryBySlug()` afin d'accéder aux données d'autres fichiers dans la source de votre projet. Pour [récupérer des données distantes](/fr/guides/data-fetching/), utilisez `fetch()`. +Convertissez toutes les instances de `getStaticProps()` en `import.meta.glob()` ou `getCollection()`/`getEntryBySlug()` afin d'accéder aux données d'autres fichiers dans la source de votre projet. Pour [récupérer des données distantes](/fr/guides/data-fetching/), utilisez `fetch()`. Ces demandes de données sont effectuées dans le frontmatter du composant Astro et utilisent une instruction `await` de niveau supérieur (« top-level await »). @@ -395,7 +397,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Get all `src/pages/posts/` entries -const allPosts = await Astro.glob('../pages/posts/*.md'); +const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true })); const response = await fetch('https://randomuser.me/api/'); const data = await response.json(); @@ -403,7 +405,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur les [importations de fichiers locaux avec `Astro.glob()`](/fr/guides/imports/#astroglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou la [récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur les [importations de fichiers locaux avec `import.meta.glob()`](/fr/guides/imports/#importmetaglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou la [récupération de données distantes](/fr/guides/data-fetching/). ### Les styles : de Next vers Astro diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx index 2ac183785c0ee..6589e6f62de8d 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis NuxtJS description: Astuces pour migrer un projet NuxtJS existant vers Astro +sidebar: + label: NuxtJS type: migration stub: false framework: NuxtJS @@ -29,7 +31,7 @@ Nuxt et Astro partagent certaines similitudes qui vous aideront à migrer votre Lorsque vous reconstruisez votre site Nuxt dans Astro, vous remarquerez quelques différences importantes : -- Nuxt est un SPA (application monopage) basé sur Vue. Les sites Astro sont des applications multipages créées à l'aide de composants `.astro`, mais ils peuvent également prendre en charge React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit et des modèles HTML brut. +- Nuxt est un SPA (application monopage) basé sur Vue. Les sites Astro sont des applications multipages créées à l'aide de composants `.astro`, mais ils peuvent également prendre en charge React, Preact, Vue.js, Svelte, SolidJS, AlpineJS et des modèles HTML brut. - [Routage des pages](/fr/basics/astro-pages/#routage-basé-sur-les-fichiers) : Nuxt utilise `vue-router` pour le routage SPA et `vue-meta` pour gérer ``. Dans Astro, vous créerez des routes distinctes pour vos pages HTML et vous contrôlerez le contenu de la balise `` directement dans votre page ou dans un composant de mise en page. @@ -78,7 +80,7 @@ Vous pouvez utiliser un argument `--template` avec la commande `create astro` po Ensuite, copiez les fichiers existants de votre projet Nuxt vers votre nouveau projet Astro dans un dossier séparé en dehors de `src`. :::tip -Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans StackBlitz, CodeSandbox ou Gitpod. +Consultez https://astro.new pour la liste complète des modèles de démarrage officiels et des liens pour ouvrir un nouveau projet dans IDX, StackBlitz, CodeSandbox ou Gitpod. ::: ### Installer des intégrations (facultatif) @@ -224,7 +226,7 @@ Vous souhaiterez peut-être également réutiliser le code de [la propriété `h ### Migrer les pages et les articles -Dans NuxtJS, vos [pages](/fr/basics/astro-pages/) se trouvent dans `/pages`. Dans Astro, **les contenus de vos pages doivent résider dans `src/pages` ou `src/content`**. +Dans NuxtJS, vos [pages](/fr/basics/astro-pages/) se trouvent dans `/pages`. Dans Astro, **les contenus de vos pages doivent résider dans `src/pages` sauf si vous utilisez les [collections de contenu](/fr/guides/content-collections/). #### Pages Vue @@ -261,7 +263,7 @@ Astro dispose d'une prise en charge intégrée pour Markdown et d'une intégrati Vous n'aurez plus besoin de créer manuellement des pages pour chaque route générée par Markdown ni d'utiliser un paquet externe comme `@nuxt/content`. Ces fichiers peuvent être placés dans `src/pages/` pour profiter du routage automatique basé sur les fichiers. -Lorsqu'ils font partie d'une [collection de contenu](/fr/guides/content-collections/), les fichiers Markdown et MDX vivront dans des dossiers à l'intérieur de `src/content/` et vous [générez ces pages dynamiquement](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu). +Lorsqu'elles font partie d'une [collection de contenu](/fr/guides/content-collections/), vous [générez ces pages dynamiquement](/fr/guides/content-collections/#générer-des-routes-à-partir-du-contenu) à partir de vos entrées de contenu. ### Migrer les tests diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx index d21ec90e21dba..a275a415db25b 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-pelican.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis Pelican description: Conseils pour la migration d'un projet Pelican existant vers Astro +sidebar: + label: Pelican type: migration stub: true framework: Pelican @@ -59,7 +61,7 @@ Pelican a peut-être pris en charge une grande partie de la mise en page de votr Comme Pelican, Astro dispose de nombreux plugins qui étendent ses fonctionnalités. Explorez la [liste officielle des intégrations](/fr/guides/integrations-guide/) pour ajouter des fonctionnalités telles que la prise en charge de MDX et trouvez des centaines d'autres intégrations gérées par la communauté dans le [Répertoire des intégrations Astro](https://astro.build/integrations/). Vous pouvez même utiliser l'[API Intégration d'Astro](/fr/reference/integrations-reference/) pour créer votre propre intégration personnalisée afin d'étendre les fonctionnalités de votre projet. -Pour convertir d'autres types de sites, comme un portfolio ou un blog, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un blog, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx index 4b4212b120b90..d0ab3c2d2a8e9 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-sveltekit.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis SvelteKit description: Conseils pour migrer un projet SvelteKit existant vers Astro +sidebar: + label: SvelteKit type: migration stub: true framework: SvelteKit @@ -29,7 +31,7 @@ Lorsque vous reconstruisez votre site SvelteKit dans Astro, vous remarquerez que - Les sites Astro sont des applications multi-pages, alors que SvelteKit utilise par défaut des SPA (applications mono-page) avec un rendu côté serveur, mais peut également créer des MPA, des SPA traditionnelles, ou vous pouvez mélanger ces techniques au sein d'une application. -- [Composants](/fr/basics/astro-components/) : SvelteKit utilise [Svelte](https://svelte.dev). Les pages Astro sont construites en utilisant les [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- [Composants](/fr/basics/astro-components/) : SvelteKit utilise [Svelte](https://svelte.dev). Les pages Astro sont construites en utilisant les [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi supporter [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - [Axé sur le contenu](/fr/concepts/why-astro/#axé-sur-le-contenu) : Astro a été conçu pour mettre en valeur votre contenu et vous permettre d'opter pour l'interactivité uniquement en cas de besoin. Une application SvelteKit existante peut être conçue pour une forte interactivité côté client. Astro a des capacités intégrées pour travailler avec votre contenu, comme la génération de pages, mais peut nécessiter des techniques Astro avancées pour inclure des éléments qui sont plus difficiles à reproduire en utilisant les composants `.astro`, comme les tableaux de bord. @@ -64,7 +66,7 @@ Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration option Bien que les composants de routage et de mise en page basés sur les fichiers soient similaires dans Astro, vous pouvez consulter [la structure de projet d'Astro](/fr/basics/project-structure/) pour savoir où les fichiers doivent être placés. -Pour convertir d'autres types de sites, tels qu'un portfolio ou un site de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, tels qu'un portfolio ou un site de documentation, consultez les modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx index ca5755999cf21..c3c48b5f2590d 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-vuepress.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis VuePress description: Conseils pour migrer un projet VuePress existant vers Astro +sidebar: + label: VuePress type: migration stub: true framework: VuePress @@ -25,7 +27,7 @@ VuePress et Astro partagent certaines similitudes qui vous aideront à migrer vo Lorsque vous reconstruisez votre site VuePress dans Astro, vous remarquerez quelques différences importantes. -- VuePress est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également prendre en charge [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/fr/guides/framework-components/) et le templating HTML brut. +- VuePress est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également prendre en charge [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et le templating HTML brut. - [Modèles de mise en page](/fr/basics/layouts/) : Les sites VuePress sont créés à l'aide de fichiers Markdown (`.md`) pour le contenu des pages et de modèles HTML (`.html`) pour la mise en page. Astro est basé sur des composants et utilise des composants Astro, qui incluent des modèles HTML pour les pages, les mises en page et les éléments individuels de l'interface utilisateur. Astro peut également créer des [pages à partir de fichiers `.md` et `.mdx`](/fr/guides/markdown-content/), en utilisant un composant de mise en page Astro pour envelopper le contenu Markdown dans un modèle de page. @@ -59,7 +61,7 @@ Apportez vos fichiers de contenu Markdown existants à [créer des pages Markdow VuePress, ou tout autre thème que vous avez installé, a probablement géré une grande partie de la mise en page et des métadonnées de votre site pour vous. Vous pouvez lire l'article sur [la construction de Layouts Astro en tant qu'enveloppes de page Markdown](/fr/basics/layouts/#mises-en-page-markdown) pour voir comment gérer vous-même le templating dans Astro, y compris votre page ``. -Vous pouvez trouver la documentation de démarrage d'Astro, ainsi que d'autres modèles, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Vous pouvez trouver la documentation de démarrage d'Astro, ainsi que d'autres modèles, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx index 600bca0ac7ffc..16997a7769e9a 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-wordpress.mdx @@ -1,6 +1,8 @@ --- title: Migration depuis WordPress description: Astuces pour migrer un projet WordPress existant vers Astro. +sidebar: + label: WordPress type: migration stub: true framework: WordPress @@ -27,7 +29,7 @@ WordPress et Astro partagent certaines similitudes qui vous aideront à migrer v Lorsque vous reconstruisez votre site WordPress dans Astro, vous remarquerez quelques différences importantes : -- Un site WordPress est édité en utilisant un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine ou choisir un éditeur/environnement de développement en ligne comme StackBlitz, CodeSandbox ou Gitpod. +- Un site WordPress est édité en utilisant un tableau de bord en ligne. Dans Astro, vous utiliserez un [éditeur de code](/fr/editor-setup/) et un environnement de développement pour maintenir votre site. Vous pouvez développer localement sur votre machine ou choisir un éditeur/environnement de développement en ligne comme IDX, StackBlitz, CodeSandbox ou Gitpod. - WordPress dispose d’un vaste marché de plugins et de thèmes. Dans Astro, vous trouverez quelques thèmes et [intégrations](https://astro.build/integrations/) disponibles, mais vous devrez peut-être désormais créer vous-même bon nombre de vos fonctionnalités existantes au lieu de rechercher des solutions tierces. Vous pouvez également choisir de commencer avec un [thème Astro](https://astro.build/themes) possédant des fonctionnalités intégrées ! @@ -63,7 +65,7 @@ Vous souhaiterez peut-être suivre le [tutoriel Construire un blog](/fr/tutorial Si vous souhaitez déplacer tous vos articles existants vers Astro, vous pourriez trouver cet [outil pour exporter du contenu Markdown depuis WordPress utile](https://github.com/lonekorean/wordpress-export-to-markdown). Vous devrez peut-être apporter quelques ajustements au résultat si vous devez [convertir un site WordPress volumineux ou compliqué vers Markdown](https://swizec.com/blog/how-to-export-a-large-wordpress-site-to-markdown/). -Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, découvrez plus de modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod. +Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, découvrez plus de modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod. ## Ressources communautaires diff --git a/src/content/docs/fr/guides/migrate-to-astro/index.mdx b/src/content/docs/fr/guides/migrate-to-astro/index.mdx index 63ac0f1d67b06..052209129d8f9 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/index.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/index.mdx @@ -1,6 +1,8 @@ --- title: Migrer un projet existant vers Astro description: Quelques trucs et astuces pour convertir votre site vers Astro. +sidebar: + label: Aperçu des migrations de site i18nReady: true --- import MigrationGuidesNav from '~/components/MigrationGuidesNav.astro'; @@ -33,7 +35,7 @@ Selon votre projet déjà existant, vous pourrez peut-être utiliser vos composa [De nombreux sites existants peuvent être construits avec Astro](/fr/concepts/why-astro/). Astro est parfaitement adapté à vos sites existants basés sur le contenu, tels que les blogs, les landing pages, les sites marketing et les portfolios. Astro s'intègre à plusieurs Headless CMS populaires et vous permet de connecter des paniers de boutique eCommerce. -Astro vous permet de choisir entre un site généré statiquement et le [rendu côté serveur (SSR)](/fr/guides/on-demand-rendering/), ce qui en fait un excellent remplacement pour les SSGs ou pour les sites qui ont besoin de récupérer des données de page à la volée. +Astro vous permet d'avoir un site web entièrement généré de manière statique, une application dynamique avec des routes rendues à la demande ou une combinaison des deux avec [un contrôle complet sur le rendu de votre projet](/fr/guides/on-demand-rendering/), ce qui en fait un excellent remplacement pour les SSG ou pour les sites qui doivent récupérer certaines données de page à la volée. ## Comment la conception de mon projet va-t-elle changer ? From 84064ed4c861752ba75588cb00f018d958d4065d Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 9 Dec 2024 19:19:15 +0100 Subject: [PATCH 2/6] i18n(fr): update `guides/imports.mdx` See #9240, #10140, #10310 and #10315 --- src/content/docs/fr/guides/imports.mdx | 133 ++++++++++++++++++++++--- 1 file changed, 117 insertions(+), 16 deletions(-) diff --git a/src/content/docs/fr/guides/imports.mdx b/src/content/docs/fr/guides/imports.mdx index 46e61e594ba06..b6a227b7a4a76 100644 --- a/src/content/docs/fr/guides/imports.mdx +++ b/src/content/docs/fr/guides/imports.mdx @@ -1,6 +1,6 @@ --- -title: Imports -description: Apprendre comment importer différents types de contenu avec Astro. +title: Référence des importations +description: Découvrez comment importer différents types de fichiers dans votre projet Astro. i18nReady: true --- import RecipeLinks from "~/components/RecipeLinks.astro"; @@ -22,11 +22,21 @@ Les types de fichiers suivants sont pris en charge par Astro : - Modules CSS (`.module.css`) - Images et actifs (`.svg`, `.jpg`, `.png`, etc.) -De plus, vous pouvez étendre Astro pour ajouter le support de différents [Frameworks UI](/fr/guides/framework-components/) comme React, Svelte et Vue. Vous pouvez également installer l'[intégration Astro MDX](/fr/guides/integrations-guide/mdx/) et utiliser les fichiers `.mdx` dans votre projet. +De plus, vous pouvez étendre Astro pour ajouter le support de différents [Frameworks UI](/fr/guides/framework-components/) comme React, Svelte et Vue. Vous pouvez également installer l'[intégration Astro MDX](/fr/guides/integrations-guide/mdx/) ou l'[intégration Astro Markdoc](/fr/guides/integrations-guide/markdoc/) pour utiliser les fichiers `.mdx` ou `.mdoc` dans votre projet. ### Les fichiers dans `public/` -Vous pouvez placer n'importe quelle ressource statique dans le répertoire [`public/`](/fr/basics/project-structure/#public) de votre projet, et Astro le copiera directement dans votre version finale sans y toucher. Les fichiers dans le répertoire `public/` ne sont pas construits ou regroupés par Astro, ce qui signifie que n'importe quel type de fichier est supporté. Vous pouvez référencer un fichier `public/` par un chemin d'URL directement dans vos modèles HTML. +Vous pouvez placer n'importe quelle ressource statique dans le répertoire [`public/`](/fr/basics/project-structure/#public) de votre projet, et Astro le copiera directement dans votre version finale sans y toucher. Les fichiers dans le répertoire `public/` ne sont pas construits ou regroupés par Astro, ce qui signifie que n'importe quel type de fichier est supporté. + +Vous pouvez référencer un fichier `public/` par un chemin d'URL directement dans vos modèles HTML. + +```astro +// Pour faire un lien vers /public/reports/annual/2024.pdf +Télécharger la déclaration annuelle 2024 en PDF. + +// Pour afficher /public/assets/cats/ginger.jpg +Un chat orange dort sur un lit. +``` ## Déclarations d'importation @@ -54,7 +64,7 @@ import { getUser } from './user.ts'; import type { UserType } from './user.ts'; ``` -Astro comprend un support intégré pour [TypeScript] (https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` directement dans votre projet Astro, et même écrire du code TypeScript directement dans votre [script de composant Astro](/fr/basics/astro-components/#le-script-du-composant) et n'importe quelle [balise de scripts](/fr/guides/client-side-scripts/). +Astro comprend un support intégré pour [TypeScript] (https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` directement dans votre projet Astro, et même écrire du code TypeScript directement dans votre [script de composant Astro](/fr/basics/astro-components/#le-script-du-composant) et dans n'importe quelle [balise de scripts](/fr/guides/client-side-scripts/). **Astro n'effectue aucune vérification de type lui-même.** La vérification de type doit être prise en charge en dehors d'Astro, soit par votre IDE, soit par un script séparé. Pour vérifier le type des fichiers Astro, la commande [`astro check`](/fr/reference/cli-reference/#astro-check) est fournie. @@ -189,14 +199,15 @@ Ces alias sont également intégrés automatiquement dans [VS Code](https://code ## `Astro.glob()` -[`Astro.glob()`](/fr/reference/api-reference/#astroglob) est un moyen d'importer plusieurs fichiers à la fois. +L'utilitaire [`import.meta.glob()` de Vite](https://vite.dev/guide/features.html#glob-import) est un moyen d'importer plusieurs fichiers à la fois en utilisant des modèles glob pour trouver des chemins de fichiers correspondants. -`Astro.glob()` ne prend qu'un seul paramètre : un [pattern global](/fr/guides/imports/) relatif correspondant aux fichiers locaux que vous souhaitez importer. Il est asynchrone et renvoie un tableau des exportations de chaque fichier correspondant. +`import.meta.glob()` prend un [modèle glob relatif](#patterns-globaux) correspondant aux fichiers locaux que vous souhaitez importer comme paramètre. Il renvoie un tableau des exportations de chaque fichier correspondant. Pour charger tous les modules correspondants à l'avance, passez `{ eager: true }` comme deuxième argument : -```astro title="src/components/my-component.astro" +```astro title="src/components/my-component.astro" {3,4} --- // importe tous les fichiers qui se terminent par `.md` dans `./src/pages/post/` -const posts = await Astro.glob('../pages/post/*.md'); +const matches = import.meta.glob('../pages/post/*.md', { eager: true }); +const posts = Object.values(matches); ---
@@ -204,18 +215,18 @@ const posts = await Astro.glob('../pages/post/*.md'); ))}
``` -Les composants Astro importés avec `Astro.glob` sont de type [`AstroInstance`](/fr/reference/api-reference/#fichiers-astro). Vous pouvez effectuer le rendu de chaque instance de composant en utilisant sa propriété `default` : +Les composants Astro importés avec `import.meta.glob` sont de type [`AstroInstance`](#fichiers-astro). Vous pouvez effectuer le rendu de chaque instance de composant en utilisant sa propriété `default` : ```astro title="src/pages/component-library.astro" {8} --- // importe tous les fichiers qui se terminent par `.astro` dans `./src/components/` -const components = await Astro.glob('../components/*.astro'); +const components = Object.values(import.meta.glob('../components/*.astro', { eager: true })); --- {components.map((component) => ( @@ -225,6 +236,97 @@ const components = await Astro.glob('../components/*.astro'); ))} ``` +### Valeurs prises en charge + +La fonction `import.meta.glob()` de Vite ne prend en charge que les chaînes littérales statiques. Elle ne prend pas en charge les variables dynamiques ni l'interpolation de chaîne de caractères. + +Une solution de contournement courante consiste à importer un ensemble de fichiers plus grand qui inclut tous les fichiers dont vous avez besoin, puis à les filtrer : + +```astro {6-7} +--- +// src/components/featured.astro +const { postSlug } = Astro.props; +const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`; + +const posts = Object.values(import.meta.glob("../pages/blog/*.md", { eager: true })); +const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost)); +--- + +

+ Jetez un oeil à mon article préféré, {myFeaturedPost.frontmatter.title}! +

+``` + +### Utilitaires de type d'importation + +#### Fichiers Markdown + +Les fichiers Markdown chargés avec `import.meta.glob()` renvoient l'interface `MarkdownInstance` suivante : + +```ts +export interface MarkdownInstance> { + /* Toutes les données spécifiées dans le frontmatter YAML de ce fichier */ + frontmatter: T; + /* Le chemin d'accès absolu de ce fichier */ + file: string; + /* Le chemin rendu de ce fichier */ + url: string | undefined; + /* Composant Astro qui restitue le contenu de ce fichier */ + Content: AstroComponentFactory; + /** (Markdown seulement) Contenu du fichier Markdown brut, à l'exclusion de la mise en page HTML et du frontmat YAML */ + rawContent(): string; + /** (Markdown seulement) Fichier Markdown compilé en HTML, à l'exclusion de la mise en page HTML */ + compiledContent(): string; + /* Fonction qui renvoie un tableau des éléments h1...h6 dans ce fichier */ + getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>; + default: AstroComponentFactory; +} +``` + +Vous pouvez éventuellement fournir un type pour la variable `frontmatter` à l'aide d'un générique TypeScript. + +```astro +--- +import type { MarkdownInstance } from 'astro'; +interface Frontmatter { + title: string; + description?: string; +} + +const posts = Object.values(import.meta.glob>('./posts/**/*.md', { eager: true })); +--- + +
    + {posts.map(post =>
  • {post.frontmatter.title}
    • )} +
+``` + +#### Fichiers Astro + +Les fichiers Astro ont l'interface suivante : + +```ts +export interface AstroInstance { + /* Le chemin d'accès de ce fichier */ + file: string; + /* L'URL de ce fichier (s'il se trouve dans le répertoire des pages) */ + url: string | undefined; + default: AstroComponentFactory; +} +``` + +#### Autres fichiers + +D'autres fichiers peuvent avoir différentes interfaces, mais `import.meta.glob()` accepte un générique TypeScript si vous savez exactement ce que contient un type de fichier non reconnu. + +```ts +--- +interface CustomDataFile { + default: Record; +} +const data = import.meta.glob('../data/**/*.js'); +--- +``` ### Patterns globaux @@ -234,19 +336,18 @@ Par exemple, le pattern global `./pages/**/*.{md,mdx}` commence dans le sous-ré #### Patterns globaux dans Astro -Pour être utilisé avec `Astro.glob()`, le pattern global doit être une chaîne littérale et ne peut pas contenir de variables. Voir [le guide de dépannage](/fr/guides/troubleshooting/#astroglob---no-matches-found) pour une solution de contournement. +Pour être utilisé avec `import.meta.glob()`, le modèle glob doit être une chaîne littérale et ne peut contenir aucune variable. En outre, les motifs globaux doivent commencer par l'un des éléments suivants : - `./` (pour commencer dans le répertoire actuel) - `../` (pour démarrer dans le répertoire parent) - `/` (pour démarrer à la racine du projet) - [En savoir plus sur la syntaxe des motifs globaux](https://github.com/mrmlnc/fast-glob#pattern-syntax). -#### `Astro.glob()` vs `getCollection()` +#### `import.meta.glob()` vs `getCollection()` -[Les collections de contenu](/fr/guides/content-collections/) fournissent une [API `getCollection()`](/fr/reference/modules/astro-content/#getcollection) pour charger plusieurs fichiers au lieu de `Astro.glob()`. Si vos fichiers de contenu (par exemple Markdown, MDX, Markdoc) sont situés dans des collections dans le répertoire `src/content/`, utilisez `getCollection()` pour [interroger une collection](/fr/guides/content-collections/#interroger-les-collections) et retourner les entrées de la collection. +[Les collections de contenu](/fr/guides/content-collections/) fournissent une [API `getCollection()`](/fr/reference/modules/astro-content/#getcollection) pour charger plusieurs fichiers au lieu de `import.meta.glob()`. Si vos fichiers de contenu (par exemple Markdown, MDX, Markdoc) sont situés dans des collections dans le répertoire `src/content/`, utilisez `getCollection()` pour [interroger une collection](/fr/guides/content-collections/#interroger-les-collections) et retourner les entrées de la collection. ## WASM From 32535a43899689054248af29234479709e578409 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 10 Dec 2024 19:10:18 +0100 Subject: [PATCH 3/6] farewell `Astro.glob` --- src/content/docs/fr/guides/imports.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/fr/guides/imports.mdx b/src/content/docs/fr/guides/imports.mdx index b6a227b7a4a76..54bbb82e1e2a3 100644 --- a/src/content/docs/fr/guides/imports.mdx +++ b/src/content/docs/fr/guides/imports.mdx @@ -197,7 +197,7 @@ import logoUrl from '@assets/logo.png?url'; Ces alias sont également intégrés automatiquement dans [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) et d'autres éditeurs de code. -## `Astro.glob()` +## `import.meta.glob()` L'utilitaire [`import.meta.glob()` de Vite](https://vite.dev/guide/features.html#glob-import) est un moyen d'importer plusieurs fichiers à la fois en utilisant des modèles glob pour trouver des chemins de fichiers correspondants. From f56b4dde39ccf9198935ae5c763c728224071351 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 10 Dec 2024 19:17:50 +0100 Subject: [PATCH 4/6] fix wrong locale --- .../docs/fr/guides/migrate-to-astro/from-create-react-app.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx index b9b9bc03bc2e1..63d98de0d47ab 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx @@ -348,7 +348,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/en/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou [la récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou [la récupération de données distantes](/fr/guides/data-fetching/). ### Le style de CRA à Astro From 778ae3b2776906d5d19e99bf671e06c93545501e Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 10 Dec 2024 21:26:49 +0100 Subject: [PATCH 5/6] fix bold text Co-authored-by: Thomas Bonnet --- src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx index 6589e6f62de8d..35c822f70cc03 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nuxtjs.mdx @@ -226,7 +226,7 @@ Vous souhaiterez peut-être également réutiliser le code de [la propriété `h ### Migrer les pages et les articles -Dans NuxtJS, vos [pages](/fr/basics/astro-pages/) se trouvent dans `/pages`. Dans Astro, **les contenus de vos pages doivent résider dans `src/pages` sauf si vous utilisez les [collections de contenu](/fr/guides/content-collections/). +Dans NuxtJS, vos [pages](/fr/basics/astro-pages/) se trouvent dans `/pages`. Dans Astro, **les contenus de vos pages doivent résider dans `src/pages`** sauf si vous utilisez les [collections de contenu](/fr/guides/content-collections/). #### Pages Vue From d7716cecbb2791d1f477046dedc4cd1a29b5c4d2 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 10 Dec 2024 21:46:11 +0100 Subject: [PATCH 6/6] remove useless await see #10332 --- .../docs/fr/guides/migrate-to-astro/from-create-react-app.mdx | 2 +- src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx | 2 +- src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx index 63d98de0d47ab..48b8312854865 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx @@ -339,7 +339,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Obtention de toutes les entrées `src/pages/posts/` -const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true })); +const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); // Récupération des données à distance const response = await fetch('https://randomuser.me/api/'); diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx index c30f096c906c6..6b9ecadc6e219 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx @@ -368,7 +368,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Récupérer toutes les entrées dans `src/pages/posts/` -const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true })); +const allPosts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true })); --- export const pageQuery = graphql` diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx index e05cf8de22df9..10fb5a732ce1f 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx @@ -397,7 +397,7 @@ import { getCollection } from 'astro:content'; const allBlogPosts = await getCollection('blog'); // Get all `src/pages/posts/` entries -const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true })); +const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const response = await fetch('https://randomuser.me/api/'); const data = await response.json();