Skip to content

feat(heatmap): add shared 365-day contribution calendar #2839

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

Open
Honey-pg wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(heatmap): add shared 365-day contribution calendar #2839

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 README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,14 +410,14 @@ These features are live in the current version.
| RSS feed | Atom feed at `/u/[username]/feed.xml` |
| Year Wrapped | Animated annual coding journey recap |
| Real-time dashboard | Live Supabase Realtime sync with polling fallback |
| Contribution heatmap calendar | GitHub-style 365-day grid on dashboard and public profiles ([#18](https://github.com/Priyanshu-byte-coder/devtrack/issues/18)) |

### In Progress / Planned

Want to contribute? Pick an item below and open an issue or start a PR.

| Feature | Difficulty | Issue |
|---|---|---|
| Contribution heatmap calendar | Intermediate | [#18](https://github.com/Priyanshu-byte-coder/devtrack/issues/18) |
| Chart type toggle (bar / line) | Intermediate | [#17](https://github.com/Priyanshu-byte-coder/devtrack/issues/17) |
| Language breakdown widget | Intermediate | [#32](https://github.com/Priyanshu-byte-coder/devtrack/issues/32) |
| Activity feed | Intermediate | [#33](https://github.com/Priyanshu-byte-coder/devtrack/issues/33) |
Expand Down
61 changes: 2 additions & 59 deletions src/app/u/[username]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import ShareProfileSection from "@/components/ShareProfileSection";
import SponsorBadge from "@/components/SponsorBadge";
import PinnedReposWidget from "@/components/PinnedReposWidget";
import CopyLinkButton from "@/components/CopyLinkButton";
import PublicContributionHeatmap from "@/components/public/PublicContributionHeatmap";
import { Moon, Sun } from "lucide-react";
import { authOptions } from "@/lib/auth";
import { getUserByGithubId } from "@/lib/supabase";
Expand Down Expand Up @@ -367,7 +368,7 @@ export default async function PublicProfilePage({
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{showContributions && (
<div className="lg:col-span-2">
<PublicContributionGraph data={profile.contributions} />
<PublicContributionHeatmap data={profile.contributions} />
</div>
)}
{showStreak && (
Expand Down Expand Up @@ -446,64 +447,6 @@ export default async function PublicProfilePage({
);
}

function PublicContributionGraph({
data: contributionData,
}: {
data: {
days: number;
total: number;
data: Record<string, number>;
};
}) {
const data = Object.entries(contributionData.data ?? {})
.sort(([a], [b]) => a.localeCompare(b))
.map(([day, commits]) => ({ day, commits }));

return (
<div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-[var(--shadow-soft)]">
<div className="flex flex-wrap items-center justify-between mb-4 gap-2">
<div>
<h2 className="text-lg font-semibold text-[var(--card-foreground)]">
Commit Activity ({contributionData.days} days)
</h2>
<p className="text-sm text-[var(--muted-foreground)] mt-1">
Total commits: {contributionData.total}
</p>
</div>
</div>

{data.length === 0 ? (
<p className="text-sm text-[var(--muted-foreground)]">
No commit data available.
</p>
) : (
<div className="space-y-2">
<div className="text-sm text-[var(--muted-foreground)]">
{data.length} active days
</div>
<div className="grid grid-cols-7 gap-1">
{data.map((day) => (
<div
key={day.day}
className="aspect-square rounded-sm"
style={{
backgroundColor:
day.commits > 0 ? "var(--accent)" : "var(--control)",
opacity:
day.commits > 0
? Math.max(0.2, Math.min(day.commits / 10, 1))
: 1,
}}
title={`${day.day}: ${day.commits} commits`}
/>
))}
</div>
</div>
)}
</div>
);
}

function PublicStreakTracker({ streak }: { streak: any }) {
const stats = [
{
Expand Down
Loading
Loading