Run formatter

components/bio.js

@@ -158,7 +158,7 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
               }}
               onClick={() => setExpand(false)}
             ></Flex>
-          </Flex>          
+          </Flex>
         </>
       )}
     </>

components/comma.js

@@ -1,3 +1,5 @@
 export default function Comma({ children }) {
-  return children ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''
+  return children
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }

components/index/cards/bank.js

@@ -1,10 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Grid, Heading, Text } from 'theme-ui'
-  Box,
-  Grid,
-  Heading,
-  Text
-} from 'theme-ui'
 import { Fade } from 'react-reveal'
 import Buttons from './button'
 
@@ -22,19 +17,22 @@ export default function Bank({ data }) {
           backgroundImage: `linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('/home/hackathons-bg.webp')`,
           backgroundSize: 'cover',
           backgroundPosition: '40%',
-          color: 'snow',
+          color: 'snow'
         }}
         badge
         text={data[0]}
       >
-        <Heading variant="title" sx={{ color: 'red', fontSize: ['36px', 4, 5], mt: [0, 3]}}>
+        <Heading
+          variant="title"
+          sx={{ color: 'red', fontSize: ['36px', 4, 5], mt: [0, 3] }}
+        >
           Hack&nbsp;Club&nbsp;Bank
         </Heading>
         <Grid columns={[1, '1.3fr 1fr', 2]}>
           <Box>
             <Text as="p" variant="subtitle">
-              Become a 501(c)3 nonprofit and join 700+ teams using Hack&nbsp;Club
+              Become a 501(c)3 nonprofit and join 700+ teams using
-              Bank to run world-class events.
+              Hack&nbsp;Club Bank to run world-class events.
             </Text>
             <Text as="p" variant="subtitle">
               This platform is built and maintained by the Hack&nbsp;Club team.

components/index/cards/button.js

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import {
+import { Box, Button, Text } from 'theme-ui'
-  Box,
-  Button,
-  Text
-} from 'theme-ui'
 import ReactTooltip from 'react-tooltip'
 import Icon from '@hackclub/icons'
 /** @jsxImportSource theme-ui */
@@ -20,7 +16,11 @@ export default function Buttons({
   let fontWeight = primary != null ? '700' : '400'
 
   return (
-    <Box as="button" sx={{background: 'transparent', border: 'none', color: 'white'}}py={1}>
+    <Box
+      as="button"
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      py={1}
+    >
       <Button
         data-place="right"
         data-for={id}

components/index/cards/card-model.js

@@ -1,12 +1,5 @@
 import Icon from '../../icon'
-import {
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-  Box,
-  Card,
-  Flex,
-  Image,
-  Link,
-  Text
-} from 'theme-ui'
 import { Zoom } from 'react-reveal'
 import ReactTooltip from 'react-tooltip'
 import Comma from '../../comma'

components/index/cards/clubs.js

@@ -1,13 +1,7 @@
 import React, { useState } from 'react'
 import Buttons from './button'
 import CardModel from './card-model'
-import {
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-  Box,
-  Grid,
-  Flex,
-  Image,
-  Text
-} from 'theme-ui'
 import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
@@ -76,9 +70,9 @@ export default function Clubs() {
             variant="subtitle"
             sx={{ textShadow: '1px 1px 5px black' }}
           >
-            Join or start a Hack Club and be part of a network of high quality
+            Join or start a Hack Club and be part of a network of high
-            coding clubs where you learn to code entirely through building
+            quality coding clubs where you learn to code entirely through
-            things.
+            building things.
           </Text>
           <Text
             as="p"

components/index/cards/epoch.js

@@ -1,12 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-  Box,
-  Flex,
-  Grid,
-  Image,
-  Link,
-  Text
-} from 'theme-ui'
 import Buttons from './button'
 import Dot from '../../dot'
 /** @jsxImportSource theme-ui */

components/index/cards/events.js

@@ -1,11 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
-  Box,
-  Button,
-  Grid,
-  Link,
-  Text
-} from 'theme-ui'
 import Buttons from './button'
 import Event from '../events'
 

components/index/cards/hackathons.js

@@ -1,12 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-  Box,
-  Flex,
-  Grid,
-  Image,
-  Link,
-  Text
-} from 'theme-ui'
 import { useState, useEffect } from 'react'
 import Buttons from './button'
 import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
@@ -102,7 +95,10 @@ export default function Hackathons({ data, stars }) {
           }}
         >
           <Box sx={{ width: 'fit-content', float: 'right' }}>
