Skip to content

Commit

Permalink
Merge branch 'main' into updates-101
Browse files Browse the repository at this point in the history
  • Loading branch information
@HiDeoo
HiDeoo authored Mar 21, 2024
2 parents 9b6f52c + 20e69b8 commit 0163651
Show file tree
Hide file tree
Showing 17 changed files with 228 additions and 109 deletions.
12 changes: 10 additions & 2 deletions docs/src/content/docs/es/guides/css-and-tailwind.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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.
Expand Down
19 changes: 17 additions & 2 deletions docs/src/content/docs/es/guides/customization.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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.
Expand All @@ -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>
Expand All @@ -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`:
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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).

Expand Down Expand Up @@ -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).
Expand Down
10 changes: 9 additions & 1 deletion docs/src/content/docs/es/guides/i18n.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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`.
Expand Down Expand Up @@ -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)/
Expand Down Expand Up @@ -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()`.
Expand Down
14 changes: 11 additions & 3 deletions docs/src/content/docs/fr/guides/css-and-tailwind.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 :

Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
19 changes: 17 additions & 2 deletions docs/src/content/docs/fr/guides/customization.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ title: Personnaliser Starlight
description: Apprenez à vous approprier votre site Starlight avec votre logo, polices personnalisées et bien plus encore.
---

import { Tabs, TabItem } from '@astrojs/starlight/components';
import { FileTree } from '@astrojs/starlight/components';
import { Tabs, TabItem, FileTree, Steps } from '@astrojs/starlight/components';

Starlight propose par défaut un style et des fonctionnalités pragmatiques, vous pouvez donc démarrer rapidement sans configuration nécessaire.
Lorsque vous souhaitez commencer à personnaliser l’apparence de votre site Starlight, ce guide vous accompagne.
Expand All @@ -13,6 +12,8 @@ Lorsque vous souhaitez commencer à personnaliser l’apparence de votre site St

L’ajout d’un logo personnalisé à l’en-tête du site est un moyen rapide d’ajouter votre image de marque personnelle à un site Starlight.

<Steps>

1. Ajoutez votre fichier logo au répertoire `src/assets/` :

<FileTree>
Expand Down Expand Up @@ -44,6 +45,8 @@ L’ajout d’un logo personnalisé à l’en-tête du site est un moyen rapide
});
```

</Steps>

Par défaut, le logo sera affiché à côté du nom de votre site (option `title` dans la configuration).
Si l’image de votre logo inclut déjà le titre du site, vous pouvez masquer visuellement le texte du titre en définissant l’option `replacesTitle` à `true`.
Le texte du titre (`title`) le texte sera toujours inclus pour les lecteurs d’écran afin que l’en-tête reste accessible.
Expand All @@ -62,6 +65,8 @@ starlight({

Vous pouvez afficher différentes versions de votre logo en modes clair et sombre.

<Steps>

1. Ajouter un fichier image pour chaque variante dans `src/assets/`:

<FileTree>
Expand All @@ -87,6 +92,8 @@ Vous pouvez afficher différentes versions de votre logo en modes clair et sombr
}),
```

</Steps>

## Activer un plan de site

Starlight possède une prise en charge intégrée pour la génération d’un plan de site. Activez la génération du plan de site en définissant votre URL comme `site` dans `astro.config.mjs`:
Expand Down Expand Up @@ -310,6 +317,8 @@ Pour utiliser Google Fonts, suivez le [Guide de configuration de Fontsource](#co

#### Configurer les polices localement

<Steps>

1. Ajoutez vos fichiers de polices dans un répertoire `src/fonts/` et créez un fichier `font-face.css` vide :

<FileTree>
Expand Down Expand Up @@ -359,11 +368,15 @@ Pour utiliser Google Fonts, suivez le [Guide de configuration de Fontsource](#co
});
```

</Steps>

#### Configurer les polices avec Fontsource

Le projet [Fontsource](https://fontsource.org/) simplifie l’utilisation des polices Google et d’autres polices open source.
Il fournit des modules npm que vous pouvez installer pour les polices que vous souhaitez utiliser et inclut des fichiers CSS prêts à l’emploi à ajouter à votre projet.

<Steps>

1. Trouvez la police que vous souhaitez utiliser dans le [catalogue de Fontsource](https://fontsource.org/).
Cet exemple utilisera [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif).

Expand Down Expand Up @@ -421,6 +434,8 @@ Il fournit des modules npm que vous pouvez installer pour les polices que vous s

Fontsource fournit plusieurs fichiers CSS pour chaque police. Consultez la [documentation Fontsource](https://fontsource.org/docs/getting-started/install#4-weights-and-styles) sur l’inclusion de différentes graisses et styles pour comprendre lesquels utiliser.

</Steps>

### Utiliser vos polices personnalisées

Une fois configurée, pour appliquer votre police personnalisée à votre site, utilisez le nom de la police que vous avez choisie dans un [fichier CSS personnalisé](/fr/guides/css-and-tailwind/#styles-css-personnalisés).
Expand Down
44 changes: 25 additions & 19 deletions ...t/docs/fr/guides/overriding-components.md → .../docs/fr/guides/overriding-components.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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/).

Expand All @@ -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é.
Expand Down Expand Up @@ -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>
```

Expand All @@ -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>
)
}
```

Expand Down
Loading

0 comments on commit 0163651

Please sign in to comment.