Feature/liveactivity

package.json

@@ -36,6 +36,7 @@
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.5.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",

src/components/FloatingContributors/FloatingContributors.css

@@ -43,6 +43,113 @@
   min-width: 400px;
 }
 
+/* New activity feed styles */
+.contributors-activities {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+  max-height: 240px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.contributors-activities::-webkit-scrollbar {
+  width: 4px;
+}
+
+.contributors-activities::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.contributors-activities::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.contributor-activity-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.08);
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  cursor: pointer; /* Add pointer cursor to indicate clickable */
+}
+
+.contributor-activity-item:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px); /* Slight lift effect on hover */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.contributor-activity-item:focus {
+  outline: 2px solid rgba(102, 126, 234, 0.6);
+  outline-offset: 2px;
+}
+
+.contributor-activity-item:active {
+  transform: translateY(0);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.activity-item-avatar {
+  margin-right: 12px;
+  position: relative;
+}
+
+.activity-item-img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.activity-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.activity-item-user {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.activity-item-username {
+  font-weight: 600;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.activity-item-badge {
+  background-color: rgba(59, 130, 246, 0.2);
+  padding: 2px 6px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.activity-item-action {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 2px;
+}
+
+.activities-more {
+  text-align: center;
+  padding: 8px;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  margin-top: 4px;
+}
+
 /* Header embedded version - larger size */
 .floating-contributors-container.header-embedded .floating-contributors-card {
   min-width: 450px;
@@ -175,12 +282,43 @@
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
+  position: relative;
+  overflow: hidden;
 }
 
 .floating-contributors-activity:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(102, 126, 234, 0.3);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.floating-contributors-activity:focus {
+  outline: 2px solid rgba(102, 126, 234, 0.6);
+  outline-offset: 2px;
+}
+
+.floating-contributors-activity:active {
   transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Subtle link indicator */
+.floating-contributors-activity::after {
+  content: "→";
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%) translateX(20px);
+  opacity: 0;
+  font-size: 16px;
+  color: rgba(102, 126, 234, 0.8);
+  transition: all 0.3s ease;
+}
+
+.floating-contributors-activity:hover::after {
+  transform: translateY(-50%) translateX(0);
+  opacity: 1;
 }
 
 [data-theme='light'] .floating-contributors-activity {
@@ -369,6 +507,30 @@
   transform: scale(1.1);
 }
 
+.contributor-link {
+  position: relative;
+  display: block;
+  transition: all 0.3s ease;
+}
+
+.contributor-link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.contributor-link:focus {
+  outline: none;
+}
+
+.contributor-link:focus::after {
+  border-color: rgba(102, 126, 234, 0.8);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
 [data-theme='light'] .contributor-avatar {
   border-color: rgba(0, 0, 0, 0.2);
 }
@@ -414,7 +576,8 @@
   transform: translateX(-50%) translateY(-8px);
 }
 
-.tooltip-name {
+.tooltip-name,
+.tooltip-username {
   font-weight: 600;
   margin-bottom: 2px;
 }

src/components/FloatingContributors/README.md

@@ -0,0 +1,97 @@
+# FloatingContributors Component
+
+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.
+
+---
+
+## Features
+
+### 1. **Live GitHub Activity**
+- Displays recent events such as pushes, pull requests, comments, and more.
+- Cycles through activities every 4 seconds.
+
+### 2. **Contributors Grid**
+- Shows the top contributors with their avatars, GitHub profiles, and contribution counts.
+- Displays tooltips with additional contributor details.
+
+### 3. **Animations**
+- Smooth animations for floating effects, hover interactions, and transitions using `framer-motion`.
+
+### 4. **Fallback Mechanism**
+- Uses hardcoded fallback data when GitHub API calls fail.
+
+### 5. **Caching**
+- Caches API responses in `localStorage` for 2 minutes to reduce API calls.
+
+---
+
+## API Integration
+
+### GitHub Events API
+- **Endpoint**: `https://api.github.com/repos/recodehive/recode-website/events?per_page=30`
+- **Purpose**: Fetches live activity data (e.g., pushes, pull requests, comments).
+
+### GitHub Contributors API
+- **Endpoint**: `https://api.github.com/repos/recodehive/recode-website/contributors?per_page=100`
+- **Purpose**: Fetches contributor data (e.g., avatars, contribution counts).
+
+---
+
+## Key Functions
+
+### `formatTimeAgo`
+- Formats timestamps into relative time strings (e.g., "2 hours ago").
+
+### `getGitHubEventUrl`
+- Generates URLs for GitHub events based on the action type.
+
+### `getActionIcon` and `getActionText`
+- Maps action types to icons and descriptive text.
+
+---
+
+## Potential Enhancements
+
+### API Integration
+- Add support for more event types (e.g., `IssuesEvent` for issue creation).
+- Use authentication tokens to increase API rate limits.
+
+### UI/UX Features
+- Add user controls to pause or skip activities.
+- Allow users to view all contributors in a modal or separate page.
+
+### Styling
+- Convert CSS to a CSS-in-JS solution (e.g., styled-components).
+- Add theme support for light and dark modes.
+
+### Error Handling
+- Display error messages in the UI.
+- Retry failed API calls with exponential backoff.
+
+---
+
+## Usage
+
+1. Import the component:
+   ```tsx
+   import FloatingContributors from './FloatingContributors';
+   ```
+
+2. Use it in your application:
+   ```tsx
+   <FloatingContributors headerEmbedded={false} />
+   ```
+
+---
+
+## Dependencies
+- `react`
+- `framer-motion`
+
+---
+
+## Notes
+- The component auto-refreshes data every 60 seconds.
+- It uses `localStorage` for caching API responses.
+
+---