Merge branch 'main' into i18n-fr-update-guides-customization

docs/src/content/docs/es/guides/css-and-tailwind.mdx

@@ -3,12 +3,16 @@ title: CSS y Estilos
 description: Aprende a darle estilo a tu sitio Starlight con CSS personalizado o integrado con Tailwind CSS.
 ---
 
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
 Puedes darle estilo a tu sitio de Starlight con archivos CSS personalizados o usar el plugin Starlight Tailwind.
 
 ## Estilos CSS personalizados
 
 Personaliza los estilos aplicados a tu sitio Starlight proporcionando archivos CSS adicionales para modificar o extender los estilos predeterminados de Starlight.
 
+<Steps>
+
 1. Agrega un archivo CSS a tu directorio `src/`.
    Por ejemplo, podrías establecer un ancho de columna predeterminado más ancho y un tamaño de texto más grande para los títulos de las páginas:
 
@@ -40,6 +44,8 @@ Personaliza los estilos aplicados a tu sitio Starlight proporcionando archivos C
    });
    ```
 
+</Steps>
+
 Puedes ver todas las propiedades CSS personalizadas utilizadas por Starlight que puedes establecer para personalizar tu sitio en el archivo [`props.css` en GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
 
 ## Tailwind CSS
@@ -55,8 +61,6 @@ El plugin Starlight Tailwind aplica la siguiente configuración:
 
 ### Crea un nuevo proyecto con Tailwind
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 Empieza un nuevo proyecto en Starlight con Tailwind CSS preconfigurado usando `create astro`:
 
 <Tabs>
@@ -87,6 +91,8 @@ yarn create astro --template starlight/tailwind
 
 Si ya tienes un sitio en Starlight y quieres agregar Tailwind CSS, sigue estos pasos.
 
+<Steps>
+
 1.  Agrega la integración de Tailwind de Astro:
 
     <Tabs>
@@ -194,6 +200,8 @@ Si ya tienes un sitio en Starlight y quieres agregar Tailwind CSS, sigue estos p
     };
     ```
 
+</Steps>
+
 ### Estilando Starlight con Tailwind
 
 Starlight utilizará los valores de la [configuración de tema Tailwind](https://tailwindcss.com/docs/theme) en su UI.

docs/src/content/docs/es/guides/customization.mdx

@@ -3,15 +3,16 @@ title: Personalizando Starlight
 description: Aprende cómo personalizar tu sitio de Starlight con estilos personalizados, fuentes y mucho más.
 ---
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-import { FileTree } from '@astrojs/starlight/components';
+import { Tabs, TabItem, FileTree, Steps } from '@astrojs/starlight/components';
 
 Starlight proporciona estilos y características predeterminadas sensatas, por lo que puedes comenzar rápidamente sin necesidad de configuración. Cuando desees comenzar a personalizar la apariencia de tu sitio de Starlight, esta guía te proporciona toda la información necesaria.
 
 ## Añade tu logo
 
 Agregando un logo personalizado al encabezado del sitio es una forma rápida de agregar tu marca personalizada a un sitio de Starlight.
 
+<Steps>
+
 1. Agrega el archivo de imagen de tu logo al directorio `src/assets/`:
 
    <FileTree>
@@ -43,6 +44,8 @@ Agregando un logo personalizado al encabezado del sitio es una forma rápida de
    });
    ```
 
+</Steps>
+
 De forma predeterminada, el logo se mostrará junto al título de tu sitio.
 Si tu imagen de logo ya incluye el título del sitio, puedes ocultar visualmente el texto del título estableciendo la opción `replacesTitle`.
 El texto del título seguirá estando disponible para lectores de pantalla para garantizar la accesibilidad del encabezado.
@@ -61,6 +64,8 @@ starlight({
 
 Puedes mostrar diferentes versiones de tu logo en modos claro y oscuro.
 
+<Steps>
+
 1. Agrega un archivo de imagen para cada variante en el directorio `src/assets/`:
 
    <FileTree>
@@ -86,6 +91,8 @@ Puedes mostrar diferentes versiones de tu logo en modos claro y oscuro.
    }),
    ```
 