-            <Text as="h4" sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}>
+            <Text
+              as="h4"
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+            >
               <Dot /> Upcoming Hackathons
             </Text>
             {data.slice(0, 5).map(data => (
@@ -190,58 +186,60 @@ export default function Hackathons({ data, stars }) {
           display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>Upcoming Hackathons:</Text>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
-        <Flex sx={{gap: '10px'}}>
+          Upcoming Hackathons:
-        {data.slice(0, 2).map(data => (
+        </Text>
-          <Box
+        <Flex sx={{ gap: '10px' }}>
-            sx={{
+          {data.slice(0, 2).map(data => (
-              zIndex: '1',
+            <Box
-              // bg: 'rgb(255, 255, 255, 0.3)',
+              sx={{
-              color: 'white',
+                zIndex: '1',
-              textDecoration: 'none',
+                // bg: 'rgb(255, 255, 255, 0.3)',
-              fontWeight: 'normal',
+                color: 'white',
-              width: 'fit-content',
-              display: 'flex',
-              alignItems: 'center',
-              fontSize: 'small',
-              my: 2,
-              a: {
                 textDecoration: 'none',
-                color: 'white'
+                fontWeight: 'normal',
-              }
+                width: 'fit-content',
-            }}
+                display: 'flex',
-            key={data.name}
+                alignItems: 'center',
-          >
+                fontSize: 'small',
-            {data.logo && (
+                my: 2,
-              <Box
+                a: {
-                sx={{
+                  textDecoration: 'none',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
+                  color: 'white'
-                  display: 'flex',
+                }
-                  alignItems: 'center',
+              }}
-                  justifyContent: 'center',
+              key={data.name}
-                  borderRadius: 'circle',
+            >
-                  height: ['20px', '25px', '30px'],
+              {data.logo && (
-                  width: ['20px', '25px', '30px'],
+                <Box
-                  mr: '5px'
-                }}
-              >
-                <Image
-                  src={data.logo}
-                  alt={`${data.name} logo`}
-                  loading="lazy"
                   sx={{
-                    height: '70%',
+                    backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    width: '70%',
+                    display: 'flex',
-                    objectFit: 'contain',
+                    alignItems: 'center',
-                    borderRadius: 'default',
+                    justifyContent: 'center',
-                    fontSize: 'small'
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
-                />
+                >
-              </Box>
+                  <Image
-            )}
+                    src={data.logo}
-            <Link href={data.website}>{data.name}</Link>
+                    alt={`${data.name} logo`}
-          </Box>
+                    loading="lazy"
-        ))}
+                    sx={{
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
+                    }}
+                  />
+                </Box>
+              )}
+              <Link href={data.website}>{data.name}</Link>
+            </Box>
+          ))}
         </Flex>
       </Flex>
     </CardModel>

components/index/cards/inspect.js

@@ -1,6 +1,4 @@
-import {
+import { Text } from 'theme-ui'
-  Text
-} from 'theme-ui'
 import { keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
 import usePrefersMotion from '../lib/use-prefers-motion'

components/index/cards/mailing-list.js

@@ -1,131 +1,166 @@
-import Icon from '@hackclub/icons';
+import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react';
+import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text, Alert, Card, Flex, Grid } from 'theme-ui';
+import {
-import CardModel from './card-model';
+  Box,
-import BGImg from '../../background-image';
+  Label,
-import FooterImgFile from '../../../public/home/footer.png';
+  Input,
+  Button,
+  Text,
+  Alert,
+  Card,
+  Flex,
+  Grid
+} from 'theme-ui'
+import CardModel from './card-model'
+import BGImg from '../../background-image'
+import FooterImgFile from '../../../public/home/footer.png'
 
 const Loading = () => (
-	<Box
+  <Box
-		sx={{
+    sx={{
-			display: 'flex',
+      display: 'flex',
-			justifyContent: 'center',
+      justifyContent: 'center',
-			alignItems: 'center',
+      alignItems: 'center',
-			height: '100%',
+      height: '100%',
-			width: '100%',
+      width: '100%',
-			border: '2px solid #f3f3f3',
+      border: '2px solid #f3f3f3',
-			borderTop: '2px solid #ec3750',
+      borderTop: '2px solid #ec3750',
-			borderRadius: '50%',
+      borderRadius: '50%',
-			width: '10px',
+      width: '10px',
-			height: '10px',
+      height: '10px',
-			animation: 'spin 2s linear infinite',
+      animation: 'spin 2s linear infinite',
-			'@keyframes spin': {
+      '@keyframes spin': {
-				'0%': { transform: 'rotate(0deg)' },
+        '0%': { transform: 'rotate(0deg)' },
-				'100%': { transform: 'rotate(360deg)' },
+        '100%': { transform: 'rotate(360deg)' }
-			},
+      }
-		}}
+    }}
-	></Box>
+  ></Box>
-);
+)
 
 const MailingList = () => {
-	const [submitting, setSubmitting] = useState(false);
+  const [submitting, setSubmitting] = useState(false)
-	const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
-	const formRef = useRef(null);
+  const formRef = useRef(null)
 
-	const handleSubmit = async e => {
+  const handleSubmit = async e => {
-		e.preventDefault();
+    e.preventDefault()
-		setSubmitting(true);
+    setSubmitting(true)
 
-		let res = await fetch('/api/mailing-list', {
+    let res = await fetch('/api/mailing-list', {
-			method: 'POST',
+      method: 'POST',
-			headers: {
+      headers: {
-				'Content-Type': 'application/json',
+        'Content-Type': 'application/json'
-			},
+      },
-			body: JSON.stringify({
+      body: JSON.stringify({
-				name: e.target.name.value,
+        name: e.target.name.value,
-				email: e.target.email.value,
+        email: e.target.email.value
-			}),
+      })
-		});
+    })
 
-		formRef.current.reset();
+    formRef.current.reset()
 
-		if (res.ok) {
+    if (res.ok) {
-			setSubmitted(true);
+      setSubmitted(true)
-		}
+    }
-		setSubmitting(false);
+    setSubmitting(false)
-	};
+  }
 
-	return (
+  return (
-		<Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
-			<Card
+      <Card
-				sx={{
+        sx={{
-					maxWidth: 'narrowPlus',
+          maxWidth: 'narrowPlus',
-					mx: 'auto',
+          mx: 'auto',
-					// mt: [3, 4],
+          // mt: [3, 4],
-					background: 'rgb(255,255,255, 0.45)',
+          background: 'rgb(255,255,255, 0.45)',
-					position: 'relative',
+          position: 'relative',
-					zIndex: 2,
+          zIndex: 2,
-					backdropFilter: 'blur(8px)',
+          backdropFilter: 'blur(8px)'
-				}}
+        }}
-			>
+      >
-				<Flex
+        <Flex
-					sx={{
+          sx={{
-						justifyContent: 'space-between',
+            justifyContent: 'space-between',
-						alignItems: ['left', 'left', 'center'],
+            alignItems: ['left', 'left', 'center'],
-						flexDirection: ['column', 'column', 'column'],
+            flexDirection: ['column', 'column', 'column'],
-						gap: '10px',
+            gap: '10px',
-						textAlign: 'center',
+            textAlign: 'center'
-					}}
+          }}
-				>
+        >
-					<Box>
+          <Box>
-						<Text variant="title" sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}>
+            <Text
-							Stay in Touch
+              variant="title"
-						</Text>
+              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
-						<Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
+            >
-							We’ll send you an email no more than once a month, when we work on something cool for you.
+              Stay in Touch
-						</Text>
+            </Text>
-					</Box>
+            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
-					<Grid
+              We’ll send you an email no more than once a month, when we work on
-						as="form"
+              something cool for you.
-						ref={formRef}
+            </Text>
-						onSubmit={handleSubmit}
+          </Box>
-						gap={[2, 3]}
+          <Grid
-						sx={{
+            as="form"
-							textAlign: 'center',
+            ref={formRef}
-							alignItems: 'end',
+            onSubmit={handleSubmit}
-							input: { bg: 'sunken' },
+            gap={[2, 3]}
-							width: '100%',
+            sx={{
-						}}
+              textAlign: 'center',
-					>
+              alignItems: 'end',
-						<Box sx={{ width: '100%' }}>
+              input: { bg: 'sunken' },
-							<Input autofillBackgroundColor="highlight" type="text" name="name" id="name" placeholder="Your Name" required sx={{ width: '100%', textAlign: 'center', fontSize: 2 }} />
+              width: '100%'
-						</Box>
+            }}
-						<div>
+          >
-							<Input autofillBackgroundColor="highlight" type="email" name="email" id="email" placeholder="Your Email" required sx={{ width: '100%', textAlign: 'center', fontSize: 2 }} />
+            <Box sx={{ width: '100%' }}>
-						</div>
+              <Input
-						<Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                autofillBackgroundColor="highlight"
-							{submitting ? (
+                type="text"
-								<>
+                name="name"
-									<Loading />
+                id="name"
-									&nbsp;Subscribe
+                placeholder="Your Name"
-								</>
+                required
-							) : (
+                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
-								'Subscribe'
+              />
-							)}
+            </Box>
-						</Button>
+            <div>
-					</Grid>
+              <Input
-				</Flex>
+                autofillBackgroundColor="highlight"
+                type="email"
+                name="email"
+                id="email"
+                placeholder="Your Email"
+                required
+                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+              />
+            </div>
+            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+              {submitting ? (
+                <>
+                  <Loading />
+                  &nbsp;Subscribe
+                </>
+              ) : (
+                'Subscribe'
+              )}
+            </Button>
+          </Grid>
+        </Flex>
 
-				{submitted && (
+        {submitted && (
-					<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-						<Icon glyph="send" />
+            <Icon glyph="send" />
-						<Text sx={{ ml: 2 }}>You're on the list!</Text>
+            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-					</Alert>
+          </Alert>
-				)}
+        )}
-			</Card>
+      </Card>
-			<BGImg gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))" src={FooterImgFile} placeholder="blur" alt="Globe with hundreds of Hack Clubs" />
+      <BGImg
-		</Box>
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-	);
+        src={FooterImgFile}
-};
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
+    </Box>
+  )
+}
 
-export default MailingList;
+export default MailingList

components/index/cards/sinerider.js

@@ -1,11 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-  Box,
-  Flex,
-  Grid,
-  Image,
-  Text
-} from 'theme-ui'
 import Buttons from './button'
 
 /** @jsxImportSource theme-ui */

