Skip to content

Latest commit

 

History

History
377 lines (324 loc) · 11.5 KB

events.mdx

File metadata and controls

377 lines (324 loc) · 11.5 KB
title
Events & Meetups

{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}

Events & Meetups

import { LocationIcon, ClockIcon } from "../../icons" import { clsx } from "clsx" import { useEffect } from "react" import { useData } from "nextra/hooks" import { meetups } from "../../components/meetups" import { events } from "../../components/events" import "leaflet/dist/leaflet.css" import pinkCircle from "./pink-circle.svg" import { Button } from '../../app/conf/_components/button'

export function EventCard({ href, date, city, name, meta }) { 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", )} target="_blank" rel="noreferrer" > {date && (

{date.getDate()}
{date.toLocaleString("en", { month: "short", year: "numeric", })}
)}
{meta}
{name}
{city}
{date && (
{date.toLocaleString("en", { hour: "numeric", minute: "numeric", })}
)}
) }

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 (

{events.map(event => ( <EventCard key={event.slug} href={event.eventLink} date={new Date(event.date)} meta={event.host} name={event.name} city={event.location} /> ))}
) }

Events

Start a GraphQL Local!
Past Events

Meetups

If you are interested in hosting a GraphQL meetup, The GraphQL Foundation is happy to promote your GraphQL event through the official communication channels.

Please contact us in the #meetups-admin channel on the community Discord channel.

export function Meetups() { useEffect(() => { // Load only on client 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) 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>, ) } }) }, []) return ( <>

{meetups.map(({ node }) => ( ))} </> ) }

{/*

Join the GraphQL Community

The GraphQL community is growing fast, with conferences, workshops, and meetups happening around the world.

Join our community to stay up to date with the latest developments, to learn from your peers, and to share your own experiences.

Browse the list of community meetups below, or search through the GraphQL events to find an event near you.

export const CommunityIntro = () => { const { meetups } = useData() return (

Join one of {meetups.length} GraphQL Meetups around the world!

) }

export const UrlList = ({ urls }) => { return (

) }

export const CommunityList = () => { const data = useData(); const meetups = data.meetups; const unsetContinents = meetups.map((meetup) => meetup.continent); const continents = [...new Set(unsetContinents)];

return (

{continents.map((continent, index) => { const urls = meetups.filter( (meetup) => meetup.continent === continent ); 
        return (
          <div key={index}>
            <h3>{continent}</h3>
            <UrlList urls={urls} />
          </div>
        );
      })}
    </div>
  </div>
</div>

) }

export const EventsIntro = () => { const { events } = useData(); return

Join one of {events.length} recent or upcoming GraphQL events around the world!

}

export const EventsList = () => { const data = useData(); const events = data.events;

return (
  <div className='mt-5'>
    <div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full">
        {events.map((event) => {
          return (
            <div
              key={event.slug}
              className="rounded-lg shadow-md"
            >
              <img
                loading="lazy"
                src={event.coverImage}
                alt={event.name}
                className="w-full h-40 object-contain"
              />
              <div className="p-4 flex flex-col gap-3">
                <a
                  href={event.eventLink}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-md font-semibold mb-2 underline"
                >
                  {event.name}
                </a>
                <p className="text-xs">
                  Hosted by:{" "}
                  <a
                    href={event.hostLink}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="font-bold underline"
                  >
                    {event.host}
                  </a>
                </p>
              </div>
              <div className="p-4">
                <p className="text-xs">
                  Location:{" "}
                  <span className="font-bold">{event.location}</span>
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </div>
)

}

GraphQL Communities

GraphQL Events

Events

/} {/ None currently scheduled */}

{/* Event template, copy and paste what you need. Please note that the only three required fields are the name of the event, who is organizing and hosting it, and the link to the code of conduct. Events without this information can't be posted.

[Name of the event - REQUIRED]

  • Date(s): [date]
  • Location: [city, state, country|Virtual|Hybrid]
  • Registration: [link to reg site, with cost]
  • CFP: [link to CFP site]
  • Schedule: [link to schedule site]
  • Host: [name of organization or company hosting the event - REQUIRED]
  • Code of Conduct: [link to code of conduct - REQUIRED]

*/}

{/*

GraphQLConf 2023

Meetups

North America

South America

Europe

Australia

Asia

Africa

*/}