i18n(es): update tutorial

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.

src/content/docs/es/tutorial/1-setup/1.mdx

@@ -28,20 +28,20 @@ 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:
 
 ```sh
 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
 

src/content/docs/es/tutorial/1-setup/2.mdx

@@ -48,32 +48,31 @@ La forma preferida de crear un nuevo sitio Astro es a través de nuestro asisten
       </Fragment>
     </PackageManagerTabs>
 
-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`.
 </Steps>
 
 Cuando finalice el asistente de instalación, ya no necesitarás esta terminal. Ahora puedes abrir VS Code para continuar.
 
 ## Abre tu proyecto en VS Code
 
 <Steps>
-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
 
 <Steps>
-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:
 
     <PackageManagerTabs>
       <Fragment slot="npm">
@@ -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.
 
 <Steps>
-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).
 

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.
     </Option>
     <Option>
-      Cambio una configuración en mi aplicación Netlify, luego hago un fork nuevo del proyecto Astro en StackBlitz.
+      Cambio una configuración en mi aplicación de Netlify y luego inicio un nuevo proyecto de Astro en astro.new.
     </Option>
     <Option isCorrect>
       Edito `index.astro`. Confirmo y envío mis cambios a GitHub. Netlify se encargará del resto.

src/content/docs/es/tutorial/1-setup/index.mdx

@@ -7,6 +7,9 @@ description: >-
   Tutorial: Crea tu primer blog con Astro —
   Prepara tu entorno de desarrollo, crea y despliega tu primer sitio Astro
   sitio
+head:
+  - tag: title
+    content: 'Tutorial: Crea un blog — Unidad 1: Configuración | Docs'
 ---
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
@@ -16,11 +19,54 @@ Ahora que ya sabes lo que vas a construir, ¡es hora a preparar todas las herram
 
 Esta unidad te muestra cómo configurar tu entorno de desarrollo y desplegar en Netlify. Pasa a la [Unidad 2](/es/tutorial/2-pages/) si ya te sientes cómodo con tu entorno y flujo de trabajo.
 
-:::tip[Utilizando stackblitz]
+:::tip[Haz el tutorial en un editor de código en línea]
 
