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.

Récupération de données

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} />
  ))
}

Publier votre site

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