Skip to content

Commit 09ef082

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #289 from Richajaishwal0/theme/footer-bugs
Fixed bugs for theme/footer and warnings related firebase
2 parents e40be7a + e8670d8 commit 09ef082

File tree

10 files changed

+393
-41
lines changed

10 files changed

+393
-41
lines changed

‎.env.example

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# GitHub API Configuration (Optional)
2+
# To avoid rate limits, you can add a GitHub Personal Access Token
3+
# Create one at: https://github.com/settings/tokens
4+
# No special permissions needed for public repositories
5+
GITHUB_TOKEN=your_github_token_here
6+
7+
# Firebase Configuration (if needed)
8+
# FIREBASE_API_KEY=your_firebase_api_key
9+
# FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
10+
# FIREBASE_PROJECT_ID=your_firebase_project_id
11+
12+
# Analytics Configuration
13+
# GOOGLE_ANALYTICS_ID=your_google_analytics_id
14+
# VERCEL_ANALYTICS_ID=your_vercel_analytics_id

‎docusaurus.config.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,12 @@ const config: Config = {
2020
onBrokenLinks: "throw",
2121
onBrokenMarkdownLinks: "warn",
2222

23-
// Google Analytics
23+
// Google Analytics and Theme Scripts
2424
scripts: [
25+
{
26+
src: '/theme-init.js',
27+
async: false, // Load synchronously to prevent flash
28+
},
2529
{
2630
src: 'https://www.googletagmanager.com/gtag/js?id=G-W02Z2VJYCR',
2731
async: true,
@@ -69,6 +73,11 @@ const config: Config = {
6973

7074
themeConfig: {
7175
image: "img/docusaurus-social-card.jpg",
76+
colorMode: {
77+
defaultMode: 'light',
78+
disableSwitch: false,
79+
respectPrefersColorScheme: false,
80+
},
7281
navbar: {
7382
title: "Recode Hive",
7483
logo: {

‎src/components/FloatingContributors/index.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,18 @@ const FloatingContributors: React.FC = () => {
2929
const fetchContributors = async () => {
3030
try {
3131
setLoading(true);
32-
32+
3333
// Fetch repositories from RecodeHive organization
3434
const reposResponse = await fetch('https://api.github.com/orgs/recodehive/repos?type=public&per_page=10&sort=updated');
35+
36+
// Check if the response is ok
37+
if (!reposResponse.ok) {
38+
console.warn(`GitHub API rate limit or error: ${reposResponse.status}`);
39+
throw new Error(`GitHub API error: ${reposResponse.status}`);
40+
}
41+
3542
const repos = await reposResponse.json();
36-
43+
3744
if (!Array.isArray(repos)) {
3845
throw new Error('Invalid repos response');
3946
}
@@ -90,8 +97,9 @@ const FloatingContributors: React.FC = () => {
9097
setLoading(false);
9198

9299
} catch (error) {
93-
console.error('Error fetching contributors:', error);
94-
100+
// Silently handle GitHub API errors (rate limits, etc.)
101+
console.warn('Using fallback contributor data due to GitHub API limitations');
102+
95103
// Fallback demo data
96104
const demoContributors: Contributor[] = [
97105
{

‎src/css/custom.css

Lines changed: 168 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,68 @@
66

77
/* You can override the default Infima variables here. */
88
@import "tailwindcss";
9+
10+
/* ===== INSTANT THEME TRANSITIONS ===== */
11+
html {
12+
transition: background-color 0.15s ease, color 0.15s ease !important;
13+
}
14+
15+
body {
16+
transition: background-color 0.15s ease, color 0.15s ease !important;
17+
}
18+
19+
/* Instant transitions for theme-sensitive elements */
20+
*,
21+
*::before,
22+
*::after {
23+
transition:
24+
background-color 0.15s ease,
25+
color 0.15s ease,
26+
border-color 0.15s ease,
27+
box-shadow 0.15s ease !important;
28+
}
29+
30+
/* Very fast transitions for interactive elements */
31+
button,
32+
.button,
33+
a,
34+
input,
35+
select,
36+
textarea {
37+
transition:
38+
all 0.1s ease !important;
39+
}
40+
41+
/* Instant navbar theme change */
42+
.navbar,
43+
.navbar__inner,
44+
.navbar__brand,
45+
.navbar__item,
46+
.navbar__link {
47+
transition:
48+
background-color 0.1s ease,
49+
color 0.1s ease !important;
50+
}
51+
52+
/* Force instant theme updates for key elements */
53+
[data-theme='light'] .navbar {
54+
background-color: #ffffff !important;
55+
color: #1a202c !important;
56+
}
57+
58+
[data-theme='dark'] .navbar {
59+
background-color: #121212 !important;
60+
color: #ffffff !important;
61+
}
62+
63+
[data-theme='light'] .navbar__link {
64+
color: #1a202c !important;
65+
}
66+
67+
[data-theme='dark'] .navbar__link {
68+
color: #ffffff !important;
69+
}
70+
971
:root {
1072
--ifm-color-primary: #2e8555;
1173
--ifm-color-primary-dark: #29784c;
@@ -18,6 +80,10 @@
1880
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
1981
--ifm-color-primary-text: white;
2082
--ifm-color-secondary-text: #edf2f7;
83+
84+
/* Light theme defaults */
85+
--ifm-background-color: #ffffff;
86+
--ifm-font-color-base: #000000;
2187
}
2288

2389
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -33,6 +99,10 @@
3399
--ifm-color-primary-text: #ffffff;
34100
--ifm-color-secondary-text: #edf2f7;
35101

102+
/* Dark theme background and text */
103+
--ifm-background-color: #121212;
104+
--ifm-font-color-base: #ffffff;
105+
36106
/* Standardized Dark Theme Colors */
37107
--dark-bg-primary: #121212;
38108
--dark-bg-secondary: #1a1a1a;
@@ -181,18 +251,30 @@
181251
color: transparent;
182252
}
183253

184-
/* Light mode background and text fix - EXCLUDE community page */
185-
[data-theme='light'] body:not(:has(.community-page)) {
186-
--ifm-background-color: #ffffff; /* white background */
187-
--ifm-font-color-base: #000000; /* black text */
188-
background-color: var(--ifm-background-color);
189-
color: var(--ifm-font-color-base);
254+
/* ===== THEME OVERRIDES - CLEAN APPROACH ===== */
255+
256+
/* Light theme - Clean background */
257+
[data-theme='light'] {
258+
--ifm-background-color: #ffffff;
259+
--ifm-font-color-base: #1a202c;
260+
--ifm-card-background-color: #ffffff;
261+
}
262+
263+
[data-theme='light'] body {
264+
background-color: var(--ifm-background-color) !important;
265+
color: var(--ifm-font-color-base) !important;
190266
}
191267

192-
/* Dark mode overrides - EXCLUDE community page */
193-
[data-theme='dark'] body:not(:has(.community-page)) {
194-
background-color: var(--dark-bg-primary);
195-
color: var(--dark-text-primary);
268+
/* Dark theme - Clean background */
269+
[data-theme='dark'] {
270+
--ifm-background-color: #121212;
271+
--ifm-font-color-base: #ffffff;
272+
--ifm-card-background-color: #1a1a1a;
273+
}
274+
275+
[data-theme='dark'] body {
276+
background-color: var(--ifm-background-color) !important;
277+
color: var(--ifm-font-color-base) !important;
196278
}
197279

198280
/* Global dark theme utilities */
@@ -253,17 +335,34 @@
253335
color: var(--dark-text-muted) !important;
254336
}
255337

256-
/* Button dark theme */
257-
[data-theme='dark'] .button,
258-
[data-theme='dark'] button {
259-
background-color: var(--dark-bg-tertiary);
260-
color: var(--dark-text-primary);
261-
border-color: var(--dark-border);
338+
/* ===== CLEAN BUTTON FIXES ===== */
339+
340+
/* Remove conflicting button styles - let Docusaurus handle it naturally */
341+
[data-theme='light'] .button--outline,
342+
[data-theme='light'] .button--secondary {
343+
background-color: transparent !important;
344+
color: var(--ifm-font-color-base) !important;
345+
border: 1px solid var(--ifm-color-emphasis-300) !important;
346+
}
347+
348+
[data-theme='dark'] .button--outline,
349+
[data-theme='dark'] .button--secondary {
350+
background-color: transparent !important;
351+
color: var(--ifm-font-color-base) !important;
352+
border: 1px solid var(--ifm-color-emphasis-300) !important;
262353
}
263354

264-
[data-theme='dark'] .button:hover,
265-
[data-theme='dark'] button:hover {
266-
background-color: var(--dark-card-hover-bg);
355+
/* ===== MINIMAL THEME FIXES ===== */
356+
357+
/* Only fix specific problematic elements */
358+
[data-theme='light'] .card {
359+
background-color: var(--ifm-card-background-color) !important;
360+
color: var(--ifm-font-color-base) !important;
361+
}
362+
363+
[data-theme='dark'] .card {
364+
background-color: var(--ifm-card-background-color) !important;
365+
color: var(--ifm-font-color-base) !important;
267366
}
268367

269368
/* Card components dark theme */
@@ -812,3 +911,53 @@ html {
812911
color: inherit;
813912
}
814913

914+
/* ===== STEP 3: BASIC FOOTER PROTECTION ===== */
915+
/* Prevent global dark theme container rule from affecting footer */
916+
[data-theme='dark'] .enhanced-footer .container {
917+
background-color: transparent !important;
918+
}
919+
920+
/* ===== STEP 4: FOOTER BACKGROUND PROTECTION ===== */
921+
/* Ensure footer maintains its gradient background in dark mode */
922+
[data-theme='dark'] .enhanced-footer {
923+
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
924+
color: #e2e8f0 !important;
925+
}
926+
927+
/* ===== STEP 5: FOOTER SECTION PROTECTION ===== */
928+
/* Protect specific footer sections from global overrides */
929+
[data-theme='dark'] .enhanced-footer .footer-links-section {
930+
background: rgba(0, 0, 0, 0.15) !important;
931+
}
932+
933+
[data-theme='dark'] .enhanced-footer .footer-bottom {
934+
background: rgba(0, 0, 0, 0.2) !important;
935+
}
936+
937+
/* ===== STEP 6: MAXIMUM SPECIFICITY PROTECTION ===== */
938+
/* Override the exact problematic global rule with same specificity */
939+
[data-theme='dark'] body:not(:has(.community-page)) .enhanced-footer .container {
940+
background-color: transparent !important;
941+
}
942+
943+
[data-theme='dark'] body:not(:has(.community-page)) .enhanced-footer {
944+
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
945+
color: #e2e8f0 !important;
946+
}
947+
948+
/* ===== STEP 7: COMPREHENSIVE ELEMENT PROTECTION ===== */
949+
/* Protect all footer elements from any global overrides */
950+
[data-theme='dark'] .enhanced-footer *,
951+
[data-theme='dark'] .enhanced-footer .row,
952+
[data-theme='dark'] .enhanced-footer .col,
953+
[data-theme='dark'] .enhanced-footer div,
954+
[data-theme='dark'] .enhanced-footer section {
955+
background-color: transparent !important;
956+
}
957+
958+
/* Ensure text colors inherit properly */
959+
[data-theme='dark'] .enhanced-footer,
960+
[data-theme='dark'] .enhanced-footer * {
961+
color: inherit !important;
962+
}
963+

‎src/pages/dashboard/index.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,15 @@ const DashboardContent: React.FC = () => {
9999

100100
try {
101101
console.log('🔄 Fetching leaderboard data from RecodeHive GitHub API...');
102-
102+
103103
// Fetch all repositories from RecodeHive organization
104104
const reposResponse = await fetch('https://api.github.com/orgs/recodehive/repos?type=public&per_page=100');
105-
105+
106106
if (!reposResponse.ok) {
107+
if (reposResponse.status === 403) {
108+
console.warn('GitHub API rate limit exceeded. Using fallback data.');
109+
throw new Error('GitHub API rate limit exceeded');
110+
}
107111
throw new Error(`GitHub API request failed: ${reposResponse.status}`);
108112
}
109113

@@ -185,8 +189,8 @@ const DashboardContent: React.FC = () => {
185189
setLeaderboardData(transformedData);
186190

187191
} catch (error) {
188-
console.error('❌ Error fetching RecodeHive contributors data:', error);
189-
setLeaderboardError(error.message);
192+
console.warn('Using fallback leaderboard data due to GitHub API limitations');
193+
setLeaderboardError('GitHub API rate limit reached. Showing demo data.');
190194

191195
// Fallback demo data with similar structure
192196
console.log('📝 Loading demo data as fallback...');

‎src/services/githubService.ts

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,9 @@ class GitHubService {
6161
});
6262

6363
if (response.status === 403) {
64-
// Rate limited, wait a bit
65-
const resetTime = response.headers.get('X-RateLimit-Reset');
66-
if (resetTime) {
67-
const waitTime = Math.max(0, parseInt(resetTime) * 1000 - Date.now());
68-
if (waitTime < 60000) { // Only wait if less than 1 minute
69-
await new Promise(resolve => setTimeout(resolve, Math.min(waitTime, 5000)));
70-
continue;
71-
}
72-
}
64+
// Rate limited - don't retry, just throw error
65+
console.warn('GitHub API rate limit exceeded');
66+
throw new Error('GitHub API rate limit exceeded');
7367
}
7468

7569
if (!response.ok) {
@@ -152,6 +146,10 @@ class GitHubService {
152146
);
153147

154148
if (!response.ok) {
149+
if (response.status === 403) {
150+
console.warn('GitHub API rate limit exceeded while fetching repositories');
151+
throw new Error('GitHub API rate limit exceeded');
152+
}
155153
throw new Error(`Failed to fetch repositories: ${response.status}`);
156154
}
157155

0 commit comments

Comments
 (0)