Astro

Introducció

Astro és un framework web modern centrat en llocs web basats en contingut, que aprofita l’arquitectura d’illes i per defecte no envia JavaScript al client.

Comença

Astro proporciona una eina CLI per crear ràpidament un nou projecte Astro.

Selecciona la plantilla “Empty” per començar des de zero, i omet la instal·lació de dependències per poder instal·lar-les amb Deno més endavant:

deno -A npm:create-astro@latest

Astro inclou una comanda astro add per automatitzar la configuració d’integracions oficials.

Configura la integració amb Tailwind:

deno -A npm:astro add tailwind

Per veure quines comandes tens disponibles, executa deno task:

deno task

Pots iniciar el servidor amb deno task dev:

deno task dev

Obre el navegador a http://localhost:4321

Edita la pàgina src/pages/index.astro:

<body>
  <h1>Birds</h1>
</body>

Verifica que el navegador mostra la pàgina modificada.

Construeix el lloc estàtic al directori per defecte dist:

deno run build

Desplega el lloc a Cloudflare (utilitza un nom de projecte diferent):

bunx wrangler pages deploy ./dist --project-name xtec-astro

El primer cop el lloc web tarda uns minuts en estar accessible.

Pots modificar el fitxer package.json per afegir una tasca deploy:

{
    "scripts": {
        "deploy": "astro build && bunx wrangler pages deploy ./dist --project-name xtec-astro"
    }
}

Pages

Crea una pàgina about.astro en el directori src/pages (copia el contingut de index.astro).

Modifica el contingut de l’element <body>

<body>
    <h1>All About Birds</h1>
    <p>Your Online Guide To Birds And Birdwatching</p>
</body>

Afegeix enllaços de navegació HTML abans del teu <h1> a la part superior de les dues pàgines (index.astro i about.astro):

<a href="/">Home</a>
<a href="/about/">About</a>

<h1>Earth/h1>

Comprova que pots fer clic en aquests enllaços per moure’t endavant i enrere entre les pàgines del teu lloc web.

mdx

Els fitxers MDX s’utilitzen per crear contingut.

Configura la integració amb MDX:

deno -A npm:astro add mdx

Crea un nou fitxer (buit)

Verifica que el servidor respon a http://localhost:4321/bird/eagle

Obre una pàgina que no existeix, per exemple http://localhost:4321/bird/swallow

Note the different output when previewing an “empty” page, and one that doesn’t exist. This will help you troubleshoot in the future.

Modifica el fitxer:

---
title: Eagle
tags: ["prey"]
---

Any of many large, heavy-beaked, big-footed birds of prey belonging to the family Accipitridae, found worldwide. Eagles are generally larger and more powerful than hawks and may resemble a vulture in build and flight characteristics, but they have a fully feathered (often crested) head and strong feet equipped with great curved talons. Most species subsist mainly on live prey, which they generally capture on the ground. Eagles have been a symbol of war and imperial power since Babylonian times. They mate for life. They nest in inaccessible places and use the same nest each year. Species vary from 24 in. to 3.3 ft (60 cm–1 m) long. The sea eagles include the bald eagle.

Link to your birds

Link to your first “bird” with an anchor tag in src/pages/bird/index.mdx:

---
title: Birds
---

TODO

Segueix https://docs.astro.build/en/tutorial/2-pages/3/

El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.