¿Qué es Astro?

Astro es un framework de Javascript que te permite crear sitios web estaticos.

Requerimientos

  • Nodejs Instalado

Instalacion de Astro

npm create astro

Just the basics

npm install? Yes

Visual Studio Code

Instala la extension de Astro

Ejecutar Astro

npm run dev

Pages

Crea una pagina about.astro en pages/

con el siguiente contenido:

---
import MySiteLayout from '../layouts/Layout.astro'
---

<MySiteLayout title="About Website">
  <h1 class="title">About</h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem consequuntur accusantium amet a
    perspiciatis maxime asperiores velit error ex quos obcaecati aut voluptate, fugit placeat autem nobis natus delectus
    voluptas magnam explicabo quidem. Reprehenderit dolores dolorem suscipit temporibus quia laborum molestiae
    exercitationem nihil quae nemo labore dolorum nulla, quidem ducimus mollitia laudantium voluptatibus veniam
    expedita. Quod, reprehenderit, nesciunt voluptatem odio assumenda qui obcaecati minus iure corrupti, autem eum
    ducimus eius labore dignissimos eos facilis vitae similique! Atque excepturi dolore adipisci ipsum nulla maxime odit
    aut mollitia incidunt sit, modi expedita quis velit voluptates et voluptatibus eveniet facere enim. Dicta, porro.
  </p>
</MySiteLayout>

CSS

Para poder añadir estilos locales, puedes usar las etiquetas style de HTML.

<style>
  .title {
    font-size: 7rem;
  }
</style>

Markdown

pages/post/first.md

---
layout: "../layouts/Layout.astro"
title: "My First Post - My Astro Website"
---

### List of Posts

pages/posts/index.md

---
layout: "../../layouts/Layout.astro"
title: "My Blog Posts"
---

# All My Posts

```markdown
A lis of my all posts

- [first post](/posts/first)

# WElcome to my post

this is my first **post**

https://docs.astro.build/en/core-concepts/astro-pages/

Javascript/TYpescripts

Tambien es posible cargar codigo de Javascript y Typescript en pages.

layouts

Crea un archivo llamado layouts/MainLayout.astro, con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Layout</title>
</head>
<body>
  
  <h1>Welcome to My Site</h1>

  <slot/>
  
</body>
</html>

Luego puedes importarlo en otros archivos:

---
import MainLayout from '../layouts/MainLayout.astro'
---

<MainLayout title="About Website">
  <h1 class="title">About</h1>
  <p>lorem </p>
</MainLayout>

Components

componentes/footer.astro

---
const {customText} = Astro.props
---

<footer>
  <h1>This is my footer</h1>
  <p>{customText}</p>
</footer>

Props

const { title } = Astro.props

sass

public

this is a test

Fetch Data

import Layout from '../layouts/Layout.astro'

const response = await fetch('https://rickandmortyapi.com/api/character') const data = await response.json() const characters = data.results

Users

<ul>
  {characters.map(character => (
  <li>
    <img src={character.image} class="image-profile" alt={character.name} />
    {character.name}
  </li>
  ))}
</ul>

Añade frameworks con

astro add

astro add tailwind

npx astro add tailwind

astro add react

build

npm run build