Merge branch 'main' into fix/api-reference-add-missing-info-types-since

src/content/docs/en/guides/content-collections.mdx

@@ -564,12 +564,12 @@ Alternatively, you can set this value in your editor settings. For example, to s
 ```json
 {
   "json.schemas": [
-  {
-    "fileMatch": [
-      "/src/content/authors/**"
-    ],
-    "url": "./.astro/collections/authors.schema.json"
-  }
+    {
+      "fileMatch": [
+        "/src/content/authors/**"
+      ],
+      "url": "./.astro/collections/authors.schema.json"
+    }
   ]
 }
 ```

src/content/docs/en/guides/imports.mdx

@@ -15,10 +15,9 @@ The following file types are supported out-of-the-box by Astro:
 - Astro Components (`.astro`)
 - Markdown (`.md`, `.markdown`, etc.)
 - JavaScript (`.js`, `.mjs`)
-- TypeScript (`.ts`, `.tsx`)
+- TypeScript (`.ts`)
 - NPM Packages
 - JSON (`.json`)
-- JSX (`.jsx`, `.tsx`)
 - CSS (`.css`)
 - CSS Modules (`.module.css`)
 - Images & Assets (`.svg`, `.jpg`, `.png`, etc.)
@@ -41,6 +40,13 @@ import { getUser } from './user.js';
 
 JavaScript can be imported using normal ESM `import` & `export` syntax.
 