components/index/cards/slack.js

@@ -96,8 +96,8 @@ export default function Slack({ data, slackKey, events }) {
             just hang out.
           </Text>
           <Text as="p" variant="subtitle">
-            Occasionally we invite someone we really want to speak to (like
+            Occasionally we invite someone we really want to speak to (like Sal
-            Sal Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
@@ -137,7 +137,10 @@ export default function Slack({ data, slackKey, events }) {
                   textAlign: 'center'
                 }}
               >
-                <Stats data={data.readers_count_1d} subheading="Currently Online" />
+                <Stats
+                  data={data.readers_count_1d}
+                  subheading="Currently Online"
+                />
                 <Stats
                   data={data.chats_channels_count_1d}
                   subheading="Total Channels"

components/index/cards/sprig-console.js

@@ -1,10 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Grid, Image, Text } from 'theme-ui'
-  Box,
-  Grid,
-  Image,
-  Text
-} from 'theme-ui'
 import Buttons from './button'
 import Tilt from './tilt'
 /** @jsxImportSource theme-ui */

components/index/cards/sprig.js

@@ -1,12 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-  Box,
-  Flex,
-  Grid,
-  Image,
-  Link,
-  Text
-} from 'theme-ui'
 import Buttons from './button'
 import styled from '@emotion/styled'
 import RelativeTime from 'react-relative-time'

