Amigos, hoy tenemos curso de Astro 5, que obviamente hoy no vamos a poder darle rienda suelta a todo lo que tiene Astro,
porque Astro es un framework, mi framework favorito a día de hoy, porque es que tiene una de cosas tremendas, tremendas.
Es este el framework. Lo bueno, que es agnóstico o que no está atado a ninguna biblioteca ni nada.
Lo puedes utilizar, mira, lo puedes utilizar con React, lo puedes utilizar con Vue, con Svelte, lo puedes utilizar con el que te dé la gana o con ninguno.
Hoy, por ejemplo, mira, React, Vue, Priak, Svelte y Solid. Importante, han quitado, en la versión 5, han quitado soporte para Lead.
Malas noticias para Lead. El framework de Lead, o bueno, framework biblioteca, como lo quieras llamar, no sé, no termina, no termina de despegar.
Esto es de Google, por si no lo sabéis, está basado en Web Components y le han quitado soporte oficial.
Me imagino que alguien le podrá añadir soporte, pero lo han quitado de forma oficial, ¿eh?
Ay, mal asunto, mal asunto. No, no son buenas noticias las cosas como son.
Pero bueno, Astro tiene muchas cosas interesantes que creo que os puede gustar mucho y os pueden servir un montón.
¿Por qué? Porque qué raro. A ver, no creo que sea culpa de Google, ¿eh?
No creo que sea culpa de ellos. Es simplemente que Astro no habrá visto como tal que haya mucha demanda, ¿sabes?
A lo mejor ha dicho, ah, como nadie lo está pidiendo, como nadie lo está usando, la versión de Lead para Astro, pues lo vamos a quitar.
Yo creo que van por aquí un poco los tiros. Por aquí van un poco los tiros, ¿eh?
De que han dicho, bueno, pues a tomar por saco.
No sé si en algún momento van a hacer, no sé, si lo van a quitar, se van a enfocar más en Angular.
Tendría sentido, la verdad, si me preguntas. Pero bueno, no nos vamos a meter en eso.
El tema. Astro es un framework para crear páginas web. Se pueden crear páginas web de todo tipo.
Está pensado sobre todo para hacer páginas estáticas o que te quieras enfocar en el contenido, porque el contenido normalmente es estático,
pero no significa que se puedan hacer solo cosas estáticas.
Claro, para blogs, para landing pages, para algunos e-commerce incluso, puede salir muy bien.
Pero el tema, el tema es que está mejorando mucho y hoy lo vamos a ver.
Hoy vamos a hacer un proyecto desde cero, ¿vale?
Para que veáis cómo hacer con Astro una aplicación web desde cero, paso a paso,
y donde vamos a ver algunas de sus funcionalidades más interesantes, como las islas de servidor.
Que está muy bien, está muy bien.
Y lo vamos a hacer con TypeScript, ya que me lo estáis pidiendo.
Lo vamos a hacer con TypeScript porque es muy sencillo el TypeScript que vamos a utilizar.
No es nada difícil.
Lo más interesante que tiene Astro, para que nos quede muy claro, lo más interesante es que es totalmente libre de framework.
Tú puedes utilizar React, Vue, Preac, Svelte, Solid, o todos a la vez, o ninguno, o solo dos, o lo que quieras.
Eso me parece espectacular.
Para trabajar con colecciones de todo tipo, como por ejemplo, pues para blogs, con posts, para e-commerce, con productos,
para lo que vamos a hacer hoy, que son libros de desarrollo.
Es tremendo porque te permite tener Content Collections.
Y vais a ver que esto es muy interesante, aunque ahora le han cambiado el nombre a Content Ledger, ¿vale?
Que está muy bien.
Por defecto, devuelve cero líneas de JavaScript al cliente.
Esto está tremendo también.
Esto está tremendo, ¿eh?
Tienes View Transitions, transiciones entre páginas, que esto también lo vamos a ver.
Tienes Actions, tienes Middleware, puedes desplegarlo en un montón de sitios, tienes un montón de cosas interesantes,
tienes temas que ya están preparados.
De hecho, uno más famoso de documentación es Starlight, que también acaba de sacar una nueva versión.
Si por lo que sea queréis tener, pues no sé, tenéis que hacer una documentación de algo,
y a ver si lo encuentro en la página, esta, esta, esta.
La habréis visto en un montón de productos y proyectos.
Pues esto está hecho con Astro y la verdad es que se nota porque fijaos qué rápido va,
que le das clic y pam, pam, pam, pam.
Es que parece, es increíblemente rápido.
Pues esto es un tema de Astro que podéis utilizar.
La propia documentación de Astro la utiliza, por si os lo preguntáis.
Pero seguro que habéis visto algún proyecto por ahí que también utiliza.
Pero es que tienes un montón de plantillas ya preparadas también para utilizar,
que tú no te tienes que preocupar.
Por ejemplo, pues mira, esto para una landing page.
Este está bastante bonito.
Mira, la demo.
Si lo queréis utilizar, aquí lo tenéis.
Esta de gente de Lexington tiene un montón de temas gratuitos.
Esta está graciosa.
Me gusta, me gusta.
Bueno, pero no vamos a hablar de esto.
Vamos a estar codeando.
Así que no se preocupen.
Si por lo que sea os quedáis con ganas de más de Astro,
que seguro que os quedáis con más ganas porque os tiene que pasar,
que sepáis que yo tengo un curso de Astro 3.
Que muchas de las cosas que explicamos ahí siguen funcionando.
La web de la velada, toda la web completa, la hicimos con Astro.
Entonces tenemos una lista de reproducción, que es esta de aquí,
que todo lo hicimos con Astro.
Entonces vais a poder ver cómo hicimos la web de la velada,
la web oficial de la velada, con Astro paso a paso.
Animaciones, el backend, base de datos y todo.
Y entonces vais a ver cómo de potente es Astro, que es tremendo.
Y bueno, el porfolio lo hicimos en Astro.
También hablamos de Astro 4.0.
Hicimos un clon de Spotify con Astro.
Si queréis aprender Astro, busca Midulife Astro en YouTube.
Saludos, Midu.
¿Cuál es la forma en Astro de hacer ISR como en Next?
ISR.
ISR.
A ver, para hacer ISR no existe.
No se puede hacer Incremental Static Generation, Regeneration.
No se puede a día de hoy.
Pero sí que se pueden hacer otras cosas que no tienen exiges,
que lo vamos a ver hoy, que te va a sorprender.
Te sorprenderá.
No, de verdad.
Es que está tremendo.
Entonces, ¿qué vamos a hacer?
Como ha salido la versión 5 de Astro,
que todavía está en beta, pero la beta, ¿vale?
La beta está en beta porque Astro 5 por debajo utiliza VIT,
el empaquetador de aplicaciones favorito de tu día a día,
el mejor empaquetador de aplicaciones que tenemos ahora mismo.
Pues como utiliza VIT y VIT acaba de sacar la versión también 5,
si no me equivoco, y está en beta,
pues hasta que no tenga la versión 5 esté de VIT estable,
no van a sacar Astro estable.
Pero lo que es la API y todo lo que hace Astro en su versión beta
va a ser lo mismo que la versión final.
O sea, es lo mismo.
Es simplemente que hasta que VIT no salga de beta,
no van a quitar a Astro de beta.
Punto.
Ya está.
Eso es lo que dicen, a no ser que encuentre algún error muy grave.
Pero eso es lo que tiene.
Entonces, vamos a iniciar ya nuestro proyecto.
Nuestro proyecto.
Y para eso vais a necesitar tener instalado Node,
NPM y todo esto, lo típico.
Yo voy a utilizar PNPM porque es el que me gusta
y porque tiene la palabra PN.
Y no, es broma.
No es por eso, mal pensado.
Y no es por eso.
Pero es que va más rápido.
Entonces puedes utilizar PNPX, Create, Astro...
¡Ah, Dios!
Cómo me has hincado las uñas, cabrón.
Porque es que te estás cayendo.
Si es que te estás cayendo, lo estoy viendo venir.
Que tengo aquí al gato y...
A lo mejor porque he hecho la palabra PN.
Yo voy a utilizar PNPX, Create, Astro,
arroba, latest para utilizar la última versión.
Vale, pues me he equivocado.
Porque no se puede hacer así.
A ver, Astro, latest.
Es sin el PNPX.
Es sin el PNPX.
Es PNPM, Create.
Si utilizas NPM, pues sería NPM, Create.
Exactamente lo mismo, ¿vale?
Muy bien.
Le vamos a decir...
Vamos a crear una página que le vamos a llamar DevBooks.
Que va a ser una página como de libros de desarrollo
que recomendamos y tal.
Y vamos a tener más de una página.
Vamos a tener colecciones.
Vamos a tener cositas ahí.
Animaciones entre páginas y cosas así.
Vale, el tema es que, ¿por qué hago esto?
Como todavía está en beta, si ahora por lo que sea le decimos que en lugar de latest ponga beta,
no funciona correctamente.
Entonces, vamos a utilizar el latest, pero nos vamos a dar cuenta que en este caso,
a día de hoy, si abrimos ya nuestro proyectito y nos vamos al Package JSON,
fijaos que nos ha sacado la versión 4.15.7, o sea, la versión anterior, no la 5, que la 5 es la beta.
Bueno, por suerte, una cosa que está muy, pero que muy bien de Astro es que siempre tiene este tipo de comandos
en los que te permite actualizar la versión de Astro súper fácil.
Porque lo que hace es cambiarte todas las dependencias necesarias, adaptarte todas las configuraciones que son necesarias, todo, todo.
O sea, que está genial.
Y nosotros, pues lo vamos a hacer.
En este caso voy a utilizar, podría ser PNPX, AstroJS Upgrade Beta, ¿vale?
Y ejecutando este comando, nos debería actualizar.
Primero nos pregunta, dice, oye, vamos a actualizar a esto y Astro a esta versión.
¿Te parece bien?
Porque este paquete tiene cambios que pueden romper, ¿vale?
Le decimos, sí, sí, dale para adelante, porque sí que hay algunos breaking changes,
pero nosotros lo vamos a tener en cuenta ya desde el principio.
Uno de los breaking changes, lo vamos a ver hoy,
que es que han cambiado el nombre del componente ViewTransitions,
ya no se llama así, se llama ClarenRouter, y lo vamos a ver.
Y, de hecho, hay un montón de breaking changes, hay unos cuantos más.
Tenéis una guía de actualización, por si tenéis que venir de la versión anterior.
Si estáis empezando de cero, no hay problema,
pero si estáis de la versión 4 y queréis venir a la 5,
tened en cuenta que aquí tenéis todos los breaking changes aquí, ¿ves?
Breaking changes.
Y aquí, pues veis, han cambiado el nombre de este componente.
Aquí hemos cambiado la configuración de TypeScript.
Aquí no sé qué, no sé cuánto.
Bueno, pues tienes que ir viendo todo lo que haya cambiado.
No ha cambiado mucho, que sea muy grave,
excepto yo creo que esta, que han cambiado el nombre de un componente
y ya no funciona.
O sea, bastante bestia.
Así que eso es lo más importante.
Vamos a ver en el package.json nuestros scripts.
Tenemos dev, start, build, preview, astro.
Vamos a darle al dev.
Fíjate que ya me ha actualizado aquí las versiones perfectamente.
Así que nada, pnpm dev o npm run dev.
Y ya nos inicia nuestro proyecto en localhost 4, 3, 2, 1.
Eyección.
No erección, ¿eh?
Welcome to Astro.
Bueno, pues este es el proyecto que ya tendríamos por aquí.
Si os fijáis, nos ha creado ya todos los archivos que esperábamos.
Si utilizas Astro, pues esto ya te va a dar de memoria.
Te vas a caer otra vez y me vas a hincar los dientes, que te conozco.
Y aquí en Source, aquí en Source, tenemos la página index.astro, ¿vale?
Que esta es la página, es la página principal.
Dentro de Pages tendríamos todas las rutas de nuestro proyecto.
Y de hecho, ahí vamos a crear.
Si yo quiero tener, por ejemplo, una página about.astro, ¿vale?
Digo, hola, hola about, ¿vale?
Pues esto es como funcionan todos los frameworks en Next.js y tal.
Si ahora pongo barra about, no te asustes que vas a ir todo en blanco, ¿vale?
No te asustes.
¿Por qué es esto?
Porque, claro, aquí hemos puesto que esto está así, vacío.
Y si lo que queremos es que tenga esos estilos por defecto que teníamos,
tenemos que envolverlo con un componente que se llama layout.
El componente layout es un componente especial, ¿vale?
Tenemos por aquí.
No se puede asignar.
Ah, porque nos falta el title.
Vamos aquí a about.
Y ahora sí, si volvemos.
¿Ves?
Se ve un poquito mejor, pero tampoco mucho mejor.
Es que a esto le faltan cosas.
Pero digamos que el componente layout que ya te viene creado para que tú lo modifiques
es el componente que va a envolver cada una de nuestras páginas.
Y las páginas se van a renderizar en esto de aquí, en el slot, ¿vale?
Muy bien.
Y aquí tenemos estilos que son globales.
Tendríamos el HTML, el código.
De hecho, este código lo vamos a eliminar, que no lo necesitamos.
Y ya aprovechamos aquí y vamos a poner que el color del texto sea blanquito.
Y así, pues, al menos saldrá el all about.
Bueno, ya puedes ver que lo que es la sintaxis de Astro...
Primero, instala la extensión de Astro Visual Studio Code, si no tienes todavía.
Segundo, la sintaxis es muy parecida a JSX,
solo que los componentes y páginas de Astro están todos en un mismo fichero.
Y fíjate que tienes aquí la parte que sería la de JavaScript,
que se ejecuta como en el servidor o de forma estática.
Esto lo veremos después.
Y esto sería lo que renderiza nuestro componente.
Pero visualmente se parece mucho a JSX de React,
porque tienes como los nombres de los componentes
y le estaríamos pasando como props.
Esto también lo vamos a ir viendo conforme vamos haciendo cositas.
Lo más importante ahora, para que empecemos por buen pie,
es que en la carpeta public,
que es donde normalmente tenemos los archivos estáticos de todos los frameworks,
le voy a pasar ya unas imágenes.
Reemplazamos.
Le he puesto una imagen de mi libro de Git.
Le he puesto cuatro libros, ¿vale?
Como cuatro libros que la verdad es que me gustan mucho y que te recomiendo.
Así que estos serían cuatro libros.
Vamos a escribir sobre estos cuatro libros.
Los vamos a mostrar y vamos a permitir que la gente los pueda comprar.
Pero lo interesante es que vamos a detectar según dónde viene el usuario.
Si es de Estados Unidos o es de España, le enseñaremos un botón diferente.
Vais a ver que va a tener bastante cosa interesante.
Vamos a volver a nuestro index, ¿vale?
Vamos a hacer lo primero.
A ver, una cosa que os digo.
Yo voy a utilizar Tailwind.
¿Por qué?
Porque es que si no, no podría hacer los estilos a mano.
No me daría la vida.
Pero si no te gusta Tailwind, pues nada.
Cuando escriba Tailwind, escupes.
Y se te olvida que estoy utilizando Tailwind y ya está.
Pero es que al final, si yo me pusiera aquí a hacer CSS, no me daría tiempo.
Entonces voy a instalar Tailwind y para eso he ejecutado el comando pnpxastro at Tailwind.
Porque ya tiene una integración de primera clase.
Y Astro ya tiene la configuración automáticamente.
Ya detecta las dependencias que tiene que añadir.
Le dices que sí.
Te instala las dependencias y también te va a cambiar la configuración que necesita para añadir Tailwind.
Te dice, oye, voy a hacer esto.
Y tú, sí, sí, me parece fantástico.
Y te vas aquí a Tailwind.config y ya podemos ver que ya tenemos la configuración de Tailwind.
Y si nos vamos a nuestro archivo, pues aquí, por ejemplo, vamos a poner aquí devbooks.
¿Vale?
Vamos a poner esto por aquí.
No, esto no, esto no.
Voy a poner este porque yo soy desarrollador.
¿Vale?
Ponemos esto por acá.
Y ya podemos ver aquí que si vamos a la casita.
Vale, aquí tenemos el devbooks.
Pero obviamente vamos a hacer que esto se centre un poquito mejor.
Que quede mejor, que se vea bien.
Para eso nos vamos a venir para acá.
Vamos a estilar un poco el body.
¿Vale?
Vamos a aplicarle aquí que todo se quede bien centradito.
Y luego ya lo arreglamos.
Vamos a poner que el div que pongamos por aquí sea un container para que se ajuste.
Y esto, este slot, que es donde se va a renderizar cada una de nuestras páginas.
¿Vale?
Este slot lo vamos a envolver con este div.
Y ahora al menos ya lo tendríamos un poco centrado.
Ya algo es algo.
Para que esto empiece a tener un poco de entidad, lo voy a estilar muy rápidamente.
O sea, tampoco vamos a hacer grandes cositas.
Voy a centrar el texto.
Ponemos que sea bastante grande.
Un extra volt.
Y este span que he puesto por aquí, vamos a poner que sea blog básicamente para que esté como en dos líneas.
¡Hala!
Ya tenemos ahí el título.
¡Titulazo!
¡Titulazo!
¿Vale?
Eso vamos a hacer.
Vamos a hacer que se muestren nuestros...
Ah, mira.
Está en la cajita.
Se ha ido a la cajita.
Así que, perfecto.
Vamos a mostrar ahora nuestros libros, pero lo vamos a hacer de una forma muy especial.
Porque normalmente alguien diría, ah, bueno, muestran los libros.
Pues tienes aquí un array de libros y no sé qué.
¡No!
No vamos a hacer eso.
Vamos a hacer otra cosa.
Vamos a utilizar la tecnología de Content Layer porque para Astro se pueden hacer muchas cosas interesantes
y una de ellas es tener colecciones.
Y son colecciones que además puedes sacar de un montón de sitios.
Por ejemplo, puedes sacar de una API externa, puedes sacarlo de archivos Markdown,
lo puedes sacar de un JSON, lo puedes sacar de un montón de sitios.
¿Vale?
Así que nosotros vamos a empezar a hacerlo desde un archivo, desde archivos.
Vamos a tener aquí en el source, ¿vale?
Fíjate, tengo los componentes, layouts, páginas.
Puedes tener más de un layout, ¿eh?
Pero en este caso ahora solo tenemos uno.
Vamos a poner una carpeta aquí, aquí en source, aquí en source, que se vea,
que le vamos a llamar content y dentro vamos a tener los libros.
Imagínate que podríamos tener aprendiendogid.md y aquí ya podríamos tener nuestro primer libro de Aprendiendo Git.
No los voy a escribir a mano todos porque si no sería un poco rollo.
Ya los tengo escritos los Markdowns.
Pero para que nos hagamos una idea, lo bueno de poder tenerlo en archivos es que podéis hacer ya algo así, ¿no?
Podéis tener el título, que esto sería Aprendiendo Git y GitHub, ¿vale?
La fecha nos da igual, vamos a poner autor, Miguel Ángel Durán, podríamos tener la imagen Aprendiendo Git.jpg,
que es la imagen que le hemos pasado antes, podríamos tener cuánto tiempo se tarda en leer,
podríamos poner 224, vamos a poner un número para que veáis todo esto,
descripción, vamos a decir, bueno, Aprende a Usar Git y Hija para gestionar tus proyectos de código
y para comprarlo vamos a tener dos enlaces.
Uno, el de España, ¿vale?
Y esto es importante porque luego vamos a ver que vamos a detectar de dónde viene el usuario para mostrarle uno u otro
y luego el de USA, que en realidad podríamos tener el de México, el de USA, podríamos tener un montón.
Pero por ahora vamos a tener solo estos dos.
Y aquí podríamos escribir, podríamos ir a Amazon Aprendiendo Git,
podríamos ir a la página esta, Aprendiendo Git, ¿vale?
Y dice, hostia, el número uno más vendido, gracias, gracias, madre mía,
que sois lo que no hay, ¿qué es esto? El número uno más vendido, Dios mío, gracias.
No, en serio, lo agradezco un montón, esta cosa me hace muy feliz, me hace muy feliz ver estas cosas.
Bueno, en Provención y Desarrollo estamos los quintos, ¿eh?
¿Qué pasa? ¿Qué pasa? Vamos, hay que ganar, hay que ganar.
Hostia, pesa casi un kilo el libro, con la tontería.
Que, por cierto, si te lo has comprado y no has dejado valoración, déjala, hombre, que me ayuda un montón.
Dejas ahí tus cinco estrellitas, mira, fácil de leer y directo al grano, directo al grano, yes.
Bueno, lo que quería hacer, aparte de este momento de orgullo, es copiarme la descripción.
La vamos a poner aquí.
Y una cosa interesante, ¿vale? Es que es un archivo markdown, no tiene mucha historia.
A esto se llama frontmatter, ¿vale?
Que sería como información extra que puedes poner en un markdown.
Y esto sería el contenido.
Esto no es de este framework, es que esto es como funcionan los markdowns de toda la vida.
Pero imagina que puedes tener aquí una negrita, aquí puedes tener, siendo tener su manejo, he decidido un libro que yo mismo hubiera encantado.
Vale, pues vamos a poner algunas negritas, te explico orígenes, vale.
En el libro te explico los orígenes, quién lo creó, te explicaré, te explicaré, bla.
Bueno, es por poner unas negritas, para que luego veas que se ven las negritas, ¿vale?
Entonces, esto mismo lo vamos a hacer con otros libros, ¿vale?
Los vamos a poner aquí dentro.
Como no quiero aburrirte como los voy creando, los he creado ya.
Entonces, ya los he creado.
El de Learning TypeScript, Programador Pragmático, ¿vale?
Pero siguiendo todo exactamente lo mismo.
Me he copiado la descripción de Amazon y ya está.
Y ya tenemos ahí cuatro libros, ¿vale?
Los cuatro libros que queremos mostrar.
Perfecto.
Bueno, pues ahora que tenemos ahí el contenido, ¿qué tenemos que hacer?
Pues tenemos que crear una colección.
Tenemos que indicarle de alguna forma que estos libros son una colección.
Y vamos a como explicar qué atributos tiene nuestra colección.
Así que aquí dentro de Content vamos a crear un nuevo archivo que le llamamos config.ts.
Lo primero que hacemos es importar Define Collection, ¿vale?
Y también nos traemos Z.
La Z es de Zot, que es una biblioteca muy, muy interesante
para validar esquemas, ¿vale?
Esquemas, tipos de datos, formas de objetos, como lo queráis decir, ¿vale?
Esto sería lo primero.
Lo segundo, ahora mismo no necesitamos hacer nada más.
Ya lo tendríamos.
Es que luego se puede hacer más cosas que luego te explicaré.
Pero por ahora, con esto ya sería suficiente.
Ahora ya podemos definir la colección de dos libros.
Decimos Define Collection y le decimos, vale, la colección de libros, el esquema va a ser un objeto
y en el objeto, pues ya hemos visto que tenemos un título, que tenemos el autor, mira, el autor, la imagen, el return, description, ¿vale?
O sea, ya lo ha hecho perfecto.
Bueno, no perfecto porque la imagen, fíjate que pone que es un string y le podríamos incluso decir que tiene que ser una URL.
Que esto, pues, ayuda.
Y esto está muy bien porque ya con esto estamos definiendo qué es lo que esperamos que tenga aquí.
Y luego el autocompletado nos va a ayudar un montón.
Esto, gracias a TypeScript, por supuesto.
Gracias a Zot, que es el que nos está como definiendo la forma del objeto.
Pero luego TypeScript es el que va a terminar de hacer la magia.
Y ahora, para terminar con nuestra colección, vamos a exportar una constante llamada Collections que va a tener los libros, ¿vale?
Así que con esto ya hemos definido nuestra primera colección, libros, que va a tener title, autor, imagen, read time, description, by, y que es un objeto, spend y usa.
Ya ves que esto encaja perfectamente.
Si no encajase bien, si no encajase bien, si por ejemplo, yo qué sé, pues aquí quitamos esto por aquí, ¿vale?
Podríamos tener problemas.
De hecho, ahora veremos si tenemos algún problema.
Por ahora no lo va a decir porque no lo estamos leyendo todavía.
Pero luego lo probaremos para que veas que realmente tiene una utilidad, aparte del autocompletado, que es asegurarte que estás utilizando bien tus colecciones, ¿vale?
Entonces, ya tenemos las imágenes, tenemos los markdowns.
Ahora lo que nos faltaría es ir a nuestro índex y mostrar la colección.
O sea, leer esta colección.
Para eso, tenemos que importar Get Collection de Astro Content y vamos a recuperar.
¿Es necesario aprender CSS a un nivel alto para aprender Tailwind o puedo aprenderlo directamente sabiendo lo básico de CSS?
Sí, puedes aprender, sabiendo lo básico de CSS, puedes aprender Tailwind sin ningún problema.
No hace falta que empieces a saber algo súper avanzado y tal.
No hace falta.
Vale, fijaos, con el Get Collection, que es, ojo, asíncrono, puedes hacer Get Collection y ya cuando me pide qué colección es, fijaos el autocomplete que me está diciendo aquí, ya ha detectado que lo que quiero recuperar de todas las colecciones que tengo disponibles es la de libros.
Si yo intento poner aquí una que no existe, fijaos que no me funciona porque dice, no, no, la única colección que puedes recuperar es la de libros y lo detecta perfectamente.
Y ya aquí, si te pones encima, fíjate que sabe exactamente qué libros son los que tiene.
Tienes aquí el de Aprendiendo Git, aquí porque aparecen punto, punto, punto, pero ya ha detectado todos los libros que tenemos disponibles.
O sea, no tiene la posibilidad de decir, no, es que aquí puede tener una idea.
No, lo va a saber, va a saber totalmente cuáles son exactamente las colecciones que puedes tener ahí.
Y, o sea, qué libros son los que vamos a utilizar.
Y fíjate que tenemos los valores.
Esto tiene un montón de ventajas porque ya podríamos, bueno, aparte de hacer un console log de books, por si los queréis ver, pero podemos hacer books.
Si voy a la posición cero, punto, ya tenemos aquí todas las propiedades.
El body, collection, data, id.
Podríamos poner el slag, ¿vale?
Que sería el nombre del fichero sin la extensión.
Si utilizáis la id, fijaos que si utilizáis la id, la id sería aprendiendo-git.md.
La id que le da por defecto sería el nombre del fichero que tenemos justamente aquí.
Si queréis utilizarlo sin la extensión, tendrías que poner punto slag, ¿vale?
Y ahí tendrías exactamente lo mismo, pero sin la extensión.
Que muchas veces para crear la URL o para navegaciones y tal, pues tiene más sentido.
Si miramos en el console log, vais a ver que obviamente lo que tenemos ahí en el console log, a ver, vamos por aquí.
Bueno, puesto welcome from matter.match.collection.schema.
Vale, vale, interesante.
¿Veis?
Aquí tenemos un problema.
Me dice, oye, es que claro, me has dicho que la URL image era una URL y es inválido.
Y tiene razón, porque si miramos el markdown, es verdad que yo, la imagen, no le estoy pasando una URL, le estoy pasando una cadena de texto.
Así que tiene razón.
La image, aquí que he puesto que esto era un URL, no es verdad.
Lo que eran URLs son los enlaces de compra.
Esto sí que es verdad que eran URLs.
Y vamos a volver a ver.
Ahora sí que parece que funciona bien.
Voy a arreglar el título, un momento, para que así lo veamos bien.
Vamos a poner aquí, devbooks, libros para programadores.
Vale, y ahora queda un poquito mejor.
Y ahora lo único que necesitamos es simplemente, pues, renderizarlo.
Así que vamos a poner aquí un section, vamos a poner un area label, libros recomendados para programadores.
Vale, vamos a poner, hostia, ha puesto secting.
Secting, secting parece, parece un, una, como algo de Harry Potter.
Secting, secting.
Bueno, pues, ya tenemos.
Hay secting, el section, vamos a poner un, un, voy a, voy a, tengo aquí unos estilos que se supone que van a quedar más o no bien.
Me los voy a copiar tal cual.
Y no vamos a ponerle ni títulos ni nada, sino que simplemente vamos a utilizar un grid, ¿vale?
Vamos a ponerle un grid que tenga bastante separación.
Vamos a hacer que tenga dos, vamos a hacer que sea por defecto una.
Bueno, vamos a hacer que sea, cuando sea MD, que sean dos columnas, ¿vale?
Vale, y aquí ahora ya sí vamos a estar iterando bugs.map.
Y esto es lo más interesante que tiene Astro a la hora de crear la UI.
Y es que lo que estamos viendo es que podemos crear también, utilizando JavaScript, podemos iterar todas las variables que tengamos en esta sección de aquí, de JavaScript.
Digamos que aquí podemos crear variables, hacer peticiones a un servidor, recuperar nuestras colecciones, podemos hacer lo que queramos que estas variables van a estar accesibles en la parte del renderizado.
Y además podemos utilizar JavaScript, por ejemplo, igual que haríamos con JSX en React o en Solid o en Quick, ¿vale?
Para construir aquí, pues por ejemplo, aquí tenemos un libro y este libro, vamos a recuperar el Slack y tendríamos también el data con toda la información, que esto debería tener el title, el author, bueno, tiene un montón de cosas.
No sé si las necesitamos todas, puede ser que sí, yo me las voy a traer por si acaso.
Por ahora vamos a poner que esto es un article, ahora me invento un poquito esto, ¿vale?
Vale, más o menos, y esto que tenga el title, vamos a poner el title del libro, ¿vale?
Más o menos, al menos ahora, para que podamos ver si se ve algo, ¿no? De la colección.
Vale, se ve, pero no se ve bien.
No se ve bien porque la imagen, esto se ha inventado esto, a ver ahora, vale, ahora ya sí que tenemos ahí nuestros libros.
Vale, pues fíjate, ahora me pongo a mejorar un poco la interfaz, pero lo importante es que hemos recuperado, uy, perdón,
hemos recuperado aquí nuestra colección de libros, hemos recuperado todos los libros y podemos acceder a cada una de las informaciones que tenemos aquí en el front matter del markdown
y lo podemos acceder aquí, o sea, title, author, image, read time y además hemos visto que esto tiene autocomplete gracias a TypeScript, ¿vale?
Fijaos, buy, de hecho si haces buy, punto, pues va a detectar España o USA, ¿vale?
Y esto lo puedes conseguir gracias al content layer que tiene Astro, ¿vale?
Y así te aseguras de que los estilos que van a estar utilizando son los correctos.
Entonces, mientras voy a leer, mientras voy estilando, ¿vale?
Me podéis ir dejando algunas preguntitas y mientras os leo, voy leyendo vuestros mensajes, mientras estilo, y así mientras os leo, os voy contestando, ¿vale?
Y así, pues mira, más rápido iremos de una cosa y otra, ¿vale?
Vamos a hacer una transición, hover, scale, 110, por aquí, esto por acá, esto por aquí.
Vale, dice, casos de uso de Astro, casi que cualquiera, casi que cualquiera, o sea, es que al final Astro lo podéis utilizar en tantos casos, sobre todo en páginas que sean básicamente estáticas o muy estáticas.
Pero luego vais a ver una cosa que os voy a enseñar, que realmente se puede adaptar a cosas no tan estáticas, porque puedes hacer las islas, que es una forma muy sencilla de hacer partes dinámicas de una página y eso hace que, pues que sea muy flexible.
Yo creo que Astro se está convirtiendo en un framework que de forma muy sencilla puedes hacer páginas muy rápido y que quedan, pues espectacular.
Así que yo creo que, a no ser que tu página sea muy, pero que muy dinámica, por ejemplo, un Twitter, ¿no? Una red social como Twitter, yo no la haría con Astro porque es demasiado dinámica constantemente, pues tienes que darle un like a un corazón, se tiene que actualizar automáticamente el contador de likes.
Son como demasiadas cosas y a lo mejor, pues ahí no tiene tanto, tanto sentido. Pero más allá de eso, yo diría que la inmensa mayoría de las páginas son cap... o sea, tienen sentido que utilicemos Astro.
O sea, el problema es que hemos estado utilizando frameworks como Next.js, que a mí me gusta mucho Next.js, pero creo que hemos utilizado Next.js o Naxx o muchos de estos en sitios que no tenía tanto sentido, ¿sabes?
Así de claro lo digo. Yo quiero hacer una página para reservar horas de paciente. ¿Me recomiendas Astro? ¿Ves? En ese caso dependerá un poco de cómo de complicado son los filtros, los calendarios y todo esto,
pero yo diría que puede ser que sí, pero quizás no es la mejor opción, ¿no?
¿Midu, alguna recomendación para tipear tan rápido como tú? Pues practicar mucho al final.
¿Estática a qué te refieres? ¿Una landing page? Claro, una landing page es bastante estática porque no cambia la información, ¿no?
Está constantemente... Bueno, esto ya empieza a tener mejor pinta, ¿eh?
¿Está constantemente cambiando el contenido? Pues no, porque al final estático es el contenido.
No cambia, a lo mejor cambia, pero rara vez, cada vez que haces un pase puede ser que cambie, pero no es una cosa que...
Mira, así se va a quedar, ¿eh? No es una cosa que necesites que cambie.
Y un blog rara vez cambia, cada vez que pones un artículo o lo que sea, ¿no?
Pero, por ejemplo, Twitter. Twitter cambia constantemente. Cada vez que entras es diferente, ¿no?
O sea, que tiene sentido, es dinámico, porque cada vez que entras ves algo nuevo.
En el caso de Instagram, pues también, ¿no? Cada vez que entras hay algo nuevo y además ocurren cosas en tiempo real.
Eso es lo que sería dinámico, ¿no?
Vamos a hacer que esto tenga un poquito... No sé si ponerlo en H1.
Ah, coño, es que me ha cerrado esto aquí. Este main me lo ha cerrado aquí. Este section, ¿vale?
Y aquí vamos a ponerle una cosa así. Y ya está, ¿vale?
Entonces, bueno, pues ya hemos mostrado aquí como nuestros cuatro libritos, ¿vale?
Que se ven bonitos, pero vamos ahora a crear la página de cada libro, ¿vale?
Y os voy a leer...
¿Portafolios en Astro? Totalmente.
Casi todos los portafolios que hacéis deberían estar en Astro, ¿eh?
¿Podrías explicar cuáles son las ventajas de las colecciones en vez de tenerlo en un array?
Hombre, Q, yo creo que es bastante evidente, ¿eh?
Porque tú no puedes tener en un array todo esto.
Y además, fíjate que gracias al markdown, como lo tienes aquí, podemos tener negritas,
puedes tener como un contenido renderizado y mil millones de historias.
Esto en un array es bastante más feo.
O sea, no lo tienes tan bien separado.
Imagínate que tienes 100 libros.
¿Qué tienes? Un array de 100 elementos donde tengas este título, tal, tal, tal.
Y encima esto, ¿qué? ¿Lo vas a poner ahí con el HTML a mano?
Es un poco raro, ¿no?
Yo creo que es mucho más sencillo para este tipo de contenido.
No siempre tiene sentido el content layer, pero en este caso yo creo que sí.
Que tiene todo el sentido del mundo.
Por ejemplo, para un post, no tiene sentido que los post empieces a hacerlos constantemente en un array, ¿no?
Y te pongas a añadirlos así.
Tiene más sentido que los hagas así, ¿no?
Yo lo veo así.
Para ciertas cosas sí que puede ser que un array te pueda ser suficiente.
Pero en este caso, por ejemplo, algo que tenga que tener contenido y que lo tengas que estilar,
yo creo que tendría sentido utilizar markdowns, ¿no?
Muy bien.
Pues vamos a crear ya las páginas, ¿vale?
Vamos a crear las páginas.
Vale, por aquí lo tenemos.
Porque esto es como está quedando en nuestra página.
Pero si le doy un clic, anda.
Not found.
Me dice que no encuentra la página.
Tenemos que crear la página de cada uno de los libros.
Para hacer eso, vamos a crear aquí en pages.
Voy a aquí, en las páginas.
Ya tenía el about, que lo voy a eliminar porque no lo usamos.
Pero fíjate que...
Voy a hacer esto un poquito más grande para que se vea bien.
Vale, pues aquí en páginas vamos a crear una página con una ruta dinámica.
¿Dinámica qué quiere decir?
Pues que, claro, si te fijas, este libro es libro barra aprendiendo git.
Pero otro libro tendrá libro barra learning typescript.
Cada libro tiene un identificador diferente.
Así que vamos a asegurarnos que cada libro tiene su propia página.
Para eso, como muchos frameworks, podemos utilizar aquí corchetes y poner lo que queremos capturar.
En este caso, la ID del libro.
Lo que estamos diciendo aquí es, oye, la página esta...
Ay, no es pages, sería libro, libro y dentro ID.
¿Vale?
Es importante porque fijaos que aquí es libro barra y aquí estamos utilizando el sistema de archivos como un enrutador.
De forma que tiene que encajar las carpetas que creamos con la ruta.
Y aquí es libro barra y el identificador.
Entonces, libro y aquí el identificador.
Y se ponen corchetes porque es dinámico.
¿Ok?
Ahora, aquí vamos a hacer algo.
Vamos a decirle que vamos a importar...
Claro, ¿cómo sabemos qué identificadores son los que tienen que crear?
¿Cómo sabemos que este learning typescript tiene que devolver la información del libro de typescript?
Pues vamos a tener que importar otra vez nuestra colección.
¿Vale?
Nos vamos ahí a AstroContent.
Nos traemos la colección.
Voy a traerme el layout, ya que estoy también, para que aquí pongamos el layout y no se me olvide.
Aquí tenemos el layout.
¿Vale?
Por ahora vamos a poner hola.
Y luego aquí vamos a tener que generar cada una de las rutas estáticas que se tienen que crear.
Para eso se tiene que devolver una función que se llama getStaticPath.
¿Vale?
Es una función que es esta sí, de Astro, que tiene que devolver un array con todas las rutas que queremos que respondan con algo y qué información debe tener cada una de las rutas.
Para que lo veas muy claro, voy a hacer algo.
Voy a hacer un return y voy a decir, quiero que devuelvas un array donde vamos a devolver con el params la idea aprendiendo git.
Vamos a devolver la información que le vamos a añadir.
Va a ser, ay, espérate, este params aquí, ¿vale?
Vamos a poner props, title, aprendiendo git.
Vamos a devolverlo así, directamente, para que lo veas clarísimo.
Estas props vamos a poder acceder a ellas desde aquí.
Vamos a poder leer el title de astro.props.
Y este title es el que vamos a poder mostrar tanto aquí como aquí en el título.
¿Vale?
Vamos a poner deathbox.
Así que, dependiendo de lo que pongamos en este title, es lo que recuperamos aquí y vamos a poder renderizar.
Ahora lo revisamos otra vez.
Pero ahora, si yo me voy al de aprendiendo git, fíjate que ahora sí que devuelve porque le hemos dicho,
oye, que sepas que con el identificador aprendiendo git tenemos que devolver la página con la información que te estoy diciendo.
Claro, como solo hemos puesto a mano aprendiendo git, si yo entiendo entrar al de TypeScript, pues peta, porque no lo encuentra.
Pero lo podríamos arreglar.
Oye, también en el parámetro de la idea que sea learning typescript, quiero que devuelvas una página donde la prop del título sea learning typescript.
Y ahora fíjate que reinicio y ahora funciona correctamente.
Pero en cambio, el de Pragmatic Programmer da un 404 porque no lo hemos creado.
Bueno, ya vas viendo un poco cómo funciona, ¿no?
Pues esto, esto que es bastante importante, no lo podemos hacer así a mano.
Podría ser, ¿eh?
A veces tiene sentido, pero en nuestro caso que tenemos una colección, pues no tiene sentido.
Si justamente podemos recuperar la colección de libros y con la colección de libros vamos a mapear cada libro.
Un map devuelve un array y para cada posición del array, que va a ser cada uno de los libros,
vamos a devolver el parámetro de ID con el Slack, que ya hemos visto que es la ruta que esperábamos.
Y en las props vamos a pasar directamente toda la información del libro, ¿vale?
Así que en este caso aquí, en lugar del title, vamos a tener el libro de esa página.
Y ahora sí, dentro del libro vamos a sacarle el contenido, ¿no?
El contenido, a ver cómo era esto, o data, data, ¿vale?
Le sacamos el data y dentro de data sí que tenemos el title, la descripción y todo esto.
Así que ahora esto lo estamos haciendo mucho más dinámico.
Si volvemos aquí, ahora sí, programador pragmático, aprendiendo git, ¿vale?
Ya tenemos todas las páginas creadas gracias a que lo hemos iterado.
Hemos recuperado con la colección todos los libros, mapeamos el array y devolvemos el objeto para cada elemento
para que devuelva y funcione cada una de las páginas, ¿vale?
Así que ahora con esto ya lo tenemos mucho mejor.
Obviamente lo que necesitamos es estirarlo un poquito porque si no pues queda un poco raro
y no se va a ver muy bonito. Especialmente porque queremos, y ahora os voy a enseñar una cosa,
y es que queremos también renderizar lo que tendría nuestro markdown.
Porque nuestro markdown, si nos fijamos, cada uno de los markdowns tiene un contenido
que además tiene negrita y todo esto.
Bueno, pues vamos a ver cómo lo podemos renderizar cada uno de ellos.
Voy a renderizar por aquí la imagen, class rounded, vamos a hacer que esto sea bastante grande,
h, auto, el source con la imagen, ¿vale?
Image, title, este class sobra, ¿vale?
Aquí debajo luego pondremos algo.
Vamos a poner aquí enlace para comprar.
Esto lo pondremos luego aquí.
Y aquí en el main, por ahora que podríamos poner,
vamos a poner solo simplemente el título,
y vamos a poner aquí una cosita que es lo interesante.
Es que podemos renderizar el contenido, ¿vale?
Renderizar el contenido.
¿Qué contenido? El del markdown, ¿no?
Aquí en cada uno de los markdowns teníamos este contenido
que lo queremos poder renderizar.
Para poder recuperar este contenido tenemos que crearlo.
Para crearlo vamos a tener que renderizarlo.
Y en el getCollection, aquí en el astrocontent,
igual que tenemos el getCollection para recuperar la colección,
también podríamos hacer un render.
Podríamos renderizar el contenido de la colección.
Así que vamos a utilizar el render y vamos a decirle,
¿vale? Quiero que me renderices,
esto es asíncrono, render,
que me renderices el libro, ¿vale?
El libro ya tiene toda la información.
Esto es algo que simplemente tenemos que hacer de
cuando le pasamos un item de la colección al render,
ya lo que va a hacer es renderizar esta parte de aquí, ¿vale?
En este caso porque es un markdown,
pero podría funcionar también con otros tipos,
como por ejemplo MDX y tal.
Pero en este caso, que es un markdown,
nos va a devolver como el HTML ya previsto y preparado
para que se pueda renderizar perfectamente.
Ahora le daremos un poco de estilo,
pero por ahora vamos a ver esto, ¿vale?
Más o menos, todavía se ve mal.
Pero si te fijas, fíjate que aquí se ve la negrita.
¿Ves que pones según la encuesta de Stack Overflow?
Entonces ya se está renderizando la imagen.
Este title lo podríamos hacer un poquito mejor
para que se vea un poco mejor.
Vamos a poner que este title...
Ah, es que he puesto el title dos veces, perdón.
Ya decía yo que lo veía por ahí.
Digo, ¿qué pasa con este title?
Vamos a poner un font-ball,
vamos a ponerle aquí un poquito de separación.
Podríamos poner también el main.
Podemos hacer que sea más pequeño esto,
porque fijaos que esto es como demasiado grande.
No sé si aquí el container lo he puesto
y el container debería...
A ver...
Esto por aquí.
Vamos a ajustarlo aquí a la derecha
para ver si el container está...
Está...
Flex...
Sí, el container sí que está,
porque ves que pone aquí max, width,
no sé qué, no sé cuánto.
Igualmente, lo que creo que deberíamos hacer
es bastante más grande la imagen esta,
para que...
Lo que no sé...
A ver...
No.
No es por esto, no es por esto.
Flex, gap...
Es que estoy mirando.
Igual aquí, ¿no?
Flex, flex call, item center...
Y le ponemos un poquito de separación.
Vale, esto por un lado.
Y no sé qué más me podría aquí dar
para que hagamos flex, flex gap,
para que nos aseguremos que se ve un poquito más grande.
Es que esto como que se ve muy pequeñito,
o sea, muy grande.
No sé si poner algo así, ¿sabes?
O más bien así, así.
Vale, algo así.
Vale, ahora lo mejoraremos un poco.
Voy a hacer esto que esté un poquito más pequeño.
72 quedaba bien, ¿vale?
Y ahora lo ajustamos.
Hay un problema en el tema de los estilos
y os voy a recomendar un plugin de Tailwind
que os va a cambiar la vida, ¿vale?
Que está súper, súper bien.
Es que aunque los estilos no se ven mal del todo,
hay un error, ¿vale?
Que lo podéis ver aquí,
que no tiene separación el párrafo,
que faltan cositas,
que no se ve bien del todo.
Entonces, hay un plugin de Tailwind
que os recomiendo mucho,
que es el de Tapography,
que es oficial de Tailwind,
de la gente de Tailwind,
y que os va a añadir unas clases
que os va a ayudar un montón
a que vuestros textos queden genial.
De hecho, os lo recomiendo mucho
que lo utilicéis en vuestras landing pages
porque las cosas como son,
no tenéis ni puñetera idea.
O quiero, te quiero.
Pero el tema es que,
y no es culpa tuya,
a mí también me pasa.
El tema es que es bastante difícil
atinarlo con el tamaño de los títulos,
subtítulos, los párrafos,
las listas y la madre que los parió.
A mí me pasa, ¿eh?
O sea, no es culpa tuya,
es culpa de los dos.
Pero el tema es que en las landing
a veces os pasa
que no sabéis qué separaciones
tienen que tener los párrafos
y hacéis unas cosas muy raras.
Lo bueno, si os cuesta mucho,
oye, pues mira,
utilizáis este plugin,
que al menos como para iniciar,
¿vale?
Lo vamos a poner por aquí
para que lo veáis.
Hacemos el pnpm add
y añadimos este de aquí,
el tilewin css typography,
¿vale?
Lo añadimos.
Hostia, tenía que haberlo añadido
como dependencia de desarrollo.
Ahora lo muevo.
Nos vamos a nuestro proyecto
en el package.json.
¿Ves?
Se me ha puesto aquí.
Tendría que estar aquí.
Dev dependencies.
¿Vale?
Si te preguntas
qué diferencia hay entre
las dev dependencies,
estos son dependencias
que no deberían utilizarse
en runtime
y estos son
que se supone
que se deberían utilizar
en runtime.
Pero es verdad
que TypeScript
también podría ser
una dev dependency
porque en runtime
no debería funcionar.
Pero bueno,
no pasa nada.
El tema es que
lo vamos a dejar ahí.
Y para utilizarla,
pues vamos a ir a tailwind
y vamos a importar typography
de tailwind CSS typography
y aquí en plugins
vamos a poner typography
y solo con este cambio
ya podríamos venir aquí
y en esto
que lo había dejado vacío
podemos decirle
prosa.
¿Vale?
Solo con esto.
Y ya vamos a ver
que, bueno,
me ha petado
porque
with previous
unable to read
Ah, bueno,
porque he hecho algún cambio
aquí en que no ha gustado
y me ha petado el servidor
directamente.
¿Vale?
Ahora sí.
¿Vale?
Entonces ahora vais a ver
que se ve fatal.
¿Vale?
Es normal.
¿Por qué?
Porque sí que ha mejorado
los colores,
ha mejorado los estilos.
Ahora vas a ver
que se ve mucho mejor.
Pero el color se ve mal.
No te asustes.
Esto es porque
por defecto
los colores que tiene
se imagina que tú
lo vas a poner
como en una pantalla
en blanco.
¿Vale?
Y tienes slate,
thin, neutral, stone,
lo que tú quieras.
Lo que tienes que hacer
para que se vea bien
simplemente
es invertirlo.
Que normalmente harías
dark,
prose,
prose,
invert.
Pero nosotros como solo
tenemos un estilo
pues ya lo invertimos
y ahora sí
van a quedar bien
los colores.
Y si te fijas
te habrás dado cuenta
que la lectura
ha mejorado mucho.
O sea,
fíjate la diferencia
entre esto
y esto.
¿No?
Esto como lo teníamos antes
y esto como lo tenemos ahora.
¿Cuál de los dos leerías?
No pasa nada.
Yo también me leería este.
Puede ser que haya cosas
que no te gusten del todo.
Por ejemplo,
a mí personalmente
me parece que añade
un poquito demasiado
de line height.
Bueno,
pues se puede ajustar
en la configuración.
Pero aún así
es mucho mejor
que lo que hacemos
por defecto normalmente.
Solo para que lo sepáis.
¿Vale?
Muy bien.
Bueno,
pues ya tendríamos esta parte.
Este ha mejorado bastante.
Sí,
el primero.
Una polla,
Brian.
Vas a leer el primero.
Dime,
dime,
venga,
lee este,
léelo,
venga,
te estoy viendo,
te estoy viendo,
te estoy viendo como lo lees.
Esto no lo lee nadie,
nadie.
En cambio este,
pues tampoco lo leerías,
tampoco te voy a engañar
de que lo vas a leer,
tampoco es,
tampoco es.
Pero sí que lo escanearías,
que ya es una cosa
que ya es diferente.
Bueno,
pues ya tenemos esto.
Esto va empezando
a tener buena pinta,
pero ya hemos renderizado,
tenemos elementos,
bueno,
todo genial.
Vamos a hacer una cosa
que es tan fácil
de hacer
y tan increíble
que es que no hacerlo
es pecado.
Y es las animaciones
entre páginas.
Porque cuando vamos
a la web de la velada,
sí,
la web oficial
que la hicimos aquí
en vivo y en directo,
que por cierto,
ya que estamos aquí
en confianza,
que sepáis
que hoy he tenido
una reunión
porque vamos a hacer
un proyecto
como el de la velada.
Está al 95%,
no se puede asegurar
nada en esta vida,
pero hemos tenido
una reunión hoy
y ha salido muy bien.
Y yo creo
que se vienen cositas.
Y vamos a hacerlo
en vivo y en directo,
lo vamos a hacer juntos,
va a ser nuestra.
Y espero y deseo
que os guste mucho.
Hemos estado trabajando
en esto.
Es increíble
porque yo sé
que muchas veces
a lo mejor decís
es que el Mido
no trabaja y tal,
pero joder,
últimamente he trabajado
mucho.
He trabajado mucho
y hemos hecho
cosas increíbles.
Hemos hecho
la web de la velada,
estamos preparando
la GSConf,
la conferencia
en persona
que vamos a hacer
en Madrid
el 1 de marzo.
Hemos hecho
la academia
para suscriptores
de Twitch
que vais a tener cursos
y vamos a añadir
un montón de cosas.
Vais a tener
retos,
proyectos,
vais a tener
certificados,
vais a tener
un montón de cosas,
vais a alucinar.
Y ahora
vamos a hacer esto,
el nuevo proyecto
que yo creo
que va a salir
y creo que os va a gustar
mucho
y creo que tiene
todo el sentido.
Bueno,
he hecho la Mido.com,
Ternopolis totalmente.
Pues eso,
que antes de finales de año
vamos a hacer algo espectacular.
Ahí os lo dejo.
Y para hacer algo espectacular,
ahora seguimos con el curso,
para hacer algo espectacular
en la web de la velada
ya visteis
que cuando tú
le dabas click
a, por ejemplo,
Shelao,
le dabas un click,
¡pum!
¡Ay, mira!
Me ha dejado fatal.
¡Hostia!
¿Por qué?
¡Ah!
Porque he quitado
las animaciones.
Menos mal,
menos mal
que me ha dado
por pensarlo.
El tema es que el otro día
quité las animaciones
en accesibilidad.
Se puede...
¡Hostia!
Menos mal que me he dado cuenta.
Porque mira,
estaba pensando...
A ver...
¿Animations será?
¿Animations?
Autoplay...
No.
¿Accessibility?
¡Hostia!
¿Dónde están las animaciones?
Bueno,
se supone
Pointer,
Control,
Switch,
Live Actions...
¿Se pueden quitar de algún...
¡Ah!
Display.
Aquí está.
Reduce Motion.
Interesante, ¿eh?
Mira,
esto es interesante.
El tema es que
yo tenía por accesibilidad,
había puesto Reduce Motion
y te desactiva las animaciones.
¿Habéis visto?
Ahora sí que aparecen.
Interesante, ¿eh?
¿Habéis visto?
¿Habéis visto?
Bueno,
pues esta animación
que vas de una página a otra
y que se mueve
y que queda increíble
porque creo que queda brutal.
O sea,
es que es tremendo
cómo queda esto.
Es súper sencillo
y vamos a ver
cómo lo podéis hacer.
Para hacer esto
tenéis primero
que cargar
el componente
Client Router.
Y esto es un cambio importante
de la última versión
de Astro.
Si utilizabas la cuarta,
antes era View Transitions,
pero fíjate que está tachado
porque ahora se llama
Client Router.
¿Vale?
Y esto lo traemos
de Astro Transitions.
No estoy muy de acuerdo
con este cambio,
sinceramente,
las cosas como son.
No estoy muy de acuerdo,
pero esto es lo que es.
Y ahora que tenemos esto,
mira,
voy a aprovechar
y voy a quitar cositas.
¿Vale?
Voy a quitar esto también.
Este componente
Client Router
lo podemos poner aquí
para que funcione
en toda la página.
Solo con hacer esto,
solo haciendo esto,
fíjate
lo que va a ocurrir.
Vale.
Supongo que lo veis,
pero ahora
está haciendo un fade in,
fade out
entre una página
y otra.
O sea,
ya simplemente
con este cambio
ya lo que está pasando
es que estamos
cambiando la transición
entre una página
y otra.
Y está mejorando
mucho más, ¿eh?
O sea,
la animación por defecto
es súper,
súper sencilla.
O sea,
sencilla pero efectiva.
Queda bastante bonita,
¿vale?
Entonces,
dicho esto,
ahora lo mejor
es que vamos a poder
hacer animaciones
de elementos
de una forma
guau,
guau.
Mira,
nos vamos al index
y vamos a recuperar aquí
la imagen.
Aquí tenemos la imagen
del libro.
La imagen del libro,
¿vale?
Voy a poner estas cosas
por aquí y por acá.
Ah,
ostras.
Vale,
ya veo que aquí
había puesto dos veces
el class.
No se puede,
¿vale?
Pero bueno,
lo dejamos por aquí.
Como esta imagen
voy a querer
que de una página
a la otra
haga una transición,
le vamos a dar
un nombre
y tiene que ser
un nombre único,
¿vale?
No le puedes poner
image porque esto,
si hay más de un elemento
que tiene el mismo nombre,
entonces no vas a ver
ninguna animación
porque entran en colisión
porque no vas a ver
cuál tiene que hacer.
Así que vamos a aprovechar
y vamos a decir,
oye,
vamos a poner
image,
guión,
¿vale?
Image será el prefijo
y utilizamos,
por ejemplo,
el slack
para que solo
cada imagen
tenga su idea
de aprendiendo git,
learning typescript
y no pueda haber
uno repetido,
¿vale?
Y esto mismo
lo vamos a hacer aquí,
este transition name
lo voy a copiar
y me voy a ir
a la página
del libro,
¿vale?
Esto sería el índice
donde aparecen todas
y ahora me voy
a la página del libro
donde se ve el detalle
y me voy a copiar
este transition name.
Este slack
lo voy a sacar
de donde tenía que ser,
que si no me equivoco
era aquí,
¿no?
Sí,
ahí lo tenemos,
¿vale?
Me lo recupero
y ahora ya
estamos haciendo
como una asociación
de dos páginas distintas.
Le estamos diciendo
que hay dos elementos
que están relacionados
a través del transition name.
Así que ahora,
si vamos aquí,
¡oh!
Vale,
lo que estamos haciendo
es que automáticamente
el navegador
entiende
que estos dos elementos
son el mismo
y lo que hace
es moverlo
entre uno y otra,
entre una página
y la otra,
lo que dice es,
vale,
pues este elemento
lo voy a transicionar
automáticamente
entre una página
y la otra.
Muy importante esto,
muy importante,
no es una SPA,
no es una single page application.
Esto tampoco está pasando
con JavaScript.
Lo que estáis viendo,
esto es CSS,
tiene un rendimiento
buenísimo,
por desgracia,
no tiene un 100%
de soporte,
pero en el caso
de que no lo soporte
un navegador,
no pasa nada,
no se vería la animación
y ya está.
Pero la buena noticia
es que los transition name,
creo,
transition name,
tiene ya un 70%
de soporte
y lo mejor
es que Safari
ya ha anunciado
está en verde.
Safari
en la versión 18,
que es la última versión
que viene
en la versión de MacOS
de SQL ya,
ya viene con soporte
a las View Transitions.
Solo queda Firefox
como navegador moderno
para que lo añada.
Súper importante
porque significa
que Safari
ya tiene soporte
a esto,
también para iPhone,
lo cual,
pues un tema
buenísimo.
De hecho,
tengo Safari 18,
yo creo que sí
que tengo Safari 18,
ojo,
cuidado,
yo creo que tengo Safari 18
y lo podemos ver
en vivo y en directo
por primera vez
funcionando.
Hostia,
aquí no sé por qué
se ve Reguninchis,
pero mira,
ahí lo tenéis.
En Safari
funcionando ya
las View Transitions
porque tengo Safari 18
porque he actualizado ya.
A ver aquí
que lo veamos.
Aquí
o no se ha cargado del todo
o está dando algún error.
Sí,
no.
Algún error está dando aquí.
Aquí hay algo de Safari
que no le gusta,
que falla
porque fijaos
que no carga
ni siquiera bien
hacer el hover y tal.
Algún error estará teniendo.
Lo miraré.
Lo miraré.
Pero bueno,
lo importante es que
las View Transitions
funcionan también en Safari
para que lo tengáis
y veis
que aunque el soporte
no está completo
no pasa nada.
Tened en cuenta una cosa,
si no funciona,
si por lo que sea
utilizáis Firefox,
¿vale?
Dices,
hostia,
voy a utilizar Firefox
y claro,
qué rabia que en Firefox
no pasa nada
porque si Firefox
no lo soporta,
lo único que va a ocurrir
en este caso,
oye,
es que cuando lo utilices,
esto es Firefox,
cuando lo utilicéis
y le deis aquí
un clic,
¿vale?
pues bueno,
no se verá la animación
entre una página y otra,
pero ya está.
Ahora,
lo que sí que va a hacer
es el fade in y el fade out,
o sea,
interesante,
que alguna cosa sí que hace.
Así que ahí lo tenéis,
ahí tenéis este transition name
que me parece increíble,
me parece un detalle
muy sencillo de hacer
y que os puede ayudar un montón.
Vale,
pues ya tendríamos esto,
también lo podéis hacer
con otros elementos
que mucha gente dice,
ah,
lo hago con la imagen y tal,
pero no es obligatorio
que lo hagáis con una imagen,
por ejemplo,
lo podríais hacer con el título,
vamos a hacerlo con el título
en un momento.
Este transition name
lo podríamos añadir aquí
el título importante,
le cambiamos aquí el title,
este transition name
lo ponemos aquí en el title,
ahora,
eso sí,
una cosa que os pido
y os lo pido por favor
porque os conozco,
¿vale?
Pero fijaos,
ahora también se mueve el título,
guay,
queda,
queda bastante bien.
No lo mováis todo,
por favor,
¿vale?
O sea,
no lo mováis todo,
no pongáis a moveros ahora
todos los elementos de pantalla
entre una página y la otra,
no hace falta.
Con que mováis alguno en concreto,
pues ya está,
si lo movéis todo
va a ser un poco rollo.
Y que sepáis otra cosa,
que hay diferentes animaciones,
tenéis no solo
fade in, fade out,
slide,
podéis cambiarlo totalmente
con CSS,
podéis hacer un montón de cosas,
¿vale?
Pero fijaos que en un momento
hemos hecho esta animación
y queda muy bonita.
Muy bien,
pues ya tendríamos lo de
crear la animación
con todo esto,
perfecto.
De hecho,
también aquí
el,
el,
a ver si tengo por aquí
el back,
a ver,
quería enseñaros una cosa.
El tema es
que podríamos hacer
un botoncito
aquí
en la ID,
solo para que lo veáis,
tampoco es que sea obligatorio,
pero podríamos hacer aquí
un href
para que veáis que
se puede volver
para adelante y para atrás
y que también hace el efecto
porque detecta automáticamente
que si tiene que volver
para atrás,
que a ver,
ya lo estoy haciendo
a mano,
pero también con una navegación
se puede hacer.
Por ejemplo,
a ver,
voy a buscar
left arrow,
no,
arrow left,
¿vale?
Arrow,
¿vale?
Volver atrás,
¿vale?
Ponemos esto por aquí,
esto ya estaría para acá,
vamos por aquí,
¿ves?
Y volver atrás,
ya lo tenéis ahí,
pues con,
o sea,
cualquier navegación que hagáis,
incluso si hacéis una navegación
de una página a otra,
también podéis hacer la animación,
se puede hacer un montón
de cosas increíbles,
¿vale?
Vale,
pues ya hemos puesto
las animaciones entre páginas,
hemos visto lo del client router,
vamos a hacer una cosa
porque normalmente
para leer variables de entorno,
lo que hacemos,
¿no?
Lo que tenemos
en la variable de entorno,
normalmente,
pues tenéis que instalar
dotenv,
tenéis que hacer
un montón de cosas raras,
además las variables de entorno
tienen diferentes tipos,
pueden ser boleanos,
pueden ser strings
y son un rollo,
bueno,
vamos a crear
nuestras variables de entorno,
por ejemplo,
una que sea
show by button,
una que sea para identificar
si tenemos que mostrar
el botón de comprar
y vamos a tener otra
porque vamos a hacer
una llamada a un fetch
que va a ser
score API endpoint
y esto me lo voy a copiar,
que tengo por aquí
una URL,
que es esta,
donde básicamente
lo que te hace
es darte
un número rando,
¿vale?
Y esto es lo que vamos a utilizar
como para sacar
la valoración
de cada uno de los libros,
pero vas a ver
que va a ser muy interesante
porque va a empezar
que vamos a leer
la variable de entorno,
luego lo vamos a hacer
en cliente
y luego lo vamos a hacer
con una isla de servidor
que está bastante chulo.
Bueno,
pues tenemos esta,
las variables de entorno,
¡Ostras!
Se ha vuelto loco esto,
se ha vuelto esto,
tarumba,
se ha vuelto,
se ha vuelto súper loco,
¿habéis visto
que se ha dicho
intentando puerto no sé qué,
no sé cuánto?
¡Ostras!
Se ha vuelto todo loco,
Dios mío.
No sé,
no sé por qué le ha pasado eso,
pero bueno,
está en beta,
vamos a perdonárselo.
El .env es el archivo
donde podéis tener
variables de entorno,
¿vale?
Y las variables de entorno
lo podéis leer
dentro de vuestro proyecto
y es interesante
porque ya sea
para apuntar a APIs,
a tener puertos diferentes,
por ejemplo,
puerto 3000
o ya sea para secretos,
¿no?
API token,
aquí es donde servirían
los tokens,
por ejemplo,
bla bla bla bla,
esto son para lo que sirven
las variables de entorno.
Entonces,
lo bueno que tiene Astro,
sobre todo en la versión 5,
es que hay una forma
muy avanzada
o integrada
de leer variables de entorno.
Nos podemos ir
a la configuración de Astro
y aquí
podemos utilizar
la llave
env
y aquí dentro
decirle
el esquema
que va a tener
nuestras variables
de entorno por ejemplo show by button y le podemos decir que esto es un campo lo tenemos
aquí en field y decimos esto es un campo que es un boleano donde se puede leer esta variable
entorno en el contexto del servidor y su acceso es público vale y esto está muy interesante porque
ahora esto lo que nos va a permitir es leer la variable entorno y además tiparla nos la va a
transformar en un boleano porque las variables de entorno por defecto son todas como podéis ver son
cadenas de texto por más que tú pongas aquí true eso no deja de ser una cadena de texto y normalmente
hay que hacer una transformación ya sea manual o con otra biblioteca pero ahora gracias a esto de astro
podemos indicarle qué tipo es le podemos decir dónde se puede utilizar en el contexto del servidor o del
cliente donde prefiramos en este caso vamos a decir servidor y le podemos decir qué acceso debe tener
si es un público o si es un secreto claro esto está interesante porque a lo mejor el show by button
puede ser público pero un token tiene que ser secreto y así nos va a avisar en el caso de que pueda
quedar expuesto para evitar cualquier tipo de problema y ahora para leer esta variable de entorno
nos podríamos ir aquí a la idea y aquí igual que estamos haciendo dice el módulo astro content no
tiene mira si tenéis este error que este error me ha pasado alguna vez esto que dice el módulo no tiene
ningún miembro render exportado dice que bug no tiene un tipo no sé qué esto es como que ha perdido
los tipos de la colección que hemos creado esto es porque hostia no sé por qué le pasa esto no sé
por qué le pasa esto se vuelve todo loco no sé qué le pasa aquí que se vuelve todo loco se vuelve
tarumba con el tema del puerto sabes lo que pasa es por culpa de este port es por culpa de eso ya está
es por culpa de que le he puesto la variable en torno del puerto y ese puerto lo intenta utilizar ya
está ya está ahora arregla bueno pues ahora se ha arreglado pero si tenéis ese problema de que no se
encuentran los tipos y se hace un lío que sepáis que podéis ejecutar npx astro sync y esto es como que
sincroniza las colecciones ves optimiza las dependencias sincroniza el contenido y ahí como que
limpia la caché y te detecta otra vez bien los tipos en el caso que os pase si nos pasa pues no
tenéis ningún tipo de necesidad pero bueno para que lo sepáis vale ahora para utilizar una variable
de entorno de las que tenemos aquí y que hemos definido aquí que hemos dicho esta variable entorno
quítate esta es del servidor para leerlas en el servidor es increíblemente fácil y me encanta
porque lo único que hay que hacer es import le decís show by button y encima veis que ya tenéis el autocomplete
y esto lo va a sacar de astro dos puntos en barra server y ya podéis utilizarlo normalmente fijaos que
ya te dice que es un boleano así que ya podríamos llevarnos esto y esto que teníamos aquí el enlace
a comprar vamos a ponerlo por aquí vamos a poner show by button y por aquí tenía un botón de compra
si lo encuentro para que lo podamos utilizar rápidamente y no tenga que escribirlo porque era un
poco rollo porque era bastante bonito me lo he copiado del aprendiendo git así que voy a tener
aquí en componentes voy a poner aquí amazon logo vamos a copiarnos el logo de amazon que lo tengo por
aquí vale amazon logo es un archivo svg y el botón de compra lo he estilado aquí entonces así no lo tengo
que hacer aquí en vivo y en directo pero bueno es un ancor que no tiene mucha historia y este ancor al
final lo que se supone que hace es apuntar al enlace de compra de españa luego vamos a hacer que esto
cambie dependiendo de dónde sea el usuario vale entonces amazon logo a ver agregamos el link agregamos
el import aquí agregamos el import y ahora aquí podemos ver que me aparece comprar en amazon españa me aparece el
botón no pero si aquí le pongo que esto sea false y refresco pues no lo hace porque la variable entorno
no la está encontrando correctamente pero si refresco el servidor porque la variable entorno debería
resetear automáticamente pero es ahora ha desaparecido si lo cambiamos a true y seguramente voy a tener que
volver a reiniciar es raro porque debería hacerlo automáticamente pero imagino que hay algún error veis
ahora aparece otra vez o sea tenemos una variable entorno que hace que cambie esto podría ser como una
feature flag si lo quieres entender así de que enseñamos una cosa u otra dependiendo del valor
que tiene pero ya tenemos una forma interesante porque fijaos que ya no he tenido que como le he
dicho que es un boleano ya no tengo ningún problema qué pasa que si tú quitas esto va a petar porque si
le estás indicando si le estamos indicando que tenemos una variable de entorno que se llama show by button y
no la estamos informando la variable nos va a decir oye es que falta nos has dicho que tenemos una variable
variable entorno que era show by button no la estás poniendo pues voy a petar o sea otro control más para evitar
tener problemas lo bueno es que también tenéis la posibilidad de ponerle un valor por defecto
podría poner aquí por defecto quiero que sea true así si se te olvida y está bien que tenga un valor por defecto lo puedes
tener así sin ningún problema y ya está también vamos a utilizar este score api endpoint así que vamos a poner este score api endpoint y el score api endpoint podríamos tener que sea por ejemplo en field podría ser un boleano un enum un number un string en este caso es un string no le vamos a poner ningún valor por defecto pero el contexto en lugar de ser en el servidor que ya hemos visto cómo se podría leer en el servidor le vamos a decir que sea el cliente y vamos a decir que el acceso puede ser público
para leer en el cliente una variable entorno se hace de una forma diferente pero también súper fácil lo cual me parece que está está súper chula mira otra vez me está dando problema este de que dice la propiedad spain no existe en el tipo never esto es porque se desincroniza bueno ahora es porque está caído el servidor lo levantamos otra vez vale ya ahora lo arreglo vale en el cliente lo bueno que tiene astro es que vosotros a nivel de cada uno de los componentes podéis utilizar
un style y esto van a ser estilos que están limitados a este componente y no van a entrar en colisión con ningún otro a no ser que le digáis que son globales y también podéis tener scripts vale podéis poner scripts que sean en línea o podéis poner scripts normales y estos scripts normales son bastante útiles porque podéis importar dependencias podéis tirar de cosas que tiene por ejemplo astro que luego con lo que vamos a ver ahora y aquí podrías hacer un fetching de datos podrías añadirle
interactividad a un botón con un atv listener podrías hacer lo que queráis en este caso queríamos importar la variable entorno pues podemos importarla directamente y lo que hace es traerla de astro en barra client y ya estaríamos leyendo esta variable entorno pero en el cliente y hacemos un poquito más vamos a hacer algo voy a hacer que debajo de la imagen debajo de la imagen vamos a añadir aquí un span que sea por ejemplo
vamos a poner text xs que esto aquí vamos a poner que sea el score y así justo debajo de la imagen vamos a cargar la valoración es una valoración de mentira porque estamos tirando de una API que nos da un número random pero al menos para que veamos cómo funciona esto y además cómo lo vamos a iterar para hacerlo en una isla de servidor en este caso cuidado porque esta API no devuelve un JSON
acostumbrados a que siempre devuelve a JSON pero no siempre devuelve JSON las APIs así que tened cuidado y lo que vamos a hacer en lugar de devolver el res.json típico es devolver res.text que también existe el text sería como texto plano y así lo que podemos hacer recuperar aquí ya tendríamos el score y podríamos decir que vamos a traer
vamos a traer score value vamos a traernos el score element document.queryselector score vale y si tenemos un score element porque si no se quejará de que podría ser nul y tal vamos a ponerlo aquí si tenemos score element vamos a actualizar score element inner html vamos a poner la puntuación vamos a poner aquí a estrellitas stars
estrellita puntuación de 5 vale esto sería totalmente de cliente esto es javascript que se ejecuta en el cliente puedes recuperar elementos del DOM puedes añadir eventos con javascript puedes hacer un fetching de datos y parchear el cliente sin ningún tipo de problema puedes utilizar javascript en el cliente sin problemas esto es una cosa que está muy interesante en astro porque este javascript si se cargará en el cliente no estará en el servidor y puedes hacer lo que quieras puedes utilizar
cualquier cualquier cualquier dependencia que sea de javascript la puedes utilizar aquí vamos a utilizar el punto trim para que por si acaso pone espacios vacíos vale para que no nos la líe vamos a ver si esto ha funcionado vale aquí puedes ver puntuación 4 de 5 cada vez que la actualice vas a ver que pone 2 de 5 2 de 5 bueno o sea se lo va a inventar porque básicamente estamos utilizando una API que nos devuelve un valor random vale pero esto lo hago solo para que lo podamos ver
las cosas que creo que os puede volar la cabeza porque esto está bien pero el problema que tenemos es que como podéis ver cuando yo refresco esto da un salto y además esto lo está haciendo desde el cliente o sea desde el cliente significa que yo estoy aquí no lo voy a refrescar y si miramos aquí HR pues vemos que está haciendo la
petición en el random desde el cliente vale no está mal pero da un saltito y además lo hace desde el cliente vamos a hacer algo que está muy increíble de astro y son las islas de servidor las islas de servidor son
componentes que se renderizan en el servidor y que cuando están listos los devuelve al cliente pero ya lo que renderiza no es que hace el fetching en el cliente y tal no lo renderiza en el servidor
y lo devuelve al cliente es muy parecido a los react server components pero en mi opinión mucho más fácil es de entenderlos de utilizarlos y muchas cosas más de hecho es no tienes ni que indicar en el
componente no tienes que indicar nada en components diríamos que es vamos a poner book score punto astro vale y aquí vamos a hacer esto que estábamos haciendo aquí que
teníamos el score este lo vamos a pasar aquí y aquí dentro de este javascript ahora en el servidor en lugar de hacer todo esto en el cliente que esto es javascript que se lleva al cliente y que se ve como se está haciendo el fetch en el cliente
fijaos que se ve aquí perfectamente en la network este integers ves esta petición random punto org integers esto estamos haciendo en el cliente no tarda mucho pero se hace en el cliente y tal no vale lo que
podemos hacer es decir ostras pues esto de aquí que estamos haciendo aquí me lo voy a llevar lo vamos a quitar aquí lo vamos a poner aquí
obviamente este score api endpoint el problema es que se estaba trayendo del cliente y esto ahora no puede ser lo tenemos que sacar del servidor
pero ya se queja que nos dice que no hay ningún miembro que se exporte en el servidor porque en la configuración habíamos dicho que el contexto de esta variable
entorno era el cliente vamos a decirle que es el servidor vale esto ya lo hemos arreglado ahora no hay ningún problema
el query selector no lo vamos a necesitar porque desde el servidor no podemos recuperar elementos del dom este fetch lo podemos hacer solo que lo vamos a hacer un poco
diferente vamos a poner aquí respuesta vamos a utilizar una wait vale con el wait que quedará un poco más más fácil
aquí tendríamos el score value con el wait rest text y ahora no vamos a tener que hacer este inner html y tal sino que todo esto
que hacíamos aquí ya lo podemos hacer aquí dentro aquí dentro podemos poner aquí la puntuación y tal claro queda mucho más simple mucho más fácil
esto se estaría renderizando en el servidor y ya estaría pero tenemos que utilizar este componente así que para utilizar este componente
donde teníamos el store el score que era aquí vamos a utilizar el componente book score y no sé claro en este caso parece que no necesita
como información pero deberíamos pasarle la idea del libro o sea aquí deberíamos pasarle idea y que esto fuese pues el slack que en este caso es la idea
vale vamos a importar el book score vale y ya está
esto no funciona no funciona y vamos a ver por qué por qué no funciona vale vamos a renderizar vale bueno
sí que funciona pero funciona a regular inches bueno primero es que se me ha escapado aquí una cosita lo vamos a ver por aquí
tú tú tú tú tú aquí vale vale cuál es el problema que tiene en realidad funcionar funciona y fíjate que además funciona mucho mejor
porque ya aparece desde el principio o sea ya aparece de primeras aparece puntuación 3 barra 5 no cuál es el problema
el problema es que si nosotros hiciemos hiciésemos una build de nuestro proyecto hacemos un npm run build
el problema que vamos a tener lo vas a ver ahora en un momentito y es que cuando haces la build y creamos todo nuestro proyecto como te he dicho astro
por defecto es estático totalmente entonces si nos vamos a nuestra carpeta dist
y bueno mejor si miramos qué es lo que ha lo que ha desplegado digamos y lo abrimos
esto sería como ya compilado nos vamos aprendiendo git vale no sé por qué hostia claro es que no tiene no tiene el spa este
como era esto un momento esto es porque claro el spa no siempre la misma página siempre la página la misma página
entonces claro siempre está volviendo a la misma no tiene no tiene una ruta de spa
bueno lo que vamos a hacer para que lo veamos en un momentito es en libro nos vamos aprendiendo git
y os voy a enseñar la página esta el index html
mirad en dist libro aprendiendo git index html en todo el html que tendríamos por aquí
si buscamos el score fijaos que está aquí estático vale
o sea lo que ha hecho cuando hemos hecho la build lo que ha hecho es descargar la puntuación
y lo ha metido de forma estática en el html
y esto es un problema porque si queremos que la puntuación vaya cambiando conforme la gente va votando
no va a cambiar hasta que no volvamos a hacer un despliegue a producción
y claro esta página esto se va a quedar totalmente estático
y si nos gustaría y si quisiéramos y si pudiéramos de alguna forma que todo fuese estático
todo todo queremos que sea estático excepto esta parte de aquí
como por ejemplo pues imaginad twitter claro si todo fuese estático
y los likes no cambiasen hasta que no hiciésemos otro despliegue sería una basura
necesitamos que haya ciertas partes de nuestra aplicación que sí que sean dinámicas
y esto es lo que queremos conseguir justamente con esta parte de aquí
para conseguir eso tenemos que utilizar una cosita que se llama server defer o server islands
vale los server islands lo que nos sirven es para decirle que este componente de aquí
solo esta parte queremos que se renderice en el servidor
todo lo demás va a ser estático excepto esta parte de aquí
ahora bien cuando cambiemos esto vamos a tener un problemita
vámonos a por aquí vale y ya se nos está quejando
nos dice oye get static path es una función que está requerida para rutas dinámicas
vale se nos está quejando porque nos dice que las rutas son dinámicas
que si lo que querías era renderizar en el servidor no sé qué no sé cuánto
cuál es el problema el problema es que por defecto astro es totalmente estático
ya lo hemos visto que cuando lo he hecho hecho la build me ha construido aquí todos los archivos
html que tendría que subir a mi servidor vale y es todo estático no tiene un servidor detrás
que nos pueda ayudar pero claro si queremos que esto lo renderice desde un servidor
tenemos que cambiarle la configuración y tenemos que decir que el output
el output necesita enviar un servidor y esto lo que va a hacer es inicializar un servidor
que sólo se utilizará cuando lo necesite y lo que sea estático será estático
pero lo que necesite ejecutar en un servidor lo ejecutará en un servidor
así que con este output server ahora podríamos ir a nuestras páginas por ejemplo en astro
y exportar una constante que le decimos que esta página se tiene que pre renderizar
de esta forma esta página le indicamos que tiene que seguir siendo estática
porque no queremos que vaya al servidor y la renderice en el servidor
va a ser totalmente estática no va a tener service al rendering sino que va a ser una página estática
la va a crear cuando hagamos la build y esta página la podremos subir y ya está
y esto mismo se lo vamos a decir a esta de id porque lo único que queremos que no sea estático
es este componente de aquí vale una isla de servidor sólo una parte de nuestra página
se va a renderizar en el servidor y ahora que parece que se ve todo igual
y aunque parece que esto hace una cosita vamos a ver una diferencia
fijaos que ahora todo funciona correctamente esto sigue dando un salto
pero por qué da un salto esto da un salto porque si miramos la network
fijaos que ahora no hace el fetch aunque aquí pone fetch y tal
no se ve la petición de la API no se ve en ningún sitio una petición de la API
pero fíjate o sea cómo puede funcionar esto si no está haciendo la petición de la API
de dónde está sacando esta información no la está sacando de ningún sitio
esto es de la imagen que no sé por qué esta imagen peta no tengo ni idea
qué es lo que le pasa con esta imagen pero fijaos que ya no hace la petición a la API
lo que está ocurriendo aquí es que está inyectando de una forma muy interna
astro está haciendo que esto tenga un elemento vacío y cuando el servidor lo renderice
le va a devolver el html y lo va a incrustar ahí lo cual va a ser que sea mucho más performante
mucho mejor y que el usuario le pueda devolver esto mucho antes
fijaos aquí que aquí está la información veis este book score que pone aquí server aislance
que ha devuelto 380 bytes si le damos un clic y vemos aquí el payload
vamos o la respuesta vais a ver que lo que ha hecho es el servidor
ha renderizado esa parte y este html lo ha incrustado donde le tocaba
en lugar de llamar a la API en el cliente y renderizarlo y todo
lo que hemos hecho directamente es que lo hace todo el servidor
que va a ser mucho más rápido a la hora de llamar cualquier API
no vamos a tener problema de course que en el cliente podrías tener y en el servidor no
y lo que hace el servidor es vale pues que sepas que ahora que tienes esta parte
en ese hueco tienes que renderizar eso ahora bien hay un problema que seguro
te lo estás preguntando oye pero esto está haciendo un salto es un poco rollo
que esté dando un salto lo bueno que tenemos con este este sistema es que
además podemos utilizar los fallbacks podemos indicarle aquí que renderice
algo mientras por lo que sea se está se está haciendo lo del servidor le podemos
decir aquí vamos a poner una opacidad un poquito pequeñita y le vamos a poner aquí
cargando puntuación
y le decimos que esto tiene que ser el fallback en el slot del fallback lo que va a ocurrir
con esto es que cuando entremos ves cargando puntuación o sea de forma súper sencilla sin
estados sin tener que cambiar de estado estar pendiente y tal lo que estamos haciendo es
le estamos diciendo oye mientras este componente se renderiza el servidor y devuelve el html
quiero que me renderices esto de aquí dentro que puede ser un cargando puede ser un playholder
puede ser lo que tú quieras y de esta forma te queda así de bonito una cosa que todo lo que ves
toda la página este título la imagen el contenido el botón todo es estático excepto esto de aquí y
esto es lo que se le llama una isla de servidor una de las cosas yo creo más potentes y más
increíbles y más tremendas que podéis hacer con astro de una forma espectacularmente sencilla
vale queda cacheado midu podrías cachearlo eso es cosa ya más tuya que otra cosa se puede renderizar
de nuevo la puntuación a través de un botón pues creo que no no lo podrías volver a llamar
pero al final eso sí que podrías hacerlo en el cliente y ya está se podría crear un componente
aparte para el fallback se podría crear sin ningún tipo de problema también porque también puedes poner
en un slot puedes poner un componente o sea podrías poner un componente aquí o sea puedes poner aquí
componente slot fallback y no tendrías ningún problema o sea en el fallback puedes renderizar lo que quieras
lo que tú quieras qué más me contáis aquí en el momento de player se va a requerir un server corriendo en todo momento
como ya no es estático efectivamente brenés lo malo que tendría esto es que vais a necesitar tener un servidor
no en todo momento porque esa es una cosa muy interesante que tiene astro y es que entre los destinos de despliegue
tenéis obviamente netlify vercel pero también tenéis dino deploy y también tenéis cloudflare
o me lo he imaginado aquí está cloudflare tenéis cloudflare pages o sea que podéis hacer en dino deploy cloudflare pages
y va a funcionar no con un servidor funcionando en todo momento sino que va a funcionar de forma
que se levanta la función sólo cuando necesita dino deploy es una muy buena opción porque es muy fácil
desplegarlo ahí y porque tiene una capa gratuita bastante pero bastante bastante genial un millón
de peticiones al mes un bandwidth de 100 gigas totalmente gratis está bastante bien así que
tenéis más opciones que las típicas de netlify vercel porque funcionaría sin ningún problema y no hace
falta que esté el servidor abierto todo el rato el único problema que veo es que no las n5 de 5 se
autorizaría al cambiar su puntuación sin renderizar el componente a ver no va a ocurrir en tiempo real lo que
sigo que va a ocurrir es que en cada petición que se haga vais a ver un botón o sea vais a ver una
puntuación diferente en el caso que se actualice para que os hagáis una idea esto mismo es lo que
yo hice en la web de aprendiendo git.com en esta web yo tengo aquí este botón de comprar libro físico en
amazon españa si entráis desde españa vais a ver el botón de españa si ve si entráis desde méxico desde
colombia desde eeuu vais a ver un botón totalmente distinto y esto es lo que vamos a hacer ahora para que
veáis cómo se podría hacer que es muy interesante y es interesante porque estamos que toda la página
es estática excepto este botón y para que veáis que es verdad si miramos el código fijaos que aquí
esta parte ves que pone aquí server islands en astro este botón que pone comprar libro físico en amazon
esa parte no es la que luego aparece porque ves que da como un pequeño parpadeo bueno esto hace un
parpadeo porque es inevitable pero que tampoco se nota mucho y es que esa esa parte en el servidor se
renderiza una forma y cuando llegan el cliente es que se está haciendo ese cambio lo cual es
bastante bastante brutal esto ahorra ancho de banda al usuario de la página pues sí porque porque muchas
veces lo que puede ocurrir es que tú haces normalmente sin el cliente tú haces la petición a
una api la api al final devuelve un montón de información que no no necesitas para renderizar o la
tienes que tratar en lo que sea entonces primero tienes que hacer la petición a la api tienes que tratar
los datos luego renderizas y una vez que renderizas tienes que parchear el dom y entonces mostrarlo
eso es mucho más costoso y mucho más lento que hacerlo desde el servidor el servidor tiene mejor
conectividad que la gran mayoría de usuarios eso es lo primero lo segundo va a ser mucho más rápido a
la hora de hacer estos cambios y lo tercero es que sólo devuelve el html que necesitas en lugar de
devolverte todos los datos que muchas veces no necesitas tratarlos así que y además tiene la
particularidad y la ventaja de que tienen más seguridad porque no estás exponiendo la url a la
que estás haciendo la api a la que estás llamando por ejemplo imagínate que tienes que enviar un token
al hacerlo en el servidor eso no lo va a ver porque le estás devolviendo directamente el html y esto lo
podéis llevar más allá no penséis sólo en hacer una api o llamar a una api imaginad que necesitáis
saber si el usuario ha iniciado sesión o no podéis tener un server island que dependiendo de si el
usuario tiene la sesión iniciada o no va a ver una cosa u otra y esto es brutal por ejemplo
pensate en la página de midu.dev que es la academia que los suscriptores tienen acceso gratis para los
cursos y tal este botón de cerrar sesión esto que veis aquí arriba vale lo podríais hacer con un
server island porque podríais detectar toda la página podría ser estática excepto este botón de aprender
ahora porque este botón podría detectar si el usuario tiene la sesión iniciada o no si la tiene
iniciada pues aparece con lo de cerrar sesión y todo esto y si no la tiene iniciada pues aparecería con
lo de aprender ahora y ya está o sea está bastante bastante interesante el tema de los server island es
muy potente para que lo veamos vamos a ver otro ejemplo vale con el lo de comprar el libro vale mirad
aquí tenemos este botón que pone comprar en amazon españa si yo ahora me voy aquí a components y ponemos
buy button astro vamos a crear un botón que lo que va a hacer es detectar voy a tener por ejemplo aquí
españa españa que va a ser ese y esto además vais a aprender una cosa que es muy genial y es que yo voy
a desplegar mi esta aplicación la voy a desplegar en versell pues versell tiene una cosa muy interesante y
es que los headers puede recuperar puede recuperar perdón de dónde es el país o sea el usuario de
dónde es puede decirte que es de españa que es del reino unido de colombia lo que sea y lo puedes
hacer a través de las cabeceras y no tenéis que ver la ip ni nada versell ya te da esta información
entonces sólo sabiendo esta información podemos decir bueno si el país que está bien de dónde es el
usuario es españa vamos a utilizar la store de españa y si no pues en este caso vamos a utilizar la de
usa pero aquí podríais complicar esta lógica para tener tantas como queráis veis aquí en aprendiendo
git en el markdown teníamos que se podía comprar en españa o en eeuu entonces ahora que tenemos esto
podríamos hacer country name si el country name es españa es españa y si no es eeuu y esto podemos
sacar de las props que le vamos a pasar podemos tener la store esta store va a ser esto que le vamos a
pasar de aquí vale esto que que este objeto se lo vamos a pasar por aquí no sé le puedo llamar by que
es exactamente el mismo para que lo tengamos más claro y aquí la url será by y store country y aquí ya
podríamos renderizar exactamente lo mismo que habíamos renderizado aquí todo esto lo vamos a renderizar
aquí cambiando algunas cosas por ejemplo la url ahora siempre va a ser la que estamos detectando
aquí el amazon logo lo tenemos que importar vale y por otro lado este comprar en amazon españa dependerá
de el país desde el que nos está visitando así irá a amazon españa o amazon eeuu dependiendo de dónde venga
este botón en lugar de utilizar esto de aquí vamos a ponerlo aquí vamos a tener el buy button
buy button otra vez con el server defer y le vamos a pasar el objeto de compra donde están las dos
tiendas vamos a importar esto lo vamos a guardar y ahora podéis ver que siempre aparece amazon españa en
normal que siempre aparezca amazon españa porque es es el que donde donde estoy yo y porque es el que
es por defecto claro esta cabecera de amazon españa esta cabecera de aquí no la tenemos informada en
local vale no funciona correctamente ya sería increíble que estuviese entonces tendríamos que despegar para
que la pudiésemos ver lo podemos hacer lo podemos mirar en un momento de hecho lo puedo desplegar en
vercel en un momentito para que lo tengamos voy a hacerlo en github voy a tener aquí astro 5 astro 5
de books ejemplo de app con astro 5 y sus nuevas funcionalidades vale vamos a poner todo esto creamos
el repositorio voy a llevar todo esto tú tú tú añadimos esto bueno no pasa nada si
se me cuela el punto no pasa nada porque no hay nada raro así que first commit pusheamos aunque
creo que me lo ha me lo ha ignorado puede ser si me lo ha ignorado porque por defecto lo ignora pues
lo voy a designorar porque si no voy a tener que configurarlo bueno os voy a enseñar un trucazo vale
vale os voy a enseñar un trucazo que esto va a gustar os va a gustar porque estas cosas no se suelen
enseñar y os va a gustar bueno ya lo he subido voy a ir a verse él en un momento vamos a desplegar
la página a ver si todo va bien vamos a añadir un nuevo proyecto vamos a importar astro 5 de books
seguramente va a petar porque le falta alguna variable entorno vale pero bueno vamos a intentarlo a ver si
de hecho voy a hacer aquí una build a ver si hay algún error a ver si no le gusta algo de typescript que se
nos ha podido olvidar no aparece que vale dice no se puede ves nos falta un adaptador importante
el tema es que para poder voy a beber agüita porque me está fallando la voz cuando sale la
versión oficial de astro 5 dependerá de vid cuando salga la nueva versión de vid aparecerá astro 5 es
que a evit está en beta también bueno pues vamos a instalar la de vercel que es así también pnpx o
pnpm astro adversel ahí dependerá de donde lo queráis desplegar vais a tener que poner un adaptador
diferente vercel netlify cloudflare lo que sea vale añadimos esto pipí ves nos hace los cambios
automáticamente esto es una maravilla es que esto me encanta vamos a llevarnos estos cambios
ad adapter para que pueda hacer el despliegue en vercel y ahora os enseñaré el trucazo vale expect
deployment y aquí debería aparecer el nuevo puede ser que nos falle por la variable entorno a lo miramos
vamos a ver vale ya lo instalado va súper rápido la isla se le puede hacer debug desde consola si
falla la api desde consola del cliente no pero desde consola del de lo del servidor si claro
totalmente vale vale ha fallado porque ves nos dice variables inválidas vale veis que la la variable
entorno me dice score api endpoint falta la variable entorno que esto es justamente lo que hemos visto
vale vale pues ojo trucazo porque normalmente lo que hacéis muchos y me tenéis que dejar una
suscripción si no sabíais este truco no pero es que de verdad que está muy genial el tema es que
normalmente lo que hace la gente es irse aquí a environment variables y lo que hace es pues
score api endpoint no y haces esto y esto pues lo pones en el valor vale lo haces así y aquí lo pones y
y bla bla bla pero puedes hacer esto te lo puedes copiar todo te vas aquí lo pegas y se copian todas
las variables de entorno la key y el value no me digáis que esto no es espectacular no me digáis
que esto no es espectacular es tremendo es tremendo está muy chulo y esto como si bueno ya hay gente que
ya lo sabía bueno porque ya lo habré explicado y porque en twitter también lo he mostrado pero está
genial o sea está tremendo o sea en lugar de tener que ir una a una con toda la variable de entorno
imaginar que tenéis aquí otra otra variable otra y secret key no hay ponéis midu midu gato vale en lugar de
ir una a una que lo hacéis muchos las podéis copiar todas os vais al pri a la primera aquí lo pegáis y ya
las tenéis todas os lo pega todo perfectamente esto es la magia de la experiencia de desarrollo en
verser esto está genial ya lo sabía igual me suscribo muy bien hombre toda la comunidad sabía venga ya
chavismón venga fantasmico fantasmico todo el mundo sabía las cosas como son las cosas como son
bueno dice tengo entendido que los streams no es necesario que estén entre comillas en el enf cuál
la diferencia ponerlo con comillas yo lo pongo en general con comillas primero porque se ve mucho
mejor me parece como mejor de que de que se vea claramente de que son con comillas luego porque
te puede dar la falsa la falsa sensación de que es el valor por ejemplo si tú pones false puedes tener
la falsa sensación de que es el valor false y no es verdad es en realidad la cadena de texto false para
que sea el valor boleano se tiene que utilizar como por ejemplo pues esto no esto que se hace
aquí que se hace transformación de boleano número y todo este tipo de cosas entonces yo creo que yo
por eso lo hago pero bueno cada uno que lo haga lo que lo que quiera bueno pues una vez que hacemos
esto ahora sí entiendo que si vamos otra vez a nuestras a nuestro deploy y le decimos que lo vuelva a hacer
hostia no se puede no se puede hacer otra vez no se puede hacer un bueno voy a hacerlo a lo pirata
más que nada por si así no me pilla
más que nada para que asegurarme que pilla la variable entorno y lo que deberíais ver ahora cuando
lo despleguemos que no tardará nada o sea es que en unos segundos lo es súper rápido la verdad es que
ha mejorado muchísimo la velocidad de despliegue de de las builds de versell me parece increíble lo
rápido que va y que cada vez va más rápido es que menos de un minuto puedes tener un despliegue hecho
a producción y con astro que utiliza beat y que van súper bien es increíble lo rápido que va es que
cuánto está tardando si es que no está tardando nada mira 23 segundos 24 esto ya lo tiene 24
vale y ya ya lo tenéis o sea 30 segundos espectacular 30 segundos
vale bueno no sé por qué me ha dicho que me tengo que autentificar a porque es esta la página vale aquí
tendríamos ya esto fijaos que ya pues tenemos aquí esto aquí es porque no he puesto un fallback pero lo
podríamos hacer lo bueno aquí podéis ver que sí que está cargando una puntuación diferente cada vez
que lo hacemos para asegurarnos aquí yo estoy viendo amazon españa pero ahora la pregunta del millón es que me
tendrías que decir qué es lo que veis vosotros para asegurarme no sé si por aquí no sé si lo puedo
lo puedo recuperar pero vosotros me podríais decir si estáis viendo amazon lo que sea si estáis viendo amazon
eeuu o lo que sea los que no se despeaña sino lo que podríamos hacer es abrirlo con thor que tardará un
ratito pero entiendo que como thor no debería detectar que estoy en españa yes veo eeuu veis
entonces lo que estamos haciendo gracias a esto es que este botón de o sea toda la página es estática
fijaos que miro el código y toda la página si yo busco el aprendiendo git y github y lo busco veis
aparece aquí aquí está la imagen aquí está el título o sea toda la página es estática
excepto lo que hemos hecho aquí que son las islas de servidor aquí pone la puntuación que hemos puesto
aquí y luego el botón aparece distinto dependiendo de si sois de españa aparecerá españa y si sois de
un país que no es españa como andorra por ejemplo pues aparecerá amazon eeuu y eso es lo que lo hace
súper interesante a ver a ver si ponemos aquí en el private steel connecting madre mía la madre que lo
parió la madre que lo parió lo lento que es esto lo lento que es esto es que caos lo malo lo malo es que
si claro es que privado no privado no funciona porque me va a pillar igualmente entonces con la red tor se
supone que debería hacerlo es que no quiero probar no quiero poner una vpn por si me peta la de ópera
es que no sé si tengo ópera es que no tengo ópera una pena una pena pero bueno me vais a tener que
creer me vais a tener que creer que bueno ya habéis visto que es totalmente cierto y que funciona
totalmente y ahí lo tenéis mira cómo funciona ahí con sus animaciones y todo esto fijaos que hemos
hecho en un momento en un momento y podríamos haber hecho más cosas podríamos haber hecho una api
podríamos haber hecho un montón de cosas pero hemos hecho animaciones entre dos páginas hemos hecho
páginas estáticas pero que también son dinámicas con algunas partes estamos trabajando con con
también con colecciones que esto podrían ser post podrían ser productos de una tienda podrían ser
mil millones de cosas entonces nada amigos espero que os haya gustado este cursito de astro 5 vamos a
hacer en la academia ya os lo digo yo porque para el spoiler vamos a hacer un curso especial para de
astro 5 cuando aparezca en la academia donde vamos a crear más cositas vale vamos a crear por ejemplo
apis vamos a vamos a tener a lo mejor una cosa parecida a esta la idea para mí es que voy a intentar
hacer un e-commerce con el en el cursito de la academia pues viéndolo paso a paso con todo esto
será un ejemplo un poco parecido al que hemos hecho hoy pero llevándolo un poquito más allá para que
hagamos como una pequeña tienda no va a ser una tienda con o sea lo importante es aprender astro
vale y eso es lo que quiero hacer así que mi idea es hacer un un e-commerce cuando salga astro 5 de
forma final y ponerlo en la academia vale así que estrapi vamos a hacer algo ya más adelante
de
como
como
vale
vale
vale
y
vale