From 73a6409577053c9fdc61944d16c03fce130212bd Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Mon, 19 Sep 2022 04:02:58 +0000 Subject: [PATCH 1/9] update astro-pages --- .../es/core-concepts/astro-components.md | 1 + src/pages/es/core-concepts/astro-pages.md | 92 +++++++++++-------- src/pages/es/guides/rss.md | 2 +- .../es/reference/integrations-reference.md | 2 +- 4 files changed, 57 insertions(+), 40 deletions(-) diff --git a/src/pages/es/core-concepts/astro-components.md b/src/pages/es/core-concepts/astro-components.md index 566099320f8a2..2b47c5bd3d9ec 100644 --- a/src/pages/es/core-concepts/astro-components.md +++ b/src/pages/es/core-concepts/astro-components.md @@ -492,6 +492,7 @@ Astro detecta los módulos JavaScript importados del lado del cliente y luego co ``` +## Componentes HTML ## Próximos Pasos diff --git a/src/pages/es/core-concepts/astro-pages.md b/src/pages/es/core-concepts/astro-pages.md index cf702e611809f..32aa9290cea4f 100644 --- a/src/pages/es/core-concepts/astro-pages.md +++ b/src/pages/es/core-concepts/astro-pages.md @@ -5,61 +5,64 @@ description: Introducción a páginas de Astro i18nReady: true --- -Las **páginas** son [componentes de Astro](/es/core-concepts/astro-components/) que se encuentran en la subcarpeta `src/pages/`. Ellas son responsables de manejar el enrutamiento, la carga de datos y el diseño general de cada página HTML de tu proyecto. +Las **páginas** son [componentes de Astro](/es/core-concepts/astro-components/) que se encuentran en la subcarpeta `src/pages/`. Ellas son las responsables de manejar el enrutamiento, la carga de datos y el diseño general de cada página HTML de tu proyecto. -### Enrutamiento basado en archivos +## Tipos de página compatibles -Astro aprovecha una estrategia de enrutamiento llamada **enrutamiento basado en archivos**. Cada archivo `.astro` en la carpeta `src/pages` se convierte en una página o un endpoint en tu proyecto. +Astro es compatible con los siguientes tipos de archivos en el directorio `src/pages/`: -Escriba elementos HTML [``](https://developer.mozilla.org/es/docs/Web/HTML/Element/a) estándar en la plantilla del componente para vincular entre páginas. +- [`.astro`](#páginas-de-astro) +- [`.md`](#páginas-markdownmdx) +- `.mdx` (con la [integración de MDX](/es/guides/integrations-guide/mdx/#installation)) instalada +- [`.js`/`.ts`](#ruta-de-archivos) +- [`.html`](#páginas-html) + + +## Enrutamiento basado en archivos + +Astro aprovecha una estrategia de enrutamiento llamada **enrutamiento basado en archivos**. Cada archivo `.astro` en la carpeta `src/pages` se convierte en una página o un endpoint en tu proyecto deacuerdo a su ruta. + +Escriba elementos HTML [``](https://developer.mozilla.org/es/docs/Web/HTML/Element/a) estándar en el maquetado del componente para vincular entre páginas. 📚 Lea más sobre [enrutamiento en Astro](/es/core-concepts/routing/) -### Páginas HTML +## Páginas de Astro -Las páginas de Astro deben devolver una respuesta completa de la página `...`, incluyendo `` y ``. (`` es opcional y se agregará automáticamente). +Las páginas de Astro utilizan la extensión `.astro` y tienen las mismas funcionalidades que los [componentes de Astro](/es/core-concepts/astro-components/). -```astro +```astro title="src/pages/index.astro" --- -// Ejemplo: src/pages/index.astro --- - + Mi página de inicio -

Bienvenido a mi página web!

+

Bienvenido a mi sitio web

``` -### Aprovechando las plantillas de página - -Para evitar repetir los mismos elementos HTML en cada página, puedes mover los elementos comunes `` y `` a tus propios [componentes plantilla](/es/core-concepts/layouts/). Puedes usar tantos o tan pocos componentes como creas conveniente. +Para evitar repetir los mismos elementos HTML en cada página, puedes mover los elementos comunes `` y `` a sus propios [componentes de plantilla](/es/core-concepts/layouts/). Puedes usar tantos o tan pocos componentes de plantilla como desees. -```astro +```astro title="src/pages/index.astro" {2} // --- -// Example: src/pages/index.astro import MySiteLayout from '../layouts/MySiteLayout.astro'; --- -

