refactor: *

client/package.json

@@ -21,6 +21,7 @@
     "copy-webpack-plugin": "11.0.0",
     "css-loader": "6.8.1",
     "html-webpack-plugin": "5.5.3",
+    "moment": "^2.29.4",
     "node-polyfill-webpack-plugin": "2.0.1",
     "postcss-loader": "7.3.3",
     "react": "18.2.0",

client/src/app.tsx

@@ -2,13 +2,11 @@ import { Header } from "./components/header";
 import { Events } from "./components/events";
 import { Intro } from "./components/intro";
 import { Footer } from "./components/footer";
-import { Callout } from "./components/callout";
 import { Images } from "./components/images";
 
 export function App() {
   return (
     <div className="flex flex-col min-h-screen text-graphql-blue">
-      <Callout />
       <Header />
       <Intro />
       <Images />

client/src/components/events.tsx

@@ -1,6 +1,7 @@
 import { EventType } from "@graphql-events/server/src/events";
 import { useState, useEffect } from "react";
 import { getEvents } from "../api";
+import moment from "moment";
 
 export function Events() {
   const [events, setEvents] = useState<EventType[]>([]);
@@ -22,9 +23,12 @@ export function Events() {
         <h2 className="text-3xl font-bold mb-4">Events</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {events.map((event) => (
-            <div
+            <a
+              href={event.eventLink}
               key={event.slug}
-              className="bg-white rounded-lg border border-graphql-border shadow-md overflow-hidden"
+              className="bg-white rounded-lg border border-graphql-border shadow-md overflow-hidden hover:border-2 hover:border-graphql-pink hover:cursor-pointer transition-colors duration-300"
+              target="_blank" // to open links in a new tab
+              rel="noopener noreferrer" // for security reasons
             >
               <img
                 src={event.coverImage}
@@ -34,15 +38,18 @@ export function Events() {
 
               <div className="p-4">
                 <h3 className="text-xl font-semibold mb-2">{event.name}</h3>
-                <p className="text-gray-600">{event.description}</p>
               </div>
               <div className="p-4 border-t border-graphql-border">
-                <p className="text-sm text-gray-600">Date: {event.date}</p>
                 <p className="text-sm text-gray-600">
-                  Location: {event.location}
+                  Date:{" "}
+                  {moment(event.date).format("dddd, MMMM Do YYYY [at] h:mm A")}
+                </p>
+
+                <p className="text-sm text-gray-600">
+                  Location: <span className="font-bold">{event.location}</span>
                 </p>
               </div>
-            </div>
+            </a>
           ))}
         </div>
       </div>

events.json

@@ -3,54 +3,48 @@
     "name": "Singapore November @ LLI",
     "slug": "graphql-sigapore-6",
     "location": "Singapore",
-    "date": "2023-11-15",
+    "date": "2023-11-15T18:00:00+08:00",
     "coverImage": "https://secure.meetupstatic.com/photos/event/e/1/1/e/600_517197630.webp?w=750",
-    "eventLink": "https://www.meetup.com/graphql-sg/events/296809027/",
-    "description": "Join us for another insightful session where we delve deeper into GraphQL, API, and related topics."
+    "eventLink": "https://www.meetup.com/graphql-sg/events/296809027/"
   },
   {
     "name": "What's wrong with GraphQL?!",
     "slug": "whats-wrong-with-graphql",
     "location": "New York",
-    "date": "2023-11-15",
+    "date": "2023-11-15T16:00:00-05:00",
     "coverImage": "https://guild.host/social/event/whats-wrong-with-graphql-rn47hs/card.svg",
-    "eventLink": "https://guild.host/events/whats-wrong-with-graphql-rn47hs",
-    "description": "Join us for another insightful session where we delve deeper into GraphQL, API, and related topics."
+    "eventLink": "https://guild.host/events/whats-wrong-with-graphql-rn47hs"
   },
   {
     "name": "Bangkok November @ Seven Peaks",
     "slug": "graphql-bangkok-12",
     "location": "Bangkok",
-    "date": "2023-11-02",
+    "date": "2023-11-02T18:00:00+07:00",
     "coverImage": "https://secure.meetupstatic.com/photos/event/b/7/5/3/600_516646931.webp?w=750",
-    "eventLink": "https://www.meetup.com/graphql-bangkok/events/296635356/",
-    "description": "Join us for another insightful session where we delve deeper into GraphQL, API, and related topics."
+    "eventLink": "https://www.meetup.com/graphql-bangkok/events/296635356/"
   },
   {
     "name": "Seattle October @ Microsoft",
     "slug": "graphql-seattle-01",
     "location": "Seattle",
-    "date": "2023-10-26",
+    "date": "2023-10-26T18:00:00-07:00",
     "coverImage": "https://secure.meetupstatic.com/photos/event/9/5/d/1/600_515858353.webp?w=750",
-    "eventLink": "https://www.meetup.com/graphql-seattle/events/296065732",
-    "description": "Join us for another insightful session where we delve deeper into GraphQL, API, and related topics."
+    "eventLink": "https://www.meetup.com/graphql-seattle/events/296065732"
   },
   {
     "name": "San Francisco September @ GitHub",
     "slug": "graphql-sf-12",
     "location": "San Francisco",
-    "date": "2023-09-19",
+    "date": "2023-09-19T18:00:00-07:00",
     "coverImage": "https://secure.meetupstatic.com/photos/event/5/f/a/a/600_515784490.webp?w=750",
-    "eventLink": "https://www.meetup.com/graphql-sf/events/295804141/",
-    "description": "Join us for another insightful session where we delve deeper into GraphQL, API, and related topics."
+    "eventLink": "https://www.meetup.com/graphql-sf/events/295804141/"
   },
   {
     "name": "London September @ Neo4j",
     "slug": "graphql-london-01",
     "location": "London",
-    "date": "2023-09-07",
+    "date": "2023-09-07T18:00:00+01:00",
     "coverImage": "https://ik.imagekit.io/guild/prod/681642ce-8bd6-4902-9b5a-5f1492614a4f.png?tr=w-1067:c-at_max,w-1067,h-533",
-    "eventLink": "https://guild.host/events/september-meetup-lxmkv4",
-    "description": "Join us for another insightful session where we delve deeper into GraphQL, API, and related topics."
+    "eventLink": "https://guild.host/events/september-meetup-lxmkv4"
   }
 ]

server/src/events.ts

@@ -6,7 +6,6 @@ export const EventSchema = z.object({
   location: z.string(),
   date: z.string(),
   coverImage: z.string(),
-  description: z.string(),
   eventLink: z.string(),
 });