components/index/cards/winter.js

@@ -1,12 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-  Box,
-  Card,
-  Flex,
-  Grid,
-  Heading,
-  Text
-} from 'theme-ui'
 import Buttons from './button'
 import Icon from '@hackclub/icons'
 import Dot from '../../dot'

components/index/cards/workshops.js

@@ -1,13 +1,5 @@
 import CardModel from './card-model'
-import {
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-  Box,
-  Card,
-  Flex,
-  Grid,
-  Heading,
-  Image,
-  Text
-} from 'theme-ui'
 import { useState } from 'react'
 import Buttons from './button'
 
@@ -107,10 +99,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
-          sx={{ display: ['none', 'grid', 'grid'] }}
-          columns={[1, 1, 1, 2]}
-        >
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"

components/index/carousel-cards.js

@@ -1,10 +1,4 @@
-import {
+import { Box, Card, Image, Link, Text } from 'theme-ui'
-  Box,
-  Card,
-  Image,
-  Link,
-  Text
-} from 'theme-ui'
 import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
@@ -26,8 +20,7 @@ export default function CarouselCards({
         transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
         '&:hover': { transform: 'scale(1.0625)' },
         '.icon': {
-          transition:
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
-            'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
         ':hover,:focus': {
           '.icon': {
@@ -67,7 +60,11 @@ export default function CarouselCards({
             color: 'white',
             width: ['200px', '300px', '300px'],
             padding: ['12px !important', '16px !important', '20px !important'],
-            paddingTop: ['14px !important', '20px !important', '24px !important'],
+            paddingTop: [
+              '14px !important',
+              '20px !important',
+              '24px !important'
+            ],
             height: '100%'
           }}
         >

components/index/events.js

@@ -124,9 +124,11 @@ export default function Events({ events }) {
           boxShadow: 'elevated'
         }}
       >
-        {events.slice(0, 3).map(event =>
+        {events
-          !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .slice(0, 3)
-        )}
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          )}
       </Grid>
     </Box>
   )

components/index/github.js

@@ -1,8 +1,4 @@
-import {
+import { Badge, Link, Text } from 'theme-ui'
-  Badge,
-  Link,
-  Text
-} from 'theme-ui'
 import { useEffect, useState } from 'react'
 import RelativeTime from 'react-relative-time'
 import Fade from 'react-reveal/Fade'
@@ -76,7 +72,12 @@ export default function GitHub({
                   display: 'inline-block',
                   overflow: 'hidden',
                   whiteSpace: 'nowrap',
-                  display: ['none',  'inline-block', 'inline-block', 'inline-block']
+                  display: [
+                    'none',
+                    'inline-block',
+                    'inline-block',
+                    'inline-block'
+                  ]
                 }}
               >
                 {user}

components/slack/join-form.js

@@ -1,4 +1,13 @@
-import { Card, Label, Input, Textarea, Select, Grid, Text, Link } from 'theme-ui'
+import {
+  Card,
+  Label,
+  Input,
+  Textarea,
+  Select,
+  Grid,
+  Text,
+  Link
+} from 'theme-ui'
 import { useRouter } from 'next/router'
 import useForm from '../../lib/use-form'
 import Submit from '../submit'
@@ -87,11 +96,12 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
-              Hold your horses! <b>Our Slack community is for teenagers</b>, and as such
+            Hold your horses! <b>Our Slack community is for teenagers</b>, and
-              we're really careful about letting adults join. If you feel you'd
+            as such we're really careful about letting adults join. If you feel
-              have a place here, reach out to <Link href="mailto:slack@hackclub.com">slack@hackclub.com</Link>.
+            you'd have a place here, reach out to{' '}
+            <Link href="mailto:slack@hackclub.com">slack@hackclub.com</Link>.
           </Text>
         )}
         {!isAdult && (
@@ -99,15 +109,11 @@ const JoinForm = ({ sx = {} }) => {
             status={status}
             mt={'0px!important'}
             labels={{
-              default:
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-                useWaitlist
-                  ? 'Join Waitlist'
-                  : 'Get Invite',
               error: 'Something went wrong',
-              success:
+              success: useWaitlist
-                useWaitlist
+                ? "We'll be in touch soon!"
-                  ? "We'll be in touch soon!"
+                : 'Email coming soon!'
-                  : 'Email coming soon!'
             }}
           />
         )}

components/winter/landing.js

@@ -67,8 +67,7 @@ export default function Landing({ rsvpCount }) {
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
-                {/* <Dot /> */}
+                {/* <Dot /> */}a hacker's
-                a hacker's
               </Heading>
             </Fade>
             <Fade left cascade>

components/winter/timeline.js

@@ -113,7 +113,19 @@ export default function RealTimeline() {
     <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
-        name={<>RSVPs are closed. Have a question? Here are the <Link target="_blank" sx={{ color: 'inherit' }} href="https://github.com/hackclub/winter/blob/main/docs/faq.md">FAQs</Link>.</>}
+        name={
+          <>
+            RSVPs are closed. Have a question? Here are the{' '}
+            <Link
+              target="_blank"
+              sx={{ color: 'inherit' }}
+              href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
+            >
+              FAQs
+            </Link>
+            .
+          </>
+        }
         duration="RSVP"
       />
       <Step

pages/api/games.js

@@ -9,8 +9,7 @@ export async function getGames() {
   return games
 }
 
-
 export default async function Games(req, res) {
   const games = await getGames()
   res.json(games)
-}
+}

pages/api/github.js

@@ -43,5 +43,5 @@ export async function fetchGitHub() {
 }
 
 export default async function github(req, res) {
-    await fetchGithub(req, res)
+  await fetchGithub(req, res)
-    }
+}

pages/api/join.js

@@ -45,7 +45,7 @@ export default async function handler(req, res) {
   const data = req.body || {}
   const open = process.env.NEXT_PUBLIC_OPEN === 'true'
   const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary' 
+  const isAdult = data.educationLevel === 'tertiary'
 
   const secrets = (process.env.NAUGHTY || '').split(',')
 

pages/api/mailing-list.js

@@ -17,4 +17,4 @@ export default async function submit(req, res) {
     }).then(r => r.text())
     res.json(resp)
   }
