System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 14:17:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Run prettier (#633)

Browse source
This commit is contained in:
Ella 2022-12-17 20:51:20 -05:00 • committed by GitHub
parent dfa8140010
commit 47f2d0bea6
75 changed files with 1085 additions and 938 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.github/dependabot.yml vendored
View file

@ -5,7 +5,7 @@
version: 2
updates:
- package-ecosystem: "npm" # See documentation for possible values
directory: "/" # Location of package manifests
- package-ecosystem: 'npm' # See documentation for possible values
directory: '/' # Location of package manifests
schedule:
interval: "weekly"
interval: 'weekly'

6
components/analytics.js
View file

@ -1,9 +1,9 @@
import Script from 'next/script'
const Analytics = () => (
<Script
defer
data-domain="hackclub.com"
<Script
defer
data-domain="hackclub.com"
src="https://plausible.io/js/plausible.js"
/>
)

16
components/announcements/amount.js
View file

@ -1,11 +1,15 @@
import Sparkles from '../sparkles'
const Amount = ({amount}) => (
<Sparkles sx={{
WebkitTextStroke: 'currentColor',
WebkitTextStrokeWidth: ['2px', '3px'],
WebkitTextFillColor: 'transparent'
}}>{amount}</Sparkles>
const Amount = ({ amount }) => (
<Sparkles
sx={{
WebkitTextStroke: 'currentColor',
WebkitTextStrokeWidth: ['2px', '3px'],
WebkitTextFillColor: 'transparent'
}}
>
{amount}
</Sparkles>
)
export default Amount

5
components/announcements/cta.js
View file

@ -22,8 +22,9 @@ export default function SlackCTA() {
</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 {thousands}k+ teenagers
learning to code & building amazing projects, & you’ll fit right in.
coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
teenagers learning to code & building amazing projects, & you’ll fit
right in.
</Text>
<br />
<br />

2
components/announcements/preston-werner.mdx
View file

@ -6,7 +6,7 @@ We are deeply grateful for this gift.
In the coming months, we hope you’ll share our excitement as we make 2 new hires directly serving Hack Clubbers. This gift increases Hack Club’s budget by 60%, and helps us build a diverse foundation at the leadership level of Hack Club as we grow.
We are so honored to be included among the many gifts the Preston-Werners make each year. This is the 3rd year the Preston-Werners have given a gift to Hack Club, and they've supported the organization from the beginning.
We are so honored to be included among the many gifts the Preston-Werners make each year. This is the 3rd year the Preston-Werners have given a gift to Hack Club, and they've supported the organization from the beginning.
Tom and Theresa inspire Hack Club's values. They are self-made hackers, passionate about constructing a better world in creative ways. They are deeply committed to environmental protection, women’s rights, ending global poverty and injustice; and are tremendous collaborators in making Hack Club a place where all young people can build and create their own solutions through coding and technology, regardless of their background. They apply rigorous-thinking, curiosity, humility, transparency, and deep expertise in academia and coding to the problems that need solving in the world, and inspire us to do the same.

2
components/announcements/relon.mdx
View file

@ -20,7 +20,7 @@ Hack Club's mission is to help foster a new generation of hackers. This starts i
To every Hack Clubber: Elon continues to support you and your work, so go forth and do amazing things. We can't wait to share what you make.
<Signatures fileName='christina_and_zrl' width={320} />
<Signatures fileName="christina_and_zrl" width={320} />
Zach Latta, Founder & Executive Director
Christina Asquith, COO

2
components/color-switcher.js
View file

@ -1,6 +1,6 @@
import { IconButton, useColorMode } from 'theme-ui'
const ColorSwitcher = (props) => {
const ColorSwitcher = props => {
const [mode, setMode] = useColorMode()
return (
<IconButton

4
components/comma.js
View file

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

2
components/donate/donors.json
View file

@ -181,4 +181,4 @@
"Zach Holman": "https://zachholman.com/",
"Zane Davis-Barrs": "https://zane.sh/",
"Zane Sindhu": null
}
}

2
components/donate/sponsors.js
View file

@ -49,4 +49,4 @@ const Sponsors = props => (
</Base>
)
export default Sponsors
export default Sponsors

16
components/donate/sprigMeta.js
View file

@ -2,11 +2,13 @@ import Meta from '@hackclub/meta'
import Head from 'next/head'
const SprigMeta = () => {
return <Meta
as={Head}
title="Donate a Game Console kit"
description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
/>
return (
<Meta
as={Head}
title="Donate a Game Console kit"
description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
/>
)
}
export default SprigMeta
export default SprigMeta

4
components/dot.js
View file

@ -1,4 +1,4 @@
import { Text } from "theme-ui"
import { Text } from 'theme-ui'
import { keyframes } from '@emotion/react'
const flashing = keyframes({
@ -27,4 +27,4 @@ export default function Dot() {
}}
/>
)
}
}

6
components/hackathons/features/marketing.js
View file

@ -23,9 +23,9 @@ const Content = () => (
Spread the word about your hackathon.
</Heading>
<Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
Reach hackers worldwide by listing your event on hackathons.hackclub.com, the first Google search
result for "high school hackathons." Your event will also be emailed to a
network of high school hackers in your area.
Reach hackers worldwide by listing your event on hackathons.hackclub.com,
the first Google search result for "high school hackathons." Your event
will also be emailed to a network of high school hackers in your area.
</Text>
<Link href="https://hackathons.hackclub.com" passHref>
<Button

4
components/icon.js
View file

@ -4,6 +4,6 @@ import React from 'react'
import { jsx } from 'theme-ui'
import Icon from '@hackclub/icons'
const IconComponent = props => <Icon {...props} />;
const IconComponent = props => <Icon {...props} />
export default IconComponent;
export default IconComponent

23
components/index/cards/button.js
View file

@ -15,13 +15,19 @@ import ReactTooltip from 'react-tooltip'
import Icon from '@hackclub/icons'
/** @jsxImportSource theme-ui */
export default function Buttons({ children, icon, id, content, link, primary, ...props }) {
export default function Buttons({
children,
icon,
id,
content,
link,
primary,
...props
}) {
let fontWeight = primary != null ? '700' : '400'
return (
<Box
py={1}
>
<Box py={1}>
<Button
data-place="right"
data-for={id}
@ -39,11 +45,12 @@ export default function Buttons({ children, icon, id, content, link, primary, ..
width: 'fit-content',
textTransform: 'none',
fontWeight: '400',
fontSize: primary != null ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
fontSize:
primary != null ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
backdropFilter: 'blur(2px)',
fontWeight: fontWeight
}}
as={"a"}
as={'a'}
href={link || '/'}
target="_blank"
rel="noreferrer"
@ -55,7 +62,9 @@ export default function Buttons({ children, icon, id, content, link, primary, ..
size={24}
mr={2}
/>
<Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>{children}</Text>
<Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
{children}
</Text>
</Button>
<ReactTooltip
id={id}

83
components/index/cards/epoch.js
View file

@ -142,44 +142,77 @@ export default function Epoch() {
width: '100%',
height: '100%',
ml: ['-24px', '-32px', '-32px', '-32px'],
mt: ['-24px', '-32px', '-32px', '-32px'],
mt: ['-24px', '-32px', '-32px', '-32px']
}}
/>
<Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
<Box>
<img
src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
sx={{
width: ['220px', '220px', '240px', '350px'],
position: 'relative',
zIndex: 2
}}
/>
<Box>
{timer.length ? (
<Grid
key="{e}"
columns={['1fr 1fr 1fr 1fr']}
sx={{ mr: 2, mt: 2 }}
>
{timer}
</Grid>
) : (
<></>
)}
</Box>
<img
src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
sx={{
width: ['220px', '220px', '240px', '350px'],
position: 'relative',
zIndex: 2
}}
/>
<Box>
{timer.length ? (
<Grid
key="{e}"
columns={['1fr 1fr 1fr 1fr']}
sx={{ mr: 2, mt: 2 }}
>
{timer}
</Grid>
) : (
<></>
)}
</Box>
</Box>
<Box ml={[0, 0, 3]}>
<Text as="p" variant="subtitle" sx={{mt: 0}}>
<Text as="p" variant="subtitle" sx={{ mt: 0 }}>
Join us this winter as 150+ teenage hackers from all around the
world travel to Delhi, India for Epoch! Together, we’ll build the
unexpected, share what we’ve learnt in 2022, and experience the
thrill of being in-person together.
</Text>
<Text as="p" variant="subtitle">
In <Link sx={{color: '#FF4794' }} href="https://hackclub.slack.com/archives/C04CGDDLC72" target="_blank" rel="noopener">Austin</Link>, <Link sx={{color: '#FF4794' }} href="https://epochba.hackclub.com/" target="_blank" rel="noopener">Bay Area</Link>, or <Link sx={{color: '#FF4794' }} href="https://epochvt.hackclub.com/" target="_blank" rel="noopener">Vermont</Link>? Join a regional Epoch event!
In{' '}
<Link
sx={{ color: '#FF4794' }}
href="https://hackclub.slack.com/archives/C04CGDDLC72"
target="_blank"
rel="noopener"
>
Austin
</Link>
,{' '}
<Link
sx={{ color: '#FF4794' }}
href="https://epochba.hackclub.com/"
target="_blank"
rel="noopener"
>
Bay Area
</Link>
, or{' '}
<Link
sx={{ color: '#FF4794' }}
href="https://epochvt.hackclub.com/"
target="_blank"
rel="noopener"
>
Vermont
</Link>
? Join a regional Epoch event!
</Text>
<Flex sx={{ flexDirection: 'column', mt: [4, 3, 4], position: 'relative' }}>
<Flex
sx={{
flexDirection: 'column',
mt: [4, 3, 4],
position: 'relative'
}}
>
<Buttons
// content="travel stipends available"
id="17"

4
components/index/cards/sprig-console.js
View file

@ -110,9 +110,9 @@ export default function SprigConsole({ stars, consoleCount }) {
src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
sx={{
position: 'absolute',
right: ['', '-50%', '-35%','-25%'],
right: ['', '-50%', '-35%', '-25%'],
top: ['', '12%', '20%', '10%'],
width: ['', '100%', '85%','70%'],
width: ['', '100%', '85%', '70%'],
pointerEvents: 'none',
userSelect: 'none',
display: ['none', 'block', 'block']

8
components/index/cards/workshops.js
View file

@ -44,7 +44,7 @@ const WorkshopCard = ({
'& span': {
lineHeight: 1.25
},
maxWidth: '250px',
maxWidth: '250px'
}}
{...props}
>
@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Workshops
</Text>
<Grid columns={[1, 2, 2]} >
<Grid columns={[1, 2, 2]}>
<Flex sx={{ flexDirection: 'column' }}>
<Text as="p" variant="subtitle">
100+ community-contributed, self-guided coding tutorials and ideas.
@ -110,7 +110,7 @@ export default function Workshops({ data, stars }) {
</Buttons>
</Flex>
<Grid
sx={{ display: ['none', 'grid', 'grid'], gap: 3}}
sx={{ display: ['none', 'grid', 'grid'], gap: 3 }}
columns={[1, 1, 1, 2]}
>
<WorkshopCard
@ -126,7 +126,7 @@ export default function Workshops({ data, stars }) {
name="Particle Physics"
description="Create a particle physics simulation and with p5.js"
img="/home/workshops/particle_physics.png"
sx={{display: ['none', 'none', 'none', 'flex']}}
sx={{ display: ['none', 'none', 'none', 'flex'] }}
/>
</Grid>
</Grid>

22
components/index/carousel-cards.js
View file

@ -44,7 +44,14 @@ export default function CarouselCards({
>
<Image
src={img}
sx={{ position: 'absolute', top: ["-26px", "-30px", "-40px"], left: ["10px", "12px", "15px"], zIndex: 2, width: ["42px", "50px", "58px"], height: ["42px", "50px", "58px"] }}
sx={{
position: 'absolute',
top: ['-26px', '-30px', '-40px'],
left: ['10px', '12px', '15px'],
zIndex: 2,
width: ['42px', '50px', '58px'],
height: ['42px', '50px', '58px']
}}
/>
<Card
// variant="interactive"
@ -64,14 +71,23 @@ export default function CarouselCards({
>
{title}
</Text>
<Text as="p" sx={{ color: descriptionColor, fontSize: [1, '16px', '20px']}}>
<Text
as="p"
sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
>
{description}
</Text>
<Icon
glyph="external"
size={32}
color="#E9E9E9"
sx={{ position: 'absolute', top: 2, right: 2, opacity: 0.3, fontSize: [1, '16px', '20px'] }}
sx={{
position: 'absolute',
top: 2,
right: 2,
opacity: 0.3,
fontSize: [1, '16px', '20px']
}}
/>
</Card>
</Link>

2
components/index/events.js
View file

@ -137,7 +137,7 @@ export default function Events({ events }) {
!past(event.end) ? <Event {...event} key={event.id} /> : <></>
)}
</Grid>
<Text sx={{display: 'block'}}>
<Text sx={{ display: 'block' }}>
We just had these events:{' '}
{events.slice(0, 3).map(event =>
past(event.end) ? (

14
components/jobs/brand-director/jd.mdx
View file

@ -3,19 +3,19 @@ _As of May 28th, 2021, applications for this role are now closed. Thank you to e
**Starting salary:** $120K - $140k
**Location:** Burlington, Vermont or remote
Hi, I'm Christina, Hack Club COO, and I'm looking to hire a Brand Director to lead our team of journalists, programmers, startup entrepreneurs and donors in telling Hack Club's story.
Hi, I'm Christina, Hack Club COO, and I'm looking to hire a Brand Director to lead our team of journalists, programmers, startup entrepreneurs and donors in telling Hack Club's story.
As Brand Director, you'll mastermind and execute a strategy to present Hack Club beautifully---with sophistication, nuance and edge---to our donor audience, who include the world’s most innovative, creative, disruptive and wealthy individuals.
As Brand Director, you'll mastermind and execute a strategy to present Hack Club beautifully---with sophistication, nuance and edge---to our donor audience, who include the world’s most innovative, creative, disruptive and wealthy individuals.
The mission of **[Hack Club](https://hackclub.com)** is to be a place where teenagers can become more technical, feel welcome in getting started, feel inspired to build with code in ways that are always honest, transparent, high-integrity, kind and friendly. We want students to self-organize and assert themselves as persons.
The mission of **[Hack Club](https://hackclub.com)** is to be a place where teenagers can become more technical, feel welcome in getting started, feel inspired to build with code in ways that are always honest, transparent, high-integrity, kind and friendly. We want students to self-organize and assert themselves as persons.
Already, Hack Club is the largest network of talented teen coders in the country. When successful, Hack Club will be a nationwide cultural institution, creating a new generation of young people with the skills, network, and value system to become problem-solvers and builders for the 21st century-- a new Boy and Girl Scouts.
Already, Hack Club is the largest network of talented teen coders in the country. When successful, Hack Club will be a nationwide cultural institution, creating a new generation of young people with the skills, network, and value system to become problem-solvers and builders for the 21st century-- a new Boy and Girl Scouts.
You should have experience building a brand from scratch in the nonprofit sector for a donor audience.
You should have experience building a brand from scratch in the nonprofit sector for a donor audience.
You will be Hack Club's first brand director, so although we have ideas we are looking for someone who listens well, and then drives this process.
Activities could include creating a library of video assets, creating donor materials, designing outreach campaigns, hosting events on Clubhouse or in our AMAs, orchestrating a series of journalism pieces, and working alongside our 9-person team of coders, engineers and artists; as well as hiring contractors to implement the vision.
Activities could include creating a library of video assets, creating donor materials, designing outreach campaigns, hosting events on Clubhouse or in our AMAs, orchestrating a series of journalism pieces, and working alongside our 9-person team of coders, engineers and artists; as well as hiring contractors to implement the vision.
We'll be working closely together, and my background is as a print, magazine, radio journalist and editor and doc-maker, published in news outlets like The New York Times, The Atlantic and The Economist.
@ -37,6 +37,6 @@ Founded in 2014 by a teen hacker on the internet, 500 Hack Club are running toda
Hack Club staff works directly with 14-18 year olds, as they run their own clubs and build amazing projects, including a weather balloon that sent an Arduino into space, a summer project that distributed $50k in hardware, a program to send thousands of hand-written cards to front-line COVID workers, a robot from recyled parts in Zambia, and so much more.
Hack Club operates with zero cost to school systems or taxpayers; has no teachers or curriculum; is remote and online; and is totally free and accessible to all teenagers regardless of race, gender or economic background. Our model works in rich, poor, urban and remote schools. Hack Club is also fully transparent with its finances, and operates at one of the lowest costs per student in the nonprofit sector. We rarely do corporate partnerships.
Hack Club operates with zero cost to school systems or taxpayers; has no teachers or curriculum; is remote and online; and is totally free and accessible to all teenagers regardless of race, gender or economic background. Our model works in rich, poor, urban and remote schools. Hack Club is also fully transparent with its finances, and operates at one of the lowest costs per student in the nonprofit sector. We rarely do corporate partnerships.
We pride ourselves in being a coding education nonprofit that acts more like a tech-start up. Our work environment is fun, challenging, risk-taking, and high-energy. We are structured, but support flexible hours.

41
components/jobs/communications-manager/jd.mdx
View file

@ -2,34 +2,35 @@
Hack Club is a fun, quickly-growing start-up, run by a small team of highly-creative engineers, building programs every day for thousands of teenagers from around the world. Watch https://www.youtube.com/watch?v=2BID8_pGuqA to learn more about Hack Club, and to see the sort of projects you would be supporting. Our existing donors include many high-profile, Silicon Valley tech founders who have given initial gifts.
We are looking for a lead to focus on communications.
We are looking for a lead to focus on communications.
This person should be a strong and persuasive writer, be diligent and detail-oriented with an exemplary work ethic. This person's main goal will be to make sure every teenager who would want to know about Hack Club knows about Hack Club, and create comms that meet teens where they're at.
The ideal candidate will be a creative communicator, up-to-date on presentation, video and design software, with organizational skills to tell Hack Club's story to the world.
**Responsibilities include:**
- Design Hack Club's story and brand, and strategize on how to tell it to the world through different media, including video, social media, and print 
- Collaborate with video and design teams to build cool comms 
- Respond to communication-related issues in a timely manner
- Coach and assist Hack Clubbers to be able to speak about their Hack Club experiences and grow their communication skills
- Create informative and interesting newsletters for Hack Clubbers
- Do some outreach to mainstream media, especially during breaking news
- Design Hack Club's story and brand, and strategize on how to tell it to the world through different media, including video, social media, and print
- Collaborate with video and design teams to build cool comms
- Respond to communication-related issues in a timely manner
- Coach and assist Hack Clubbers to be able to speak about their Hack Club experiences and grow their communication skills
- Create informative and interesting newsletters for Hack Clubbers
- Do some outreach to mainstream media, especially during breaking news
**Basic Qualifications:**
- Exceptional communication abilities, including writing, speaking, and active listening
- Excellent organizational skills and attention to detail
- Great project management skills, including time management, goal-setting, multitasking and prioritization
- Can demonstrate with examples having created media/messaging that's generated a huge following
- Has done stuff that's gone viral
- Has led brand/marketing campaigns for organizations
- Has published writing/video/media that's been popular 
- Leadership abilities, including training and mentorship
- You are technical or you can demonstrate a basic understanding of technical terminology
- You are older than 18, and can create media for teenagers 
- Technical aptitude, or energy to learn quickly, including enough knowledge of design software, online communities like Slack, coding programs, and Notion to work with the team
- Exceptional communication abilities, including writing, speaking, and active listening
- Excellent organizational skills and attention to detail
- Great project management skills, including time management, goal-setting, multitasking and prioritization
- Can demonstrate with examples having created media/messaging that's generated a huge following
- Has done stuff that's gone viral
- Has led brand/marketing campaigns for organizations
- Has published writing/video/media that's been popular
- Leadership abilities, including training and mentorship
- You are technical or you can demonstrate a basic understanding of technical terminology
- You are older than 18, and can create media for teenagers
- Technical aptitude, or energy to learn quickly, including enough knowledge of design software, online communities like Slack, coding programs, and Notion to work with the team
We have a strong preference for someone in-person in Vermont, but we will consider applications from people who want to work remotely, provided they are willing to travel to our offices. Relocation assistance is available. We have COVID protocols and take them seriously.
**How to Apply:** Email jobs@hackclub.com with "papyrus" in the subject line, 3 bullet points demonstrating why you would be exceptional for the role, and your resume.
**How to Apply:** Email jobs@hackclub.com with "papyrus" in the subject line, 3 bullet points demonstrating why you would be exceptional for the role, and your resume.

2
components/jobs/customer-success-lead/jd.mdx
View file

@ -38,7 +38,7 @@ _This position has been filled as of May 3rd, 2022. Thank you to everyone who ap
### REQUIRED
- Software savvy: Experienced in Google Docs or Microsoft Office applications, comfortable in spreadsheets, databases, project management software tools
- Superior organizational skills 
- Superior organizational skills
- Terrific written and verbal communication skills
**FULL JOB DESCRIPTION HERE:** [hack.af/cust-success-lead](https://hack.af/cust-success-lead)

3
components/jobs/executive-producer/jd.mdx
View file

@ -10,7 +10,6 @@ One unique and fun aspect of working for Hack Club is that you interact directly
Your goal is to tell Hack Club's story so that every technical teenager in the world hears about Hack Club and in a way that makes Hack Club better for those already in it.
**Responsibilities for you and your team include:**
- Curating and managing 30-60-90 day content calendar with launches
@ -38,7 +37,7 @@ Hack Club's work is highly technical. Our content must go deep in capturing tech
- You're an entrepreneurial self-starter and a hard worker
- You're a good editor and can shape and idea, and give solid feedback
- You have an eye for how to make content go viral.
- You have made short videos
- You have made short videos
- Demonstrated ability to repurpose long form content (blogs/Op-Eds/conversation transcriptions) into into micro-content (short videos or static posts, stories, memes).
- You're comfortable communicating online (we're on Slack).

16
components/jobs/philanthropy-communications-lead/jd.mdx
View file

@ -20,19 +20,19 @@ Conceptualize partnerships with aligned companies like SpaceX, Replit, GitHub an
Actively participate in creating our media/marketing strategy, and then work closely with Hack Club's communications team, which will:
- Edit a blog by and for Hack Club that is multimedia and pulls from engineers, the founder and teenagers. 
- Edit a blog by and for Hack Club that is multimedia and pulls from engineers, the founder and teenagers.
- Manage our social media, including a 15k Twitter following, and launch out Instagram, and build out our YouTube
- Manage our social media, including a 15k Twitter following, and launch out Instagram, and build out our YouTube
- Create informative and interesting newsletters for Hack Club club leaders and a separate (but overlapping) letter for donors. Roam across the org generating content. 
- Create informative and interesting newsletters for Hack Club club leaders and a separate (but overlapping) letter for donors. Roam across the org generating content.
- Design video content with a video editor that produces 1 min videos on the organization. This will tap into the creativity of the community to produce. 
- Design video content with a video editor that produces 1 min videos on the organization. This will tap into the creativity of the community to produce.
- Facilitate, coach and assist Hack Clubbers to be able to speak about their Hack Club experiences and grow their communication skills
- Facilitate, coach and assist Hack Clubbers to be able to speak about their Hack Club experiences and grow their communication skills
- Create informative and interesting newsletters for Hack Clubbers
- Create informative and interesting newsletters for Hack Clubbers
** Your skills and qualifications: **
** Your skills and qualifications: **
You have a demonstrated track record of identifying, cultivating, and soliciting donations
@ -84,4 +84,4 @@ Fully Covid-19 vaccinated
**TO APPLY:** Email jobs@hackclub.com with "bling" in the subject line, 3 bullet points demonstrating why you would be exceptional for the role, and your resume
Hack Club provides equal employment opportunities without regard to race, color, ethnicity, religion, sex, pregnancy or recent childbirth or related medical condition, gender identity and expression, sexual orientation, national origin, ancestry, age, disability, the use of a guide or support animal because of blindness, deafness or physical handicap of any individual, citizenship, veteran or military status, genetic information, marital status, familial status, domestic or sexual violence status, possession of a GED instead of high school diploma, or any other protected characteristic under applicable federal, state or local laws.
Hack Club provides equal employment opportunities without regard to race, color, ethnicity, religion, sex, pregnancy or recent childbirth or related medical condition, gender identity and expression, sexual orientation, national origin, ancestry, age, disability, the use of a guide or support animal because of blindness, deafness or physical handicap of any individual, citizenship, veteran or military status, genetic information, marital status, familial status, domestic or sexual violence status, possession of a GED instead of high school diploma, or any other protected characteristic under applicable federal, state or local laws.

11
components/photo.js
View file

@ -16,7 +16,16 @@ const Caption = styled(Text)`
z-index: 0;
`
const Photo = ({ src, width, height, alt, showAlt, dark, loading, ...props }) => {
const Photo = ({
src,
width,
height,
alt,
showAlt,
dark,
loading,
...props
}) => {
const [colorMode] = useColorMode()
const showCaption = showAlt && alt
return (

17
components/posts/index.js
View file

@ -7,7 +7,8 @@ import Image from 'next/image'
import Mention from './mention'
import Emoji from './emoji'
const dataDetector = /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
const dataDetector =
/(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
export const formatText = text =>
text.split(dataDetector).map((chunk, i) => {
@ -117,13 +118,13 @@ const Post = ({
img: { objectFit: 'cover', width: '100%' }
}}
>
{filter(attachments, a => ['jpg', 'jpeg', 'png'].includes(a.split('.')[a.split('.').length - 1])).map(img => (
<img
key={img}
alt={img}
src={img}
/>
))}
{filter(attachments, a =>
['jpg', 'jpeg', 'png'].includes(
a.split('.')[a.split('.').length - 1]
)
).map(img => (
<img key={img} alt={img} src={img} />
))}
</Grid>
</>
)}

4
components/scroll-hint.js
View file

@ -14,7 +14,7 @@ const handleClick = () => {
}
})
}
const ScrollHint = ({...props}) => (
const ScrollHint = ({ ...props }) => (
<Box
sx={{
display: 'block',
@ -37,4 +37,4 @@ const ScrollHint = ({...props}) => (
></Box>
)
export default ScrollHint
export default ScrollHint

6
components/secret.js
View file

@ -1,12 +1,12 @@
import { Box, Text } from "theme-ui"
import { useState, useEffect } from "react"
import { Box, Text } from 'theme-ui'
import { useState, useEffect } from 'react'
export default function Secret({ reveal, ...props }) {
const [img, setImage] = useState('')
useEffect(() => {
setImage('https://geta.dino.icu/dino.png')
},[])
}, [])
return (
<Box

2
components/signature.js
View file

@ -1,6 +1,6 @@
import { Image, useColorMode } from 'theme-ui'
const Signature = ({fname, lname, width}) => {
const Signature = ({ fname, lname, width }) => {
// enforce a sane color mode (typescript should do this in the future)
let [colorMode] = useColorMode()
colorMode = colorMode === 'dark' ? 'light' : 'dark'

3
components/signatures.js
View file

@ -1,7 +1,6 @@
import { Image, useColorMode } from 'theme-ui'
const Signatures = ({fileName, width}) => {
const Signatures = ({ fileName, width }) => {
// enforce a sane color mode (typescript should do this in the future)
let [colorMode] = useColorMode()
colorMode = colorMode === 'dark' ? 'light' : 'dark'

7
components/slack.js
View file

@ -37,9 +37,10 @@ const Content = () => (
Come for the skills, <br /> stay for the people.
</Heading>
<Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
Communication and planning for our open source projects happen in the Slack. Coding is often seen as an isolating activity. Plenty of groups exist for
kids who are interested in sports, theater, or chess, but the stereotype
of a programmer is a person who sits alone in a dark room.{' '}
Communication and planning for our open source projects happen in the
Slack. Coding is often seen as an isolating activity. Plenty of groups
exist for kids who are interested in sports, theater, or chess, but the
stereotype of a programmer is a person who sits alone in a dark room.{' '}
<strong>It doesn't have to be this way</strong>—in the Hack Club Slack
(Discord-style online groupchat), you'll find a group of {formatted}+{' '}
<Highlight>fabulous people</Highlight> to talk to, active at all hours.

6
components/slack/header.js
View file

@ -5,11 +5,7 @@ import usePrefersMotion from '../../lib/use-prefers-motion'
import useHasMounted from '../../lib/use-has-mounted'
const Content = () => (
<Grid
gap={3}
pt={[5, '100px']}
pb={[3, 4]}
>
<Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
<Box
sx={{
position: 'relative',

2
components/slack/join-form.js
View file

@ -16,7 +16,7 @@ const JoinForm = ({ sx = {} }) => {
return (
<Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
<form {...formProps}>
<Grid columns={[1,2]} gap={1} sx={{ columnGap: 3 }}>
<Grid columns={[1, 2]} gap={1} sx={{ columnGap: 3 }}>
<Label>
Full name
<Input

25
components/slack/slack-events.js
View file

@ -15,7 +15,9 @@ const emoji = ['🚀', '🥳', '😂', '💖', '👀', '👍', '🙌', '🙂', '
const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
const Channel = ({ color, channel }) => (
<Text as="strong" color={color}>{ channel }</Text>
<Text as="strong" color={color}>
{channel}
</Text>
)
const whitelistedChannels = new Set(
@ -41,17 +43,23 @@ const generateEvent = () => ({
timestamp: new Date().toISOString()
})
const SlackEvents = ({ sx, color, textColor, ...props }) => {
const didUnmount = useRef(false)
const [events, setEvents] = useState([])
function createMockEvents(){
function createMockEvents() {
setEvents(e => [generateEvent(), ...e])
setTimeout(() => createMockEvents(), 10000)
}
useEffect(() => {
setEvents([generateEvent(), generateEvent(), generateEvent(), generateEvent(), generateEvent(), generateEvent(), generateEvent()])
setEvents([
generateEvent(),
generateEvent(),
generateEvent(),
generateEvent(),
generateEvent(),
generateEvent(),
generateEvent()
])
setTimeout(() => createMockEvents(), 5000)
}, [])
@ -117,7 +125,9 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
display: 'block',
height: '2em',
backgroundImage: theme =>
`linear-gradient(rgba(255,255,255,0), ${color || theme.colors.white})`
`linear-gradient(rgba(255,255,255,0), ${
color || theme.colors.white
})`
},
div: { mb: [1, 2] },
'circle:last-of-type': { animationDuration: '1s' },
@ -153,7 +163,6 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
export default SlackEvents
// `
// 10-days-in-public amas assemble all-hands apple art bank books ib
// challenges code college-apps confessions cooking community coronavirus counttoamillion deals
@ -163,4 +172,4 @@ export default SlackEvents
// mayhaps memes minecraft music neuroscience photography python orpheus-podcast
// rust scrapbook ship sink-my-ship sleep social studycorner support swift swim
// politics newsletter surroundings sprig hackathon-organizers hq hq-surroundings
// `
// `

4
components/stickers/request-form.js
View file

@ -66,7 +66,9 @@ const RequestForm = () => {
Choose a country
</option>
{countries.countries.map(country => (
<option value={country} key={country}>{country}</option>
<option value={country} key={country}>
{country}
</option>
))}
</Select>
</Label>

45
components/winter/breakdown-box.js
View file

@ -11,7 +11,16 @@ import {
import { Zoom } from 'react-reveal'
import Icon from '@hackclub/icons'
function BreakdownBox({ subtitle, icon, text, description, delay, href, color, bg }) {
function BreakdownBox({
subtitle,
icon,
text,
description,
delay,
href,
color,
bg
}) {
return (
<Zoom delay={delay}>
<Card
@ -39,23 +48,23 @@ function BreakdownBox({ subtitle, icon, text, description, delay, href, color, b
</Text>
) : (
<Box
as="span"
sx={{
width: 'fit-content',
bg: bg || 'white',
borderRadius: 18,
lineHeight: 0,
p: 2,
mb: 1,
display: 'inline-block',
transform: ['scale(0.75)', 'none'],
transformOrigin: 'bottom left',
boxShadow:
'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
}}
>
<Icon glyph={icon} size={48} color={color || 'white'} />
</Box>
as="span"
sx={{
width: 'fit-content',
bg: bg || 'white',
borderRadius: 18,
lineHeight: 0,
p: 2,
mb: 1,
display: 'inline-block',
transform: ['scale(0.75)', 'none'],
transformOrigin: 'bottom left',
boxShadow:
'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
}}
>
<Icon glyph={icon} size={48} color={color || 'white'} />
</Box>
)}
<Heading
sx={{

9
components/winter/info.js
View file

@ -43,12 +43,7 @@ export default function InfoGrid() {
Free hardware for your project
</Heading>
<br />
<Button
as="a"
href="#rsvp"
variant="ctaLg"
sx={{ mt: 4 }}
>
<Button as="a" href="#rsvp" variant="ctaLg" sx={{ mt: 4 }}>
RSVP
</Button>
</Card>
@ -143,7 +138,7 @@ export default function InfoGrid() {
borderRadius: 'default',
px: 4,
py: 3,
mb: 3,
mb: 3
}}
>
<Heading variant="headline">

11
components/winter/recap.js
View file

@ -90,7 +90,16 @@ function Recap() {
</Button>
</Box> */}
</Grid>
<Button variant="ctaLg" as="a" href="#rsvp" style={{ zIndex: '100', textAlign: 'center', backgroundImage: theme.util.gx('green', 'blue') }}>
<Button
variant="ctaLg"
as="a"
href="#rsvp"
style={{
zIndex: '100',
textAlign: 'center',
backgroundImage: theme.util.gx('green', 'blue')
}}
>
RSVP
</Button>
</Container>

6
components/winter/timeline.js
View file

@ -94,7 +94,11 @@ function Step({ icon, name, duration, href }) {
{duration}
</Badge>
<Text
sx={{ color: 'white', fontSize: [2, 3], maxWidth: [300, null, 550] }}
sx={{
color: 'white',
fontSize: [2, 3],
maxWidth: [300, null, 550]
}}
>
{name}
</Text>

500
lib/countries.json
View file

@ -1,252 +1,252 @@
{
"countries": [
"United States of America (US)",
"Canada (CA)",
"United Kingdom of Great Britain and Northern Ireland (GB)",
"Afghanistan (AF)",
"Åland Islands (AX)",
"Albania (AL)",
"Algeria (DZ)",
"American Samoa (AS)",
"Andorra (AD)",
"Angola (AO)",
"Anguilla (AI)",
"Antarctica (AQ)",
"Antigua and Barbuda (AG)",
"Argentina (AR)",
"Armenia (AM)",
"Aruba (AW)",
"Australia (AU)",
"Austria (AT)",
"Azerbaijan (AZ)",
"Bahamas (BS)",
"Bahrain (BH)",
"Bangladesh (BD)",
"Barbados (BB)",
"Belarus (BY)",
"Belgium (BE)",
"Belize (BZ)",
"Benin (BJ)",
"Bermuda (BM)",
"Bhutan (BT)",
"Bolivia (BO)",
"Bonaire (BQ)",
"Bosnia and Herzegovina (BA)",
"Botswana (BW)",
"Bouvet Island (BV)",
"Brazil (BR)",
"British Indian Ocean Territory (IO)",
"Brunei Darussalam (BN)",
"Bulgaria (BG)",
"Burkina Faso (BF)",
"Burundi (BI)",
"Cabo Verde (CV)",
"Cambodia (KH)",
"Cameroon (CM)",
"Cayman Islands (KY)",
"Central African Republic (CF)",
"Chad (TD)",
"Chile (CL)",
"China (CN)",
"Christmas Island (CX)",
"Cocos (Keeling) Islands (CC)",
"Colombia (CO)",
"Comoros (KM)",
"Congo (the Democratic Republic of the) (CD)",
"Congo (the) (CG)",
"Cook Islands (CK)",
"Costa Rica (CR)",
"Côte d'Ivoire (CI)",
"Croatia (HR)",
"Cuba (CU)",
"Curaçao (CW)",
"Cyprus (CY)",
"Czechia (CZ)",
"Denmark (DK)",
"Djibouti (DJ)",
"Dominica (DM)",
"Dominican Republic (DO)",
"Ecuador (EC)",
"Egypt (EG)",
"El Salvador (SV)",
"Equatorial Guinea (GQ)",
"Eritrea (ER)",
"Estonia (EE)",
"Eswatini (SZ)",
"Ethiopia (ET)",
"Falkland Islands (FK)",
"Faroe Islands (FO)",
"Fiji (FJ)",
"Finland (FI)",
"France (FR)",
"French Guiana (GF)",
"French Polynesia (PF)",
"French Southern Territories (TF)",
"Gabon (GA)",
"Gambia (GM)",
"Georgia (GE)",
"Germany (DE)",
"Ghana (GH)",
"Gibraltar (GI)",
"Greece (GR)",
"Greenland (GL)",
"Grenada (GD)",
"Guadeloupe (GP)",
"Guam (GU)",
"Guatemala (GT)",
"Guernsey (GG)",
"Guinea (GN)",
"Guinea-Bissau (GW)",
"Guyana (GY)",
"Haiti (HT)",
"Heard Island and McDonald Islands (HM)",
"Holy See (VA)",
"Honduras (HN)",
"Hong Kong (HK)",
"Hungary (HU)",
"Iceland (IS)",
"India (IN)",
"Indonesia (ID)",
"Iran (IR)",
"Iraq (IQ)",
"Ireland (IE)",
"Isle of Man (IM)",
"Israel (IL)",
"Italy (IT)",
"Jamaica (JM)",
"Japan (JP)",
"Jersey (JE)",
"Jordan (JO)",
"Kazakhstan (KZ)",
"Kenya (KE)",
"Kiribati (KI)",
"Korea (the Democratic People's Republic of) (KP)",
"Korea (the Republic of) (KR)",
"Kuwait (KW)",
"Lao People's Democratic Republic (LA)",
"Latvia (LV)",
"Lebanon (LB)",
"Lesotho (LS)",
"Liberia (LR)",
"Libya (LY)",
"Liechtenstein (LI)",
"Lithuania (LT)",
"Luxembourg (LU)",
"Macao (MO)",
"Macedonia (the former Yugoslav Republic of) (MK)",
"Madagascar (MG)",
"Malawi (MW)",
"Malaysia (MY)",
"Maldives (MV)",
"Mali (ML)",
"Malta (MT)",
"Marshall Islands (MH)",
"Martinique (MQ)",
"Mauritania (MR)",
"Mauritius (MU)",
"Mayotte (YT)",
"Mexico (MX)",
"Micronesia (FM)",
"Moldova (MD)",
"Monaco (MC)",
"Mongolia (MN)",
"Montenegro (ME)",
"Montserrat (MS)",
"Morocco (MA)",
"Mozambique (MZ)",
"Myanmar (MM)",
"Namibia (NA)",
"Nauru (NR)",
"Nepal (NP)",
"Netherlands (NL)",
"New Caledonia (NC)",
"New Zealand (NZ)",
"Nicaragua (NI)",
"Niger (NE)",
"Nigeria (NG)",
"Niue (NU)",
"Norfolk Island (NF)",
"Northern Mariana Islands (MP)",
"Norway (NO)",
"Oman (OM)",
"Pakistan (PK)",
"Palau (PW)",
"Palestine (PS)",
"Panama (PA)",
"Papua New Guinea (PG)",
"Paraguay (PY)",
"Peru (PE)",
"Philippines (PH)",
"Pitcairn (PN)",
"Poland (PL)",
"Portugal (PT)",
"Puerto Rico (PR)",
"Qatar (QA)",
"Réunion (RE)",
"Romania (RO)",
"Russian Federation (RU)",
"Rwanda (RW)",
"Saint Barthélemy (BL)",
"Saint Helena, Ascension and Tristan da Cunha (SH)",
"Saint Kitts and Nevis (KN)",
"Saint Lucia (LC)",
"Saint Martin (MF)",
"Saint Pierre and Miquelon (PM)",
"Saint Vincent and the Grenadines (VC)",
"Samoa (WS)",
"San Marino (SM)",
"Sao Tome and Principe (ST)",
"Saudi Arabia (SA)",
"Senegal (SN)",
"Serbia (RS)",
"Seychelles (SC)",
"Sierra Leone (SL)",
"Singapore (SG)",
"Sint Maarten (SX)",
"Slovakia (SK)",
"Slovenia (SI)",
"Solomon Islands (SB)",
"Somalia (SO)",
"South Africa (ZA)",
"South Georgia and the South Sandwich Islands (GS)",
"South Sudan (SS)",
"Spain (ES)",
"Sri Lanka (LK)",
"Sudan (the) (SD)",
"Suriname (SR)",
"Svalbard (SJ)",
"Sweden (SE)",
"Switzerland (CH)",
"Syrian Arab Republic (SY)",
"Taiwan (TW)",
"Tajikistan (TJ)",
"Tanzania, United Republic of (TZ)",
"Thailand (TH)",
"Timor-Leste (TL)",
"Togo (TG)",
"Tokelau (TK)",
"Tonga (TO)",
"Trinidad and Tobago (TT)",
"Tunisia (TN)",
"Turkey (TR)",
"Turkmenistan (TM)",
"Turks and Caicos Islands (TC)",
"Tuvalu (TV)",
"Uganda (UG)",
"Ukraine (UA)",
"United Arab Emirates (AE)",
"United States Minor Outlying Islands (UM)",
"Uruguay (UY)",
"Uzbekistan (UZ)",
"Vanuatu (VU)",
"Venezuela (VE)",
"Viet Nam (VN)",
"Virgin Islands (British) (VG)",
"Virgin Islands (U.S.) (VI)",
"Wallis and Futuna (WF)",
"Western Sahara (EH)",
"Yemen (YE)",
"Zambia (ZM)",
"Zimbabwe (ZW)"
]
"countries": [
"United States of America (US)",
"Canada (CA)",
"United Kingdom of Great Britain and Northern Ireland (GB)",
"Afghanistan (AF)",
"Åland Islands (AX)",
"Albania (AL)",
"Algeria (DZ)",
"American Samoa (AS)",
"Andorra (AD)",
"Angola (AO)",
"Anguilla (AI)",
"Antarctica (AQ)",
"Antigua and Barbuda (AG)",
"Argentina (AR)",
"Armenia (AM)",
"Aruba (AW)",
"Australia (AU)",
"Austria (AT)",
"Azerbaijan (AZ)",
"Bahamas (BS)",
"Bahrain (BH)",
"Bangladesh (BD)",
"Barbados (BB)",
"Belarus (BY)",
"Belgium (BE)",
"Belize (BZ)",
"Benin (BJ)",
"Bermuda (BM)",
"Bhutan (BT)",
"Bolivia (BO)",
"Bonaire (BQ)",
"Bosnia and Herzegovina (BA)",
"Botswana (BW)",
"Bouvet Island (BV)",
"Brazil (BR)",
"British Indian Ocean Territory (IO)",
"Brunei Darussalam (BN)",
"Bulgaria (BG)",
"Burkina Faso (BF)",
"Burundi (BI)",
"Cabo Verde (CV)",
"Cambodia (KH)",
"Cameroon (CM)",
"Cayman Islands (KY)",
"Central African Republic (CF)",
"Chad (TD)",
"Chile (CL)",
"China (CN)",
"Christmas Island (CX)",
"Cocos (Keeling) Islands (CC)",
"Colombia (CO)",
"Comoros (KM)",
"Congo (the Democratic Republic of the) (CD)",
"Congo (the) (CG)",
"Cook Islands (CK)",
"Costa Rica (CR)",
"Côte d'Ivoire (CI)",
"Croatia (HR)",
"Cuba (CU)",
"Curaçao (CW)",
"Cyprus (CY)",
"Czechia (CZ)",
"Denmark (DK)",
"Djibouti (DJ)",
"Dominica (DM)",
"Dominican Republic (DO)",
"Ecuador (EC)",
"Egypt (EG)",
"El Salvador (SV)",
"Equatorial Guinea (GQ)",
"Eritrea (ER)",
"Estonia (EE)",
"Eswatini (SZ)",
"Ethiopia (ET)",
"Falkland Islands (FK)",
"Faroe Islands (FO)",
"Fiji (FJ)",
"Finland (FI)",
"France (FR)",
"French Guiana (GF)",
"French Polynesia (PF)",
"French Southern Territories (TF)",
"Gabon (GA)",
"Gambia (GM)",
"Georgia (GE)",
"Germany (DE)",
"Ghana (GH)",
"Gibraltar (GI)",
"Greece (GR)",
"Greenland (GL)",
"Grenada (GD)",
"Guadeloupe (GP)",
"Guam (GU)",
"Guatemala (GT)",
"Guernsey (GG)",
"Guinea (GN)",
"Guinea-Bissau (GW)",
"Guyana (GY)",
"Haiti (HT)",
"Heard Island and McDonald Islands (HM)",
"Holy See (VA)",
"Honduras (HN)",
"Hong Kong (HK)",
"Hungary (HU)",
"Iceland (IS)",
"India (IN)",
"Indonesia (ID)",
"Iran (IR)",
"Iraq (IQ)",
"Ireland (IE)",
"Isle of Man (IM)",
"Israel (IL)",
"Italy (IT)",
"Jamaica (JM)",
"Japan (JP)",
"Jersey (JE)",
"Jordan (JO)",
"Kazakhstan (KZ)",
"Kenya (KE)",
"Kiribati (KI)",
"Korea (the Democratic People's Republic of) (KP)",
"Korea (the Republic of) (KR)",
"Kuwait (KW)",
"Lao People's Democratic Republic (LA)",
"Latvia (LV)",
"Lebanon (LB)",
"Lesotho (LS)",
"Liberia (LR)",
"Libya (LY)",
"Liechtenstein (LI)",
"Lithuania (LT)",
"Luxembourg (LU)",
"Macao (MO)",
"Macedonia (the former Yugoslav Republic of) (MK)",
"Madagascar (MG)",
"Malawi (MW)",
"Malaysia (MY)",
"Maldives (MV)",
"Mali (ML)",
"Malta (MT)",
"Marshall Islands (MH)",
"Martinique (MQ)",
"Mauritania (MR)",
"Mauritius (MU)",
"Mayotte (YT)",
"Mexico (MX)",
"Micronesia (FM)",
"Moldova (MD)",
"Monaco (MC)",
"Mongolia (MN)",
"Montenegro (ME)",
"Montserrat (MS)",
"Morocco (MA)",
"Mozambique (MZ)",
"Myanmar (MM)",
"Namibia (NA)",
"Nauru (NR)",
"Nepal (NP)",
"Netherlands (NL)",
"New Caledonia (NC)",
"New Zealand (NZ)",
"Nicaragua (NI)",
"Niger (NE)",
"Nigeria (NG)",
"Niue (NU)",
"Norfolk Island (NF)",
"Northern Mariana Islands (MP)",
"Norway (NO)",
"Oman (OM)",
"Pakistan (PK)",
"Palau (PW)",
"Palestine (PS)",
"Panama (PA)",
"Papua New Guinea (PG)",
"Paraguay (PY)",
"Peru (PE)",
"Philippines (PH)",
"Pitcairn (PN)",
"Poland (PL)",
"Portugal (PT)",
"Puerto Rico (PR)",
"Qatar (QA)",
"Réunion (RE)",
"Romania (RO)",
"Russian Federation (RU)",
"Rwanda (RW)",
"Saint Barthélemy (BL)",
"Saint Helena, Ascension and Tristan da Cunha (SH)",
"Saint Kitts and Nevis (KN)",
"Saint Lucia (LC)",
"Saint Martin (MF)",
"Saint Pierre and Miquelon (PM)",
"Saint Vincent and the Grenadines (VC)",
"Samoa (WS)",
"San Marino (SM)",
"Sao Tome and Principe (ST)",
"Saudi Arabia (SA)",
"Senegal (SN)",
"Serbia (RS)",
"Seychelles (SC)",
"Sierra Leone (SL)",
"Singapore (SG)",
"Sint Maarten (SX)",
"Slovakia (SK)",
"Slovenia (SI)",
"Solomon Islands (SB)",
"Somalia (SO)",
"South Africa (ZA)",
"South Georgia and the South Sandwich Islands (GS)",
"South Sudan (SS)",
"Spain (ES)",
"Sri Lanka (LK)",
"Sudan (the) (SD)",
"Suriname (SR)",
"Svalbard (SJ)",
"Sweden (SE)",
"Switzerland (CH)",
"Syrian Arab Republic (SY)",
"Taiwan (TW)",
"Tajikistan (TJ)",
"Tanzania, United Republic of (TZ)",
"Thailand (TH)",
"Timor-Leste (TL)",
"Togo (TG)",
"Tokelau (TK)",
"Tonga (TO)",
"Trinidad and Tobago (TT)",
"Tunisia (TN)",
"Turkey (TR)",
"Turkmenistan (TM)",
"Turks and Caicos Islands (TC)",
"Tuvalu (TV)",
"Uganda (UG)",
"Ukraine (UA)",
"United Arab Emirates (AE)",
"United States Minor Outlying Islands (UM)",
"Uruguay (UY)",
"Uzbekistan (UZ)",
"Vanuatu (VU)",
"Venezuela (VE)",
"Viet Nam (VN)",
"Virgin Islands (British) (VG)",
"Virgin Islands (U.S.) (VI)",
"Wallis and Futuna (WF)",
"Western Sahara (EH)",
"Yemen (YE)",
"Zambia (ZM)",
"Zimbabwe (ZW)"
]
}

5
lib/dates.js
View file

@ -1,10 +1,7 @@
export const dt = d => new Date(d).toLocaleDateString()
const year = new Date().getFullYear()
export const tinyDt = d =>
dt(d)
.replace(`/${year}`, '')
.replace(`${year}-`, '')
export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
// based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
export const timeSince = (

2
lib/use-form.js
View file

@ -6,7 +6,7 @@ const useForm = (
options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
) => {
const [status, setStatus] = useState('default')
const [data, setData] = useState({...options.initData})
const [data, setData] = useState({ ...options.initData })
const [touched, setTouched] = useState({})
const onFieldChange = (e, name, type) => {

5
lib/use-prefers-reduced-motion.js
View file

@ -13,9 +13,8 @@ const getInitialState = () => {
}
function usePrefersReducedMotion() {
const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(
getInitialState
)
const [prefersReducedMotion, setPrefersReducedMotion] =
React.useState(getInitialState)
React.useEffect(() => {
const mediaQueryList = window.matchMedia(QUERY)
const listener = event => {

9
pages/_app.js
View file

@ -1,7 +1,7 @@
import React from 'react'
import Head from 'next/head'
import Analytics from "../components/analytics.js";
import Analytics from '../components/analytics.js'
import Meta from '@hackclub/meta'
import '@hackclub/theme/fonts/reg-bold.css'
@ -11,8 +11,11 @@ import { ThemeProvider } from 'theme-ui'
const App = ({ Component, pageProps }) => (
<ThemeProvider theme={theme}>
<Meta as={Head}>
<meta name="google-site-verification" content="7zE7h5foPaxIcnv5Frq6BkcUb9-3UzVc8q3P_cexf9I" />
</Meta>
<meta
name="google-site-verification"
content="7zE7h5foPaxIcnv5Frq6BkcUb9-3UzVc8q3P_cexf9I"
/>
</Meta>
<Component {...pageProps} />
<Analytics />
</ThemeProvider>

8
pages/api/channels/dogs.js
View file

@ -1,9 +1,13 @@
export default async function handler(req, res) {
// returns a url_private for the latest image posted in #dogs
const fileList = await fetch(`https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`)
const fileList = await fetch(
`https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
)
.then(r => r.json())
.catch(err => res.status(400).send(err))
const file = fileList.files ? fileList.files[0].url_private : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
const file = fileList.files
? fileList.files[0].url_private
: 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
res.redirect(file)
}

14
pages/api/contribute.js
View file

@ -4,11 +4,13 @@ import { createAppAuth } from '@octokit/auth-app'
const auth = createAppAuth({
appId: process.env.GITHUB_APP_ID,
privateKey: process.env.GITHUB_PRIVATE_KEY,
installationId: process.env.GITHUB_INSTALLATION_ID,
installationId: process.env.GITHUB_INSTALLATION_ID
})
export default async function handler(req, res) {
const { organization } = await graphql(!req.query.admin ? `
const { organization } = await graphql(
!req.query.admin
? `
query orgQuery($login: String!) {
organization(login: $login) {
repositories(first: 50, privacy: PUBLIC, orderBy: {
@ -30,8 +32,8 @@ export default async function handler(req, res) {
}
}
}
}` :
`query orgQuery($login: String!) {
}`
: `query orgQuery($login: String!) {
organization(login: $login) {
repositories(first: 100, privacy: PUBLIC, orderBy: {
field: PUSHED_AT, direction: DESC
@ -65,9 +67,9 @@ export default async function handler(req, res) {
{
login: 'hackclub',
request: {
hook: auth.hook,
hook: auth.hook
}
}
)
res.status(200).json(organization);
res.status(200).json(organization)
}

4
pages/api/games.js
View file

@ -2,7 +2,9 @@ export default async function getGames(req, res) {
let games = await fetch(
'https://editor.sprig.hackclub.com/metadata.json'
).then(res => res.json())
games = games.sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn)).slice(0, 4)
games = games
.sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
.slice(0, 4)
return res.json(games)
}

4
pages/api/github.js
View file

@ -1,5 +1,3 @@
export default async function github(req, res) {
let initialGitHubData = await fetch(
'https://api.github.com/orgs/hackclub/events'
@ -42,4 +40,4 @@ export default async function github(req, res) {
)
res.json(gitHubData)
}
}

2
pages/api/join.js
View file

@ -77,7 +77,7 @@ export default async function handler(req, res) {
teen: data.educationLevel != 'tertiary' ? true : false,
educationLevel: data.educationLevel,
reason: data.reason,
userAgent: req.headers['user-agent'],
userAgent: req.headers['user-agent']
},
{ authorization: `Bearer ${process.env.TORIEL_KEY}` }
)

4
pages/api/slack.js
View file

@ -1,7 +1,7 @@
import FormData from 'form-data'
export default async function Slack(req, res) {
const formData = new FormData()
const formData = new FormData()
formData.append('token', process.env.SLACK_API_TOKEN)
formData.append('date_range', '30d')
@ -20,4 +20,4 @@ export default async function Slack(req, res) {
slackData = slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
res.json(slackData)
}
}

2
pages/api/sprig-games.js
View file

@ -44,4 +44,4 @@
// res.json(image)
// // res.json(fetcher)
// }
// }

41
pages/api/stars.js
View file

@ -2,26 +2,27 @@ import { graphql } from '@octokit/graphql'
export default async function handler(req, res) {
const { organization } = await graphql(
`
{
organization(login: "hackclub") {
sinerider: repository(name: "sinerider") {
stargazerCount
},
sprig: repository(name: "sprig") {
stargazerCount
},
hackclub: repository(name: "hackclub") {
stargazerCount
},
hackathons: repository(name: "hackathons") {
stargazerCount
},
sprigHardware: repository(name: "sprig-hardware") {
stargazerCount
},
}
}`,
`
{
organization(login: "hackclub") {
sinerider: repository(name: "sinerider") {
stargazerCount
}
sprig: repository(name: "sprig") {
stargazerCount
}
hackclub: repository(name: "hackclub") {
stargazerCount
}
hackathons: repository(name: "hackathons") {
stargazerCount
}
sprigHardware: repository(name: "sprig-hardware") {
stargazerCount
}
}
}
`,
{
headers: {
authorization: `token ${process.env.GITHUB_TOKEN}`

45
pages/api/stickers.js
View file

@ -14,44 +14,53 @@ const addressesTable = new AirtablePlus({
export default async function handler(req, res) {
if (req.method === 'POST') {
const data = req.body
let personRecord = (await peopleTable.read({
filterByFormula: `{Email} = '${data.email}'`
}))[0]
let personRecord = (
await peopleTable.read({
filterByFormula: `{Email} = '${data.email}'`
})
)[0]
if (!personRecord) {
personRecord = await peopleTable.create({
'Full Name': data.name,
'Email': data.email
Email: data.email
})
}
let address = (await addressesTable.read({
filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
}))[0]
let address = (
await addressesTable.read({
filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
})
)[0]
console.log('address', address)
if (!address) {
address = await addressesTable.create({
'Street (First Line)': data.addressFirst,
'Street (Second Line)': data.addressSecond,
'City': data.city,
City: data.city,
'State/Province': data.state,
'Postal Code': data.zipCode,
'Country': data.country,
'Person': [personRecord.id]
Country: data.country,
Person: [personRecord.id]
})
console.log('created address:', address)
}
if (!(address.fields['Street (First Line)'].toLowerCase() === data.addressFirst.toLowerCase())) {
if (
!(
address.fields['Street (First Line)'].toLowerCase() ===
data.addressFirst.toLowerCase()
)
) {
address = await addressesTable.create({
'Street (First Line)': data.addressFirst,
'Street (Second Line)': data.addressSecond,
'City': data.city,
City: data.city,
'State/Province': data.state,
'Postal Code': data.zipCode,
'Country': data.country,
'Person': [personRecord.id]
Country: data.country,
Person: [personRecord.id]
})
}

23
pages/brand.js
View file

@ -27,7 +27,11 @@ export const Logo = ({ name }) => (
sx={{ width: '100%', height: 96, mb: 1 }}
alt={startCase(name)}
/>
<Text as="div" variant="subheadline" sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}>
<Text
as="div"
variant="subheadline"
sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
>
{startCase(name)
.replace('Flag Orpheus', 'Orpheus Flag –')
.replace('Bw', ' (B/W)')}
@ -242,7 +246,7 @@ const Page = ({ css }) => (
</Grid>
<Heading variant="headline">Fonts</Heading>
<Text variant="title">Phantom Sans</Text>
<Text variant="subtitle" sx={{ mb: 3 , ml: 2}}>
<Text variant="subtitle" sx={{ mb: 3, ml: 2 }}>
is our brand font.
</Text>
<Box as="details" mb={[4, 5]}>
@ -254,11 +258,7 @@ const Page = ({ css }) => (
</Text>
</Box>
<Heading variant="headline">Icons</Heading>
<Text
as="p"
variant="subtitle"
sx={{ mb: 3 }}
>
<Text as="p" variant="subtitle" sx={{ mb: 3 }}>
We have a custom iconset, published as{' '}
<A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
</Text>
@ -285,12 +285,9 @@ const Page = ({ css }) => (
Explore Hack Club Icons →
</Button>
<Heading variant="headline">UI components</Heading>
<Text
as="p"
variant="subtitle"
sx={{ mb: 3 }}
>
Want to make a Hack Club themed site? Use our pre-made CSS and UI components to hackify your site.
<Text as="p" variant="subtitle" sx={{ mb: 3 }}>
Want to make a Hack Club themed site? Use our pre-made CSS and UI
components to hackify your site.
</Text>
<Button
as="a"

8
pages/clubs.js
View file

@ -464,10 +464,10 @@ const Page = () => (
name="Tools to hack on"
desc={
<>
We build tools, such as{" "}
<a href="https://sprig.hackclub.com">Sprig</a>, that your members can
use to make projects with in meetings! Built more of them with us in our
{" "}<Link href="/slack">Slack community</Link>.
We build tools, such as{' '}
<a href="https://sprig.hackclub.com">Sprig</a>, that your
members can use to make projects with in meetings! Built more of
them with us in our <Link href="/slack">Slack community</Link>.
</>
}
></Feature>

13
pages/content/it-admins.mdx
View file

@ -9,29 +9,36 @@ path="filters.mdx">
If you are reading this, you are probably an IT administrator at your organization. **Here's a quick overview of what we need from you.**
Please whitelist or unblock the following domains:
- `*.hackclub.com` - Hack Club's primary domain, hosts workshops, tools and other content
- `hack.af` - link shortener used for miscellanous links
- `*.replit.com`, `*.cdn.replit.com`, and `*.repl.co` - Replit, a browser-based IDE used for workshops
- `*.github.com`, `github.dev` - GitHub, an industry standard for code hosting and collaboration, owned by Microsoft.
- `*.github.com`, `github.dev` - GitHub, an industry standard for code hosting and collaboration, owned by Microsoft.
- `hackclub.slack.com` - Hack Club's primary communication platform
Feel free to read on for more details and potential alternatives.
## Hack Club Sites
If you are unable to whitelist all subdomains, please whitelist the following:
- `hackclub.com`
- `workshops.hackclub.com`
- `editor.sprig.hackclub.com`
- `sprig.hackclub.com`
## GitHub
Besides the typical HTTP(S) ports, ports 22 and 9418 need to be open for SSH and Git respectively.
Besides the typical HTTP(S) ports, ports 22 and 9418 need to be open for SSH and Git respectively.
## Inspect Element / Developer Tools
Browser developer tools (eg. Inspect Element) are required for web development projects, so that sites can be debugged and styled.
## Replit
Replit provides their own [toolkit](https://docs.replit.com/teams-edu/it-administrators-toolkit) for IT administrators with further options for providing student access to Replit, including a firewalled domain.
Thank you for supporting your students and their interests. If you have any questions, please reach out to us at [clubs@hackclub.com](mailto:clubs@hackclub.com) and we'd be happy to address your concerns.
</Letterhead>

20
pages/content/sponsorship.mdx
View file

@ -8,19 +8,19 @@ img="https://workshop-cards.hackclub.com/Sponsorship.png?brand=HQ&fontSize=300px
path="sponsorship.mdx">
<Announcement
as="a"
copy="Is your hackathon in person and happening this semester?"
caption="$500 grants and more, with support from Hack Club and FIRST®."
href="/hackathons/grant"
iconLeft="event-code"
color="primary"
sx={{
as="a"
copy="Is your hackathon in person and happening this semester?"
caption="$500 grants and more, with support from Hack Club and FIRST®."
href="/hackathons/grant"
iconLeft="event-code"
color="primary"
sx={{
maxWidth: 'container',
mx: '0',
mt: '0',
background: '#f9fafc !important',
boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
}}
}}
/>
_(To summarize: we’re a donor-supported nonprofit so outside of planned grant programs, we don't provide financial support to hackathons/other nonprofits. However, there are all kinds of ways we’d love to help out your project, so read on.)_
@ -32,8 +32,8 @@ If you’re looking for [fiscal sponsorship](https://en.wikipedia.org/wiki/Fisca
## If you’re running a hackathon…
1. Link your event on <https://hackathons.hackclub.com/>. There’s an application form on the website. The site has the largest email list of high school hackathon-goers, and will email all the subscribers who live within driving distance of your event. It’s also the first Google result for “high school hackathons,” so it’ll help your SEO.
3. We’d be happy to send some Hack Club stickers to your event. Email us <team@hackclub.com> with the name of your event, expected attendance, and the shipping address and we’ll get them in the mail.
4. [Join our Slack community](https://hackclub.com/slack/), and ask for access to the `#hackathon-organizers` channel. You can ask questions and talk to 500+ hackathon organizers from all over.
2. We’d be happy to send some Hack Club stickers to your event. Email us <team@hackclub.com> with the name of your event, expected attendance, and the shipping address and we’ll get them in the mail.
3. [Join our Slack community](https://hackclub.com/slack/), and ask for access to the `#hackathon-organizers` channel. You can ask questions and talk to 500+ hackathon organizers from all over.
## If you’re running a club…

2
pages/deprecated/[deprecated].js
View file

@ -70,7 +70,7 @@ const pages = {
desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
link: 'https://education.github.com/pack',
icon: 'github'
},
}
}
export const getStaticPaths = () => {

4
pages/donate.js
View file

@ -331,7 +331,7 @@ export default function Donate({ sprig }) {
fontSize: 4,
textTransform: 'uppercase',
fontWeight: [400, 800],
mb: [0,0]
mb: [0, 0]
}}
>
Now introducing...
@ -408,7 +408,7 @@ export default function Donate({ sprig }) {
width={3000}
height={2550}
showAlt
sx={{height: '100%'}}
sx={{ height: '100%' }}
/>
</Grid>
<Sheet

6
pages/elon.js
View file

@ -1,5 +1,9 @@
import { Box, Container, Heading, Text } from 'theme-ui'
import { PillHolder, AuthorPill, DatePill } from '../components/announcements/pills'
import {
PillHolder,
AuthorPill,
DatePill
} from '../components/announcements/pills'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import Nav from '../components/nav'

5
pages/hackathons/grant.js
View file

@ -185,8 +185,9 @@ const HackathonGrant = () => {
Hack Club Bank
</Link>{' '}
fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
<a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons <s>this
semester between August and December 31, 2022</s> until June 30th, 2023.
<a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons{' '}
<s>this semester between August and December 31, 2022</s> until
June 30th, 2023.
</Box>
<Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
{open ? 'Apply Now' : 'Coming Soon'}

4
pages/jobs/events-designer.js
View file

@ -240,8 +240,8 @@ const Page = () => (
variant="headline"
sx={{ fontWeight: 700, fontSize: [4, 5], mb: 4 }}
>
Hack Club is where {formatted}+ teenage programmers talk, build, and have fun
together.
Hack Club is where {formatted}+ teenage programmers talk, build, and
have fun together.
</Heading>
<Grid my={4} gap={3} columns={[null, 2, 3]}>

712
pages/jobs/lead-hacker.js
View file

@ -1,356 +1,356 @@
import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
import Head from 'next/head'
import Nav from '../../components/nav'
import Meta from '@hackclub/meta'
import ForceTheme from '../../components/force-theme'
import Photo from '../../components/photo'
import { formatted } from '../../lib/members'
const Page = () => (
<>
<Meta
as={Head}
title="Lead Hacker"
description="Hack Club is a hiring a Lead Hacker for Hack Club Bank as the 9th full-time member of our team in Burlington, Vermont."
image="https://workshop-cards.hackclub.com/Lead%20Hacker.png?theme=light&md=1&fontSize=250px&caption=Open%2520Role%2520%2540%2520Hack%2520Club%2520Bank&brand=HQ&md=true"
/>
<ForceTheme theme="light" />
<Nav />
<Box
as="section"
sx={{
pt: [5, 6],
pb: [4, 5],
backgroundImage: theme => theme.util.gx('purple', 'red')
}}
>
<Container sx={{ textAlign: 'center', color: 'white' }}>
<Heading as="h1" variant="title" mb={30}>
Lead Hacker @&nbsp;Hack&nbsp;Club Bank
</Heading>
<Text variant="headline" sx={{ fontWeight: 400 }}>
This position has been filled as of June 14th, 2022.
</Text>
</Container>
</Box>
<Container
as="section"
sx={{
py: [4, 5],
fontSize: [2, 3]
}}
>
<Heading
variant="headline"
sx={{ fontWeight: 700, fontSize: [4, 5], mb: 4 }}
>
Hack Club is (no longer) hiring a Lead Hacker for Hack Club Bank.
</Heading>
<Text as="p" mb={4}>
Starting a nonprofit is hard, so we built{' '}
<Link href="/bank" target="_blank">
Hack Club Bank
</Link>{' '}
for our community of {formatted}+ teenage programmers. Within 24 hours
of joining Bank, organizations get 501(c)(3) nonprofit status, access to
a beautiful dashboard for managing their finances, and all financial and
legal matters - from tax filings to payroll - handled. 50% of high
school hackathons worldwide run on Hack Club Bank, and Elon Musk has
tweeted that we're a{' '}
<Link
href="https://twitter.com/elonmusk/status/1263275969743216640"
target="_blank"
rel="noopener noreferrer"
>
"cool group"
</Link>
.
</Text>
<Text as="p" mb={4}>
Now, Hack Club Bank is expanding beyond just Hack Clubbers.{' '}
<strong>
Over 500 organizations running on Bank have transacted upwards of
$5,000,000;
</strong>{' '}
from teenage-run hackathons to{' '}
<Link
href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
target="_blank"
rel="noopener noreferrer"
>
small-town newspapers
</Link>
.
</Text>
<Text as="p">
With the right leadership, we hope to bring Hack Club Bank to thousands
of organizations across the United States and process tens of millions
of dollars in transactions. We think do-gooders need the same tools that
software engineers do. For them, Bank is like GitHub: transformative.
Right now, Bank is the{' '}
<strong>
only part of Hack Club that isn't{' '}
<Link
href="https://github.com/hackclub/"
target="_blank"
rel="noopener noreferrer"
>
open source
</Link>
.
</strong>{' '}
In the next year we want to open source it, build an amazing community
of Hack Clubbers contributing to it, and onboard 1,000 new organizations
through our{' '}
<Link
href="https://givebutter.com/fiscal-sponsorship"
target="_blank"
rel="noopener noreferrer"
>
partnership with Givebutter
</Link>
.
</Text>
<Box my={5}>
<strong>✨ The perfect candidate:</strong>
<Grid
my={3}
gap={3}
columns={[null, null, 2]}
sx={{
'> div': {
p: 3,
fontSize: 2
}
}}
>
<Card
sx={{
background:
'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
color: 'white'
}}
>
Loves coding, is a Ruby on Rails expert, and has managed small teams
of engineers before
</Card>
<Card
sx={{
background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
color: 'white'
}}
>
Is product-oriented, believes in attention-to-detail and creating
phenomenal user experiences
</Card>
<Card
sx={{
background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
color: 'white'
}}
>
Has strong familiarity with open source, maybe even built or managed
open source projects
</Card>
<Card
sx={{
background:
'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
color: 'white'
}}
>
Has experience building resilient systems and implementing security
best practices and/or loves working with teenagers
</Card>
</Grid>
<Text as="p">
This role pays between $150K - $210K, depending on your experience. We
know that might be less than you'd make elsewhere. We offer healthcare
and 4 weeks paid vacation.
</Text>
</Box>
<Heading
variant="headline"
sx={{ fontWeight: 700, fontSize: [4, 5], mb: 4 }}
>
Make Bank even more awesome.
</Heading>
<Box sx={{ p: { my: [3, 4] } }}>
<Text as="p">
Bank has been maintained by a{' '}
<Link href="/team/" target="_blank">
{' '}
small team
</Link>{' '}
of two full-time operations people, and on-and-off contributions by
engineers and various contractors. The majority of{' '}
<Link href="https://changelog.bank.hackclub.com/" target="_blank">
contributions
</Link>{' '}
are actually made by teenagers! In this role, you'll take point on
bringing Bank to its full potential.
</Text>
<Text as="p">
Hack Club Bank already powers{' '}
<Link href="https://bank.hackclub.com/hq" target="_blank">
our own transparent finances
</Link>{' '}
as well as those of{' '}
<Link
href="https://bank.hackclub.com/miami-hack-week/"
target="_blank"
>
many
</Link>{' '}
<Link href="https://bank.hackclub.com/mesto/" target="_blank">
other
</Link>{' '}
<Link href="https://bank.hackclub.com/techshift/" target="_blank">
organizations
</Link>
. These are just some of the initiatives we support:
</Text>
<Grid mb={5} gap={3} columns={[null, 2, 3]}>
<Photo
src="/jobs/charlotte-vt.jpg"
alt={
<>
<Link
href="https://thecharlottebridge.org/"
target="_blank"
rel="noopener noreferrer"
>
The Charlotte Bridge
</Link>
, independent journalism based in Vermont
</>
}
width={500}
height={326.5}
showAlt
/>
<Photo
src="/home/golden-train.png"
alt={
<>
<Link
href="https://www.youtube.com/watch?v=2BID8_pGuqA"
target="_blank"
rel="noopener noreferrer"
>
The Hacker Zephyr
</Link>
, the world's longest (by land) hackathon on a train
</>
}
width={500}
height={326.5}
showAlt
/>
<Photo
src="/jobs/hack-penn.jpg"
alt={
<>
<Link
href="https://hackpenn.com/"
target="_blank"
rel="noopener noreferrer"
>
Hack Pennsylvania
</Link>
, the largest high school hackathon in Pennsylvania
</>
}
width={500}
height={326.5}
showAlt
/>
</Grid>
<Text as="p">
Like a CTO, you'll work directly with real users to define Bank's
roadmap around <strong>making Bank better for Hack Clubbers.</strong>{' '}
You will build and lead a team of Hack Clubbers to create a shipping
culture around Bank, and lead and manage relationships with technical
partners who integrate Bank into their products.
</Text>
<Text as="p">
We're flexible and eager to accommodate for the right candidate. While
we have a preference for in-person and can assist with relocation,
we're open to remote options. We have an in-person office in
Burlington, Vermont where our 8 person team works collaboratively.
</Text>
<Box as="p">
<strong>How to apply:</strong> Email{' '}
<Link
href="mailto:jobs@hackclub.com"
target="_blank"
rel="noopener noreferrer"
>
jobs@hackclub.com
</Link>{' '}
with "Hack Club Bank" in the subject line, 3 bullet points
demonstrating why you would be exceptional for the role, and your
resume / GitHub / GitLab / sourcehut.
</Box>
</Box>
<Flex
sx={{
flexDirection: ['column', 'column', 'row'],
gap: 4,
fontSize: 2,
my: 5
}}
>
<Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
<Photo
src="/jobs/hq.jpg"
alt="Our headquarters in beautiful Shelburne, Vermont"
width={500}
height={326.5}
showAlt
/>
</Box>
<Box sx={{ flex: 1, p: { mb: 3 } }}>
<Box as="p">
The mission of Hack Club is to be a place where teenagers can become
more technical, feel welcome in getting started, and feel inspired
to build with code in ways that are always honest, transparent,
high-integrity, kind, and friendly. We want teenagers to
self-organize and assert themselves as persons.
</Box>
<Box as="p">
Already, Hack Club is the{' '}
<strong>largest network of teen coders in the country</strong>. We
hope for a world where Hack Club becomes a nationwide cultural
institution, creating a new generation of young people with the
skills, network, and value system to become problem-solvers and
builders for the 21st century&mdash; a new Boy and Girl Scouts.
</Box>
</Box>
</Flex>
</Container>
</>
)
export default Page
import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
import Head from 'next/head'
import Nav from '../../components/nav'
import Meta from '@hackclub/meta'
import ForceTheme from '../../components/force-theme'
import Photo from '../../components/photo'
import { formatted } from '../../lib/members'
const Page = () => (
<>
<Meta
as={Head}
title="Lead Hacker"
description="Hack Club is a hiring a Lead Hacker for Hack Club Bank as the 9th full-time member of our team in Burlington, Vermont."
image="https://workshop-cards.hackclub.com/Lead%20Hacker.png?theme=light&md=1&fontSize=250px&caption=Open%2520Role%2520%2540%2520Hack%2520Club%2520Bank&brand=HQ&md=true"
/>
<ForceTheme theme="light" />
<Nav />
<Box
as="section"
sx={{
pt: [5, 6],
pb: [4, 5],
backgroundImage: theme => theme.util.gx('purple', 'red')
}}
>
<Container sx={{ textAlign: 'center', color: 'white' }}>
<Heading as="h1" variant="title" mb={30}>
Lead Hacker @&nbsp;Hack&nbsp;Club Bank
</Heading>
<Text variant="headline" sx={{ fontWeight: 400 }}>
This position has been filled as of June 14th, 2022.
</Text>
</Container>
</Box>
<Container
as="section"
sx={{
py: [4, 5],
fontSize: [2, 3]
}}
>
<Heading
variant="headline"
sx={{ fontWeight: 700, fontSize: [4, 5], mb: 4 }}
>
Hack Club is (no longer) hiring a Lead Hacker for Hack Club Bank.
</Heading>
<Text as="p" mb={4}>
Starting a nonprofit is hard, so we built{' '}
<Link href="/bank" target="_blank">
Hack Club Bank
</Link>{' '}
for our community of {formatted}+ teenage programmers. Within 24 hours
of joining Bank, organizations get 501(c)(3) nonprofit status, access to
a beautiful dashboard for managing their finances, and all financial and
legal matters - from tax filings to payroll - handled. 50% of high
school hackathons worldwide run on Hack Club Bank, and Elon Musk has
tweeted that we're a{' '}
<Link
href="https://twitter.com/elonmusk/status/1263275969743216640"
target="_blank"
rel="noopener noreferrer"
>
"cool group"
</Link>
.
</Text>
<Text as="p" mb={4}>
Now, Hack Club Bank is expanding beyond just Hack Clubbers.{' '}
<strong>
Over 500 organizations running on Bank have transacted upwards of
$5,000,000;
</strong>{' '}
from teenage-run hackathons to{' '}
<Link
href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
target="_blank"
rel="noopener noreferrer"
>
small-town newspapers
</Link>
.
</Text>
<Text as="p">
With the right leadership, we hope to bring Hack Club Bank to thousands
of organizations across the United States and process tens of millions
of dollars in transactions. We think do-gooders need the same tools that
software engineers do. For them, Bank is like GitHub: transformative.
Right now, Bank is the{' '}
<strong>
only part of Hack Club that isn't{' '}
<Link
href="https://github.com/hackclub/"
target="_blank"
rel="noopener noreferrer"
>
open source
</Link>
.
</strong>{' '}
In the next year we want to open source it, build an amazing community
of Hack Clubbers contributing to it, and onboard 1,000 new organizations
through our{' '}
<Link
href="https://givebutter.com/fiscal-sponsorship"
target="_blank"
rel="noopener noreferrer"
>
partnership with Givebutter
</Link>
.
</Text>
<Box my={5}>
<strong>✨ The perfect candidate:</strong>
<Grid
my={3}
gap={3}
columns={[null, null, 2]}
sx={{
'> div': {
p: 3,
fontSize: 2
}
}}
>
<Card
sx={{
background:
'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
color: 'white'
}}
>
Loves coding, is a Ruby on Rails expert, and has managed small teams
of engineers before
</Card>
<Card
sx={{
background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
color: 'white'
}}
>
Is product-oriented, believes in attention-to-detail and creating
phenomenal user experiences
</Card>
<Card
sx={{
background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
color: 'white'
}}
>
Has strong familiarity with open source, maybe even built or managed
open source projects
</Card>
<Card
sx={{
background:
'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
color: 'white'
}}
>
Has experience building resilient systems and implementing security
best practices and/or loves working with teenagers
</Card>
</Grid>
<Text as="p">
This role pays between $150K - $210K, depending on your experience. We
know that might be less than you'd make elsewhere. We offer healthcare
and 4 weeks paid vacation.
</Text>
</Box>
<Heading
variant="headline"
sx={{ fontWeight: 700, fontSize: [4, 5], mb: 4 }}
>
Make Bank even more awesome.
</Heading>
<Box sx={{ p: { my: [3, 4] } }}>
<Text as="p">
Bank has been maintained by a{' '}
<Link href="/team/" target="_blank">
{' '}
small team
</Link>{' '}
of two full-time operations people, and on-and-off contributions by
engineers and various contractors. The majority of{' '}
<Link href="https://changelog.bank.hackclub.com/" target="_blank">
contributions
</Link>{' '}
are actually made by teenagers! In this role, you'll take point on
bringing Bank to its full potential.
</Text>
<Text as="p">
Hack Club Bank already powers{' '}
<Link href="https://bank.hackclub.com/hq" target="_blank">
our own transparent finances
</Link>{' '}
as well as those of{' '}
<Link
href="https://bank.hackclub.com/miami-hack-week/"
target="_blank"
>
many
</Link>{' '}
<Link href="https://bank.hackclub.com/mesto/" target="_blank">
other
</Link>{' '}
<Link href="https://bank.hackclub.com/techshift/" target="_blank">
organizations
</Link>
. These are just some of the initiatives we support:
</Text>
<Grid mb={5} gap={3} columns={[null, 2, 3]}>
<Photo
src="/jobs/charlotte-vt.jpg"
alt={
<>
<Link
href="https://thecharlottebridge.org/"
target="_blank"
rel="noopener noreferrer"
>
The Charlotte Bridge
</Link>
, independent journalism based in Vermont
</>
}
width={500}
height={326.5}
showAlt
/>
<Photo
src="/home/golden-train.png"
alt={
<>
<Link
href="https://www.youtube.com/watch?v=2BID8_pGuqA"
target="_blank"
rel="noopener noreferrer"
>
The Hacker Zephyr
</Link>
, the world's longest (by land) hackathon on a train
</>
}
width={500}
height={326.5}
showAlt
/>
<Photo
src="/jobs/hack-penn.jpg"
alt={
<>
<Link
href="https://hackpenn.com/"
target="_blank"
rel="noopener noreferrer"
>
Hack Pennsylvania
</Link>
, the largest high school hackathon in Pennsylvania
</>
}
width={500}
height={326.5}
showAlt
/>
</Grid>
<Text as="p">
Like a CTO, you'll work directly with real users to define Bank's
roadmap around <strong>making Bank better for Hack Clubbers.</strong>{' '}
You will build and lead a team of Hack Clubbers to create a shipping
culture around Bank, and lead and manage relationships with technical
partners who integrate Bank into their products.
</Text>
<Text as="p">
We're flexible and eager to accommodate for the right candidate. While
we have a preference for in-person and can assist with relocation,
we're open to remote options. We have an in-person office in
Burlington, Vermont where our 8 person team works collaboratively.
</Text>
<Box as="p">
<strong>How to apply:</strong> Email{' '}
<Link
href="mailto:jobs@hackclub.com"
target="_blank"
rel="noopener noreferrer"
>
jobs@hackclub.com
</Link>{' '}
with "Hack Club Bank" in the subject line, 3 bullet points
demonstrating why you would be exceptional for the role, and your
resume / GitHub / GitLab / sourcehut.
</Box>
</Box>
<Flex
sx={{
flexDirection: ['column', 'column', 'row'],
gap: 4,
fontSize: 2,
my: 5
}}
>
<Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
<Photo
src="/jobs/hq.jpg"
alt="Our headquarters in beautiful Shelburne, Vermont"
width={500}
height={326.5}
showAlt
/>
</Box>
<Box sx={{ flex: 1, p: { mb: 3 } }}>
<Box as="p">
The mission of Hack Club is to be a place where teenagers can become
more technical, feel welcome in getting started, and feel inspired
to build with code in ways that are always honest, transparent,
high-integrity, kind, and friendly. We want teenagers to
self-organize and assert themselves as persons.
</Box>
<Box as="p">
Already, Hack Club is the{' '}
<strong>largest network of teen coders in the country</strong>. We
hope for a world where Hack Club becomes a nationwide cultural
institution, creating a new generation of young people with the
skills, network, and value system to become problem-solvers and
builders for the 21st century&mdash; a new Boy and Girl Scouts.
</Box>
</Box>
</Flex>
</Container>
</>
)
export default Page

2
pages/jobs/philanthropy-communications-lead.js
View file

@ -25,7 +25,7 @@ const Page = () => (
>
<Container sx={{ textAlign: 'center', color: 'white' }}>
<Heading as="h1" variant="title" mb={30}>
Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
</Heading>
<Text variant="headline" sx={{ fontWeight: 400 }}>
This position has been filled as of May 3rd, 2022.

6
pages/minecraft.js
View file

@ -70,7 +70,7 @@ const Page = () => (
>
<Card>
<Heading as="h3" variant="subheadline">
Vanilla Server
Vanilla Server
</Heading>
<Text as="p">
Hang out with the tree-punchers of Hack&nbsp;Club playing on the
@ -85,11 +85,11 @@ const Page = () => (
Modded Server
</Heading>
<Text as="p">
Want a unique Minecraft experience? Come explore the limits of
Want a unique Minecraft experience? Come explore the limits of
Minecraft with us on the official modded server!
</Text>
</Card>
<Card sx={{ display: 'none'}}>
<Card sx={{ display: 'none' }}>
<Heading as="h3" variant="subheadline">
Compete weekly
</Heading>

2
pages/night.js
View file

@ -144,4 +144,4 @@ const Page = () => (
</>
)
export default Page
export default Page

41
pages/opensource.js
View file

@ -1,4 +1,14 @@
import { Box, Button, Card, Container, Flex, Grid, Heading, Text, Link } from 'theme-ui'
import {
Box,
Button,
Card,
Container,
Flex,
Grid,
Heading,
Text,
Link
} from 'theme-ui'
import Meta from '@hackclub/meta'
import Icon from '@hackclub/icons'
import Head from 'next/head'
@ -67,8 +77,14 @@ const Page = ({ repos }) => (
<Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
Explore our finances, code, planning documents and more.
</Heading>
<Button variant="outline" as="a" target="_blank" mt={3} href="https://contribute.hackclub.com">
Our Guide to Contributing
<Button
variant="outline"
as="a"
target="_blank"
mt={3}
href="https://contribute.hackclub.com"
>
Our Guide to Contributing
</Button>
</Container>
</Box>
@ -119,14 +135,8 @@ const Page = ({ repos }) => (
name="Wild Wild West"
url="https://bank.hackclub.com/wild-wild-west"
/>
<BankProject
name="Assemble"
url="https://bank.hackclub.com/assemble"
/>
<BankProject
name="Epoch"
url="https://bank.hackclub.com/epoch"
/>
<BankProject name="Assemble" url="https://bank.hackclub.com/assemble" />
<BankProject name="Epoch" url="https://bank.hackclub.com/epoch" />
</Grid>
<Heading
variant="headline"
@ -138,7 +148,7 @@ const Page = ({ repos }) => (
Includes planning documents, partnership emails, meeting notes etc.
</Text>
<Grid columns={2} gap={3} mt={2} mb={[4]}>
<BankProject
<BankProject
name="Assemble"
url={`https://github.com/hackclub/assemble`}
/>
@ -166,7 +176,7 @@ const Page = ({ repos }) => (
name="VIP Newsletter"
url={`https://github.com/hackclub/vip-newsletters`}
/>
<BankProject
<BankProject
name="Community Newsletter"
url={`https://github.com/hackclub/newsletter`}
/>
@ -179,7 +189,10 @@ const Page = ({ repos }) => (
GitHub Repositories
</Heading>
<Link href="https://contribute.hackclub.com/" sx={{ fontSize: 2, display: 'block', mb: 3}}>
<Link
href="https://contribute.hackclub.com/"
sx={{ fontSize: 2, display: 'block', mb: 3 }}
>
Want to contribute?
</Link>

14
pages/philanthropy/index.js
View file

@ -658,7 +658,8 @@ const Philanthropy = ({ posts = [] }) => {
</Button>
</Flex>
<span>
Starting in 2021, Hack Club has engaged with an external auditing firm and has audited financials through the current fiscal year.
Starting in 2021, Hack Club has engaged with an external auditing
firm and has audited financials through the current fiscal year.
</span>
</Fade>
{/* <Fade bottom delay={300}>
@ -1190,14 +1191,19 @@ const Philanthropy = ({ posts = [] }) => {
<Fade bottom delay={200}>
<Q>
<Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
In 2021, Maggie joined the Hack Club community; she has since shipped 10+
coding projects from widgets to raycast extensions.
In 2021, Maggie joined the Hack Club community; she has since
shipped 10+ coding projects from widgets to raycast
extensions.
</Heading>
<Heading
fontSize={[4, 5]}
sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
>
The Hack Club community "inspired me to step outside my comfort zone and take on challenges I never previously would have — starting a CS Club at my school, (co-)hosting AMAs, and even organizing Leland Hacks, the first in-person hackathon in my city after the pandemic.”
The Hack Club community "inspired me to step outside my
comfort zone and take on challenges I never previously would
have — starting a CS Club at my school, (co-)hosting AMAs, and
even organizing Leland Hacks, the first in-person hackathon in
my city after the pandemic.”
</Heading>
<Flex align="center" mt={[3, 4]}>
<Avatar

21
pages/philanthropy/supporters.js
View file

@ -22,7 +22,6 @@ import Sponsors from '../../components/donate/sponsors'
import donors from '../../components/donate/donors.json'
import Footer from '../../components/footer'
const Header = styled(Box)`
background: url('/pattern.svg');
`
@ -233,14 +232,18 @@ export default function Donate({ sprig }) {
<Sponsors />
</Row>
<Button
as="a"
href="/philanthropy"
target="_blank"
mb={4}
sx={{fontSize: '1em !important', background: 'slate', textAlign: 'center'}}
>
Learn more about Hack Club
</Button>
as="a"
href="/philanthropy"
target="_blank"
mb={4}
sx={{
fontSize: '1em !important',
background: 'slate',
textAlign: 'center'
}}
>
Learn more about Hack Club
</Button>
</Container>
<Footer />
</Box>

7
pages/philosophy.js
View file

@ -4,7 +4,7 @@ import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
import Nav from '../components/nav'
import styled from '@emotion/styled'
import Footer from '../components/footer'
import NextLink from "next/link"
import NextLink from 'next/link'
const Header = styled(Box)`
color: white;
@ -270,10 +270,7 @@ export default function Philosophy() {
Start a club
</Button>
<NextLink href="/slack" passHref>
<Button
sx={{ bg: 'white', color: 'red' }}
as="a"
>
<Button sx={{ bg: 'white', color: 'red' }} as="a">
Join our Slack
</Button>
</NextLink>

1
pages/press.js
View file

@ -9,7 +9,6 @@ import { Logo } from './brand'
const Page = () => (
<>
<Meta
as={Head}
title="Press"

6
pages/preston-werner.js
View file

@ -16,7 +16,11 @@ import Footer from '../components/footer'
import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
import SlackCTA from '../components/announcements/cta'
import AnnouncementHolder from '../components/announcements/holder'
import { PillHolder, AuthorPill, DatePill } from '../components/announcements/pills'
import {
PillHolder,
AuthorPill,
DatePill
} from '../components/announcements/pills'
const Page = () => (
<>

23
pages/relon.js
View file

@ -8,9 +8,13 @@ import {
Flex,
Grid,
Heading,
Text,
Text
} from 'theme-ui'
import { PillHolder, AuthorPill, DatePill } from '../components/announcements/pills'
import {
PillHolder,
AuthorPill,
DatePill
} from '../components/announcements/pills'
import Head from 'next/head'
import NextLink from 'next/link'
import styled from '@emotion/styled'
@ -24,22 +28,18 @@ import Amount from '../components/announcements/amount'
import SlackCTA from '../components/announcements/cta'
import AnnouncementHolder from '../components/announcements/holder'
const StyledLink = styled.a`
text-decoration: none;
color: ${theme.colors.white};
`;
`
const RelonLink = (props) => {
const {href} = props
const RelonLink = props => {
const { href } = props
return (
<NextLink href={href} passHref>
<StyledLink>
{props.children}
</StyledLink>
<StyledLink>{props.children}</StyledLink>
</NextLink>
)
}
const RelonPage = () => (
@ -74,7 +74,8 @@ const RelonPage = () => (
}
}}
>
Elon Musk is donating <Amount amount="$1,000,000" /> to <RelonLink href="/">Hack Club</RelonLink>
Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
<RelonLink href="/">Hack Club</RelonLink>
</Heading>
</Container>
</Box>

5
pages/ship.js
View file

@ -139,8 +139,9 @@ const ShipPage = ({ posts = [] }) => (
Want to ship your own projects?
</Heading>
<Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+ teenagers
from around the world share what they’re working on & help each other.
The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
teenagers from around the world share what they’re working on & help
each other.
</Text>
<NextLink href="/slack" passHref>
<Button variant="cta" sx={{ py: 2, px: 3, fontSize: 2 }} as="a">