-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.js
100 lines (97 loc) · 3.07 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import Grouping from '../components/grouping'
import { Box, Heading, Text, Link } 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 { filter, orderBy, slice, last, remove } from 'lodash'
import { timeSince, humanizedDateRange } from '../lib/util'
import { getGroupingData } from '../lib/data'
const title = `High School Hackathons in ${new Date().getFullYear()}`
const eventsPreview = events =>
slice(events, 0, 4)
.map(
event =>
`${event.name} (${humanizedDateRange(event.start, event.end)}) … `
)
.join('')
export default ({ stats, emailStats, events }) => (
<Grouping
includeMeta={false}
header={
<>
<Meta
as={Head}
title={title}
description={`${title}. A curated list of online and in-person high school hackathons with ${
events.length
} events in ${stats.state} states + ${
stats.country
} countries. Maintained by the Hack Club staff. ${eventsPreview(
events
)}`}
/>
<Heading as="h1" variant="title" sx={{ color: 'primary' }}>
High School Hackathons{' '}
<Box as="br" sx={{ display: ['none', 'block'] }} />
in {new Date().getFullYear()}
</Heading>
<Text as="p" variant="subtitle" sx={{ my: 3 }}>
A curated list of high school hackathons with
<Box as="br" sx={{ display: ['none', 'block'] }} /> {stats.total}
events in {stats.state}
states + {stats.country}
countries.
</Text>
<Text as="p" variant="subtitle">
{' '}
Maintained by the <Link href="https://hackclub.com/">
Hack Club
</Link>{' '}
staff.
</Text>
</>
}
events={events}
footer={
<section>
<Signup stats={emailStats} />
<Heading variant="headline" sx={{ mt: [4, 5], mb: [3, 4] }}>
Explore by year
</Heading>
<Years />
<Heading variant="headline" sx={{ mt: [4, 5], mb: [3, 4] }}>
Explore popular regions
</Heading>
<Regions />
</section>
}
/>
)
export const getStaticProps = async () => {
let { events, emailStats } = await getGroupingData()
let stats = {
total: events.length,
state: new Set(
events
.filter(event => ['US', 'USA', 'United States'].includes(event.country))
.map(event => event.state)
).size,
country: new Set(events.map(event => event.country)).size,
lastUpdated: timeSince(
last(orderBy(events, 'createdAt')).createdAt,
false,
new Date(),
true
)
}
// Sort upcoming events by start date
events = orderBy(
filter(events, e => new Date(e.start) >= new Date()),
'start'
)
// Filter out apac hackathons. Moved to /apac as of 2021-11-05
events = filter(events, 'country')
return { props: { events, stats, emailStats }, revalidate: 1 }
}