Skip to content

Commit 69c06be

Browse files
author
iitzIrFan
committed
Sort contributors by contributions and limit display to top 5 in Floating Contributors component; add detailed README documentation.
1 parent e920eac commit 69c06be

File tree

2 files changed

+132
-32
lines changed

2 files changed

+132
-32
lines changed

‎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+
---

‎src/components/FloatingContributors/index.tsx‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -544,39 +544,42 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({ headerEmbed
544544
</div>
545545

546546
<div className="contributors-avatars">
547-
{contributors.slice(0, 12).map((contributor, index) => (
548-
<motion.div
549-
key={contributor.id}
550-
className="contributor-avatar-wrapper"
551-
initial={{ opacity: 0, scale: 0.8 }}
552-
animate={{ opacity: 1, scale: 1 }}
553-
transition={{
554-
delay: index * 0.05,
555-
type: "spring",
556-
stiffness: 300,
557-
damping: 15
558-
}}
559-
whileHover={{ scale: 1.1, zIndex: 5 }}
560-
>
561-
<a
562-
href={contributor.html_url}
563-
target="_blank"
564-
rel="noopener noreferrer"
565-
aria-label={`View ${contributor.login}'s GitHub profile`}
566-
className="contributor-link"
547+
{contributors
548+
.sort((a, b) => b.contributions - a.contributions) // Sort contributors by contributions in descending order
549+
.slice(0, 5) // Limit to top 5 contributors
550+
.map((contributor, index) => (
551+
<motion.div
552+
key={contributor.id}
553+
className="contributor-avatar-wrapper"
554+
initial={{ opacity: 0, scale: 0.8 }}
555+
animate={{ opacity: 1, scale: 1 }}
556+
transition={{
557+
delay: index * 0.05,
558+
type: "spring",
559+
stiffness: 300,
560+
damping: 15
561+
}}
562+
whileHover={{ scale: 1.1, zIndex: 5 }}
567563
>
568-
<img
569-
src={contributor.avatar_url}
570-
alt={contributor.login}
571-
className="contributor-avatar"
572-
/>
573-
<div className="contributor-tooltip">
574-
<div className="tooltip-username">@{contributor.login}</div>
575-
<div className="tooltip-contributions">{contributor.contributions || 0} contributions</div>
576-
</div>
577-
</a>
578-
</motion.div>
579-
))}
564+
<a
565+
href={contributor.html_url}
566+
target="_blank"
567+
rel="noopener noreferrer"
568+
aria-label={`View ${contributor.login}'s GitHub profile`}
569+
className="contributor-link"
570+
>
571+
<img
572+
src={contributor.avatar_url}
573+
alt={contributor.login}
574+
className="contributor-avatar"
575+
/>
576+
<div className="contributor-tooltip">
577+
<div className="tooltip-username">@{contributor.login}</div>
578+
<div className="tooltip-contributions">{contributor.contributions || 0} contributions</div>
579+
</div>
580+
</a>
581+
</motion.div>
582+
))}
580583

581584
{contributors.length > 12 && (
582585
<div className="contributors-more">

0 commit comments

Comments
 (0)