pomelo-digital/pomelo-deck

Modèle de présentation Pomelo

Modèle réutilisable pour créer des présentations .pptx aux couleurs de Pomelo avec PptxGenJS, afin que le système de design n'ait jamais à être redérivé.

Quand l'utiliser

Chaque fois que la tâche consiste à « créer / refaire / restyliser une présentation dans le style Pomelo » — rapports de performance client, pitchs, propositions. Si l'utilisateur téléverse une présentation existante à restyliser, conservez toutes ses données exactement et ne changez que la mise en page pour ce système.

Configuration (à chaque session)

1. Assurez-vous que les fichiers sont présents dans le répertoire de travail : pomelo.js, pomelo_logo.png (et example.js pour référence).
2. Installez le moteur si nécessaire : npm install -g pptxgenjs et exécutez les scripts avec NODE_PATH=$(npm root -g) node build.js.
3. Lisez example.js en premier — il montre chaque constructeur de diapositive de bout en bout. Copiez-le comme point de départ.

Système de design (déjà encodé dans pomelo.js — ne le recréez pas à la main)

• Format : 10" × 5,625" (16:9), fond blanc.
• Polices : Georgia pour les titres et les chiffres ; Calibri pour le corps, les étiquettes, les tableaux.
• Couleurs : encre 1F2A2E (titres), corps 3D4A4E, gris doux 8A9498 (légendes/numéros de page), corail EB6B4F (accent principal / sourcils / chiffres / arcs / logo), menthe 76BBA8 + vert 4F8B7B (accent secondaire), sable E8E5DD / sable clair F7F6F3 (panneaux et lignes de total), filet D9D7D0.
• Label de sourcil : Calibri 9pt, corail, MAJUSCULES, charSpacing:3.
• Titre de diapositive : Georgia ~24pt (28 en sections de couverture, 40 en séparateurs, 50 en couverture).
• Motif : anneaux imbriqués (couleur extérieure + blanc intérieur) débordant d'un coin. arcsTR/arcsBL = grand (couverture/clôture) ; smallArcTR = subtil (diapositives de contenu).
• Pied de page : logo pómelo en bas à droite ; numéro de page NN / TOTAL en bas à gauche en gris doux.

API (const { PomeloDeck, TOKENS } = require('./pomelo'))

Création : const d = new PomeloDeck({ total: N, title, logo:'pomelo_logo.png' }) — total entraîne les numéros de page.

Constructeurs de diapositives (chacun renvoie la diapositive pour que vous puissiez ajouter du contenu personnalisé) :

• d.cover({ kicker, title, subtitle, sub2, stats:[[num,label,sub]], footer }) — les statistiques s'affichent en bande de 5 éléments ; les valeurs longues se réduisent automatiquement.
• d.divider({ kicker, title, sub, accent }) — séparateur de section. accent = TOKENS.CORAL (par défaut) ou TOKENS.MINT.
• d.content({ kicker, title, note, size, arc, page }) — diapositive de contenu standard avec sourcil + titre + pied de page. Renvoie la diapositive ; composez le corps vous-même.
• d.closing({ kicker, title, subtitle, footer }).

Composants (à appeler sur une diapositive) :

• d.statGrid(s, [[num,label,sub,color]], { x,y,w,cols,gh,gapx,gapy,numSize }) — cartes KPI.
• d.statCell(s,x,y,w,num,label,sub,color,numSize) — KPI unique.
• d.metricRows(s,x,y,w,[[label,val]]) — lignes étiquette/valeur avec filets (bonnes à côté d'une image créative).
• d.table(s, head, rows, { x,y,w,colW,fs,hfs,rowH,totalLast,boldFirst,margin }) — tableau Pomelo (en-tête sombre, lignes zébrées, ligne de total sable).
• d.eyebrow / d.title / d.note / d.line — primitives.

Sauvegarde : await d.save('out.pptx').

Pièges (appris à la dure — respectez-les)

• Les nombres longs passent à la ligne. Dans une cellule de statistique d'environ 1,74", les valeurs de plus de 6 caractères (ex. ₹1,27,629, 2,652,386) passent à la ligne à la taille 30pt par défaut. Passez numSize:20 (statGrid) — la couverture gère cela automatiquement.
• Les tableaux larges/longs débordent en bas. Un tableau pleine largeur contient environ 13 lignes de données à rowH:0.235. Si un tableau est plus long ou se trouve sous une grille de statistiques, divisez-le en deux tableaux côte à côte (~4,4" de large chacun, colW 5 colonnes) plutôt que de réduire les lignes jusqu'à l'illisibilité. Voir le modèle de diapositive 20 de n-SHIELD.
• Ne surchargez pas la couverture. Utilisez arcsTR seulement (omettez arcsBL) lorsque du contenu pleine largeur (comme une bande de statistiques) entrerait en conflit avec l'anneau en bas à gauche.
• Conservez les données client textuellement lors du restyling — y compris les chiffres qui semblent mathématiquement erronés. Signalez-les séparément à l'utilisateur ; ne les « corrigez » jamais en silence.

Flux de travail

1. Lisez example.js ; copiez-le vers build.js.
2. Construisez les diapositives avec les constructeurs ci-dessus ; réutilisez les images créatives du client dans leur format natif.
3. Rendez en images pour contrôle qualité à chaque fois : soffice --convert-to pdf puis pdftoppm -jpeg, ou thumbnail.py. Vérifiez toujours visuellement avant de livrer — surveillez les nombres qui passent à la ligne et les tableaux qui débordent.
4. Copiez le fichier .pptx final dans outputs et présentez-le.