Évolution du site

Cette page retrace ce qui a été ajouté, corrigé ou amélioré sur Le Vestibule au fil du temps. Chaque entrée contient un résumé accessible à tous, suivi d'un volet technique pour les développeurs curieux.

  1. Persistance locale des filtres galerie et liens de découverte

    La galerie mémorise désormais les sélections de recherche, de tri et du nombre d'éléments par page dans le navigateur. Cette configuration est ensuite réappliquée dans le menu "Dessins" et dans le bouton "Découvrir la galerie" sans provoquer de boucle ni de rechargement inutile.

    chevron_right Détails techniques
    • Ajout de la persistance locale pour q, tri, per_page, categorie, mot_clef et redbubble
    • Le sélecteur per_page est déplacé dans la barre d’actions supérieure pour plus de lisibilité
    • Les liens vers /galerie réinjectent les préférences sauvegardées sans toucher aux paramètres GET de la page courante
    • Le mécanisme évite les rechargements en boucle pendant le chargement de la galerie

  2. Section vidéos YouTube alimentée par WordPress

    Une section « Vidéos » rejoint le site. Les entrées proviennent de WordPress et affichent un lecteur YouTube sur leur fiche détail à partir d'un identifiant vidéo.

    chevron_right Détails techniques
    • Ajout du modèle Video et de la table videos
    • Import WordPress étendu aux metas youtube_id et youtube_video_id
    • Routes /videos et /videos/{slug} branchées sur les vues galerie partagées
    • Lecteur détail via youtube-nocookie.com et vignettes YouTube en liste

  3. Calque couleur au survol sur l'accueil

    L'illustration principale de l'accueil passe maintenant du dessin au trait à une version colorée au survol. L'effet est aussi disponible au focus clavier.

    chevron_right Détails techniques
    • Ajout du calque transparent LeVestibuleCouleurCalque.png
    • Superposition du calque couleur et de LeVestibule.png dans home.blade.php
    • Transition d'opacité pilotée par des classes CSS projet explicites pour fiabiliser le build

  4. Lien contact ajouté dans le footer

    Un lien direct « Contact : stephan@le-vestibule.ca » a été ajouté dans le pied de page du site. Il permet de contacter rapidement le responsable par courriel depuis n'importe quelle page.

    chevron_right Détails techniques
    • Ajout d'un lien mailto:stephan@le-vestibule.ca dans le footer global (layouts/main.blade.php)
    • Icône mail Material Symbols et accessibilité ARIA
    • Style cohérent avec le reste du footer

  5. Blague du jour sur la page d'accueil

    Une nouvelle section « Blague du jour » s'affiche désormais sur la page d'accueil, en plus du dessin et de la photo du jour. La blague est choisie aléatoirement et présentée dans une carte stylisée, centrée, avec lien vers la fiche détail.

    Cette évolution renforce l'aspect ludique et éditorial du Vestibule, tout en gardant une cohérence visuelle avec les autres contenus du jour.

    chevron_right Détails techniques
    • Route / enrichie pour charger une blague aléatoire (Blague::inRandomOrder())
    • Section « Blague du jour » ajoutée dans home.blade.php avec carte centrée, texte seul, et lien détail
    • Respect du style et des transitions des autres cartes du jour
    • Synchronisation de la documentation (AGENTS.md, JOURNAL.md, changelog)

  6. Galerie Photos ajoutée en réutilisant les vues de dessins

    Une nouvelle entrée « Photos » a été ajoutée dans le header. Elle pointe vers une galerie dédiée.

    La liste et la fiche détail des photos réutilisent les mêmes vues que les dessins, ce qui évite la duplication et garde un rendu cohérent.

    chevron_right Détails techniques
    • Ajout des routes /photos et /photos/{slug}
    • Mutualisation du contrôleur galerie via un contexte de type de contenu
    • Mutualisation des vues galerie.blade.php et galerie-detail.blade.php avec base URL et labels dynamiques
    • Ajout d'un lien « Photos » avec compteur dans le header
    • Le modèle Photo expose désormais toPublicArray() pour le même format d'affichage

  7. Menu Dessins corrigé, plus fluide et mieux accessible

    Le menu « Dessins » du header a été corrigé: il ne reste plus ouvert en permanence sur desktop, et s'ouvre désormais correctement quand on clique dessus.

    L'entrée « Tous les dessins » reste le point d'accès principal vers la galerie, directement depuis le sous-menu.

    La navigation clavier et les retours visuels ont été améliorés, avec un comportement plus clair à l'ouverture/fermeture et un hover plus lisible.

    chevron_right Détails techniques
    • Correctif Tailwind sur le dropdown pour éviter l'affichage permanent en `md+`
    • Le trigger `Dessins` est maintenant un bouton (menu) et non un lien direct vers `/galerie`
    • Ajout d'une logique JS légère pour piloter `aria-expanded` et la visibilité réelle du menu
    • Interactions de fermeture prises en charge: `Escape`, perte de focus, clic extérieur
    • Animation du dropdown: transition `opacity + translate + scale`
    • Rotation de l'icône `expand_more` quand le menu est ouvert
    • Hover renforcé sur le bouton parent, les liens du sous-menu et l'entrée `Nouveautés`

  8. Accueil retravaillé et logo illustré dans le header

    La page d'accueil a été réorganisée pour mieux mettre en scène l'introduction: une composition en 2 colonnes avec l'illustration à gauche et le texte à droite.

    Le bloc d'introduction a été ajusté finement (taille de texte, interligne, espacement vertical) pour un rendu plus lisible et plus équilibré.

    Dans le header, le nom textuel du site a été remplacé par un logo illustré, plus présent visuellement.

    chevron_right Détails techniques
    • Accueil: structure hero simplifiée en grille responsive 2 colonnes dans home.blade.php
    • Colonne gauche: image LeVestibule.png avec largeur max ajustée selon breakpoint
    • Colonne droite: texte intro avec leading-loose et variantes md:leading-* pour la lisibilité
    • SEO accueil harmonisé: même phrase pour og_description et JSON-LD WebSite.description
    • Header: remplacement du lien texte par une image logo LeVestibuleTitreCouleur.png dans layouts/main.blade.php
    • Ajustements de positionnement du logo (marges top/left) pour respecter le cadrage visuel souhaité

  9. Cartes galerie alignées et survol des mots-clefs

    La grille de la galerie a été uniformisée pour que toutes les cartes aient la même hauteur, avec des zones image et texte mieux alignées.

    Le lien « Voir en détail » et la catégorie restent maintenant alignés en bas de chaque carte, même quand les titres ou descriptions sont plus longs.

    Les mots-clefs affichent désormais une info-bulle au survol avec le nombre de dessins associés, et un compteur de filtres actifs a été ajouté au bouton des filtres.

    chevron_right Détails techniques
    • Cartes galerie en `flex flex-col` avec ancrage bas via `mt-auto` pour la ligne d'actions
    • Cadre image fixé en `h-64` et zone texte fixée en `h-52` pour une grille homogène
    • Troncature visuelle des textes via `line-clamp` afin d'éviter les décalages inter-cartes
    • Badge de filtres actifs sur le bouton d'ouverture du panneau de filtres
    • Tooltip mots-clefs migré vers une intégration Vue + Naive UI en mode îlot
    • Rendu serveur Blade conservé pour préserver SEO et indexation

  10. PDF catalogue et cartes QR imprimables

    La galerie propose maintenant deux exports PDF: un catalogue des dessins et un format dédié à l'impression de cartes QR.

    Les cartes QR ont été optimisées pour l'impression sur format Letter avec une grille de 16 cartes par page, des repères de coupe légers et un QR recentré pour une lecture claire.

    Plusieurs ajustements techniques ont aussi été appliqués pour fiabiliser le rendu PDF en production, notamment sur la gestion des images et des QR codes.

    chevron_right Détails techniques
    • Ajout des routes /galerie/catalogue.pdf et /galerie/cartes-qr.pdf + bouton d'accès depuis la galerie
    • Génération Dompdf avec format letter harmonisé entre contrôleur et template
    • Cartes QR: grille 4 x 4 (16/page), vignette à gauche du titre, QR carré et centré
    • Repères de coupe allégés et maintenus sur les cellules vides pour conserver la trame complète
    • Cache PDF versionné dans storage/app/pdf-cache pour éviter les rendus obsolètes
    • Cache d'assets de rendu (vignettes/QR) dans public/img-cache/pdf-cache pour améliorer la stabilité Dompdf

  11. Dessins similaires, contexte de galerie et dessin surprise

    Chaque fiche de dessin affiche maintenant une section « Dans la même veine » avec 3 à 4 dessins liés, sélectionnés selon la catégorie et les mots-clefs en commun.

    Un dessin aléatoire a été ajouté sur la page d'accueil, sous forme d'une bande discrète cliquable menant à sa fiche détaillée.

    Lorsqu'on ouvre une fiche depuis la galerie, les filtres et le tri actifs sont désormais conservés pour la navigation entre dessins, tandis que le lien « Galerie » du breadcrumb sert de remise à zéro.

    Un repère discret `x sur y dessins` apparaît aussi sur la fiche pour situer le dessin courant à l'intérieur du sous-ensemble filtré.

    chevron_right Détails techniques
    • Fiche détail: score de similarité calculé en PHP — +2 pts même catégorie, +1 pt par mot-clef commun; top 4 injecté dans la vue via $relatedDrawings
    • Section masquée automatiquement si aucun résultat; grille 2 → 4 colonnes responsive, hover lift + zoom vignette
    • Accueil: route / récupère un dessin aléatoire (Drawing::inRandomOrder()); teaser compact avec flèche à droite et hover renforcé
    • Navigation galerie → fiche: propagation des paramètres GET actifs, puis réutilisation côté détail pour le lien retour, précédent/suivant et les dessins liés
    • Breadcrumb « Galerie » volontairement simplifié vers /galerie pour réinitialiser rapidement les filtres
    • Indicateur de position ajouté dans l'en-tête de fiche: affichage conditionnel de x sur y dessins lorsque des filtres sont actifs

  12. Redbubble, partage en bas de page et nettoyage

    Les dessins disponibles à la vente sur Redbubble sont maintenant mis en avant directement dans la galerie : un bouton s'affiche sur la fiche du dessin et dans la ligne d'action de chaque carte, et un filtre permet d'afficher uniquement les dessins disponibles à l'achat.

    La barre de partage (Facebook, X, WhatsApp, e-mail…) a été déplacée tout en bas de la fiche dessin, après la navigation précédent/suivant, pour un meilleur ordre de lecture.

    Le panneau d'administration interne, qui n'était plus utilisé, a été entièrement retiré du code.

    chevron_right Détails techniques
    • Migration add_redbubble_url_to_drawings_table — colonne nullable string(2048)
    • Import WordPress : lecture de la meta redbubble_url par post en requête groupée + sanitisation URL (http/https uniquement)
    • Modèle Drawing : ajout dans $fillable et toPublicArray()
    • Filtre ?redbubble=1 appliqué dans les trois passes de filtrage de DrawingController (filtered, categoryCounts, keywordCounts)
    • Composant Blade <x-redbubble-icon> : charge /img/redbubble-logo.svg depuis public/img/, fallback texte "RB"
    • Suppression de la banderole Redbubble en haut à gauche des vignettes galerie (UI allégée)
    • SEO : og:locale, og:image:alt, JSON-LD WebSite (accueil), JSON-LD BreadcrumbList (détail dessin)
    • Indexation : correction de robots.txt avec sitemap absolu https://le-vestibule.ca/sitemap.xml
    • Suppression complète du module admin : routes, DrawingAdminController, vues, dossiers Admin/ et admin/

  13. Partage social et génération du cache images

    Chaque fiche dessin affiche maintenant des boutons pour partager le dessin sur les réseaux sociaux ou par e-mail : Facebook, X, Pinterest, WhatsApp, et un bouton natif pour iOS/Android. Un bouton « Copier le lien » complète le tout.

    En coulisses, des outils ont été ajoutés pour pré-générer les vignettes et images utilisées par le site, ce qui accélère la navigation pour les visiteurs.

    chevron_right Détails techniques
    • Bloc partage : Native Share API, clipboard API avec fallback execCommand, URLs encodées Facebook / X / Pinterest / WhatsApp / mailto
    • Commande Artisan images:cache-generate — itération via cursor(), génération des formats nav/galerie/détail/OG, rapport --report-missing
    • Refactor : drawings:import-wordpress et images:cache-clear déplacés dans app/Console/Commands
    • Paramètres WordPress migrés de env() vers config() pour compatibilité avec config:cache
    • Création de Agent.md — conventions de code, UI, routing, SEO et workflow

  14. Meilleurs aperçus sur les réseaux sociaux et images à la demande

    Quand vous partagez un dessin sur Facebook, LinkedIn ou WhatsApp, l'aperçu généré (titre, description, image) est maintenant propre et cohérent sur tous les canaux, même pour les dessins importés depuis WordPress dont le texte contenait des caractères spéciaux.

    Les images des dessins importés depuis WordPress se chargent automatiquement si elles ne sont pas encore disponibles localement — sans avoir besoin de relancer une synchro manuelle.

    chevron_right Détails techniques
    • Routes OG stables sans query params : /og-image/home.jpg, /og-image/default.jpg, /og-image/{slug}.jpg
    • Décodage systématique des entités HTML dans tous les champs OG/Twitter (html_entity_decode + normalisation whitespace)
    • ImageController : si une image WordPress locale est absente, tentative de récupération depuis la source WP, écriture locale puis resize habituel
    • Résolution source WordPress via source_id → DB wordpress → _thumbnail_id/guid
    • Support fb:app_id via config('services.facebook.app_id')
    • Barre de navigation galerie-detail compactée ; padding global du <main> supprimé

  15. Nouvelles polices, refonte de l'accueil et nettoyage visuel

    Les polices de caractères ont été mises à jour : le site utilise désormais Work Sans pour les textes et Cormorant pour les titres — hébergées directement sur le serveur, sans dépendance à Google Fonts.

    La page d'accueil a été entièrement réécrite avec le texte définitif présentant le concept du Vestibule. Les cartes de la galerie ont aussi été retravaillées : la catégorie apparaît maintenant dans la ligne d'action en bas de carte, à côté du lien « Voir en détail ».

    chevron_right Détails techniques
    • Intégration via @fontsource-variable/work-sans et @fontsource-variable/cormorant (npm, subsets latin/latin-ext uniquement)
    • @font-face manuels dans app.css avec font-display: swap
    • Variables Tailwind --font-sans / --font-display déclarées dans @theme
    • Extraction des clusters Tailwind répétés en 15 classes UI partagées : .ui-surface, .ui-input, .ui-button-*, .ui-filter-*, etc.
    • Catégorie déplacée de l'en-tête de card vers flex items-end justify-between en bas

  16. Filtres par mots-clefs corrigés et images carrées

    Le filtre par mots-clefs dans la galerie fonctionnait mal — cliquer sur un mot-clef ne retournait souvent aucun résultat. Le problème venait de caractères spéciaux mal encodés lors de l'import WordPress. C'est maintenant corrigé.

    Les vignettes de la galerie s'affichent toujours en carré, quelle que soit la proportion originale du dessin. Les miniatures de navigation précédent/suivant ont aussi été harmonisées.

    Plusieurs améliorations SEO ont été apportées : image de prévisualisation par défaut, sitemap plus précis, et exclusion automatique des éventuelles pages internes des moteurs de recherche.

    chevron_right Détails techniques
    • normalizeKeyword() dans DrawingController : html_entity_decode + lowercase + trim, appliqué à la query string ET aux mots-clefs du dessin avant comparaison
    • normalizeTerm() dans WordPressImportService : nettoyage à la source dès l'import
    • Image OG par défaut : fallback vers un dessin existant avec vérification is_file()
    • Auto-noindex sur les pages internes via request()->is('admin*') dans le layout
    • Sitemap : lastmod basé sur updated_at du dessin ; URLs statiques sur startOfDay()
    • Conteneur image galerie : aspect-square Tailwind au lieu de style="aspect-ratio:..." dynamique

  17. Transition complète vers WordPress comme source des dessins

    Le Vestibule est désormais entièrement alimenté depuis WordPress : les titres, descriptions, catégories, mots-clefs et images des dessins sont importés automatiquement depuis la base de données WordPress source.

    Les images sont téléchargées et stockées localement pour un affichage rapide, y compris quand le site WordPress source est protégé par un mot de passe.

    chevron_right Détails techniques
    • WordPressImportService : import posts → drawings, taxonomies category/post_tag, featured image en local avec dimensions
    • Support Basic Auth média via WP_MEDIA_BASIC_AUTH_USER / WP_MEDIA_BASIC_AUTH_PASSWORD
    • Option --reset-images sur drawings:import-wordpress : suppression fichiers locaux + reset champs DB avant réimport
    • Suppression de tous les fallbacks JSON runtime (contrôleurs, vues, routes, commandes)
    • Pipeline unique : DB drawings alimentée depuis WordPress, lue par Laravel

  18. Galerie pilotée par base de données, filtres avancés et aperçus sociaux

    La galerie est passée d'une liste statique à une vraie base de données, ce qui permet une gestion plus solide et évolutive des dessins.

    Les filtres ont été repensés : ils s'affichent dans un panneau repliable avec une recherche textuelle, un filtre par catégorie et un filtre par mots-clefs — le tout fonctionnant ensemble.

    Chaque dessin génère maintenant une image sociale dédiée (pour Facebook, Twitter, etc.) avec le titre du dessin et un arrière-plan cohérent avec le site.

    chevron_right Détails techniques
    • Migration + modèle Eloquent Drawing ; repository pattern (DrawingRepositoryInterface + EloquentDrawingRepository)
    • Extraction de la logique galerie/sitemap dans DrawingController
    • OgImageController : image OG 1200×630 générée via GD avec overlay texte + catégorie
    • Filtres : toggle afficher/masquer (état persistant localStorage), recherche textuelle, filtre multi-paramètre avec compteurs contextuels
    • Composant Blade réutilisable <x-filter-section> pour les panneaux de filtres
    • Suppression du suivi de vues et du tri "populaire"

  19. URLs lisibles, sitemap, navigation visuelle et compteurs de filtres

    Les adresses des pages de dessins utilisent maintenant des mots lisibles (ex. /galerie/que-cest-chat) au lieu d'un numéro opaque. Les anciens liens sont automatiquement redirigés.

    La navigation entre dessins affiche maintenant une miniature du dessin précédent et suivant, en haut et en bas de la fiche. Les filtres de la galerie affichent le nombre de dessins disponibles par catégorie et par mot-clef, en tenant compte des filtres déjà actifs.

    Un sitemap XML est généré automatiquement pour aider les moteurs de recherche à découvrir tous les dessins.

    chevron_right Détails techniques
    • Route /galerie/{slug} + redirection 301 /galerie/{id} → slug
    • Sitemap XML dynamique depuis contrôleur : CollectionPage + ItemList JSON-LD, canonical, robots
    • Images galerie : loading="lazy", decoding="async", width/height explicites
    • Miniatures prev/next : getimagesize() + aspect-square object-contain
    • Compteurs de filtres calculés en tenant compte des filtres croisés actifs
    • Skip-link accessibilité en CSS inline natif (indépendant du build Tailwind)
    • Pagination passée à 16 éléments par page