tiffmin / GitHubActivityCalendar.astro

--- import { differenceInCalendarDays, eachDayOfInterval, formatISO, getDay, nextDay, parseISO, subWeeks, getYear, getMonth, isValid, } from 'date-fns' import type { WeekdayIndex, CodebergActivityApiResponse, CodebergActivityDay, CodebergActivityWeek, CodebergActivityMonthLabel, } from '~/types' interface Props { username: string year?: number } function range(n: number) { return [...Array(n).keys()] } async function fetchData( username: string, year: number | 'last', ): Promise<CodebergActivityApiResponse> { function validateActivities(activities: Array<CodebergActivityDay>) { if (activities.length === 0) { throw new Error('Activity data must not be empty.') } for (const { date, count } of activities) { if (!isValid(parseISO(date))) { throw new Error(`Activity date '${date}' is not a valid ISO 8601 date string.`) } if (count < 0) { throw new RangeError(`Activity count must not be negative, found ${count}.`) } } } const apiUrl = 'https://github-contributions-api.jogruber.de/v4/' const response = await fetch(`${apiUrl}${username}?y=${String(year)}`) const data = (await response.json()) as GitHubActivityApiResponse if (!response.ok) { const message = data.error || 'Unknown error' throw Error(`Fetching GitHub contribution data for "${username}" failed: ${message}`) } validateActivities(data.contributions) return data } function calcColorScale([start, end]: [string, string], steps: number): Array<string> { return range(steps).map((i) => { switch (i) { case 0: return start case steps - 1: return end default: { const pos = (i / (steps - 1)) * 100 return `color-mix(in oklab, ${end} ${parseFloat(pos.toFixed(2))}%, ${start})` } } }) } function fillHoles(activities: Array<GitHubActivityDay>): Array<GitHubActivityDay> { const calendar = new Map<string, GitHubActivityDay>(activities.map((a) => [a.date, a])) const firstActivity = activities[0] as GitHubActivityDay const lastActivity = activities[activities.length - 1] as GitHubActivityDay return eachDayOfInterval({ start: parseISO(firstActivity.date), end: parseISO(lastActivity.date), }).map((day) => { const date = formatISO(day, { representation: 'date' }) if (calendar.has(date)) { return calendar.get(date) as GitHubActivityDay } return { date, count: 0, level: 0, } }) } function groupByWeeks( activities: Array<GitHubActivityDay>, weekStart: WeekdayIndex = 0, // 0 = Sunday ): Array<GitHubActivityWeek> { const normalizedActivities = fillHoles(activities) // Determine the first date of the calendar. If the first date is not the // passed weekday, the respective weekday one week earlier is used. const firstActivity = normalizedActivities[0] as GitHubActivityDay const firstDate = parseISO(firstActivity.date) const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1) // To correctly group activities by week, it is necessary to left-pad the list // because the first date might not be set start weekday. const paddedActivities = [ ...(Array(differenceInCalendarDays(firstDate, firstCalendarDat e)).fill( undefined, ) as Array<GitHubActivityDay>), ...normalizedActivities, ] const numberOfWeeks = Math.ceil(paddedActivities.length / 7) // Finally, group activities by week return [...Array(numberOfWeeks).keys()].map((weekIndex) => paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7), ) } function getMonthLabels( weeks: Array<GitHubActivityWeek>, monthNames: Array<string>, ): Array<GitHubActivityMonthLabel> { return weeks .reduce<Array<GitHubActivityMonthLabel>>((labels, week, weekIndex) => { const firstActivity = week.find((activity) => activity !== undefined) if (!firstActivity) { throw new Error(`Unexpected error: Week ${weekIndex + 1} is empty.`) } const month = monthNames[getMonth(parseISO(firstActivity.date))] if (!month) { const monthName = new Date(firstActivity.date).toLocaleString('en-US', { month: 'short', }) throw new Error(`Unexpected error: undefined month label for ${monthName}.`) } const prevLabel = labels[labels.length - 1] if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) { return [...labels, { weekIndex, label: month }] } return labels }, []) .filter(({ weekIndex }, index, labels) => { const minWeeks = 3 // Skip the first month label if there is not enough space to the next one. if (index === 0) { return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks } // Skip the last month label if there is not enough data in that month if (index === labels.length - 1) { return weeks.slice(weekIndex).length >= minWeeks } return true }) } const { username, year = 'last' } = Astro.props const data = await fetchData(username, year) const themeFromColorscheme: [string, string] = [ 'var(--theme-background)', 'var(--theme-accent)', ] const totalCount = year === 'last' ? data.total.lastYear : data.total[year] const maxLevel = 4 const blockMargin = 4 const labelMargin = 8 const blockRadius = 2 const blockSize = 12 const fontSize = 14 const hideColorLegend = false const hideMonthLabels = false const hideTotalCount = false const weekStart = 0 // 0 = Sunday, 1 = Monday, etc. const colorScale = calcColorScale(themeFromColorscheme, maxLevel + 1) const activities = data.contributions const firstActivity = activities[0] const activityYear = getYear(parseISO(firstActivity.date)) const weeks = groupByWeeks(activities, weekStart) const labels = { months: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ], totalCount: `{{count}} contributions in ${year === 'last' ? 'the last year' : '{{year}}'}`, legend: { less: 'Less', more: 'More', }, } const labelHeight = hideMonthLabels ? 0 : fontSize + labelMargin const width = weeks.length * (blockSize + blockMargin) - blockMargin const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin --- <article id="github-activity-calendar" class="w-max max-w-full flex flex-col gap-2 text-sm" > <div class="max-w-full overflow-x-auto pt-0.5" style={{ // Don't cover the calendar with the scrollbar. scrollbarGutter: 'stable', }} > <svg class="block visible" width={width} height={height} viewBox={`0 0 ${width} ${height}`} > { !hideMonthLabels && ( <g> {getMonthLabels(weeks, labels.months).map(({ label, weekIndex }) => ( <text x={(blockSize + blockMargin) * weekIndex} y={0} dominant-baseline="hanging" fill="currentColor" > {label} </text> ))} </g> ) } { weeks.map((week, weekIndex) => ( <g transform={`translate(${(blockSize + blockMargin) * weekIndex}, 0)`}> {week.map((activity, dayIndex) => { if (!activity) return null return ( <rect class="stroke-foreground/10" x={0} y={labelHeight + (blockSize + blockMargin) * dayIndex} width={blockSize} height={blockSize} rx={blockRadius} ry={blockRadius} fill={colorScale[activity.level]} data-date={activity.date} data-level={activity.level} /> ) })} </g> )) } </svg> </div> { !(hideTotalCount && hideColorLegend) && ( <footer class="flex flex-col sm:flex-row sm:justify-between gap-x-1 gap-y-2"> {!hideTotalCount && ( <div> {labels.totalCount ? labels.totalCount .replace('{{count}}', String(totalCount)) .replace('{{year}}', String(activityYear)) : `${totalCount} activities in ${activityYear}`} </div> )} {!hideColorLegend && ( <div class="flex items-center gap-[3px]"> <span class="mr-1.5">{labels.legend.less}</span> {range(maxLevel + 1).map((level) => ( <svg width={blockSize} height={blockSize}> <rect class="stroke-foreground/10" width={blockSize} height={blockSize} fill={colorScale[level]} rx={blockRadius} ry={blockRadius} /> </svg> ))} <span class="ml-1.5">{labels.legend.more}</span> </div> )} </footer> ) } </article>