pomelo-digital/pomelo-deck

Pomelo Deck Template

Wiederverwendbare Vorlage für die Erstellung von Pomelo-branded .pptx-Präsentationen mit PptxGenJS, sodass das Designsystem nie neu abgeleitet werden muss.

Verwendung

Immer, wenn die Aufgabe lautet „Erstelle / gestalte eine Präsentation im Pomelo-Stil neu“ – Kunden-Performance-Reports, Pitchdecks, Vorschläge. Wenn der Benutzer eine vorhandene Präsentation zum Umgestalten hochlädt, behalte alle ihre Daten exakt bei und ändere nur das Layout auf dieses System.

Einrichtung (pro Sitzung)

1. Stelle sicher, dass folgende Dateien im Arbeitsverzeichnis vorhanden sind: pomelo.js, pomelo_logo.png (und example.js als Referenz).
2. Installiere die Engine falls nötig: npm install -g pptxgenjs und führe Skripte aus mit NODE_PATH=$(npm root -g) node build.js.
3. Lies zuerst example.js – es demonstriert jeden Folienbaustein von Anfang bis Ende. Kopiere es als Ausgangspunkt.

Designsystem (bereits in pomelo.js kodiert – nicht von Hand neu erstellen)

• Leinwand: 10" × 5,625" (16:9), weißer Hintergrund.
• Schriftarten: Georgia = Überschriften/Zahlen; Calibri = Fließtext, Beschriftungen, Tabellen.
• Farben: ink 1F2A2E (Titel), body 3D4A4E, muted 8A9498 (Bildunterschriften/Seitenzahlen), coral EB6B4F (Hauptakzent / Eyebrows / Zahlen / Bögen / Logo), mint 76BBA8 + green 4F8B7B (sekundärer Akzent), sand E8E5DD / light sand F7F6F3 (Panels & Summenzeilen), hairline D9D7D0.
• Eyebrow-Label: 9pt Calibri, Koralle, GROSSBUCHSTABEN, charSpacing:3.
• Folientitel: Georgia ~24pt (28 auf Deckblatt-Abschnitten, 40 auf Trennern, 50 auf Titelblatt).
• Motiv: Verschachtelte Ringe (äußere Farbe + weißes Inneres), die über eine Ecke hinausragen. arcsTR/arcsBL = groß (Titel-/Schlussfolie); smallArcTR = dezent (Inhaltsfolien).
• Fußzeile: Pómelo-Logo unten rechts; Seitenzahl NN / TOTAL unten links in muted gray.

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

Erstellen: const d = new PomeloDeck({ total: N, title, logo:'pomelo_logo.png' }) – total steuert die Seitenzahlen.

Folienbausteine (jeder gibt die Folie zurück, sodass du benutzerdefinierte Inhalte hinzufügen kannst):

• d.cover({ kicker, title, subtitle, sub2, stats:[[num,label,sub]], footer }) – Stats werden als 5er-Streifen dargestellt; lange Werte werden automatisch verkleinert.
• d.divider({ kicker, title, sub, accent }) – Abschnittsumbruch. accent = TOKENS.CORAL (Standard) oder TOKENS.MINT.
• d.content({ kicker, title, note, size, arc, page }) – Standard-Inhaltsfolie mit Eyebrow + Titel + Fußzeile. Gibt die Folie zurück; den Inhalt erstellst du selbst.
• d.closing({ kicker, title, subtitle, footer }).

Komponenten (auf einer Folie aufrufen):

• d.statGrid(s, [[num,label,sub,color]], { x,y,w,cols,gh,gapx,gapy,numSize }) – KPI-Karten.
• d.statCell(s,x,y,w,num,label,sub,color,numSize) – einzelner KPI.
• d.metricRows(s,x,y,w,[[label,val]]) – Label/Wert-Zeilen mit Haarlinien (gut neben einem kreativen Bild).
• d.table(s, head, rows, { x,y,w,colW,fs,hfs,rowH,totalLast,boldFirst,margin }) – Pomelo-Tabelle (dunkler Kopf, Zebra-Zeilen, sandfarbene Summenzeile).
• d.eyebrow / d.title / d.note / d.line – Grundelemente.

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

Fallstricke (auf die harte Tour gelernt – beachte sie)

• Lange Zahlen umbrechen. In einer ~1,74"-Statistikzelle umbrechen Werte mit >6 Zeichen (z.B. ₹1,27,629, 2,652,386) bei der standardmäßigen 30pt-Größe. Übergib numSize:20 an statGrid – die Deckblattfolie behandelt dies automatisch.
• Breite/lange Tabellen laufen unten über. Eine vollbreite Tabelle passt bei rowH:0.235 etwa 13 Datenzeilen. Wenn eine Tabelle länger ist oder unter einem Statistikraster sitzt, teile sie in zwei nebeneinanderliegende Tabellen (~4,4" breit, colW 5 Spalten), anstatt die Zeilen unleserlich zu schrumpfen. Siehe das n-SHIELD-Folie-20-Muster.
• Überlade das Deckblatt nicht. Verwende nur arcsTR (verzichte auf arcsBL), wenn vollbreite Inhalte (wie ein Statistikstreifen) mit dem unteren linken Ring kollidieren würden.
• Kundendaten wörtlich erhalten beim Umgestalten – einschließlich Zahlen, die mathematisch falsch erscheinen. Weise den Benutzer separat darauf hin; korrigiere sie niemals stillschweigend.

Arbeitsablauf

1. Lies example.js; kopiere es nach build.js.
2. Erstelle Folien mit den obigen Bausteinen; verwende vorhandene kreative Bilder der Kunden in ihrem nativen Seitenverhältnis.
3. Rendere jedes Mal zu Bildern zur Qualitätssicherung: soffice --convert-to pdf dann pdftoppm -jpeg oder thumbnail.py. Überprüfe immer visuell vor der Auslieferung – achte auf umbrechende Zahlen und überlaufende Tabellen.
4. Kopiere die endgültige .pptx-Datei in das Ausgabeverzeichnis und präsentiere sie.