Fixed typos in 04-frameworks/15-astro readmes

04-frameworks/15-astro/01-entorno/readme.md

@@ -1,9 +1,16 @@
+!["Es una imagen del framework Astro"](./content/astro_banner.jpg)
 # Preparando el entorno
 
-Lo primero instalamos el plugin de Astro en Visual Studio Code.
+Lo primero, instalamos el plugin de Astro en Visual Studio Code.
+
+![Apartado extensiones de Visual Studio Code](./content/Extensiones%20visual%20studio%20code.png)
+
+![Ponemos astro en el buscador del apartado de extensiones](./content/Plugin%20astro.png)
+
+![Plugin de Astro en Visual Studio Code](./content/Astro.png)
 
 Esto nos va a ser de ayuda, tenemos syntax highlighting, intellisense...
 
-Por cierto si buscamos Astro en Google no nos sale de primeras, mejor buscar `Astro Framework` o `Astro JS`.
+Por cierto, si buscamos Astro en Google no nos sale de primeras, mejor buscar `Astro Framework` o `Astro JS`.
 
 https://astro.build/

04-frameworks/15-astro/02-creando-proyecto/readme.md

@@ -15,9 +15,9 @@ Vamos a crear un proyecto desde cero, para ello usamos la tool de `Astro`:
 npm create astro@latest
 ```
 
-En la primera pregunta, `Where would you lik to create your new project?`, le decimos damos como nombre de carpeta `ejemplo`.
+En la primera pregunta, `Where would you like to create your new project?`, le damos como nombre de carpeta `ejemplo`.
 
-`Where would you lik to create your new project?`
+`Where would you like to create your new project?`
 ejemplo
 
 En cuanto a plantillas, vamos a decirle que partimos de un proyecto desde cero: `Empty Template`.

04-frameworks/15-astro/03-creando-repo/readme.md

@@ -6,12 +6,12 @@ OJO en el repo del Máster Front End no hemos añadido este paso (no hay repo lo
 
 Así que vamos a crearlo en directo :), podéis seguirme (puede que este paso nos de problemas a más de uno).
 
-Vamos a github, creamo un repo en nuestra cuenta.
+Vamos a github, creamos un repo en nuestra cuenta.
 
 Creamos un nuevo repo desde Github, IMPORTANTE:
   - Dejalo como público (podría ser privado).
 
-  - No le pongas un README (dejalo desmarcado).ñ
+  - No le pongas un README (dejalo desmarcado).
 
   - No añadas un `.gitignore` ni una licencia.
 

04-frameworks/15-astro/04-desplegando-github-io/readme.md

@@ -65,11 +65,11 @@ jobs:
         uses: actions/deploy-pages@v1
 ```
 
-¿Qué pasos seguimos aquí? Le estoy indicando
+¿Qué pasos seguimos aquí? Le estoy indicando:
 
 - Que cuando se haga un push a main, se dispare esta acción.
 
-- Definimos los permisos que necesita esta acción (por ejemplo que tenga permisos de escritura en Github Pages).
+- Definimos los permisos que necesita esta acción (por ejemplo, que tenga permisos de escritura en Github Pages).
 
 - Le decimos que vamos a tener dos jobs:
 
@@ -89,15 +89,15 @@ jobs:
   - Le decimos que necesita el primer job (que lo ejecute).
   - Con el resultado del primer job, que suba el contenido a Github Pages.
 
-Vamo a hacer un commit un push y ver que pasa...
+Vamos a hacer un commit y un push y ver que pasa...
 
 En este caso el deploy nos falla, porque no hemos configurado Github Pages en el repo.
 
 ```
 Error: Error: Failed to create deployment (status: 404) with build version c66b3eb208d20489468f73217b174641f7b469a3. Ensure GitHub Pages has been enabled: https://github.com/brauliodiez/otra-prueba-astro/settings/pages
 ```
 
-Nos vamos a lo settings y lo configuramos (seccion pages >> elegir rama main).
+Nos vamos a los settings y lo configuramos (sección pages >> elegir rama main).
 
 ![Drawer menu settings pages](./content/settings-menu.png)
 
@@ -109,7 +109,7 @@ Si no se ha relanzado, podemos probar a lanzarlo manualmente desde el tab de _ac
 
 Tu página será:
 
-http://<aliasgithub>.github.io/<nombre-repo>
+http://\<aliasgithub>.github.io/\<nombre-repo>
 
 https://brauliodiez.github.io/otra-prueba-astro/
 

04-frameworks/15-astro/05-creando-paginas/readme.md

