https://cursos.devtalles.com/courses/take/Astro
Hoja de atajos de Astro: Hoja de Atajos - Astro: https://github.com/Klerith/mas-talento/blob/main/astro/astro-cheat-sheet.pdf | Aquí local
# Crear proyecto con Astro
npm create astro@latest
# Instalar dependencias
npm install
# Ejecutar proyecto con Astro y abrir página demo en navegador
npm run dev
open http://localhost:4321/
# Crear el sitio para producción y abrir en navegador
npm run build
open dist/index.html
# o `http-server dist` o puede ser también `cd dist & http-server -o`
# también puede ser `npm run build & npm run preview`
Para crear una ruta (path) es suficiente con crear un archivo en la carpeta src/pages, por ejemplo src/pages/about.astro y automáticamente el contenido de este archivo se mostrará en la url: http://localhost:4321/about
En la carpeta public se guardan contenidos como imágenes, fonts e icons, que no se van a optimizar por parte de Astro pero al crear el build (npm run build) este contenido se pasará a la carpeta de producción (archivos estáticos finalmente en la carpeta dist) lista para hacer un deployment en versel, github pages,...
Al generarse un código final con el npm run build o comprobándolo con npm run build & npm run preview por defecto NO se genera código javascript. Sí agrega alguna section de js vanilla en el archivo .astro, este iría incrustrado en el html final que se genere.
- Nuestro primer sitio en Astro & Estructura de un proyecto
- Sintaxis y funcionamiento de los archivos .astro
- Tarea - Actualizar momento actual
Aquí es importante entender que sí estamos comprobando en modo desarrollo la aplicación
npm run deventonces el "momento actual" y "momento actual real" tiene un mismo valor pues se está generando en el momento la fecha dinámicamente con el código js y se está mostrando. Sin embargo, ya en modo producciónnpm run build & npm run previewno es así pues la primera parte del código que determina que se mueste la hora de "momento actual" se genera puro html pegando ahí la hora en texto pero la segunda parte "momento actual real" se genera desde el código js en la sección <script>...</script> que determina que se muestre ese tiempo en el momento de visitarse la página. - Navegación entre páginas
- Reutilización de components
- Layouts y Props Los Layouts son componentes especiales que envuelven (wrapper) elementos , y de una página y que permiten por ello insertar códigos a un template común.
- Estilos por componente y globales
- Página 404
- View Transitions Lo que se hace es que se agrega el componente preferiblemente en el template/layout y esto permite que se cargen muy rápido las páginas como sí fuera un SPA, así sí hay algún enlace como un NavBar que navega a otra página entonces precarga la página antes de ser visitada y al visitar la página usa la opción ViewTransition del navegador con una animación que se puede también animar entre diferentes formas.
- Recapitulación
La diferencia de referenciar el archivo de css usando desde Astro
import '../styles/global.css'y usando directamente en el head la referencia al archivo en la carpeta public<link rel="stylessheet" href="styles/global.css" />es que con import se preprocesa por el compilador de Astro el css y se minimiza. - Código fuente
- Ver sitio en producción en github pages
- https://docs.astro.build/en/basics/project-structure/
- https://docs.astro.build/en/reference/cli-reference/#astro-preferences
- https://docs.astro.build/en/basics/layouts/
- https://docs.astro.build/en/guides/styling/
- https://dev.to/stackfindover/35-html-404-page-templates-5bge
- https://docs.astro.build/en/guides/view-transitions/
===
===
- component (crea la estructura de un componente)