Commit Graph New

<!-- Commit Graph · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="cmg"><div class="cmg__head"><b class="cmg__tot"></b><span class="cmg__leg">Minder <i class="cmg__l0"></i><i class="cmg__l1"></i><i class="cmg__l2"></i><i class="cmg__l3"></i><i class="cmg__l4"></i> Meer</span></div><div class="cmg__months"></div><div class="cmg__body"><div class="cmg__days"><span></span><span>Di</span><span></span><span>Do</span><span></span><span>Za</span><span></span></div><div class="cmg__grid" tabindex="0" role="grid" aria-label="Commits per dag"></div></div><div class="cmg__tip" role="status"></div></div>
</div>

/* Commit Graph · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.cmg{position:relative;width:360px;max-width:92%;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a}
.cmg__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cmg__tot{font-size:13px;font-weight:700}
.cmg__leg{display:flex;align-items:center;gap:3px;font:500 9px/1 'JetBrains Mono',monospace;color:rgba(10,10,10,.5)}
.cmg__leg i{width:9px;height:9px;border-radius:2px}
.cmg__l0{background:#e6e2dc}.cmg__l1{background:#fcc9b3}.cmg__l2{background:#f8946b}.cmg__l3{background:#F5480F}.cmg__l4{background:#a8300a}
.cmg__months{display:grid;grid-template-columns:repeat(26,1fr);margin-left:20px;font:500 9px/1 'JetBrains Mono',monospace;color:rgba(10,10,10,.5);height:12px}
.cmg__months span{white-space:nowrap;overflow:visible;width:0}
.cmg__body{display:flex;gap:4px}
.cmg__days{display:grid;grid-template-rows:repeat(7,1fr);gap:2px;width:16px;font:500 8px/1 'JetBrains Mono',monospace;color:rgba(10,10,10,.5);align-items:center}
.cmg__grid{flex:1;display:grid;grid-template-columns:repeat(26,1fr);grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:2px;outline:none}
.cmg__grid:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.cmg__c{aspect-ratio:1;border-radius:2px;opacity:0;transform:scale(.4);animation:cmg-in .4s cubic-bezier(.22,1,.36,1) forwards}
.cmg__c.is-act{outline:2px solid #0a0a0a;outline-offset:0}
@keyframes cmg-in{to{opacity:1;transform:none}}
.cmg__tip{position:absolute;top:0;left:0;pointer-events:none;background:#0a0a0a;color:#fff;font:500 10px/1.2 'JetBrains Mono',monospace;padding:6px 8px;border-radius:3px;white-space:nowrap;opacity:0;transition:opacity .15s;z-index:3}
.cmg__tip.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.cmg__c{animation:none;opacity:1;transform:none}}

// Commit Graph · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.cmg'); if (!w) return;
    var grid = w.querySelector('.cmg__grid'), tip = w.querySelector('.cmg__tip'), mon = w.querySelector('.cmg__months');
    var COL = ['#e6e2dc', '#fcc9b3', '#f8946b', '#F5480F', '#a8300a'];
    var DAG = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'], MND = ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
    var seed = 41; function rnd() { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }
    var end = new Date(2026, 9, 4), start = new Date(end); start.setDate(end.getDate() - (26 * 7 - 1));
    var cells = [], total = 0, lastM = -1;
    for (var i = 0; i < 26 * 7; i++) {
      var d = new Date(start); d.setDate(start.getDate() + i);
      var wd = d.getDay(), weekend = wd === 0 || wd === 6, wave = .5 + .5 * Math.sin(i / 19);
      var n = weekend ? (rnd() < .75 ? 0 : Math.floor(rnd() * 3)) : Math.floor(Math.pow(rnd(), 1.4) * 14 * (.5 + wave));
      total += n;
      var lv = n === 0 ? 0 : n < 3 ? 1 : n < 6 ? 2 : n < 10 ? 3 : 4;
      var c = document.createElement('span'); c.className = 'cmg__c'; c.style.background = COL[lv];
      c.style.animationDelay = (Math.floor(i / 7) * 18 + (i % 7) * 10) + 'ms';
      c.dataset.t = (n === 0 ? 'Geen commits' : n === 1 ? '1 commit' : n + ' commits') + ' · ' + DAG[wd] + ' ' + d.getDate() + ' ' + MND[d.getMonth()];
      grid.appendChild(c); cells.push(c);
      if (i % 7 === 0) { var s = document.createElement('span'); if (d.getMonth() !== lastM && d.getDate() <= 7) { s.textContent = MND[d.getMonth()]; lastM = d.getMonth(); } mon.appendChild(s); }
    }
    w.querySelector('.cmg__tot').textContent = total.toLocaleString('nl-NL') + ' commits in 26 weken';
    var act = -1;
    function show(i) {
      var c = cells[i]; if (!c) return; tip.textContent = c.dataset.t; tip.classList.add('is-on');
      var wr = w.getBoundingClientRect(), r = c.getBoundingClientRect();
      var x = r.left - wr.left + r.width / 2 - tip.offsetWidth / 2; x = Math.max(0, Math.min(wr.width - tip.offsetWidth, x));
      var y = r.top - wr.top - tip.offsetHeight - 6; if (y < 0) y = r.bottom - wr.top + 6;
      tip.style.transform = 'translate(' + x + 'px,' + y + 'px)';
    }
    function hide() { tip.classList.remove('is-on'); }
    grid.addEventListener('pointerover', function (e) { var i = cells.indexOf(e.target); if (i > -1) show(i); });
    grid.addEventListener('pointerleave', hide);
    grid.addEventListener('keydown', function (e) {
      var m = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7 }[e.key]; if (m === undefined) return; e.preventDefault();
      if (act > -1) cells[act].classList.remove('is-act');
      act = act < 0 ? cells.length - 1 : Math.max(0, Math.min(cells.length - 1, act + m));
      cells[act].classList.add('is-act'); show(act);
    });
    grid.addEventListener('blur', function () { if (act > -1) cells[act].classList.remove('is-act'); hide(); });
}
init(document.querySelector('.jouw-container'));