Improve the script

Author: hasparus

scripts/sync-working-groups/sync-working-groups.ts

@@ -24,13 +24,13 @@ const Instant = type({
 
 const calendarEventSchema = type({
   id: "string",
-  "title?": "string",
+  "summary?": "string",
   "status?": "string",
   "description?": "string",
   "location?": "string",
   start: Instant,
   end: Instant,
-  htmlLink: "string",
+  htmlLink: "string.url",
   updated: "string",
 })
 

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

@@ -74,7 +74,7 @@ export function EventCard({
     <a
       href={href}
       className={clsx(
-        "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]",
+        "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] lg:w-[408px]",
         "[--bg-opacity:0.05] hover:[--bg-opacity:0.07] dark:[--bg-opacity:0.03] hover:dark:[--bg-opacity:0.06]",
 
         "z-[4]",
@@ -99,7 +99,16 @@ export function EventCard({
         >
           <Tag color={eventTagColors[kind]}>{kind}</Tag>
           {meta ? (
-            <span className="typography-body-md">{meta}</span>
+            <span
+              className={clsx(
+                String(meta).length < 22
+                  ? "typography-body-md"
+                  : "typography-body-sm",
+                "overflow-hidden text-ellipsis whitespace-pre",
+              )}
+            >
+              {meta}
+            </span>
           ) : (
             <span className="sr-only">Official GraphQL Local</span>
           )}
@@ -121,7 +130,15 @@ export function EventCard({
             <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>
+                <time dateTime={parsedDate.toISOString()}>
+                  {kind === "working-group"
+                    ? parsedDate.toLocaleString(undefined, {
+                        dateStyle: "medium",
+                        timeStyle: "short",
+                        hour12: false,
+                      })
+                    : dateLabel}
+                </time>
               ) : (
                 <span>{dateLabel}</span>
               )}

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

@@ -75,7 +75,7 @@ export function EventsList({
 
   const tags: Set<EventKind> = new Set()
   events.forEach(event => {
-    // todo: add working groups
+    if ("start" in event) tags.add("working-group")
     if ("node" in event) tags.add("meetup")
     else tags.add("conference")
   })
@@ -124,8 +124,8 @@ export function EventsList({
                 key={event.id}
                 href={event.htmlLink}
                 date={new Date(event.start)}
-                name={event.title ?? "Working Group"}
-                city={event.location ?? "Online"}
+                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"
               />
             ) : (