Add events page (#52)

package.json

@@ -32,6 +32,7 @@
     "date-fns-tz": "^3.2.0",
     "feed": "^4.2.2",
     "framer-motion": "^11.11.1",
+    "glob": "^11.0.0",
     "gray-matter": "^4.0.3",
     "isomorphic-dompurify": "^2.16.0",
     "next": "^14.2.14",

src/components/event-card.js

@@ -0,0 +1,39 @@
+import { Heading, aImage, Link } from '@/components/mdx'
+import {
+  Box,
+  LinkBox,
+  LinkOverlay,
+  Stack,
+  VStack,
+  Text,
+} from '@chakra-ui/react'
+import { Icon } from '@chakra-ui/react'
+import { FaCalendar, FaMapMarkerAlt } from 'react-icons/fa'
+import { distanceToNow, formatDate, formatTime } from '@/lib/date-formatting'
+
+export const EventCard = ({ event }) => {
+  return (
+    <Box p={6} rounded='lg' bg='gray.50' _dark={{ bg: 'gray.700' }}>
+      <VStack align={'start'}>
+        <Box>
+          <Link
+            href={`/events/${event.id}`}
+            fontSize={'xl'}
+            fontWeight={'bold'}
+          >
+            {event.name}
+          </Link>
+          <Text my={4} noOfLines={2}>
+            {event.description}
+          </Text>
+          <Text my={4} noOfLines={2}>
+            <Icon as={FaCalendar} /> {formatDate(event.starttime)}
+          </Text>
+          <Text my={4} noOfLines={4}>
+            <Icon as={FaMapMarkerAlt} /> {event.location}
+          </Text>
+        </Box>
+      </VStack>
+    </Box>
+  )
+}

src/data/footer-items.js

@@ -46,7 +46,7 @@ export const footerItems = {
     },
     {
       label: 'Events',
-      href: 'https://discourse.pangeo.io/',
+      href: '/events',
     },
   ],
 }

src/data/menu-items.js