+</Steps>
+
 ## Habilitar el mapa del sitio
 
 Starlight tiene soporte incorporado para generar un mapa del sitio. Habilita la generación del mapa del sitio estableciendo tu URL como `site` en `astro.config.mjs`:
@@ -303,6 +310,8 @@ Para utilizar Google Fonts, sigue la [guía de configuración de Fontsource](#co
 
 #### Configurar archivos de fuentes locales.
 
+<Steps>
+
 1. Agrega tus archivos de fuente a un directorio `src/fonts/` y crea un archivo `font-face.css` vacío.
 
    <FileTree>
@@ -352,11 +361,15 @@ Para utilizar Google Fonts, sigue la [guía de configuración de Fontsource](#co
    });
    ```
 
+</Steps>
+
 #### Configurar una fuente de Fontsource
 
 El proyecto [Fontsource](https://fontsource.org/) simplifica el uso de fuentes de Google Fonts y otras fuentes de código abierto.
 Proporciona módulos npm que puedes instalar para las fuentes que deseas utilizar e incluye archivos CSS listos para usar que puedes agregar a tu proyecto.
 
+<Steps>
+
 1.  Encuentra la fuente que deseas utilizar en el catálogo de [Fontsource](https://fontsource.org/).
     En este ejemplo, se utilizará [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif).
 
@@ -414,6 +427,8 @@ Proporciona módulos npm que puedes instalar para las fuentes que deseas utiliza
 
     Fontsource incluye varios archivos CSS para cada fuente. Consulta la [documentación de Fontsource](https://fontsource.org/docs/getting-started/install#4-weights-and-styles) sobre cómo incluir diferentes pesos y estilos para comprender cuál debes usar.
 
+</Steps>
+
 ### Usar fuentes
 
 Para aplicar la fuente que configuraste a tu sitio, utiliza el nombre de la fuente elegida en un [archivo CSS personalizado](/es/guides/css-and-tailwind/#estilos-css-personalizados).

docs/src/content/docs/es/guides/i18n.mdx

@@ -3,12 +3,14 @@ title: Internacionalización (i18n)
 description: Aprende a configurar tu sitio Starlight para admitir varios idiomas.
 ---
 
-import { FileTree } from '@astrojs/starlight/components';
+import { FileTree, Steps } from '@astrojs/starlight/components';
 
 Starlight proporciona soporte incorporado para sitios multilingües, incluidas las rutas, el contenido de respaldo y el soporte completo de idiomas de derecha a izquierda (RTL).
 
 ## Configura i18n
 
+<Steps>
+
 1. Indícale a Starlight los idiomas que admites pasando [`locales`](/es/reference/configuration/#locales) y [`defaultLocale`](/es/reference/configuration/#defaultlocale) a la integración de Starlight:
 
    ```js {9-26}
@@ -63,6 +65,8 @@ Starlight proporciona soporte incorporado para sitios multilingües, incluidas l
 
    Por ejemplo, crea `ar/index.md` y `en/index.md` para representar la página de inicio en árabe e inglés, respectivamente.
 
+</Steps>
+
 ### Usa una raíz de configuración regional
 
 Puedes usar una raíz de configuración regional para servir un idioma sin ningún prefijo i18n en tu ruta. Por ejemplo, si el inglés es tu configuración regional, una ruta de página en inglés se vería como `/about` en lugar de `/en/about`.
