withastro · thomasbnt · Dec 11, 2024 · Dec 10, 2024 · Dec 9, 2024 · Dec 10, 2024
diff --git 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 <a href="/reports/annual/2024.pdf">déclaration annuelle 2024 en PDF</a>.
+
+// Pour afficher /public/assets/cats/ginger.jpg
+<img src="/assets/cats/ginger.jpg" alt="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.
 
@@ -187,35 +197,36 @@ 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()`
 
-[`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);
 ---
 <!-- Rend un <article> pour les 5 premiers articles du blog -->
 <div>
 {posts.slice(0, 4).map((post) => (
   <article>
     <h2>{post.frontmatter.title}</h2>
     <p>{post.frontmatter.description}</p>
-    <a href={post.url}>Lire plus</a>
+    <a href={post.url}>Lire la suite</a>
   </article>
 ))}
 </div>
 ```
 
-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 }));
 ---
 <!-- Affiche tous nos composants -->
 {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));
+---
+
+<p>
+  Jetez un oeil à mon article préféré, <a href={myFeaturedPost.url}>{myFeaturedPost.frontmatter.title}</a>!
+</p>
+```
+
+### 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<T extends Record<string, any>> {
+  /* 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<MarkdownInstance<Frontmatter>>('./posts/**/*.md', { eager: true }));
+---
+
+<ul>
+  {posts.map(post => <li>{post.frontmatter.title}</li>)}
+</ul>
+```
+
+#### 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<string, any>;
+}
+const data = import.meta.glob<CustomDataFile>('../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
 

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
@@ -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 `<slot />` 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 = 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/');
@@ -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()`](/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
 

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
@@ -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
@@ -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