From 162cae8d397ff2eaf40f9315d17ff776e0796d65 Mon Sep 17 00:00:00 2001 From: MuhammadMkm17 Date: Tue, 25 Nov 2025 15:03:21 +0530 Subject: [PATCH 1/6] Fix: Download image layout --- components/layouts/ClassicLayout.tsx | 36 +++++++------- index.css | 73 ++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 18 deletions(-) diff --git a/components/layouts/ClassicLayout.tsx b/components/layouts/ClassicLayout.tsx index 3be338f..6a0bddc 100644 --- a/components/layouts/ClassicLayout.tsx +++ b/components/layouts/ClassicLayout.tsx @@ -248,14 +248,14 @@ const ClassicLayout = forwardRef(({ userData, funMe {/* Mobile-first responsive padding */}
{/* Decorative corner elements - hidden on mobile */} -
-
+
+
{/* Header - Completely redesigned for mobile */}
{/* Mobile: Centered avatar with name below */} -
+
(({ userData, funMe
{/* Mobile: Year badge below profile */} -
+
2025
GitWrap
@@ -282,7 +282,7 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Desktop: Original horizontal layout */} -
+
(({ userData, funMe
{/* Mobile: Single column big number showcase */} -
+
{/* Hero Number - Total Contributions */}
(({ userData, funMe
{/* Desktop: Original layout */} -
+
{/* Left: Main Contribution Metric */}
(({ userData, funMe
{/* Mobile: Top Language Pills */} -
+

Top Languages

{userData.topLanguages.slice(0, 3).map((lang, idx) => ( @@ -508,7 +508,7 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Desktop: Original Language Cards */} -
+
{userData.topLanguages.map((lang, idx) => (
(({ userData, funMe
{/* Mobile: Compact Activity List */} -
+

Activity Highlights

@@ -569,7 +569,7 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Desktop: Original Activity Grid */} -
+
(({ userData, funMe
{/* Mobile: Centered layout */} -
+
πŸ†
Top Repository
{userData.topRepos[0].name}
@@ -656,7 +656,7 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Desktop: Original horizontal layout */} -
+
⭐ Top Repository
{userData.topRepos[0].name}
@@ -666,7 +666,7 @@ const ClassicLayout = forwardRef(({ userData, funMe {userData.topRepos[0].stargazers} stars
-
πŸ†
+
πŸ†
@@ -696,11 +696,11 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Mobile: Show simplified heatmap or message */} -
+
View on desktop for full contribution calendar
{/* Desktop: Full heatmap */} -
+
@@ -720,12 +720,12 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Mobile: Centered with icon above */} -
+

{funMessage}

{/* Desktop: Icon on left */} -
+

{funMessage}

diff --git a/index.css b/index.css index dcbdd8c..df8a53a 100644 --- a/index.css +++ b/index.css @@ -46,6 +46,79 @@ h1, h2, h3, h4, h5, h6, strong { display: none !important; } +.export-mode .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; +} + +.export-mode .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; +} + +.export-mode .sm\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; +} + +/* Force desktop typography scale while exporting so viewport width doesn't shrink fonts */ +.export-mode .sm\:text-xs, +.export-mode .md\:text-xs { + font-size: 0.75rem !important; + line-height: 1rem !important; +} + +.export-mode .sm\:text-sm, +.export-mode .md\:text-sm { + font-size: 0.875rem !important; + line-height: 1.25rem !important; +} + +.export-mode .sm\:text-base, +.export-mode .md\:text-base { + font-size: 1rem !important; + line-height: 1.5rem !important; +} + +.export-mode .sm\:text-lg, +.export-mode .md\:text-lg { + font-size: 1.125rem !important; + line-height: 1.75rem !important; +} + +.export-mode .sm\:text-xl, +.export-mode .md\:text-xl { + font-size: 1.25rem !important; + line-height: 1.75rem !important; +} + +.export-mode .sm\:text-2xl, +.export-mode .md\:text-2xl { + font-size: 1.5rem !important; + line-height: 2rem !important; +} + +.export-mode .sm\:text-3xl, +.export-mode .md\:text-3xl { + font-size: 1.875rem !important; + line-height: 2.25rem !important; +} + +.export-mode .sm\:text-4xl, +.export-mode .md\:text-4xl { + font-size: 2.25rem !important; + line-height: 2.5rem !important; +} + +.export-mode .sm\:text-5xl, +.export-mode .md\:text-5xl { + font-size: 3rem !important; + line-height: 1 !important; +} + +.export-mode .sm\:text-6xl, +.export-mode .md\:text-6xl { + font-size: 3.75rem !important; + line-height: 1 !important; +} + /* Utility to hide scrollbars without disabling scroll */ body.no-scrollbar { scrollbar-width: none; From 04c08af66d23b7ece3147995492c37e6d5428452 Mon Sep 17 00:00:00 2001 From: MuhammadMkm17 Date: Tue, 25 Nov 2025 15:07:20 +0530 Subject: [PATCH 2/6] Fix: download image layout --- pages/UserPage.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/pages/UserPage.tsx b/pages/UserPage.tsx index eb26003..78912c9 100644 --- a/pages/UserPage.tsx +++ b/pages/UserPage.tsx @@ -75,6 +75,12 @@ const UserPage: React.FC = () => { const targetWidth = 1080; const targetHeight = 1440; + const viewportMeta = document.querySelector('meta[name="viewport"]'); + const originalViewportContent = viewportMeta?.getAttribute('content') ?? null; + if (viewportMeta) { + viewportMeta.setAttribute('content', 'width=1080, initial-scale=1.0'); + } + // Attempt to fetch avatar and embed as data URL to avoid CORS/taint issues on iOS/Safari async function embedAvatarAsDataUrl(url?: string) { if (!url) return undefined; @@ -178,6 +184,7 @@ const UserPage: React.FC = () => { }); const link = document.createElement('a'); + const safeAspectRatio = aspectRatio.replace(':', 'x'); const safeUsername = username?.replace(/[^a-z0-9]/gi, '_').toLowerCase(); const safeTheme = activeTheme?.name?.replace(/[^a-z0-9]/gi, '_').toLowerCase() || 'theme'; link.download = `gitwrap-2025-${safeUsername}-${safeTheme}.png`; @@ -192,6 +199,13 @@ const UserPage: React.FC = () => { } finally { root.unmount(); document.body.removeChild(exportContainer); + if (viewportMeta) { + if (originalViewportContent !== null) { + viewportMeta.setAttribute('content', originalViewportContent); + } else { + viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0'); + } + } setIsDownloading(null); } }; From 161a565f574ca75c4ade93d4b7b8c9008e1b00bf Mon Sep 17 00:00:00 2001 From: MuhammadMkm17 Date: Tue, 25 Nov 2025 15:07:50 +0530 Subject: [PATCH 3/6] Fix: 14 inch laptops homepage bug --- components/Contributors.tsx | 4 ++-- pages/HomePage.tsx | 22 +++++++++++----------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/Contributors.tsx b/components/Contributors.tsx index 1abaf98..0103213 100644 --- a/components/Contributors.tsx +++ b/components/Contributors.tsx @@ -124,7 +124,7 @@ const Contributors: React.FC = () => {

Amazing minds behind GitWrap

-
+
{contributors.map((c, idx) => ( { {c.login} diff --git a/pages/HomePage.tsx b/pages/HomePage.tsx index 74c9d7a..613008d 100644 --- a/pages/HomePage.tsx +++ b/pages/HomePage.tsx @@ -19,12 +19,12 @@ const HomePage: React.FC = () => { }; return ( -
+
-
- +
+
-

+

GitWrap{' '} { 2025

-

+

Get your personalized GitHub year in review. See your coding journey, celebrate your achievements, and share your story.

-
+
{ setUsername(e.target.value); if (error) setError(''); }} - placeholder="Enter your GitHub username" - className="w-full pl-4 pr-32 py-4 text-lg bg-white/5 text-white border-2 border-transparent rounded-full focus:outline-none focus:border-purple-500 focus:bg-white/10 transition-all duration-300 placeholder-gray-400" + placeholder="Your GitHub username" + className="w-full pl-4 pr-22 md:pr-28 py-2.5 sm:py-2.5 md:py-3 text-[0.85rem] sm:text-[0.95rem] md:text-base bg-white/5 text-white border-2 border-transparent rounded-full focus:outline-none focus:border-purple-500 focus:bg-white/10 transition-all duration-300 placeholder-gray-400" aria-label="GitHub Username" /> @@ -65,11 +65,11 @@ const HomePage: React.FC = () => { {error &&

{error}

} -
+
-
+
Built with React, Tailwind CSS, and Gemini
From 6dacbd53c571955ff37490ded721a78f787d3477 Mon Sep 17 00:00:00 2001 From: MuhammadMkm17 Date: Tue, 25 Nov 2025 20:28:06 +0530 Subject: [PATCH 4/6] Fix: languages card size --- components/layouts/ClassicLayout.tsx | 90 +++++++++++++++++++--------- 1 file changed, 63 insertions(+), 27 deletions(-) diff --git a/components/layouts/ClassicLayout.tsx b/components/layouts/ClassicLayout.tsx index 6a0bddc..9eea655 100644 --- a/components/layouts/ClassicLayout.tsx +++ b/components/layouts/ClassicLayout.tsx @@ -95,6 +95,34 @@ const ClassicLayout = forwardRef(({ userData, funMe ) ); + const languageCardSizing = isExport + ? { + wrapper: 'p-3 py-4 sm:px-5 sm:py-6 rounded-2xl sm:rounded-[24px] min-h-[10.25rem] sm:min-h-[13rem]', + contentGap: 'gap-2', + headerSpacing: 'mb-3 sm:mb-3.5', + labelGap: 'gap-3 sm:gap-4', + dotSize: 'w-3.5 h-3.5 sm:w-4 sm:h-4', + nameSize: 'text-xl sm:text-xl', + badgePadding: 'px-2 sm:px-3 py-0.5 sm:py-0.75', + badgeText: 'text-sm sm:text-base', + percentSize: 'text-[2.5rem] sm:text-[3.5rem] md:text-[4.25rem] mb-2 sm:mb-2.5', + percentContainerSpacing: 'space-y-3 sm:space-y-3.5', + progressHeight: 'h-1.5 sm:h-2' + } + : { + wrapper: 'p-2 py-3 sm:px-5 sm:py-5 rounded-xl sm:rounded-2xl min-h-[6.5rem] sm:min-h-[8rem]', + contentGap: '', + headerSpacing: 'mb-2 sm:mb-3', + labelGap: 'gap-1.5 sm:gap-2', + dotSize: 'w-2.5 h-2.5 sm:w-3 sm:h-3', + nameSize: 'text-sm sm:text-sm', + badgePadding: 'px-1.5 sm:px-2 py-0.5', + badgeText: 'text-xs sm:text-sm', + percentSize: 'text-3xl sm:text-4xl md:text-5xl mb-2 sm:mb-3', + percentContainerSpacing: '', + progressHeight: 'h-1.5' + }; + const Heatmap: React.FC<{ weeks: { monthLabel: string; days: number[] }[] }> = ({ weeks }) => { const normalizedWeeks = weeks.length > 0 ? weeks @@ -402,30 +430,30 @@ const ClassicLayout = forwardRef(({ userData, funMe
Total Contributions
-
+
{userData.totalContributions.toLocaleString()}
- {userData.totalCommits.toLocaleString()} commits + {userData.totalCommits.toLocaleString()} commits
- {userData.totalPRs} PRs + {userData.totalPRs} PRs
- {userData.totalIssues} issues + {userData.totalIssues} issues
- {userData.totalPRReviews} reviews + {userData.totalPRReviews} reviews
{otherCount > 0 && (
- {otherCount} other + {otherCount} other
)}
@@ -508,30 +536,38 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Desktop: Original Language Cards */} -
+
{userData.topLanguages.map((lang, idx) => ( -
+
-
-
-
-
- {lang.name} +
+
+
+
+ {lang.name} +
+
+ #{idx + 1} +
+
+
+
{lang.percent.toFixed(1)}%
+
+
+
+
-
- #{idx + 1} -
-
-
{lang.percent.toFixed(1)}%
-
-
-
-
))}
From 573c06ca8d95c2b257a4bf82f4bf5bb38f331db0 Mon Sep 17 00:00:00 2001 From: MuhammadMkm17 Date: Tue, 25 Nov 2025 21:09:12 +0530 Subject: [PATCH 5/6] Fix: placeholder for top repo --- components/layouts/ClassicLayout.tsx | 80 +++++++++++++++++----------- 1 file changed, 50 insertions(+), 30 deletions(-) diff --git a/components/layouts/ClassicLayout.tsx b/components/layouts/ClassicLayout.tsx index 9eea655..7c5367f 100644 --- a/components/layouts/ClassicLayout.tsx +++ b/components/layouts/ClassicLayout.tsx @@ -94,6 +94,8 @@ const ClassicLayout = forwardRef(({ userData, funMe userData.totalCommits + userData.totalPRs + userData.totalIssues + userData.totalPRReviews ) ); + const topRepo = userData.topRepos?.[0]; + const hasTopRepo = Boolean(topRepo); const languageCardSizing = isExport ? { @@ -670,43 +672,61 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Top Repository Spotlight */} - {userData.topRepos[0] && ( -
-
-
- {/* Mobile: Centered layout */} -
-
πŸ†
-
Top Repository
-
{userData.topRepos[0].name}
-
- {userData.topRepos[0].contributions} commits - β€’ - {userData.topRepos[0].stargazers} stars -
+
+
+
+ {/* Mobile: Centered layout */} +
+
{hasTopRepo ? 'πŸ†' : 'πŸš€'}
+
+ {hasTopRepo ? 'Top Repository' : 'Future Top Repository'}
- - {/* Desktop: Original horizontal layout */} -
-
-
⭐ Top Repository
-
{userData.topRepos[0].name}
-
- {userData.topRepos[0].contributions} commits + {hasTopRepo ? ( + <> +
{topRepo!.name}
+
+ {topRepo!.contributions} commits β€’ - {userData.topRepos[0].stargazers} stars + {topRepo!.stargazers} stars
+ + ) : ( +

+ Launch something bold, rack up a few commits, and we'll spotlight it here. +

+ )} +
+ + {/* Desktop / Export layout */} +
+
+
+ {hasTopRepo ? '⭐ Top Repository' : '⭐ Waiting for Your Top Repo' }
-
πŸ†
+
+ {hasTopRepo ? topRepo!.name : 'Ship a repo worthy of the spotlight'} +
+ {hasTopRepo ? ( +
+ {topRepo!.contributions} commits + β€’ + {topRepo!.stargazers} stars +
+ ) : ( +

+ Kick off a fresh project or breathe life into an old oneβ€”once it gains momentum, it will take over this showcase automatically. +

+ )}
+
{hasTopRepo ? 'πŸ†' : 'πŸš€'}
- )} +
{/* Contribution Heatmap */}
Date: Tue, 25 Nov 2025 21:22:47 +0530 Subject: [PATCH 6/6] Fix: Top repo element in mobiles for exports --- components/layouts/ClassicLayout.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/components/layouts/ClassicLayout.tsx b/components/layouts/ClassicLayout.tsx index 7c5367f..76db60a 100644 --- a/components/layouts/ClassicLayout.tsx +++ b/components/layouts/ClassicLayout.tsx @@ -752,11 +752,18 @@ const ClassicLayout = forwardRef(({ userData, funMe
{/* Mobile: Show simplified heatmap or message */} -
-
View on desktop for full contribution calendar
-
- {/* Desktop: Full heatmap */} -
+ {!isExport && ( +
+
+ View on desktop for full contribution calendar +
+
+ )} + {/* Desktop / Export: Full heatmap */} +