Curso de Astro

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.

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" />