Curso Full - Astro - Framework...

Ejemplo de Dinamicio y Estatico.

Fecha del momento Statico: 12:36:27 PM --> esta fecha al hacer el build queda graba a fuego es estatico. (dado que no hay nada de javascript)

¿entonce como lo hacemos dinamico?

Para hacerlo dinamico, podemos montar un Isla con framework, pero siendo tan simple podemos usar javascript, para ello se debe hacer uso de un archivo .js

Fecha Real Dinamico:

Reutilización de componentes

se sugiere crear una carpeta de component por ejemplo la barra del navegador Navbar.astro

Layouts y Props

El layouts es un componente que se puede reutilizar en varias paginas, por ejemplo un footer o un header. El Layot Global normalemnte es los tags de html, header body... MainLayout.astro Nota : Introducimos el concepto de props, que son los parametros que se le pasan a un componente. en este caso el autor y el titulo.

Estilos por componente y globales

el Style se puede definir localmente en scope solo en el componente que lo definimos o globalmente

Pagina 404

View Transitions

View Transitions es una forma de animar la transicion de una pagina a otra.

Sección 3 : Ruta Dinamicas y Estaticas : PAgina Estatica GENERADO DINAMICAMENTE

Para eso vamos a montar una App de Pokemones

El Fetch a pokemon

la interface del pokemons

uso de la components card con sus props

pantalla id del pokemon por paramentro ... pero siendo estatico necesita getStaticPaths()` function required for dynamic routes

estilo condicionales

funciona de paginate que se desestructura de getStaticPaths

En el tsconfig.json podemos parametrizar los alias "@components/*": ["./src/components/*"],

MetaData y visualización en las redes sociales

Seccion 4 : Dinamismo a la web estatica

indicador de ruta activa del navbar, con el condicional class:list

indicador de ruta activa del navbar

Astro icons , podemos buscar en https://icon-sets.iconify.design/ los icons que queremos y añadirlo. Tienes que estar en src/icons

Animar el heart, y cambiar el estado, para guardarlo en este caso el localstorage. lo vamos hacer sin integración de librearías islas, lo hacemos con java VANILLA

Ciclo de vida del View Transition

Islad con SolidJS para visualizar los favoritePokemons. Directivas del lado del cliente hay que decirle a Astro que la isla !Funcione! tiene que cargarlo y reactive... eso son las directiva

Con las Islas : pasar Props y Componentes, desde la base de datos por ejemplo. y mantaner el estado de la componenete entre distintas paginas, como ejemplo un counter ... transition:persist="counter"

Enviar un componenet como ejemplo : title hacia la isla para que lo respecte el fornato por ejemplo.

mostrar el listado de favoritoa, recuperado desde el localStorage. con el For de SolidJS

Sección 5 y 6 : Colecciones e Imagenes

dentro de la carpeta src/content

Optimiazion de las imagenes

Markdown y MDX , es un lenguaje de sintaxi simplificad de HTML. instalamos MDX Astro para poder usarlo.

Layouts para MDX.

Colleciones de la carpeta content con su fichero de config.ts

Optimicaciones de Imagenes

src/set de la image

Imagenes en colecciones

colecciones : getCollection, getEntry , filtro de las colleciones, y relaciones con otra COLLECIONES en config.ts con reference.

Sección 7 : Themes - Listos para usar para tu Web

Astro Themes

Documentación con Starlight y Agrergar Dlocumentacion

Themes Tercero : Astro-Sphere. muy bonito!!

Seccion 8 : RSS - De momento la saltamos. sirve para exponer nuestros blogs a terceros.

Seccion : 9 - Server Side Rendering y Endpoints

Con Astro podemos generar de forma 1) statica , 2) lado Servidor : con node

Restful API estáticos: de forma dinamica nos traemos los datos desde la base de datos y se genera como JSON de forma estatica en la dist de producción.

SSR Adapters : si quieremos manda el slug del post, y siendo construida de forma estatica los queryPArameters de la ruta no existen. ¿como lo solucionamo? con un adapter de integración en este caso usamo @astrojs/node y cloudfare,

export const prerender = false; nos permite que se genere de forma dinamica la pagina en la cual la ponemos. Static es el modo por defecto.

hydrid vs server vs static. el hybrid es muy muy parecido al static, al momoneto de hacer el build, mantiene el static pero si queremos quye alguna pagina se gnere de forma dinamica server se los decimos con prerender=false

Ejemplo de hydrid

12:36:27 PM

y por ejemplo si estas en modo server y quiere que la pagina about sea static le pones export const prerender = true

QueryParams

Segmentos de Ruta

Post, Put, Delete ::: Endpoints

Despliegue a Cloudflare

Seccion 10 : Astro DB

Base de dato SQL , al instalarla crear la configuración de las tablas, y un fichero ts seed para el desarrollo

Es una SQLLite el local, pero al hacer un push en cloudflare usamos la parte robusta de Cloud Astro Studio. (a Fernando le gusta más Prisma)

Reutilización de componentes