diff --git a/src/content/docs/es/tutorial/0-introduction/index.mdx b/src/content/docs/es/tutorial/0-introduction/index.mdx index 0831c24f543d7..05c6d0adc4d44 100644 --- a/src/content/docs/es/tutorial/0-introduction/index.mdx +++ b/src/content/docs/es/tutorial/0-introduction/index.mdx @@ -1,11 +1,16 @@ --- type: tutorial unitTitle: '¡Bienvenido, mundo!' -title: Construye tu primer blog con Astro +title: Construye tu primer blog con Astro +sidebar: + label: 'Tutorial: Crear un blog' i18nReady: true description: >- Aprende los conceptos básicos de Astro con un tutorial basado en proyectos. Todos los conocimientos que necesitas para empezar. +head: + - tag: title + content: Guía para crear un blog | Docs --- import Checklist from '~/components/Checklist.astro'; import Box from '~/components/tutorial/Box.astro'; @@ -22,7 +27,7 @@ A lo largo del camino, tú: - Añadirás interactividad a tu sitio web - Desplegarás tu sitio en la web -¿Quieres una vista previa de lo que vas a construir? Puedes ver el proyecto final en [GitHub](https://github.com/withastro/blog-tutorial-demo) o [StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro). +¿Quieres una vista previa de lo que vas a construir? Puedes ver el proyecto final en [GitHub](https://github.com/withastro/blog-tutorial-demo) o abrir una versión funcional en un entorno de programación en línea como [IDX](https://idx.google.com/import?url=https:%2F%2Fgithub.com%2Fwithastro%2Fblog-tutorial-demo%2F) o [StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro). :::note Si prefieres empezar a explorar Astro con un sitio de Astro preconstruido, puedes visitar https://astro.new y elegir una plantilla de inicio para abrirla y editarla en un editor en línea. diff --git a/src/content/docs/es/tutorial/1-setup/1.mdx b/src/content/docs/es/tutorial/1-setup/1.mdx index d9abf4589fedb..175385388a9d9 100644 --- a/src/content/docs/es/tutorial/1-setup/1.mdx +++ b/src/content/docs/es/tutorial/1-setup/1.mdx @@ -28,7 +28,7 @@ Puedes acceder a la línea de comandos a través de un programa de terminal loca ### Node.js -Para que Astro funcione en tu sistema, también necesitarás tener instalado [**Node.js**](https://nodejs.org/en/), versión `v18.14.1` o posterior. +Para que Astro funcione en tu sistema, también necesitas tener instalada una versión compatible de [**Node.js**](https://nodejs.org/en/). Astro es compatible con las versiones **pares** de Node.js. Las versiones mínimas actualmente compatibles son: `v18.20.8`, `v20.3.0` y `v22.0.0`. (Las versiones `v19` y `v21` no son compatibles.) Para comprobar si ya tienes instalada una versión compatible, ejecuta el siguiente comando en tu terminal: @@ -36,12 +36,12 @@ Para comprobar si ya tienes instalada una versión compatible, ejecuta el siguie node -v // Ejemplo de salida -v18.14.1 +v18.20.8 ``` -Si el comando devuelve un número de versión superior a `v18.14.1`, ¡ya está! +Si el comando muestra un número de versión compatible con Astro, ¡ya estás listo para continuar! -Si el comando devuelve un mensaje de error como `Command 'node' not found`, o un número de versión inferior a `v18.14.1`, entonces necesitas [instalar una versión compatible de Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). +Si el comando devuelve un mensaje de error como `Command 'node' not found`, o un número de versión inferior a la requerida, entonces necesitas [instalar una versión compatible de Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). ### Editor de código diff --git a/src/content/docs/es/tutorial/1-setup/2.mdx b/src/content/docs/es/tutorial/1-setup/2.mdx index 87c30c6cde1db..4071435a1a33a 100644 --- a/src/content/docs/es/tutorial/1-setup/2.mdx +++ b/src/content/docs/es/tutorial/1-setup/2.mdx @@ -48,20 +48,19 @@ La forma preferida de crear un nuevo sitio Astro es a través de nuestro asisten -2. Confirma `y` para instalar `create-astro`. -3. Cuando la instrucción te pregunte "Where would you like to create your new project?", escribe el nombre de una carpeta para crear un nuevo directorio para tu proyecto, por ejemplo `./tutorial` +2. Escribe `y` para instalar `create-astro`. + +3. Cuando el asistente te pregunte "Where would you like to create your new project?", escribe el nombre de una carpeta para crear un nuevo directorio para tu proyecto, por ejemplo `./tutorial` :::note Un nuevo proyecto de Astro sólo puede crearse en una carpeta completamente vacía, así que elige un nombre para tu carpeta que no exista. ::: -4. Verás una pequeña lista de plantillas de inicio entre las que puedes elegir. Utiliza las teclas de flecha (arriba y abajo) para navegar hasta la plantilla "Empty" y luego presiona la tecla de retorno (Enter) para enviar tu elección. - -5. Cuando la instrucción te pregunte si planeas escribir TypeScript, escribe `n`. +4. Verás una breve lista de plantillas iniciales para elegir. Usa las teclas de flecha (arriba y abajo) para navegar hasta la plantilla minimal (vacía) y luego presiona return (enter) para confirmar tu elección. -6. Cuando aparezca la pregunta "Would you like to install dependencies?", escribe `y`. +5. Cuando aparezca la pregunta "Would you like to install dependencies?", escribe `y`. -7. Cuando la instrucción te pregunte: "Would you like to initialize a new git repository?", escribe `y`. +6. Cuando la instrucción te pregunte: "Would you like to initialize a new git repository?", escribe `y`. Cuando finalice el asistente de instalación, ya no necesitarás esta terminal. Ahora puedes abrir VS Code para continuar. @@ -69,11 +68,11 @@ Cuando finalice el asistente de instalación, ya no necesitarás esta terminal. ## Abre tu proyecto en VS Code -8. Abre VS Code. Se te pedirá que abra una carpeta. Elige la carpeta que creaste durante el asistente de instalación. +7. Abre VS Code. Se te pedirá que abra una carpeta. Elige la carpeta que creaste durante el asistente de instalación. -9. Si es la primera vez que abres un proyecto de Astro, deberías ver una notificación preguntándote si deseas instalar las extensiones recomendadas. Haz clic para ver las extensiones recomendadas y elige [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Esto proporcionará resaltado de sintaxis y autocompletado para tu código Astro. +8. Si es la primera vez que abres un proyecto de Astro, deberías ver una notificación preguntándote si deseas instalar las extensiones recomendadas. Haz clic para ver las extensiones recomendadas y elige [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Esto proporcionará resaltado de sintaxis y autocompletado para tu código Astro. -10. Asegúrate de que el terminal esté visible y que puedas ver el símbolo del sistema, por ejemplo: +9. Asegúrate de que el terminal esté visible y que puedas ver el símbolo del sistema, por ejemplo: ```sh user@machine:~/tutorial$ @@ -95,7 +94,7 @@ Para poder previsualizar los archivos de tu proyecto _como un sitio web_ mientra ### Inicia el servidor de desarrollo -11. Ejecuta el comando para iniciar el servidor Astro dev escribiendo en el terminal de VS Code: +10. Ejecuta el comando para iniciar el servidor Astro dev escribiendo en el terminal de VS Code: @@ -123,7 +122,7 @@ Para poder previsualizar los archivos de tu proyecto _como un sitio web_ mientra Tus archivos de proyecto contienen todo el código necesario para mostrar un sitio web de Astro, pero el navegador es el responsable de mostrar tu código como páginas web. -12. Haz clic en el enlace `localhost` en la terminal para ver una vista previa en directo de tu nuevo sitio web de Astro. +11. Haz clic en el enlace `localhost` en la terminal para ver una vista previa en directo de tu nuevo sitio web de Astro. (Astro utiliza `http://localhost:4321` por defecto si el puerto `4321` está disponible). diff --git a/src/content/docs/es/tutorial/1-setup/5.mdx b/src/content/docs/es/tutorial/1-setup/5.mdx index d26426d360341..9de95a08700c7 100644 --- a/src/content/docs/es/tutorial/1-setup/5.mdx +++ b/src/content/docs/es/tutorial/1-setup/5.mdx @@ -64,7 +64,7 @@ Quieres actualizar la página de inicio de tu sitio web actual. ¿Qué pasos deb Abro una terminal, ejecuto `create astro`, y luego visito mi URL de Netlify. @@ -154,7 +154,7 @@ La etiqueta de Astro `` de `src/pages/tags/index.astro` y reutilízalo dentro de `MarkdownPostLayout.astro`: - ```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40} + ```astro title="src/layouts/MarkdownPostLayout.astro" ins={11-15, 19-37} --- import BaseLayout from './BaseLayout.astro'; const { frontmatter } = Astro.props; --- -

{frontmatter.description}

{frontmatter.pubDate.toString().slice(0,10)}

- +

{frontmatter.description}

Escrito por: {frontmatter.author}

- {frontmatter.image.alt}
- {tags.map((tag) => ( + {tags.map((tag: string) => (

{tag}

))}
@@ -335,7 +334,7 @@ Para utilizar props (valores pasados) de una entrada de blog `.md` en tu plantil ```astro title="src/layouts/MarkdownPostLayout.astro" "frontmatter"
- {frontmatter.tags.map((tag) => ( + {frontmatter.tags.map((tag: string) => (

{tag}

))}
@@ -363,7 +362,7 @@ const { frontmatter } = Astro.props; {frontmatter.image.alt}
- {frontmatter.tags.map((tag) => ( + {frontmatter.tags.map((tag: string) => (

{tag}

))}
diff --git a/src/content/docs/es/tutorial/5-astro-api/index.mdx b/src/content/docs/es/tutorial/5-astro-api/index.mdx index 76b2bd0a8ef51..03bb7562404a6 100644 --- a/src/content/docs/es/tutorial/5-astro-api/index.mdx +++ b/src/content/docs/es/tutorial/5-astro-api/index.mdx @@ -7,6 +7,9 @@ description: >- Tutorial: Crea tu primer blog con Astro — Obtención y utilización de datos de archivos de proyecto para generar dinámicamente páginas de contenido y rutas +head: + - tag: title + content: 'Tutorial: Crea un blog — Unidad 5: API de Astro | Docs' --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; @@ -22,7 +25,7 @@ Ahora que ya tienes algunas entradas de blog, ¡es hora de utilizar la API de As En esta unidad, mejorarás tu blog con una página de índice, páginas de etiquetas y un feed de RSS. Por el camino, aprenderás a utilizar: -- `Astro.glob()` para acceder a los datos de los archivos de tu proyecto +- `import.meta.glob()` para acceder a los datos de los archivos de tu proyecto - `getStaticPaths()` para crear varias páginas (rutas) a la vez - El paquete Astro RSS para crear un feed RSS. diff --git a/src/content/docs/es/tutorial/6-islands/2.mdx b/src/content/docs/es/tutorial/6-islands/2.mdx index 7c9fce102ca84..c252763539f14 100644 --- a/src/content/docs/es/tutorial/6-islands/2.mdx +++ b/src/content/docs/es/tutorial/6-islands/2.mdx @@ -30,8 +30,8 @@ Vamos a crear un icono en el que se pueda hacer clic para que los usuarios pueda ```astro title="src/components/ThemeIcon.astro" --- --- - - + + + + +## Próximos pasos + +¡Puedes mejorar el código final de este proyecto con una de nuestras extensiones de tutorial, o comenzar tu próximo proyecto con Astro! + + + + + \ No newline at end of file diff --git a/src/content/docs/es/tutorial/6-islands/4.mdx b/src/content/docs/es/tutorial/6-islands/4.mdx index 332658a62fa65..345d6562d1b4f 100644 --- a/src/content/docs/es/tutorial/6-islands/4.mdx +++ b/src/content/docs/es/tutorial/6-islands/4.mdx @@ -5,6 +5,9 @@ description: |- Tutorial: Construye tu primer blog de Astro — Convierte tu blog del enrutamiento basado en archivos a colecciones de contenido i18nReady: true +head: + - tag: title + content: 'Tutorial: Crea un blog — Crear una colección de contenido | Docs' --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import Box from '~/components/tutorial/Box.astro'; diff --git a/src/content/docs/es/tutorial/6-islands/index.mdx b/src/content/docs/es/tutorial/6-islands/index.mdx index 649c7e4c0277f..7d41f15014b4c 100644 --- a/src/content/docs/es/tutorial/6-islands/index.mdx +++ b/src/content/docs/es/tutorial/6-islands/index.mdx @@ -6,6 +6,9 @@ i18nReady: true description: |- Tutorial: Crea tu primer blog con Astro — Utiliza las islas de Astro para incorporar componentes de frameworks del lado del cliente en tu sitio de Astro. +head: + - tag: title + content: 'Tutorial: Crea un blog — Unidad 6: Astro Islands | Docs' --- import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; @@ -29,7 +32,7 @@ Aprenderás a: ## Checklist - + - [ ] ¡Estoy listo para agregar interactividad a mi sitio y comenzar a vivir esa vida de isla!