Skip to content

fix(site): a passing day turns bluer in steps of two days on the samples page #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Vovanda merged 1 commit into from
Oct 5, 2026
Merged

fix(site): a passing day turns bluer in steps of two days on the samples page #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/samples.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
.days .m { grid-row: 1; font-size: 0.7rem; color: var(--muted); white-space: nowrap; line-height: 1rem; }
.days .w { grid-column: 1; font-size: 0.65rem; color: var(--muted); line-height: var(--cell); }
.day { display: block; width: var(--cell); height: var(--cell); padding: 0; border: 0; border-radius: 3px; background: var(--empty); }
/* without a run a pass freezes to blue and a failure rots to dark red, over 30 days */
/* without a run a pass turns to ice and a failure rots to dark red, over 30 days; --fade comes from fadeOf */
.day.ok { background: color-mix(in oklab, var(--sleep) var(--fade), var(--ok)); }
.day.bad { background: color-mix(in oklab, var(--rot) var(--fade), var(--bad)); }
/* the weeks ahead are the same empty cells, fading out to the right */
Expand Down
26 changes: 18 additions & 8 deletions site/samples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ const raw = (branch, path) =>
const DAY_MS = 86400000, WEEK = 7, YEAR_DAYS = 365;
const ISO_DAY = "YYYY-MM-DD".length;
const GRID = {
fadeDays: 30, // a pass fades to blue, a failure to dark red, over this many days without a run
fadeDays: 30, // a pass turns to ice, a failure to dark red, over this many days without a run
passStepDays: 2, // a pass turns a step bluer every this many days, so the steps are told apart
pastWeeks: 52, // a year back
futureWeeks: 8, // the weeks after today that fade out
aheadInView: 6, // weeks after today in view when the grid opens on a narrow screen
Expand Down Expand Up @@ -230,11 +231,19 @@ async function fetchCopy() {
}
const sameData = (a, b) => JSON.stringify([a.variants, a.branches]) === JSON.stringify([b.variants, b.branches]);

/* How far a day has gone from its result, 0 to 1, by the days since the run. A pass goes in steps, a
step bluer every two days and ice by day 30, so a branch a week without a run looks unlike one run
yesterday; a failure rots evenly. The same rule as ci-svg.py of the samples repository. */
function fadeOf(ok, age) {
const days = ok ? Math.floor(age / GRID.passStepDays) * GRID.passStepDays : age;
return Math.min(days / GRID.fadeDays, 1);
}

// The dot has the colour today's cell of the sample's grid has: its last result, faded by the days since.
function resultDot(run) {
const age = daysBetween(day(run.started), localDay(new Date()));
const fade = Math.min(age / GRID.fadeDays, 1);
return `<i class="dot ${run.conclusion === "success" ? "ok" : "bad"}" style="--fade:${(fade * 100).toFixed(0)}%"></i>`;
const ok = run.conclusion === "success";
const fade = fadeOf(ok, daysBetween(day(run.started), localDay(new Date())));
return `<i class="dot ${ok ? "ok" : "bad"}" style="--fade:${(fade * 100).toFixed(0)}%"></i>`;
}

/* ==== THE PANEL: SAMPLES ====
Expand Down Expand Up @@ -323,9 +332,10 @@ el("explorer").addEventListener("click", (event) => {

/* ==== THE GRID OF DAYS: THE MODEL ====
The year of the open branch, a column per week, like the contribution grid of a GitHub profile,
running on past today into weeks that fade out. A day keeps the branch's last result: a pass freezes
to blue and a failure rots to dark red over 30 days without a run, so a branch nobody regenerates, or one
left broken, shows as one. This block only counts; the next one draws. */
running on past today into weeks that fade out. A day keeps the branch's last result: a pass turns to
ice a step every two days and a failure rots to dark red, over 30 days without a run (fadeOf), so a
branch nobody regenerates, or one left broken, shows as one. This block only counts; the next one
draws. */
function dayCells(branch) {
const runs = [];
for (const report of branch?.reports ?? []) for (const run of report.runs) runs.push({ ...run, version: report.version });
Expand Down Expand Up @@ -398,7 +408,7 @@ function dayCell(c, idx) {
const place = `grid-column:${c.week + 2};grid-row:${c.weekday + 2};--n:${c.week}`;
if (c.future) return `<i class="day future" style="${place};--far:${Math.min(c.future / (WEEK * GRID.futureWeeks), 1).toFixed(2)}"></i>`;
if (c.empty) return `<i class="day empty" style="${place}"></i>`;
const fade = Math.min(c.age / GRID.fadeDays, 1);
const fade = fadeOf(c.ok, c.age);
const cls = ["day", c.ok ? "ok" : "bad", c.ran.length ? "ran" : "", c.today ? "today" : ""].filter(Boolean).join(" ");
return `<button type="button" class="${cls}" style="${place};--fade:${(fade * 100).toFixed(0)}%" data-i="${idx}" aria-label="${c.key}"></button>`;
}
Expand Down