Saltar al contenido principal

Sintaxis

src\components\Navbar.astro
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  
  <a href="contact">Contact</a>
  <a href="login">Login</a>
</nav>

<button onclick="history.back()">Regresar</button>

Acceder a los assets​

src\layout\MainLayout.astro
<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <title>{title}</title>
  <!-- <link rel="stylesheet" href="styles/global.css" /> -->
</head>

Front matter (---)​

  • Todo el código dentro de --- se ejecuta solo en el servidor o en tiempo de compilación (build)

Lo que puede haber en ---

  • Importar otros componentes Astro
  • Importar componentes de otros frameworks, como React
  • Importar datos, como un archivo JSON
  • Consultar contenido de una API o base de datos
  • Crear variables que luego se pueden referenciar en el maquetado
  • El código que se escribe aquí no llega al cliente, entonces puede haber datos sensibles
src\pages\index.astro
---
const nombre = "Lucas";
---

<h1>Hola {nombre}</h1>
src\pages\index.astro
<footer>
  © {new Date().getFullYear()}
</footer>
  • No mostrará el momento actual sino de cuándo se hizo el build de producción
src\pages\index.astro
---
let date = new Date().toLocaleTimeString();
---

<p>La hora es {date}</p>

JS/TS al cliente​

  • Client Side Rendering
  • Agregando el JS/TS dentro de la etiqueta <script></script> (fuera de ---) funcionará correctamente y se enviará al cliente
  • No es necesario hacer alguna configuración para que funcione
src\pages\index.astro
<footer>
  © {new Date().getFullYear()} // Lo sobreescribe
</footer>

<script>
  const currentTime = new Date().toLocaleTimeString();

  const footer = document.querySelector("footer") as HTMLElement;
  footer.innerText = `Fecha y hora: ${currentTime}`;
</script>
<body>
  <p>Hora de construcción: {date}</p>
  <p id="current-time"></p>
</body>

<script>
  const currentTime = new Date().toLocaleTimeString();
  //const currentTimeElement = document.querySelector("#current-time") as HTMLParagraphElement;
  const currentTimeElement = document.getElementById(
    "current-time"
  ) as HTMLParagraphElement;
  currentTimeElement.innerText = `Hora actual: ${currentTime}`;
</script>

Estilos​

Componente​

  • Los estilos solo aplican al componente actual, aunque tenga otros componentes importados
src\pages\about.astro
---
import Title from "../components/Title.astro";
import MainLayout from "../layout/MainLayout.astro";
---

<MainLayout title="About">
  <h1>About</h1>
  <Title title="Otro" />
</MainLayout>

<style>
  h1 {
    color: red;
  }
</style>

Globales​

  • Aplica los estilos al componente principal y a los hijos
  • Agregando la directiva is:global
src\pages\about.astro
---
import MainLayout from "../layout/MainLayout.astro";
---

<MainLayout title="About">
  <h1>About</h1>
</MainLayout>

// Utilizando la directiva is:global
<style  is:global>
  h1 {
    color: red;
  }
</style>

Utilizando un archivo css externo​

  • Definir los estilos en un archivo externo, ej. src\styles\global.css
  • Aplicar los estilos importando en el layout o componente
src\layout\MainLayout.astro
---
import Navbar from "../components/Navbar.astro";

// Importar CSS
import "../styles/global.css";

---

// Estructura HTML...

Condicionales​

  • Se utiliza class:list={[...]} en lugar de solo class="..."
---
interface Props {
  name: string;
  url: string;
  isBig?: boolean;
}

const { name, url, isBig = false } = Astro.props;
---

<img
  class:list={[
    {
      "border",
      "size-32": !isBig,
      "size-64": isBig,
      },
    ]}
    src={imageUrl}
    alt={name}
/>