@mostajs/wagon-ui 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -5,6 +5,13 @@
 
 
 
+## 0.5.3 — 2026-10-09
+
+**Ajouté** (audit de travel, référencement) : chaque page porte l'icône de l'onglet
+(`<link rel="icon" href="/favicon.svg">`, servie par le wagon 0.8) et, quand une image est connue, `og:image` —
+celle de la page (`page({ image })`), sinon celle de la marque (`marque.image`) ; un chemin du site devient absolu,
+toute autre adresse que https est ignorée. Essai T-WUI-24.
+
 ## 0.5.2 — 2026-10-09
 
 **Corrigé** (audit) : le menu des langues annonce aussi la langue COURANTE aux lecteurs d'écran

package/llms.txt

@@ -11,7 +11,7 @@ Rendre les écrans communs à tout SaaS, identiques d'un produit à l'autre, san
 
 ## API
 `creerWagonUi({ marque: { nom, auteur, symbole?, slogan?, courriel?, licence? }, couleurs?: { brand, lien, ornement, encre, surface }, langues?: ['fr','en','ar'], liens?: [{ href, libelle }], ressources?: [{ cle, limite, periode: 'jour'|'mois', libelle, parPeriode?, sansLimite?, aucun? }], textes?: { fr: { … } } })` → `ui` :
-- `ui.page({ actif, titre, contenu, lang, connecte?, base?, description? })` — la page entière ; `contenu` = HTML déjà rendu.
+- `ui.page({ actif, titre, contenu, lang, connecte?, base?, description?, image? })` — la page entière ; `contenu` = HTML déjà rendu.
 - `ui.accueil({ lang, titre, lede?, actions?: [{ href, libelle, principal? }], preuves?: [{ titre, texte }], note? })`
 - `ui.tarifs({ lang, paliers: [{ slug, name, price (centimes), active?, limits: { <limite>: n, maxCles } }], sousTitre?, inscriptionHref? })`
 - `ui.inscription({ lang, palier, erreur?, minMotDePasse?, methode?: 'motdepasse'|'code', action? })` · `ui.inscriptionFaite({ lang, cle?, base?, paiement?: { compteId, planSlug } })`
@@ -26,6 +26,7 @@ Rendre les écrans communs à tout SaaS, identiques d'un produit à l'autre, san
 `/`, `/tarifs`, `/aide`, `/apropos`, `/inscription` (POST : plan, nom, courriel, motdepasse), `/connexion` (POST : courriel, motdepasse), `/deconnexion`, `/compte`, `/compte/cles` (POST : libelle), `/compte/cles/revoquer` (POST : prefix), `/compte/portail` (POST), `/paiement` (POST : compte, plan), `/admin/plans` (POST), `/admin/usage`, `/mentions-legales`, `/cgu`, `/cgv`, `/confidentialite`.
 
 ## PIÈGES
