Pendant des mois, modifier le texte d'un site client dans Piks-l ressemblait à remplir un formulaire administratif. À gauche, une clé : accueil.hero_sous_titre. À droite, un champ. Entre les deux, rien qui dise où ce texte atterrit, s'il tient sur une ligne, ni à quoi il ressemble une fois mis en page.
On enregistrait, on ouvrait le site dans un autre onglet, on rechargeait, on revenait. Vingt fois par séance. Cette version supprime l'aller-retour.
Le site, à côté des champs
La console de contenu est désormais scindée en deux : les champs à gauche, le vrai site du client à droite, dans un cadre redimensionnable. Pas une maquette ni une approximation — la page telle qu'elle est servie en ligne.
- Trois largeurs : bureau, tablette (834 px), mobile (390 px). Un titre qui déborde sur téléphone se voit tout de suite.
- L'aperçu suit ce qu'on écrit. Ouvrir le groupe « Contact » l'emmène sur la page contact ; changer d'onglet l'emmène vers le portfolio, le blog ou la boutique. Chaque groupe affiche la route qu'il alimente.
- Enregistrer recharge l'aperçu, en passant outre la minute de cache du réseau de diffusion. Le résultat est visible immédiatement.
Le panneau et la largeur choisie sont mémorisés d'une séance à l'autre. Un site qui n'est pas encore déployé ne peut évidemment rien montrer : l'aperçu l'explique alors, avec le statut réel, plutôt que d'afficher un cadre blanc.
Un éditeur, au lieu d'une zone de texte
Le second changement concerne l'écriture elle-même. Les articles de blog des sites clients se rédigeaient dans une zone de texte nue de dix lignes — alors que leur contenu part en HTML sur le site. Autant écrire un livre dans une case de formulaire.
L'éditeur est maintenant celui de Nuxt UI, avec barre d'outils fixe, barre contextuelle qui apparaît à la sélection, barre dédiée aux tableaux, menu « / » pour insérer un bloc, emojis, poignée pour réordonner et convertir un paragraphe, insertion de lien sans boîte de dialogue système, et coloration syntaxique du code.
Surtout, il est partagé : le blog de Piks-l, les articles des sites clients et — depuis cette version — les descriptions de produits emploient exactement le même composant. Une amélioration profite aux trois.
Le contenu riche va jusqu'au bout
Écrire un titre de niveau 2 dans la console ne sert à rien s'il arrive sur le site à la taille du texte courant. C'est pourtant ce qui se serait passé : les styles de base sont neutralisés par le moteur CSS, et un <h2> inséré tel quel ressort sans relief, une liste ressort sans puces.
Le socle des sites générés embarque donc un composant de rendu unique, qui applique la mise en forme là où il faut. Il gère aussi le cas moins évident : beaucoup de descriptions ont été saisies en texte brut, avant l'éditeur. Rendues comme du HTML, leurs retours à la ligne auraient disparu — un seul bloc compact. Le composant fait la différence et les préserve.
Même précaution côté interface de programmation : la description d'un produit est servie en deux versions, l'une en texte pour les métadonnées de référencement, l'autre mise en forme pour l'affichage. Aucun site déjà en ligne n'a bougé.
Trois défauts que rien ne signalait
Le travail sur cette console a mis au jour des pannes silencieuses, et elles méritent d'être racontées telles quelles.
La console était injoignable. Une page portant le même nom qu'un dossier de pages devient, pour le routeur, un parent qui doit afficher ses enfants. Elle ne le faisait pas. Résultat : la gestion de contenu s'ouvrait sur du vide. Les journaux du serveur l'ont confirmé sans appel — zéro appel aux routes de contenu en six heures.
Quatre éditeurs ne s'ouvraient jamais. Ils vivaient dans un dossier réservé par le module de contenu, qui les enregistrait sous un autre nom que celui employé pour les appeler. En développement, un avertissement l'aurait dit ; en production, cet avertissement est retiré. Les composants étaient donc absents de la page, en silence. Aucun clic n'avait d'effet.
Les articles générés s'affichaient vides. Le corps était bien en base, bien servi — sous un nom de champ que les pages générées n'employaient pas. L'article existait et restait invisible.
Ces trois-là ont un point commun : ni le compilateur, ni la compilation de production, ni un test d'interface de programmation ne pouvaient les voir. Chacun a donc reçu son test de non-régression, écrit pour échouer si le cas se reproduit. La suite en compte maintenant 258.
Ce que ça change au quotidien
Le contenu d'un site client se corrige sans quitter Piks-l, en voyant le résultat. Un article s'écrit avec de vrais outils de mise en forme. Une fiche produit peut porter un tableau de caractéristiques ou une liste d'ingrédients. Et la distance entre « j'ai changé ce texte » et « je vois ce que ça donne » est passée de quatre gestes à zéro.