@@ -7,7 +7,7 @@ Vamos a crear páginas nuevas en Astro, y ver como funcionan, en este caso las p
 
 # A tener en cuenta:
 
-- En el ejemplo del repo del máster hemos eliminado la accíon para desplegar automáticamente (si quieres habilitarlo en tu repo, puedes seguir los ejemplos anteriores).
+- En el ejemplo del repo del máster hemos eliminado la acción para desplegar automáticamente (si quieres habilitarlo en tu repo, puedes seguir los ejemplos anteriores).
 
 - Recuerda tener instalada la extensión de VSC para Astro.
 
@@ -32,7 +32,7 @@ _./src/pages/about.astro_
 
     <p>Esta es la página de "acerca de".</p>
 
-    <p>Aquí iría to BIO</p>
+    <p>Aquí iría tu BIO</p>
     </body>
 </html>
 ```
@@ -63,22 +63,22 @@ _./src/pages/blog.astro_
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Acerca de</title>
+		<title>Blog</title>
 	</head>
 	<body>
     <a href="/">Home</a>
     <a href="/blog/">Blog</a>
     <a href="/about/">About</a>
 
     <h1>Blog</h1>
-    <h2>Aqui va mi listado de posts</h2>
+    <h2>Aquí va mi listado de posts</h2>
     </body>
 </html>
 ```
 
 Y modificamos los enlaces en el about también:
 
-_./src/layouts/about.astro_
+_./src/pages/about.astro_
 
 ```diff
 	<body>
@@ -92,7 +92,7 @@ _./src/layouts/about.astro_
 
 Y ya que estamos en la página principal:
 
-_./src/layouts/index.astro_
+_./src/pages/index.astro_
 
 ```diff
   <body>
@@ -105,4 +105,4 @@ _./src/layouts/index.astro_
 
 Si ejecutamos podemos ver que la navegación funciona correctamente.
 
-Si hacemos commit y push podemos ver que se lanza la Github Actions y en unos minutos veremos la web actualizado en gh-pages.
+Si hacemos commit y push podemos ver que se lanza la Github Actions y en unos minutos veremos la web actualizada en gh-pages.

04-frameworks/15-astro/06-markdown/readme.md

@@ -47,7 +47,7 @@ Fijate que automáticamente `Astro` ha convertido nuestro archivo markdown en un
 
 > La información en la parte superior del archivo, que aparece como entre rejas, se llama frontmatter. Estos datos, que incluyen etiquetas (tags) y una imagen para la publicación, son información sobre tu publicación que Astro puede utilizar. No aparece automáticamente en la página, pero más adelante en el tutorial la usarás para mejorar tu sitio.
 
-Vamos a añadir un enlace al post en la página de posts:
+Vamos a añadir un enlace al post en la lista de posts:
 
 _./src/pages/blog.astro_
 
@@ -93,7 +93,7 @@ pubDate: 2024-11-25
 tags: ["astro", "blogging", "learning in public", "successes"]
 ---
 
-Ahí vamos, ya tenemos un tecer post aqui.
+Ahí vamos, ya tenemos un tercer post aqui.
 ```
 
 Y los añadimos a la lista de posts:

04-frameworks/15-astro/07-contenido-dinamico/readme.md

@@ -121,13 +121,14 @@ _./src/pages/about.astro_
 
     <p>Esta es la página de "acerca de".</p>
 
--    <p>Aquí iría to BIO</p>
+-    <p>Aquí iría tu BIO</p>
+<p>Here are a few facts about me:</p>
 +  <p>Sobre mi:</p>
 +  <ul>
 +    <li>Me llamo {identity.firstName}.</li>
-+    <li>vivo en {identity.country} y trabajo com {identity.occupation}.</li>
++    <li>vivo en {identity.country} y trabajo como {identity.occupation}.</li>
 +    {identity.hobbies.length >= 2 &&
-+      <li>Dos de mis hobbies son: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
++      <li>Dos de mis hobbies son: {identity.hobbies[0]} y {identity.hobbies[1]}</li>
 +    }
 +  </ul>
 +  <p>Mis skills:</p>
@@ -138,7 +139,8 @@ _./src/pages/about.astro_
 </html>
 ```
 
-También tenemos soporte para endering condicional como en React:
+
+También tenemos soporte para rendering condicional como en React:
 
 _./src/pages/about.astro_
 
@@ -168,7 +170,7 @@ const skills = ["HTML", "CSS", "JavaScript", "React", "Astro"];
 <ul>
   {skills.map((skill) => <li>{skill}</li>)}
 </ul>
-+ {happy && <p>Estoy mu contento !</p>}
++ {happy && <p>Estoy mu contento!</p>}
 
 + {finished && <p>He completado este tutorial</p>}
 

