Add working groups to /federation page

Author: hasparus

scripts/get-github-info/github-stats.json

@@ -1 +1 @@
-2025-12-17T14:45:34.162Z
+2025-12-19T20:37:08.887Z

scripts/get-github-info/last-success.isodate

@@ -1,8 +1,21 @@
+import { clsx } from "clsx"
 import { ReactNode } from "react"
 
-export function EventsScrollview({ children }: { children: ReactNode }) {
+export function EventsScrollview({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
   return (
-    <div className="xs:nextra-scrollbar relative -mx-6 grid w-fit max-w-full grid-flow-col grid-rows-2 gap-2 overflow-auto p-6 scrollview-fade-x-16 scrollview-fade has-[>:only-child]:grid-rows-1 max-sm:min-w-[100vw] sm:-mx-1 sm:px-1 lg:gap-4">
+    <div
+      className={clsx(
+        "xs:nextra-scrollbar relative -mx-6 grid w-fit max-w-full grid-flow-col grid-rows-2 gap-2 overflow-auto p-6 scrollview-fade-x-16 scrollview-fade has-[>:only-child]:grid-rows-1 max-sm:min-w-[100vw] sm:-mx-1 sm:px-1 lg:gap-4",
+        
+        className,
+      )}
+    >
       {children}
     </div>
   )

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

@@ -1,5 +1,6 @@
 import { join } from "node:path"
 import { readFile } from "node:fs/promises"
+import { cache } from "react"
 
 import { meetups } from "@/components/meetups"
 
@@ -14,7 +15,7 @@ const WORKING_GROUP_MEETINGS_FILE = join(
   "scripts/sync-working-groups/working-group-events.ndjson",
 )
 
-export async function getAllEvents() {
+export const getAllEvents = cache(async () => {
   const workingGroupMeetings = await loadWorkingGroupMeetings()
 
   let pastEvents: AnyEvent[] = []
@@ -77,9 +78,9 @@ export async function getAllEvents() {
   upcomingEvents = upcomingEvents.sort(sortByDate)
 
   return { pastEvents, upcomingEvents }
-}
+})
 
-async function loadWorkingGroupMeetings(): Promise<WorkingGroupMeeting[]> {
+export const loadWorkingGroupMeetings = cache(async () => {
   try {
     const raw = (await readFile(WORKING_GROUP_MEETINGS_FILE, "utf8")).trim()
     if (!raw) return []
@@ -91,4 +92,4 @@ async function loadWorkingGroupMeetings(): Promise<WorkingGroupMeeting[]> {
     console.error("Failed to read working group meetings", error)
     return []
   }
-}
+})

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

@@ -47,7 +47,12 @@ export function BlogPostsSection({
             {description}
           </p>
         </div>
-        <Button href={readAllHref} variant="secondary" size="md">
+        <Button
+          href={readAllHref}
+          variant="secondary"
+          size="md"
+          className="md:w-fit"
+        >
           {readAllLabel}
         </Button>
       </header>

src/app/(main)/resources/[category]/blog-posts-section.tsx

@@ -33,8 +33,15 @@ export function CardsSection({
 
   if (section.kind === "video") {
     cta = (
-      <Button href="/resources/video" variant="secondary" size="md">
-        Go to Video Resources Library
+      <Button
+        href="/resources/video"
+        variant="secondary"
+        size="md"
+        className="shrink-0"
+      >
+        <span>
+          Go to Video <span className="max-xl:hidden">Resources </span>Library
+        </span>
       </Button>
     )
   }
@@ -80,7 +87,7 @@ export function CardsSection({
             <Button
               as="span"
               variant="primary"
-              className="pointer-events-auto w-fit cursor-pointer"
+              className="pointer-events-auto cursor-pointer md:w-fit"
             >
               Load more
             </Button>

src/app/(main)/resources/[category]/cards-section.tsx

@@ -1,5 +1,6 @@
-import { LearnPagePath } from "@/components/learn-aggregator/learn-pages"
-import { Kind, Topic } from "@/resources/types"
+import type { LearnPagePath } from "@/components/learn-aggregator/learn-pages"
+import type { Kind, Topic } from "@/resources/types"
+import type { WorkingGroupMeeting } from "@/../scripts/sync-working-groups/sync-working-groups"
 
 // TODO: If the pages need to be customized further, consider flattening [category]/page.tsx
 //       into multiple page files and defining the following texts in usual JSX.
@@ -95,6 +96,15 @@ export const categoriesConfig: CategoriesConfig = {
         heading: "Latest updates on federation & composition",
         text: "Read the latest announcements and technical deep dives.",
       },
+      event: {
+        heading: "Help shape the standards",
+        text: "Join the Composite Schemas Working Group meetings to participate in the latest developments in Federation and Composite Schemas.",
+        predicate: (event: WorkingGroupMeeting) => {
+          return (
+            event.summary?.toLowerCase().includes("composite schemas") || false
+          )
+        },
+      },
     },
   },
   ai: {
@@ -109,6 +119,15 @@ export const categoriesConfig: CategoriesConfig = {
         heading: "Latest insights on AI & GraphQL",
         text: "Read the latest announcements and technical deep dives.",
       },
+      event: {
+        heading: "AI Working Group",
+        text: "Help define the intersection of GraphQL and AI. Join the working group meetings to contribute to the latest developments.",
+        predicate: (event: WorkingGroupMeeting) => {
+          return (
+            event.summary?.toLowerCase().includes("ai working group") || false
+          )
+        },
+      },
     },
   },
   security: {
@@ -152,6 +171,7 @@ export const sectionKindNames: Record<Kind, string> = {
   book: "Books",
   "blog-or-newsletter": "Blogs & Newsletters",
   docs: "Documentation",
+  event: "Upcoming events",
 }
 
 export function slugify(name: string): string {
@@ -177,6 +197,11 @@ type CategoriesConfig = {
         text: string
         docs?: LearnPagePath[]
       }
+      event?: {
+        heading: string
+        text: string
+        predicate: (event: WorkingGroupMeeting) => boolean
+      }
     }
   }
 }

src/app/(main)/resources/[category]/categories-config.ts

@@ -0,0 +1,72 @@
+import { clsx } from "clsx"
+import { EventCard } from "@/app/(main)/community/events/event-card"
+import { EventsScrollview } from "@/app/(main)/community/events/events-scrollview"
+import { loadWorkingGroupMeetings } from "@/app/(main)/community/events/get-all-events"
+import type { Topic } from "@/resources/types"
+
+import { categoriesConfig, sectionIds } from "./categories-config"
+import { Eyebrow } from "@/_design-system/eyebrow"
+import { Button } from "@/app/conf/_design-system/button"
+
+export async function CategoryWorkingGroups({
+  className,
+  category,
+}: {
+  className?: string
+  category: Topic
+}) {
+  const predicate = categoriesConfig[category]?.sections.event?.predicate
+  if (!predicate) return null
+  const { heading, text } = categoriesConfig[category].sections.event || {}
+
+  const meetings = await loadWorkingGroupMeetings()
+
+  const events = meetings
+    .filter(predicate)
+    .filter(event => new Date(event.start).getTime() >= Date.now())
+
+  if (events.length === 0) return null
+
+  return (
+    <section
+      id={sectionIds.event}
+      className={clsx("gql-section gql-container", className)}
+    >
+      <header className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+        <div className="flex flex-col gap-4 xl:gap-6">
+          <Eyebrow>Upcoming events</Eyebrow>
+          <h2 className="typography-h2 max-w-[700px] text-pretty">{heading}</h2>
+          <p className="typography-body-md max-w-[577px] text-neu-800">
+            {text}
+          </p>
+        </div>
+        <Button
+          href="/community/events"
+          variant="secondary"
+          size="md"
+          className="md:w-fit"
+        >
+          View all events
+        </Button>
+      </header>
+      <EventsScrollview
+        className={clsx(
+          "mt-4 !max-w-[unset] lg:mt-10",
+          events.length < 4 && "!grid-rows-1",
+        )}
+      >
+        {events.map(event => (
+          <EventCard
+            key={event.id}
+            href={event.htmlLink}
+            date={new Date(event.start)}
+            name={event.summary ?? "Working Group"}
+            city="Online" // event.location is a zoom link, we could potentially use but we'd have to refactor the event-card to avoid nested anchors
+            kind="working-group"
+            className={clsx(events.length < 4 && "!w-full")}
+          />
+        ))}
+      </EventsScrollview>
+    </section>
+  )
+}

src/app/(main)/resources/[category]/category-working-groups.tsx

@@ -48,7 +48,12 @@ export function DocsSection({
             {text}
           </p>
         </div>
-        <Button href="/learn" variant="secondary" size="md">
+        <Button
+          href="/learn"
+          variant="secondary"
+          size="md"
+          className="md:w-fit"
+        >
           Go to Learn
         </Button>
       </header>

src/app/(main)/resources/[category]/docs-section.tsx

@@ -23,6 +23,8 @@ import { CardsSection } from "./cards-section"
 import { DocsSection } from "./docs-section"
 import { LookingForMore } from "@/components/looking-for-more"
 import { unsafeKeys } from "@/app/conf/_design-system/utils/unsafe-keys"
+import { CategoryWorkingGroups } from "./category-working-groups"
+import { loadWorkingGroupMeetings } from "../../community/events/get-all-events"
 
 interface PageParams {
   category: string
@@ -57,6 +59,8 @@ export default async function CategoryPage({ params }: { params: PageParams }) {
 
   if (sections.length === 0) sections = grouped.map(group => group.kind)
 
+  sections = await ensureFutureEvents(sections, category)
+
   const activePath: Item[] = [
     {
       name: "Home",
@@ -88,7 +92,7 @@ export default async function CategoryPage({ params }: { params: PageParams }) {
       >
         <TocHeroContents
           sections={sections.map(sectionLabel)}
-          className="max-w-[528px]"
+          className="max-w-[360px] [&:has(li:nth-child(3))]:max-w-[600px]"
         />
       </ResourcesHero>
 
@@ -121,6 +125,25 @@ export default async function CategoryPage({ params }: { params: PageParams }) {
   )
 }
 
+/**
+ * if there is no events in the future, we remove the section from the TOC
+ */
+async function ensureFutureEvents(sections: Kind[], category: Topic) {
+  if (!sections.includes("event")) return sections
+
+  const events = await loadWorkingGroupMeetings()
+  const predicate = categoriesConfig[category].sections.event?.predicate
+
+  if (predicate) {
+    const futureEvents = events
+      .filter(predicate)
+      .filter(event => new Date(event.start).getTime() >= Date.now())
+
+    if (futureEvents.length === 0)
+      return sections.filter(section => section !== "event")
+  }
+}
+
 function uniqueByTitle(resources: ResourceMetadata[]) {
   const seen = new Set<string>()
   return resources.filter(resource => {
@@ -197,6 +220,10 @@ function CategorySection({
       return <DocsSection {...docsSection} className={className} />
     }
 
+    case "event": {
+      return <CategoryWorkingGroups category={category} className={className} />
+    }
+
     default:
       return (
         <CardsSection