ButterCMS y Astro

ButterCMS es un CMS headless y un motor de blogs que te permite publicar contenido estructurado para usarlo en tu proyecto.

Integrandolo con Astro

En esta sección, usaremos el SDK de ButterCMS para traer tus datos a tu proyecto Astro. Para empezar, necesitarás lo siguiente:

Prerequisitos

Un proyecto Astro - Si aún no tienes un proyecto Astro, nuestra Guía de instalación te ayudará a comenzar en cuestión de minutos.
Una cuenta de ButterCMS. Si aún no tienes una cuenta, puedes registrarte para una prueba gratuita.
Tu token de API de ButterCMS - Puedes encontrar tu token de API en la página de Configuración.

Configuración

Crea un archivo .env en la raíz de tu proyecto y agrega tu token de API como una variable de entorno:
.env
```
BUTTER_TOKEN=TU_TOKEN_DE_API_AQUI
```
Lee más sobre usar variables de entorno y archivos .env en Astro.
Instala el SDK de ButterCMS como una dependencia:
- npm
- pnpm
- Yarn
Ventana de terminal
npm install buttercms
Ventana de terminal
pnpm install buttercms
Ventana de terminal
yarn add buttercms

Crea un archivo buttercms.js en un nuevo directorio src/lib/ en tu proyecto:

import Butter from "buttercms";

export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);

Esto autentica el SDK usando tu token de API y lo exporta para ser usado en todo tu proyecto.

Obteniendo datos

Para obtener contenido, importa este cliente y usa una de sus funciones retrieve.

En este ejemplo, obtenemos una colección que tiene tres campos: un texto corto name, un número price, y un WYSIWYG description.

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.content.retrieve(["shopitem"]);

interface ShopItem {
  name: string,
  price: number,
  description: string,
}

const items = response.data.data.shopitem as ShopItem[];
---
<body>
  {items.map(item => <div>
    <h2>{item.name} - ${item.price}</h2>
    <p set:html={item.description}></p>
  </div>)}
</body>

La interfaz refleja los tipos de campo. El campo WYSIWYG description se carga como una cadena de HTML y set:html te permite renderizarlo.

Similarmente, puedes obtener una página y mostrar sus campos:

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.page.retrieve("*", "simple-page");
const pageData = response.data.data;

interface Fields {
  seo_title: string,
  headline: string,
  hero_image: string,
}

const fields = pageData.fields as Fields;
---
<html>
  <title>{fields.seo_title}</title>
  <body>
    <h1>{fields.headline}</h1>
    <img src={fields.hero_image} />
  </body>
</html>