Merge branch 'main' into i18n-ja-content-loader-reference

withastro · Feb 26, 2025 · ecef3b9 · ecef3b9
2 parents 5810d56 + 6d17bb7
commit ecef3b9
Show file tree

Hide file tree

Showing 12 changed files with 256 additions and 138 deletions.
diff --git a/src/content/docs/en/editor-setup.mdx b/src/content/docs/en/editor-setup.mdx
@@ -83,41 +83,40 @@ To add support for formatting `.astro` files outside of the editor (e.g. CLI) or
     <PackageManagerTabs>
       <Fragment slot="npm">
       ```shell
-      npm install --save-dev prettier prettier-plugin-astro
+      npm install --save-dev --save-exact prettier prettier-plugin-astro
       ```
       </Fragment>
       <Fragment slot="pnpm">
       ```shell
-      pnpm add -D prettier prettier-plugin-astro
+      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
       ```
       </Fragment>
       <Fragment slot="yarn">
       ```shell
-      yarn add --dev prettier prettier-plugin-astro
+      yarn add --dev --exact prettier prettier-plugin-astro
       ```
       </Fragment>
     </PackageManagerTabs>
 
-2. Create a `.prettierrc.mjs` config file at the root of your project and add `prettier-plugin-astro` to it.
+2. Create a `.prettierrc` configuration file (or `.prettierrc.json`, `.prettierrc.mjs`, or [other supported formats](https://prettier.io/docs/configuration)) in the root of your project and add `prettier-plugin-astro` to it.
 
     In this file, also manually specify the parser for Astro files.
 
-    ```js title=".prettierrc.mjs"
-    /** @type {import("prettier").Config} */
-    export default {
-      plugins: ['prettier-plugin-astro'],
-      overrides: [
+    ```json title=".prettierrc"
+    {
+      "plugins": ["prettier-plugin-astro"],
+      "overrides": [
         {
-          files: '*.astro',
-          options: {
-            parser: 'astro',
-          },
-        },
-      ],
-    };
+          "files": "*.astro",
+          "options": {
+            "parser": "astro",
+          }
+        }
+      ]
+    }
     ```
 
-3. Run the command `prettier . --write` in the terminal to format your files.
+3. Run the following command in your terminal to format your files.
 
     <PackageManagerTabs>
       <Fragment slot="npm">
@@ -132,7 +131,7 @@ To add support for formatting `.astro` files outside of the editor (e.g. CLI) or
       </Fragment>
       <Fragment slot="yarn">
       ```shell
-      yarn prettier . --write
+      yarn exec prettier . --write
       ```
       </Fragment>
     </PackageManagerTabs>

diff --git a/src/content/docs/en/guides/configuring-astro.mdx b/src/content/docs/en/guides/configuring-astro.mdx
@@ -28,7 +28,6 @@ It is only required if you have something to configure, but most projects will u
 
 We recommend using the default file format `.mjs` in most cases, or `.ts` if you want to write TypeScript in your config file. However, `astro.config.js` and `astro.config.cjs` are also supported.
 
-
 <ReadMore>Read Astro's [configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.</ReadMore>
 
 ## The TypeScript config File
@@ -84,9 +83,11 @@ const { ...props } = Astro.props;
   <head>
     <meta charset="utf-8">
     <Head />
-    <!-- -->
+    <!-- Additional head elements -->
   </head>
-  <body><!-- --></body>
+  <body>
+    <!-- Page content goes here -->
+  </body>
 </html>
 ```
 

diff --git a/src/content/docs/es/reference/directives-reference.mdx b/src/content/docs/es/reference/directives-reference.mdx
@@ -80,7 +80,7 @@ import api from '../db/api.js';
 <article set:html={api.getArticle(Astro.props.id)}></article>
 ```
 
-`set:html={Promise<Response>}` inyecta una [Respuesta](https://developer.mozilla.org/en-US/docs/Web/API/Response) en un elemento.
+`set:html={Promise<Response>}` inyecta una [Respuesta](https://developer.mozilla.org/es/docs/Web/API/Response) en un elemento.
 
 Esto es más útil cuando se usa `fetch()`. Por ejemplo, recuperar publicaciones antiguas de un anterior generador de sitios estáticos.
 
@@ -139,6 +139,18 @@ Carga e hidrata el componente JavaScript una vez que la página haya terminado c
 <ShowHideButton client:idle />
 ```
 
