Aller au contenu principal

Endpoints - Articles de blog

Les endpoints d'articles de blog permettent d'accéder au contenu éditorial publié par les collectivités.

Liste des articles de blog​

Récupère la liste de tous les articles de blog publiés, optionnellement filtrés par groupe de villes.

Requête​

GET /public/blog-posts
GET /public/blog-posts?cityGroupId=group-uuid

Paramètres de requête​

  • cityGroupId (string, optionnel) : Filtrer les articles par groupe de villes

Réponse​

[
  {
    "id": "post-uuid",
    "title": "Comment bien trier ses déchets",
    "content": "# Comment bien trier ses déchets\n\nLe tri des déchets est essentiel...",
    "published": true,
    "publishedAt": "2024-01-10T09:00:00.000Z",
    "createdAt": "2024-01-05T10:00:00.000Z",
    "updatedAt": "2024-01-10T09:00:00.000Z",
    "cityGroup": {
      "id": "group-uuid",
      "name": "Paris Métropole",
      "type": "METROPOLE"
    }
  },
  {
    "id": "post-uuid-2",
    "title": "Les nouvelles règles de tri",
    "content": "# Les nouvelles règles de tri\n\nÀ partir du 1er janvier...",
    "published": true,
    "publishedAt": "2024-01-15T09:00:00.000Z",
    "createdAt": "2024-01-12T10:00:00.000Z",
    "updatedAt": "2024-01-15T09:00:00.000Z",
    "cityGroup": {
      "id": "group-uuid",
      "name": "Paris Métropole",
      "type": "METROPOLE"
    }
  }
]

Exemple d'utilisation​

// Récupérer tous les articles
const response = await fetch('https://api.wast-o.org/public/blog-posts');
const allPosts = await response.json();

// Filtrer par groupe de villes
const cityGroupId = 'group-uuid';
const filteredResponse = await fetch(
  `https://api.wast-o.org/public/blog-posts?cityGroupId=${cityGroupId}`
);
const filteredPosts = await filteredResponse.json();

console.log(`Total d'articles: ${allPosts.length}`);
console.log(`Articles du groupe: ${filteredPosts.length}`);

Détails d'un article​

Récupère le contenu complet d'un article de blog par son ID.

Requête​

GET /public/blog-posts/:id

Paramètres​

  • id (string, requis) : Identifiant unique de l'article (UUID)

Réponse​

{
  "id": "post-uuid",
  "title": "Comment bien trier ses déchets",
  "content": "# Comment bien trier ses déchets\n\nLe tri des déchets est essentiel pour préserver notre environnement...\n\n## Les règles de base\n\n- Vider et rincer les contenants\n- Retirer les bouchons\n- Séparer les différents matériaux\n\n:::tip\nAstuce: Consultez le calendrier de collecte pour connaître les jours de ramassage.\n:::\n\n![Image de tri](/img/tri-dechets.jpg)",
  "published": true,
  "publishedAt": "2024-01-10T09:00:00.000Z",
  "createdAt": "2024-01-05T10:00:00.000Z",
  "updatedAt": "2024-01-10T09:00:00.000Z",
  "cityGroup": {
    "id": "group-uuid",
    "name": "Paris Métropole",
    "type": "METROPOLE"
  }
}

Exemple d'utilisation​

const postId = 'post-uuid';
const response = await fetch(`https://api.wast-o.org/public/blog-posts/${postId}`);
const post = await response.json();

console.log(`Titre: ${post.title}`);
console.log(`Publié le: ${new Date(post.publishedAt).toLocaleDateString()}`);
console.log(`Groupe: ${post.cityGroup.name}`);

Codes d'erreur​

  • 404 Not Found : L'article avec l'ID spécifié n'existe pas ou n'est pas publié

Format du contenu​

Le contenu des articles est au format MDX (Markdown + JSX), ce qui permet :

  • Formatage Markdown standard : Titres, listes, liens, images, etc.
  • Composants interactifs : Utilisation de composants React pour des éléments interactifs
  • Alertes et callouts : Utilisation de composants spéciaux pour les astuces, avertissements, etc.

Exemple de contenu MDX​

# Titre de l'article

Introduction avec du texte formaté.

## Section 1

Du contenu avec des **mots en gras** et des *mots en italique*.

- Liste à puces
- Autre élément

## Section 2

![Image descriptive](/img/example.jpg)

:::tip
Astuce pour les utilisateurs
:::

:::warning
Attention à ne pas faire ceci
:::

:::info
Information importante
:::

Pour afficher le contenu MDX dans votre application, vous devrez utiliser un processeur MDX comme @mdx-js/react ou @mdx-js/mdx.

Schémas de données​

BlogPost​

interface BlogPost {
  id: string;
  title: string;
  content: string; // Format MDX
  published: boolean;
  publishedAt?: string;
  createdAt: string;
  updatedAt: string;
  cityGroup: {
    id: string;
    name: string;
    type?: string;
  };
}

Exemple d'intégration complète​

async function fetchBlogPosts(cityGroupId) {
  const url = cityGroupId
    ? `https://api.wast-o.org/public/blog-posts?cityGroupId=${cityGroupId}`
    : 'https://api.wast-o.org/public/blog-posts';
  
  const response = await fetch(url);
  const posts = await response.json();
  
  return posts;
}

async function fetchBlogPost(id) {
  const response = await fetch(`https://api.wast-o.org/public/blog-posts/${id}`);
  
  if (!response.ok) {
    throw new Error(`Article non trouvé: ${id}`);
  }
  
  const post = await response.json();
  return post;
}

// Utilisation
const posts = await fetchBlogPosts('group-uuid');
const firstPost = await fetchBlogPost(posts[0].id);
console.log(firstPost.title);