Skip to content

Commit 088e7f4

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #493 from iitzIrFan/feature/liveactivity
Feature/liveactivity
2 parents f996437 + 69c06be commit 088e7f4

File tree

4 files changed

+693
-203
lines changed

4 files changed

+693
-203
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"canvas-confetti": "^1.9.3",
3737
"class-variance-authority": "^0.7.1",
3838
"clsx": "^2.1.1",
39+
"date-fns": "^4.1.0",
3940
"dotenv": "^16.5.0",
4041
"embla-carousel-autoplay": "^8.6.0",
4142
"embla-carousel-react": "^8.6.0",

‎src/components/FloatingContributors/FloatingContributors.css‎

Lines changed: 164 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,113 @@
4343
min-width: 400px;
4444
}
4545

46+
/* New activity feed styles */
47+
.contributors-activities {
48+
display: flex;
49+
flex-direction: column;
50+
gap: 8px;
51+
margin-top: 12px;
52+
max-height: 240px;
53+
overflow-y: auto;
54+
scrollbar-width: thin;
55+
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
56+
}
57+
58+
.contributors-activities::-webkit-scrollbar {
59+
width: 4px;
60+
}
61+
62+
.contributors-activities::-webkit-scrollbar-track {
63+
background: transparent;
64+
}
65+
66+
.contributors-activities::-webkit-scrollbar-thumb {
67+
background-color: rgba(255, 255, 255, 0.2);
68+
border-radius: 4px;
69+
}
70+
71+
.contributor-activity-item {
72+
display: flex;
73+
align-items: center;
74+
padding: 8px 10px;
75+
border-radius: 10px;
76+
background-color: rgba(255, 255, 255, 0.08);
77+
transition: background-color 0.2s ease, transform 0.2s ease;
78+
cursor: pointer; /* Add pointer cursor to indicate clickable */
79+
}
80+
81+
.contributor-activity-item:hover {
82+
background-color: rgba(255, 255, 255, 0.15);
83+
transform: translateY(-2px); /* Slight lift effect on hover */
84+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
85+
}
86+
87+
.contributor-activity-item:focus {
88+
outline: 2px solid rgba(102, 126, 234, 0.6);
89+
outline-offset: 2px;
90+
}
91+
92+
.contributor-activity-item:active {
93+
transform: translateY(0);
94+
background-color: rgba(255, 255, 255, 0.1);
95+
}
96+
97+
.activity-item-avatar {
98+
margin-right: 12px;
99+
position: relative;
100+
}
101+
102+
.activity-item-img {
103+
width: 32px;
104+
height: 32px;
105+
border-radius: 50%;
106+
border: 2px solid rgba(255, 255, 255, 0.2);
107+
}
108+
109+
.activity-item-content {
110+
flex: 1;
111+
min-width: 0;
112+
}
113+
114+
.activity-item-user {
115+
display: flex;
116+
justify-content: space-between;
117+
align-items: center;
118+
}
119+
120+
.activity-item-username {
121+
font-weight: 600;
122+
font-size: 0.9rem;
123+
white-space: nowrap;
124+
overflow: hidden;
125+
text-overflow: ellipsis;
126+
color: rgba(255, 255, 255, 0.95);
127+
}
128+
129+
.activity-item-badge {
130+
background-color: rgba(59, 130, 246, 0.2);
131+
padding: 2px 6px;
132+
border-radius: 12px;
133+
font-size: 0.8rem;
134+
color: rgba(255, 255, 255, 0.9);
135+
}
136+
137+
.activity-item-action {
138+
font-size: 0.8rem;
139+
color: rgba(255, 255, 255, 0.7);
140+
margin-top: 2px;
141+
}
142+
143+
.activities-more {
144+
text-align: center;
145+
padding: 8px;
146+
font-size: 0.85rem;
147+
color: rgba(255, 255, 255, 0.7);
148+
background-color: rgba(255, 255, 255, 0.05);
149+
border-radius: 8px;
150+
margin-top: 4px;
151+
}
152+
46153
/* Header embedded version - larger size */
47154
.floating-contributors-container.header-embedded .floating-contributors-card {
48155
min-width: 450px;
@@ -175,12 +282,43 @@
175282
border: 1px solid rgba(255, 255, 255, 0.1);
176283
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
177284
cursor: pointer;
285+
position: relative;
286+
overflow: hidden;
178287
}
179288

180289
.floating-contributors-activity:hover {
181290
background: rgba(255, 255, 255, 0.08);
182291
border-color: rgba(102, 126, 234, 0.3);
292+
transform: translateY(-3px);
293+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
294+
}
295+
296+
.floating-contributors-activity:focus {
297+
outline: 2px solid rgba(102, 126, 234, 0.6);
298+
outline-offset: 2px;
299+
}
300+
301+
.floating-contributors-activity:active {
183302
transform: translateY(-1px);
303+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
304+
}
305+
306+
/* Subtle link indicator */
307+
.floating-contributors-activity::after {
308+
content: "→";
309+
position: absolute;
310+
right: 15px;
311+
top: 50%;
312+
transform: translateY(-50%) translateX(20px);
313+
opacity: 0;
314+
font-size: 16px;
315+
color: rgba(102, 126, 234, 0.8);
316+
transition: all 0.3s ease;
317+
}
318+
319+
.floating-contributors-activity:hover::after {
320+
transform: translateY(-50%) translateX(0);
321+
opacity: 1;
184322
}
185323

