¿Qué es Astro?
Conoce los proyectos que vas a construir
¿Qué es Astro?
Quiz: ¿Qué es Astro?
Primeros Pasos
Entorno de trabajo y estructura en Astro
Crear tu primera página web con Astro
Proyecto
Breve historia de los frameworks y librerías
Conoce tu proyecto colaborativo: astrobuild.tips
Configuración de Tailwind CSS
Configuración de TypeScript
GitHub, VSCode, Prettier, Astro config
Astro API
Componentes en Astro
Páginas en Astro
Plantillas en Astro
Markdown
MDX
Enrutamiento: rutas estáticas
Enrutamiento: rutas dinámicas
Creando template de nuestra página de entrada del blog
Quiz: Astro API
Astro Islands
Componentes en React: header
Componentes en Vue: footer
Componentes en Svelte: redes sociales
Patrones de diseño: Astro Islands
Quiz: Astro Islands
Deploy
Integraciones SEO, RSS, Sitemap
Desplegar en Cloudflare Pages
Quiz: Deploy
Bonus
Bonus: aplica mejoras a tu proyecto
Cierre
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 9
Preguntas 3
Les recomiendo que descarguen la extensión de VSCode para Tailwind, les ayudará mucho a la hora de buscar y seleccionar clases:
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Por default, Astro esta incorporado para el soporte de TypeScript, lo que nos permite extender de todas las capacidades nativas de dicho lenguaje. Por ejemplo, podemos evitar errores en tiempo de ejecución definiendo las formas de los objetos, componentes o reglas de uso.
.
Esencialmente, no necesitamos escribir nuestros recursos de Astro en TypeScript. Sin embargo, es bueno el recorder que Astro siempre trata nuestros recursos en TypeScript.
.
Desde su inicialización, Astro nos incluye un archivo de configuración tsconfig.json
:
{
"extends": "astro/tsconfigs/base"
}
Dicha línea, explica que heredaremos una configuración interna de Astro que nos permitirá incluir una serie de directivas predefinidas por la herramienta.
.
📌 Referencia
astro/packages/astro/tsconfigs at main · withastro/astro
.
Adicionalmente, nuestra plantilla incluye una definición de entorno que provee sentido para Vite, del cual también goza Astro como herramienta de compilación.
.
📌 Referencia
Vite
.
Una de las configuraciones opcionales que podemos manipular son los aliases.
.
ℹ️ Definición
Un alias, es un atajo que posee significado en su asignación.
.
En nuestro archivo de configuración de TypeScript, solamente anexamos un bloque de paths
para así poder beneficiarnos de los aliases:
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
"@pages/*": ["src/pages/*"]
}
}
}
Lo que después podamos hacer en nuestros recursos del proyecto:
---
import HelloWorld from '@components/HelloWorld.astro';
import Layout from '@layouts/Layout.astro';
---
sin importar el que escojas usar esto en la terminal
npm install @tailwindcss/line-clamp
y en el codigo require(’@tailwindcss/line-clamp’)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?