DevGrid: um contribution graph unificado (e um bug bobo integrando ele aqui)

Uso GitHub e GitLab no dia a dia, e cada um só mostra o próprio contribution graph — nenhum dos dois enxerga o outro. Construí o DevGrid pra resolver isso: um workflow que roda todo dia, junta a atividade das duas plataformas, e gera um SVG único (versões light e dark) publicado numa branch de assets do próprio repo.

Como funciona

Nada muito sofisticado: um job do GitHub Actions consulta as duas plataformas, soma a atividade por dia, e regenera dois arquivos SVG — contributions-light.svg e contributions-dark.svg — commitados direto na branch assets. Qualquer lugar pode consumir esses SVGs direto via URL raw, sem precisar rodar nada localmente.

Integrando aqui no site

Adicionei o DevGrid nos projetos e criei uma seção “contribuições” na home, puxando os dois SVGs e alternando entre eles conforme o tema — reaproveitei o mesmo mecanismo CSS que já uso no botão de tema claro/escuro, então a troca respeita a escolha manual de tema do site, não só a preferência do sistema operacional.

Bati num bug engraçado no processo: coloquei o gráfico dentro de um card com fundo --color-bg-raised, e as células vazias do SVG escuro simplesmente sumiram. Motivo: o DevGrid colore células vazias com #161b22 — a cor convencional do GitHub pra contrastar contra o fundo de página, não contra um card. E #161b22 é exatamente o valor do meu --color-bg-raised no tema escuro. Célula vazia e fundo do card, cor idêntica. Troquei o container pra usar o fundo de página (--color-bg) em vez do fundo de card, e as células voltaram a aparecer.