+:::note[Importing JSX files]
+
+An appropriate [UI framework](/en/guides/framework-components/) ([React](/en/guides/integrations-guide/react/), [Preact](/en/guides/integrations-guide/preact/), or [Solid](/en/guides/integrations-guide/solid-js/)) is required to render JSX/TSX files.
+Use `.jsx`/`.tsx` extensions where appropriate, as Astro does not support JSX in `.js`/`.ts` files.
+
+:::
+
 ### TypeScript
 
 ```js
@@ -65,20 +71,6 @@ import MyComponent from "./MyComponent"; // MyComponent.tsx
 <ReadMore>Read more about [TypeScript support in Astro](/en/guides/typescript/).</ReadMore>
 
 
-### JSX / TSX
-
-```js
-import { MyComponent } from './MyComponent.jsx';
-```
-
-Astro includes built-in support for JSX (`*.jsx` and `*.tsx`) files in your project. JSX syntax is automatically transpiled to JavaScript.
-
-While Astro understands JSX syntax out-of-the-box, you will need to include a framework integration to properly render frameworks like React, Preact and Solid. Check out our [Using Integrations](/en/guides/integrations-guide/) guide to learn more.
-
-:::note
-**Astro does not support JSX in `.js`/`.ts` files.** JSX will only be handled inside of files that end with the `.jsx` and `.tsx` file extensions.
-:::
-
 ### NPM Packages
 
 If you've installed an NPM package, you can import it in Astro.

src/content/docs/en/guides/middleware.mdx

@@ -208,7 +208,7 @@ Use `context.rewrite()` inside middleware to display a different page's content
 ```js title="src/middleware.js"
 import { isLoggedIn } from "~/auth.js"
 export function onRequest (context, next) {
-  if (!isLoggedIn(context) {
+  if (!isLoggedIn(context)) {
     // If the user is not logged in, update the Request to render the `/login` route and
     // add header to indicate where the user should be sent after a successful login.
     // Re-execute middleware.
@@ -228,7 +228,7 @@ You can also pass the `next()` function an optional URL path parameter to rewrit
 ```js title="src/middleware.js"
 import { isLoggedIn } from "~/auth.js"
 export function onRequest (context, next) {
-  if (!isLoggedIn(context) {
+  if (!isLoggedIn(context)) {
     // If the user is not logged in, update the Request to render the `/login` route and
     // add header to indicate where the user should be sent after a successful login.
     // Return a new `context` to any following middlewares.

src/content/docs/en/guides/routing.mdx

@@ -306,7 +306,7 @@ A rewrite allows you serve a different route without redirecting the browser to
 For content that has permanently moved, or to direct your user to a different page with a new URL (e.g. a user dashboard after logging in), use a [redirect](#redirects) instead.
 :::
 
-Rewrites can be useful for showing the same content at multiple paths (e.g. `/products/shoes/men/` and `/products/men/shoes`/) without needing to maintain two different source files.
+Rewrites can be useful for showing the same content at multiple paths (e.g. `/products/shoes/men/` and `/products/men/shoes/`) without needing to maintain two different source files.
 
 Rewrites are also useful for SEO purposes and user experience. They allow you to display content that otherwise would require redirecting your visitor to a different page or would return a 404 status. One common use of rewrites is to show the same localized content for different variants of a language.
 

src/content/docs/fr/basics/astro-components.mdx

@@ -74,7 +74,7 @@ const myFavoritePokemon = [/* ... */];
 const { title } = Astro.props;
 ---
 <!-- les commentaires HTML sont supportés ! -->
-{/* La syntaxe des commentaires JavaScipt est aussi valide ! */}
+{/* La syntaxe des commentaires JavaScript est aussi valide ! */}
 
 <Banner />
 <h1>Hello, world!</h1>

src/content/docs/fr/basics/layouts.mdx

@@ -238,27 +238,39 @@ const { title, fancyJsHelper } = Astro.props;
 
 <ReadMore>Pour en savoir plus sur la prise en charge de Markdown et de MDX par Astro, consultez notre [guide Markdown/MDX](/fr/guides/markdown-content/).</ReadMore>
 
-## Utilisation d'une mise en page unique pour les fichiers `.md`, `.mdx` et `.astro`.
+## Utilisation de TypeScript avec des mises en page
 
-Une unique mise en page Astro peut être écrite pour recevoir l'objet `frontmatter` des fichiers `.md` et `.mdx`, ainsi que toutes les propriétés nommées, passées depuis les fichiers `.astro`.
+Toute mise en page Astro peut être modifiée pour introduire la sécurité des types et la saisie semi-automatique en fournissant les types pour vos propriétés :
 
-Dans l'exemple ci-dessous, la mise en page va afficher le titre de la page, soit depuis la propriété YAML `title` de frontmatter, soit depuis un composant Astro passant un attribut `title` :
-
-```astro /{?title}?/ /Astro.props[.a-z]*/
+```astro ins={2-7} title="src/components/MyLayout.astro"
 ---
-// src/components/MyLayout.astro
-const { title } = Astro.props.frontmatter || Astro.props;
+interface Props { 
+	title: string;
+  description: string;
+  publishDate: string;
+  viewCount: number;
+}
+const { title, description, publishDate, viewCount } = Astro.props;
 ---
-<html>
-  <head></head>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content={description}>
+    <title>{title}</title>
+  </head>
   <body>
-    <h1>{title}</h1>
-    <slot />
+    <header>
+      <p>Publié le {publishDate}</p>
+      <p>Consulté par {viewCount} personnes</p>
+    </header>
+    <main>
+      <slot />
+    </main>
   </body>
 </html>
 ```
 
-## Mises en page d'emboîtement
+## Imbrication de mises en page
 
 Les composants de mises en pages ne doivent pas nécessairement contenir une page entière de HTML. Vous pouvez décomposer vos mises en page en composants plus petits et combiner des composants de mises en page pour créer des templates de page encore plus flexibles. Ce modèle est utile lorsque vous souhaitez partager du code entre plusieurs mises en page.
 

src/content/docs/fr/basics/project-structure.mdx

@@ -118,6 +118,10 @@ Pour plus d'informations en ce qui concerne la création d'un nouveau fichier `p
 
 Ce fichier est généré dans chaque modèle de démarrage et contient des options de configuration pour votre projet Astro. Ici, vous pouvez spécifier les intégrations à utiliser, les options de construction, les options du serveur, et plus encore.
 
+Astro prend en charge plusieurs formats de fichiers pour son fichier de configuration JavaScript : `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` et `astro.config.ts`. Nous vous recommandons d'utiliser `.mjs` dans la plupart des cas ou `.ts` si vous souhaitez utiliser TypeScript dans votre fichier de configuration.
+
+Le chargement du fichier de configuration TypeScript est géré à l'aide de [`tsm`](https://github.com/lukeed/tsm) et respectera les options `tsconfig` de votre projet.
+
 Allez voir la [documentation de configuration](/fr/reference/configuration-reference/) pour plus d'informations sur les options de configuration.
 
 ### `tsconfig.json`

src/content/docs/fr/guides/content-collections.mdx

@@ -343,7 +343,7 @@ const allBlogPosts = await getCollection('blog');
 const graceHopperProfile = await getEntry('authors', 'grace-hopper');
 ```
 
-Les deux fonctions renvoient des entrées de contenu telles que définies par le type [`CollectionEntry`](/fr/reference/api-reference/#collection-entry-type).
+Les deux fonctions renvoient des entrées de contenu telles que définies par le type [`CollectionEntry`](/fr/reference/api-reference/#type-des-entrées-de-collection).
 
 ### Accès aux données référencées
 
@@ -438,7 +438,7 @@ const blogEntries = await getCollection('blog');
 
 Un composant peut également passer une entrée de contenu entière en tant que propriété. 
 
-Si vous faites cela, vous pouvez utiliser l'utilitaire [`CollectionEntry`](/fr/reference/api-reference/#collection-entry-type) pour taper correctement les propriétés de vos composants en utilisant TypeScript. Cet utilitaire prend un argument de type chaîne qui correspond au nom du schéma de votre collection, et hérite de toutes les propriétés du schéma de cette collection.
+Si vous faites cela, vous pouvez utiliser l'utilitaire [`CollectionEntry`](/fr/reference/api-reference/#type-des-entrées-de-collection) pour taper correctement les propriétés de vos composants en utilisant TypeScript. Cet utilitaire prend un argument de type chaîne qui correspond au nom du schéma de votre collection, et hérite de toutes les propriétés du schéma de cette collection.
 
 ```astro /CollectionEntry(?:<.+>)?/
 ---
@@ -539,7 +539,38 @@ Explorez le dossier `src/pages/` présent dans la [base de code du tutoriel Cons
 
 Si vous avez un projet Astro existant, comme un blog, qui utilise des fichiers Markdown ou MDX dans les sous-dossiers de `src/pages/`, envisagez de migrer le contenu associé ou les fichiers de données vers des collections de contenus. 
 
-Voyez comment convertir un exemple de blog basique de `src/pages/posts/` à `src/content/posts` dans notre [tutoriel étape par étape](/fr/tutorials/add-content-collections/) qui utilise la base de code du [projet fini du tutoriel Construire un blog](https://github.com/withastro/blog-tutorial-demo).
+Regardez comment convertir un exemple de blog basique de `src/pages/posts/` à `src/content/posts` dans notre [tutoriel étape par étape](/fr/tutorials/add-content-collections/) qui utilise la base de code du [projet fini du tutoriel Construire un blog](https://github.com/withastro/blog-tutorial-demo).
+
+## Activation de la génération de schémas JSON
+
+<p><Since v="4.13.0" /></p>
+
+Si vous travaillez avec des collections de type `data`, Astro générera automatiquement des fichiers de schéma JSON pour votre éditeur afin d'obtenir IntelliSense et la vérification des types. Un fichier séparé sera créé pour chaque collection de données dans votre projet basé sur vos collections définies dans `src/content/config.ts` en utilisant une bibliothèque appelée [`zod-to-json-schema`](https://github.com/StefanTerdell/zod-to-json-schema#known-issues).
+
+Cette fonctionnalité nécessite que vous définissiez manuellement le chemin d'accès au fichier de votre schéma comme valeur de `$schema` dans chaque fichier de saisie de données de la collection :
+
+```json title="src/content/authors/armand.json" ins={2}
+{
+  "$schema": "../../../.astro/collections/authors.schema.json",
+  "name": "Armand",
+  "skills": ["Astro", "Starlight"]
+}
+```
+
+Vous pouvez également définir cette valeur dans les paramètres de votre éditeur. Par exemple, pour définir cette valeur dans [le paramètre `json.schemas` de VSCode](https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings), indiquez le chemin des fichiers à faire correspondre et l'emplacement de votre schéma JSON :
+
+```json
+{
+  "json.schemas": [
+  {
+    "fileMatch": [
+      "/src/content/authors/**"
+    ],
+    "url": "./.astro/collections/authors.schema.json"
+  }
+  ]
+}
+```
 
 ## Activation de la mise en cache de la construction
 

src/content/docs/fr/guides/endpoints.mdx

@@ -13,7 +13,7 @@ Pour les sites générés statiquement, vos endpoints personnalisés sont appel
 
 Pour créer des endpoint personnalisés, ajoutez un fichier `.js` ou `.ts` à votre dossier `/pages`. L'extension `.js` ou `.ts` sera supprimée pendant le processus de construction, donc le nom du fichier doit inclure l'extension des données que vous souhaitez créer. Par exemple, `src/pages/data.json.ts` générera un endpoint `/data.json`.
 
-Les points de terminaison exportent une fonction `GET` (optionnellement `async`) qui reçoit un [objet de contexte](/fr/reference/api-reference/#endpoint-context) avec des propriétés similaires à celles de l'objet global `Astro`. Ici, elle retourne un objet Response avec un champ `name` et `url`, et Astro l'appellera au moment de la construction et utilisera le contenu du body pour générer le fichier.
+Les points de terminaison exportent une fonction `GET` (optionnellement `async`) qui reçoit un [objet de contexte](/fr/reference/api-reference/#contexte-du-point-de-terminaison) avec des propriétés similaires à celles de l'objet global `Astro`. Ici, elle retourne un objet Response avec un champ `name` et `url`, et Astro l'appellera au moment de la construction et utilisera le contenu du body pour générer le fichier.
 
 ```ts
 // Exemple : src/pages/builtwith.json.ts
@@ -73,7 +73,7 @@ export function getStaticPaths() {
 }
 ```
 
-Cela va générer 4 points de terminaison JSON au moment du build : `/api/0.json`, `/api/1.json`, `/api/2.json` et `/api/3.json`. Le routage dynamique avec les endpoints fonctionne de la même manière qu'avec les pages, mais parce que l'endpoint est une fonction et non un composant, les [props](/fr/reference/api-reference/#data-passing-with-props) ne sont pas supportées.
+Cela va générer 4 points de terminaison JSON au moment du build : `/api/0.json`, `/api/1.json`, `/api/2.json` et `/api/3.json`. Le routage dynamique avec les endpoints fonctionne de la même manière qu'avec les pages, mais parce que l'endpoint est une fonction et non un composant, les [props](/fr/reference/api-reference/#transfert-de-données-avec-props) ne sont pas supportées.
 
 ### `request`
 
@@ -92,7 +92,7 @@ export const GET: APIRoute = ({ params, request }) => {
 
 ## Points de terminaison du serveur (Routes API)
 
-Tout ce qui est décrit dans la section sur les endpoints des fichiers statiques peut également être utilisé en mode SSR : les fichiers peuvent exporter une fonction `GET` qui reçoit un [objet de contexte](/fr/reference/api-reference/#endpoint-context) avec des propriétés similaires à celles de l'objet global `Astro`.
+Tout ce qui est décrit dans la section sur les endpoints des fichiers statiques peut également être utilisé en mode SSR : les fichiers peuvent exporter une fonction `GET` qui reçoit un [objet de contexte](/fr/reference/api-reference/#contexte-du-point-de-terminaison) avec des propriétés similaires à celles de l'objet global `Astro`.
 
 Mais, contrairement au mode `static`, lorsque vous activez le mode de rendu à la demande pour une route, le point de terminaison sera construit lorsqu'il sera demandé. Cela débloque de nouvelles fonctionnalités qui ne sont pas disponibles au moment de la construction, et vous permet de construire des routes d'API qui écoutent les requêtes et exécutent du code de manière sécurisée sur le serveur au moment de l'exécution.
 

src/content/docs/fr/guides/imports.mdx

@@ -213,7 +213,7 @@ const posts = await Astro.glob('../pages/post/*.md');
 </div>
 ```
 
-Les composants Astro importés avec `Astro.glob` sont de type [`AstroInstance`](/fr/reference/api-reference/#astro-files). Vous pouvez effectuer le rendu de chaque instance de composant en utilisant sa propriété `default` :
+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` :
 
 ```astro title="src/pages/component-library.astro" {8}
 ---