04-frameworks/15-astro/08-estilado-con-scope/readme.md

@@ -1,6 +1,6 @@
 # Estilado con Scope
 
-Vamos a cubrir un tema interesante y es el estilado.
+Vamos a cubrir un tema interesante, y es el estilado.
 
 En Astro podemos tener dos tipos de estilos:
 
@@ -11,7 +11,7 @@ Arrancamos con los locales.
 
 # Manos a la obra
 
-Una forma muy aceptada de usar estilos en Astro es metiendolos dentro del propios fichero.
+Una forma muy aceptada de usar estilos en Astro es metiendolos dentro del propio fichero.
 
 Vamos a empezar por estilar los _h1_
 
@@ -34,7 +34,7 @@ _./src/pages/about.astro_
   </head>
 ```
 
-Como puedes ver el _h1_ estilado se muestra solo en la página de _about_.
+Como puedes ver el _h1_ estilado se muestra sólo en la página de _about_.
 
 Vamos a añadir una clase:
 
@@ -134,7 +134,7 @@ import type { Identity } from "./about.model.ts";
     </ul>
 ```
 
-¿Por qué volvemos? Porque en el `style` de astro nos trae azucar para definir variable CSS.
+¿Por qué volvemos? Porque en el `style` de astro nos trae azúcar para definir variables CSS.
 
 Vamos a defininir una variable con el color de los skills.
 

04-frameworks/15-astro/09-estilado-global/readme.md

@@ -1,6 +1,6 @@
 # Estilado global
 
-Ya hemos visto el estilo local en las páginas, pero hay veces que necesitamos definir estilos globales sin escapar, vamos a ver como hacelro.
+Ya hemos visto el estilo local en las páginas, pero hay veces que necesitamos definir estilos globales sin escapar, vamos a ver como hacerlo.
 
 # Manos a la obra
 

04-frameworks/15-astro/10-componentes/readme.md

@@ -6,10 +6,10 @@ Vamos a ver como podemos definir componentes en _astro_
 
 En concreto vamos a ver como crear:
 
-- Un barra de navegación.
+- Una barra de navegación.
 - Un footer.
 - Un componente de redes sociales.
-- Un menú de navegacíon
+- Un menú de navegación
 
 # Manos a la obra
 

04-frameworks/15-astro/11-ejecutando-js-navegador/readme.md

@@ -2,15 +2,15 @@
 
 Hasta ahora todo el código que hemos escrito se ha ejecutado en nuestra máquina local en tiempo de generación de las páginas HTML finales.
 
-Pero ¿Qué pasa si necesito ejecutar JavaScript en el navegador? Es muy normal quere meter interactividad más avanzada y no sólo HTML.
+Pero, ¿Qué pasa si necesito ejecutar JavaScript en el navegador? Es muy normal querer meter interactividad más avanzada y no sólo HTML.
 
 Vamos a ello.
 
 # Manos a la obra
 
-El menú de cabecera sólo funciona bien si estamos en escritorio, si nos vamos a resolucón de móvil, nos haría falta ocultar el menú horizontal y mostrar un menú hamburguesa, para eso nos hace falta JavaScript.
+El menú de cabecera sólo funciona bien si estamos en escritorio, si nos vamos a resolución de móvil, nos haría falta ocultar el menú horizontal y mostrar un menú hamburguesa, para eso nos hace falta JavaScript.
 
-Creamos un component Hamburguer (la opción del menú con tres lineas)
+Creamos un componente Hamburguer (la opción del menú con tres lineas)
 
 _./src/components/hamburger.astro_
 
@@ -24,7 +24,7 @@ _./src/components/hamburger.astro_
 </div>
 ```
 
-Vamos crear un componente de cabecera
+Vamos a crear un componente de cabecera
 
 _./src/components/header.astro_
 
@@ -184,7 +184,7 @@ _./src/pages/index.astro_
 </html>
 ```
 
-Esto no está mal, pero primero estamos metiendo JS dentro de la página, algo un poco feo y por otro lado no podemos usar _TypeScript_ vamos a sacar esto a un fichero externo.
+Esto no está mal, pero, primero estamos metiendo JS dentro de la página, algo un poco feo y por otro lado, no podemos usar _TypeScript_ vamos a sacar esto a un fichero externo.
 
 Primero eliminamos lo que habíamos incluido:
 

04-frameworks/15-astro/12-layout/readme.md

