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 recursos

---
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.