APAC hackathons to /apac page

README.md

@@ -28,7 +28,7 @@ Stuff you need installed ahead of time:
 
 Clone it!
 
- $ git clone https://github.com/hackclub/hackathons
+ $ git clone https://github.com/hackclub/hackathons.git
 
 Go into the directory!
 

components/banner.js

@@ -0,0 +1,68 @@
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from '@hackclub/icons'
+
+const flip = keyframes({
+ from: { transform: 'scaleY(0)' },
+ to: { transform: 'scaleY(100%)' }
+})
+
+const Banner = ({
+ caption,
+ copy,
+ iconLeft,
+ iconRight,
+ color = 'accent',
+ sx = {},
+ ...props
+}) => (
+ <Card
+ as={props.href ? 'a' : 'div'}
+ variant="interactive"
+ sx={{
+ mx: 'auto',
+ maxWidth: 'copy',
+ width: '100%',
+ textAlign: 'left',
+ textDecoration: 'none',
+ lineHeight: 'caption',
+ display: 'flex',
+ alignItems: 'center',
+ borderWidth: '2px',
+ borderStyle: 'solid',
+ borderColor: 'primary',
+ p: [2, 3],
+ px: 3,
+ mt: 4,
+ transform: 'scale(1)',
+ '@media (prefers-reduced-motion: no-preference)': {
+ animation: `${flip} 0.5s ease-out`
+ },
+ svg: { flexShrink: 'none' },
+ ...sx
+ }}
+ {...props}
+ >
+ {iconLeft && (
+ <Icon
+ glyph={iconLeft}
+ sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+ />
+ )}
+ <Text
+ as="p"
+ sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+ >
+ <strong>{copy}</strong>
+ {caption && (
+ <Text as="span" variant="caption" color="secondary">
+ {' '}
+ {caption}
+ </Text>
+ )}
+ </Text>
+ {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
+ </Card>
+)
+
+export default Banner

lib/data.js

@@ -14,7 +14,7 @@ const normalizeWebsite = url => {
 
 export const getEvents = async () => {
  let events = await getJSON(
- 'https://airbridge.hackclub.com/v0/hackathons.hackclub.com/applications?select=%7B%22filterByFormula%22:%22approved=1%22%7D'
+ 'https://api2.hackclub.com/v0.1/hackathons.hackclub.com/applications?select%7B%22filterByFormula%22:%22approved=1%22%7D'
  )
  events = filter(events, 'fields.approved')
  events = events.map(
@@ -34,7 +34,8 @@ export const getEvents = async () => {
  latitude: fields.lat,
  longitude: fields.lng,
  virtual: fields.virtual || false,
- mlhAssociated: fields.mlh_associated || false
+ mlhAssociated: fields.mlh_associated || false,
+ apac: fields.apac || false
  })
  )
 

lib/regions.json

@@ -6,6 +6,6 @@
  "the Bay Area": "https://images.unsplash.com/photo-1501196788499-459dbea97736?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=512&q=80",
  "the USA": "https://www.nps.gov/yose/planyourvisit/images/20170618_155330.jpg?maxwidth=512&maxheight=400&autorotate=false",
  "Canada": "https://images.unsplash.com/photo-1479854851860-18d97e109331?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=512&q=80",
- "India": "https://images.unsplash.com/photo-1564507592333-c60657eea523?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=512&q=80"
+ "Asia-Pacific": "https://cdn.britannica.com/86/170586-050-AB7FEFAE/Taj-Mahal-Agra-India.jpg?maxwidth=512&maxheight=400&autorotate=false"
  }
 }

next.config.js

@@ -3,8 +3,28 @@ const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx'],
  eslint: {
  ignoreDuringBuilds: true
+ },
+ async redirects() {
+ return [
+ {
+ source: '/india',
+ destination: '/apac',
+ permanent: false
+ },
+ {
+ source: '/list-of-hackathons-in-asia-pacific',
+ destination: '/apac',
+ permanent: false
+ },
+ {
+ source: '/list-of-hackathons-in-india',
+ destination: '/apac',
+ permanent: false
+ }
+ ]
  }
 }
+
 const withPlugins = require('next-compose-plugins')
 
 const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ })

pages/[region].js

@@ -17,9 +17,16 @@ export default ({ name, events, emailStats }) => {
  desc={`Find, register, and compete in ${events.length} student-led hackathons around ${name}.`}
  events={events}
  header={<Signup stats={emailStats} initialLocation={startCase(name)} />}
- footer={<> <Box sx={{mt: [3, 4]}} > <Regions showAll /> </Box> </>}
- >
- </Grouping>
+ footer={
+ <>
+ {' '}
+ <Box sx={{ mt: [3, 4] }}>
+ {' '}
+ <Regions showAll />{' '}
+ </Box>{' '}
+ </>
+ }
+ ></Grouping>
  )
 }
 