+- 0.5.3 : icône `/favicon.svg` dans chaque page ; `og:image` depuis `page({ image })` ou `marque.image` (chemin du site ou https).
 - 0.5.1 : `page({ chemin })` — canonique et liens de langue sur la page réelle.
 - 0.5.0 : `creerWagonUi({ …, collant: true, appel: { href, libelle }, selecteurLangue: 'menu' })` — en-tête collant, bouton d'appel, langue en menu déroulant sans script ; défauts inchangés.
 - 0.4.0 : `tarifs.clesPluriel` n'existe plus → `tarifs.cles_one` / `tarifs.cles_other` (+ formes arabes) ; prix formatés par langue (« 9,99 € »).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/wagon-ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Les pages du wagon d'un SaaS — mise en page (langues, pied légal, en-têtes pour les moteurs), accueil, tarifs, inscription, connexion (mot de passe ou code), espace client (palier, jauges, clés, factures, gestion de l'abonnement), administration (paliers, usage), pages légales — en fr, en, ar. Extraites de mdseal, sans ce qu'il vend : l'identité et les ressources mesurées viennent de la configuration. Vues pures, zéro dépendance.",
   "license": "AGPL-3.0-or-later",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",

package/src/index.js

@@ -222,7 +222,7 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
      * La page entière. `contenu` est du HTML déjà rendu (par une vue de ce module, ou par la charge
      * utile). `base` — l'adresse publique — ajoute les en-têtes que lisent les moteurs et les aperçus.
      */
-    page({ actif = '/', chemin: cheminPage = '', titre = '', contenu = '', lang, connecte = false, base = '', description = '' }) {
+    page({ actif = '/', chemin: cheminPage = '', titre = '', contenu = '', lang, connecte = false, base = '', description = '', image = '' }) {
       const L = langueDe(lang); const tr = t(L);
       const nom = esc(marque.nom);
       const slogan = dansLangue(marque.slogan, L);
@@ -231,10 +231,13 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
       const ici = cheminPage || actif;
       const chemin = lien(ici);
       const canonique = base ? `${String(base).replace(/\/$/, '')}${ici === '/' ? '/' : ici}` : '';
+      // 0.5.3 — l'image de partage : celle de la page, sinon celle de la marque ; absolue (https ou chemin du site).
+      const img = String(image || marque.image || '');
+      const imagePartage = /^https:\/\//.test(img) ? img : img.startsWith('/') && !img.startsWith('//') && base ? `${String(base).replace(/\/$/, '')}${img}` : '';
       const tete = canonique ? `<meta name="description" content="${esc(description || slogan)}">
 <link rel="canonical" href="${esc(canonique)}">${LANGUES.map((l) => `<link rel="alternate" hreflang="${l}" href="${esc(canonique)}?lang=${l}">`).join('')}<link rel="alternate" hreflang="x-default" href="${esc(canonique)}">
 <meta property="og:type" content="website"><meta property="og:site_name" content="${nom}"><meta property="og:title" content="${esc(titre)} — ${nom}">
-<meta property="og:description" content="${esc(description || slogan)}"><meta property="og:url" content="${esc(canonique)}"><meta property="og:locale" content="${L}">` : '';
+<meta property="og:description" content="${esc(description || slogan)}"><meta property="og:url" content="${esc(canonique)}"><meta property="og:locale" content="${L}">${imagePartage ? `<meta property="og:image" content="${esc(imagePartage)}">` : ''}` : '';
       const nav = [...liens.map((x) => [x.href, dansLangue(x.libelle, L)]), ['/tarifs', tr('nav.tarifs')], ['/aide', tr('nav.aide')], ['/apropos', tr('nav.apropos')]];
       // 0.5 — le choix de langue en menu déroulant (`selecteurLangue: 'menu'`) : <details>, donc SANS script.
       const choixLangue = LANGUES.length < 2 ? '' : selecteurLangue === 'menu'
@@ -247,7 +250,7 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
       const boutonAppel = appel?.href ? `<a class="appel" href="${lien(appel.href)}">${esc(dansLangue(appel.libelle, L))}</a>` : '';
       return `<!doctype html><html lang="${L}" dir="${dirDe(L)}"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1"><title>${esc(titre)} — ${nom}</title>
-${tete}<style>${STYLE}</style>${themeCss() ? `<style id="theme-palette">${themeCss()}</style>` : ''}</head><body>
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">${tete}<style>${STYLE}</style>${themeCss() ? `<style id="theme-palette">${themeCss()}</style>` : ''}</head><body>
 <header${classesTete ? ` class="${classesTete}"` : ''}><a class="brand" href="/">${marque.symbole ? `${esc(marque.symbole)} ` : ''}${nom}</a><input type="checkbox" id="wagon-menu" class="bascule"><label for="wagon-menu" class="burger" aria-label="${esc(tr('layout.menu'))}">☰</label><div class="menu"><nav>${nav.map(([h, l]) => `<a href="${lien(h)}"${actif === h ? ' class="on"' : ''}>${esc(l)}</a>`).join('')}</nav><span class="moi"><a href="${connecte ? '/compte' : '/connexion'}">${esc(tr(connecte ? 'espace.compte' : 'espace.seConnecter'))}</a>${connecte ? ` · <a href="/deconnexion">${esc(tr('espace.seDeconnecter'))}</a>` : ''}</span>${boutonAppel}${choixLangue}</div></header>
 <main>${contenu}</main>
 <footer><b>${nom}</b>${slogan ? ` — ${esc(slogan)}` : ''} · ${esc(tr('layout.auteur'))} : <b>${esc(marque.auteur)}</b>${marque.courriel ? ` &lt;${esc(marque.courriel)}&gt;` : ''} · ${esc(marque.licence ?? 'AGPL-3.0')} · ${esc(tr('layout.propulse'))} <code>@mostajs/*</code><br><span class="legal">${DOCUMENTS_LEGAUX.map(([h, k]) => `<a href="/${h}">${esc(tr(`legal.${k}`))}</a>`).join(' · ')}</span></footer>