FAQ avec Astro Content Collections¶

src/
  content/
    config.ts                    # Schema Zod
    faq/
      fr/
        securite/
          01-acces-documents.md
          02-zero-knowledge.md
          03-hebergement.md
          04-immutabilite.md
          05-mot-de-passe-perdu.md
        legal/
          01-valeur-legale.md
          02-tribunal.md
          03-duree-conservation.md
        business/
          01-bulletins-salaire.md
          02-logiciels-paie.md
          03-double-detention.md
          04-professions-reglementees.md
        usage/
          01-gratuit.md
          02-limites-gratuit.md
          03-carte-bancaire.md
          04-hors-ligne.md
        apps/
          01-plateformes.md
          02-application-mobile.md
        transfer/
          01-transfert-probatoire.md
          02-partage-sans-compte.md
        data/
          01-portabilite.md
          02-format-export.md
          03-suppression-compte.md
        misc/
          01-rgpd.md
          02-open-source.md
          03-disponibilite.md
      en/
        security/
          01-document-access.md
          02-zero-knowledge.md
          ...
  pages/
    fr/
      faq.astro                  # Page utilisant la collection
    en/
      faq.astro

---
// src/pages/fr/faq.astro
import { getCollection } from 'astro:content';
import BaseLayout from "../../layouts/BaseLayout.astro";
import Hero from "../../components/Hero.astro";

// Récupérer toutes les FAQ françaises
const allFaq = await getCollection('faq', ({ data }) => data.lang === 'fr');

// Grouper par catégorie
const categories = {
  security: { title: "Sécurité & Confidentialité", icon: "🔐", items: [] },
  legal: { title: "Valeur probatoire & conformité", icon: "⚖️", items: [] },
  business: { title: "Entreprises & Professionnels", icon: "🏢", items: [] },
  usage: { title: "Fonctionnement & Utilisation", icon: "👤", items: [] },
  apps: { title: "Applications & Plateformes", icon: "📱", items: [] },
  transfer: { title: "Transfert & partage", icon: "🔄", items: [] },
  data: { title: "Données & Portabilité", icon: "💾", items: [] },
  misc: { title: "Divers", icon: "🧠", items: [] }
};

// Trier et grouper
for (const entry of allFaq) {
  const cat = entry.data.category;
  if (categories[cat]) {
    categories[cat].items.push(entry);
  }
}

// Trier chaque catégorie par order
for (const cat of Object.values(categories)) {
  cat.items.sort((a, b) => a.data.order - b.data.order);
}

// Générer le schema FAQPage pour SEO
const allQuestions = allFaq.map(entry => ({
  "@type": "Question",
  "name": entry.data.question,
  "acceptedAnswer": {
    "@type": "Answer",
    "text": entry.body // Markdown brut ou compilé
  }
}));

const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": allQuestions
};
---

<BaseLayout
  title="FAQ — Questions fréquentes | ProbatioVault"
  description="Toutes les réponses à vos questions sur ProbatioVault"
  ogImage="/og/faq-fr.png"
  lang="fr"
  jsonLd={faqSchema}
>
  <Hero
    title="Questions fréquentes"
    subtitle="Tout ce que vous devez savoir sur ProbatioVault"
  />

  <section class="section faq-content">
    <div class="container">
      {Object.entries(categories)
        .filter(([_, cat]) => cat.items.length > 0)
        .map(([key, category]) => (
          <div class="faq-category" id={key}>
            <h2 class="category-title">
              <span class="category-icon">{category.icon}</span>
              {category.title}
            </h2>
            <div class="faq-list">
              {category.items.map(async (entry) => {
                const { Content } = await entry.render();
                return (
                  <details class="faq-item">
                    <summary class="faq-question">
                      <span class="question-text">{entry.data.question}</span>
                      <span class="toggle-icon" aria-hidden="true"></span>
                    </summary>
                    <div class="faq-answer">
                      <Content />
                    </div>
                  </details>
                );
              })}
            </div>
          </div>
        ))}
    </div>
  </section>

  <!-- CTA section... -->
</BaseLayout>