pomelo-digital/pomelo-deck

Modelo de Deck Pomelo

Modelo reutilizável para criar apresentações .pptx com a marca Pomelo usando PptxGenJS, para que o sistema de design nunca precise ser redesenhado do zero.

Quando usar

Sempre que a tarefa for "criar / reformatar / reformatar um deck no estilo Pomelo" — relatórios de desempenho de clientes, pitches, propostas. Se o usuário enviar um deck existente para reformatar, mantenha todos os dados exatamente como estão e altere apenas o layout para este sistema.

Configuração (a cada sessão)

1. Garanta que os arquivos estejam presentes no diretório de trabalho: pomelo.js, pomelo_logo.png (e example.js para referência).
2. Instale o engine se necessário: npm install -g pptxgenjs e execute os scripts com NODE_PATH=$(npm root -g) node build.js.
3. Leia example.js primeiro — ele demonstra cada construtor de slide de ponta a ponta. Copie-o como ponto de partida.

Sistema de design (já codificado em pomelo.js — não recrie manualmente)

• Canvas: 10" × 5,625" (16:9), fundo branco.
• Fontes: Georgia = títulos/números; Calibri = corpo, rótulos, tabelas.
• Cores: tinta 1F2A2E (títulos), corpo 3D4A4E, suave 8A9498 (legendas/números de página), coral EB6B4F (acento principal / sobretítulos / números / arcos / logotipo), menta 76BBA8 + verde 4F8B7B (acento secundário), areia E8E5DD / areia clara F7F6F3 (painéis e linhas totais), linha fina D9D7D0.
• Sobretítulo: 9pt Calibri, coral, MAIÚSCULO, charSpacing:3.
• Título do slide: Georgia ~24pt (28 em seções de capa, 40 em divisórias, 50 na capa).
• Motivo: anéis aninhados (cor externa + branco interno) transbordando um canto. arcsTR/arcsBL = grande (capa/encerramento); smallArcTR = sutil (slides de conteúdo).
• Rodapé: logotipo pómelo no canto inferior direito; número da página NN / TOTAL no canto inferior esquerdo em cinza suave.

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

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

Construtores de slide (cada um retorna o slide para que você possa adicionar conteúdo personalizado):

• d.cover({ kicker, title, subtitle, sub2, stats:[[num,label,sub]], footer }) — estatísticas renderizadas como uma faixa de 5 colunas; valores longos encolhem automaticamente.
• d.divider({ kicker, title, sub, accent }) — quebra de seção. accent = TOKENS.CORAL (padrão) ou TOKENS.MINT.
• d.content({ kicker, title, note, size, arc, page }) — slide de conteúdo padrão com sobretítulo + título + rodapé. Retorna o slide; monte o corpo você mesmo.
• d.closing({ kicker, title, subtitle, footer }).

Componentes (chame em um slide):

• d.statGrid(s, [[num,label,sub,color]], { x,y,w,cols,gh,gapx,gapy,numSize }) — cartões KPI.
• d.statCell(s,x,y,w,num,label,sub,color,numSize) — KPI único.
• d.metricRows(s,x,y,w,[[label,val]]) — linhas de rótulo/valor com linhas finas (bom ao lado de uma imagem criativa).
• d.table(s, head, rows, { x,y,w,colW,fs,hfs,rowH,totalLast,boldFirst,margin }) — tabela Pomelo (cabeçalho escuro, linhas zebradas, linha total em areia).
• d.eyebrow / d.title / d.note / d.line — primitivas.

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

Armadilhas (aprendidas na prática — respeite-as)

• Números longos quebram. Em uma célula de estatística de ~1,74", valores acima de 6 caracteres (ex.: ₹1,27,629, 2,652,386) quebram no tamanho padrão de 30pt. Passe numSize:20 (statGrid) — a capa lida com isso automaticamente.
• Tabelas largas/altas transbordam na parte inferior. Uma tabela de largura total comporta ~13 linhas de dados com rowH:0,235. Se uma tabela for mais longa ou estiver abaixo de uma grade de estatísticas, divida-a em duas tabelas lado a lado (~4,4" de largura cada, colW 5 colunas) em vez de encolher as linhas a ponto de ficarem ilegíveis. Veja o padrão do slide 20 do n-SHIELD.
• Não decore demais a capa. Use apenas arcsTR (pule arcsBL) quando conteúdo de largura total (como uma faixa de estatísticas) colidir com o anel inferior esquerdo.
• Preserve os dados do cliente literalmente ao reformatar — incluindo números que pareçam matematicamente errados. Sinalize-os ao usuário separadamente; nunca "corrija" silenciosamente.

Fluxo de trabalho

1. Leia example.js; copie para build.js.
2. Construa os slides com os construtores acima; reutilize quaisquer imagens criativas do cliente em sua proporção original.
3. Renderize para imagens para QA a cada vez: soffice --convert-to pdf depois pdftoppm -jpeg, ou thumbnail.py. Sempre verifique visualmente antes de entregar — verifique números quebrados e tabelas transbordando.
4. Copie o .pptx final para a pasta outputs e apresente-o.