Skip to content

Commit e590a3e

Browse files
jrammasarah11918kevinzunigacuellar
authored
i18n(es): update actions.mdx, add missing keys and review why-astro.mdx (#13284)
Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> Co-authored-by: kevinzunigacuellar <46791833+kevinzunigacuellar@users.noreply.github.com>
1 parent 767666a commit e590a3e

File tree

3 files changed

+66
-13
lines changed

3 files changed

+66
-13
lines changed

src/content/docs/es/concepts/why-astro.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ Un sitio web de Astro puede [cargar un 40% más rápido con un 90% menos de Java
7070

7171
### Fácil de usar
7272

73-
**La meta de Astro es ser accessible a cada desarrollador web.** Astro fué diseñado para sentirse familiar y asequible independientemente el nivel de habilidad o experiencia pasada en el desarrollo web.
73+
**La meta de Astro es ser accessible a cada desarrollador web.** Astro fue diseñado para sentirse familiar y asequible independientemente el nivel de habilidad o experiencia pasada en el desarrollo web.
7474

75-
El lenguaje de UI `.astro` es un superconjunto de HTML: ¡cualquier HTML válido es una sintaxis de plantilla válida en Astro! Entonces, si puedes escribir HTML, ¡puedes escribir componentes de Astro! Pero, además combina algunas de nuestra características favoritas tomadas de otros lenguajes de componentes, como expresiones JSX (React) y CSS con ámbito por defecto (Svelte y Vue). Esta cercanía a HTML también facilita el uso de mejoras progresivas y patrones comunes de accessibilidad sin un costo adicional.
75+
El lenguaje de UI `.astro` es un superconjunto de HTML: ¡cualquier HTML válido es una sintaxis de plantilla válida en Astro! Entonces, si puedes escribir HTML, ¡puedes escribir componentes de Astro! Pero, además combina algunas de nuestra características favoritas tomadas de otros lenguajes de componentes, como expresiones JSX (React) y CSS con ámbito por defecto (Svelte y Vue). Esta cercanía a HTML también facilita el uso de mejoras progresivas y patrones comunes de accesibilidad sin un costo adicional.
7676

7777
Luego nos aseguramos de que también pudieras usar tus lenguajes de componentes de UI favoritos que ya conoces e incluso reutilizar componentes que ya puedas tener. React, Preact, Svelte, Vue, Solid y otros, incluidos los web components, son compatibles para la creación de componentes de UI en un proyecto de Astro.
7878

@@ -86,6 +86,6 @@ Creemos firmemente que Astro es un proyecto exitoso si a las personas les encant
8686

8787
Astro invierte en herramientas de desarrollo como una gran experiencia en el CLI desde el momento que abres la terminal, una extension oficial de VS Code para el resaltado de sintaxis, TypeScript y Intellisense, y una documentación mantenida activamente por cientos de contribuidores de la comunidad, disponible en 14 idiomas.
8888

89-
Nuestra comunidad acogedora, respetuosa e inclusiva de Discord está lista para proporcionar soporte, motivacion y ánimo. Abre un hilo en `#support` para obtener ayuda con tu proyecto. Visita nuestro canal dedicado `#showcase` para compartir tus sitios de Astro, publicaciones de blog, videos e incluso trabajos en progreso para obtener comentarios seguros y críticas constructivas. Participa en eventos en vivo regulares como nuestra llamada comunitaria semanal "Talking and Doc'ing" y sesiones de API/bug.
89+
Nuestra comunidad acogedora, respetuosa e inclusiva de Discord está lista para proporcionar soporte, motivación y ánimo. Abre un hilo en `#support` para obtener ayuda con tu proyecto. Visita nuestro canal dedicado `#showcase` para compartir tus sitios de Astro, publicaciones de blog, videos e incluso trabajos en progreso para obtener comentarios seguros y críticas constructivas. Participa en eventos en vivo regulares como nuestra llamada comunitaria semanal "Talking and Doc'ing" y sesiones de API/bug.
9090

9191
Como proyecto open-source, damos la bienvenida a contribuciones de todos los tipos y tamaños por parte de miembros de la comunidad de todos los niveles de experiencia. Estás invitado a unirte a las discusiones sobre la hoja de ruta para dar forma al futuro de Astro, y esperamos que contribuyas con correcciones y características al código base principal, compilador, docs, herramientas de lenguaje, sitios web y otros proyectos.

src/content/docs/es/guides/actions.mdx

Lines changed: 60 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Las acciones se definen en un objeto `server` exportado desde `src/actions/index
2424

2525
```ts title="src/actions/index.ts"
2626
import { defineAction } from 'astro:actions';
27-
import { z } from 'astro:schema';
27+
import { z } from 'astro/zod';
2828

2929
export const server = {
3030
myAction: defineAction({ /* ... */ })
@@ -63,11 +63,11 @@ Sigue estos pasos para definir una acción y llamarla desde una etiqueta `script
6363
}
6464
```
6565

66-
2. Importa la utilidad `defineAction()` desde `astro:actions` y el objeto `z` desde `astro:schema`.
66+
2. Importa la utilidad `defineAction()` desde `astro:actions` y el objeto `z` desde `astro/zod`.
6767

6868
```ts ins={1-2} title="src/actions/index.ts"
6969
import { defineAction } from 'astro:actions';
70-
import { z } from 'astro:schema';
70+
import { z } from 'astro/zod';
7171

7272
export const server = {
7373
// declaraciones de acciones
@@ -79,7 +79,7 @@ Sigue estos pasos para definir una acción y llamarla desde una etiqueta `script
7979

8080
```ts ins={5-12} title="src/actions/index.ts"
8181
import { defineAction } from 'astro:actions';
82-
import { z } from 'astro:schema';
82+
import { z } from 'astro/zod';
8383

8484
export const server = {
8585
getGreeting: defineAction({
@@ -291,7 +291,7 @@ Las acciones aceptan datos JSON por defecto. Para aceptar datos de formulario de
291291

292292
```ts title="src/actions/index.ts" ins={6}
293293
import { defineAction } from 'astro:actions';
294-
import { z } from 'astro:schema';
294+
import { z } from 'astro/zod';
295295

296296
export const server = {
297297
comment: defineAction({
@@ -302,6 +302,56 @@ export const server = {
302302
}
303303
```
304304

305+
### Uso de validadores con entradas de formulario
306+
307+
{/* TODO: add link to "configurada para aceptar datos de formulario" when existing file /es/reference/modules/astro-actions/#propiedad-accept */}
308+
Cuando tu acción está configurada para aceptar datos de formulario, puedes usar cualquier validador de Zod para validar tus campos (por ejemplo, `z.coerce.date()` para entradas de fecha). Las funciones de extensión, incluyendo `.refine()`, `.transform()` y `.pipe()`, también son compatibles con el validador `z.object()`.
309+
310+
Además, Astro proporciona un manejo especial interno para tu conveniencia para validar los siguientes tipos de campos de entrada:
311+
312+
- Las entradas de tipo `number` se pueden validar usando `z.number()`
313+
- Las entradas de tipo `checkbox` se pueden validar usando `z.coerce.boolean()`
314+
- Las entradas de tipo `file` se pueden validar usando `z.instanceof(File)`
315+
- Las entradas múltiples del mismo `name` se pueden validar usando `z.array(/* validador */)`
316+
- Todas las demás entradas se pueden validar usando `z.string()`
317+
318+
Cuando envías tu formulario con entradas vacías, el tipo de salida puede no coincidir con tu validador `input`. Los valores vacíos se convierten en `null`, excepto al validar arreglos o booleanos. Por ejemplo, si se envía una entrada de tipo `text` con un valor vacío, el resultado será `null` en lugar de una cadena vacía (`""`).
319+
320+
Para aplicar una unión de diferentes validadores, usa el envoltorio `z.discriminatedUnion()` para reducir el tipo basado en un campo de formulario específico. Este ejemplo acepta el envío de un formulario para "crear" o "actualizar" un usuario, usando el campo del formulario con el nombre `type` para determinar contra qué objeto validar:
321+
322+
```ts title="src/actions/index.ts" {7-21} "create" "update"
323+
import { defineAction } from 'astro:actions';
324+
import { z } from 'astro/zod';
325+
326+
export const server = {
327+
changeUser: defineAction({
328+
accept: 'form',
329+
input: z.discriminatedUnion('type', [
330+
z.object({
331+
// Coincide cuando el campo `type` tiene el valor `create`
332+
type: z.literal('create'),
333+
name: z.string(),
334+
email: z.string().email(),
335+
}),
336+
z.object({
337+
// Coincide cuando el campo `type` tiene el valor `update`
338+
type: z.literal('update'),
339+
id: z.number(),
340+
name: z.string(),
341+
email: z.string().email(),
342+
}),
343+
]),
344+
async handler(input) {
345+
if (input.type === 'create') {
346+
// el input es { type: 'create', name: string, email: string }
347+
} else {
348+
// el input es { type: 'update', id: number, name: string, email: string }
349+
}
350+
},
351+
}),
352+
};
353+
```
354+
305355
### Validación de datos de formulario
306356

307357
Las acciones convertirán los datos del formulario enviado en un objeto, usando el valor del atributo `name` de cada input como claves del objeto. Por ejemplo, un formulario que contenga `<input name="search">` se convertirá en un objeto como `{ search: 'valor ingresado por el usuario' }`. El esquema `input` de tu acción se usará para validar este objeto.
@@ -330,7 +380,7 @@ El siguiente ejemplo muestra un formulario validado para la suscripción a un ne
330380

331381
```ts title="src/actions/index.ts" ins={5-12}
332382
import { defineAction } from 'astro:actions';
333-
import { z } from 'astro:schema';
383+
import { z } from 'astro/zod';
334384

335385
export const server = {
336386
newsletter: defineAction({
@@ -407,8 +457,7 @@ Las páginas deben renderizarse bajo demanda al llamar acciones usando una acci
407457

408458
Puedes habilitar envíos de formularios sin JavaScript usando atributos estándar en cualquier elemento `<form>`. Los envíos de formularios sin JavaScript del lado cliente pueden ser útiles como respaldo cuando JavaScript no carga o si prefieres manejar formularios completamente desde el servidor.
409459

410-
{/* TODO: add link for spanish */}
411-
Llamar a Astro.getActionResult() en el servidor devuelve el resultado de tu envío de formulario (`data` o `error`), y puede usarse para redirigir dinámicamente, manejar errores de formulario, actualizar la interfaz y más.
460+
Llamar a [Astro.getActionResult()](/es/reference/api-reference/#getactionresult) en el servidor devuelve el resultado de tu envío de formulario (`data` o `error`), y puede usarse para redirigir dinámicamente, manejar errores de formulario, actualizar la interfaz y más.
412461

413462
Para llamar una acción desde un formulario HTML, agrega `method="POST"` a tu `<form>`, luego asigna el atributo `action` usando tu acción, por ejemplo `action={actions.logout}`. Esto configurará el atributo `action` con una cadena de consulta que es manejada automáticamente por el servidor.
414463

@@ -445,7 +494,7 @@ Por ejemplo, imagina que tienes una acción `createProduct` que devuelve el id d
445494

446495
```ts title="src/actions/index.ts" mark={10}
447496
import { defineAction } from 'astro:actions';
448-
import { z } from 'astro:schema';
497+
import { z } from 'astro/zod';
449498

450499
export const server = {
451500
createProduct: defineAction({
@@ -660,7 +709,8 @@ Las acciones son accesibles como endpoints públicos basados en el nombre de la
660709

661710
Para autorizar las solicitudes de acción, agrega una verificación de autenticación en el handler de tu acción. Puedes usar [una biblioteca de autenticación](/es/guides/authentication/) para manejar la gestión de sesiones y la información del usuario.
662711

663-
Las acciones exponen el objeto completo `APIContext` para acceder a propiedades pasadas desde middleware usando `context.locals`. Cuando un usuario no está autorizado, puedes lanzar un `ActionError` con el código `UNAUTHORIZED`:
712+
{/* TODO: add link [un subconjunto de `APIContext` object](/es/reference/modules/astro-actions/#actionapicontext) when astro-actions.mdx exists */}
713+
Las acciones exponen un subconjunto de `APIContext` object para acceder a propiedades pasadas desde middleware usando `context.locals`. Cuando un usuario no está autorizado, puedes lanzar un `ActionError` con el código `UNAUTHORIZED`:
664714

665715
```ts title="src/actions/index.ts" {6-8}
666716
import { defineAction, ActionError } from 'astro:actions';

src/content/i18n/es.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ deploy.staticTag: Estático
2323
media.navTitle: Más guías de DAM
2424
# Vocabulario de guías de CMS
2525
cms.navTitle: Más guías de CMS
26+
cms.featuredSubheading: Socios de CMS destacados
27+
cms.allSubheading: Todas las guías de CMS
28+
2629
# Vocabulario de guías de migración
2730
migration.navTitle: Más guías de migración
2831
# Vocabulario de <RecipeLinks>

0 commit comments

Comments
 (0)