diff --git a/src/components/ActivityHeatmap.tsx b/src/components/ActivityHeatmap.tsx new file mode 100644 index 0000000..e0672a7 --- /dev/null +++ b/src/components/ActivityHeatmap.tsx @@ -0,0 +1,105 @@ +import { Component, For, createMemo } from "solid-js"; + +interface ContributionDay { + date: string; + count: number; +} + +export const ActivityHeatmap: Component<{ + contributions: ContributionDay[] | undefined; + title: string; +}> = (props) => { + // Generate last 12 weeks of days + const weeks = createMemo(() => { + const today = new Date(); + const weeksData: { date: string; count: number }[][] = []; + + // Start from 12 weeks ago + const startDate = new Date(today); + startDate.setDate(startDate.getDate() - 84); // 12 weeks + + // Create a map for quick lookup + const contributionMap = new Map(); + props.contributions?.forEach((c) => { + contributionMap.set(c.date, c.count); + }); + + // Generate weeks + for (let week = 0; week < 12; week++) { + const weekData: { date: string; count: number }[] = []; + + for (let day = 0; day < 7; day++) { + const date = new Date(startDate); + date.setDate(startDate.getDate() + week * 7 + day); + + const dateStr = date.toISOString().split("T")[0]; + const count = contributionMap.get(dateStr) || 0; + + weekData.push({ date: dateStr, count }); + } + + weeksData.push(weekData); + } + + return weeksData; + }); + + const getColor = (count: number) => { + if (count === 0) return "var(--color-surface0)"; + if (count <= 2) return "var(--color-green)"; + if (count <= 5) return "var(--color-teal)"; + if (count <= 10) return "var(--color-blue)"; + return "var(--color-mauve)"; + }; + + const getOpacity = (count: number) => { + if (count === 0) return 0.3; + if (count <= 2) return 0.4; + if (count <= 5) return 0.6; + if (count <= 10) return 0.8; + return 1; + }; + + return ( +
+

{props.title}

+
+ + {(week) => ( +
+ + {(day) => ( +
+ )} + +
+ )} +
+
+
+ Less +
+ + {(count) => ( +
+ )} + +
+ More +
+
+ ); +}; diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx index 8038e4f..e8bdbe5 100644 --- a/src/components/Bars.tsx +++ b/src/components/Bars.tsx @@ -8,11 +8,25 @@ import GitHub from "./icons/GitHub"; import LinkedIn from "./icons/LinkedIn"; import MoonIcon from "./icons/MoonIcon"; import SunIcon from "./icons/SunIcon"; +import { RecentCommits } from "./RecentCommits"; +import { ActivityHeatmap } from "./ActivityHeatmap"; export function RightBarContent() { const [isDark, setIsDark] = createSignal(false); + const [githubCommits, setGithubCommits] = createSignal( + undefined + ); + const [giteaCommits, setGiteaCommits] = createSignal( + undefined + ); + const [githubActivity, setGithubActivity] = createSignal( + undefined + ); + const [giteaActivity, setGiteaActivity] = createSignal( + undefined + ); - onMount(() => { + onMount(async () => { const prefersDark = window.matchMedia( "(prefers-color-scheme: dark)" ).matches; @@ -26,6 +40,44 @@ export function RightBarContent() { document.documentElement.classList.add("light"); document.documentElement.classList.remove("dark"); } + + // Fetch GitHub activity + try { + const commits = await api.gitActivity.getGitHubCommits.query({ + limit: 3 + }); + setGithubCommits(commits as any[]); + } catch (error) { + console.error("Failed to fetch GitHub commits:", error); + setGithubCommits([]); + } + + try { + const activity = await api.gitActivity.getGitHubActivity.query(); + setGithubActivity(activity as any[]); + } catch (error) { + console.error("Failed to fetch GitHub activity:", error); + setGithubActivity([]); + } + + // Fetch Gitea activity + try { + const commits = await api.gitActivity.getGiteaCommits.query({ + limit: 3 + }); + setGiteaCommits(commits as any[]); + } catch (error) { + console.error("Failed to fetch Gitea commits:", error); + setGiteaCommits([]); + } + + try { + const activity = await api.gitActivity.getGiteaActivity.query(); + setGiteaActivity(activity as any[]); + } catch (error) { + console.error("Failed to fetch Gitea activity:", error); + setGiteaActivity([]); + } }); const toggleDarkMode = () => { @@ -42,8 +94,8 @@ export function RightBarContent() { }; return ( -
- +
+
  • Contact Me @@ -95,8 +147,31 @@ export function RightBarContent() {
+ + {/* Git Activity Section */} +
+ + + + +
+ {/* Dark Mode Toggle */} -
+