À l’occasion, je vous mettrai un petit coup de polish. – OSS 117

La Table Grise (bibliothèque)

Publié le

|

Mis à jour le

Du

25/10/2023

à

maintenant

Pour ce projet, j’ai voulu créer un système complet de gestion de bibliothèque numérique pour cataloguer et organiser ma collection personnelle de livres, bandes dessinées, mangas, jeux de société, CDs et DVDs. Ce qui a commencé comme un simple outil d’inventaire a rapidement évolué en une plateforme de bibliothèque complète avec filtrage avancé, suivi des emprunts, et même un randomiseur pour aider à décider quoi lire, regarder ou jouer ensuite.

Le Défi

Gérer une collection diverse à travers plusieurs types de médias (BDs, Mangas, Livres, Jeux de société, CDs, DVDs) avec différents propriétaires, catégories et statuts d’emprunt nécessitait un système flexible et puissant. J’avais besoin de quelque chose qui puisse :

  • Gérer plusieurs types de contenus avec des taxonomies personnalisées
  • Suivre la propriété à travers différents membres de la famille
  • Gérer le statut d’emprunt pour les volumes individuels
  • Fournir des capacités de filtrage et de recherche avancées
  • Offrir un moyen amusant de découvrir du nouveau contenu grâce à la randomisation
  • Afficher tout cela dans une interface propre et conviviale

La Solution

WordPress avec le thème Simppple en édition complète de site s’est avéré être la base parfaite. J’ai construit un thème enfant personnalisé qui étend les capacités de Simppple avec des blocs Gutenberg spécialisés et des types de contenus personnalisés.

Types de Contenus & Taxonomies Personnalisés

Le système gère six types de contenus distincts :

  • BDs (Bande Dessinée)
  • Mangas
  • Livres
  • Jeux de société
  • CDs/Vinyles
  • DVDs/Blu-rays

Chaque type de contenu a son propre ensemble de taxonomies pour la catégorisation (genres, thèmes, etc.) et une taxonomie « propriétaires » partagée pour suivre qui possède chaque élément. Advanced Custom Fields (ACF) gère les métadonnées complexes, y compris le suivi des volumes, les informations d’emprunt et les détails spécifiques aux médias.

Blocs Gutenberg Personnalisés

J’ai développé plusieurs blocs personnalisés pour alimenter les fonctionnalités de la bibliothèque :

Bloc Filtres de Posts
Le cœur de l’interface de la bibliothèque. Ce bloc fournit :

  • Filtrage multi-facettes par propriétaire, type de média et catégories
  • Fonctionnalité de recherche en temps réel
  • Gestion de l’état des filtres basée sur l’URL
  • Pagination alimentée par AJAX
  • Détection et filtrage des doublons
  • Interface de filtres responsive avec fonctionnalité de bascule

Bloc Roulette de Posts
Un randomiseur ludique qui aide les utilisateurs à découvrir du contenu quand ils ne savent pas quoi lire, regarder ou jouer. Les utilisateurs peuvent sélectionner un type de média et laisser la roulette choisir quelque chose au hasard dans la collection.

Bloc Emprunts
Suit tous les éléments actuellement empruntés, organisés par propriétaire. Il gère intelligemment différents types de médias :

  • Pour les livres/BDs/mangas : suit l’emprunt de volumes individuels
  • Pour les jeux de société : suit le statut d’emprunt du jeu entier
  • Affiche les informations de l’emprunteur et les numéros de volumes lorsque applicable

Bloc Post Unique
Un modèle de post unique dynamique qui adapte son affichage en fonction du type de contenu, montrant les métadonnées pertinentes, les informations de volume et le statut d’emprunt.

Bloc Résultats de Recherche
Affichage personnalisé des résultats de recherche avec des capacités de filtrage intégrées à l’expérience de recherche.

Bloc Bongo Cat
Un bloc easter egg amusant qui ajoute de la personnalité au site (parce que chaque projet a besoin d’un peu de fantaisie).

Stack Technique

Le projet exploite des outils de développement web modernes et les meilleures pratiques :

  • WordPress 6.4+ avec l’édition complète de site
  • Simppple Child Theme comme fondation
  • Timber/Twig pour le templating (séparation propre de la logique et de la présentation)
  • Advanced Custom Fields (ACF) pour la gestion flexible du contenu

Fonctionnalités Clés

Système de Filtrage Avancé
Le système de filtrage est construit avec la performance et l’expérience utilisateur à l’esprit. Il utilise les endpoints de l’API REST WordPress avec des paramètres de requête personnalisés, prend en charge la gestion de l’état basée sur l’URL pour des vues filtrées partageables, et inclut une détection intelligente des doublons pour éviter d’afficher le même élément plusieurs fois.

Gestion des Emprunts
Le système suit les emprunts au niveau du volume pour les séries (BDs, mangas, livres) et au niveau de l’élément pour les jeux de société. Chaque élément emprunté montre qui l’a emprunté et quels volumes spécifiques sont sortis, facilitant la visualisation de ce qui est disponible et de ce qui ne l’est pas.

Design Responsive
L’interface entière est construite mobile-first, garantissant que la bibliothèque est accessible et utilisable sur n’importe quel appareil. Les panneaux de filtres se replient sur mobile, et les grilles s’adaptent gracieusement à différentes tailles d’écran.

Expérience Développeur
Le code suit les standards de codage WordPress et inclut un linting, un formatage et une vérification de types complets. Le processus de build utilise Vite pour un développement ultra-rapide avec remplacement de modules à chaud, et la structure du projet facilite l’ajout de nouveaux blocs ou l’extension de fonctionnalités.

Le Résultat

La Table Grise est maintenant un système de gestion de bibliothèque entièrement fonctionnel qui gère des centaines d’éléments à travers plusieurs types de médias. Le système de filtrage facilite la recherche d’éléments spécifiques, le suivi des emprunts garde tout organisé, et la fonctionnalité de roulette ajoute un élément amusant à la découverte de contenu.

Le projet démontre comment WordPress peut être étendu au-delà du blogging traditionnel pour créer des applications spécialisées. En exploitant les types de contenus personnalisés, les taxonomies, ACF et les blocs Gutenberg personnalisés, j’ai pu construire une solution à la fois puissante et maintenable.

Découvrez le site ici.