pomelo-digital/pomelo-deck

Pomelo Deck Template

Plantilla reutilizable para construir presentaciones .pptx con la marca Pomelo usando PptxGenJS, de forma que el sistema de diseño nunca tenga que redescubrirse.

Cuándo usarlo

Cada vez que la tarea sea "crear / rediseñar / rehacer una presentación en estilo Pomelo" — informes de rendimiento de clientes, propuestas, presentaciones. Si el usuario sube una presentación existente para rediseñarla, conserva todos sus datos exactamente y solo cambia el diseño a este sistema.

Configuración (cada sesión)

1. Asegúrate de que los archivos estén presentes en el directorio de trabajo: pomelo.js, pomelo_logo.png (y example.js como referencia).
2. Instala el motor si es necesario: npm install -g pptxgenjs y ejecuta los scripts con NODE_PATH=$(npm root -g) node build.js.
3. Lee example.js primero — demuestra todos los constructores de diapositivas de principio a fin. Cópialo como punto de partida.

Sistema de diseño (ya codificado en pomelo.js — no lo crees manualmente)

• Lienzo: 10" × 5.625" (16:9), fondo blanco.
• Fuentes: Georgia = titulares/números; Calibri = cuerpo, etiquetas, tablas.
• Colores: ink 1F2A2E (títulos), body 3D4A4E, muted 8A9498 (leyendas/números de página), coral EB6B4F (acento principal / cejas / números / arcos / logo), menta 76BBA8 + verde 4F8B7B (acento secundario), arena E8E5DD / arena clara F7F6F3 (paneles y filas de total), línea fina D9D7D0.
• Etiqueta de ceja: 9pt Calibri, coral, MAYÚSCULAS, charSpacing:3.
• Título de diapositiva: Georgia ~24pt (28 en secciones de portada, 40 en divisores, 50 en portada).
• Motivo: anillos anidados (color exterior + blanco interior) que se salen de una esquina. arcsTR/arcsBL = grande (portada/cierre); smallArcTR = sutil (diapositivas de contenido).
• Pie de página: logotipo de pómelo abajo a la derecha; número de página NN / TOTAL abajo a la izquierda en gris apagado.

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

Crear: const d = new PomeloDeck({ total: N, title, logo:'pomelo_logo.png' }) — total impulsa los números de página.

Constructores de diapositivas (cada uno devuelve la diapositiva para que puedas añadir contenido personalizado):

• d.cover({ kicker, title, subtitle, sub2, stats:[[num,label,sub]], footer }) — las estadísticas se renderizan como una tira de 5 columnas; los valores largos se reducen automáticamente.
• d.divider({ kicker, title, sub, accent }) — separador de sección. accent = TOKENS.CORAL (por defecto) o TOKENS.MINT.
• d.content({ kicker, title, note, size, arc, page }) — diapositiva de contenido estándar con ceja + título + pie. Devuelve la diapositiva; tú mismo compones el cuerpo.
• d.closing({ kicker, title, subtitle, footer }).

Componentes (llámalos sobre una diapositiva):

• d.statGrid(s, [[num,label,sub,color]], { x,y,w,cols,gh,gapx,gapy,numSize }) — tarjetas KPI.
• d.statCell(s,x,y,w,num,label,sub,color,numSize) — KPI individual.
• d.metricRows(s,x,y,w,[[label,val]]) — filas de etiqueta/valor con líneas finas (ideal junto a una imagen creativa).
• d.table(s, head, rows, { x,y,w,colW,fs,hfs,rowH,totalLast,boldFirst,margin }) — tabla Pomelo (encabezado oscuro, filas cebra, fila de total en arena).
• d.eyebrow / d.title / d.note / d.line — primitivas.

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

Advertencias (aprendidas por las malas — respétalas)

• Los números largos se ajustan. En una celda de estadística de ~1.74", valores de >6 caracteres (p. ej. ₹1,27,629, 2,652,386) se ajustan con el tamaño predeterminado de 30pt. Pasa numSize:20 (statGrid) — la portada lo maneja automáticamente.
• Las tablas anchas/largas desbordan la parte inferior. Una tabla a ancho completo admite ~13 filas de datos con rowH:0.235. Si una tabla es más larga o está debajo de una cuadrícula de estadísticas, divídela en dos tablas lado a lado (~4.4" de ancho cada una, colW 5 columnas) en lugar de reducir las filas hasta hacerlas ilegibles. Consulta el patrón de la diapositiva 20 de n-SHIELD.
• No sobredecore la portada. Usa solo arcsTR (omite arcsBL) cuando el contenido a ancho completo (como una tira de estadísticas) choque con el anillo inferior izquierdo.
• Conserva los datos del cliente al pie de la letra al rediseñar, incluyendo cifras que parezcan matemáticamente incorrectas. Señálaselas al usuario por separado; nunca las "corrijas" en silencio.

Flujo de trabajo

1. Lee example.js; cópialo a build.js.
2. Construye las diapositivas con los constructores anteriores; reutiliza cualquier imagen creativa del cliente con su relación de aspecto nativa.
3. Renderiza a imágenes para control de calidad cada vez: soffice --convert-to pdf luego pdftoppm -jpeg, o thumbnail.py. Revisa siempre visualmente antes de entregar — verifica que no haya números ajustados ni tablas desbordadas.
4. Copia el archivo .pptx final a la carpeta de salidas y preséntalo.