Prepr CMS & Astro

Prepr.io est un CMS headless pour construire des sites web avec un ciblage par segment.

Intégrer avec Astro

Prepr CMS fournit une GraphQL API pour connecter vos données à Astro.

Conditions préalables

Pour commencer, vous aurez besoin des éléments suivants :

Un projet Astro nouveau ou existant configuré pour le rendu à la demande.
Un compte Prepr gratuit
Un environnement Prepr avec des articles de blog existants. Ces articles doivent comporter un title et un content. Les autres champs sont facultatifs.

Configuration des informations d’identification

Pour ajouter le point de terminaison Prepr à votre projet Astro, créez un fichier .env à la racine de votre projet s’il n’existe pas déjà et ajoutez la variable suivante :

PREPR_ENDPOINT=YOUR_PREPR_API_URL

Vous trouverez votre valeur YOUR_PREPR_API_URL dans les paramètres de votre compte Prepr :

Allez dans Settings > Access tokens pour voir vos jetons d’accès de prévisualisation et de production.
Utilisez la valeur API URL du jeton d’accès GraphQL Production pour récupérer uniquement les éléments de contenu publiés pour votre site Astro.

Configuration du point de terminaison Prepr

Créez un nouveau dossier src/lib/ et ajoutez un nouveau fichier appelé prepr.js. C’est là que vous configurerez le point de terminaison Prepr. Ajoutez le code suivant pour récupérer vos données depuis le CMS Prepr :

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
}

Votre répertoire racine doit maintenant contenir ces fichiers :

Répertoirelib/
- prepr.js
Répertoiresrc/
- …
.env
astro.config.mjs
package.json

Récupération de données

Vous récupérerez vos données auprès de Prepr en écrivant des requêtes pour interagir avec son API GraphQL.

Créez une requête GraphQL pour récupérer les articles de votre blog :

Créez un nouveau dossier src/queries/ et ajoutez un fichier nommé get-articles.js.

Ajoutez la requête suivante à ce fichier pour récupérer tous les articles :

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

Pour afficher une liste liée de vos articles de blog sur une page, importez et exécutez votre requête, y compris le point de terminaison Prepr nécessaire. Vous aurez alors accès à tous les titres de vos articles et à leurs slugs à rendre sur la page. (Dans l’étape suivante, vous allez créer des pages individuelles pour vos articles 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="Mon site de blog">
  <h1>
    My blog site
  </h1>
  <ul>
    {
      articles.items.map((post) => (
        <li>
          <a href={post._slug}>{post.title}</a>
        </li>
      ))
    }
  </ul>
</Layout>

Votre répertoire racine doit contenir ces nouveaux fichiers :

Répertoirelib/
- prepr.js
- Répertoirequeries /
  - get-articles.js
Répertoiresrc/
- …
.env
astro.config.mjs
package.json

Création de pages individuelles pour les articles de blog

Pour créer une page pour chaque article de blog, vous devez exécuter une nouvelle requête GraphQL sur une page dynamic routing .astro. Cette requête récupérera un article spécifique par son nom (slug) et une nouvelle page sera créée pour chaque article de blog.

Créez un fichier appelé get-article-by-slug.js dans le dossier queries et ajoutez ce qui suit pour interroger un article spécifique par son slug et renvoyer des données telles que le title et le content de l’article :
src/lib/queries/get-article-by-slug.js
```
const GetArticleBySlug = `
query ($slug: String) {
   Article (slug: $slug) {
     _id
     title
     content {
       __typename
       ... on Text {
         body
         text
       }
       ... on Assets {
         items {
           url
         }
       }
     }
   }
}`

export default GetArticleBySlug
```
Vous pouvez créer et tester des requêtes GraphQL en utilisant l’Apollo explorer dans Prepr. Ouvrez l’explorateur API à partir de la page de l’élément de contenu Article dans Prepr. Le contenu de l’article est stocké dans un Dynamic content field (champ de contenu dynamique). Consultez la documentation GraphQL pour plus de détails sur comment récupérer les données dans ce champ.

Dans le dossier src/pages, créez un fichier appelé [...slug].astro. Ajoutez le code suivant pour importer et exécuter la requête de l’étape précédente et afficher l’article récupéré :

---
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>

Votre répertoire racine doit maintenant contenir ces nouveaux fichiers :

Répertoirelib/
- prepr.js
- Répertoirequeries/
  - get-articles.js
  - get-article-by-slug.js
Répertoiresrc/
- Répertoirepages/
  - index.astro
  - […slug].astro
.env
astro.config.mjs
package.json

Désormais, lorsque vous cliquez sur le lien d’un article dans la liste principale des articles de blog, vous accédez à une page contenant son contenu individuel.

Publier votre site

Pour déployer votre blog Prepr, consultez nos guides de déploiement et suivez les instructions de votre hébergeur préféré.

Ressources officielles

Suivez le guide Prepr CMS Astro quickstart pour créer un blog simple avec Astro et Prepr CMS.
Consultez Connecter Prepr CMS à Astro pour un aperçu des ressources Astro et Prepr CMS.