-}
+}

pages/api/slack.js

@@ -1,7 +1,8 @@
 import FormData from 'form-data'
 
 export async function Slack() {
-  if (!process.env.SLACK_API_TOKEN) return { error: 'No Slack API token found!' }
+  if (!process.env.SLACK_API_TOKEN)
+    return { error: 'No Slack API token found!' }
 
   const formData = new FormData()
 
@@ -20,7 +21,7 @@ export async function Slack() {
   ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn("No slack data");
+    console.warn('No slack data')
     return {}
   } else {
     return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
@@ -29,4 +30,4 @@ export async function Slack() {
 
 export default async function Slacky(req, res) {
   res.status(200).json(await Slack())
-}
+}

pages/api/stars.js

@@ -2,8 +2,16 @@ import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
-    console.warn("Note - GITHUB_TOKEN not defined, stars will not be fetched from github")
+    console.warn(
-    return { sprig:"?", sinerider:"?", sprigHardware:"?", hackclub:"?", hackathons:"?"};
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
+    return {
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `

pages/donate.js

@@ -101,7 +101,7 @@ const FirstQuote = styled(Quote)`
     rgb(45, 228, 207),
     rgb(41, 206, 104),
     rgb(53, 181, 36)
-  ); ;
+  );
 `
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(

pages/index.js

@@ -857,7 +857,11 @@ function Page({
             }}
           >
             <Box>
-              <Text as="p" variant="eyebrow" sx={{ fontSize: ['22px', 2, 3], textAlign: 'center' }}>
+              <Text
+                as="p"
+                variant="eyebrow"
+                sx={{ fontSize: ['22px', 2, 3], textAlign: 'center' }}
+              >
                 We've got a lot going on - Let’s recap
               </Text>
               <Text
@@ -885,7 +889,7 @@ function Page({
                   Hack&nbsp;Club
                 </Text>
               </Text>
-            </Box> 
+            </Box>
             <Grid
               pt={[3, 4]}
               pb={[4, 5]}
@@ -1118,14 +1122,13 @@ export async function getStaticProps() {
   const { Slack: Slacky } = require('./api/slack')
   let slackData = await Slacky()
 
-
   // GitHub: get latest github activity (currently this is erroring and
   // preventing the site from deploying
 
   const { fetchGitHub } = require('./api/github')
   let gitHubData = await fetchGitHub()
 
-//   let gitHubData = null
+  //   let gitHubData = null
 
   // GitHub: get latest GitHub stars
   const { fetchStars } = require('./api/stars')

pages/night.js

@@ -94,12 +94,13 @@ const Page = () => (
           Hack Night
         </Heading>
         <Text as="p" variant="subtitle">
-          The Hack Club community regularly gathers on Zoom or Huddles. It’s a chance
+          The Hack Club community regularly gathers on Zoom or Huddles. It’s a
-          to meet new friends, livestream what you’re hacking on, or just hang
+          chance to meet new friends, livestream what you’re hacking on, or just
-          out on a chill call.
+          hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Join in Saturdays at 1pm or 11pm UTC, and Wednesdays at 6pm UTC, or join or start an impromptu Hack session on{' '}
+          Join in Saturdays at 1pm or 11pm UTC, and Wednesdays at 6pm UTC, or
+          join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>

pages/opensource.js

@@ -105,14 +105,13 @@ const Page = ({ repos, transparentAccounts }) => (
         All open sourced through Hack Club Bank Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts
+        {transparentAccounts.map(account => (
-          .map(account => (
+          <BankProject
-            <BankProject
+            key={account.id}
-              key={account.id}
+            name={account.name}
-              name={account.name}
+            url={`https://bank.hackclub.com/${account.slug}`}
-              url={`https://bank.hackclub.com/${account.slug}`}
+          />
-            />
+        ))}
-          ))}
       </Grid>
       <Heading
         variant="headline"
