From efc50d5b531084602486b3febd4ccdc41c491fa1 Mon Sep 17 00:00:00 2001 From: Paul Valladares Date: Thu, 10 Aug 2023 15:25:03 -0600 Subject: i18n(es): Updated `customization.mdx` & translated `css-and-tailwind.mdx` (#484) Co-authored-by: Chris Swithinbank --- .../content/docs/es/guides/css-and-tailwind.mdx | 291 +++++++++++++++++++++ docs/src/content/docs/es/guides/customization.mdx | 40 +-- 2 files changed, 293 insertions(+), 38 deletions(-) create mode 100644 docs/src/content/docs/es/guides/css-and-tailwind.mdx diff --git a/docs/src/content/docs/es/guides/css-and-tailwind.mdx b/docs/src/content/docs/es/guides/css-and-tailwind.mdx new file mode 100644 index 00000000..d601836f --- /dev/null +++ b/docs/src/content/docs/es/guides/css-and-tailwind.mdx @@ -0,0 +1,291 @@ +--- +title: CSS y Estilos +description: Aprende a darle estilo a tu sitio Starlight con CSS personalizado o integrado con Tailwind CSS. +--- + +Puedes darle estilo a tu sitio 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. + +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: + + ```css + /* src/styles/custom.css */ + :root { + --sl-content-width: 50rem; + --sl-text-5xl: 3.5rem; + } + ``` + +2. Agrega la ruta de tu archivo CSS a la matriz `customCss` de Starlight en `astro.config.mjs`: + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Docs With Custom CSS', + customCss: [ + // Ruta relativa a tu archivo CSS personalizado + './src/styles/custom.css', + ], + }), + ], + }); + ``` + +Puede ver todas las propiedades CSS personalizadas utilizadas por Starlight que puede establecer para personalizar su sitio en el archivo [`props.css` en GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css). + +## Tailwind CSS + +El soporte de CSS de Tailwind en proyectos de Astro es proporcionado por la [integración Astro Tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/). +Starlight proporciona un complemento de Tailwind para ayudar a configurar Tailwind para que sea compatible con los estilos de Starlight. + +El plugin Starlight Tailwind aplica la siguiente configuración: + +- Configura las variantes de Tailwind `dark:` para que funcionen con el modo oscuro de Starlight. +- Usa los [colores y fuentes del tema](#estilando-starlight-con-tailwind) de Tailwind en la UI de Starlight. +- Desactiva la [comprobación preliminar “Preflight”](https://tailwindcss.com/docs/preflight) de Tailwind mientras restaura selectivamente las partes esenciales de la comprobación preliminar requeridas para las clases de utilidad de borde de Tailwind. + +### Crea un nuevo proyecto con Tailwind + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Empieza un nuevo proyecto Starlight con Tailwind CSS preconfigurado usando `create astro`: + + + + +```sh +npm create astro@latest -- --template starlight/tailwind +``` + + + + +```sh +pnpm create astro --template starlight/tailwind +``` + + + + +```sh +yarn create astro --template starlight/tailwind +``` + + + + +### Agrega Tailwind a un proyecto existente + +Si ya tienes un sitio Starlight y quieres agregar Tailwind CSS, sigue estos pasos. + +1. Agrega la integración de Tailwind de Astro: + + + + + + ```sh + npx astro add tailwind + ``` + + + + + + ```sh + pnpm astro add tailwind + ``` + + + + + + ```sh + yarn astro add tailwind + ``` + + + + + +2. Instala el complemento Starlight Tailwind: + + + + + + ```sh + npm install @astrojs/starlight-tailwind + ``` + + + + + + ```sh + pnpm install @astrojs/starlight-tailwind + ``` + + + + + + ```sh + yarn add @astrojs/starlight-tailwind + ``` + + + + + +3. Crea un archivo CSS para los estilos base de Tailwind, por ejemplo en `src/tailwind.css`: + + ```css + /* src/tailwind.css */ + @tailwind base; + @tailwind components; + @tailwind utilities; + ``` + +4. Actualiza tu archivo de configuración de Astro para usar tus estilos base de Tailwind y desactivar los estilos base predeterminados: + + ```js {11-12,16-17} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + import tailwind from '@astrojs/tailwind'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Documentación con Tailwind', + customCss: [ + // Ruta a tus estilos base de Tailwind: + './src/tailwind.css', + ], + }), + tailwind({ + // Desactiva los estilos base predeterminados: + applyBaseStyles: false, + }), + ], + }); + ``` + +5. Agrega el complemento Starlight Tailwind a `tailwind.config.cjs`: + + ```js ins={2,7} + // tailwind.config.cjs + const starlightPlugin = require('@astrojs/starlight-tailwind'); + + /** @type {import('tailwindcss').Config} */ + module.exports = { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + plugins: [starlightPlugin()], + }; + ``` + +### Estilando Starlight con Tailwind + +Starlight utilizará los valores de su [configuración de tema Tailwind](https://tailwindcss.com/docs/theme) en su UI. + +Si se establece, las siguientes opciones anularán los estilos predeterminados de Starlight: + +- `colors.accent` - usada para enlaces y resaltado de elementos actuales +- `colors.gray` - usada para colores de fondo y bordes +- `fontFamily.sans` - usada para el texto de la UI y el contenido +- `fontFamily.mono` - usada para ejemplos de código + +```js {12,14,18,20} +// tailwind.config.cjs +const starlightPlugin = require('@astrojs/starlight-tailwind'); +const colors = require('tailwindcss/colors'); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + colors: { + // Tu color de acento preferido. Indigo es el más cercano a los valores predeterminados de Starlight. + accent: colors.indigo, + // Tu escala de grises preferida. Zinc es el más cercano a los valores predeterminados de Starlight. + gray: colors.zinc, + }, + fontFamily: { + // Tu fuente de texto preferida. Starlight usa una pila de fuentes del sistema de forma predeterminada. + sans: ['"Atkinson Hyperlegible"'], + // Tu fuente de código preferida. Starlight usa fuentes monoespaciadas del sistema de forma predeterminada. + mono: ['"IBM Plex Mono"'], + }, + }, + }, + plugins: [starlightPlugin()], +}; +``` + +## Temas + +El tema de color de Starlight se puede controlar anulando sus propiedades personalizadas predeterminadas. +Estas variables son utilizadas en toda la UI con una gama de tonos grises utilizados para los colores de texto y fondo y un color de acento utilizado para los enlaces y para resaltar los elementos actuales en la navegación. + +### Editor de temas de color + +Usa los controles deslizantes a continuación para modificar las paletas de colores de acento y gris de Starlight. +Las áreas de vista previa oscura y clara mostrarán los colores resultantes, y toda la página también se actualizará para obtener una vista previa de sus cambios. + +Cuando estés satisfecho con tus cambios, copia el código CSS o Tailwind a continuación y úsalo en tu proyecto. + +import ThemeDesigner from '../../../../components/theme-designer.astro'; + + + + Agrega el siguiente CSS a tu proyecto en un [archivo CSS + personalizado](#estilos-css-personalizados) para aplicar este tema a tu + sitio. + + + El ejemplo de [archivo de configuración de + Tailwind](#estilando-starlight-con-tailwind) a continuación incluye paletas + de colores `accent` y `gray` generadas para usar en el objeto de + configuración `theme.extend.colors`. + + diff --git a/docs/src/content/docs/es/guides/customization.mdx b/docs/src/content/docs/es/guides/customization.mdx index 6997fa4e..9fe5fea2 100644 --- a/docs/src/content/docs/es/guides/customization.mdx +++ b/docs/src/content/docs/es/guides/customization.mdx @@ -256,42 +256,6 @@ hero: --- ``` -## Estilos CSS personalizados - -Personaliza los estilos aplicados a tu sitio de Starlight proporcionando archivos CSS adicionales para modificar o extender los estilos predeterminados de Starlight. - -1. Agrega un archivo CSS al directorio `src/`. - Por ejemplo, podrías anular el tono de acento azul predeterminado de Starlight y establecerlo en púrpura: - - ```css - /* src/styles/custom.css */ - :root { - --sl-hue-accent: 270; - } - ``` - -2. Agrega la ruta de tu archivo CSS al array `customCss` de Starlight en el archivo `astro.config.mjs`: - - ```js - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import starlight from '@astrojs/starlight'; - - export default defineConfig({ - integrations: [ - starlight({ - title: 'Docs Con Un CSS Personalizado', - customCss: [ - // Ruta relativa hacia tu archivo CSS personalizado - './src/styles/custom.css', - ], - }), - ], - }); - ``` - -Puedes ver todas las propiedades CSS personalizadas utilizadas por Starlight que puedes configurar para personalizar tu sitio en el archivo [`props.css` en GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css). - ## Fuentes personalizadas De forma predeterminada, Starlight utiliza fuentes sans-serif disponibles en el dispositivo local del usuario para todo el texto. @@ -419,7 +383,7 @@ Proporciona módulos npm que puedes instalar para las fuentes que deseas utiliza ### Usar fuentes -Para aplicar la fuente que configuraste a tu sitio, utiliza el nombre de la fuente elegida en un archivo CSS personalizado. +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/#custom-css-styles). Por ejemplo, para anular la fuente predeterminada de Starlight en todas partes, establece la propiedad personalizada `--sl-font`: ```css @@ -441,4 +405,4 @@ main { } ``` -Sigue las [instrucciones de CSS personalizado](#estilos-css-personalizados) para agregar tus estilos a tu sitio. +Sigue las [instrucciones de CSS personalizado](/guides/css-and-tailwind/#estilos-css-personalizados) para agregar tus estilos a tu sitio. -- cgit