Skip to content

Commit f3afb19

Browse files
author
Paul Armstrong
committed
refactor: use external css for contribution-graph
1 parent 16267a3 commit f3afb19

File tree

4 files changed

+71
-35
lines changed

4 files changed

+71
-35
lines changed

‎.astro/types.d.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -329,16 +329,16 @@ declare module 'astro:content' {
329329
collection: "blog",
330330
data: InferEntrySchema<"blog">
331331
} & { render(): Render[".mdx"] },
332-
"2023-07-25-software-development-periodization.mdx": {
333-
id: "2023-07-25-software-development-periodization.mdx",
334-
slug: "2023-07-25-software-development-periodization",
332+
"2023-08-14-the-line-between-writing-functions-yourself-and-using-open-source-modules.mdx": {
333+
id: "2023-08-14-the-line-between-writing-functions-yourself-and-using-open-source-modules.mdx",
334+
slug: "2023-08-14-the-line-between-writing-functions-yourself-and-using-open-source-modules",
335335
body: string,
336336
collection: "blog",
337337
data: InferEntrySchema<"blog">
338338
} & { render(): Render[".mdx"] },
339-
"2023-08-14-the-line-between-writing-functions-yourself-and-using-open-source-modules.mdx": {
340-
id: "2023-08-14-the-line-between-writing-functions-yourself-and-using-open-source-modules.mdx",
341-
slug: "2023-08-14-the-line-between-writing-functions-yourself-and-using-open-source-modules",
339+
"2023-08-22-software-development-periodization.mdx": {
340+
id: "2023-08-22-software-development-periodization.mdx",
341+
slug: "2023-08-22-software-development-periodization",
342342
body: string,
343343
collection: "blog",
344344
data: InferEntrySchema<"blog">

‎src/components/blog/ContributionGraph.tsx‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import clsx from 'clsx';
2+
import './contribution-graph.css';
23

34
interface Props {
45
caption?: string;
@@ -25,7 +26,7 @@ export function ContributionGraph(props: Props) {
2526
]);
2627
return memo;
2728
}, [] as Array<[number, boolean]>);
28-
const max = Math.max(...totals.map(([t]) => t));
29+
const max = Math.max(...totals.map(([t]) => t), 6);
2930

3031
const months = props.contributions[0]!.reduce((memo, [day]) => {
3132
if (day.getMonth() === memo[memo.length - 1]?.date.getMonth()) {
@@ -37,17 +38,17 @@ export function ContributionGraph(props: Props) {
3738
}, [] as Array<{ colSpan: number; date: Date }>);
3839

3940
return (
40-
<div class="not-prose overflow-scroll text-[10px] leading-none">
41-
<table class="mb-4 min-w-min max-w-full border-separate border-spacing-[2px]">
42-
{props.caption ? <caption class="text-black dark:text-white">{props.caption}</caption> : null}
41+
<div class="contribution-graph not-prose overflow-scroll text-[10px] leading-none">
42+
<table>
43+
{props.caption ? <caption>{props.caption}</caption> : null}
4344
<thead>
4445
<tr>
4546
<th></th>
4647
{months.map(({ colSpan, date }) =>
4748
colSpan < 3 ? (
4849
<th colSpan={colSpan} />
4950
) : (
50-
<th role="columnheader" class="text-left text-gray-600 dark:text-gray-400" colSpan={colSpan}>
51+
<th role="columnheader" colSpan={colSpan}>
5152
<span aria-hidden>{monthFormat(date)}</span>
5253
<span class="sr-only">{monthFormatFull(date)}</span>
5354
</th>
@@ -59,7 +60,7 @@ export function ContributionGraph(props: Props) {
5960
{props.contributions.map((dayOfWeek, w) => {
6061
return (
6162
<tr>
62-
<th role="rowheader" class="h-2 w-6 overflow-hidden p-0 pe-1 text-end text-gray-600 dark:text-gray-400">
63+
<th role="rowheader">
6364
{!(w % 2) || w === 7 ? null : (
6465
<>
6566
<span class="sr-only">{dayFullFormat(dayOfWeek[0]![0])}</span>
@@ -70,10 +71,7 @@ export function ContributionGraph(props: Props) {
7071
{dayOfWeek.map(([day, contributions, inRange]) => {
7172
const title = `${contributions} contributions on ${formatter(day)}`;
7273
return (
73-
<td
74-
class={clsx('h-2 w-2 rounded-[0.5px] sm:h-3 sm:w-3', opacity[contributions], getColor(inRange))}
75-
title={title}
76-
>
74+
<td class={clsx('day', opacity[contributions], getColor(inRange))} title={title}>
7775
<div class="h-2 w-2" />
7876
<span class="sr-only">{title}</span>
7977
</td>
@@ -84,36 +82,31 @@ export function ContributionGraph(props: Props) {
8482
})}
8583
</tbody>
8684
</table>
87-
<table class="mb-4 min-w-min max-w-full border-separate border-spacing-[2px]">
88-
<caption class="text-black dark:text-white">Number of contributions by week</caption>
85+
<table>
86+
<caption>Number of contributions by week</caption>
8987
<tr role="presentation">
90-
<td class="w-6 overflow-hidden p-0 pe-1" />
88+
<th role="rowheader" />
9189
{totals.map(([value, inRange]) => {
9290
return (
93-
<td class="w-2 rounded-[0.5px] p-0 sm:w-3">
94-
<div class="flex h-20 flex-col justify-end">
91+
<td class="total-bar-cell">
92+
<div class="total-bar-container">
9593
<div
9694
style={{ 'flex-basis': `${Math.ceil((value / max) * 100)}%` }}
97-
class={clsx(
98-
'w-2 shrink rounded-sm sm:w-3',
99-
opacity[Math.floor((value / max) * 10)],
100-
getColor(inRange)
101-
)}
95+
class={clsx('total-bar', opacity[Math.floor((value / max) * 10)], getColor(inRange))}
10296
/>
10397
</div>
10498
</td>
10599
);
106100
})}
107101
</tr>
108102
<tr>
109-
<td class="w-6 overflow-hidden pe-1">
103+
<th role="rowheader">
104+
<span aria-hidden>Tot.</span>
110105
<span class="sr-only">Total</span>
111-
</td>
106+
</th>
112107
{totals.map((value) => (
113-
<td class="p-0">
114-
<span class="h-4 shrink-0 text-[9px] leading-none text-black writing-vertical-lr dark:text-white">
115-
{value}
116-
</span>
108+
<td class="total-bar-cell">
109+
<span class="total">{value}</span>
117110
</td>
118111
))}
119112
</tr>
@@ -127,7 +120,7 @@ function weekInRange(week: number, range: [number, number] = [-1, 1000]) {
127120
}
128121

129122
function getColor(inRange: boolean) {
130-
return inRange ? 'bg-teal-500 p-0 dark:bg-teal-300' : 'bg-slate-300 p-0 dark:bg-slate-700';
123+
return inRange ? 'in-range' : '';
131124
}
132125
function randomInt(min: number, max: number) {
133126
return Math.floor(Math.random() * (max - min) + min);

‎src/components/blog/contribution-graph.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.contribution-graph table {
2+
@apply mb-4 min-w-min max-w-full border-separate border-spacing-[2px];
3+
}
4+
5+
.contribution-graph caption {
6+
@apply text-black dark:text-white;
7+
}
8+
9+
.contribution-graph th[role='columnheader'] {
10+
@apply text-left text-gray-600 dark:text-gray-400;
11+
}
12+
13+
.contribution-graph th[role='rowheader'] {
14+
@apply h-2 w-6 min-w-full overflow-hidden p-0 pe-1 text-end text-gray-600 dark:text-gray-400;
15+
}
16+
17+
.contribution-graph td {
18+
@apply p-0;
19+
}
20+
21+
.contribution-graph .day {
22+
@apply h-2 w-2 min-w-full min-h-full rounded-[0.5px] sm:h-3 sm:w-3 p-0 bg-slate-300 dark:bg-slate-700;
23+
}
24+
25+
.contribution-graph .in-range {
26+
@apply bg-teal-500 dark:bg-teal-300;
27+
}
28+
29+
.contribution-graph .total {
30+
@apply h-4 w-2 max-w-full shrink-0 text-[9px] leading-none text-black writing-vertical-lr dark:text-white;
31+
}
32+
33+
.contribution-graph .total-bar-cell {
34+
@apply w-2 max-w-full p-0 sm:w-3;
35+
}
36+
37+
.contribution-graph .total-bar-container {
38+
@apply flex h-20 flex-col justify-end;
39+
}
40+
41+
.contribution-graph .total-bar {
42+
@apply w-2 shrink rounded-t-sm sm:w-3;
43+
}

‎src/content/blog/2023-07-25-software-development-periodization.mdx‎ renamed to ‎src/content/blog/2023-08-22-software-development-periodization.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ heroImage:
99
src: /img/blog/contribution.png
1010
width: 2400
1111
height: 800
12-
pubDate: 2023-08-08
12+
pubDate: 2023-08-22
1313
---
1414

1515
import { ContributionGraph, getContributions } from '../../components/blog';
@@ -186,7 +186,7 @@ If you’re still thinking that measuring output as performance would be helpful
186186

187187
- **Never stack rank people against each other.**
188188

189-
Everyone is at different parts of their career and everyone will be slightly different. Instead of comparing one person against another, we should use as much historical context for an individual as possible. <a id="periodization-end" class="h-1 inline-block" />
189+
Everyone is at different parts of their career and everyone will be slightly different. Instead of comparing one person against another, we should use as much historical context for an individual as possible. <a id="periodization-end" class="inline-block h-1" />
190190

191191
- **Do not assume low output is the employees fault.**
192192

0 commit comments

Comments
 (0)