polish

Author: dimaMachina

website/src/pages/_meta.tsx

@@ -20,9 +20,15 @@ export default {
     type: "menu",
     title: "Community",
     items: {
-      index: { title: "Community Resources" },
-      "upcoming-events": { title: "Events & Meetups" },
-      contribute: { title: "Contribute to GraphQL" },
+      index: {
+        title: "Community Resources",
+        href: "/community/resources/official-channels",
+      },
+      events: { title: "Events & Meetups" },
+      contribute: {
+        title: "Contribute to GraphQL",
+        href: "/community/contribute/essential-links",
+      },
     },
     theme: {
       breadcrumb: false,
@@ -84,6 +90,6 @@ export default {
   conf: {
     type: "page",
     title: "GraphQLConf",
-    route: '/conf/2024',
+    route: "/conf/2024",
   },
 }

website/src/pages/blog.mdx

@@ -80,7 +80,7 @@ export default function Blog(props) {
         <h3 className="text-2xl font-bold">Categories</h3>
         {tagList}
       </div>
-      <div className="container grid md:grid-cols-2 gap-7">
+      <div className="container grid md:grid-cols-2 gap-7 pb-10">
         {blogList}
       </div>
     </>

website/src/pages/community/events.mdx

@@ -13,66 +13,78 @@ import "leaflet/dist/leaflet.css"
 import pinkCircle from "./pink-circle.svg"
 
 export function EventCard({ href, date, city, name, meta }) {
-  return <a
+  return (
+    <a
       href={href}
       className={clsx(
         "text-current no-underline flex border border-neutral-300 dark:border-neutral-700 rounded-none",
-      'hover:!border-primary hover:shadow-2xl hover:shadow-primary/10 transition-colors *:transition-colors hover:relative group',
-      "relative after:content-['_↗'] after:font-sans after:absolute after:right-4 after:top-4"
+        "hover:!border-primary hover:shadow-2xl hover:shadow-primary/10 transition-colors *:transition-colors hover:relative group",
+        "relative after:content-['_↗'] after:font-sans after:absolute after:right-4 after:top-4",
       )}
       target="_blank"
       rel="noreferrer"
     >
-    {date && <div
-      className="px-12 py-9 flex flex-col items-center bg-zinc-100 dark:bg-zinc-800 group-hover:dark:bg-zinc-700 w-48"
-    >
-      <div className="text-7xl font-bold">{date.getDate()}</div>
-      <div className="text-lg">{date.toLocaleString('en', {
-        month: 'short',
-        year: 'numeric'
-      })}</div>
-    </div>}
-    <div
-      className="bg-white dark:bg-neutral-900 group-hover:dark:bg-zinc-800 grow py-7 px-10 flex flex-col gap-4"
-    >
+      {date && (
+        <div className="px-12 py-9 flex flex-col items-center bg-zinc-100 dark:bg-zinc-800 group-hover:dark:bg-zinc-700 w-48">
+          <div className="text-7xl font-bold">{date.getDate()}</div>
+          <div className="text-lg">
+            {date.toLocaleString("en", {
+              month: "short",
+              year: "numeric",
+            })}
+          </div>
+        </div>
+      )}
+      <div className="bg-white dark:bg-neutral-900 group-hover:dark:bg-zinc-800 grow py-7 px-10 flex flex-col gap-4">
         <b className="text-primary">{meta}</b>
         <div className="font-bold text-2xl">{name}</div>
         <div className="text-lg flex items-center gap-2">
-        <LocationIcon className="fill-primary h-5" />{city}
-        {date && <>
-          <ClockIcon
-            className="ml-6 fill-primary h-5"
-          />{date.toLocaleString('en', { hour: 'numeric', minute: 'numeric' })}
-        </>}
+          <LocationIcon className="fill-primary h-5" />
+          {city}
+          {date && (
+            <>
+              <ClockIcon className="ml-6 fill-primary h-5" />
+              {date.toLocaleString("en", {
+                hour: "numeric",
+                minute: "numeric",
+              })}
+            </>
+          )}
         </div>
       </div>
     </a>
+  )
 }
 
-export const { pastEvents, upcomingEvents } = 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: [] })
+export const { pastEvents, upcomingEvents } = 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: [] },
+)
 
 export function Events({ events }) {
-  return <div className="mt-6">
-    {events.map(event => (
-      <EventCard
-        key={event.slug}
-        href={event.eventLink}
-        date={new Date(event.date)}
-        meta={event.host}
-        name={event.name}
-        city={event.location}
-      />
-    ))}
-  </div>
+  return (
+    <div className="mt-6">
+      {events.map(event => (
+        <EventCard
+          key={event.slug}
+          href={event.eventLink}
+          date={new Date(event.date)}
+          meta={event.host}
+          name={event.name}
+          city={event.location}
+        />
+      ))}
+    </div>
+  )
 }
 
 ## Upcoming Events
@@ -89,34 +101,37 @@ export function Events({ events }) {
 export function Meetups() {
   useEffect(() => {
     // Load only on client
-    import('leaflet').then(L => {
+    import("leaflet").then(L => {
       // Fixes GET http://localhost:3000/community/upcoming-events/marker-icon-2x.png 404 (Not Found)
       // and replace default marker image
       L.Icon.Default.mergeOptions({
         iconRetinaUrl: pinkCircle.src,
-        shadowUrl: '',
-      });
-      const map = L.map('map').setView([45, -15], 2);
-      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+        shadowUrl: "",
+      })
+      const map = L.map("map").setView([45, -15], 2)
+      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map)
       for (const { node } of meetups) {
         L.marker([node.latitude, node.longitude])
           .addTo(map)
-          .bindPopup(`<a href="${node.link}" target="_blank" rel="noreferrer" class="!text-primary">${node.name}</a>`)
+          .bindPopup(
+            `<a href="${node.link}" target="_blank" rel="noreferrer" class="!text-primary">${node.name}</a>`,
+          )
       }
     })
-  }, []);
-
-return <>
-<div id="map" className="h-96 my-6" />
-{meetups.map(({ node }) => (
-<EventCard
-        key={node.id}
-        href={node.link}
-        name={node.name}
-        city={node.city}
-      />
-))}
-  </>
+  }, [])
+  return (
+    <>
+      <div id="map" className="h-96 my-6" />
+      {meetups.map(({ node }) => (
+        <EventCard
+          key={node.id}
+          href={node.link}
+          name={node.name}
+          city={node.city}
+        />
+      ))}
+    </>
+  )
 }
 
 <Meetups />
@@ -186,7 +201,6 @@ const urls = meetups.filter(
 
 export const EventsIntro = () => {
   const { events } = useData();
-
   return <p>Join one of <strong>{events.length}</strong> recent or upcoming GraphQL events around the world!</p>
 }