El contenido de mi página, envuelto en una plantilla común!

+

El contenido de mi página envuelto en un componente de plantilla

 ``` -📚 Lee más sobre [componentes plantilla](/es/core-concepts/layouts/) en Astro. - -#### Modificando `` +📚 Lea más sobre [componentes de plantilla](/es/core-concepts/layouts/) en Astro. -Ten en cuenta que usar una etiqueta `` funciona como cualquier otra etiqueta de HTML: no es movida al inicio de la página. Recomendamos escribir `` y sus contenidos en la parte superior del layout. +## Páginas Markdown/MDX -## Páginas Markdown +Astro también trata cualquier archivo Markdown (`.md`) dentro de `src/pages/` como páginas en tu sitio web final. Si tienes la [integración de MDX instalada](/es/guides/integrations-guide/mdx/#installation), también procesa los archivos MDX (`.mdx`) de la misma manera. Estos se usan comúnmente para páginas con mucho texto, como artículos de blog y documentación. -Astro también trata cualquier archivo Markdown (`.md`) dentro de `/src/pages/` como páginas en tu proyecto. Estos se usan comúnmente para páginas con mucho texto, como artículos de blog y documentación. +Las plantillas de página son especialmente útiles para [archivos Markdown](#páginas-markdownmdx). Los archivos Markdown pueden usar la propiedad de frontmatter `layout` para especificar un [componente de plantilla](/es/core-concepts/layouts/) que envolverá el contenido de Markdown en un documento de página `...`. -Los componentes plantilla son especialmente útiles para [archivos Markdown](#páginas-markdown). Los archivos Markdown pueden usar la propiedad especial `layout` para especificar un [componente plantilla](/es/core-concepts/layouts/) que envolverá el contenido Markdown en un documento completo `...`. - -```md +```md {3} --- # Example: src/pages/page.md layout: '../layouts/MySiteLayout.astro' @@ -72,22 +75,16 @@ Esta es mi página, escrita en **Markdown.** 📚 Lea más sobre [Markdown](/es/guides/markdown-content/) en Astro. +## Ruta de archivos -## Páginas no HTML - -Las páginas que no son HTML, como `.json` o `.xml`, o incluso activos como imágenes, pueden ser creados utilizando rutas API comúnmente conocidas como **rutas de archivo**. - -Las **rutas de archivo** son scripts que terminan con la extensión `.js` o `.ts` y se encuentran dentro de la carpeta `src/pages/`. +**Las rutas de archivo** son archivos script que terminan con la extensión `.js` o `.ts` y se encuentran dentro de la carpeta `src/pages/`. Estos pueden crear páginas que no sean HTML, como .json o .xml, o incluso activos como imágenes. -Los nombres de los archivos y las extensiones creadas se basan en el nombre del archivo, por ejemplo: `src/pages/data.json.ts` creará la ruta `/data.json` en la compilación final. +La extensión `.js` o `.ts` se eliminará durante el proceso de compilación. Por ejemplo, `src/pages/data.json.ts` se creará para que coincida con la ruta `/data.json`. -En SSR (server-side rendering), la extensión no importa y se puede omitir. Esto se debe a que no se generan archivos en el momento de la compilación. En su lugar, Astro genera un único archivo en el servidor. - -```js -// Ejemplo: src/pages/builtwith.json.ts +```js title="src/pages/builtwith.json.ts" // Resultado: /builtwith.json -// Las rutas de archivo exportan una función get(), que se llama para generar el archivo. +// Las rutas de archivo exportan una función get(), que se llama al generar el archivo. // Devuelve un objeto con `body` para guardar el contenido del archivo en la compilación final. export async function get() { return { @@ -99,7 +96,7 @@ export async function get() { } ``` -Las rutas API reciben un objeto `APIContext` que contiene [params](/es/reference/api-reference/#params) y [request](https://developer.mozilla.org/en-US/docs/Web/API/Request): +Como las rutas API, las rutas de archivos reciben un objeto `APIContext` que contiene [params](/es/reference/api-reference/#params) y [request](https://developer.mozilla.org/en-US/docs/Web/API/Request): ```ts title="src/pages/request-path.json.ts" import type { APIContext } from 'astro'; @@ -113,7 +110,7 @@ export async function get({ params, request }: APIContext) { } ``` -También puedes escribir funciones de rutas API usando el tipo `APIRoute`. Esto te dará mejores mensajes de error cuando la ruta API devuelva el tipo incorrecto: +También puedes escribir rutas API usando el tipo `APIRoute`. Esto te dará mejores mensajes de error cuando la ruta API devuelva el tipo incorrecto: ```ts title="src/pages/request-path.json.ts" import type { APIRoute } from 'astro'; @@ -127,6 +124,25 @@ export const get: APIRoute = ({ params, request }) => { }; ``` +Opcionalmente, puedes devolver una opción de codificación `encoding` en compilaciones estáticas. Este puede ser cualquier [`BufferEncoding`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/bdd02508ddb5eebcf701fdb8ffd6e84eabf47885/types/node/buffer.d.ts#L169) válido aceptado por node `fs.writeFile`. Por ejemplo, para producir una imagen png binaria usando SSG: + +```ts title="src/pages/image.png.ts" {7} +import type { APIRoute } from 'astro'; + +export const get: APIRoute = ({ params, request }) => { + const buffer = ...; + return { + body: buffer.toString('binary'), + encoding: 'binary', + }; +}; + +``` + +## Páginas HTML + +Los archivos `.html` pueden ser colocados en `src/pages/` y usados directamente como páginas en tu proyecto. Ten en cuenta que algunas funcionalidades clave de Astro no son compatibles con [Componentes HTML](/es/core-concepts/astro-components/#componentes-html). + ## Página de error 404 personalizada Para crear una página de error 404 personalizada, puedes crear un archivo `404.astro` o `404.md` en `/src/pages`. diff --git a/src/pages/es/guides/rss.md b/src/pages/es/guides/rss.md index e76739c999b46..ead5b5ffe6135 100644 --- a/src/pages/es/guides/rss.md +++ b/src/pages/es/guides/rss.md @@ -10,7 +10,7 @@ Astro proporciona una generación rápida y automática de RSS feeds para blogs ## Configurando `@astrojs/rss` -El paquete `@astrojs/rss` provee helper functions para generar RSS feeds utilizando [API endpoints](/es/core-concepts/astro-pages/#páginas-no-html). Esto desbloquea la generación de RSS feeds para builds estáticos _y_ on-demand para cuando utilizamos un [adaptador SSR](/es/guides/server-side-rendering/#habilitando-ssr-en-su-proyecto). +El paquete `@astrojs/rss` provee helper functions para generar RSS feeds utilizando [API endpoints](/es/core-concepts/astro-pages/#ruta-de-archivos). Esto desbloquea la generación de RSS feeds para builds estáticos _y_ on-demand para cuando utilizamos un [adaptador SSR](/es/guides/server-side-rendering/#habilitando-ssr-en-su-proyecto). Primero, instala `@astrojs/rss` utilizando tu gestor de paquetes favorito: diff --git a/src/pages/es/reference/integrations-reference.md b/src/pages/es/reference/integrations-reference.md index 748d694c0d467..a015ebf31ae5a 100644 --- a/src/pages/es/reference/integrations-reference.md +++ b/src/pages/es/reference/integrations-reference.md @@ -119,7 +119,7 @@ Una función callback para agregar un renderizador de framework (como React, Vue **Tipo:** `({ pattern: string, entryPoint: string }) => void;` -Una función callback para inyectar rutas a un proyecto de Astro. Las rutas inyectadas pueden ser [páginas `.astro`](/es/core-concepts/astro-pages/) o [handlers de ruta `.js` y `.ts`](/es/core-concepts/astro-pages/#páginas-no-html). +Una función callback para inyectar rutas a un proyecto de Astro. Las rutas inyectadas pueden ser [páginas `.astro`](/es/core-concepts/astro-pages/) o [handlers de ruta `.js` y `.ts`](/es/core-concepts/astro-pages/#ruta-de-archivos). `injectRoute` toma un objeto con un `pattern` y un `entryPoint`. From 58809fe271c56a1ac69329798a11934b9fe47097 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Mon, 19 Sep 2022 15:36:22 +0000 Subject: [PATCH 2/9] update integrations-reference --- src/pages/es/reference/integrations-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/es/reference/integrations-reference.md b/src/pages/es/reference/integrations-reference.md index a015ebf31ae5a..c5206b9acd019 100644 --- a/src/pages/es/reference/integrations-reference.md +++ b/src/pages/es/reference/integrations-reference.md @@ -157,7 +157,7 @@ El **`stage`** indica cómo debe insertarse este script (el `content`). Algunas **Hook anterior:** [`astro:config:setup`](#astroconfigsetup) -**Siguiente hook:** [`astro:server:setup`](#astroserversetup) cuando se ejecuta en modo "dev" o "vista previa", y [astro:build:start](#astrobuildstart) durante las compilaciones de producción +**Siguiente hook:** [`astro:server:setup`](#astroserversetup) cuando se ejecuta en modo "dev" o "vista previa", y [`astro:build:start`](#astrobuildstart) durante las compilaciones de producción **Cuándo:** Después que la configuración de Astro se haya resuelto y otras integraciones hayan ejecutado sus hooks `astro:config:setup`. From ae6a91078bc318c0e4b7e010f7f78a1e4413638c Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Mon, 19 Sep 2022 15:49:32 +0000 Subject: [PATCH 3/9] update framework-components --- src/pages/es/core-concepts/framework-components.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/es/core-concepts/framework-components.md b/src/pages/es/core-concepts/framework-components.md index 4388c038df5d0..4eab1b77a7948 100644 --- a/src/pages/es/core-concepts/framework-components.md +++ b/src/pages/es/core-concepts/framework-components.md @@ -86,6 +86,10 @@ el usuario se desplace hacia abajo y el componente sea visible en la página --> Cualquier renderizador de JavaScript necesario para renderizar el componente de framework (por ejemplo, React, Svelte) se descargará con la página. Las directivas `client:*` solo dictan cuándo se importa el _componente de JavaScript_ y cuándo se hidrata el _componente_. ::: +:::note[Accesibilidad] +La mayoría de los patrones de accesibilidad específicos de cada framework deberían funcionar cuando estos componentes se usan en Astro. ¡Asegúrate de elegir una directiva de cliente que asegure que cualquier JavaScript relacionado con la accesibilidad se cargue y ejecute correctamente en el momento adecuado! +::: + ### Directivas de hidratación disponibles Hay varias directivas de hidratación disponibles para los componentes de framework: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` y `client:only={FRAMEWORK}`. From ed84725bb15f28d8c8afbc5bc40d63df7bfb243a Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Mon, 19 Sep 2022 16:00:04 +0000 Subject: [PATCH 4/9] update layouts --- src/pages/es/core-concepts/layouts.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/es/core-concepts/layouts.md b/src/pages/es/core-concepts/layouts.md index 15e0cd7d7588c..56d91b4acd4b6 100644 --- a/src/pages/es/core-concepts/layouts.md +++ b/src/pages/es/core-concepts/layouts.md @@ -20,7 +20,7 @@ Los componentes de plantilla se colocan comúnmente en la carpeta `src/layouts` ```astro --- --- - + Mi website de Astro @@ -75,7 +75,7 @@ Cuando un archivo de Markdown incluye una plantilla, se le pasa una propiedad `f --- const {frontmatter} = Astro.props; --- - +

