Skip to main content

Geração de Cards Visuais SVG

O gerador compila cards visuais SVG personalizados que representam estatísticas de desenvolvedor, distribuição de linguagens e cabeçalhos de marca com absoluta fidelidade visual.

Cards Visuais Gerados​

1. Card de Visão Geral (overview.svg)​

Exibe contagens de métricas agregadas (Stars, Forks, contribuições de todo o período, linhas de código alteradas, visualizações e repositórios com contribuições). Usa um loop de atraso de animação CSS onde cada linha é animada sequencialmente com um atraso incremental ((row_index + 1) * 150 ms).

2. Card de Linguagens (languages.svg)​

Exibe as porcentagens de linguagens ordenadas de forma decrescente pelo tamanho do arquivo.

  • Barra de Progresso: Acumula tamanhos para exibir uma barra multicolorida. A porcentagem de largura é formatada para exatamente 3 casas decimais na marcação do template.
  • Itens de Lista: Marcadores de lista individuais contendo nome, cor hexadecimal e porcentagem formatada para exatamente 2 casas decimais.

3. Card de Cabeçalho (header.svg)​

Um banner de cabeçalho de marca com estilo personalizado. Carrega tokens de design e codifica dinamicamente o binário da fonte de marca variável Nunito, incorporando-o como uma string codificada em Base64 dentro da saída vetorial. Isso permite que a tipografia com estilo personalizado seja exibida de forma consistente dentro do sandbox restrito do GitHub.

Arquitetura de Coleta de Dados​

Para computar essas métricas, o engine TypeScript se comunica com o GitHub por meio de GraphQL e REST.

Estratégia de Subdivisão Anual em GraphQL​

Devido ao limite da API do GitHub de 100 repositórios retornados por requisição, uma estratégia de divisão recursiva é aplicada:

  • O engine busca repositórios e contribuições ano a ano.
  • Se uma query retornar exatamente 100 repositórios, o intervalo é dividido por fatores primos (2 ou 3) em sub-intervalos (por exemplo, blocos de 6 ou 3 meses).
  • Esses sub-intervalos são consultados recursivamente até que a resposta fique abaixo do limite de 100 repositórios, evitando a omissão de dados.

Resiliência de Conexão e Loop de Nova Tentativa da API​

Ao contrário de soluções legadas, o engine de renderização moderno possui proteção de rede robusta:

  • Exponential Backoff: Se o GitHub estiver compilando estatísticas ou limites de taxa forem acionados, o engine aguarda e tenta novamente usando atrasos exponenciais.
  • Até 10 Tentativas: O engine tenta novamente até 10 vezes em caso de falhas de rede ou de API antes de relatar erros.
  • Proibição de Fallbacks de Git Clone: Operações locais de git-clone são estritamente proibidas dentro do pacote do renderer para garantir tarefas de CI/CD leves e evitar o inchaço dos ambientes de build. Todos os dados são coletados exclusivamente por meio de conexões de API diretas e seguras.