@@ -151,6 +155,8 @@ predeterminados](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.m
 
 Puedes proprocionar traducciones para idiomas adicionales, o editar nuestras etiquetas predeterminadas, a través de la colección de datos `i18n`.
 
+<Steps>
+
 1. Configura la colección de datos `i18n` en `src/content/config.ts` si aún no está configurada:
 
    ```diff lang="js" ins=/, (i18nSchema)/
@@ -213,6 +219,8 @@ Puedes proprocionar traducciones para idiomas adicionales, o editar nuestras eti
    }
    ```
 
+</Steps>
+
 ### Extiende el esquema de traducción
 
 Agrega claves personalizadas a los diccionarios de traducción de tu sitio estableciendo `extend` en las opciones de `i18nSchema()`.

docs/src/content/docs/fr/guides/css-and-tailwind.mdx

@@ -3,12 +3,16 @@ title: CSS et mise en forme
 description: Apprendre à mettre en forme votre site Starlight avec du CSS personnalisé ou l'intégrer avec Tailwind CSS.
 ---
 
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
 Vous pouvez mettre en forme votre site Starlight avec du CSS personnalisé ou utiliser le module d'extension Tailwind de Starlight.
 
 ## Styles CSS personnalisés
 
 Personnalisez les styles appliqués à votre site Starlight en fournissant des fichiers CSS supplémentaires pour modifier ou étendre les styles par défaut de Starlight.
 
+<Steps>
+
 1. Ajoutez un fichier CSS à votre répertoire `src/`.
    Par exemple, vous pouvez définir une largeur de colonne par défaut plus large et une taille de texte plus grande pour les titres de page :
 
@@ -40,6 +44,8 @@ Personnalisez les styles appliqués à votre site Starlight en fournissant des f
    });
    ```
 
+</Steps>
+
 Vous pouvez retrouver toutes les propriétés CSS personnalisées utilisées par Starlight que vous pouvez définir pour personnaliser votre site dans le fichier [`props.css` sur GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
 
 ## Tailwind CSS
@@ -55,8 +61,6 @@ Le module d'extension Tailwind de Starlight applique la configuration suivante :
 
 ### Créer un nouveau projet avec Tailwind
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 Démarrez un nouveau projet Starlight avec Tailwind CSS préconfiguré en utilisant `create astro` :
 
 <Tabs>
@@ -87,6 +91,8 @@ yarn create astro --template starlight/tailwind
 
 Si vous avez déjà un site Starlight et que vous souhaitez ajouter Tailwind CSS, suivez ces étapes.
 
+<Steps>
+
 1.  Ajoutez l'intégration Astro pour Tailwind :
 
     <Tabs>
@@ -194,6 +200,8 @@ Si vous avez déjà un site Starlight et que vous souhaitez ajouter Tailwind CSS
     };
     ```
 