@@ -44,11 +51,11 @@ const distance = (lat1, lon1, lat2, lon2) => {
 let regions = [
  {
  name: 'Los Angeles',
- filter: (event) => event.city === 'Los Angeles'
+ filter: event => event.city === 'Los Angeles'
  },
  {
  name: 'Chicago',
- filter: (event) => {
+ filter: event => {
  const position = [41.969649, -87.720643]
  return (
  distance(position[0], position[1], event.latitude, event.longitude)
@@ -58,7 +65,7 @@ let regions = [
  },
  {
  name: 'New York',
- filter: (event) => {
+ filter: event => {
  const position = [40.7128, -74.006]
  return (
  distance(position[0], position[1], event.latitude, event.longitude)
@@ -68,7 +75,7 @@ let regions = [
  },
  {
  name: 'the Bay Area',
- filter: (event) => {
+ filter: event => {
  const position = [37.641045, -122.228916]
  return (
  distance(position[0], position[1], event.latitude, event.longitude)
@@ -78,21 +85,17 @@ let regions = [
  },
  {
  name: 'the USA',
- filter: (event) => ['US', 'USA', 'United States'].includes(event.country)
+ filter: event => ['US', 'USA', 'United States'].includes(event.country)
  },
  {
  name: 'Canada',
- filter: (event) => ['CA', 'Canada'].includes(event.country)
- },
- {
- name: 'India',
- filter: (event) => ['IN', 'India'].includes(event.country)
+ filter: event => ['CA', 'Canada'].includes(event.country)
  }
 ]
-regions = map(regions, (region) => ({ id: kebabCase(region.name), ...region }))
+regions = map(regions, region => ({ id: kebabCase(region.name), ...region }))
 
 export const getStaticPaths = () => {
- const paths = map(map(regions, 'id'), (id) => ({
+ const paths = map(map(regions, 'id'), id => ({
  params: { region: `list-of-hackathons-in-${id}` }
  }))
  return { paths, fallback: false }
@@ -103,7 +106,7 @@ export const getStaticProps = async ({ params }) => {
  region = find(regions, ['id', region.replace('list-of-hackathons-in-', '')])
  let { name } = region
  let { events, emailStats } = await getGroupingData()
- events = events.filter((event) => region.filter(event))
+ events = events.filter(event => region.filter(event))
  events = orderBy(events, 'start', 'desc')
  return { props: { name, events, emailStats }, revalidate: 10 }
 }

pages/apac.js

@@ -0,0 +1,56 @@
+import Grouping from '../components/grouping'
+import Regions from '../components/regions'
+import Meta from '@hackclub/meta'
+import { Heading, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import { orderBy, filter } from 'lodash'
+import { getEvents } from '../lib/data'
+
+export default ({ name, events, emailStats }) => {
+ const title = `High School Hackathons in ${new Date().getFullYear()}`
+
+ return (
+ <Grouping
+ includeMeta={false}
+ header={
+ <>
+ <Meta
+ as={Head}
+ title="High School Hackathons"
+ description={`${title}. A curated list of online and in-person high school hackathons in the Asia-Pacific region, maintained by Hack Club staff.`}
+ />
+ <Heading as="h1" variant="title" sx={{ color: 'primary' }}>
+ High School Hackathons in the Asia-Pacific Region
+ </Heading>
+ <Text as="p" variant="subtitle" sx={{ my: 3 }}>
+ A curated list of in-person and online high school hackathons.
+ <Text as="p" variant="subtitle">
+ {' '}
+ Maintained by the{' '}
+ <Link href="https://hackclub.com/">Hack Club</Link> staff.
+ </Text>
+ </Text>
+ </>
+ }
+ events={events}
+ footer={
+ <section>
+ {/* <Signup stats={emailStats} /> At the moment, the email signup is broken. */}
+ <Heading variant="headline" sx={{ mt: [4, 5], mb: [3, 4] }}>
+ Explore popular regions
+ </Heading>
+ <Regions />
+ </section>
+ }
+ />
+ )
+}
+
+export const getStaticProps = async (req, res) => {
+ let events = await getEvents()
+ // events where the field apac = true
+ events = filter(events, 'apac')
+ // upcoming events first
+ events = orderBy(events, 'start', 'desc')
+ return { props: { events }, revalidate: 10 }
+}

pages/index.js

@@ -5,9 +5,10 @@ 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 } from 'lodash'
+import { filter, orderBy, slice, last, remove } from 'lodash'
 import { timeSince, humanizedDateRange } from '../lib/util'
 import { getGroupingData } from '../lib/data'
+import Banner from '../components/banner'
 
 const title = `High School Hackathons in ${new Date().getFullYear()}`
 const eventsPreview = events =>
@@ -53,6 +54,13 @@ export default ({ stats, emailStats, events }) => (
  </Link>{' '}
  staff.
  </Text>
+ {/* <Banner
+ copy="Looking for hackathons in the APAC (Asia-Pacific) region?"
+ caption="Check out the APAC page!"
+ href="/apac"
+ iconRight="enter"
+ color="primary"
+ /> */}
  </>
  }
  events={events}