New events and meetups (#2230)

## Description

Refreshed the events page according to Figma.

I'll do a follow up PR with the `Add an event`, issue template, and
possibly "load more" instead of a scrollview, because this is big enough
already and I'd rather keep the convo about the event proposal issue
template separate from the code review of this page.


https://github.com/user-attachments/assets/c6c38a21-f30b-4afc-85b3-1f65f1a04991

---------

Co-authored-by: Jonathan Brennan <jonathanawesome@users.noreply.github.com>

Author: hasparus

.github/workflows/check.yml

@@ -1,4 +1,4 @@
-name: Lint and check formatting
+name: lint & test
 
 on: pull_request
 
@@ -26,6 +26,23 @@ jobs:
       - name: Validate code snippets
         run: pnpm validate:snippets
 
+  unit-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: the-guild-org/shared-config/setup@main
+        name: setup env
+        with:
+          packageManager: pnpm
+          workingDirectory: ./
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Run unit tests
+        run: pnpm test:unit
+
   playwright:
     runs-on: ubuntu-latest
     steps:
@@ -46,12 +63,9 @@ jobs:
       - name: Install Playwright Browsers
         run: ./node_modules/.bin/playwright install --with-deps
 
-      - name: Run Playwright tests
+      - name: Run end-to-end tests
         run: ./node_modules/.bin/playwright test
 
-      - name: Run unit tests
-        run: pnpm test:unit
-
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:

.gitignore

@@ -65,3 +65,5 @@ out/
 tsconfig.tsbuildinfo
 
 playwright-report/
+
+.pnpm-store/

package.json

@@ -35,7 +35,7 @@
     "@hasparus/lezer-json-shikified": "1.1.3",
     "@headlessui/react": "^2.2.4",
     "@igorkowalczyk/is-browser": "^5.1.0",
-    "@lezer/highlight": "1.2.1",
+    "@lezer/highlight": "^1.2.1",
     "@next/bundle-analyzer": "^15.4.5",
     "@plaiceholder/next": "^3.0.0",
     "@sparticuz/chromium": "^138.0.2",

playwright.config.ts

@@ -8,18 +8,35 @@ export default defineConfig({
   outputDir: "./test/out",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 1,
   workers: process.env.CI ? 1 : undefined,
-  reporter: "html",
+  reporter: process.env.CI ? [["github"], ["html"]] : "list",
   use: {
     baseURL: "http://localhost:3000",
-    trace: "on-first-retry",
+    trace: "retain-on-first-failure",
+    screenshot: "only-on-failure",
   },
 
+  timeout: 60 * 1000,
+
   projects: [
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      use: {
+        ...devices["Desktop Chrome"],
+        channel: "chromium",
+        ...(process.env.CI
+          ? {
+              args: [
+                "--enable-gpu",
+                "--use-gl=angle",
+                "--use-angle=gl-egl",
+                "--ignore-gpu-blocklist",
+                "--enable-unsafe-swiftshader",
+              ],
+            }
+          : {}),
+      },
     },
   ],
 

src/app/(development)/layout.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import { notFound } from "next/navigation"
 import { NewFontsStyleTag } from "../fonts"
 
-// @ts-expect-error: we want to import the same version as Nextra for the main page
 import { ThemeProvider } from "next-themes"
 
 import "../colors.css"

src/app/(main)/community/events/benefit-card.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react"
+
+export function BenefitCard({
+  title,
+  description,
+  icon,
+}: {
+  title: string
+  description: string
+  icon: ReactNode
+}) {
+  return (
+    <article className="flex h-full flex-col gap-6 border border-neu-200 bg-neu-0 p-6 text-left dark:border-neu-100">
+      {icon}
+      <div className="flex flex-col gap-3 text-neu-900">
+        <h3 className="text-[20px] font-normal leading-tight">{title}</h3>
+        <p className="typography-body-md text-neu-800">{description}</p>
+      </div>
+    </article>
+  )
+}

src/app/(main)/community/events/benefits-section.tsx

@@ -0,0 +1,45 @@
+import UsersIcon from "@/app/conf/_design-system/pixelarticons/users.svg?svgr"
+import CommentIcon from "@/app/conf/_design-system/pixelarticons/comment.svg?svgr"
+import SlidersIcon from "@/app/conf/_design-system/pixelarticons/sliders.svg?svgr"
+import EyeIcon from "@/app/conf/_design-system/pixelarticons/eye.svg?svgr"
+
+import { BenefitCard } from "./benefit-card"
+
+export function BenefitsSection() {
+  return (
+    <section className="gql-section">
+      <div className="mx-auto max-w-3xl text-center">
+        <h2 className="typography-h2 text-balance">
+          Benefits of getting involved
+        </h2>
+        <p className="typography-body-lg mt-4 text-balance text-neu-800 lg:mt-6">
+          Contributing to GraphQL means more than writing code — it’s a chance
+          to collaborate, share ideas, and shape the future of the ecosystem.
+        </p>
+      </div>
+
+      <div className="mt-10 grid gap-4 md:grid-cols-2 lg:mt-16 xl:grid-cols-4">
+        <BenefitCard
+          icon={<UsersIcon aria-hidden className="size-10 text-sec-darker" />}
+          title="Valuable networking opportunities"
+          description="Engage in conversations and hands-on projects to deepen your understanding of GraphQL."
+        />
+        <BenefitCard
+          icon={<CommentIcon aria-hidden className="size-10 text-sec-darker" />}
+          title="Collaborate with others"
+          description="Connect with contributors and teams building GraphQL tools and platforms."
+        />
+        <BenefitCard
+          icon={<SlidersIcon aria-hidden className="size-10 text-sec-darker" />}
+          title="Help guide the spec"
+          description="Share ideas, give feedback, or participate in working groups to influence the future of GraphQL."
+        />
+        <BenefitCard
+          icon={<EyeIcon aria-hidden className="size-10 text-sec-darker" />}
+          title="Connect in real life"
+          description="Put a face to the handle — meet contributors in person at events and meetups. Build lasting connections beyond the screen."
+        />
+      </div>
+    </section>
+  )
+}

src/app/(main)/community/events/bring-graphql-to-your-community.tsx

@@ -0,0 +1,55 @@
+import { Button } from "../../../conf/_design-system/button"
+import { StripesDecoration } from "../../../conf/_design-system/stripes-decoration"
+import { DISCORD_CHANNEL_LINK } from "./links"
+
+export function BringGraphQLToYourCommunity() {
+  return (
+    <section className="gql-section gql-container">
+      <div className="relative flex gap-8 border border-sec-dark bg-sec-lighter px-6 py-10 dark:border-sec-base/40 dark:bg-sec-darker/20 max-lg:flex-col sm:px-10 md:gap-12 lg:flex-row lg:items-center lg:gap-16 lg:px-16 xl:gap-24">
+        <Stripes />
+        <div>
+          <h2 className="typography-h2">Bring GraphQL to your community</h2>
+          <p className="typography-body-lg mt-6">
+            Learn how to start a local initiative and create your own – host
+            events, share knowledge, and grow the GraphQL community where you
+            live.
+          </p>
+        </div>
+        <div className="mt-auto flex shrink-0 flex-col gap-2 lg:w-[324px]">
+          <Button
+            href={
+              "#"
+              // TODO: Where does this link? Docs?
+            }
+            variant="primary"
+          >
+            Learn more
+          </Button>
+          <Button
+            href={DISCORD_CHANNEL_LINK}
+            variant="tertiary"
+            className="[.light_&]:bg-white"
+          >
+            Start GraphQL Local
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Stripes() {
+  const mask = "linear-gradient(20deg, transparent 80%, rgb(0 0 0 / 0.6))"
+  return (
+    <div
+      className="absolute inset-0"
+      role="presentation"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+      }}
+    >
+      <StripesDecoration oddClassName="bg-gradient-to-b from-sec-dark to-sec-base/10" />
+    </div>
+  )
+}

src/components/events/event-card.tsx renamed to src/app/(main)/community/events/event-card.tsx

@@ -3,7 +3,8 @@ import { clsx } from "clsx"
 
 import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
 import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
-import { Tag } from "../../app/conf/_design-system/tag"
+import { Tag } from "@/app/conf/_design-system/tag"
+import { eventTagColors } from "./event-filter-tag"
 
 const dateFormatter = new Intl.DateTimeFormat("en", {
   day: "numeric",
@@ -55,6 +56,7 @@ export interface EventCardProps {
   name: ReactNode
   meta?: ReactNode
   official?: boolean
+  kind: "meetup" | "conference" | "working-group"
 }
 
 export function EventCard({
@@ -64,43 +66,43 @@ export function EventCard({
   name,
   meta,
   official,
+  kind,
 }: EventCardProps) {
   const dateLabel = formatDateLabel(date)
   const parsedDate = normaliseDate(date)
-
   return (
     <a
       href={href}
       className={clsx(
-        "gql-focus-visible group flex min-w-[260px] flex-col overflow-hidden border border-neu-200 bg-neu-0 text-left text-current no-underline ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 hover:ring-offset-1 hover:ring-offset-neu-0 dark:border-neu-100 dark:ring-neu-100 xs:min-w-[352px]",
+        "gql-focus-visible group flex min-h-[214px] min-w-[260px] flex-col overflow-hidden border border-neu-200 text-left text-current no-underline ring-neu-400 hover:ring-1 hover:ring-offset-1 hover:ring-offset-neu-0 dark:border-neu-50 dark:ring-neu-100 xs:min-w-[352px]",
+        "[--bg-opacity:0.05] hover:[--bg-opacity:0.07] dark:[--bg-opacity:0.03] hover:dark:[--bg-opacity:0.06]",
+
+        "z-[4]",
+        kind === "meetup" &&
+          "bg-[hsl(var(--color-sec-base)/var(--bg-opacity))]",
+        kind === "conference" &&
+          "bg-[hsl(var(--color-pri-base)/var(--bg-opacity))] dark:bg-white/5",
+        kind === "working-group" &&
+          "bg-[hsl(229deg_100%_70.4%_/_var(--bg-opacity))]",
       )}
       target="_blank"
       rel="noreferrer"
     >
       <div className="flex flex-1 flex-col">
         <div
           className={clsx(
-            "flex items-center justify-between gap-2 px-2 text-neu-700 dark:text-neu-600 xs:px-4",
+            "flex h-[45px] items-center justify-between gap-2 px-2 text-neu-800 dark:text-neu-600 xs:px-4",
             meta
-              ? "border-b border-neu-200 py-2.5 dark:border-neu-100"
+              ? "border-b border-neu-200 py-2.5 dark:border-neu-50"
               : "-mb-2 pt-2 xs:-mb-4 xs:pt-3",
           )}
         >
+          <Tag color={eventTagColors[kind]}>{kind}</Tag>
           {meta ? (
-            <span className="typography-body-md font-medium">{meta}</span>
+            <span className="typography-body-md">{meta}</span>
           ) : (
             <span className="sr-only">Official GraphQL Local</span>
           )}
-          {official ? (
-            <Tag color="hsl(var(--color-pri-base))" className="*:gap-1">
-              <span className="font-sans" aria-hidden>
-                ★
-              </span>
-              Official
-            </Tag>
-          ) : meta ? null : (
-            <div className="h-[22px]" />
-          )}
         </div>
 
         <div className="typography-h3 flex min-h-[100px] flex-1 flex-col justify-center px-2 py-3 text-neu-900 xs:min-h-[124px] xs:px-4 xs:py-6">
@@ -109,15 +111,15 @@ export function EventCard({
 
         <div
           className={clsx(
-            "flex flex-wrap border-t border-neu-200 text-neu-700 dark:border-neu-100",
+            "flex flex-wrap border-t border-neu-200 text-neu-800 dark:border-neu-50",
             dateLabel && city
-              ? "grid grid-cols-2 divide-x divide-neu-200 dark:divide-neu-100"
+              ? "grid grid-cols-2 divide-x divide-neu-200 dark:divide-neu-50"
               : "",
           )}
         >
           {dateLabel && (
-            <div className="typography-body-sm flex items-center gap-1 px-2 py-1.5 text-neu-700 dark:text-neu-600 xs:gap-1.5 xs:px-4 xs:py-2.5">
-              <CalendarIcon className="size-4 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500 xs:size-5" />
+            <div className="typography-body-sm flex items-center gap-1 px-2 py-1.5 text-neu-800 dark:text-neu-600 xs:gap-1.5 xs:px-4 xs:py-2.5">
+              <CalendarIcon className="size-4 shrink-0 translate-y-[-.5px] text-neu-800 dark:text-neu-500 xs:size-5" />
               {parsedDate ? (
                 <time dateTime={parsedDate.toISOString()}>{dateLabel}</time>
               ) : (
@@ -126,8 +128,8 @@ export function EventCard({
             </div>
           )}
           {city && (
-            <div className="typography-body-sm flex items-center gap-1.5 whitespace-pre px-2 py-1.5 text-neu-700 dark:text-neu-600 xs:px-4 xs:py-2.5">
-              <PinIcon className="size-4 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500 xs:size-5" />
+            <div className="typography-body-sm flex items-center gap-1.5 whitespace-pre px-2 py-1.5 text-neu-800 dark:text-neu-600 xs:px-4 xs:py-2.5">
+              <PinIcon className="size-4 shrink-0 translate-y-[-.5px] text-neu-800 dark:text-neu-500 xs:size-5" />
               {city}
             </div>
           )}

src/app/(main)/community/events/event-filter-tag.tsx

@@ -0,0 +1,51 @@
+import { Tag } from "@/app/conf/_design-system/tag"
+import { CheckboxIcon } from "@/app/conf/_design-system/pixelarticons/checkbox-icon"
+import clsx from "clsx"
+
+export type EventKind = "meetup" | "conference" | "working-group"
+
+export const eventTagColors = {
+  conference: "hsl(var(--color-pri-base))",
+  meetup: "hsl(var(--color-sec-dark))",
+  "working-group": "#6883FF",
+}
+
+export interface EventFilterTagProps
+  extends Omit<React.HTMLAttributes<HTMLLabelElement>, "onChange"> {
+  kind: EventKind
+  checked: boolean
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export function EventFilterTag({
+  kind,
+  checked,
+  onChange,
+  ...rest
+}: EventFilterTagProps) {
+  return (
+    <label
+      {...rest}
+      className="cursor-pointer select-none hover:opacity-90 hover:ring hover:ring-neu-100 dark:hover:ring-neu-50"
+    >
+      <input
+        type="checkbox"
+        className="sr-only"
+        onChange={onChange}
+        checked={checked}
+      />
+      <Tag
+        color={eventTagColors[kind]}
+        className="flex py-[3px] pl-[3px] *:gap-1"
+      >
+        <CheckboxIcon
+          checked={checked}
+          style={{
+            color: eventTagColors[kind],
+          }}
+        />
+        {kind.replace("-", " ")}
+      </Tag>
+    </label>
+  )
+}