Prepr CMS y Astro

Prepr CMD es un CMS headless con personalización integrada.

Integración con Astro

Prepr CMS proporciona una API GraphQL para conectar tus datos a Astro.

Prerrequisitos

Para empezar, necesitarás lo siguiente:

Un proyecto de Astro nuevo o existente configurado para renderizado bajo demanda.
Una cuenta Prepr gratis
Un entorno Prepr con publicaciones de blog existentes. Estas publicaciones deben incluir un title y content. Los otros campos son opcionales.

Configuración de credenciales

Para agregar el endpoint de Prepr a tu proyecto de Astro, crea un archivo .env en la raíz de tu proyecto si no existe y agrega la siguiente variable:

PREPR_ENDPOINT=YOUR_PREPR_API_URL

Encontrarás tu valor YOUR_PREPR_API_URL en la configuración de tu cuenta Prepr:

Ve a Settings > Access tokens para ver tus tokens de acceso de vista previa y producción.
Usa el valor API URL del token de acceso GraphQL Production para solo recuperar elementos de contenido publicados para tu sitio de Astro.

Configuración del endpoint de Prepr

Crea una nueva carpeta src/lib/ y agrega un nuevo archivo llamado prepr.js. Aquí es donde configurarás el endpoint de Prepr. Agrega el siguiente código para obtener tus datos de Prepr CMS:

export async function Prepr(query, variables) {
    const response = await fetch(import.meta.env.PREPR_ENDPOINT, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query, variables }),
    })
    return response
}

Tu directorio raíz ahora debería incluir estos archivos:

Directorylib/
- prepr.js
Directorysrc/
- …
.env
astro.config.mjs
package.json

Obtención de datos

Obtendrás tus datos de Prepr escribiendo consultas para interactuar con su API GraphQL.

Crea una consulta GraphQL para recuperar tus artículos de blog:

Crea una nueva carpeta src/queries/ y agrega un archivo llamado get-articles.js.

Agrega la siguiente consulta a este archivo para recuperar todos los artículos:

const GetArticles = `
query {
    Articles {
      items {
        _id
        _slug
        title
    }
  }
}
`
export default GetArticles

Para mostrar una lista enlazada de tus publicaciones de blog en una página, importa y ejecuta tu consulta, incluyendo el endpoint de Prepr. Luego tendrás acceso a todos los títulos de tus publicaciones y sus slugs para renderizar en la página. (En el siguiente paso, crearás páginas individuales para tus publicaciones de blog.)

---
import Layout from '../layouts/Layout.astro';
import { Prepr } from '../lib/prepr.js';
import GetArticles from '../queries/get-articles.js';

const response = await Prepr(GetArticles)
const { data } = await response.json()
const articles = data.Articles
---

<Layout title="Mi sitio blog">
  <h1>
    Mi sitio blog
  </h1>
  <ul>
    {
      articles.items.map((post) => (
        <li>
          <a href={post._slug}>{post.title}</a>
        </li>
      ))
    }
  </ul>
</Layout>

Tu directorio raíz ahora debería incluir estos archivos:

Directorylib/
- prepr.js
- Directoryqueries /
  - get-articles.js
Directorysrc/
- …
.env
astro.config.mjs
package.json

Creación de páginas individuales para publicaciones de blog

Para crear una página por cada publicación de blog, ejecutarás una nueva consulta GraphQL en una página .astro de enrutamiento dinámico. Esta consulta obtendrá un artículo específico por su slug y se creará una nueva página para cada publicación de blog individual.

Crea un archivo llamado get-article-by-slug.js en la carpeta queries y agrega lo siguiente para consultar un artículo específico por su slug y devolver datos como el title y content del artículo:

const GetArticleBySlug = `
query ($slug: String) {
   Article (slug: $slug) {
     _id
     title
     content {
       __typename
       ... on Text {
         body
         text
       }
       ... on Assets {
         items {
           url
         }
       }
     }
   }
}`

export default GetArticleBySlug

Dentro de la carpeta src/pages, crea un archivo llamado […slug].astro. Agrega el siguiente código para importar y ejecutar la consulta del paso anterior y mostrar el artículo recuperado:

---
import Layout from '../layouts/Layout.astro';
import {Prepr} from '../lib/prepr.js';
import GetArticleBySlug from '../queries/get-article-by-slug.js';
const { slug } = Astro.params;
const response = await Prepr(GetArticleBySlug, {slug})
const { data } = await response.json()
const article = data.Article
---
<Layout title={article.title}>
  <main>
    <h1>{article.title}</h1>
    {
      article.content.map((content) => (
        <div>
          {
            content.__typename === "Assets" &&
            <img src={content.items[0].url} width="300" height="250"/>
          }
          {
            content.__typename === 'Text' &&
            <div set:html={content.body}></div>
          }
        </div>
      ))
    }
  </main>
</Layout>

La carpeta raíz de tu proyecto ahora debería incluir estos archivos:

Directorylib/
- prepr.js
- Directoryqueries/
  - get-articles.js
  - get-article-by-slug.js
Directorysrc/
- Directorypages/
  - index.astro
  - […slug].astro
.env
astro.config.mjs
package.json

Ahora, cuando hagas clic en un enlace de artículo desde la lista principal de publicaciones de blog, se te llevará a una página con su contenido individual.

Publicar tu sitio

Para desplegar tu blog de Prepr, visita nuestras guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Recursos oficiales

Sigue la guía de inicio rápido de Prepr CMS Astro para hacer un blog simple con Astro y Prepr CMS.
Consulta la guía Conectar Prepr CMS a Astro para obtener una descripción general de los recursos de Astro y Prepr CMS.