GitHub katkı grafiğini sitede göstermek

Ana sayfadaki katkı grafiği, GitHub profilimdeki yeşil kareli takvimin sitedeki karşılığı. Hazır bir görsel kullanmak yerine veriyi çekip grafiği kendim çiziyorum; böylece sitenin renkleri ve iki dil desteğiyle uyumlu oluyor.

Veri nereden geliyor?

İki yol var:

1. Token varsa: GitHub'ın resmi GraphQL API'si. contributionsCollection sorgusu son bir yılın her günü için katkı sayısını döndürüyor.
2. Token yoksa: GitHub'ın profil sayfasında gösterdiği takvimin herkese açık hâli. Bu sayfadaki her hücrede tarih, ipucu metninde ise o günün katkı sayısı yazıyor; bunları okuyup aynı veriye ulaşıyorum.

İkinci yol sayesinde site hiçbir anahtar girilmeden de çalışıyor. Ama sayfanın yapısı GitHub tarafından değiştirilebileceği için canlıda resmi API'yi tercih ediyorum.

Renk seviyeleri

Her günün sayısını 0–4 arasında bir seviyeye çeviriyorum. Hiç katkı yoksa 0; diğerleri yılın en yüksek gününe göre dörde bölünüyor:

const step = max / 4;
const level = count === 0 ? 0 : Math.min(4, Math.max(1, Math.ceil(count / step)));

Renkler sabit değil; sitenin vurgu rengiyle arka planın karışımı. Bu yüzden grafik açık ve koyu temada kendiliğinden uyum sağlıyor.

Çizim

Grafik, sunucuda üretilen tek bir SVG: 53 hafta × 7 gün. Her karenin içinde tarih ve sayıyı söyleyen bir başlık var; fareyle üstüne gelince JavaScript'e gerek kalmadan ipucu olarak görünüyor. Ay adları da sayfanın diline göre yazılıyor.

Önbellek

Bu veri gün içinde pek değişmediği için günde bir kez yenileniyor. GitHub'a ulaşılamazsa grafiğin yerinde aynı boyutta sade bir "şu an alınamadı" mesajı çıkıyor; sayfa kaymıyor ve bozulmuyor.