Launch Elon announcement (#17)

* Begin Elon page * Get content on Elon page * Add content * First pass * Small change * Light second pass * Round 3 updates * Small wording change * Do another pass * Remove biography paragraph * Grammar * Wording * Break out sentence into own paragraph * Grammar * More small changes * Fix small issue * More small adjustments * Final small changes for this pass * Link Hack Club Bank * Add preface * Clarify that I had skillz * Add frank.ly * Clarify how money is spent in Elon text * Add social card to Elon page * Add Zach's signature * Begin Elon page * Get content on Elon page * Add content * First pass * Small change * Light second pass * Round 3 updates * Small wording change * Do another pass * Remove biography paragraph * Grammar * Wording * Break out sentence into own paragraph * Grammar * More small changes * Fix small issue * More small adjustments * Final small changes for this pass * Link Hack Club Bank * Add preface * Clarify that I had skillz * Add frank.ly * Clarify how money is spent in Elon text * Add social card to Elon page * Add Zach's signature * Update to latest * Add my name under signature * Upgrade dependencies * Add sparkles * Continue editing Elon page * Improve badges * Rebase * Update card * Pass of latest copy * Small wording improvements * Switch to @hackclub/meta 1.0.0 * Improve readability * Add homepage announcement * Fix meta tags on Elon page Co-authored-by: Zach Latta <zach@zachlatta.com> Co-authored-by: Christina Asquith <60162904+christinaasquith@users.noreply.github.com>
2026-04-19 14:17:06 +00:00 · 2020-05-20 12:48:52 -04:00 · 2020-05-20 12:48:52 -04:00 · dfdd2a9c91
commit dfdd2a9c91
parent 5ad1a1ad6f
15 changed files with 544 additions and 113 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,4 @@
 .next
 node_modules
 .DS_Store
+public
--- a/components/elon.mdx
+++ b/components/elon.mdx
@ -0,0 +1,50 @@
+Elon Musk holds a special place amongst hackers. After growing up in a difficult
+family situation in South Africa, working his way in small jobs until reaching
+Los Angeles, teaching himself to code, and making hundreds of millions
+co-founding PayPal, he kept on building.
+
+It was a huge honor last month to have Elon [spend an hour in a Hack Club
+AMA](https://youtu.be/riru9OzScwk)—at one point he remarked we were “asking
+better questions than all the mainstream media.”
+
+Afterwards, Elon wanted to support Hack Club further.
+
+# Today, I’m proud to share: Elon&nbsp;Musk is donating $500,000 to&nbsp;Hack&nbsp;Club.
+
+In so many ways, this is a milestone for every Hack Clubber. 6 years ago, I
+started Hack Club as a 16-year-old programmer living on my own, scraping by,
+barely able to make rent. Now Elon Musk is one of our largest supporters.
+
+Elon is supporting us because we are a community of builders. When hackers see
+problems in the world, we don’t blame someone else: we try to take them on
+ourselves to solve. Elon is very selective about the nonprofits he supports and
+I’m proud Hack Club is one of them.
+
+So…how is Hack Club going to invest $500k? We want to use this to help 1000 more
+students start and join Hack Clubs in their communities. For those already in
+Hack Clubs, we look to you to help us make a more high-quality experience. We’re
+a lot of what we’ve already been doing (and [what I wrote about at the beginning
+of the year](https://zachinto2020.wordpress.com/2019/12/31/as-midnight-approaches/)):
+we’ll spend as little money as possible at all times, and we’ll hire a small
+number of diverse staff from video game engineers to media producers to make
+Hack Club better. We are pushing hard now to expand users of [Hack Club
+Bank](https://hackclub.com/bank/), and continuing to try and make the Hack Club
+Slack the best place to be a teenager on the intenet.
+
+We’ll have a proper announcement in a few weeks, but one thing we’re doing after
+winning the [Frank Grant](https://grant.frank.ly/) and now receiving Elon’s
+gift, is open sourcing our finances. Hack Club HQ has been running on Hack Club
+Bank since February and starting today, you can see our account publicly at
+https://bank.hackclub.com/hq. You can track how we spend every single dollar of
+Elon’s gift. Soon, we will also launch https://frank.ly/ on Hack&nbsp;Club’s
+website.
+
+Hack Club’s mission is to build a new generation of hackers. This starts in high
+school, where Hack Club students learn to be technically proficient, build their
+friend network, learn to raise and spend money, and develop into kind, curious,
+thoughtful, optimistic, and honest leaders.
+
+Elon Musk is now supporting you and your work, so go out and do amazing things.
+Elon can’t wait to see what you make.
+
+—Zach
--- a/components/elon/amount.js
+++ b/components/elon/amount.js
@ -0,0 +1,11 @@
+import Sparkles from '../sparkles'
+
+const Amount = () => (
+  <Sparkles sx={{
+    WebkitTextStroke: 'currentColor',
+    WebkitTextStrokeWidth: '2px',
+    WebkitTextFillColor: 'transparent'
+  }}>$500,000</Sparkles>
+)
+
+export default Amount
--- a/components/elon/copy.mdx
+++ b/components/elon/copy.mdx
@ -0,0 +1,24 @@
+import Amount from './amount'
+import Signature from '../signature'
+
+# Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
+
+Elon Musk is one of the most prolific and ambitious hackers of the last decade.
+
+It was a huge honor last month to have Elon [spend an hour in an ask-me-anything call with our community of high schoolers](https://youtu.be/riru9OzScwk)—at one point he remarked we were “asking better questions than all the mainstream media” and called our community “very wholesome.”
+
+**Afterwards, Elon wanted to support Hack&nbsp;Club further.**
+
+When hackers see problems in the world, we don’t blame someone else: we try to take them on to solve. Elon is very selective about the nonprofits he supports and I’m proud Hack&nbsp;Club is one of them.
+
+So…how will Hack&nbsp;Club invest $500,000? We want to use this to help 1,000 more students start and join Hack Clubs in their towns ([see the worldwide map](https://hackclub.com/map/)). For those already in Hack&nbsp;Club, we look to you to help us make a higher-quality experience. We plan to continue much of what we’re already doing (and [what I wrote about in January](https://zachinto2020.wordpress.com/2019/12/31/as-midnight-approaches/)): spending as little money as possible at all times, growing slowly, adding diverse staff to make Hack&nbsp;Club better (video game designers, software engineers, media producers, and more). We are pushing hard to try and make the [Hack&nbsp;Club Slack](https://hackclub.com/) the best place to be a teenager on the internet and expanding [Hack&nbsp;Club Bank](https://hackclub.com/bank/).
+
+We’ll be fully transparent in how we spend this money. One thing we’ve been working toward after winning the [Frank Grant](https://grant.frank.ly/) is open sourcing our finances. Hack&nbsp;Club HQ has been running on Hack&nbsp;Club Bank since February, and starting today, [**you can see our finances publicly**](https://bank.hackclub.com/hq). Through Hack Club Bank, you can track how we spend every dollar of Elon’s gift. Soon, we’ll also launch [Frank’s](https://frank.ly/) transparency tools on [hackclub.com](https://hackclub.com/).
+
+Hack&nbsp;Club’s mission is to build a new generation of hackers. This starts in high school, where Hack&nbsp;Club students learn to be technically proficient, build their friend network, learn to raise and spend money, and develop into kind, curious, thoughtful, optimistic, and honest leaders. And now Elon Musk is one of our largest supporters.
+
+To every Hack Clubber: Elon is now supporting you and your work, so go forth and do amazing things. We can’t wait to show Elon what you make.
+
+<Signature />
+
+Zach Latta, Founder
--- a/components/home/announcement.js
+++ b/components/home/announcement.js
@ -10,7 +10,7 @@ const unfold = keyframes({
 const Announcement = ({
  caption,
  copy,
-  iconLeft,
+  iconLeft = 'announcement',
  iconRight = 'info',
  color = 'accent',
  ...props
@ -49,12 +49,13 @@ const Announcement = ({
      as="p"
      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
    >
+      <strong>{copy}</strong>
      {caption && (
        <Text as="span" variant="caption" color="secondary">
-          {caption}{' '}
+          {' '}
+          {caption}
        </Text>
      )}
-      <strong>{copy}</strong>
    </Text>
    <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />
  </Card>
--- a/components/signature.js
+++ b/components/signature.js
@ -0,0 +1,17 @@
+import { Image, useColorMode } from 'theme-ui'
+
+const Signature = () => {
+  const [colorMode] = useColorMode()
+  return (
+    <Image
+      src={`https://workshops.hackclub.com/signature-${
+        colorMode === 'dark' ? 'light' : 'dark'
+      }.png`}
+      width={96}
+      alt="Zach's signature"
+      sx={{ '+ p': { mt: 0 } }}
+    />
+  )
+}
+
+export default Signature
--- a/components/sparkles.js
+++ b/components/sparkles.js
@ -0,0 +1,116 @@
+// Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/core'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+
+import useRandomInterval from '../lib/use-random-interval'
+import usePrefersReducedMotion from '../lib/use-prefers-reduced-motion'
+
+const generateSparkle = color => {
+  const sparkle = {
+    id: String(random(10000, 99999)),
+    createdAt: Date.now(),
+    color,
+    size: random(10, 20),
+    style: {
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
+
+const Sparkles = ({ colors = ['orange', 'yellow', 'green'], children, sx, props, ...delegated }) => {
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
+  const [sparkles, setSparkles] = React.useState(() => {
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
+  useRandomInterval(
+    () => {
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
+    },
+    prefersReducedMotion ? null : 50,
+    prefersReducedMotion ? null : 450
+  )
+
+  return (
+    <Wrapper {...delegated}>
+      {sparkles.map(sparkle => (
+        <Sparkle
+          key={sparkle.id}
+          color={sparkle.color}
+          size={sparkle.size}
+          style={sparkle.style}
+        />
+      ))}
+      <ChildWrapper as="strong" sx={sx} {...props}>{children}</ChildWrapper>
+    </Wrapper>
+  )
+}
+
+const Sparkle = ({ size, color, style }) => {
+  const path =
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+  return (
+    <SparkleWrapper style={style}>
+      <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
+        <path d={path} fill={color} />
+      </SparkleSvg>
+    </SparkleWrapper>
+  )
+}
+
+const comeInOut = keyframes`
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+`
+const spin = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+`
+const Wrapper = styled.span`
+  display: inline-block;
+  position: relative;
+`
+const SparkleWrapper = styled.span`
+  position: absolute;
+  display: block;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${comeInOut} 1000ms forwards;
+  }
+`
+const SparkleSvg = styled.svg`
+  display: block;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${spin} 1250ms linear;
+  }
+`
+const ChildWrapper = styled(Text)`
+  position: relative;
+  z-index: 1;
+  font-weight: bold;
+`
+
+export default Sparkles
--- a/lib/theme.js
+++ b/lib/theme.js
@ -7,6 +7,9 @@ theme.useColorSchemeMediaQuery = false

 theme.lineHeights.limit = 0.875

+// Temporary hack
+theme.breakpoints = ['32em', '48em', '64em', '256em', '512em']
+
 theme.util = {
  reduceMotion: '@media (prefers-reduced-motion: reduce)',
  reduceTransparency: '@media (prefers-reduced-transparency: reduce)',
@ -98,6 +101,8 @@ theme.forms.labelCheckbox = {
  svg: { color: 'muted' }
 }

+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+
 theme.text.lead = {}

 export default theme
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@ -0,0 +1,32 @@
+// Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
+import React from 'react'
+
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
+
+const getInitialState = () => {
+  // For our initial server render, we won't know if the user
+  // prefers reduced motion, but it doesn't matter. This value
+  // will be overwritten on the client, before any animations
+  // occur.
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
+
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(
+    getInitialState
+  )
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
+    return () => {
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
+}
+
+export default usePrefersReducedMotion
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@ -0,0 +1,33 @@
+// Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
+import React from 'react'
+
+// Utility helper for random number generation
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+
+const useRandomInterval = (callback, minDelay, maxDelay) => {
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
+  React.useEffect(() => {
+    savedCallback.current = callback
+  })
+  React.useEffect(() => {
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    if (isEnabled) {
+      const handleTick = () => {
+        const nextTickAt = random(minDelay, maxDelay)
+        timeoutId.current = window.setTimeout(() => {
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
+    }
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
+  const cancel = React.useCallback(function () {
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
+
+export default useRandomInterval
--- a/package.json
+++ b/package.json
@ -11,15 +11,15 @@
  },
  "dependencies": {
    "@hackclub/icons": "^0.0.3",
-    "@hackclub/meta": "^0.1.1",
+    "@hackclub/meta": "1.0.0",
    "@hackclub/theme": "^0.1.1",
    "@mdx-js/loader": "^1.6.1",
-    "@next/mdx": "^9.4.0",
+    "@next/mdx": "^9.4.1",
    "@segment/snippet": "^4.11.0",
    "airtable-plus": "^1.0.4",
    "isomorphic-unfetch": "^3.0.0",
    "lodash": "^4.17.15",
-    "next": "^9.4.0",
+    "next": "^9.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-player": "^2.0.1",
--- a/pages/_app.js
+++ b/pages/_app.js
@ -12,10 +12,7 @@ export default class App extends NextApp {
    const { Component, pageProps } = this.props
    return (
      <ThemeProvider theme={theme}>
-        <Head>
-          <title>Hack Club</title>
-          <Meta />
-        </Head>
+        <Meta as={Head} />
        <Component {...pageProps} />
      </ThemeProvider>
    )
--- a/pages/elon.js
+++ b/pages/elon.js
@ -0,0 +1,147 @@
+import {
+  Avatar,
+  Badge,
+  BaseStyles,
+  Box,
+  Button,
+  Container,
+  Flex,
+  Grid,
+  Heading,
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/elon/copy.mdx'
+
+export default () => (
+  <>
+    <Meta
+      as={Head}
+      title="Elon Musk announcement"
+      description="We’re thrilled to announce Elon Musk has donated $500k to Hack Club, a global nonprofit network of high school hackers & coding clubs."
+      image="https://assets.hackclub.com/log/HC-500k@1080w.png"
+    />
+    <ForceTheme theme="light" />
+    <Nav />
+    <Box
+      as="section"
+      sx={{
+        pt: [5, 6],
+        pb: [4, 5],
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gradient('yellow', 'green')
+      }}
+    >
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
+        <Heading
+          as="h1"
+          variant="title"
+          sx={{
+            fontSize: [5, 6, null, 7],
+            span: {
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: '3px',
+              WebkitTextFillColor: 'transparent'
+            }
+          }}
+        >
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          about&nbsp;the future.”
+        </Heading>
+        <Text variant="headline">—Elon Musk</Text>
+      </Container>
+    </Box>
+    <Container
+      as={BaseStyles}
+      variant="copy"
+      sx={{
+        py: [4, 5],
+        fontSize: [2, 3],
+        h1: {
+          textAlign: ['left', 'center'],
+          color: 'cyan',
+          my: 4,
+          a: { color: 'inherit' }
+        }
+      }}
+    >
+      <Flex
+        sx={{
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          alignItems: 'center',
+          div: {
+            mt: 0,
+            mb: 2,
+            bg: 'white',
+            color: 'muted',
+            border: '1px solid',
+            borderColor: 'border',
+            bg: 'snow',
+            fontSize: 2,
+            fontWeight: 'body',
+            lineHeight: '36px'
+          }
+        }}
+      >
+        <Badge
+          variant="pill"
+          sx={{
+            mr: [2, 3],
+            pl: 0,
+            pr: 3,
+            display: 'inline-flex',
+            alignItems: 'center'
+          }}
+        >
+          <Avatar
+            src="https://hackclub.com/team/zach.jpg"
+            alt="Zach"
+            size={36}
+            mr={2}
+          />
+          Zach Latta, founder
+        </Badge>
+        <Badge variant="pill" px={3}>
+          May 15, 2020
+        </Badge>
+      </Flex>
+      <ElonCopy />
+    </Container>
+    <Box
+      as="section"
+      sx={{
+        bg: 'orange',
+        backgroundImage: t => t.util.gradient('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
+      }}
+    >
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+        <Icon glyph="welcome" size={72} />
+        <Box>
+          <Heading as="h2" variant="headline" mt={0}>
+            Teenager? New here? Welcome!
+          </Heading>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+            Hack Club is a global community of high school makers & student-led
+            coding clubs. We’ve got a 24/7 Slack chatroom of 9k teenagers
+            learning to code & building amazing projects, & you’ll fit right in.
+          </Text>
+          <NextLink href="/" passHref>
+            <Button bg="cyan" as="a">
+              Learn more
+            </Button>
+          </NextLink>
+        </Box>
+      </Grid>
+    </Box>
+    <Footer />
+  </>
+)
--- a/pages/index.js
+++ b/pages/index.js
@ -10,6 +10,7 @@ import {
 } from 'theme-ui'
 import { keyframes } from '@emotion/core'
 import { Slide } from 'react-reveal'
+import NextLink from 'next/link'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
@ -18,7 +19,7 @@ import Footer from '../components/footer'
 import Announcement from '../components/home/announcement'
 import SlackEvents from '../components/home/slack-events'
 import JoinForm from '../components/home/join-form'
-import { timeSince } from '../lib/dates'
+// import { timeSince } from '../lib/dates'

 const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 const slide = keyframes({
@ -127,16 +128,14 @@ export default () => (
      }}
    >
      <Container pt={[3, 4]} pb={[5, 6]}>
-        {/*
-        <Announcement
-          iconLeft="message-new"
-          iconRight="info"
-          caption={`May 14th at 1PM PT/4PM ET`} // (${timeSince('2020-05-14T20:00:00.000Z', true)})`}
-          copy="AMA with JavaScript sourcerer Guillermo Rauch"
-          href="https://events.hackclub.com/ama-with-guillermo-rauch"
-          color="cyan"
-        />
-        */}
+        <NextLink href="/elon" passHref>
+          <Announcement
+            copy="Elon Musk donates $500K"
+            caption="Read the open letter" // (${timeSince('2020-05-14T20:00:00.000Z', true)})`}
+            href="/elon"
+            color="green"
+          />
+        </NextLink>
        <Heading
          as="h1"
          variant="title"
--- a/yarn.lock
+++ b/yarn.lock
@ -45,7 +45,7 @@
  dependencies:
    cross-fetch "3.0.4"

-"@babel/code-frame@7.8.3", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
+"@babel/code-frame@7.8.3", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
@ -61,6 +61,26 @@
    invariant "^2.2.4"
    semver "^5.5.0"

+"@babel/core@7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
+  integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.7"
+    "@babel/helpers" "^7.7.4"
+    "@babel/parser" "^7.7.7"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@babel/types" "^7.7.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/core@7.9.0":
  version "7.9.0"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
@ -83,26 +103,14 @@
    semver "^5.4.1"
    source-map "^0.5.0"

-"@babel/core@7.9.6":
+"@babel/generator@^7.7.7", "@babel/generator@^7.9.6":
  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.6.tgz#d9aa1f580abf3b2286ef40b6904d390904c63376"
-  integrity sha512-nD3deLvbsApbHAHttzIssYqgb883yU/d9roe4RZymBCDaZryMJDbptVpEpeQuRh4BJ+SYI8le9YGxKvFEvl1Wg==
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.6.tgz#5408c82ac5de98cda0d77d8124e99fa1f2170a43"
+  integrity sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==
  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.9.6"
-    "@babel/helper-module-transforms" "^7.9.0"
-    "@babel/helpers" "^7.9.6"
-    "@babel/parser" "^7.9.6"
-    "@babel/template" "^7.8.6"
-    "@babel/traverse" "^7.9.6"
    "@babel/types" "^7.9.6"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
+    jsesc "^2.5.1"
    lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
    source-map "^0.5.0"

 "@babel/generator@^7.8.4":
@ -125,16 +133,6 @@
    lodash "^4.17.13"
    source-map "^0.5.0"

-"@babel/generator@^7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.6.tgz#5408c82ac5de98cda0d77d8124e99fa1f2170a43"
-  integrity sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==
-  dependencies:
-    "@babel/types" "^7.9.6"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
 "@babel/helper-annotate-as-pure@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
@ -385,6 +383,15 @@
    "@babel/traverse" "^7.8.3"
    "@babel/types" "^7.8.3"

+"@babel/helpers@^7.7.4":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.6.tgz#092c774743471d0bb6c7de3ad465ab3d3486d580"
+  integrity sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.9.6"
+    "@babel/types" "^7.9.6"
+
 "@babel/helpers@^7.9.0":
  version "7.9.2"
  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.2.tgz#b42a81a811f1e7313b88cba8adc66b3d9ae6c09f"
@ -394,15 +401,6 @@
    "@babel/traverse" "^7.9.0"
    "@babel/types" "^7.9.0"

-"@babel/helpers@^7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.6.tgz#092c774743471d0bb6c7de3ad465ab3d3486d580"
-  integrity sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==
-  dependencies:
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.9.6"
-    "@babel/types" "^7.9.6"
-
 "@babel/highlight@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
@ -412,6 +410,11 @@
    esutils "^2.0.2"
    js-tokens "^4.0.0"

+"@babel/parser@^7.7.7", "@babel/parser@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.6.tgz#3b1bbb30dabe600cd72db58720998376ff653bc7"
+  integrity sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==
+
 "@babel/parser@^7.8.3", "@babel/parser@^7.8.4":
  version "7.8.4"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
@ -422,11 +425,6 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
  integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==

-"@babel/parser@^7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.6.tgz#3b1bbb30dabe600cd72db58720998376ff653bc7"
-  integrity sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==
-
 "@babel/plugin-proposal-async-generator-functions@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
@ -1026,6 +1024,15 @@
  dependencies:
    regenerator-runtime "^0.13.2"

+"@babel/template@^7.7.4", "@babel/template@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
+  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
 "@babel/template@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
@ -1035,14 +1042,20 @@
    "@babel/parser" "^7.8.3"
    "@babel/types" "^7.8.3"

-"@babel/template@^7.8.6":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
-  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
+"@babel/traverse@^7.7.4", "@babel/traverse@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.6.tgz#5540d7577697bf619cc57b92aa0f1c231a94f442"
+  integrity sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==
  dependencies:
    "@babel/code-frame" "^7.8.3"
-    "@babel/parser" "^7.8.6"
-    "@babel/types" "^7.8.6"
+    "@babel/generator" "^7.9.6"
+    "@babel/helper-function-name" "^7.9.5"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.9.6"
+    "@babel/types" "^7.9.6"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"

 "@babel/traverse@^7.8.3":
  version "7.8.4"
@ -1074,21 +1087,6 @@
    globals "^11.1.0"
    lodash "^4.17.13"

-"@babel/traverse@^7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.6.tgz#5540d7577697bf619cc57b92aa0f1c231a94f442"
-  integrity sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.9.6"
-    "@babel/helper-function-name" "^7.9.5"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/parser" "^7.9.6"
-    "@babel/types" "^7.9.6"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
 "@babel/types@7.8.3", "@babel/types@^7.4.4", "@babel/types@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@ -1098,7 +1096,7 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@babel/types@7.9.6", "@babel/types@^7.9.6":
+"@babel/types@7.9.6", "@babel/types@^7.7.4", "@babel/types@^7.9.6":
  version "7.9.6"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.6.tgz#2c5502b427251e9de1bd2dff95add646d95cc9f7"
  integrity sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==
@ -1223,10 +1221,10 @@
  resolved "https://registry.yarnpkg.com/@hackclub/icons/-/icons-0.0.3.tgz#4b70c294d174ef7b58732c5888ab5e2b51dc14cb"
  integrity sha512-V9UJo0MNl5GdTBNXQvvKa8YGhNMK4dd0tsnewGNQQLBMpfSYzN0wfxhkKyY5GT5rFqmxAnt0lElW1ACxHRCByA==

-"@hackclub/meta@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@hackclub/meta/-/meta-0.1.1.tgz#8fd5f83c208d9399602b16acfd2b6353a003e08f"
-  integrity sha512-zbOQ9DCPC1Ao1WOZ5R83hlFHliYkUlDnwQa8muiFpLpdQH6hX6OObWu+BCLGyJueVNeXcaI5Oz8RvXT61twjLw==
+"@hackclub/meta@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@hackclub/meta/-/meta-1.0.0.tgz#421731bd87e8fdeb4cc33afd12d68c8266ce79ae"
+  integrity sha512-Xm1QgCxWAzG8ekV3xSf0gZ/6gCL4BuaKl3EjAy3e8QhoKDCjO7O4TtlfeUyLoJvIHzgYN/1sbZtkZ1VE6Pw5XA==

 "@hackclub/theme@^0.1.1":
  version "0.1.1"
@ -1301,15 +1299,15 @@
  dependencies:
    "@ndhoule/each" "^2.0.1"

-"@next/mdx@^9.4.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-9.4.0.tgz#378e620807a7e27e732ea607f7afa453fbfaaafb"
-  integrity sha512-CyYHS0Ri515J3qZwjQ7Qgfltst7QSAVKzwK3v9p1wvP+G0UFk3DNwn/PtUk6zRaSJ6mSw/y8d8AnYjSgP0mw5w==
+"@next/mdx@^9.4.1":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-9.4.1.tgz#0a7044ba53003522fadffbe93769235606866965"
+  integrity sha512-W4XFeB5r4amqL0NQMhcmrtMsGgq98+x/bK0han+3EG6kljZe45JvdPoOOxxa5RPdG2kdqtJUhXA3nRxkPwnUVQ==

-"@next/react-dev-overlay@9.4.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.4.0.tgz#6a7512438546a8611c58deacc390329fa5d3a389"
-  integrity sha512-jHlfqviYKPiWRaxBsFMSxDgGf8rJcWiLhw84QevAWmt8Z0Fi4Z6nvAz5prpzavLTMUF+i+7Bd8+sv/b73sHY3g==
+"@next/react-dev-overlay@9.4.1":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.4.1.tgz#79bcabd7bb2fcd0219b6b452456014bf93bd7c50"
+  integrity sha512-Ta8VXEk+yIBgbn7FRgvE6bvF37MfStZceHm78ZG+KUQWTsffy1fUFb24ylxGuBaq95uR2mXWS/+RIAFmZTyOqA==
  dependencies:
    "@babel/code-frame" "7.8.3"
    ally.js "1.4.1"
@ -1322,10 +1320,10 @@
    stacktrace-parser "0.1.10"
    strip-ansi "6.0.0"

-"@next/react-refresh-utils@9.4.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.4.0.tgz#6f8732e1909fb12f6dca8a82b7fc4b79c6c8cfcd"
-  integrity sha512-AaEC/diS2two2JLsEItGhuAux8UfPo0o34/7l1SIw0t4SYunUYJsxM/Y55OR2ljiVn9ffKR1n1U9IEQhsK80jw==
+"@next/react-refresh-utils@9.4.1":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.4.1.tgz#92dbf3e6fba7d160b2a7d95d6a53d0e77fa1ece9"
+  integrity sha512-oN+htA/GmBNx+aAsCOTElTuCPad9ETPSg/G/B7xM1sI+7VoPqhXJ2P3Feoup3J5Rpw6TF1vUHSzlpELDu6/law==

 "@segment/snippet@^4.11.0":
  version "4.11.0"
@ -4189,7 +4187,7 @@ json5@^1.0.1:
  dependencies:
    minimist "^1.2.0"

-json5@^2.1.2:
+json5@^2.1.0, json5@^2.1.2:
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
@ -4675,13 +4673,13 @@ next-tick@~1.0.0:
  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=

-next@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.4.0.tgz#7a3a8a4f1d1674b165998741c0b3826a1cce33d3"
-  integrity sha512-J7RWDzEXmNdg1iCaJiNmvQLdWMnMnPxsZh03pl+OBXQbOKoze+kZB2KdduhvsvAJ8ZyV4XCmJhLWsQbypDZTlQ==
+next@^9.4.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.4.1.tgz#0db13108fa17b4e2b583a6726d898095274b08dc"
+  integrity sha512-6C+Iq11k5WB+iaPrGQUEl4V6AY4j+KyhHCWeNC2PCP+3VSbgUVQ0CKq71xPXjfWz7cT3Wfb0B+ZqavZZg9jjfA==
  dependencies:
    "@ampproject/toolbox-optimizer" "2.3.1"
-    "@babel/core" "7.9.6"
+    "@babel/core" "7.7.7"
    "@babel/plugin-proposal-class-properties" "7.8.3"
    "@babel/plugin-proposal-nullish-coalescing-operator" "7.8.3"
    "@babel/plugin-proposal-numeric-separator" "7.8.3"
@ -4697,8 +4695,8 @@ next@^9.4.0:
    "@babel/preset-typescript" "7.9.0"
    "@babel/runtime" "7.9.6"
    "@babel/types" "7.9.6"
-    "@next/react-dev-overlay" "9.4.0"
-    "@next/react-refresh-utils" "9.4.0"
+    "@next/react-dev-overlay" "9.4.1"
+    "@next/react-refresh-utils" "9.4.1"
    babel-plugin-syntax-jsx "6.18.0"
    babel-plugin-transform-define "2.0.0"
    babel-plugin-transform-react-remove-prop-types "0.4.24"
@ -4724,7 +4722,7 @@ next@^9.4.0:
    sass-loader "8.0.2"
    schema-utils "2.6.6"
    style-loader "1.2.1"
-    styled-jsx "3.2.5"
+    styled-jsx "3.3.0"
    use-subscription "1.4.1"
    watchpack "2.0.0-beta.13"
    web-vitals "0.2.1"
@ -6456,10 +6454,10 @@ style-to-object@^0.2.1:
  dependencies:
    inline-style-parser "0.1.1"

-styled-jsx@3.2.5:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.2.5.tgz#0172a3e13a0d6d8bf09167dcaf32cf7102d932ca"
-  integrity sha512-prEahkYwQHomUljJzXzrFnBmQrSMtWOBbXn8QeEkpfFkqMZQGshxzzp4H8ebBIsbVlHF/3+GSXMnmK/fp7qVYQ==
+styled-jsx@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.0.tgz#32335c1a3ecfc923ba4f9c056eeb3d4699006b09"
+  integrity sha512-sh8BI5eGKyJlwL4kNXHjb27/a/GJV8wP4ElRIkRXrGW3sHKOsY9Pa1VZRNxyvf3+lisdPwizD9JDkzVO9uGwZw==
  dependencies:
    "@babel/types" "7.8.3"
    babel-plugin-syntax-jsx "6.18.0"