Add Assemble!

hackclub · Jun 25, 2022 · 200bd79 · 200bd79
1 parent e2731dc
commit 200bd79
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 23 deletions.
diff --git a/components/event-card.js b/components/event-card.js
@@ -17,6 +17,9 @@ const EventCard = ({
  logo,
  virtual,
  hybrid,
+ hq = false,
+ footer,
+ lead,
  // distanceTo,
  invisible = false
 }) => (
@@ -38,9 +41,10 @@ const EventCard = ({
  itemScope
  itemType="https://schema.org/Event"
  variant="event"
- sx={{ display: invisible ? 'none' : 'flex' }}
+ sx={{ display: invisible ? 'none' : 'flex', px: 4 }}
  style={{
- backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`
+ backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
+ textAlign: hq ? 'left' : 'center'
  }}
  >
  {mlhAssociated && (
@@ -91,38 +95,66 @@ const EventCard = ({
  }}
  />
  )}
+ {lead && <Box
+ sx={{
+ mb: hq ? 0 : 'auto',
+ mt: hq ? 2 : 0,
+ width: '100%',
+ opacity: 1,
+ fontWeight: 800,
+ fontSize: 2
+ }}
+ >
+ <Text>
+ {lead}
+ </Text>
+ </Box>}
  <Heading
- as="h3"
+ as={'h3'}
  itemProp="name"
- sx={{ fontSize: [3, 4], mt: 2, mb: 3, overflowWrap: 'anywhere' }}
+ sx={{
+ fontSize: hq ? [4, 6] : [3, 4],
+ mt: hq ? 0 : 2,
+ mb: hq ? 0 : 3,
+ overflowWrap: 'anywhere',
+ width: '100%'
+ }}
  >
  {name}
  </Heading>
  <Box
  as="footer"
  sx={{
- mt: 'auto',
+ mt: hq ? 0 : 'auto',
+ mb: hq ? 2 : 0,
  width: '100%',
  opacity: 0.875
  }}
  >
- <Text as="span">{humanizedDateRange(start, end)}</Text>
- {/* distanceTo ? (
+ {footer ? (
+ footer
+ ) : (
+ <>
+ {' '}
+ <Text as="span">{humanizedDateRange(start, end)}</Text>
+ {/* distanceTo ? (
  <Text as="span">{`${humanizeDistance(distanceTo)} miles`}</Text>
  ) : ( */}
- <Text
- as="span"
- itemProp="location"
- itemScope
- itemType="https://schema.org/Place"
- >
- {!virtual && (
- <span itemProp="address">
- {': '}
- {formatAddress(city, state, country, countryCode)}
- </span>
- )}
- </Text>
+ <Text
+ as="span"
+ itemProp="location"
+ itemScope
+ itemType="https://schema.org/Place"
+ >
+ {!virtual && (
+ <span itemProp="address">
+ {': '}
+ {formatAddress(city, state, country, countryCode)}
+ </span>
+ )}
+ </Text>
+ </>
+ )}
  </Box>
  <Box sx={{ display: 'none' }}>
  <span itemProp="eventAttendanceMode">

diff --git a/components/grouping.js b/components/grouping.js
@@ -12,7 +12,7 @@ export default ({ title, desc, header, children, footer, events }) => (
  </Header>
  <Container sx={{ mt: [3, 4, 5] }}>
  {children}
- <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: [3, 4, 5] }}>
+ <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: [3, 4, 4] }}>
  {events.map(event => (
  <EventCard id={event.id} key={event.id} {...event} />
  ))}

diff --git a/pages/index.js b/pages/index.js
@@ -1,10 +1,11 @@
 import Grouping from '../components/grouping'
-import { Box, Heading, Text, Link } from 'theme-ui'
+import { Box, Heading, Text, Link, Container } from 'theme-ui'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Signup from '../components/signup'
 import Years from '../components/years'
 import Regions from '../components/regions'
+import EventCard from '../components/event-card'
 import { filter, orderBy, slice, last, remove } from 'lodash'
 import { timeSince, humanizedDateRange } from '../lib/util'
 import { getGroupingData } from '../lib/data'
@@ -53,6 +54,7 @@ export default ({ stats, emailStats, events }) => (
  </Link>{' '}
  staff.
  </Text>
+
  </>
  }
  events={events}
@@ -69,7 +71,23 @@ export default ({ stats, emailStats, events }) => (
  <Regions />
  </section>
  }
- />
+ > 
+ <EventCard
+ {...{
+ id: 'assemble',
+ name: 'Hack Club Assemble',
+ website: 'https://assemble.hackclub.com',
+ start: '2022-08-05T17:00:00.000Z',
+ end: '2022-08-07T18:30:00.000Z',
+ banner:
+ 'https://cloud-7rzmfbze1-hack-club-bot.vercel.app/0golden-bay.png',
+ city: 'San Francisco',
+ state: 'CA',
+ lead: `Let's start an IRL hackathon renaissance at...`,
+ footer: `August 5-7 ~ Figma's San Francisco HQ ~ $40k in Travel Stipends ~ Fully Open Sourced`,
+ hq: true
+ }}
+ /></Grouping>
 )
 
 export const getStaticProps = async () => {