From 7a3987025ae200cc5d637568c913f55c81fae5b5 Mon Sep 17 00:00:00 2001 From: Danish Zayan Date: Wed, 14 May 2025 12:09:06 +0530 Subject: [PATCH 1/9] Add EventFilter component and styles for event type selection - Implement EventFilter component to allow users to filter events by type. - Create eventTypes.js to define available event types with labels. - Update EventsList component to integrate EventFilter and manage selected event type. - Add styles for EventFilter and update existing styles for EventsList. --- components/event-filter/EventFilter.jsx | 23 ++++++++++ components/event-filter/event-filter.scss | 38 ++++++++++++++++ components/event-filter/eventTypes.js | 14 ++++++ components/events-list/EventsList.jsx | 54 ++++++++++++++--------- components/events-list/events-list.scss | 2 +- styles/styles.scss | 1 + 6 files changed, 109 insertions(+), 23 deletions(-) create mode 100644 components/event-filter/EventFilter.jsx create mode 100644 components/event-filter/event-filter.scss create mode 100644 components/event-filter/eventTypes.js diff --git a/components/event-filter/EventFilter.jsx b/components/event-filter/EventFilter.jsx new file mode 100644 index 000000000..b6c8576a8 --- /dev/null +++ b/components/event-filter/EventFilter.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +const EventFilter = ({ selectedType, setSelectedType, eventTypes }) => { + const handleChange = (e) => { + setSelectedType(e.target.value); + }; + + return ( + + ); +}; + +export default EventFilter; \ No newline at end of file diff --git a/components/event-filter/event-filter.scss b/components/event-filter/event-filter.scss new file mode 100644 index 000000000..f285c02a6 --- /dev/null +++ b/components/event-filter/event-filter.scss @@ -0,0 +1,38 @@ +.events-list__controls { + display: flex; + justify-content: space-between; + align-items: center; + gap: spacing(2); +} + +.events-list__select { + appearance: none; + -webkit-appearance: none; + background: rgba(255, 255, 255, 0.4); + padding: 12px 10px; + margin-top: 8px; + border-radius: 100px; + border: none; + + color: $white; + text-align: center; + @extend %subtitle-1; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: $white; + color: $purple; + transform: translateY(-1px); + } + + &:focus { + outline: none; + box-shadow: 0 0 0 2px $purple; + } + + option { + background: $purple; + color: $white; + } +} \ No newline at end of file diff --git a/components/event-filter/eventTypes.js b/components/event-filter/eventTypes.js new file mode 100644 index 000000000..bae3ede39 --- /dev/null +++ b/components/event-filter/eventTypes.js @@ -0,0 +1,14 @@ +import literals from '../../content/commons.json'; + +const eventTypes = [ + { value: 'all', label: 'All Events' }, + { value: 'conference', label: literals['event-type:conference'] }, + { value: 'podcast', label: literals['event-type:podcast'] }, + { value: 'stream', label: literals['event-type:stream'] }, + { value: 'talk', label: literals['event-type:talk'] }, + { value: 'meetup', label: literals['event-type:meetup'] }, + { value: 'fundraising', label: literals['event-type:fundraising'] }, + { value: 'misc', label: literals['event-type:misc'] }, +]; + +export default eventTypes; \ No newline at end of file diff --git a/components/events-list/EventsList.jsx b/components/events-list/EventsList.jsx index 0176023e6..e911e60cd 100644 --- a/components/events-list/EventsList.jsx +++ b/components/events-list/EventsList.jsx @@ -1,37 +1,47 @@ -import md from 'markdown-it' -import clsx from 'clsx' +import React, { useState } from 'react'; +import md from 'markdown-it'; +import clsx from 'clsx'; +import Link from 'next/link'; -import Link from 'next/link' - -import ButtonLink from '../button-link/ButtonLink' - -import { getLiteral } from '../../common/i18n' -import * as ROUTES from '../../common/routes' - -import DateTimeChip from '../date-time-chip/DateTimeChip' -import EventTypeChip from '../event-type-chip/EventTypeChip' -import PlayLink from '../play-link/PlayLink' -import Chip from '../chip/Chip' +import ButtonLink from '../button-link/ButtonLink'; +import EventFilter from '../event-filter/EventFilter'; +import eventTypes from '../event-filter/eventTypes'; +import { getLiteral } from '../../common/i18n'; +import DateTimeChip from '../date-time-chip/DateTimeChip'; +import EventTypeChip from '../event-type-chip/EventTypeChip'; +import Chip from '../chip/Chip'; const EventsList = ({ events }) => { + const [selectedType, setSelectedType] = useState('all'); + const filteredEvents = selectedType === 'all' + ? events + : events.filter((event) => event.type === selectedType); + return (

{getLiteral('schedule:title')}

{getLiteral('schedule:description')}

- - {getLiteral('schedule:add-event')} - +
+ + {getLiteral('schedule:add-event')} + + +
- {events.map((event, index) => ( + {filteredEvents.map((event, index) => (
{
-

Date: Wed, 14 May 2025 12:26:13 +0530 Subject: [PATCH 2/9] Update event details for Open Source Friday: Effection --- content/events/2025-05-30-effection.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/content/events/2025-05-30-effection.md b/content/events/2025-05-30-effection.md index 3cea48b2b..3942d47e3 100644 --- a/content/events/2025-05-30-effection.md +++ b/content/events/2025-05-30-effection.md @@ -1,20 +1,18 @@ --- title: 'Open Source Friday: Effection' -metaTitle: 'Open Source Friday: Effection' -metaDesc: 'Join Charles Lowell to discuss Effection - Structured Concurrency and Effects for JavaScript.' -date: '05/30' +metaTitle: 'Open Source Friday: Nuxt and AI' +metaDesc: 'Join Daniel Roe to discuss Nuxt, AI, and improving developer experiences with type inference.' +date: '05/23' UTCStartTime: '6:00' UTCEndTime: '7:00' type: 'stream' -language: 'English' location: 'Virtual' +language: 'English' userName: 'GitHub' userLink: 'https://www.twitch.tv/github/schedule' linkUrl: 'https://www.twitch.tv/github/schedule' --- -Join [Charles Lowell](https://github.com/cowboyd) to discuss [Effection](https://github.com/thefrontside/effection) - Structured Concurrency and Effects for JavaScript. - -Effection provides guardrails for managing complex asynchronous operations, helping developers write clean and crisp code. +Join Charles Lowell [@cowboyd](https://github.com/cowboyd) to learn more about [Effection](https://github.com/thefrontside/effection), structured concurrency and effects for JavaScript. [Open Source Fridays](https://www.youtube.com/playlist?list=PL0lo9MOBetEFmtstItnKlhJJVmMghxc0P) stream weekly on GitHub's [Twitch](https://www.twitch.tv/github), [YouTube](https://github.com/youtube), and [LinkedIn](https://www.linkedin.com/company/github). From bffdf26f04169f37547027cc53de0c29d9879c3b Mon Sep 17 00:00:00 2001 From: Andrea Liliana Griffiths Date: Thu, 12 Mar 2026 11:48:43 -0600 Subject: [PATCH 3/9] Update components/events-list/events-list.scss Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- components/events-list/events-list.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/components/events-list/events-list.scss b/components/events-list/events-list.scss index d7284bb1d..45e9ff67d 100644 --- a/components/events-list/events-list.scss +++ b/components/events-list/events-list.scss @@ -9,7 +9,6 @@ } &__header { - // display: flex; align-items: center; justify-content: space-between; margin-bottom: spacing(6); From 408ae2d374e939e78ccc840d4bac58f2eaf46815 Mon Sep 17 00:00:00 2001 From: Andrea Liliana Griffiths Date: Thu, 12 Mar 2026 16:40:13 -0400 Subject: [PATCH 4/9] =?UTF-8?q?Remove=20semicolons=20=E2=80=94=20match=20e?= =?UTF-8?q?xisting=20codebase=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/event-filter/EventFilter.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/event-filter/EventFilter.jsx b/components/event-filter/EventFilter.jsx index b6c8576a8..dd8ffeec8 100644 --- a/components/event-filter/EventFilter.jsx +++ b/components/event-filter/EventFilter.jsx @@ -20,4 +20,4 @@ const EventFilter = ({ selectedType, setSelectedType, eventTypes }) => { ); }; -export default EventFilter; \ No newline at end of file +export default EventFilter From 540e199e4871442d9b1dd49ea49c40575e008253 Mon Sep 17 00:00:00 2001 From: Andrea Liliana Griffiths Date: Thu, 12 Mar 2026 16:40:49 -0400 Subject: [PATCH 5/9] Fix import statement and remove trailing newline --- components/event-filter/eventTypes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/event-filter/eventTypes.js b/components/event-filter/eventTypes.js index bae3ede39..ed3b5adb3 100644 --- a/components/event-filter/eventTypes.js +++ b/components/event-filter/eventTypes.js @@ -1,4 +1,4 @@ -import literals from '../../content/commons.json'; +import literals from '../../content/commons.json' const eventTypes = [ { value: 'all', label: 'All Events' }, @@ -11,4 +11,4 @@ const eventTypes = [ { value: 'misc', label: literals['event-type:misc'] }, ]; -export default eventTypes; \ No newline at end of file +export default eventTypes From 20ffda55e4c2a535ce87b7afbe5dc3d16a010bc3 Mon Sep 17 00:00:00 2001 From: Andrea Liliana Griffiths Date: Thu, 12 Mar 2026 16:42:20 -0400 Subject: [PATCH 6/9] Refactor EventsList component imports and formatting --- components/events-list/EventsList.jsx | 34 ++++++++++++++------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/components/events-list/EventsList.jsx b/components/events-list/EventsList.jsx index a53eb4a67..f2d61c261 100644 --- a/components/events-list/EventsList.jsx +++ b/components/events-list/EventsList.jsx @@ -1,21 +1,26 @@ -import React, { useState } from 'react'; -import md from 'markdown-it'; -import clsx from 'clsx'; -import Link from 'next/link'; +import React, { useState } from 'react' +import md from 'markdown-it' +import clsx from 'clsx' +import Link from 'next/link' -import ButtonLink from '../button-link/ButtonLink'; -import EventFilter from '../event-filter/EventFilter'; -import eventTypes from '../event-filter/eventTypes'; -import { getLiteral } from '../../common/i18n'; -import DateTimeChip from '../date-time-chip/DateTimeChip'; -import EventTypeChip from '../event-type-chip/EventTypeChip'; -import Chip from '../chip/Chip'; +import ButtonLink from '../button-link/ButtonLink' +import EventFilter from '../event-filter/EventFilter' +import eventTypes from '../event-filter/eventTypes' +import { getLiteral } from '../../common/i18n' +import * as ROUTES from '../../common/routes' +import DateTimeChip from '../date-time-chip/DateTimeChip' +import EventTypeChip from '../event-type-chip/EventTypeChip' +import PlayLink from '../play-link/PlayLink' +import Chip from '../chip/Chip' const EventsList = ({ events }) => { - const [selectedType, setSelectedType] = useState('all'); + const dateLabel = (event) => + `${event.formattedDate.date} to ${event.formattedDate.endDate}` + + const [selectedType, setSelectedType] = useState('all') const filteredEvents = selectedType === 'all' ? events - : events.filter((event) => event.type === selectedType); + : events.filter((event) => event.type === selectedType) return (

@@ -55,7 +60,6 @@ const EventsList = ({ events }) => { )}
-
{ endTime={event.formattedDate.endTime} />
-
{event.language && } {event.location && }
-

Date: Thu, 12 Mar 2026 16:43:54 -0400 Subject: [PATCH 7/9] Add flex display to events list header --- components/events-list/events-list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/components/events-list/events-list.scss b/components/events-list/events-list.scss index 45e9ff67d..ba6a7d9cf 100644 --- a/components/events-list/events-list.scss +++ b/components/events-list/events-list.scss @@ -9,6 +9,7 @@ } &__header { + display: flex; align-items: center; justify-content: space-between; margin-bottom: spacing(6); From 96ac04f3902e19167c653a44f5b4c163d614d8aa Mon Sep 17 00:00:00 2001 From: Andrea Liliana Griffiths Date: Thu, 12 Mar 2026 16:45:19 -0400 Subject: [PATCH 8/9] Refactor handleChange function in EventFilter --- components/event-filter/EventFilter.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/event-filter/EventFilter.jsx b/components/event-filter/EventFilter.jsx index dd8ffeec8..385f18500 100644 --- a/components/event-filter/EventFilter.jsx +++ b/components/event-filter/EventFilter.jsx @@ -2,8 +2,8 @@ import React from 'react'; const EventFilter = ({ selectedType, setSelectedType, eventTypes }) => { const handleChange = (e) => { - setSelectedType(e.target.value); - }; + setSelectedType(e.target.value) + } return ( - ); -}; + ) +} export default EventFilter From b8eaae47b06cc351190f8178408cc4e122d42d7a Mon Sep 17 00:00:00 2001 From: Andrea Liliana Griffiths Date: Thu, 12 Mar 2026 16:46:34 -0400 Subject: [PATCH 9/9] Fix syntax error in eventTypes.js --- components/event-filter/eventTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/event-filter/eventTypes.js b/components/event-filter/eventTypes.js index ed3b5adb3..2cf8300c5 100644 --- a/components/event-filter/eventTypes.js +++ b/components/event-filter/eventTypes.js @@ -9,6 +9,6 @@ const eventTypes = [ { value: 'meetup', label: literals['event-type:meetup'] }, { value: 'fundraising', label: literals['event-type:fundraising'] }, { value: 'misc', label: literals['event-type:misc'] }, -]; +] export default eventTypes