-¿Quieres completar este tutorial en un editor de código en línea en su lugar?
+¿Quieres completar este tutorial en un editor de código en línea? Sigue las instrucciones a continuación para comenzar en Google IDX.
+
+<details>
+<summary>Usando Google IDX: ¡Sigue estas instrucciones y luego ve directamente a la Unidad 2!</summary>
+
+**Configurar IDX**
+
+<Steps>
+1. Sigue el enlace externo para [abrir la plantilla “Empty Project” en un nuevo espacio de trabajo en IDX](https://astro.new/minimal?on=idx).
+
+2. Sigue la indicación para iniciar sesión con tu cuenta de Google si aún no lo has hecho.
+
+3. Ingresa un nombre para tu proyecto si deseas cambiarlo del predeterminado “Empty Project”. Haz clic en **Create**.
+
+4. Espera a que se cree el espacio de trabajo. Esto puede tardar entre 30 y 60 segundos. Si todo va bien, verás el proyecto de Astro cargado en un editor de código en línea.
+
+5. Espera a que IDX ejecute dos scripts: uno para instalar Astro y otro para iniciar el servidor de desarrollo. Ten en cuenta que puede aparecer brevemente un mensaje indicando que tu espacio de trabajo “no pudo encontrar Astro” si este se carga antes de que la instalación haya finalizado. Este mensaje puede ignorarse y cerrarse si no desaparece automáticamente.
+</Steps>
+
+**Haz un cambio**
+
+Si todo va bien, deberías ver el código del archivo `src/pages/index.astro` abierto en pantalla dividida junto con una vista previa en vivo del sitio web. Sigue la instrucción para ["Escribir tu primera línea de Astro"](/es/tutorial/1-setup/3/) y realiza un cambio en este archivo.
+
+**Crea un repositorio de GitHub**
+
+<Steps>
+1. Ve al elemento de navegación **“Source Control”** en la barra de menú vertical, o ábrelo con <kbd>CTRL + SHIFT + G</kbd>.
+
+2. Selecciona la opción **Publicar en GitHub**. Esto creará un nuevo repositorio en tu cuenta de GitHub.
+3. Sigue las indicaciones para iniciar sesión en tu cuenta de GitHub.
+4. Una vez que hayas iniciado sesión, regresa a la pestaña de IDX y se te dará la opción de nombrar tu nuevo repositorio y decidir si quieres que sea privado o público. Puedes elegir cualquier nombre y tipo de repositorio para este tutorial.
+5. IDX realizará un *commit* inicial y publicará el proyecto en tu nuevo repositorio de GitHub.
+6. A partir de ahora, cada vez que tengas cambios para enviar a GitHub, el ícono de **Source Control** mostrará un número. Este indica la cantidad de archivos que han cambiado desde tu último *commit*. Navega a esta pestaña y realiza dos pasos (*commit* y *publish*) para ingresar un mensaje de *commit* y actualizar tu repositorio."
+</Steps>
+
+**Despliega tu sitio**
+
+Si deseas implementar tu sitio en Netlify y tener una versión publicada en línea mientras trabajas, continúa en la Unidad 1 con [Despliega tu sitio en la web](/es/tutorial/1-setup/5/).
+
+De lo contrario, salta a la [Unidad 2](/es/tutorial/2-pages/) para comenzar a crear con Astro.
+
+</details>
+
+{/* StackBlitz instructions
 <details>
-<summary>Sigue estas instrucciones y pasa directamente a la Unidad 2.</summary>
+<summary>Usando StackBlitz: Sigue estas instrucciones y pasa directamente a la Unidad 2.</summary>
 
 **Configura StackBlitz**
 
@@ -47,11 +93,13 @@ En el panel de archivos, deberías ver `src/pages/index.astro`. Haz clic para ab
 </Steps>
 
 **Despliega tu sitio**
-
 Si quieres desplegar tu sitio en Netlify, pasa a [Despliega tu sitio en la web](/es/tutorial/1-setup/5/).
+
+
 ¡Si no, pasa a [Unidad 2](/es/tutorial/2-pages/) para empezar a construir con Astro!
 
 </details>
+*/}
 :::
 
 ## ¿A dónde vas?

src/content/docs/es/tutorial/2-pages/2.mdx

@@ -49,8 +49,8 @@ Ahora que ya has creado páginas con archivos `.astro`, ¡es hora de crear algun
     description: 'Este es la primera publicación de mi nuevo blog Astro.'
     author: 'Alumno de Astro'
     image:
-        url: 'https://docs.astro.build/assets/full-logo-light.png' 
-        alt: 'El logotipo completo de Astro.'
+        url: 'https://docs.astro.build/assets/rose.webp' 
+        alt: 'El logotipo de Astro sobre un fondo oscuro con un brillo rosado.'
     tags: ["astro", "bloguear", "aprender en público"]
     ---
     # Mi primera publicación en el blog
@@ -117,7 +117,7 @@ La información en la parte superior del archivo, dentro de las vallas de códig
     description: "Después de aprender un poco de Astro, ¡no podía parar!"
     image: 
         url: "https://docs.astro.build/assets/arc.webp"
-        alt: "Miniatura de los arcos de Astro."
+        alt: "El logotipo de Astro sobre un fondo oscuro con un arco degradado en tonos púrpura."
     pubDate: 2022-07-08
     tags: ["astro", "bloguear", "aprender en público", "éxitos"]
     ---
@@ -131,7 +131,7 @@ La información en la parte superior del archivo, dentro de las vallas de códig
     description: "Tuve algunos problemas, pero preguntar en la comunidad me ayudó mucho."
     image: 
         url: "https://docs.astro.build/assets/rays.webp"
-        alt: "Miniatura de los rayos de Astro."
+        alt: "El logotipo de Astro sobre un fondo oscuro con rayos de colores del arcoíris."
     pubDate: 2022-07-15
     tags: ["astro", "aprender en público", "contratiempos", "comunidad"]
     ---

src/content/docs/es/tutorial/2-pages/4.mdx

@@ -109,7 +109,7 @@ La etiqueta de Astro `<style>` también puede hacer referencia a cualquier varia
     const finished = false;
     const goal = 3;
 
-    const skillColor = "navy";
+    const skillColor = "crimson";
     ---
     ```
 
@@ -129,7 +129,7 @@ La etiqueta de Astro `<style>` también puede hacer referencia a cualquier varia
     </style>
     ```
 
-3. Comprueba tu página 'Acerca de' en la vista previa de tu navegador. Deberías ver que las habilidades son ahora de color azul marino, tal y como establece la variable `skillColor` pasada a la directiva `define:vars`.
+3. Comprueba tu página 'Acerca de' en la vista previa de tu navegador. Deberías ver que las habilidades son ahora de color rojo carmesí, tal y como establece la variable `skillColor` pasada a la directiva `define:vars`.
 </Steps>
 
 <Box icon="puzzle-piece">
@@ -154,7 +154,7 @@ La etiqueta de Astro `<style>` también puede hacer referencia a cualquier varia
     ```
 
  2. Añade las definiciones de variables que falten en tu script frontmatter para que tu nueva etiqueta `<style>` aplique correctamente estos estilos a tu lista de habilidades:
-    - El color del texto es azul marino
+    - El color del texto es rojo carmesí
     - El texto está en negrita
     - Los elementos de la lista están en mayúsculas (todo en mayúsculas)
 </Steps>
@@ -178,7 +178,7 @@ const happy = true;
 const finished = false;
 const goal = 3;
 
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---

src/content/docs/es/tutorial/2-pages/5.mdx

@@ -74,7 +74,7 @@ Hay varias formas de definir estilos **globales** en Astro, pero en este tutoria
     const finished = false;
     const goal = 3;
 
-    const skillColor = "navy";
+    const skillColor = "crimson";
     const fontWeight = "bold";
     const textCase = "uppercase";
     ---

src/content/docs/es/tutorial/2-pages/index.mdx

@@ -6,6 +6,9 @@ i18nReady: true
 description: |-
   Tutorial: Crea tu primer blog con Astro —
   Crea, estila y enlaza publicaciones a páginas de tu sitio web
+head:
+  - tag: title
+    content: 'Tutorial: Crea un blog — Unidad 2: Páginas | Docs'
 ---
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';

src/content/docs/es/tutorial/3-components/1.mdx

@@ -52,9 +52,12 @@ Para guardar los archivos `.astro` que generarán HTML pero que no se convertir
 <Steps>
 1. Vuelve a `index.astro` e importa tu nuevo componente dentro del bloque de código:
 
-    ```astro title="src/pages/index.astro"
+    ```astro title="src/pages/index.astro" ins={2}
     ---
     import Navigation from '../components/Navigation.astro';
+    import "../styles/global.css";
+
+    const pageTitle = "Home Page";
     ---
     ```
 

src/content/docs/es/tutorial/3-components/3.mdx

@@ -94,15 +94,15 @@ Dado que tu sitio se verá en distintos dispositivos, ¡es hora de crear una nav
 ## Añade estilos responsivos
 
 <Steps>
-1. Actualiza `Navigation.astro` con la clase CSS para controlar tus enlaces de navegación. Envuelve los enlaces de navegación existentes en un `<div>` con la clase `nav-links`.
+1. Actualiza `Navigation.astro` con la clase CSS para controlar tus enlaces de navegación. Envuelve los enlaces de navegación existentes en un `<div>` con la clase `nav-links` y el atributo `id` establecido como `main-menu`.
 
     ```astro title="src/components/Navigation.astro" ins={3,7}
     ---
     ---
-    <div class="nav-links">
+    <div id="main-menu" class="nav-links">
       <a href="/">Inicio</a>
-      <a href="/about">Sobre mi</a>
-      <a href="/blog">Blog</a>
+      <a href="/about/">Sobre mi</a>
+      <a href="/blog/">Blog</a>
     </div>
     ```
 
@@ -116,7 +116,7 @@ Dado que tu sitio se verá en distintos dispositivos, ¡es hora de crear una nav
     Empieza por definir qué debe ocurrir en las pantallas pequeñas. Las pantallas pequeñas requieren diseños más sencillos. A continuación, ajusta tus estilos para adaptarse a dispositivos más grandes. Si diseñas primero el caso complicado, luego tendrás que trabajar para intentar hacerlo sencillo de nuevo.
     :::
 
-    ```css title="src/styles/global.css" ins={23-100}
+    ```css title="src/styles/global.css" ins={23-60}
     html {
       background-color: #f1f5f9;
       font-family: sans-serif;
@@ -143,9 +143,6 @@ Dado que tu sitio se verá en distintos dispositivos, ¡es hora de crear una nav
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -158,16 +155,14 @@ Dado que tu sitio se verá en distintos dispositivos, ¡es hora de crear una nav
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
     .nav-links a:hover,
     .nav-links a:focus {
       background-color: #ff9776;
     }
 
-    .expanded {
-      display: unset;
-    }
 
     @media screen and (min-width: 636px) {
       .nav-links {
@@ -182,15 +177,12 @@ Dado que tu sitio se verá en distintos dispositivos, ¡es hora de crear una nav
         display: inline-block;
         padding: 15px 20px;
       }
-
     }
     ```
 </Steps>
 
 Cambia el tamaño de la ventana y comprueba si se aplican diferentes estilos a diferentes anchos de pantalla. Tu encabezado es ahora **responsiva** al tamaño de la pantalla mediante el uso de consultas `@media`.
 
-
-
 <Box icon="check-list">
 
 ## Checklist