System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 16:28:21 +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'

10
components/announcements/amount.js
View file

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

2
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, ',')
}

4
components/donate/sprigMeta.js
View file

@ -2,11 +2,13 @@ import Meta from '@hackclub/meta'
import Head from 'next/head'
const SprigMeta = () => {
return <Meta
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

2
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({

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}

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

@ -142,7 +142,7 @@ 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' }}>
@ -170,16 +170,49 @@ export default function Epoch() {
</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) ? (

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

@ -8,26 +8,27 @@ This person should be a strong and persuasive writer, be diligent and detail-ori
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 
- 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 
- 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 
- 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.

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)

1
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

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

@ -20,13 +20,13 @@ 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
- 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

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 (

15
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,12 +118,12 @@ 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>
</>

2
components/scroll-hint.js
View file

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

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

23
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

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>

11
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

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>

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 => {

7
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,7 +11,10 @@ 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
name="google-site-verification"
content="7zE7h5foPaxIcnv5Frq6BkcUb9-3UzVc8q3P_cexf9I"
/>
</Meta>
<Component {...pageProps} />
<Analytics />

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)
}

2
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'

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}` }
)

13
pages/api/stars.js
View file

@ -7,21 +7,22 @@ export default async function handler(req, res) {
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}`

33
pages/api/stickers.js
View file

@ -15,43 +15,52 @@ export default async function handler(req, res) {
if (req.method === 'POST') {
const data = req.body
let personRecord = (await peopleTable.read({
let personRecord = (
await peopleTable.read({
filterByFormula: `{Email} = '${data.email}'`
}))[0]
})
)[0]
if (!personRecord) {
personRecord = await peopleTable.create({
'Full Name': data.name,
'Email': data.email
Email: data.email
})
}
let address = (await addressesTable.read({
let address = (
await addressesTable.read({
filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
}))[0]
})
)[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>

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

@ -9,6 +9,7 @@ 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
@ -18,20 +19,26 @@ Please whitelist or unblock the following domains:
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.
## 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]}>

2
pages/minecraft.js
View file

@ -89,7 +89,7 @@ const Page = () => (
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>

35
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,7 +77,13 @@ 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">
<Button
variant="outline"
as="a"
target="_blank"
mt={3}
href="https://contribute.hackclub.com"
>
Our Guide to Contributing
</Button>
</Container>
@ -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"
@ -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

7
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');
`
@ -237,7 +236,11 @@ export default function Donate({ sprig }) {
href="/philanthropy"
target="_blank"
mb={4}
sx={{fontSize: '1em !important', background: 'slate', textAlign: 'center'}}
sx={{
fontSize: '1em !important',
background: 'slate',
textAlign: 'center'
}}
>
Learn more about Hack Club
</Button>

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">