updtes readm

Author: brauliodiez

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

@@ -90,7 +90,7 @@ _./src/layouts/about.astro_
     <h2>Y mi nuevo blog</h2>
 ```
 
-Y ya que estamos en la págia principal:
+Y ya que estamos en la página principal:
 
 _./src/layouts/index.astro_
 

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

@@ -122,7 +122,7 @@ _./src/pages/about.astro_
     <p>Esta es la página de "acerca de".</p>
 
 -    <p>Aquí iría to 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>
@@ -138,7 +138,7 @@ _./src/pages/about.astro_
 </html>
 ```
 
-También esto soporte rendering condicional como en React:
+También tenemos soporte para endering condicional como en React:
 
 _./src/pages/about.astro_
 
@@ -186,7 +186,7 @@ npm install --save-dev prettier-plugin-astro
 
 - Crear un fichero `.prettierrc` en la raíz del proyecto con el siguiente contenido:
 
-\__.prettierrc_
+_.prettierrc_
 
 ```json
 {
@@ -211,3 +211,5 @@ module.exports = {
   plugins: [require("prettier-plugin-astro")],
 };
 ```
+
+> Ojo si no ten funciona, asegurate que tienes abierto el proyecto en la carpeta raíz donde está el fichero `.prettierrc`, tambíen prueba a recargar las pestañas.

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

@@ -70,7 +70,9 @@ y
 
 Vamos a probarlo
 
+```bash
 npm run dev
+```
 
 También podemos sacar los estilos fuera, le metemos el prefijo _.modules_ para que tenga scope
 Si lo ponemos sin modules:
@@ -89,7 +91,7 @@ _./src/pages/about.astro_
 ```diff
 ---
 import type { Identity } from "./about.model.ts";
-+ import styles from "./about.css";
++ import styles from "./about.module.css";
 
 const pageTitle = "Acerca de dinámico";
 ```

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

@@ -101,6 +101,8 @@ import "../styles/global.css";
     <h1>Blog</h1>
 ```
 
+Y en la principal tambien (index), mismos pasos
+
 Vamos a crear un footer:
 
 _./src/components/footer.astro_
@@ -116,8 +118,6 @@ const username = "lemoncode";
 </footer>
 ```
 
-Vamos a importarlo y cambiarlo en la ventana principal
-
 _./src/index.astro_
 
 ````diff
@@ -312,3 +312,4 @@ h1 {
 +
 + }
 ```
+> Si no ves nada es que está en resolucíon móvil (mira la media query), si lo haces más grande se ve (más adelante implementaremos menú hamburguesa para móvil).

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

@@ -10,7 +10,7 @@ Vamos a ello.
 
 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.
 
-Creamos un component Hamburguer.
+Creamos un component Hamburguer (la opción del menú con tres lineas)
 
 _./src/components/hamburger.astro_
 
@@ -123,6 +123,7 @@ h1 {
     display: inline-block;
     padding: 15px 20px;
   }
+  /* OJO ESTO DENTRO DE LA MEDIA QUERY*/
 +  .hamburger {
 +    display: none;
 +  }

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

@@ -161,6 +161,7 @@ _./src/pages/about.astro_
 - import "../styles/global.css";
 import type { Identity } from "./about.model.ts";
 - import Navigation from "../components/navigation.astro";
++ import BaseLayout from "../layouts/base.astro";
 
 const pageTitle = "Acerca de dinámico";
 

04-frameworks/15-astro/15-rutas-dinamicas/readme.md

@@ -1,3 +1,5 @@
+# Rutas dinámicas
+
 Hemos generado una lista de posts estática, pero ¿qué pasa si queremos mostrar una lista paginada de posts? ¿cómo podría hacerlo?
 
 ¿Y si quisiera hacerlo paginado? Aquí podría crearme una pagina con los 10 primeros posts y después generar paginas dinámicas, del tipo `blog/[page].astro` para ir renderizando los posts correspondientes a cada página.
@@ -86,6 +88,7 @@ _./src/pages/tags/[tag].astro_
 
 ```diff
 ---
++ import type { MarkdownInstance } from "astro";
 import BaseLayout from '../../layouts/base.astro';
 
 + // Deberíamos mover esto a un fichero de modelo común
@@ -105,30 +108,31 @@ import BaseLayout from '../../layouts/base.astro';
 +
 + // Tipar las props
 + interface Props {
-+  posts: MarkdownInstance<Record<string, Frontmatter>>[];
++  posts: MarkdownInstance<Frontmatter>[];
 + }
 
 // Define los tipos para las rutas estáticas
 interface StaticPath {
   params: {
     tag: string;
-+   props: Props;
   };
++   props: Props;
 }
 
 export async function getStaticPaths(): Promise<StaticPath[]> {
 + const allPosts = await Astro.glob<Frontmatter>('../posts/*.md');
 
   return [
 -    { params: { tag: "astro" } },
-+    { params: { tag: "astro"}, props: {posts: allPosts} },
++    { params: { tag: "astro" }, props: { posts: allPosts } },
 -    { params: { tag: "blogging" } },
-+   { params: { tag: "blogging"}, props: {posts: allPosts} },
++    { params: { tag: "blogging" }, props: { posts: allPosts } },
 -    { params: { tag: "hola mundo" } },
-+   { params: { tag: "hola mundo"}, props: {posts: allPosts} },
++   { params: { tag: "hola mundo" }, props: { posts: allPosts } },
 -    { params: { tag: "learning in public" } },
-+   { params: { tag: "learning in public"}, props: {posts: allPosts} },
++   { params: { tag: "learning in public" }, props: { posts: allPosts } },
 -    { params: { tag: "successes" }, props: {posts: allPosts} },
++   { params: { tag: "successes" }, props: { posts: allPosts } },
   ];
 }
 
@@ -190,7 +194,7 @@ import BaseLayout from "../../layouts/base.astro";
 </BaseLayout>
 ```
 
-Vamos ahora a crear la página _index_ de las tags que va a tener la colección completa.
+Vamos ahora a crear la página _index_ de las tags que va a tener la colección completa de Tags (para no ir yendo directamente desde la URL)
 
 Antes que eso vamos a sacar el modelo de _Frontmatter_ a un fichero común.
 
@@ -272,7 +276,9 @@ _./src/pages/tags/index.astro_
 ```diff
  <BaseLayout pageTitle={pageTitle}>
 -  <div>{tags.map((tag) => <p>{tag}</p>)}</div>
-+  {tags.map((tag) => <p><a href={`/tags/${tag}`}>{tag}</a></p>)}
++  <div class="tags">
++   {tags.map((tag) => <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>)}
++  </div>
  </BaseLayout>
 ```