i18n(es): create astro-zod.mdx, configuring-astro.mdx & typescript.mdx (#14224)

Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>

Author: marcos-corrochano

src/content/docs/es/basics/astro-components.mdx

@@ -3,6 +3,7 @@ title: Componentes
 description: Una introducción a los componentes de Astro.
 i18nReady: true
 ---
+
 import ReadMore from '~/components/ReadMore.astro';
 
 **Los componentes de Astro** son los elementos básicos de cualquier proyecto de Astro. Son componentes de plantillas HTML sin tiempo de ejecución del lado del cliente y utilizan la extensión de archivo `.astro`.
@@ -13,7 +14,7 @@ Si sabes HTML, ya sabes lo suficiente para escribir tu primer componente de Astr
 <ReadMore>Más información en la [referencia sintáctica de Astro](/es/reference/astro-syntax/).</ReadMore>
 :::
 
-Los componentes de Astro son extremadamente flexibles. Un componente de Astro puede ser tan pequeño como un fragmento de HTML, como una colección de etiquetas comunes `<meta>` que facilitan el trabajo con SEO. Los componentes pueden ser elementos de interfaz de usuario reutilizables, como una cabecera o una tarjeta de perfil. Los componentes de Astro pueden incluso contener un diseño de página completo o, cuando se encuentran en la carpeta especial `src/pages/`, ser una página completa.
+Los componentes Astro son extremadamente flexibles. Un componente de Astro puede ser tan pequeño como un fragmento de HTML, como una colección de etiquetas comunes `<meta>` que facilitan el trabajo con SEO. Los componentes pueden ser elementos de interfaz de usuario reutilizables, como una cabecera o una tarjeta de perfil. Los componentes de Astro pueden incluso contener un diseño de página completo o, cuando se encuentran en la carpeta especial `src/pages/`, ser una página completa.
 
 Lo más importante que hay que saber sobre los componentes de Astro es que **no se renderizan en el cliente**. Se renderizan en HTML en el momento de la compilación o bajo demanda. Puedes incluir código JavaScript dentro del frontmatter de tu componente, y todo será eliminado de la página final enviada a los navegadores de tus usuarios. El resultado es un sitio más rápido, sin ninguna huella de JavaScript añadida por defecto.
 
@@ -50,7 +51,7 @@ import UnComponenteAstro from '../components/UnComponenteAstro.astro';
 import UnComponenteReact from '../components/UnComponenteReact.jsx';
 import algunosDatos from '../data/pokemon.json';
 
-// Acceder a props recibidas, por ejemplo `<X title="Hola Mundo" />`
+// Acceder a propiedades recibidas, por ejemplo `<X title="Hola Mundo" />`
 const { title } = Astro.props;
 
 // Consultar datos externos, de una API privada o base de datos
@@ -89,7 +90,7 @@ const  { title } = Astro.props;
 
 <h1>¡Hola mundo!</h1>
 
-<!-- Utiliza props y otras variables definidas en el script del componente: -->
+<!-- Usa propiedades y otras variables definidas en el script del componente: -->
 <p>{title}</p>
 
 <!-- Retrasa el renderizado del componente y proporciona contenido de carga alternativo: -->
@@ -124,22 +125,22 @@ import Button from './Button.astro';
 </div>
 ```
 
-## Props de componentes
+## Propiedades de componente
 
-Un componente de Astro puede definir y aceptar props. Estas props estarán disponibles para ser utilizadas en el renderizado del maquetado HTML y además estarán disponibles en el script del componente de manera global dentro del objeto `Astro.props`.
+Un componente Astro puede definir y aceptar propiedades. Estas propiedades estarán disponibles para ser utilizadas en el renderizado del maquetado HTML y además estarán disponibles en el script del componente de manera global dentro del objeto `Astro.props`.
 
-Aquí vemos un ejemplo de un componente que recibe una prop `saludo` y otra `nombre`. Fíjate que las props a recibir están desestructuradas del objeto global `Astro.props`.
+Aquí vemos un ejemplo de un componente que recibe una propiedad `saludo` y otra `nombre`. Fíjate que las propiedades a recibir están desestructuradas del objeto global `Astro.props`.
 
 ```astro "Astro.props"
 ---
 // src/components/GreetingHeadline.astro
-// Utilización: <GreetingHeadline saludo="Qué tal" nombre="Amiga" />
+// Uso: <GreetingHeadline saludo="Qué tal" nombre="Amiga" />
 const { saludo, nombre } = Astro.props
 ---
 <h2>{saludo}, {nombre}!</h2>
 ```
 
-Este componente, cuando se importa y renderiza en otros componentes, layouts o páginas de Astro, puede pasar estas props como atributos:
+Este componente, cuando se importa y renderiza en otros componentes, layouts o páginas de Astro, puede pasar estas propiedades como atributos:
 
 ```astro /(\w+)=\S+/
 ---
@@ -152,7 +153,7 @@ const name = 'Astro';
 <p>¡Espero que tenga un día maravilloso!</p>
 ```
 
-También puedes definir props con TypeScript usando una interfaz de tipo `Props`. Astro recogerá automáticamente la interfaz `Props` en el frontmatter y dará advertencias/errores de tipo para tu proyecto. A estas propiedades también se les puede dar valores predeterminados cuando se desestructuran desde `Astro.props`.
+También puedes definir propiedades con TypeScript usando una interfaz de tipo `Props`. Astro recogerá automáticamente la interfaz `Props` en el frontmatter y dará advertencias/errores de tipo para tu proyecto. A estas propiedades también se les puede dar valores predeterminados cuando se desestructuran desde `Astro.props`.
 
 ```astro ins={3-6}
 ---
@@ -167,7 +168,7 @@ const { saludo = "Hola", nombre } = Astro.props;
 <h2>{saludo}, {nombre}!</h2>
 ```
 
-A los props de componentes se les pueden dar valores predeterminados para usar cuando no se proporciona ninguno.
+A las propiedades de componentes se les pueden dar valores predeterminados para usar cuando no se proporciona ninguno.
 
 ```astro ins="= \"Hola\"" ins="= \"Astronauta\""
 ---

src/content/docs/es/basics/layouts.mdx

@@ -3,15 +3,16 @@ title: Plantillas
 description: Una introducción a las plantillas de Astro.
 i18nReady: true
 ---
-import ReadMore from '~/components/ReadMore.astro'
 
-**Las plantillas** son [componentes de Astro](/es/basics/astro-components/) para proporcionar una estructura reutilizable, como una plantilla de página.
+import ReadMore from '~/components/ReadMore.astro';
+
+**Las plantillas** son [componentes Astro](/es/basics/astro-components/) para proporcionar una estructura reutilizable, como una plantilla de página.
 
 Convencionalmente usamos el término "plantilla" para proporcional elementos compartidos en la interfaz del usuario por medio de páginas, como encabezados, barras de navegación y pies de página. Una plantilla proporciona a [Astro, Markdown o páginas MDX](/es/basics/astro-pages/) con:
 - una **página shell** (con estiquetas  `<html>`, `<head>` y `<body>`)
 - un [**`<slot/>`**](/es/basics/astro-components/#slots) para especificar dónde colocar el contenido de la página.
 
-Pero, ¡no hay nada especial acerca de los componentes plantilla! Pueden [aceptar props](/es/basics/astro-components/#props-de-componentes) e [importar y usar otros componentes](/es/basics/astro-components/#estructura-de-un-componente) como cualquier otro componente de Astro. Pueden incluir [componentes de framework](/es/guides/framework-components/) y [scripts de lado del cliente](/es/guides/client-side-scripts/). Ni siquiera tienen que proporcionar un plantilla entera, en su lugar se pueden utilizar como plantillas parciales.
+Pero, ¡no hay nada especial acerca de los componentes plantilla! Pueden [aceptar propiedades](/es/basics/astro-components/#propiedades-de-componente) e [importar y usar otros componentes](/es/basics/astro-components/#estructura-de-un-componente) como cualquier otro componente de Astro. Pueden incluir [componentes de framework](/es/guides/framework-components/) y [scripts de lado del cliente](/es/guides/client-side-scripts/). Ni siquiera tienen que proporcionar un plantilla entera, en su lugar se pueden utilizar como plantillas parciales.
 
 Sin embargo, si un componente de plantilla contiene una página shell, su elemento `<html>` debe ser el padre de todos los demás elementos en el componente.
 
@@ -65,7 +66,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';
 
 ## Usando TypeScript con plantillas
 
-Cualquier plantilla de Astro puede ser modificada para introducir seguridad de tipos y autocompletado proporcionando los tipos en las props:
+Cualquier plantilla de Astro puede ser modificada para introducir seguridad de tipos y autocompletado proporcionando los tipos en las propiedades:
 
 ```astro ins={2-7} title="src/components/MyLayout.astro"
 ---
@@ -106,12 +107,12 @@ Esto no se reconoce como una propiedad especial cuando se utiliza [colecciones d
 
 ```markdown title="src/pages/page.md" {2} 
 ---
-layout: ../layouts/BlogPostLayout.astro
-title: "¡Hola, mundo!"
-author: "Matthew Phillips"
-date: "09 Aug 2022"
+layout: '../layouts/BlogPostLayout.astro'
+title: '¡Hola, mundo!'
+author: 'Matthew Phillips'
+date: '09 Aug 2022'
 ---
-Todas las propiedades frontmatter están disponibles como props en un componente plantilla de Astro.
+Todas las propiedades frontmatter están disponibles como propiedades en un componente plantilla de Astro.
 
 La propiedad `layout` es la única especial proporcionada por Astro.
 
@@ -144,7 +145,7 @@ const { frontmatter } = Astro.props;
 </html>
 ```
 
-Puedes establecer el tipo de una plantilla como [`Props`](/es/guides/typescript/#component-props) con el ayudante `MarkdownLayoutProps`:
+Puedes establecer el tipo de una plantilla como [`Props`](/es/guides/typescript/#propiedades-de-componente) con el ayudante `MarkdownLayoutProps`:
 
 ```astro title="src/layouts/BlogPostLayout.astro" ins={2,4-9}
 ---
@@ -175,12 +176,12 @@ const { frontmatter, url } = Astro.props;
 </html>
 ```
 
-### Props de plantillas Markdown
+### Propiedades de plantillas Markdown
 
 Una plantilla Markdown/MDX tendrá acceso a la siguiente información a través de `Astro.props`:
 
-- **`file`** - La ruta absoluta de este archivo (por ejemplo, `/home/user/projects/.../file.md`).
-- **`url`** - La URL de la página (por ejemplo, `/en/guides/markdown-content`).
+- **`file`** - La ruta absoluta de este archivo (p. ej., `/home/user/projects/.../file.md`).
+- **`url`** - La URL de la página (p. ej., `/en/guides/markdown-content`).
 - **`frontmatter`** - Todo el frontmatter del documento Markdown o MDX.
   - **`frontmatter.file`** - La misma que la propiedad de nivel superior `file`.
   - **`frontmatter.url`** - La misma que la propiedad de nivel superior `url`.
@@ -199,7 +200,7 @@ Una plantilla Markdown tendrá acceso a todas sus [propiedades exportadas](/es/g
 
 ### Importando Plantillas Manualmente (MDX)
 
-También puedes utilizar la propiedad especial Markdown layout en el frontmatter de los archivos MDX para pasar los props `frontmatter` y `headings` directamente a un componente layout especificado del mismo modo.
+También puedes utilizar la propiedad especial Markdown layout en el frontmatter de los archivos MDX para pasar las propiedades  `frontmatter` y `headings` directamente a un componente layout especificado del mismo modo.
 
 Para pasar información a tu plantilla MDX que no existe (o no puede existir) en su frontmatter, puede importar y utilizar un componente `<Layout />`. Funciona como cualquier otro componente de Astro, y no recibirá ningún prop automáticamente. Pásale directamente los accesorios que necesites:
 
@@ -212,7 +213,7 @@ publishDate: '21 de Septiembre de 2022'
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
 export function fancyJsHelper() {
-  return "¡Intenta hacer eso con YAML!";
+  return '¡Intenta hacer eso con YAML!';
 }
 
 <BaseLayout title={frontmatter.title} fancyJsHelper={fancyJsHelper}>

src/content/docs/es/guides/configuring-astro.mdx

@@ -0,0 +1,123 @@
+---
+title: Resumen de la configuración
+description: Descubre las diferentes formas en las que puedes configurar y personalizar tu nuevo proyecto y tu experiencia de desarrollo.
+i18nReady: true
+---
+
+import ReadMore from '~/components/ReadMore.astro';
+
+Astro es un framework flexible y neutral que te permite configurar tu proyecto de muchas formas diferentes. Esto significa que empezar con un nuevo proyecto puede resultar abrumador: ¡no hay una "única manera correcta" de configurar tu proyecto de Astro!
+
+Las guías en la sección de "Configuración" te ayudarán a familiarizarte con los distintos archivos que te permiten configurar y personalizar diversos aspectos de tu proyecto y de tu entorno de desarrollo.
+
+Si este es tu primer proyecto con Astro, o si hace tiempo que no configuras un proyecto nuevo, consulta las siguientes guías y la documentación de referencia para obtener ayuda.
+
+## El archivo de configuración de Astro
+
+El [archivo de configuración de Astro](/es/reference/configuration-reference/) es un archivo JavaScript que se incluye en el directorio raíz de cada proyecto inicial:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // tus opciones de configuración aquí...
+});
+```
+
+Solo es necesario si tienes algo que configurar, pero la mayoría de los proyectos usarán este archivo. La función auxiliar `defineConfig()` proporciona IntelliSense automático en tu IDE y es donde añadirás todas tus opciones de configuración para indicar a Astro cómo compilar y generar tu proyecto en HTML.
+
+Recomendamos utilizar el formato de archivo predeterminado `.mjs` en la mayoría de los casos, o `.ts` si deseas escribir TypeScript en tu archivo de configuración. No obstante, el formato `astro.config.js` es compatible.
+
+<ReadMore>Consulta la [referencia de configuración](/es/reference/configuration-reference/) de Astro para obtener una descripción completa de todas las opciones de configuración disponibles.</ReadMore>
+
+## El archivo de configuración de TypeScript
+
+Todos los proyectos iniciales de Astro incluyen un archivo `tsconfig.json` en el proyecto. El [script de un componente](/es/basics/astro-components/#script-de-un-componente) Astro está escrito en TypeScript, lo que proporciona las herramientas de edición de Astro y te permite, si lo deseas, añadir sintaxis a tu código JavaScript para la comprobación de tipos del código de tu propio proyecto.
+
+Usa el archivo `tsconfig.json` para configurar la plantilla de TypeScript que realizará la comprobación de tipos en tu código, configurar los plugins de TypeScript, establecer alias de importación y mucho más.
+
+<ReadMore>Lee la [guía de TypeScript](/es/guides/typescript/) de Astro para obtener una visión general completa de las opciones de TypeScript y los tipos de utilidad integrados en Astro.</ReadMore>
+
+## Experiencia en desarrollo
+
+Mientras trabajas en modo de desarrollo, puedes aprovechar tu editor de código y otras herramientas para mejorar la experiencia de desarrollo con Astro.
+
+Astro ofrece su propia extensión oficial para VS Code y es compatible con otras herramientas de edición muy populares. Astro también ofrece una barra de herramientas personalizable que se muestra en la vista previa del navegador mientras el servidor de desarrollo está en funcionamiento. Puedes instalar e incluso crear tus propias aplicaciones para la barra de herramientas con el fin de añadir funcionalidades adicionales.
+
+<ReadMore>Lee las guías de Astro sobre [opciones de configuración del editor](/es/editor-setup/) y [cómo utilizar la barra de herramientas de desarrollo](/es/guides/dev-toolbar/) para aprender a personalizar tu experiencia de desarrollo.</ReadMore>
+
+## Tareas habituales en los nuevos proyectos
+
+A continuación te indicamos algunos primeros pasos que podrías dar al iniciar un nuevo proyecto de Astro.
+
+### Agrega tu dominio de despliegue
+
+Para generar el mapa del sitio y crear URL canónicas, configura la URL de despliegue en la opción [`site`](/es/reference/configuration-reference/#site). Si vas a realizar el despliegue en una ruta (p. ej., `www.example.com/docs`), también puedes configurar una [`base`](/es/reference/configuration-reference/#base) para la raíz de tu proyecto.
+
+Además, los distintos servidores de despliegue pueden comportarse de forma diferente en lo que respecta a las barras al final de las URL (p. ej., `example.com/about` frente a `example.com/about/`). Una vez desplegado el sitio, es posible que tengas que configurar la opción [`trailingSlash`](/es/reference/configuration-reference/#trailingslash).
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  site: 'https://www.example.com',
+  base: '/docs',
+  trailingSlash: 'always',
+});
+```
+
+### Agregar metadatos del sitio
+
+Astro no usa su archivo de configuración para datos comunes de SEO o metadatos, sino únicamente para la información necesaria para compilar el código de tu proyecto y convertirlo a HTML.
+
+En su lugar, esta información se agrega al `<head>` de tu página usando las etiquetas HTML estándar `<link>` y `<meta>`, igual que si estuvieras escribiendo páginas HTML convencionales.
+
+Una práctica habitual en los sitios web Astro es crear un [componente `.astro`](/es/basics/astro-components/) `<Head />` que se pueda añadir a una [plantilla](/es/basics/layouts/) común, de modo que se aplique a todas tus páginas.
+
+```astro title="src/components/MainLayout.astro"
+---
+import Head from './Head.astro';
+
+const { ...props } = Astro.props;
+---
+<html>
+  <head>
+    <meta charset="utf-8">
+    <Head />
+    <!-- Elementos adicionales del head -->
+  </head>
+  <body>
+    <!-- El contenido de la página va aquí -->
+  </body>
+</html>
+```
+
+Dado que `Head.astro` es simplemente un componente Astro normal, puedes importar archivos y recibir propiedades que te pasen otros componentes, como el título de una página concreta.
+
+```astro title="src/components/Head.astro"
+---
+import Favicon from '../assets/Favicon.astro';
+import SomeOtherTags from './SomeOtherTags.astro';
+
+const { title = 'Mi página Astro', ...props } = Astro.props;
+---
+<link rel="sitemap" href="/sitemap-index.xml">
+<title>{title}</title>
+<meta name="description" content="¡Bienvenido a mi nuevo sitio Astro!">
+
+<!-- Analíticas Web -->
+<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+
+<!-- Tags de Open Graph -->
+<meta property="og:title" content="Mi nueva página de Astro" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="http://www.example.com/" />
+<meta property="og:description" content="¡Bienvenido a mi nuevo sitio Astro!" />
+<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
+<meta property="og:image:alt" content="">
+
+<SomeOtherTags />
+
+<Favicon />
+```