dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perfected the forgejo heatmap, made it prettier and fully visible on all devices

Browse source
This commit is contained in:
dvorakmortonxd 2026-05-15 12:59:10 +02:00
commit 74e5011b71
3 changed files with 27 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/api/heatmap/route.ts
View file

@ -1,19 +1,5 @@
import { NextResponse } from "next/server";
export async function GET() { export async function GET() {
try { const res = await fetch("https://git.dvorakmortonxd.dev/api/v1/users/dvorakmortonxd/heatmap");
const res = await fetch("https://git.dvorakmortonxd.dev/api/v1/users/dvorakmortonxd/heatmap", {
next: { revalidate: 3600 }, // Cache for 1 hour
});
if (!res.ok) {
return NextResponse.json({ error: "Failed to fetch heatmap" }, { status: res.status });
}
const data = await res.json(); const data = await res.json();
return NextResponse.json(data); return Response.json(data);
} catch (err) {
return NextResponse.json({ error: "Internal server error" }, { status: 500 });
}
} }

10
src/app/components/ContributionHeatmap.tsx
View file

@ -109,11 +109,11 @@ export default function ContributionHeatmap() {
</div> </div>
<div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "4px", fontSize: "0.75rem", color: "var(--gray)" }}> <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "4px", fontSize: "0.75rem", color: "var(--gray)" }}>
<span>Less</span> <span>Less</span>
<div className="heatmap-cell" data-level="0"></div> <div className="heatmap-legend-cell" data-level="0"></div>
<div className="heatmap-cell" data-level="1"></div> <div className="heatmap-legend-cell" data-level="1"></div>
<div className="heatmap-cell" data-level="2"></div> <div className="heatmap-legend-cell" data-level="2"></div>
<div className="heatmap-cell" data-level="3"></div> <div className="heatmap-legend-cell" data-level="3"></div>
<div className="heatmap-cell" data-level="4"></div> <div className="heatmap-legend-cell" data-level="4"></div>
<span>More</span> <span>More</span>
</div> </div>
</div> </div>

27
src/app/page.css
View file

@ -1009,24 +1009,24 @@ body {
============================================ */ ============================================ */
.heatmap-container { .heatmap-container {
display: flex; display: flex;
overflow-x: auto;
gap: 4px;
justify-content: space-between;
width: 100%; width: 100%;
scrollbar-width: thin; overflow-x: auto;
gap: 2px;
scrollbar-width: none;
scrollbar-color: var(--gray) transparent; scrollbar-color: var(--gray) transparent;
} }
.heatmap-week { .heatmap-week {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; flex: 1;
gap: 2px;
} }
.heatmap-cell { .heatmap-cell {
width: 12px; width: 100%;
height: 12px; aspect-ratio: 1;
border-radius: 0; /* squares not rounded */ border-radius: 2px;
background-color: var(--bg-hard); background-color: var(--bg-hard);
transition: transform 0.1s ease; transition: transform 0.1s ease;
} }
@ -1042,5 +1042,16 @@ body {
.heatmap-cell[data-level="3"] { background-color: rgba(184, 187, 38, 0.8); } .heatmap-cell[data-level="3"] { background-color: rgba(184, 187, 38, 0.8); }
.heatmap-cell[data-level="4"] { background-color: rgba(184, 187, 38, 1); } .heatmap-cell[data-level="4"] { background-color: rgba(184, 187, 38, 1); }
.heatmap-legend-cell {
width: 11px;
height: 11px;
border-radius: 2px;
background-color: var(--bg-hard);
flex-shrink: 0;
}
.heatmap-legend-cell[data-level="1"] { background-color: rgba(184, 187, 38, 0.4); }
.heatmap-legend-cell[data-level="2"] { background-color: rgba(184, 187, 38, 0.6); }
.heatmap-legend-cell[data-level="3"] { background-color: rgba(184, 187, 38, 0.8); }
.heatmap-legend-cell[data-level="4"] { background-color: rgba(184, 187, 38, 1); }