186324
[data-theme='light'] .floating-contributors-activity {
@@ -369,6 +507,30 @@
369507
transform: scale(1.1);
370508
}
371509

510+
.contributor-link {
511+
position: relative;
512+
display: block;
513+
transition: all 0.3s ease;
514+
}
515+
516+
.contributor-link::after {
517+
content: '';
518+
position: absolute;
519+
inset: 0;
520+
border-radius: 50%;
521+
border: 2px solid transparent;
522+
transition: all 0.3s ease;
523+
}
524+
525+
.contributor-link:focus {
526+
outline: none;
527+
}
528+
529+
.contributor-link:focus::after {
530+
border-color: rgba(102, 126, 234, 0.8);
531+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
532+
}
533+
372534
[data-theme='light'] .contributor-avatar {
373535
border-color: rgba(0, 0, 0, 0.2);
374536
}
@@ -414,7 +576,8 @@
414576
transform: translateX(-50%) translateY(-8px);
415577
}
416578

417-
.tooltip-name {
579+
.tooltip-name,
580+
.tooltip-username {
418581
font-weight: 600;
419582
margin-bottom: 2px;
420583
}

‎src/components/FloatingContributors/README.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# FloatingContributors Component
2+
3+
The `FloatingContributors` component is a dynamic React component that displays live GitHub activity and a list of contributors for the `recodehive/recode-website` repository. It fetches data from GitHub APIs, processes it, and renders it in an interactive and animated UI.
4+
5+
---
6+
7+
## Features
8+
9+
### 1. **Live GitHub Activity**
10+
- Displays recent events such as pushes, pull requests, comments, and more.
11+
- Cycles through activities every 4 seconds.
12+
13+
### 2. **Contributors Grid**
14+
- Shows the top contributors with their avatars, GitHub profiles, and contribution counts.
15+
- Displays tooltips with additional contributor details.
16+
17+
### 3. **Animations**
18+
- Smooth animations for floating effects, hover interactions, and transitions using `framer-motion`.
19+
20+
### 4. **Fallback Mechanism**
21+
- Uses hardcoded fallback data when GitHub API calls fail.
22+
23+
### 5. **Caching**
24+
- Caches API responses in `localStorage` for 2 minutes to reduce API calls.
25+
26+
---
27+
28+
## API Integration
29+
30+
### GitHub Events API
31+
- **Endpoint**: `https://api.github.com/repos/recodehive/recode-website/events?per_page=30`
32+
- **Purpose**: Fetches live activity data (e.g., pushes, pull requests, comments).
33+
34+
### GitHub Contributors API
35+
- **Endpoint**: `https://api.github.com/repos/recodehive/recode-website/contributors?per_page=100`
36+
- **Purpose**: Fetches contributor data (e.g., avatars, contribution counts).
37+
38+
---
39+
40+
## Key Functions
41+
42+
### `formatTimeAgo`
43+
- Formats timestamps into relative time strings (e.g., "2 hours ago").
44+
45+
### `getGitHubEventUrl`
46+
- Generates URLs for GitHub events based on the action type.
47+
48+
### `getActionIcon` and `getActionText`
49+
- Maps action types to icons and descriptive text.
50+
51+
---
52+
53+
## Potential Enhancements
54+
55+
### API Integration
56+
- Add support for more event types (e.g., `IssuesEvent` for issue creation).
57+
- Use authentication tokens to increase API rate limits.
58+
59+
### UI/UX Features
60+
- Add user controls to pause or skip activities.
61+
- Allow users to view all contributors in a modal or separate page.
62+
63+
### Styling
64+
- Convert CSS to a CSS-in-JS solution (e.g., styled-components).
65+
- Add theme support for light and dark modes.
66+
67+
### Error Handling
68+
- Display error messages in the UI.
69+
- Retry failed API calls with exponential backoff.
70+
71+
---
72+
73+
## Usage
74+
75+
1. Import the component:
76+
```tsx
77+
import FloatingContributors from './FloatingContributors';
78+
```
79+
80+
2. Use it in your application:
81+
```tsx
82+
<FloatingContributors headerEmbedded={false} />
83+
```
84+
85+
---
86+
87+
## Dependencies
88+
- `react`
89+
- `framer-motion`
90+
91+
---
92+
93+
## Notes
94+
- The component auto-refreshes data every 60 seconds.
95+
- It uses `localStorage` for caching API responses.
96+
97+
---

0 commit comments

Comments
 (0)