+</Steps>
+
 ### Mettre en forme Starlight avec Tailwind
 
 Starlight utilise les valeurs de votre [configuration de thème Tailwind](https://tailwindcss.com/docs/theme) dans son interface utilisateur.
@@ -242,7 +250,7 @@ export default {
 Le thème de couleur de Starlight peut être contrôlé en remplaçant ses propriétés personnalisées par défaut.
 Ces variables sont utilisées dans toute l'interface utilisateur avec une gamme de nuances de gris utilisées pour les couleurs de texte et d'arrière-plan et une couleur d'accentuation utilisée pour les liens et pour mettre en évidence les éléments courants durant la navigation.
 
-### Editeur de thème de couleur
+### Éditeur de thème de couleur
 
 Utiliser les contrôles ci-dessous pour modifier les palettes de couleurs d'accentuation et de gris de Starlight.
 Les zones d'aperçu sombre et clair afficheront les couleurs résultantes, et la page entière sera également mise à jour pour prévisualiser vos modifications.

docs/src/content/docs/fr/guides/overriding-components.md → docs/src/content/docs/fr/guides/overriding-components.mdx

@@ -3,6 +3,8 @@ title: Redéfinition de composants
 description: Apprenez à redéfinir les composants intégrés à Starlight pour ajouter des éléments personnalisés à l’interface utilisateur de votre site de documentation.
 ---
 
+import { Steps } from '@astrojs/starlight/components';
+
 L'interface utilisateur et les options de configuration par défaut de Starlight sont conçues pour être flexibles et fonctionner pour une variété de contenus. Une grande partie de l'apparence par défaut de Starlight peut être personnalisée grâce au [CSS](/fr/guides/css-and-tailwind/) et aux [options de configuration](/fr/guides/customization/).
 
 Quand vos besoins dépassent ce qui est possible de base, Starlight supporte la création de vos propres composants personnalisés pour étendre ou redéfinir (remplacer complètement) ses composants par défaut.
@@ -17,6 +19,8 @@ Redéfinir les composants par défaut de Starlight peut être utile lorsque :
 
 ## Comment redéfinir
 
+<Steps>
+
 1. Choisissez le composant de Starlight que vous souhaitez redéfinir.
    Vous pouvez trouver une liste complète des composants dans la [référence des redéfinitions](/fr/reference/overrides/).
 
@@ -42,18 +46,20 @@ Redéfinir les composants par défaut de Starlight peut être utile lorsque :
    import starlight from '@astrojs/starlight';
 
    export default defineConfig({
-     integrations: [
-       starlight({
-         title: 'Ma documentation avec redéfinitions',
-         components: {
-           // Redéfinit le composant par défaut `SocialIcons`.
-           SocialIcons: './src/components/EmailLink.astro',
-         },
-       }),
-     ],
+   	integrations: [
+   		starlight({
+   			title: 'Ma documentation avec redéfinitions',
+   			components: {
+   				// Redéfinit le composant par défaut `SocialIcons`.
+   				SocialIcons: './src/components/EmailLink.astro',
+   			},
+   		}),
+   	],
    });
    ```
 
+</Steps>
+
 ## Réutiliser un composant intégré
 
 Vous pouvez utiliser avec les composants par défaut de Starlight comme vous le feriez avec les vôtres : en les important et en les affichant dans vos propres composants personnalisés. Cela vous permet de conserver toute l'interface utilisateur de base de Starlight dans votre design, tout en ajoutant des éléments supplémentaires à côté.
@@ -94,9 +100,9 @@ const { title } = Astro.props.entry.data;
 <h1 id="_top">{title}</h1>
 
 <style>
-  h1 {
-    font-family: 'Comic Sans';
-  }
+	h1 {
+		font-family: 'Comic Sans';
+	}
 </style>
 ```
 
@@ -118,13 +124,13 @@ const isHomepage = Astro.props.slug === '';
 ---
 
 {
-  isHomepage ? (
-    <footer>Construit avec Starlight 🌟</footer>
-  ) : (
-    <Default {...Astro.props}>
-      <slot />
-    </Default>
-  )
+	isHomepage ? (
+		<footer>Construit avec Starlight 🌟</footer>
+	) : (
+		<Default {...Astro.props}>
+			<slot />
+		</Default>
+	)
 }
 ```
 

docs/src/content/docs/fr/guides/site-search.mdx

@@ -3,7 +3,7 @@ title: Recherche
 description: Découvrez les fonctionnalités de recherche intégrées à Starlight et comment les personnaliser.
 ---
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
 
 Par défaut, les sites utilisant Starlight incluent une recherche plein texte utilisant [Pagefind](https://pagefind.app/), un outil de recherche rapide et à faible bande passante pour sites statiques.
 
@@ -48,6 +48,8 @@ Ce texte sera caché de la recherche.
 
 Si vous avez accès au [programme DocSearch d'Algolia](https://docsearch.algolia.com/) et que vous souhaitez l'utiliser à la place de Pagefind, vous pouvez utiliser le module d'extension officiel DocSearch de Starlight.
 
+<Steps>
+
 1. Installez `@astrojs/starlight-docsearch` :
 
    <Tabs>
@@ -102,13 +104,17 @@ Si vous avez accès au [programme DocSearch d'Algolia](https://docsearch.algolia
    });
    ```
 
+</Steps>
+
 Avec cette configuration mise à jour, la barre de recherche de votre site ouvrira désormais une modale Algolia au lieu de celle par défaut.
 
 #### Traduire l'interface utilisateur de DocSearch
 
 DocSearch fournit seulement des chaînes de l'interface utilisateur en anglais par défaut.
 Ajoutez des traductions de l'interface utilisateur de la modale pour votre langue en utilisant le [système d'internationalisation](/fr/guides/i18n/#traduire-linterface-utilisateur-de-starlight) intégré à Starlight.
 
+<Steps>
+
 1. Étendez la définition de la collection de contenus `i18n` de Starlight avec le schéma DocSearch dans `src/content/config.ts` :
 
    ```js ins={4} ins=/{ extend: .+ }/
@@ -162,3 +168,5 @@ Ajoutez des traductions de l'interface utilisateur de la modale pour votre langu
    	"docsearch.noResultsScreen.reportMissingResultsLinkText": "Let us know."
    }
    ```
+
+</Steps>