Add an RSS feed to Events page

src/app/(main)/community/events/events-list.tsx

@@ -66,9 +66,11 @@ const ALL_SHOWN = {
 export function EventsList({
   events,
   className,
+  children,
 }: {
   events: AnyEvent[]
   className?: string
+  children?: React.ReactNode
 }) {
   const [kindFilters, setKindFilters] = useState(ALL_SHOWN)
 
@@ -104,28 +106,31 @@ export function EventsList({
 
   return (
     <div className={className}>
-      <fieldset className="mb-8">
-        <legend className="typography-menu mt-2">Event type</legend>
-        <div className="mt-4 flex gap-3">
-          {Array.from(tags).map(tag => (
-            <EventFilterTag
-              key={tag}
-              kind={tag}
-              checked={kindFilters[tag]}
-              disabled={
-                Object.values(kindFilters).filter(Boolean).length === 1 &&
-                kindFilters[tag]
-              }
-              onChange={event => {
-                setKindFilters(prev => ({
-                  ...prev,
-                  [tag]: event.target.checked,
-                }))
-              }}
-            />
-          ))}
-        </div>
-      </fieldset>
+      <div className="flex justify-between gap-2 max-lg:flex-col-reverse lg:mb-8 lg:items-end">
+        <fieldset>
+          <legend className="typography-menu mt-2">Event type</legend>
+          <div className="mt-4 flex gap-3">
+            {Array.from(tags).map(tag => (
+              <EventFilterTag
+                key={tag}
+                kind={tag}
+                checked={kindFilters[tag]}
+                disabled={
+                  Object.values(kindFilters).filter(Boolean).length === 1 &&
+                  kindFilters[tag]
+                }
+                onChange={event => {
+                  setKindFilters(prev => ({
+                    ...prev,
+                    [tag]: event.target.checked,
+                  }))
+                }}
+              />
+            ))}
+          </div>
+        </fieldset>
+        {children}
+      </div>
       <EventsScrollview>
         {events.map(event =>
           "node" in event ? (

src/app/(main)/community/events/feed.xml/route.tsx

@@ -0,0 +1,60 @@
+import RSS from "rss"
+
+import { getAllEvents } from "../get-all-events"
+
+export const dynamic = "force-static"
+export const config = { runtime: "edge" }
+
+export async function GET() {
+  const { upcomingEvents, pastEvents } = await getAllEvents()
+
+  const allEvents = [...upcomingEvents, ...pastEvents]
+
+  const feed = new RSS({
+    title: "GraphQL Community Events & Meetups",
+    description:
+      "Stay updated with the latest GraphQL community events and meetups.",
+    feed_url: "https://the-guild.dev/graphql/community/events/feed.xml",
+    site_url: "https://the-guild.dev/graphql/community/events",
+  })
+
+  for (const event of allEvents) {
+    if ("node" in event) {
+      let date: Date
+      if (event.node.next && new Date(event.node.next) > new Date()) {
+        date = new Date(event.node.next)
+      } else {
+        date = new Date(event.node.prev)
+      }
+
+      feed.item({
+        title: event.node.name,
+        date,
+        url: event.node.link,
+        description: "",
+        lat: event.node.latitude,
+        long: event.node.longitude,
+      })
+    } else if ("start" in event) {
+      feed.item({
+        title: event.summary || "GraphQL Working Group",
+        date: event.start,
+        url: event.htmlLink,
+        description: event.description || "",
+      })
+    } else {
+      feed.item({
+        title: event.name,
+        date: event.date,
+        url: event.eventLink,
+        description: `Host: ${event.host} | Location: ${event.location}`,
+      })
+    }
+  }
+
+  return new Response(feed.xml({ indent: true }), {
+    headers: {
+      "Content-Type": "application/xml; charset=utf-8",
+    },
+  })
+}

src/app/(main)/community/events/get-all-events.ts

@@ -17,28 +17,20 @@ const WORKING_GROUP_MEETINGS_FILE = join(
 export async function getAllEvents() {
   const workingGroupMeetings = await loadWorkingGroupMeetings()
 
-  let {
-    pastEvents,
-    upcomingEvents,
-  }: { pastEvents: AnyEvent[]; upcomingEvents: AnyEvent[] } = events.reduce(
-    (acc, event) => {
-      const now = new Date()
-      const date = new Date(event.date)
-      if (date < now) {
-        acc.pastEvents.push(event)
-      } else {
-        acc.upcomingEvents.push(event)
-      }
-      return acc
-    },
-    { pastEvents: [], upcomingEvents: [] } as {
-      pastEvents: Event[]
-      upcomingEvents: Event[]
-    },
-  )
+  let pastEvents: AnyEvent[] = []
+  let upcomingEvents: AnyEvent[] = []
 
   const now = new Date()
 
+  for (const event of events) {
+    const date = new Date(event.date)
+    if (date < now) {
+      pastEvents.push(event)
+    } else {
+      upcomingEvents.push(event)
+    }
+  }
+
   for (const meeting of workingGroupMeetings) {
     if (meeting.start && new Date(meeting.start) < now) {
       pastEvents.push(meeting)

src/app/(main)/community/events/page.tsx

@@ -9,6 +9,7 @@ import { BenefitsSection } from "./benefits-section"
 import { GetYourMeetupNoticedSection } from "./get-your-meetup-noticed-section"
 import { BringGraphQLToYourCommunity } from "./bring-graphql-to-your-community"
 import { getAllEvents } from "./get-all-events"
+import { SubscribeToRssLink } from "./subscribe-to-rss-link"
 
 const ISSUE_TEMPLATE_LINK =
   "https://github.com/graphql/community-wg/issues/new?assignees=&labels=event&template=event-submission.yml"
@@ -61,13 +62,18 @@ export default async function EventsPage() {
               </p>
             </div>
             <Button
-              className="w-fit self-end lg:row-span-2"
+              className="w-fit self-end max-md:hidden lg:row-span-2"
               href={ISSUE_TEMPLATE_LINK}
             >
               Add a new event
             </Button>
           </header>
-          <EventsList events={upcomingEvents} />
+          <EventsList events={upcomingEvents}>
+            <SubscribeToRssLink />
+          </EventsList>
+          <Button className="md:hidden" href={ISSUE_TEMPLATE_LINK}>
+            Add a new event
+          </Button>
         </section>
       )}
 

src/app/(main)/community/events/subscribe-to-rss-link.tsx

@@ -0,0 +1,19 @@
+import rssImage from "./rss.png"
+
+export function SubscribeToRssLink() {
+  return (
+    <a
+      href="/community/events/feed.xml"
+      className="-mx-4 -my-2 flex items-center px-4 py-2 transition-colors hover:bg-neu-100 hover:duration-0 max-md:mb-6"
+    >
+      <span>Subscribe to Events RSS</span>
+      <img
+        src={rssImage.src}
+        alt="RSS Feed"
+        className="ml-2"
+        width={24}
+        height={24}
+      />
+    </a>
+  )
+}