Creación del proyecto

npm create astro .

Extensión de astro para Visual Studio Code.

Layouts

En la ruta src/layouts/ podemos definir nuestras plantillas.

./src/layouts/Layout.astro

---
interface Props {
	title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="Astro description" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>{title}</title>
	</head>
	<body>
		<slot />
	</body>
</html>

Las páginas ubicadas dentro de la carpeta pages se irán cargando dentro del layout, comenzando por index.astro.

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Welcome to Astro.">
	<main>
		<p>
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore
			doloribus voluptas aliquid saepe facere eveniet eum, aut culpa nemo
			tempore amet porro tempora! Expedita repellendus, beatae odio ad
			inventore eveniet?
		</p>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		width: 800px;
		max-width: calc(100% - 2rem);
	}
</style>

Routing

En el siguiente código, /page2 es el nombre de la página que vamos a cargar.

<a href="/page2">Ir a página 2</a>

También podemos crear una carpeta llamada page2 que tendrá un fichero llamado index.astro que se cargará cuando lancemos esa ruta.

Componentes

Podemos definir componentes reutilizables dentro de la carpeta components.

./src/components/Box.astro

---
interface Props {
	title: string;
	body: string;
	href: string;
}

const { title, body } = Astro.props;
---

<div class="box">
	<h2>
		{title}
	</h2>
	<p>
		{body}
	</p>
</div>
<style>
	.box {
		background-color: red;
		width: 300px;
		height: 300px;
	}
</style>

Y así usaríamos el componente:

---
import Box from "../components/Box.astro";
---

<div>
	<Box title="titulo" body="contenido" />
</div>

Cargar imágenes

En Astro, para acceder a la url de una imagen habrá que acceder a la propiedad src del objeto.

---
import foto from "./prueba.png";
---
<div>
	<img src={foto.src} alt="" />
</div>

Compilar

Para que todo funcione correctamente debemos ejecutar los ficheros transpilados en un servidor (localhost, etc), no funcionará sólo haciendo doble click sobre el HTML.

Variables de entorno

Deben declararse con el prefijo PUBLIC_.

PUBLIC_PROJECT_ID=nutri-67afb
PUBLIC_API_KEY=AIzaSyDLQvos1tV9uQNmtP-x8lz_wFd_HQtmxqw

Módulos útiles

Iconify

Colección de iconos fácilmente integrables en Astro.

Para instalarlos:

npm i -D astro-icon

Luego, debemos instalar el juego de iconos que querramos usar:

npm i @iconify-json/mdi

Finalmente, podemosi importar el icono concreto utilizando el siguiente código:

---
import { Icon } from 'astro-icon/components'
---

<Icon name="mdi:home" />

Importar un componente de React

Para añadir el soporte de React, utilizaremos el siguiente comando.

npm run astro add react

Hacer una PWA con Astro

Ejecutamos el siguiente comando:

npm i @vite-pwa/astro

src/layouts/Layout.astro

import { pwaInfo } from "virtual:pwa-info";
---
...
{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
<script src="/src/pwa.js"></script>

src/pwa.js

import { registerSW } from 'virtual:pwa-register'

registerSW({
  immediate: true,
  onRegisteredSW(swScriptUrl) {
    // eslint-disable-next-line no-console
    console.log('SW registered: ', swScriptUrl)
  },
  onOfflineReady() {
    // eslint-disable-next-line no-console
    console.log('PWA application ready to work offline')
  },
})

astro.config.mjs

En el siguiente fichero, dentro de la función AstroPWA(), metemos el objeto que en este enlace estaba dentro de la función VitePWA().

integrations: [react(),
  AstroPWA({})