+### `timeout`
+
+<p><Since v="4.15.0" /></p>
+
+El tiempo máximo de espera, en milisegundos, antes de hidratar el componente, incluso si la página aún no ha terminado su carga inicial.
+
+Esto te permite pasar un valor para [la opción `timeout` desde la especificación de `requestIdleCallback()`](https://www.w3.org/TR/requestidlecallback/#the-requestidlecallback-method). Esto significa que puedes retrasar la hidratación de elementos de la interfaz de usuario de menor prioridad con más control, asegurando que tu elemento sea interactivo dentro de un período de tiempo determinado.
+
+```astro
+<ShowHideButton client:idle={{timeout: 500}} />
+```
+
 ### `client:visible`
 
 - **Prioridad:** Baja
@@ -191,12 +203,35 @@ Si el componente ya está oculto y se muestra mediante media queries de CSS, ent
 <SomeLitComponent client:only="lit" />
 ```
 
+#### Mostrar contenido de carga
+
+Para los componentes que se renderizan solo en el cliente, también es posible mostrar contenido alternativo mientras se están cargando. Usa `slot="fallback"` en cualquier elemento hijo para crear contenido que se mostrará solo hasta que tu componente en el cliente esté disponible:
+
+```astro {2}
+<ClientComponent client:only="vue">
+  <div slot="fallback">Cargando</div>
+</ClientComponent>
+```
+
 ### Directivas de cliente personalizadas
 
 Desde Astro 2.6.0, las integraciones también pueden agregar directivas `client:*` personalizadas para cambiar cómo y cuándo se deben hidratar los componentes.
 
 Consulta la [API `addClientDirective`](/es/reference/integrations-reference/#opción-addclientdirective) para saber más sobre cómo crear una directiva de cliente personalizada.
 
+## Directivas del Servidor
+
+Estas directivas controlan cómo se renderizan los componentes tipo isla de servidor.
+
+### `server:defer`
+
+La directiva `server:defer` transforma el componente en una isla de servidor, haciendo que se renderice bajo demanda, fuera del alcance del resto de la renderización de la página.
+
+<ReadMore>Consulta más sobre el uso de [componentes de isla de servidor](/es/guides/server-islands/).</ReadMore>
+
+```astro
+<Avatar server:defer />
+```
 
 ## Directivas Script & Style
 

diff --git a/src/content/docs/fr/basics/astro-components.mdx b/src/content/docs/fr/basics/astro-components.mdx
@@ -3,7 +3,6 @@ title: Composants
 description: Une introduction aux composants Astro.
 i18nReady: true
 ---
-
 import ReadMore from '~/components/ReadMore.astro';
 
 **Les composants Astro** sont les éléments de base de tout projet Astro. Il s'agit de composants de template HTML uniquement, sans exécution côté client, qui utilisent l'extension de fichier `.astro`.
@@ -45,7 +44,6 @@ Vous pouvez utiliser le script du composant pour écrire du code JavaScript qui
 - Récupérer le contenu d'une API ou d'une base de données
 - Créer des variables que vous voulez référencer dans votre template
 
-
 ```astro title="src/components/MyComponent.astro"
 ---
 import SomeAstroComponent from '../components/SomeAstroComponent.astro';
@@ -54,6 +52,7 @@ import someData from '../data/pokemon.json';
 
 // Accéder aux props de composants transmis, comme `<X title="Hello, World" />`
 const { title } = Astro.props;
+
 // Récupérer des données externes, même à partir d'une API ou d'une base de données privée
 const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
 ---
@@ -108,7 +107,7 @@ const { title } = Astro.props;
 <ul>
 
 <!-- Utilisez une directive de template pour créer des classes à partir de plusieurs chaînes ou même d'objets ! -->
-<p class:list={["add", "dynamic", {classNames : true}]} />
+<p class:list={["add", "dynamic", { classNames : true }]} />
 ```
 
 ## Conception basée sur les composants
@@ -126,7 +125,6 @@ import Button from './Button.astro';
 </div>
 ```
 
-
 ## Props de composant
 
 Un composant Astro peut définir et accepter des props (diminutif pour « propriétés »). Ces dernières deviennent alors disponibles dans le template du composant pour le rendu du HTML. Les props sont accessibles à l'aide de la variable globale `Astro.props` dans le frontmatter, ou script du composant.
@@ -221,8 +219,6 @@ import Wrapper from '../components/Wrapper.astro';
 
 Ce modèle est la base d'un [Composant Layout dans Astro](/fr/basics/layouts/) : une page entière de contenu HTML peut être « enveloppée » avec des balises `<Layout></Layout>` et envoyée au composant pour être rendue à l'intérieur des éléments de page communs qui y sont définis.
 
-
-
 ### Les emplacements (slots) nommés
 
 Un composant Astro peut aussi avoir des emplacements nommés. Cela vous permet de ne faire passer que des éléments HTML avec le nom d'emplacement (slot) correspondant, au niveau de l'emplacement.
@@ -240,18 +236,20 @@ const { title } = Astro.props;
 ---
 <div id="content-wrapper">
 <Header />
-<slot name="after-header" /> <!-- les enfants avec l'attribut `slot="after-header" iront ici  -->
+<!-- les enfants avec l'attribut `slot="after-header"` iront ici  -->
+<slot name="after-header" />
 <Logo />
 <h1>{title}</h1>
-<slot /> <!-- les enfants sans `slot` ou avec l'attribut `slot="default"`iront ici -->
+<!-- les enfants sans `slot` ou avec l'attribut `slot="default"` iront ici -->
+<slot />
 <Footer />
-<slot name="after-footer" /> <!-- les enfants avec l'attribut `slot="after-footer"` iront ici -->
+<!-- les enfants avec l'attribut `slot="after-footer"` iront ici -->
+<slot name="after-footer" />
 </div>
 ```
 
 Pour injecter du contenu HTML dans un emplacement (slot) particulier, utilisez l'attribut `slot` sur n'importe quel élément enfant pour spécifier le nom de l'emplacement (slot). Tous les autres éléments enfants du composant seront injectés dans le `<slot />` par défaut (sans nom).
 
-
 ```astro /slot=".*?"/
 ---
 // src/pages/fred.astro
@@ -273,15 +271,15 @@ Pour faire passer plusieurs éléments HTML dans l'espace réservé `<slot/>` d'
 
 ```astro title="src/components/CustomTable.astro" "<slot name="header"/>" "<slot name="body" />"
 ---
-// Créer un tableau personnalisé avec des emplacements (slot) nommés pour le contenu HEAD et BODY du contenu.
+// Crée un tableau personnalisé avec des emplacements (slot) nommés pour le contenu de l'en-tête et du corps
 ---
 <table class="bg-white">
   <thead class="sticky top-0 bg-white"><slot name="header" /></thead>
   <tbody class="[&_tr:nth-child(odd)]:bg-gray-100"><slot name="body" /></tbody>
 </table>
 ```
 
-Injecter plusieurs lignes et colonnes de contenu HTML en utilisant un attribut `slot=""` pour spécifier le contenu `"header"` et `"body"`. Les éléments HTML individuels peuvent également être stylisés :
+Injectez plusieurs lignes et colonnes de contenu HTML en utilisant un attribut `slot=""` pour spécifier le contenu `"header"` et `"body"`. Les éléments HTML individuels peuvent également être stylisés :
 
 ```astro title="src/components/StockTable.astro" {5-7, 9-13} '<Fragment slot="header">' '<Fragment slot="body">'
 ---
@@ -306,13 +304,12 @@ Notez que les emplacements nommés doivent être des enfants immédiats du compo
 Les emplacements nommés peuvent aussi être passés aux [composants de framework](/fr/guides/framework-components/) !
 :::
 
-
 :::note
-Il n'est pas possible de générer dynamiquement un nom de slot Astro en utilisant, par exemple, la méthode `map`. Si cette fonctionnalité est nécessaire dans les composants du framework UI, il est préférable de générer ces slots dynamiques dans le framework lui-même.
+Il n'est pas possible de générer dynamiquement un nom de slot Astro en utilisant, par exemple, la méthode [`map`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Si cette fonctionnalité est nécessaire dans les composants du framework UI, il est préférable de générer ces slots dynamiques dans le framework lui-même.
 :::
 
-
 ### Contenu par défaut pour les emplacements
+
 Les slots peuvent également restituer du **contenu de secours** (ou « fallback »). Lorsqu'aucun enfant correspondant n'est transmis à un slot, un élément `<slot />` restituera ses propres enfants fictifs.
 
 ```astro {14}
@@ -335,7 +332,7 @@ const { title } = Astro.props;
 </div>
 ```
 
-Le contenu de repli ne sera affiché que si aucun élément correspondant avec l'attribut slot="name" n'est transmis à un slot nommé.
+Le contenu de repli ne sera affiché que si aucun élément correspondant avec l'attribut `slot="name"` n'est transmis à un slot nommé.
 
 Astro transmet un slot vide lorsqu'un élément slot existe, mais qu'il n'y a pas de contenu à transmettre. Le contenu de repli ne peut pas être utilisé par défaut lorsqu'un slot vide est transmis. Le contenu de repli n'est affiché que quand aucun élément slot ne peut être trouvé.
 
@@ -393,6 +390,7 @@ import HomeLayout from '../layouts/HomeLayout.astro';
 Astro prend en charge l'importation et l'utilisation de fichiers `.html` en tant que composants ou le placement de ces fichiers dans le sous-répertoire `src/pages` en tant que pages. Vous souhaiterez peut-être utiliser des composants HTML si vous réutilisez le code d'un site existant construit sans framework, ou si vous voulez vous assurer que votre composant n'ai pas de fonctionnalités dynamiques.
 
 Les composants HTML ne doivent contenir que du code HTML valide et ne disposent donc pas des fonctionnalités clés des composants Astro :
+
 - Ils ne prennent pas en charge de Script de Composant, les importations côté serveur ou les expressions dynamiques.
 - Toutes les balises `<script>` sont laissées non regroupées, traitées comme si elles avaient `is:inline`.
 - Ils ne peuvent [référencer que les assets qui se trouvent dans le dossier `public/`](/fr/basics/project-structure/#public).

diff --git a/src/content/docs/fr/editor-setup.mdx b/src/content/docs/fr/editor-setup.mdx
@@ -82,42 +82,41 @@ Pour ajouter le support du formatage des fichiers `.astro` en dehors de l'édite
 
     <PackageManagerTabs>
       <Fragment slot="npm">
-      ```shell
-      npm install --save-dev prettier prettier-plugin-astro
+      ```shell 
+      npm install --save-dev --save-exact prettier prettier-plugin-astro
       ```
       </Fragment>
       <Fragment slot="pnpm">
       ```shell
-      pnpm add -D prettier prettier-plugin-astro
+      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
       ```
       </Fragment>
       <Fragment slot="yarn">
       ```shell
-      yarn add --dev prettier prettier-plugin-astro
+      yarn add --dev --exact prettier prettier-plugin-astro
       ```
       </Fragment>
     </PackageManagerTabs>
 
-2. Créez un fichier de configuration `.prettierrc.mjs` à la racine de votre projet et ajoutez-y `prettier-plugin-astro`.
+2. Créez un fichier de configuration `.prettierrc.mjs` (ou `.prettierrc.json`, `.prettierrc.mjs`, ou [dans d'autres formats supportés](https://prettier.io/docs/configuration)) à la racine de votre projet et ajoutez-y `prettier-plugin-astro`.
 
     Dans ce fichier, vous pouvez également spécifier manuellement l'analyseur pour les fichiers Astro.
 
-    ```js title=".prettierrc.mjs"
-    /** @type {import("prettier").Config} */
-    export default {
-      plugins: ['prettier-plugin-astro'],
-      overrides: [
+    ```json title=".prettierrc"
+    {
+      "plugins": ["prettier-plugin-astro"],
+      "overrides": [
         {
-          files: '*.astro',
-          options: {
-            parser: 'astro',
+          "files": "*.astro",
+          "options": {
+            "parser": "astro",
           },
         },
       ],
     };
     ```
 
-3. Exécutez la commande `prettier . --write` dans le terminal pour formater vos fichiers.
+3. Exécutez la commande suivante dans votre terminal pour formater vos fichiers.
 
     <PackageManagerTabs>
       <Fragment slot="npm">
@@ -132,7 +131,7 @@ Pour ajouter le support du formatage des fichiers `.astro` en dehors de l'édite
       </Fragment>
       <Fragment slot="yarn">
       ```shell
-      yarn prettier . --write
+      yarn exec prettier . --write
       ```
       </Fragment>
     </PackageManagerTabs>

diff --git a/src/content/docs/fr/guides/configuring-astro.mdx b/src/content/docs/fr/guides/configuring-astro.mdx
@@ -84,9 +84,9 @@ const { ...props } = Astro.props;
   <head>
     <meta charset="utf-8">
     <Head />
-    <!-- -->
+    <!-- Eléments d'entête supplémentaires -->
   </head>
-  <body><!-- --></body>
+  <body><!-- Contenu de la page va ici --></body>
 </html>
 ```