Statamic & Astro

Statamic est un CMS moderne à fichiers plats. Il permet aux développeurs de créer facilement des sites web et des applications dynamiques tout en offrant aux éditeurs de contenu une interface intuitive et conviviale pour la gestion du contenu.

Intégration avec Astro

Statamic est livré avec une API REST et une API GraphQL intégrées pour connecter vos données à Astro.

Prérequis

Pour commencer, vous devez disposer des éléments suivants :

Les API REST et GraphQL ne sont disponibles que dans la version pro de Statamic. Vous pouvez essayer la version Pro gratuitement sur votre machine locale.
Un projet Astro - Si vous avez besoin d'un projet Astro, notre guide d'installation vous permettra d'être rapidement opérationnel.
Un site Statamic - Si vous avez besoin d'un site Statamic, ce guide vous aidera à démarrer.N'oubliez pas d'activer l'API REST ou l'API GraphQL en ajoutant STATAMIC_API_ENABLED=true ou STATAMIC_GRAPHQL_ENABLED=true dans le fichier .env et d'activer les ressources nécessaires dans le fichier de configuration de l'API.

:::cautionTous les exemples supposent que votre site web a une collection appelée posts, qui a un plan appelé post, et que ce plan a un champ titre (champs de type texte) et un contenu (champ de type Markdown).:::

Récupération de données

:::cautionSi vous utilisez Statamic et Astro sur votre machine locale, n'oubliez pas d'utiliser 127.0.0.1 au lieu de localhost lorsque vous récupérez l'API.

Lors d'une requête sur le serveur Astro, localhost n'est pas résolu correctement comme il l'est dans le navigateur, et toute récupération vers l'une ou l'autre API échouera.:::

API REST

Récupérez vos données Statamic à partir de l'URL de l'API REST de votre site. Par défaut, c'est https://[VOTRE-SITE]/api/. Ensuite, vous pouvez restituer les propriétés de vos données en utilisant la directive Astro set:html={}.

Par exemple, pour afficher une liste de titres et leur contenu à partir d'une collection sélectionnée :

---
const res = await fetch("https://[VOTRE-SITE]/api/collections/posts/entries?sort=-date")
const posts = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}

GraphQL

Récupérez vos données Statamic avec l'URL de l'API GraphQL de votre site. Par défaut, c'est https://[VOTRE-SITE]/graphql/. Ensuite, vous pouvez restituer les propriétés de vos données en utilisant la directive Astro set:html={}.

Par exemple, pour afficher une liste de titres et leur contenu à partir d'une collection sélectionnée :

---
const graphqlQuery = {
  query: `
    query Entries($page: Int, $locale: String) {
      entries(
        collection: "posts"
        sort: "date asc"
        limit: 20
        page: $page
        filter: { locale: $locale }
      ) {
        current_page
        has_more_pages
        data {
          title
          ... on Entry_Posts_Post {
              content
            }
        }
      }
    }
  `,
  variables: {
    page: page,
    locale: locale,
  },
};

const res = await fetch("https://[YOUR-SITE]/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(graphqlQuery),
})

const { data } = await res.json();
const entries = data?.entries;
---
<h1>Astro + Statamic 🚀</h1>
{
  entries.data.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}