Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(es): Updated concepts/ & core-concepts/ V3 #4377

Merged
merged 3 commits into from
Aug 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/docs/es/concepts/why-astro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,6 @@ Uno de nuestros dichos favoritos es: **Optar por la complejidad.** Diseñamos As

**Astro es un framework web todo en uno que viene con todo lo que necesitas para construir un sitio web.** Astro incluye sintaxis de componentes, enrutamiento basado en archivos, manejo de archivos estáticos (imágenes, fuentes), proceso de compilación, empaquetado, optimizaciones, obtención de datos y más. Puedes crear excelentes sitios web sin tener que salir del conjunto de funciones principales de Astro.

Si necesitas más control, puedes extender Astro con más de [100 integraciones](https://astro.build/integrations/) como [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx), [optimizaciones de imágenes](https://www.npmjs.com/package/@astrojs/image), y más. [Conecta tu CMS favorito](/es/guides/cms/) o [despliega en tu host favorito](/es/guides/deploy/) con un solo comando.
Si necesitas más control, puedes extender Astro con más de [100 integraciones](https://astro.build/integrations/) como [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx) y más. [Conecta tu CMS favorito](/es/guides/cms/) o [despliega en tu host favorito](/es/guides/deploy/) con un solo comando.

Astro es independiente a la interfaz de usuario, lo que significa que puedes **traer tu propio framework**. React, Preact, Solid, Svelte, Vue y Lit son oficialmente compatibles con Astro. Incluso puedes mezclar y combinar diferentes frameworks en la misma página, lo que facilita futuras migraciones y evita encerrar el proyecto a un solo framework.
128 changes: 61 additions & 67 deletions src/content/docs/es/core-concepts/endpoints.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,29 @@ Astro te permite crear endpoints personalizados para servir cualquier tipo de da
En los sitios generados estáticamente, tus endpoints personalizados son llamados al momento de compilación para producir archivos estáticos. Si optaste para modo [SSR](/es/guides/server-side-rendering/), los endpoints personalizados se convierten en endpoints de servidor que son llamados a petición. Endpoints estáticos y de tipo SSR son definidos similarmente, pero endpoints SSR soportan características adicionales.

## Endpoints de Archivos Estáticos

Para crear un endpoint personalizado, agrega un archivo `.js` o `.ts` al directorio de `/pages`. La extensión `.js` o `.ts` se eliminará durante el proceso de compilación, por lo que el nombre del archivo debe incluir la extensión de los datos que se desea generar. Por ejemplo, `src/pages/data.json.ts` generará el endpoint `/data.json`.

Los endpoints exportan una función `get` (opcionalmente `async`) que recibe un [objeto de contexto](/es/reference/api-reference/#contexto-del-endpoint) con propiedades similares a las de `Astro` global. Esto retorna un objeto con un `body`, y Astro va a llamarlo al momento de compilación y usar sus contenidos del body para generar un archivo.
Los endpoints exportan una función `GET` (opcionalmente `async`) que recibe un [objeto de contexto](/es/reference/api-reference/#contexto-del-endpoint) con propiedades similares a las de `Astro` global. Aquí, retorna un objeto Response con un `name` y una `url`, y Astro va a llamarlo al momento de compilación y usar sus contenidos del body para generar un archivo.

```ts
// Ejemplo: src/pages/builtwith.json.ts
// Salidas: /builtwith.json
export async function get({params, request}) {
return {
body: JSON.stringify({
nombre: 'Astro',
url: 'https://astro.build/es',
}),
};
};
export async function GET({params, request}) {
return new Response(
JSON.stringify({
url: 'https://astro.build/'
})
)
}
```

El objeto retornado puede también contener una propiedad de `encoding`. Puede ser cualquier [`BufferEncoding`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/bdd02508ddb5eebcf701fdb8ffd6e84eabf47885/types/node/buffer.d.ts#L169) válido que sea aceptado por el método `fs.writeFile` de Node.js. Por ejemplo, para producir una imagen PNG binaria:
Desde Astro v3.0, el objeto `Response` devuelto ya no necesita incluir la propiedad `encoding`. Por ejemplo, para generar una imagen PNG binaria:

```ts title="src/pages/astro-logo.png.ts" {6}
export async function get({ params, request }) {
```ts title="src/pages/astro-logo.png.ts" {3}
export async function GET({ params, request }) {
const response = await fetch("https://docs.astro.build/assets/full-logo-light.png");
const buffer = Buffer.from(await response.arrayBuffer());
return {
body: buffer,
encoding: 'binary',
};
return new Response(await response.arrayBuffer());
};
```

Expand All @@ -45,8 +41,7 @@ También puedes escribir tus funciones de endpoint usando el tipo de `APIRoute`:
```ts
import type { APIRoute } from 'astro';

export const get: APIRoute = async ({ params, request }) => {
...
export const GET: APIRoute = async ({ params, request }) => {...}
```

### `params` y Enrutamiento Dinámico
Expand All @@ -56,44 +51,46 @@ Los endpoints soportan las mismas características que hacen las páginas de [ru
```ts title="src/pages/api/[id].json.ts"
import type { APIRoute } from 'astro';

const usernames = ["Sarah", "Chris", "Dan"]
const usernames = ["Sarah", "Chris", "Dan", "Yan", "Elian"]

export const get: APIRoute = ({ params, request }) => {
export const GET: APIRoute = ({ params, request }) => {
const id = params.id;
return {
body: JSON.stringify({
return new Response(
JSON.stringify({
name: usernames[id]
})
};
};
)
}

export function getStaticPaths () {
export function getStaticPaths() {
return [
{ params: { id: "0"} },
{ params: { id: "1"} },
{ params: { id: "2"} },
{ params: { id: "3"} }
]
};
```

Esto te va a generar tres JSON endpoints al momento de compilación: `/api/0.json`, `/api/1.json`, `/api/2.json`. El enrutamiento dinámico con endpoints funciona igual que con las páginas, pero debido a que el endpoint es una función y no un componente, las [props](/es/reference/api-reference/#transferencia-de-datos-con-props) no son compatibles.
Esto te va a generar cuatro JSON endpoints al momento de compilación: `/api/0.json`, `/api/1.json`, `/api/2.json` y `/api/3.json`. El enrutamiento dinámico con endpoints funciona igual que con las páginas, pero debido a que el endpoint es una función y no un componente, las [props](/es/reference/api-reference/#transferencia-de-datos-con-props) no son compatibles.

### `request`

Todos los endpoints reciben una propiedad `request`, pero en el modo estático, solo tienes acceso a `request.url`. Esto retorna una URL completa del endpoint actual y funciona del mismo modo que [Astro.request.url](/es/reference/api-reference/#astrorequest) funciona con las páginas.

```ts title="src/pages/request-path.json.ts"
import type { APIRoute } from 'astro';

export const get: APIRoute = ({ params, request }) => {
return {
body: JSON.stringify({
export const GET: APIRoute = ({ params, request }) => {
return new Response(JSON.stringify({
path: new URL(request.url).pathname
})
}
};
)
}
```

## Endpoints del Servidor (Rutas de API)

Todo lo descrito en la sección de endpoints de archivos estáticos también se puede usar en modo SSR: los archivos pueden exportar una función `get` que recibe un [objeto de contexto](/es/reference/api-reference/#contexto-del-endpoint) con propiedades similares a las de `Astro` global.

Pero, a diferencia del modo `static`, cuando configuras el modo `server`, los endpoints se construirán cuando se soliciten. Esto desbloquea nuevas funciones que no están disponibles al momento de la compilación y permite crear rutas de API que escuchan solicitudes y ejecutan código de forma segura en el servidor en tiempo de ejecución.
Expand All @@ -109,7 +106,7 @@ Los endpoints del servidor pueden acceder a `params` sin exportar `getStaticPath
```js title="src/pages/[id].json.js"
import { getProduct } from '../db';

export async function get({ params }) {
export async function GET({ params }) {
const id = params.id;
const product = await getProduct(id);

Expand All @@ -120,12 +117,14 @@ export async function get({ params }) {
});
}

return new Response(JSON.stringify(product), {
status: 200,
headers: {
"Content-Type": "application/json"
return new Response(
JSON.stringify(product), {
status: 200,
headers: {
"Content-Type": "application/json"
}
}
});
);
};
```

Expand All @@ -134,7 +133,7 @@ Esto responderá a cualquier solicitud que coincida con la ruta dinámica. Por e
En modo SSR, ciertos proveedores requieren que el encabezado `Content-Type` devuelva una imagen. En este caso, usa un objeto `Response` para especificar una propiedad de `headers`. Por ejemplo, para producir una imagen binaria en formato `.png`:

```ts title="src/pages/astro-logo.png.ts"
export async function get({ params, request }) {
export async function GET({ params, request }) {
const response = await fetch("https://docs.astro.build/assets/full-logo-light.png");
const buffer = Buffer.from(await response.arrayBuffer());
return new Response(buffer, {
Expand All @@ -144,55 +143,49 @@ export async function get({ params, request }) {
```

### Métodos HTTP
Además de la función `get`, puedes exportar una función con el nombre de cualquier [método HTTP](https://developer.mozilla.org/es/docs/Web/HTTP/Methods). Cuando llega una solicitud, Astro verificará el método y llamará a la función correspondiente.

También puedes exportar una función `all` para que coincida con cualquier método que no tenga una función exportada correspondiente. Si hay una solicitud sin método de coincidencia, se redirigirá a la [página 404](/es/core-concepts/astro-pages/#página-de-error-404-personalizada) de tu proyecto.
Además de la función `GET`, puedes exportar una función con el nombre de cualquier [método HTTP](https://developer.mozilla.org/es/docs/Web/HTTP/Methods). Cuando llega una solicitud, Astro verificará el método y llamará a la función correspondiente.

:::note
Dado que `delete` es una palabra reservada en JavaScript, exporta una función `del` para que coincida con el método de eliminación.
:::
También puedes exportar una función `ALL` para coincidir con cualquier método que no tenga una función correspondiente exportada. Si hay una solicitud sin método coincidente, se redirigirá a la [página 404 personalizada](/es/core-concepts/astro-pages/#página-de-error-404-personalizada) de tu sitio.

```ts title="src/pages/methods.json.ts"
export const get: APIRoute = ({ params, request }) => {
return {
body: JSON.stringify({
export const GET: APIRoute = ({ params, request }) => {
return new Response(JSON.stringify({
message: "¡Esto es un GET!"
})
}
};
)
}

export const post: APIRoute = ({ request }) => {
return {
body: JSON.stringify({
export const POST: APIRoute = ({ request }) => {
return new Response(JSON.stringify({
message: "¡Esto es un POST!"
})
}
};
)
}

export const del: APIRoute = ({ request }) => {
return {
body: JSON.stringify({
export const DELETE: APIRoute = ({ request }) => {
return new Response(JSON.stringify({
message: "¡Esto es un DELETE!"
})
}
};
)
}

export const all: APIRoute = ({ request }) => {
return {
body: JSON.stringify({
export const ALL: APIRoute = ({ request }) => {
return new Resonse(JSON.stringify({
message: `¡Esto fue un ${request.method}!`
})
}
};
)
}
```

<RecipeLinks slugs={["es/recipes/captcha", "es/recipes/build-forms-api" ]}/>

### `request`
### `request`

En modo SSR, la propiedad `request` retorna un objeto [`Request`](https://developer.mozilla.org/es/docs/Web/API/Request) totalmente utilizable que hace referencia a la solicitud actual. Esto permite aceptar datos y verificar encabezados:

```ts title="src/pages/test-post.json.ts"
export const post: APIRoute = async ({ request }) => {
export const POST: APIRoute = async ({ request }) => {
if (request.headers.get("Content-Type") === "application/json") {
const body = await request.json();
const nombre = body.nombre;
Expand All @@ -207,12 +200,13 @@ export const post: APIRoute = async ({ request }) => {
```

### Redirecciones

El contexto del endpoint exporta la utilidad `redirect()` similar a `Astro.redirect`:

```js title="src/pages/links/[id].js" {14}
import { getLinkUrl } from '../db';

export async function get({ params, redirect }) {
export async function GET({ params, redirect }) {
const { id } = params;
const link = await getLinkUrl(id);

Expand Down
4 changes: 0 additions & 4 deletions src/content/docs/es/core-concepts/project-structure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,6 @@ Algunos archivos (como los componentes de Astro) no serán enviados al navegador
Mientras esta guía describe algunas convenciones populares utilizadas en la comunidad de Astro, los únicos directorios reservados por Astro son `src/pages/` y `src/content/`. Eres libre de cambiar el nombre y reorganizar cualquier otro directorio de la manera que mejor te convenga.
:::

### `src/assets`

El directorio [`src/assets`](/es/guides/assets/) es la carpeta recomendada para almacenar activos (p. ej, imágenes) que son procesados por Astro. Esto no es obligatorio y no es una carpeta especial reservada.

### `src/components`

Los **componentes** son unidades reutilizables de código para tus páginas HTML. Estos componentes pueden ser [componentes de Astro](/es/core-concepts/astro-components/) o [componentes de framework](/es/core-concepts/framework-components/) como React o Vue. Es común agrupar y organizar todos tus componentes en una sola carpeta.
Expand Down