Skip to content

Commit

Permalink
i18n(es): update multiple pages (#1585)
Browse files Browse the repository at this point in the history 
* update astro-pages

* update integrations-reference

* update framework-components

* update layouts

* update configuring astro

* update configuring astro

* fix title

* Apply suggestions from code review

* update environment variables
  • Loading branch information
@kevinzunigacuellar
kevinzunigacuellar authored Sep 21, 2022
1 parent 6ec8978 commit 5bc8c82
Show file tree
Hide file tree
Showing 8 changed files with 117 additions and 70 deletions.
1 change: 1 addition & 0 deletions src/pages/es/core-concepts/astro-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,7 @@ Los componentes HTML solo deben contener HTML válido, y por lo tanto le faltar
- Ellos no soportan el frontmatter, importaciones del lado del servidor, o expresiones dinámicas.
- Cualquier etiqueta `<script>` quedan sin agrupar, son tratados como si tuvieran `in:inline`
- Ellos solo pueden referenciar recursos que están en la carpeta [`public/`](/es/guides/images/#public).

:::note
Un [elemento `<slot/>`](/es/core-concepts/astro-components/#slots) dentro de un componente HTML trabajar como lo haría en un componente de Astro. En cambio, para poder usar el elemento [Componente Web HTML Slot](https://developer.mozilla.org/es/docs/Web/HTML/Element/slot) añade `is:inline` al elemento `slot`.
:::
Expand Down
92 changes: 54 additions & 38 deletions src/pages/es/core-concepts/astro-pages.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 [`<a>`](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 [`<a>`](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 `<html>...</html>`, incluyendo `<head>` y `<body>`. (`<!doctype html>` 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
---
<html>
<html lang="es">
<head>
<title>Mi página de inicio</title>
</head>
<body>
<h1>Bienvenido a mi página web!</h1>
<h1>Bienvenido a mi sitio web</h1>
</body>
</html>
```

### Aprovechando las plantillas de página

Para evitar repetir los mismos elementos HTML en cada página, puedes mover los elementos comunes `<head>` y `<body>` 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 `<head>` y `<body>` 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} /</?MySiteLayout>/
---
// Example: src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
<p>El contenido de mi página, envuelto en una plantilla común!</p>
<p>El contenido de mi página envuelto en un componente de plantilla</p>
</MySiteLayout>
```

📚 Lee más sobre [componentes plantilla](/es/core-concepts/layouts/) en Astro.

#### Modificando `<head>`
📚 Lea más sobre [componentes de plantilla](/es/core-concepts/layouts/) en Astro.

Ten en cuenta que usar una etiqueta `<head>` funciona como cualquier otra etiqueta de HTML: no es movida al inicio de la página. Recomendamos escribir `<head>` y sus contenidos en la parte superior del layout.
## Páginas Markdown/MDX

## Páginas Markdown
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.

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 `<html>...</html>`.

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 `<html>...</html>`.

```md
```md {3}
---
# Example: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
Expand All @@ -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 {
Expand All @@ -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';
Expand All @@ -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';
Expand All @@ -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`.
Expand Down
4 changes: 4 additions & 0 deletions src/pages/es/core-concepts/framework-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`.
Expand Down
4 changes: 2 additions & 2 deletions src/pages/es/core-concepts/layouts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Los componentes de plantilla se colocan comúnmente en la carpeta `src/layouts`
```astro
---
---
<html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi website de Astro</title>
Expand Down Expand Up @@ -75,7 +75,7 @@ Cuando un archivo de Markdown incluye una plantilla, se le pasa una propiedad `f
---
const {frontmatter} = Astro.props;
---
<html>
<html lang="es">
<!-- ... -->
<h1>{frontmatter.title}</h1>
<h2>Autor del artículo: {frontmatter.author}</h2>
Expand Down
13 changes: 9 additions & 4 deletions src/pages/es/guides/configuring-astro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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 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.

Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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`).
## 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/#usando-la-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.
Loading

0 comments on commit 5bc8c82

Please sign in to comment.