@@ -34,7 +34,7 @@ const pageTitle = "Home Page";
 </html>
 ```
 
-Hasta aquí más o menos, pero entre el _header_ y el _footer_ tiene que ir el contenido ¿Qué hacemos? En React tenemos la propiedad _children_ que nos permite hacer esto, en Astro tenemos algo parecido, se llama _slot_.
+Hasta aquí más o menos, pero entre el _header_ y el _footer_ tiene que ir el contenido. ¿Qué hacemos? En React tenemos la propiedad _children_ que nos permite hacer esto, en Astro tenemos algo parecido, se llama _slot_.
 
 ```diff
   <body>
@@ -43,7 +43,7 @@ Hasta aquí más o menos, pero entre el _header_ y el _footer_ tiene que ir el c
 +   <slot />
     <Footer />
     <script>
-      import "../scripts/menu.js";
+      import "../scripts/hamburger.ts";
     </script>
   </body>
 ```
@@ -82,7 +82,7 @@ _./src/pages/index.astro_
 -</html>
 ```
 
-Nos falta un detalle, para el _h1_ del layout base, lo suyo es poder pasarle el contenido por prop, vamos a ello:
+Nos falta un detalle, para el _h1_ del layout base, lo suyo es poder pasarle el contenido por props, vamos a ello:
 
 _./src/layouts/base.astro_
 
@@ -149,7 +149,7 @@ _./src/pages/blog.astro_
       <li><a href="/posts/post-2/">Post 2</a></li>
       <li><a href="/posts/post-3/">Post 3</a></li>
     </ul>
-+ <BaseLayout>
++ </BaseLayout>
   </body>
 </html>
 ```
@@ -159,6 +159,7 @@ _./src/pages/about.astro_
 ```diff
 ---
 - import "../styles/global.css";
++ import BaseLayout from "../layouts/base.astro";
 import type { Identity } from "./about.model.ts";
 - import Navigation from "../components/navigation.astro";
 + import BaseLayout from "../layouts/base.astro";

04-frameworks/15-astro/13-layout-md/readme.md

@@ -3,7 +3,7 @@
 Ya tenemos el layout definido en... casí todas las ventanas, nos queda cunado pinchamos en un post, aquí podríamos:
 
 - Usar el componente `Markdown` de Astro y encastrarlo todo en un layout.
-- Definie un layou para el markdown.
+- Definir un layout para el markdown.
 
 # Manos a la obra
 
@@ -61,7 +61,7 @@ _./src/pages/posts/post-2.md_
 ```diff
 ---
 + layout: ../../layouts/markdown-post.astro
-title: Mi Segundo Post
+title: Mi segundo post
 author: Lemoncoder
 description: "Segundo post para el ejemplo"
 image:
@@ -81,7 +81,7 @@ _./src/pages/posts/post-3.md_
 ```diff
 ---
 + layout: ../../layouts/markdown-post.astro
-title: Mi tercer Post
+title: Mi tercer post
 author: Lemoncoder
 description: "Tercer post para el ejemplo"
 image:

04-frameworks/15-astro/14-astro-api/readme.md

@@ -2,11 +2,11 @@
 
 Vamos a ver como podemos hacer para poder leer listas de ficheros en nuestro proyecto Astro.
 
-En concreto vamos a leer la lista de posts que tenemos y mostrarla en una página de listado de posts.
+En concreto, vamos a leer la lista de posts que tenemos y mostrarla en una página de listado de posts.
 
 # Manos a la obra
 
-Tenemos una página con un listado de posts `blog.astro`, vamos a leer lost posts de la lista de markdowns que tenemos y mostrarlos.
+Tenemos una página con un listado de posts `blog.astro`, vamos a leer los posts de la lista de markdowns que tenemos y mostrarlos.
 
 _./src/pages/blog.astro_
 
@@ -66,7 +66,7 @@ _./src/pages/posts/post-4.md_
 ```md
 ---
 layout: ../../layouts/markdown-post.astro
-title: Cuarto Post
+title: Cuarto post
 author: Lemoncode
 description: "Este post lo creamos y se muestra del tirón"
 image:
@@ -79,4 +79,4 @@ tags: ["astro", "successes"]
 Este es el cuarto post, si tenemos el proyecto arrancado, se regenerará y mostrará este cuarto post
 ```
 
-Y ahora podrás pensar, oye es que me quiero mostrarlo ordenado por fecha, pues, lo tienes fácil, la lista la tienes tipada junto con sus campos del front matter y podrías hacer un sort por el campo fecha.
+Y ahora podrás pensar, oye es que quiero mostrarlo ordenado por fecha, pues, lo tienes fácil, la lista la tienes tipada junto con sus campos del front matter y podrías hacer un sort por el campo fecha.