Add DevEx WG Calendar Integration (Dev ex meetup)

[Mechack08]

Description

This PR introduces a comprehensive meetup reminder system for the Developer Experience Working Group website. It adds a floating button that displays bi-weekly meetup session information with intelligent scheduling, dynamic status updates, and calendar integration.

What problem does this PR solve?

• Visitors had no easy way to access information about recurring Developer Experience Working Group meetup sessions
• Meeting schedules and links were not readily available on the website
• No automated system to show meeting status (upcoming, starting soon, ongoing, ended)

What is the purpose of this change?

• Provide an accessible, always-visible meetup reminder button on the website
• Enable visitors to view multiple recurring sessions (Wednesday morning & Thursday evening)
• Offer dynamic countdown timers and status messages based on current time
• Integrate with Google Calendar for easy event addition
• Make all meeting details (dates, times, links) easily configurable via JSON

Related Issue

#113 - This is a new feature initiative for the Developer Experience Working Group.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (improves code structure or readability without changing functionality)
• Other (please describe):

Changes Made

New Components & Files:

• src/components/MeetupReminderButton/ - Main component directory with modular architecture
  • index.tsx - Main orchestrator component (183 lines)
  • types.ts - TypeScript interfaces for MeetupSession and props
  • constants.ts - Session data loader from JSON configuration
  • meetup-sessions.json - Configurable session data (names, dates, links, recurrence)
  • CONFIGURATION.md - Comprehensive documentation for managing sessions

Utilities:

• utils/dateUtils.ts - Date calculation and formatting utilities

  • calculateNextMeetup() - Calculates next occurrence with configurable interval (weekly, bi-weekly, monthly)
  • getMeetingStatus() - Determines meeting state (BEFORE_DAY, STARTING_SOON, ONGOING, ENDED)
  • getTimeUntilMeeting() - Calculates countdown hours/minutes
  • formatCountdown() - Formats human-readable countdown messages
  • formatMeetupDate() - Locale-aware date formatting
  • formatGoogleDate() - Google Calendar date format conversion

• utils/calendarUtils.ts - Google Calendar and clipboard utilities

  • generateGoogleCalendarUrl() - Creates Google Calendar URL with RRULE recurrence
  • copyToClipboard() - Async clipboard operations

Custom Hooks:

• hooks/useMeetupSessions.ts - Manages session dates and meeting statuses with auto-refresh
• hooks/useClickOutside.ts - Handles panel closing on outside clicks and ESC key

UI Components:

• components/SessionList.tsx - Session selection view with dynamic status messages
• components/SessionDetails.tsx - Detailed session view with Join button, copy link, and calendar integration
• styles.module.css - Scoped styling (704 lines) with dark/light mode support

Integration:

• src/theme/Root.tsx - Global wrapper to render MeetupReminderButton across all pages

Configuration:

• tsconfig.json - Added resolveJsonModule: true for JSON imports

Key Features Implemented:

1. Floating Button: Bottom-left positioned, expandable panel with calendar icon
2. Multi-Session Support: Handles multiple recurring meetup sessions
3. Smart Button Logic: "Join Event" only enabled from meeting day start until meeting ends
4. Dynamic Status Display:
   • Before meeting day: "Next meeting on [date]"
   • Meeting day before start: "Today's meeting starting in X hours/minutes"
   • During meeting: "Meeting ongoing"
   • After meeting ends: Shows next occurrence date
5. Configurable Recurrence: Support for weekly, bi-weekly, monthly intervals via JSON
6. Google Calendar Integration: One-click add to calendar with automatic recurrence
7. Copy Link Functionality: Quick copy meeting link to clipboard
8. Responsive Design: Mobile-friendly with 768px breakpoint adjustments
9. Accessibility: Proper ARIA labels, keyboard navigation, focus management
10. Auto-Updates: Status and countdown refresh every minute

Checklist

• My code follows the project's coding style and guidelines.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have updated the documentation (if applicable) - Added CONFIGURATION.md
• My changes generate no new warnings or errors.
• I have added tests that prove my fix is effective or that my feature works.
• I have checked for merge conflicts.
• I have rebased my branch onto the latest main

[Ranchhand87]

Pending DA review.

[Emmanuel-Tyty]

Nice, will test this locally.

[danbaruka]

Hi @Mechack08,
Thanks for the great work on this PR!

I have just a couple of suggestions:

• Please remove website/package-lock.json from the committed changes. This file should not be part of the PR.
• For documentation consistency, could you either:
  • merge
    website/src/components/MeetupReminderButton/CONFIGURATION.md
    and
    website/MEETUP_BUTTON_README.md
    into a single file named session_config.md,
    or, if the content is not critical,
  • remove both files entirely.

Let me know if you’d like any support reorganising the doc.

This PR will close #113

[danbaruka]

@Mechack08, Could you please ensure that the time is displayed in UTC instead of GMT+4?

Thank you!

[Emmanuel-Tyty]

This is a cool feature overall, I Love it!