@@ -2,6 +2,7 @@ export const menuItems = [
   { label: 'Discourse', href: 'https://discourse.pangeo.io/' },
   { label: 'Showcase', href: '/showcase' },
   { label: 'Meetings', href: '/meetings' },
+  { label: 'Events', href: '/events' },
   { label: 'Ecosystem', href: '/#ecosystem' },
   { label: 'Sponsors', href: '/#sponsors' },
   { label: 'Donate', href: '/#donate' },

src/events/agu-2024/index.md

@@ -0,0 +1,41 @@
+---
+name: 'Post-AGU Pangeo Hackathon'
+starttime: '2024-12-14T09:00-05:00'
+endtime: '2024-12-14T16:30-05:00'
+location: 'Washington, DC, USA'
+description: 'Join the Pangeo community for a hack-day / working meeting after AGU 2024'
+---
+
+## Overview
+
+Please join us for a Pangeo working meeting / hackathon on December 14 in Washington, DC! This event serves to bring together members of the Pangeo community to solve problems related to scientific research and programming.
+
+- **When**: Saturday, December 14, 2024
+- **Time**: 9 AM - 4:30 PM ET
+- **Where to register**: [Luma](https://lu.ma/8mj6f3qn)
+- **Registration deadline**: November 20, 2024
+- **Where**: Development Seed office (across the street from the convention center)
+- **Registration cost**: No registration fee
+- **Logistics**: Participants are expected to provide their own transportation to and from the event. Lunch will be provided by Earthmover!
+
+**Goals**:
+
+- Gather members of the Pangeo community to solve problems related to scientific research and programming
+- Make progress on moving forward from the "What's next for Pangeo" discussions
+- Support the development of domain-specific geoscience packages
+
+## Agenda
+
+- 8:30 - 9:00 - Coffee
+- 9:00 - 9:15 - Welcome and logistics
+- 9:15 - 9:30 - Introduction to projects
+- 9:30 - 12:00 - Break-out groups
+- 12:00 - 13:00 - Lunch
+- 13:00 - 15:00 - Break-out groups
+- 15:00 - 15:15 - Project wrap-up
+- 15:15 - 15:30 - Break
+- 15:30 - 16:30 - Discussion
+
+## Accessibility
+
+The Pangeo community strives to host inclusive, accessible events. To be respectful of those with allergies and environmental sensitivities, please refrain from wearing strong fragrances. To request an accommodation or for inquiries about accessibility, please contact Max Jones ([@maxrjones](https://discourse.pangeo.io/u/maxrjones)).

src/events/paris-2024/index.md

@@ -0,0 +1,15 @@
+---
+name: 'Pangeo and CNES collaboration meeting'
+starttime: '2024-11-12T09:00+01:00'
+endtime: '2024-11-12T17:00+01:00'
+location: 'Paris, France'
+description: 'Meet the European Pangeo Community and discuss CNES use cases and collaboration'
+---
+
+## Overview
+
+I’m pleased to invite those who are interested to join a meeting in Paris (or virtual) that will take place on the 12th of November. The idea is to be able to meet European resident involved in this community, but also to confront Pangeo ecosystem to CNES (French space agency) needs. It will this be splitted in at least two sessions, one general session about Pangeo, and one more focused on CNES work and potential collaboration with the community.
+
+This meeting will be limited to about 30 people in place, so please fill [this Google document](https://docs.google.com/document/d/1goKPEfsv784jnfEz-5zup9i_ociPz7Ck4fUrdfeIw3s)!
+
+More information available on the [Pangeo Discourse Post](https://discourse.pangeo.io/t/pangeo-europe-meeting-and-cnes-use-cases-and-collaboration/4550)

src/lib/events.js

@@ -0,0 +1,62 @@
+// import fs from 'fs'
+// import path from 'path'
+// import matter from 'gray-matter'
+// import glob from 'glob'
+
+const fs = require('fs')
+const path = require('path')
+const matter = require('gray-matter')
+const glob = require('glob')
+
+const eventsDirectory = path.join(process.cwd(), "src/events")
+
+function getSortedEventsMetadata() {
+
+  const allEvents = glob.sync(`${eventsDirectory}/**/*.md`).map((filePath) => {
+    const eventId = path.basename(path.dirname(filePath))
+    const eventPath = `${eventId}/${path.basename(filePath)}`
+    const fileContents = fs.readFileSync(filePath, 'utf8')
+    const matterResult = matter(fileContents)
+    return {
+      ...matterResult.data,
+      id: eventId,
+      href: `/events/${eventPath}`,
+      file: eventPath,
+    }
+  }).sort((a, b) => {
+    if (Date.parse(a.date) < Date.parse(b.date)) {
+      return 1
+    } else {
+      return -1
+    }
+  })
+
+  return allEvents
+
+}
+
+
+
+function getAllEventsIds() {
+  const allEvents = getSortedEventsMetadata()
+  return allEvents.map((event) => {
+    return {
+      params: {
+        id: event.id
+      }
+    }
+  })
+}
+
+function getEventData(id) {
+  const allEvents = getSortedEventsMetadata()
+  const event = allEvents.find((event) => event.id === id)
+  return event
+
+}
+
+module.exports = {
+  getSortedEventsMetadata,
+  getAllEventsIds,
+  getEventData,
+}

src/pages/events/[id].js

@@ -0,0 +1,111 @@
+import {
+  Box,
+  Button,
+  Container,
+  Divider,
+  Heading,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+
+import { ArrowBackIcon } from '@chakra-ui/icons'
+
+import { MDXRemote } from 'next-mdx-remote'
+
+import { Layout } from '@/components/layout'
+import { Link, mapping } from '@/components/mdx'
+import { distanceToNow, formatDate } from '@/lib/date-formatting'
+import { MDXElements } from '@/lib/mdx-elements'
+
+import { getAllEventsIds, getEventData } from '@/lib/events'
+
+import { serialize } from 'next-mdx-remote/serialize'
+import rehypeSlug from 'rehype-slug'
+
+import fs from 'fs'
+import matter from 'gray-matter'
+import path from 'path'
+
+export default function Event({ source, frontmatter, eventId }) {
+  return (
+    <Layout
+      title={`${frontmatter.name}`}
+      description={frontmatter.description}
+      url={`https://pangeo.io/events/${eventId}`}
+    >
+      <Box as={'section'}>
+        <Container maxW='container.lg' py={10}>
+          <Box spacing='3' alignItems='start'>
+            <VStack paddingTop='30px' spacing='2' alignItems='center'>
+              <Heading as={'h1'} textAlign={'center'} size='xl' my={4}>
+                {frontmatter.name}
+              </Heading>
+              <Text fontSize={'sm'} color={'gray.700'}>
+                {formatDate(frontmatter.starttime)} (
+                {distanceToNow(frontmatter.starttime)})
+              </Text>
+              <Divider my={2} />
+            </VStack>
+            <br></br>
+            <MDXRemote
+              {...source}
+              components={{ ...mapping, ...MDXElements }}
+            />
+            <Heading as={'h3'} size='lg' my={4}>
+              Code of Conduct
+            </Heading>
+            <Text>
+              All participants must abide by the{' '}
+              <Link
+                style={{
+                  textDecoration: 'underline',
+                }}
+                href='https://github.com/pangeo-data/governance/blob/master/conduct/code_of_conduct.md'
+              >
+                Pangeo Code of Conduct
+              </Link>
+              .
+            </Text>
+          </Box>
+
+          <Button
+            my={8}
+            as={Link}
+            href={'/events'}
+            variant={'outline'}
+            leftIcon={<ArrowBackIcon />}
+            colorScheme={'blue'}
+          >
+            Back to Events
+          </Button>
+          <Divider my={8} />
+          <br />
+        </Container>
+      </Box>
+    </Layout>
+  )
+}
+
+export async function getStaticPaths() {
+  const paths = getAllEventsIds()
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const eventData = getEventData(params.id)
+  const filePath = path.join(process.cwd(), 'src/events', eventData.file)
+  const source = fs.readFileSync(filePath, 'utf8')
+  const { content, data } = matter(source)
+  const mdxSource = await serialize(content, {
+    mdxOptions: {
+      remarkPlugins: [],
+      rehypePlugins: [rehypeSlug],
+      format: 'mdx',
+    },
+  })
+
+  return { props: { source: mdxSource, frontmatter: data, eventId: params.id } }
+}

src/pages/events/index.js

@@ -0,0 +1,62 @@
+import { Box, Container, Heading, SimpleGrid } from '@chakra-ui/react'
+
+import { EventCard } from '@/components/event-card'
+
+import { Layout } from '@/components/layout'
+import { getSortedEventsMetadata } from '@/lib/events'
+
+export default function Events({ allEventsData }) {
+  return (
+    <Layout
+      title={'Events | Pangeo'}
+      url={'https://pangeo.io/events'}
+      card={'/Pangeo-assets/pangeo_card_white.png'}
+    >
+      <Box my={8}>
+        <Container maxW='container.lg' py={20}>
+          <Heading as='h1' size='2xl'>
+            Upcoming events
+          </Heading>
+          <SimpleGrid
+            my={8}
+            columns={{ base: 1, md: 2, lg: 2 }}
+            spacing={8}
+            justifyContent={'space-between'}
+          >
+            {allEventsData
+              .filter((event) => Date.parse(event.endtime) >= Date.now())
+              .sort((a, b) => Date.parse(a.starttime) - Date.parse(b.starttime))
+              .map((event) => (
+                <EventCard key={event.id} event={event}></EventCard>
+              ))}
+          </SimpleGrid>
+          <Heading as='h1' size='2xl'>
+            Past events
+          </Heading>
+          <SimpleGrid
+            my={8}
+            columns={{ base: 1, md: 2, lg: 2 }}
+            spacing={8}
+            justifyContent={'space-between'}
+          >
+            {allEventsData
+              .filter((event) => Date.parse(event.endtime) < Date.now())
+              .sort((a, b) => Date.parse(a.starttime) - Date.parse(b.starttime))
+              .map((event) => (
+                <EventCard key={event.id} event={event}></EventCard>
+              ))}
+          </SimpleGrid>
+        </Container>
+      </Box>
+    </Layout>
+  )
+}
+
+export async function getStaticProps() {
+  const allEventsData = getSortedEventsMetadata()
+  return {
+    props: {
+      allEventsData,
+    },
+  }
+}