Le contexte
Endevops est une entreprise de développement logiciel basée en Belgique. Nous voulions un site qui présente l'entreprise, ses services et ses projets sans ressembler à une brochure. La direction éditoriale est assumée: grands titres, badges monospace, numérotation des sections, accents de couleur et animations courtes.
Le site est bilingue français et anglais. Les URL sont localisées, les métadonnées sont propres à chaque page et les projets vivent dans une archive commune. Cette page fait partie de cette archive. Elle documente le site que le visiteur est en train d'utiliser.
Une direction éditoriale
Le site ne cache pas sa structure. Les sections sont numérotées, les badges indiquent le type de contenu et les pages projet reprennent les mêmes repères d'une fiche à l'autre. Le visiteur peut passer de la page services à une étude de cas sans perdre le fil.
Les pages légales et la politique de confidentialité suivent la même logique bilingue. Le formulaire de contact est validé avec Valibot côté client et côté serveur, puis envoyé dans un salon Discord via un webhook. Les visites sont mesurées avec PostHog.
Le contenu en Markdown
Les projets sont des fichiers Markdown traités par content-collections. Chaque fiche a ses métadonnées, ses images de couverture, ses technologies et son lien. Les pages projets sont générées depuis ce Markdown et reprises dans une archive. L'équipe peut ajouter une étude de cas sans toucher au code.
Le frontmatter stocke les données structurées nécessaires à l'archive: le client, le secteur, l'année, les services, les technologies et les textes de référencement. Le corps Markdown devient le contenu long affiché sur la route projet générique. Les images de couverture passent par vite-imagetools, qui produit les tailles et les formats au build.
Les pages projet reprennent la même composition: un hero avec la couverture et les informations clés, une colonne services, une colonne technologies et un corps Markdown. Les images de corps passent par le même pipeline que les couvertures, ce qui garde les formats et les tailles cohérents.
Les images de couverture et les images de corps sont nommées de façon explicite, avec un texte alternatif propre à chaque langue. Une fiche peut donc être relue sans ouvrir le rendu pour deviner ce que montre un visuel.
Ce fonctionnement a une conséquence pratique. Une nouvelle page projet demande un fichier Markdown et des images, pas une nouvelle route. Le rendu, les métadonnées et les liens de navigation suivent.
Le socle technique
Le site tourne sous TanStack Start et React 19, avec TypeScript, Tailwind CSS v4 et Paraglide JS. Le rendu serveur passe par Nitro. Les routes publiques sont prérendues, le sitemap et les balises hreflang sont générés, et les pages embarquent des données structurées JSON-LD.
Les images passent par vite-imagetools, qui produit les tailles et les formats au build. Un test ciblé vérifie les en-têtes de cache. Le déploiement passe par Docker, GitHub Actions et Dokploy, et la version sémantique est générée à partir des commits.
Une nouvelle page publique demande trois fichiers: la route, la traduction du chemin et l'entrée dans la liste des routes prérendues. La navigation et le sitemap suivent automatiquement.
Ce que le site change pour l'équipe
Le site est devenu un outil de travail, pas seulement une vitrine. Les études de cas servent de référence interne pour décrire un projet, choisir les informations à publier et garder une trace des décisions. Les fiches anonymisées montrent qu'il est possible de documenter un client sans exposer son nom.
Les pages projets sont aussi un test pour le pipeline. Une image mal nommée, un frontmatter incomplet ou une route oubliée se voient tout de suite au build. Cette contrainte garde l'archive cohérente.
Résultat
L'équipe peut faire évoluer le site seule. Le contenu est séparé du code, les pages sont prérendues et les métadonnées suivent la structure. Le site reste rapide sur mobile et lisible sur grand écran.
Le site est en ligne sur endevops.be.