{frontmatter.title}

Autor del artículo: {frontmatter.author}

From eed060ceefd83f5526205e10697d0de84b1e3351 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Mon, 19 Sep 2022 16:08:28 +0000 Subject: [PATCH 5/9] update configuring astro --- src/pages/es/guides/configuring-astro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/es/guides/configuring-astro.md b/src/pages/es/guides/configuring-astro.md index 4781331853a82..0ea63d0364e54 100644 --- a/src/pages/es/guides/configuring-astro.md +++ b/src/pages/es/guides/configuring-astro.md @@ -31,7 +31,7 @@ export default {} ## Tipos de archivo de configuración compatibles -Astro es compatible con varios formatos para el archivo de configuración de JavaScript como: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` y `astro.config.ts`. +Astro es compatible con varios formatos para el archivo de configuración de JavaScript como: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` y `astro.config.ts`. Recomendamos usar `.mjs` en la mayoría de los casos o `.ts` si deseas escribir TypeScript en el archivo de configuración. La carga del archivo de configuración de TypeScript se maneja usando [`tsm`](https://github.com/lukeed/tsm) el cual respetará las opciones de tsconfig de su proyecto. From eeb8b3756b8b14705c817ce935685e6695c8c2f1 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Tue, 20 Sep 2022 23:32:48 +0000 Subject: [PATCH 6/9] update configuring astro --- src/pages/es/guides/configuring-astro.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/pages/es/guides/configuring-astro.md b/src/pages/es/guides/configuring-astro.md index 0ea63d0364e54..f754214a75eec 100644 --- a/src/pages/es/guides/configuring-astro.md +++ b/src/pages/es/guides/configuring-astro.md @@ -6,7 +6,7 @@ i18nReady: true Personalice cómo funciona Astro agregando un archivo `astro.config.mjs` en tu proyecto. Este es un archivo común en todos los proyectos de Astro; todos los ejemplos oficiales, sean plantillas o temas, cuentan con uno de forma predeterminada. -📚 Lee la [referencia de configuración](/es/reference/configuration-reference/) de Astro para obtener una descripción general y completa de todas las opciones de configuración. +📚 Lea la [referencia de configuración](/es/reference/configuration-reference/) de Astro para obtener una descripción general y completa de todas las opciones de configuración. ## Archivo de configuración de Astro @@ -31,7 +31,7 @@ export default {} ## Tipos de archivo de configuración compatibles -Astro es compatible con varios formatos para el archivo de configuración de JavaScript como: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` y `astro.config.ts`. Recomendamos usar `.mjs` en la mayoría de los casos o `.ts` si deseas escribir TypeScript en el archivo de configuración. +Astro es compatible con varios formatos de JavaScript para el archivo de configuración como: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` y `astro.config.ts`. Recomendamos usar `.mjs` en la mayoría de los casos o `.ts` si deseas escribir TypeScript en el archivo de configuración. La carga del archivo de configuración de TypeScript se maneja usando [`tsm`](https://github.com/lukeed/tsm) el cual respetará las opciones de tsconfig de su proyecto. @@ -53,7 +53,7 @@ astro build --config my-config-file.js ## Configurar Intellisense -Astro recomienda usar `defineConfig()` en tu archivo de configuración. `defineConfig()` proporciona IntelliSense automático para tu IDE. Los editores como VSCode pueden leer las definiciones de tipo TypeScript de Astro y proporcionar sugerencias de tipo jsdoc automáticas, incluso si tu archivo de configuración no está escrito en TypeScript. +Astro recomienda usar `defineConfig()` en el archivo de configuración. `defineConfig()` proporciona IntelliSense automático para tu IDE. Los editores como VSCode pueden leer las definiciones de tipo TypeScript y proporcionar sugerencias de tipos jsdoc automáticas, incluso si tu archivo de configuración no está escrito en TypeScript. ```js // astro.config.mjs @@ -119,7 +119,7 @@ export default defineConfig({ ## Personalización de nombres de archivos compilados -Para el código que procesa Astro, como archivos JavaScript o CSS importados, puedes personalizar los nombres de los archivos compilados usando [`entryFileNames`](https://rollupjs.org/guide/en/#outputentryfilenames), [`chunkFileNames`](https:/ /rollupjs.org/guide/en/#outputchunkfilenames) y [`assetFileNames`](https://rollupjs.org/guide/en/#outputassetfilenames) usando la configuración `vite.build.rollupOptions` en tu archivo `astro.config.*`. +Para el código procesado por Astro, como archivos JavaScript o CSS importados, puedes personalizar los nombres de los archivos compilados usando [`entryFileNames`](https://rollupjs.org/guide/en/#outputentryfilenames), [`chunkFileNames`](https:/ /rollupjs.org/guide/en/#outputchunkfilenames) y [`assetFileNames`](https://rollupjs.org/guide/en/#outputassetfilenames) usando la configuración `vite.build.rollupOptions` en tu archivo `astro.config.*`. ```js ins={9-11} // astro.config.mjs @@ -142,6 +142,11 @@ export default defineConfig({ Esto puede ser útil si tienes scripts con nombres que podrían verse afectados por los bloqueadores de anuncios (por ejemplo, `ads.js` o `google-tag-manager.js`). +## Environment Variables + +Astro evalúa los archivos de configuración antes de cargar los demás archivos. Como tal, no puedes usar `import.meta.env` ni acceder a las variables de entorno que se establecieron en los archivos `.env`. +Puedes usar `process.env` en un archivo de configuración para acceder a otras variables de entorno, como las [establecidas por la CLI](/es/guides/environment-variables/#using-the-cli). + ## Referencia de configuración 📚 Lee la [referencia de configuración](/es/reference/configuration-reference/) de Astro para obtener una descripción general y completa de todas las opciones de configuración. From 013f1866012343bf8358af8ee1a2c8162d47146e Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Tue, 20 Sep 2022 23:33:02 +0000 Subject: [PATCH 7/9] fix title --- src/pages/es/guides/configuring-astro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/es/guides/configuring-astro.md b/src/pages/es/guides/configuring-astro.md index f754214a75eec..57fdb0e270b70 100644 --- a/src/pages/es/guides/configuring-astro.md +++ b/src/pages/es/guides/configuring-astro.md @@ -142,7 +142,7 @@ export default defineConfig({ Esto puede ser útil si tienes scripts con nombres que podrían verse afectados por los bloqueadores de anuncios (por ejemplo, `ads.js` o `google-tag-manager.js`). -## Environment Variables +## Variables de entorno Astro evalúa los archivos de configuración antes de cargar los demás archivos. Como tal, no puedes usar `import.meta.env` ni acceder a las variables de entorno que se establecieron en los archivos `.env`. Puedes usar `process.env` en un archivo de configuración para acceder a otras variables de entorno, como las [establecidas por la CLI](/es/guides/environment-variables/#using-the-cli). From 9acc8f666c2f004a9b72bc555b682797d0405fa2 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com> Date: Tue, 20 Sep 2022 19:33:41 -0400 Subject: [PATCH 8/9] Apply suggestions from code review --- src/pages/es/core-concepts/astro-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/es/core-concepts/astro-pages.md b/src/pages/es/core-concepts/astro-pages.md index 32aa9290cea4f..e830f21fb3ce5 100644 --- a/src/pages/es/core-concepts/astro-pages.md +++ b/src/pages/es/core-concepts/astro-pages.md @@ -58,7 +58,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro'; ## Páginas Markdown/MDX -Astro también trata cualquier archivo Markdown (`.md`) dentro de `src/pages/` como páginas en tu sitio web final. Si tienes la [integración de MDX instalada](/es/guides/integrations-guide/mdx/#installation), también procesa los archivos MDX (`.mdx`) de la misma manera. Estos se usan comúnmente para páginas con mucho texto, como artículos de blog y documentación. +Astro trata archivos Markdown (`.md`) dentro de `src/pages/` como páginas en tu proyecto. Si tienes la [integración de MDX instalada](/es/guides/integrations-guide/mdx/#installation), también procesa los archivos MDX (`.mdx`) de la misma manera. Estos se usan comúnmente para páginas con mucho texto, como artículos de blog y documentación. Las plantillas de página son especialmente útiles para [archivos Markdown](#páginas-markdownmdx). Los archivos Markdown pueden usar la propiedad de frontmatter `layout` para especificar un [componente de plantilla](/es/core-concepts/layouts/) que envolverá el contenido de Markdown en un documento de página `...`. From d5f742209fe1500ea7144b7d4b3eecd07747b1e8 Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar Date: Wed, 21 Sep 2022 00:29:01 +0000 Subject: [PATCH 9/9] update environment variables --- src/pages/es/guides/configuring-astro.md | 2 +- src/pages/es/guides/environment-variables.md | 67 +++++++++++++------- 2 files changed, 45 insertions(+), 24 deletions(-) diff --git a/src/pages/es/guides/configuring-astro.md b/src/pages/es/guides/configuring-astro.md index 57fdb0e270b70..56aac4928ea89 100644 --- a/src/pages/es/guides/configuring-astro.md +++ b/src/pages/es/guides/configuring-astro.md @@ -145,7 +145,7 @@ Esto puede ser útil si tienes scripts con nombres que podrían verse afectados ## Variables de entorno Astro evalúa los archivos de configuración antes de cargar los demás archivos. Como tal, no puedes usar `import.meta.env` ni acceder a las variables de entorno que se establecieron en los archivos `.env`. -Puedes usar `process.env` en un archivo de configuración para acceder a otras variables de entorno, como las [establecidas por la CLI](/es/guides/environment-variables/#using-the-cli). +Puedes usar `process.env` en un archivo de configuración para acceder a otras variables de entorno, como las [establecidas por la CLI](/es/guides/environment-variables/#usando-la-cli). ## Referencia de configuración diff --git a/src/pages/es/guides/environment-variables.md b/src/pages/es/guides/environment-variables.md index cd0a960123022..a8fb312eaa7bd 100644 --- a/src/pages/es/guides/environment-variables.md +++ b/src/pages/es/guides/environment-variables.md @@ -2,15 +2,14 @@ layout: ~/layouts/MainLayout.astro title: Usando variables de entorno description: Aprende a usar variables de entorno en un proyecto de Astro. +setup: import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' i18nReady: true --- -Astro usa Vite para las variables de entorno y te permite [usar cualquiera de sus métodos](https://vitejs.dev/guide/env-and-mode.html) para obtener y establecer variables de entorno. +Astro usa Vite para el manejo de las variables de entorno el cual te permite [usar cualquiera de sus métodos](https://vitejs.dev/guide/env-and-mode.html). Ten en cuenta que _todas_ las variables de entorno estarán disponibles en el servidor, mientras que solo las variables de entorno con el prefijo `PUBLIC_` estarán disponibles en el cliente por motivos de seguridad. -Consulta el [ejemplo de variables de entorno](https://github.com/withastro/astro/tree/main/examples/env-vars) oficial para aprender las prácticas recomendadas. - ```ini title=".env" SECRET_PASSWORD=password123 PUBLIC_ANYBODY=there @@ -18,23 +17,29 @@ PUBLIC_ANYBODY=there En este ejemplo, `PUBLIC_ANYBODY` (accesible mediante `import.meta.env.PUBLIC_ANYBODY`) estará disponible tanto en el servidor como el cliente, mientras que `SECRET_PASSWORD` (accesible mediante `import.meta.env.SECRET_PASSWORD`) estará disponible solo en el servidor. +:::caution +Los archivos `import.meta.env` y `.env` no están disponibles dentro de [archivos de configuración](/es/guides/configuring-astro/#variables-de-entorno). +::: + ## Variables de entorno predeterminadas -Astro incluye algunas variables de entorno predeterminadas: +Astro incluye algunas variables de entorno por defecto: -- `import.meta.env.MODE` (`development` | `production`): el modo en el que se ejecuta tu proyecto. Esto es `development` al ejecutar `astro dev` y `production` al ejecutar `astro build`. -- `import.meta.env.BASE_URL` (`string`): la URL base desde la que se sirve tu proyecto. Esto está determinado por la opción de configuración [`base`](/es/reference/configuration-reference/#base). -- `import.meta.env.PROD` (`boolean`): es verdadero si tu proyecto se está ejecutando en modo producción. -- `import.meta.env.DEV` (`boolean`): es verdadero si tu proyecto se está ejecutando en modo desarrollo (siempre lo contrario a `import.meta.env.PROD`). -- `import.meta.env.SITE` (`string`): [la opción de configuración `site`](/es/reference/configuration-reference/#site) especificada en el archivo `astro.config` de tu proyecto. +- `import.meta.env.MODE`: El modo en el que se ejecuta tu proyecto. Esto es `development` al ejecutar `astro dev` y `production` al ejecutar `astro build`. +- `import.meta.env.PROD`: `true` si tu proyecto se está ejecutando en producción; `false` en caso contrario. +- `import.meta.env.DEV`: `true` si tu proyecto se está ejecutando en desarrollo; `false` en caso contrario. Siempre lo contrario de `import.meta.env.PROD`. +- `import.meta.env.BASE_URL`: La URL base desde la que se sirve tu proyecto. Esto está determinado por la opción de configuración [`base`](/es/reference/configuration-reference/#base). +- `import.meta.env.SITE`: Esto se establece en la opción [`SITE`](/es/reference/configuration-reference/#site) especificada en `astro.config` de tu proyecto. ## Configurando variables de entorno -Las variables de entorno se pueden cargar desde los archivos `.env` en la carpeta raíz de su proyecto. +### Archivos `.env` + +Las variables de entorno se pueden cargar desde los archivos `.env` en la raíz de tu proyecto. También puedes adjuntar un modo (ya sea `production` o `development`) al nombre del archivo, como `.env.production` o `.env.development`, lo que hace que las variables de entorno solo tengan efecto en ese modo. -Simplemente crea un archivo `.env` en la carpeta raíz de su proyecto y agrega algunas variables. +Simplemente crea un archivo `.env` en la raíz de tu proyecto y agrega algunas variables. ```ini title=".env" # ¡Esto solo estará disponible cuando se ejecute en el servidor! @@ -43,22 +48,38 @@ DB_PASSWORD="foobar" PUBLIC_POKEAPI="https://pokeapi.co/api/v2" ``` -```yaml -# Nombres de archivo admitidos: -.env # cargado en todos los casos -.env.local # cargado en todos los casos, ignorado por git -.env.[mode] # solo se carga en el modo especificado -.env.[mode].local # solo se carga en el modo especificado, ignorado por git -``` +Para obtener más información sobre los archivos `.env`, consulte la [documentación de Vite](https://vitejs.dev/guide/env-and-mode.html#env-files). + +### Usando la CLI + +También puedes agregar variables de entorno a medida que ejecuta su proyecto: + + + + ```shell + POKEAPI=https://pokeapi.co/api/v2 yarn run dev + ``` + + + ```shell + POKEAPI=https://pokeapi.co/api/v2 npm run dev + ``` + + + ```shell + POKEAPI=https://pokeapi.co/api/v2 pnpm run dev + ``` + + + +:::caution +Las variables configuradas de esta manera estarán disponibles detro de todo tu proyecto, incluso en el cliente. +::: ## Obteniendo variables de entorno En lugar de usar `process.env`, Vite usa `import.meta.env`, que usa la función `import.meta` agregada en ES2020. -:::tip[¡No te preocupes por la compatibilidad con el navegador!] -Vite reemplazará todas las menciones de `import.meta.env` con valores estáticos. -::: - Por ejemplo, usa `import.meta.env.PUBLIC_POKEAPI` para obtener la variable de entorno `PUBLIC_POKEAPI`. ```js /(?