@@ -237,9 +236,11 @@ export async function getStaticProps() {
     org: 'hackclub'
   })
 
-  const transparentAccounts = (await fetch(
+  const transparentAccounts = (
-    'https://bank.hackclub.com/api/v3/organizations'
+    await fetch('https://bank.hackclub.com/api/v3/organizations').then(res =>
-  ).then(res => res.json())).filter(account => account.category.replaceAll(' ', '_') === 'hack_club_hq')
+      res.json()
+    )
+  ).filter(account => account.category.replaceAll(' ', '_') === 'hack_club_hq')
 
   return { props: { repos, transparentAccounts }, revalidate: 30 }
 }

pages/santa.js

@@ -192,7 +192,10 @@ function Signup() {
       </Heading>
       <Text sx={{ textAlign: 'left', color: 'muted' }}>
         Be sure to check out the{' '}
-        <Link href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169" sx={{ color: 'blue' }}>
+        <Link
+          href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
+          sx={{ color: 'blue' }}
+        >
           rules
         </Link>{' '}
         before you sign up!

pages/team.js

@@ -377,7 +377,7 @@ export default function Team() {
                     />
                   </Grid>
                 </Box>
-                
+
                 <Box
                   sx={{
                     bg: 'rgb(166 51 214 / 40%)',