Tips importantes en la pagina - Simplificar las direcciones de ruta en las importaciones 9:25 - 12:00 - preload de fuentes locales desde html 12:10 - 16:48 - anexar en css las fuentes locales 16:49 - 20:03 - Instalar tailwind y configurar las fuentes locales en astro 20:13 - 21:58 - Crear componentes en astro 23:20-24:45 - pasar variables props, interface en astro 25:00 - 28:32 - contect collection mediante markdown y la data en html con astro 33:35 - 49:00 - ordenacion de post por fecha 49:30 - 54:00 - convertir de formato fecha a formato string para visualizar en el post 54:29-57:23 -Utilizar el collectionEntry 1:00:00 - 1:03:12 - Rutas Dinamicas 1:06:00 - 1:16:49 - Render Markdown a HTML 1:27:30 - 1:29:22 - Tailwind tipography para dar estilos a markdown 1:31:00 - 1:33:58 - Manejo de Imagenes 1:34:08 - 1:39:26 - VIew Transition en Astro 1:40:00 - 1:43:47 - Manejo de tags y selector de tags Parte 1 1:45:00 -1:59:00 - Filtering Collection Manejo de Tags en Astro Parte 2 1:59:30-2:06:00 - Astro Icon, astro astrorune v 4.5 mejora 2:09:40-2:20:00
Excelente! Gracias siempre, super completo, quizas se pudiera completar este mismo proyecto con alguna paginación de artículos o post y tbien implementar algo parecido a lo de categorías o tags pero para autores, Slds!
justo estoy haciendo una aplicacion web con astro y una seccion de blogs y vaya tu video como me ayudo a entender mejor la documentacion de astro que me la lei de abajo para arriba, excelente contenido y si alguien lee esto le recomiendo hacer eso leer la documentacion y a su vez mirar este curso que te ayuda de una forma excelente, sigue asi
Genial el video y genial explicado. Puestos a pedir mas contenido, me gustaría ver como, sobre este mismo proyecto, se puede construir la funcionalidad de editar posts y publicarlos directamente.
Te agradezco muchísimo hermano. Espero poder construir un sistema completo de usuarios con auth y crud operations y la nueva DB, se me hace difícil, pero creo que Astro es definitivamente el nuevo camino, la mejor elección
Hola como estan ...saben que actualice el Macbook justo cuando estaba en minuto 1:18:59 y al actualizar ya no funcionaba nada.....instale las extensiones en VS code pero en algo ayudo .....se desactualizo todo
Estaría muy interesante ver como aplicar la internacionalización en Astro para tener slug por idioma, contenidos diferentes, etc. Yo me tuve que afrontar a eso y la verdad es que hay poca documentación sobre el tema y ninguna buena solución. Al final acabé liando bastante todo para conseguirlo.
En una próxima oportunidad para eso del selector te recomendaría usar framer motion para hacer algo mas llamativo, rápido y optimo sin tanta complicaciones
La mejor opción es crear una Isla de React, eso es lo bueno de Astro, que al poder tener componentes de distintos frameworks, puedes crear componentes específicos de un framework cuando necesites hacer uso de una librería
alguno me ayuda con un problema de @import de una fuente en style css. es el unico archivo con la directiva is:global y sin embargo en el deploy no se carga correctamente y me aparece mucho mas abajp cuando el import deberia estar arriba del todo
yo lo importo en el layout con import "@fontsource-variable/inter"; import "@fontsource-variable/open-sans"; si te es de ayuda, me funciona correctamente.
Que yo sepa están todos disponibles, aquí puedes ver todos mis videos sobre Astro th-cam.com/play/PLP6SyR5ergFx4iGM159uC1_i_wb4ZfcEw.html&si=J3PHq-I9cic-KpFQ
la animacion que hiciste cuando le doy a ver mas y te lleva a la otra ventana no me hace la animacion de la imagen, tengo q tener el mismo diseño o como seria?
Estás usando Chrome? Astro usa la Web Transition API que aún no es soportada por todos los navegadores y hace una animación distinta para los no soportados. Si estás usando Chrome entonces verifica que la tarjeta del post y el contenedor de la vista del post completo tengan el mismo nombre de transición como hago yo en el vídeo
use todos los navegadores , hasta copie tu proyecto ya hecho para ver si yo hice algo mal, y me pasa lo mismo, capaz tengo que actualizar los navegadores?
No de forma tan sencilla como en Next lamentablemente, tendrías que hacerlo de forma manual con cabeceras de caché, pero es posible. Te dejo un artículo sobre ello logsnag.com/blog/implementing-isr-in-astro
@@manumrtf Buff... Estoy viendo que es mucho follón. Deberían darle una vuelta a eso porque es una característica importante cuando creas un blog cuyo contenido viene de un Headless CMS o algo así y empiezas a tener muchas entradas.
@@nihil_um La verdad que sí, recientemente hice un front para un periódico digital que tenía sus entradas en un WordPress y me tuve que decantar por Next por esa razón, pero estoy seguro que es algo que añadirán en un futuro no muy lejano
@@manumrtf buenas, pero configurando el output:"server" no se logra esto ? ( docs.astro.build/es/basics/rendering-modes/#modos-de-output-del-servidor )
@@robertostringa9254 yo también lo pensaba al principio, creo que a todos les pasa. Pero con el tiempo se ha vuelto algo imprescindible para mí, hace que maquetar sea mucho más rápido y divertido, aunque también depende de preferencias personales. Un saludo
@@manumrtf sí quizás sea más rápido, pero termina siendo lo que siempres se buscó evitar, mezclar el contenido con la presentación visual.Pero sí, es a gusto. Saludos.
Tips importantes en la pagina
- Simplificar las direcciones de ruta en las importaciones 9:25 - 12:00
- preload de fuentes locales desde html 12:10 - 16:48
- anexar en css las fuentes locales 16:49 - 20:03
- Instalar tailwind y configurar las fuentes locales en astro 20:13 - 21:58
- Crear componentes en astro 23:20-24:45
- pasar variables props, interface en astro 25:00 - 28:32
- contect collection mediante markdown y la data en html con astro 33:35 - 49:00
- ordenacion de post por fecha 49:30 - 54:00
- convertir de formato fecha a formato string para visualizar en el post 54:29-57:23
-Utilizar el collectionEntry 1:00:00 - 1:03:12
- Rutas Dinamicas 1:06:00 - 1:16:49
- Render Markdown a HTML 1:27:30 - 1:29:22
- Tailwind tipography para dar estilos a markdown 1:31:00 - 1:33:58
- Manejo de Imagenes 1:34:08 - 1:39:26
- VIew Transition en Astro 1:40:00 - 1:43:47
- Manejo de tags y selector de tags Parte 1 1:45:00 -1:59:00
- Filtering Collection Manejo de Tags en Astro Parte 2 1:59:30-2:06:00
- Astro Icon, astro astrorune v 4.5 mejora 2:09:40-2:20:00
Genio
Muchas garcias por tu aportacion a la comunidad de Astro 🚀🚀🚀
Gracias por el contenido de Astro, hace falta tutoriales así de completos como el que haces
Gracias a ti por el apoyo
Me acabo de suscribir, de lo mejorcito de astro q he visto por internet, gracias y felicidades
Excelente! Gracias siempre, super completo, quizas se pudiera completar este mismo proyecto con alguna paginación de artículos o post y tbien implementar algo parecido a lo de categorías o tags pero para autores, Slds!
Primer vídeo que veo tuyo y la verdad que explicas muy bien, me suscribo para estar muy atento a este canal con tanto futuro
Muchísimas gracias y bienvenido!
justo estoy haciendo una aplicacion web con astro y una seccion de blogs y vaya tu video como me ayudo a entender mejor la documentacion de astro que me la lei de abajo para arriba, excelente contenido y si alguien lee esto le recomiendo hacer eso leer la documentacion y a su vez mirar este curso que te ayuda de una forma excelente, sigue asi
Excelente contenido de Astro, voy a empezar a hacer proyectos en este porque me llama mucho la atención! , gracias por estos cursos!
Habrá muchos más vídeos de Astro en el canal 😁
ole manu, me sorprendió la calidad del curso, cada vez va mejorando, esperando la clase del ecomerce con astro :)
Pronto disponible :)
Vengo del video anterior y ahora con este. Todo bestial. Muchísimas gracias por compartir tus conocimientos, es un lujo poder disponer de videos así.
Gracias a ti por tu comentario!
Muy claras las explicaciones y el desarrollo del proyecto paso a paso! Excelente!
Genial el video y genial explicado.
Puestos a pedir mas contenido, me gustaría ver como, sobre este mismo proyecto, se puede construir la funcionalidad de editar posts y publicarlos directamente.
Te agradezco muchísimo hermano. Espero poder construir un sistema completo de usuarios con auth y crud operations y la nueva DB, se me hace difícil, pero creo que Astro es definitivamente el nuevo camino, la mejor elección
Espero que mi canal te ayude a conseguirlo!
Muy buen contenido el que subiendo, felicidades
Muchas gracias me alegra que te guste!
excelente, muchas gracias!
Muchas gracias es justo lo que necesitaba. Nuevo sub
Gracias a ti!
estaria bueno ver como funcionan los server actions en astro, de por ahi un CRUD
Hola como estan ...saben que actualice el Macbook justo cuando estaba en minuto 1:18:59 y al actualizar ya no funcionaba nada.....instale las extensiones en VS code pero en algo ayudo .....se desactualizo todo
El getstatic path de astro comenzo a fallar
Estaría muy interesante ver como aplicar la internacionalización en Astro para tener slug por idioma, contenidos diferentes, etc. Yo me tuve que afrontar a eso y la verdad es que hay poca documentación sobre el tema y ninguna buena solución. Al final acabé liando bastante todo para conseguirlo.
es medio dificil. yo encontre como hacerlo con i18n
Hola , podrías hacer un tutorial de astro con postcss y autoprefixer, sería genial para el soporte de navegadores , grande crack 🎉
Hola amigo, me gustaría que hicieras video de astro con supabase
Con cual extension de VSC haces que los archivos de Astro tomen formato automaticamente?
Hola, estoy haciendo el "z.coerce.data()" pero no me está convirtiendo el string a Date. ¿Alguien sabe como solucionarlo?
Muchas gracias, que crack. 🤠
Excelente
En una próxima oportunidad para eso del selector te recomendaría usar framer motion para hacer algo mas llamativo, rápido y optimo sin tanta complicaciones
No seria tan optimo si usara framer motion de hecho.
Gracias por el contenido de primera!. Existe algo parecido a frame-motion de react en Astro ?
La mejor opción es crear una Isla de React, eso es lo bueno de Astro, que al poder tener componentes de distintos frameworks, puedes crear componentes específicos de un framework cuando necesites hacer uso de una librería
@@manumrtf Muchas gracias por tu respuesta, voy a ponerla en practica!
alguno me ayuda con un problema de @import de una fuente en style css. es el unico archivo con la directiva is:global y sin embargo en el deploy no se carga correctamente y me aparece mucho mas abajp cuando el import deberia estar arriba del todo
yo lo importo en el layout con import "@fontsource-variable/inter";
import "@fontsource-variable/open-sans"; si te es de ayuda, me funciona correctamente.
Saludos líder un curso typescript
Muy pronto!
¿En que momento instalaste ZOD?
Lo puedes importar de astro:content
Ya que las content collections de Astro lo usa no tienes que instalarlo aparte
El video anterior de astro fue borrado? gracias
Que yo sepa están todos disponibles, aquí puedes ver todos mis videos sobre Astro
th-cam.com/play/PLP6SyR5ergFx4iGM159uC1_i_wb4ZfcEw.html&si=J3PHq-I9cic-KpFQ
Amazing 🔥🔥
la animacion que hiciste cuando le doy a ver mas y te lleva a la otra ventana no me hace la animacion de la imagen, tengo q tener el mismo diseño o como seria?
Estás usando Chrome? Astro usa la Web Transition API que aún no es soportada por todos los navegadores y hace una animación distinta para los no soportados.
Si estás usando Chrome entonces verifica que la tarjeta del post y el contenedor de la vista del post completo tengan el mismo nombre de transición como hago yo en el vídeo
use todos los navegadores , hasta copie tu proyecto ya hecho para ver si yo hice algo mal, y me pasa lo mismo, capaz tengo que actualizar los navegadores?
Hola, que tema estas usando en el vsc?
El tema se llama Min Dark
Excelente tutorial!
¿Existe en Astro algo parecido a Incremental Static Regeneration (ISR) de Nextjs?
Muchas gracias por el curso, como siempre.
No de forma tan sencilla como en Next lamentablemente, tendrías que hacerlo de forma manual con cabeceras de caché, pero es posible. Te dejo un artículo sobre ello
logsnag.com/blog/implementing-isr-in-astro
@@manumrtf Buff... Estoy viendo que es mucho follón. Deberían darle una vuelta a eso porque es una característica importante cuando creas un blog cuyo contenido viene de un Headless CMS o algo así y empiezas a tener muchas entradas.
@@nihil_um La verdad que sí, recientemente hice un front para un periódico digital que tenía sus entradas en un WordPress y me tuve que decantar por Next por esa razón, pero estoy seguro que es algo que añadirán en un futuro no muy lejano
@@manumrtf buenas, pero configurando el output:"server" no se logra esto ? ( docs.astro.build/es/basics/rendering-modes/#modos-de-output-del-servidor )
👽😍😍😍😍
Buen video, pero que feo se ve el codigo con Tailwind !!
@@robertostringa9254 yo también lo pensaba al principio, creo que a todos les pasa. Pero con el tiempo se ha vuelto algo imprescindible para mí, hace que maquetar sea mucho más rápido y divertido, aunque también depende de preferencias personales.
Un saludo
@@manumrtf sí quizás sea más rápido, pero termina siendo lo que siempres se buscó evitar, mezclar el contenido con la presentación visual.Pero sí, es a gusto. Saludos.