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

maybe?

Browse source
This commit is contained in:
Belle 2022-12-02 19:01:33 -05:00
parent f29fbf35af
commit f144571115
15 changed files with 1036 additions and 640 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
components/cards/bank.js
View file

@ -21,18 +21,18 @@ export default function Bank({ data }) {
return (
<Box sx={{ position: 'relative' }}>
{/* <Fade spy={data} bottom delay={500} appear> */}
<Badge
variant="pill"
sx={{
position: 'absolute',
right: -3,
top: -1,
transform: 'rotate(7deg)',
zIndex: 3
}}
>
{data[0]}
</Badge>
<Badge
variant="pill"
sx={{
position: 'absolute',
right: -3,
top: -1,
transform: 'rotate(7deg)',
zIndex: 3
}}
>
{data[0]}
</Badge>
{/* </Fade> */}
<CardModel
color="white"
@ -47,39 +47,62 @@ export default function Bank({ data }) {
<Box>
<Text as="p" variant="subtitle">
A fiscal sponsor and banking platform in one to help you organize
anything!
clubs, hackathons, and more!
</Text>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons content="more 222" id="15" icon="bank-account">Run your event/organziation on Hack Club Bank</Buttons>
</Flex>
{/* <ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
run your event/organization on Hack Club Bank
</Link><Flex sx={{ flexDirection: 'column' }}>
<Buttons content="more 222" id="3">Play the game</Buttons>
<Buttons content="more info" id="4">Create art for the game</Buttons>
<Buttons content="more info" id="5">Be a scene maker</Buttons>
</Flex>
</li>
</ul> */}
<Buttons content="501(c)3 status, custom dashboard, debit cards, free domains/google workspace, and more" id="15" icon="bank-account" link="/bank">
Run your event/organziation on Hack Club Bank
</Buttons>
</Flex>
<Button variant="lg" as="a" href="/bank" mt={3}>
Start bankin!
</Button>
</Box>
</Grid>
</CardModel>
<img
src="https://cloud-1x29w2gqm-hack-club-bot.vercel.app/0vector_3.png"
width="120%"
sx={{ position: 'absolute', right: '-80px', top: 5, width: '50%' }}
/>
<Box sx={{ position: 'absolute', right: '-200px', top: 5 }}>
{' '}
<Box
sx={{
width: ['300px', '600px'],
height: ['200px','400px'],
position: 'relative',
display: 'block',
textAlign: 'center',
// zIndex: 2,
'&:before': {
content: '""',
backgroundImage:
'url("https://cloud-bubbgk6up-hack-club-bot.vercel.app/0gallery_hw__cc6xqmf7tbyq_medium_2x__1_.png")',
backgroundSize: '100%',
backgroundRepeat: 'no-repeat',
width: '100%',
height: '100%',
marginX: 'auto',
display: 'block'
}
}}
>
<Box
sx={{
backgroundImage:
'url("https://cloud-i4x0iu63l-hack-club-bot.vercel.app/0bank.gif")',
zIndex: 2,
position: 'absolute',
margin: 'auto',
top: '13px',
left: '70px',
width: '75%',
height: '80%',
backgroundSize: '100%',
backgroundRepeat: 'no-repeat'
}}
></Box>
</Box>
</Box>
</Box>
)
}

22
components/cards/button.js
View file

@ -52,7 +52,7 @@ export default function Buttons({ children, icon, id, content, link }) {
backdropFilter: 'blur(2px)'
}}
as="a"
href={link || "/"}
href={link || '/'}
target="_blank"
rel="noreferrer"
>
@ -62,11 +62,23 @@ export default function Buttons({ children, icon, id, content, link }) {
size={32}
mr={2}
/>
<Text sx={{ fontFamily: 'Phantom Sans' }}>
{children}
</Text>
<Text sx={{ fontFamily: 'Phantom Sans' }}>{children}</Text>
</Button>
<ReactTooltip id={id} delayHide={300} delayUpdate={500} clickable={true} getContent={() => { return null }}>{content}</ReactTooltip>
<ReactTooltip
id={id}
delayShow={150}
delayHide={100}
delayUpdate={500}
clickable={true}
getContent={() => {
return null
}}
className="custom-tooltip-radius custom-arrow-radius"
arrowRadius="2"
tooltipRadius="4"
>
{content}
</ReactTooltip>
</Box>
)
}

26
components/cards/clubs.js
View file

@ -29,10 +29,6 @@ export default function Clubs() {
backgroundColor: 'elevated',
background:
'linear-gradient(rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)'
// backgroundImage:
// "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('https://cloud-4re3avrpo-hack-club-bot.vercel.app/0screenshot_2022-11-30_at_10.16.45_pm.png')",
// backgroundPosition: 'center center',
// textShadow: '0 0 20px rgba(0, 0, 0, 0.35)'
}}
>
<Text
@ -61,30 +57,12 @@ export default function Clubs() {
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons content="more info" id="1">Join a Hack Club near you</Buttons>
<Buttons content="more infooo" id="2">Start a club</Buttons>
<Buttons content="scan our clubs map and reach out to team@hackclub.com to be connected" id="1" icon="rep" link="/map">Join a Hack Club near you</Buttons>
<Buttons content="we'll support you with meeting content, stickers, and more" id="2" icon="welcome" link="/clubs">Start a club</Buttons>
</Flex>
<Button variant="lg" sx={{mt: 3, backgroundColor: 'orange'}}>Learn more</Button>
</Box>
</Grid>
{/* <Buttons /> */}
{/* <a data-tip="hello" data-event="click focus" data-for="custom-event">Tooltip</a>
<ReactTooltip id="custom-event" globalEventOff="click" /> */}
{/* <p ></p> */}
{/* <button
ref={ref => (fooRef = ref)}
data-tip="tooltip"
onClick={() => {
if (toggle) {
ReactTooltip.show(fooRef)
setToggle(false)
} else {
ReactTooltip.hide(fooRef)
setToggle(true)
}
}}
></button>
<ReactTooltip /> */}
</CardModel>
)
}

42
components/cards/epoch.js
View file

@ -96,13 +96,10 @@ export default function Epoch() {
<Box
sx={theme => ({
color: '#FF4794',
// ...theme.util.gxText('#00FF15', '#00FF15'),
position: 'relative',
// width: ['16%', '15%', '15%'],
width: '120%',
height: '85%',
py: 4,
// height: ['15vh', '20vh', '35vh'],
borderRadius: '5px',
border: ['none', '1.5px solid'],
borderColor: '#FF4794',
@ -140,7 +137,7 @@ export default function Epoch() {
})
return (
<CardModel
id="epoch"
id="epoch"
color="white"
sx={{
backgroundColor: '#000'
@ -150,7 +147,7 @@ export default function Epoch() {
src="https://cloud-ox8syzbet-hack-club-bot.vercel.app/0ep0ch.svg"
sx={{ width: ['150px', '180px', '220px'] }}
/>
<Grid columns={[1, 2, 2]} mt="0">
<Grid columns={[1, 2, 2]} mt={3}>
<Box>
{timer.length ? (
<Grid
@ -172,7 +169,7 @@ export default function Epoch() {
)}
</Box>
<Box mt="-70px">
<Text as="p" variant="subtitle">
<Text as="p" variant="subtitle">
Celebrate the New Year with 42 hours of hacking in Delhi, India
</Text>
<Text
@ -186,32 +183,23 @@ export default function Epoch() {
>
Get involved
</Text>
{/* <ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://epoch.hackclub.com"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
attend the hackathon
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
help make the hackathon possible by joining #epoch-bts in slack
</Link>
</li>
</ul> */}
<Flex sx={{ flexDirection: 'column' }}>
<Buttons content="more 222" id="17">Attend the hackathon</Buttons>
<Buttons content="more info" id="18">Plan the hackathon</Buttons>
<Buttons
content="travel stipends available"
id="17"
link="https://epoch.hackclub.com"
icon="post"
>
Sign up and attend EPOCH
</Buttons>
<Buttons content="join #epoch-bts on Slack" id="18" link="/slack" icon="idea">
Plan the hackathon
</Buttons>
</Flex>
<Button
variant="lg"
as="a"
href="/bank"
href="https://epoch.hackclub.com/"
sx={{ background: '#FF4794', color: 'white', mt: 3 }}
>
Sign up for Epoch

68
components/cards/hackathons.js
View file

@ -13,6 +13,7 @@ import {
Text
} from 'theme-ui'
import Buttons from './button'
import ScrollingHackathons from '../hackathons/scrolling-hackathons'
/** @jsxImportSource theme-ui */
@ -24,45 +25,60 @@ export default function Hackathons({ data }) {
backgroundColor: 'elevated',
background:
'linear-gradient(to bottom,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.4) 25%,rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.6) 100%), url("https://hackclub.com/bank/bg.webp")',
backgroundPositon: 'center center',
backgroundSize: '100% auto',
backgroundPositon: 'center center',
backgroundSize: '100% auto'
}}
// background="https://hackclub.com/bank/bg.webp"
>
<Text variant="title">High School Hackathons</Text>
<Grid columns={[1]}>
<Grid columns={[1, 2]}>
<Box>
<Text as="p" variant="subtitle">
We maintain and support the largest network of high school
hackathons in the world. From a community of organizers to free
We support the largest network of high school
hackathons in the world. From an online community of organizers to free
stickers and more!{' '}
</Text>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons content="more 222" id="19"> Find a high school hackathon near you</Buttons>
<Buttons content="more info" id="20">Organize a hackthon in your community</Buttons>
<Buttons id="19" icon="event-code" link="https://hackathons.hackclub.com">
Find a high school hackathon near you
</Buttons>
<Buttons content="learn more about available resources" id="20" icon="bolt" link="/hackathons">
Organize a hackthon in your community
</Buttons>
</Flex>
{/* <ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
Find a high school hackathon near you
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
Organize your a hackathon in your community
</Link>
</li>
</ul> */}
<Button variant="lg" mt={3}>Learn more</Button>
<Button variant="lg" mt={3}>
Learn more
</Button>
</Box>
<Box
sx={{
transform: 'translateY(25%)'
// '&:before': {
// background: 'linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%)',
// content: '""',
// height: '231.992px',
// position: 'absolute',
// width: '150px',
// zIndex: 2,
// left: 0,
// top: 0
// }, '&:after': {
// background: 'linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)',
// content: '""',
// height: '231.992px',
// position: 'absolute',
// width: '150px',
// zIndex: 2,
// right: 0,
// top: 0,
// transform: 'rotateZ(180deg)'
// },
}}
>
<ScrollingHackathons eventData={data} mode="await" />
</Box>
</Grid>
</CardModel>

38
components/cards/sinerider.js
View file

@ -16,11 +16,12 @@ import Buttons from './button'
/** @jsxImportSource theme-ui */
export default function Sinerider() {
export default function Sinerider({stars}) {
return (
<CardModel
// github_link="https://github.com/hackclub/sprig/"
// link="https://sprig.hackclub.com"
stars={stars}
color="white"
sx={{
backgroundSize: 'cover',
@ -47,36 +48,9 @@ export default function Sinerider() {
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
{/* <Buttons content="coming sooon" id="3" icon="rainbow">Play the game</Buttons> */}
<Buttons content="join #gamedev in Slack to get started" id="4" icon="rainbow">Create art for the game</Buttons>
<Buttons content="DM @cwalker in Slack to learn more" id="5" icon="view">Be a scene maker</Buttons>
<Buttons content="join #gamedev in Slack to get started" id="4" icon="rainbow" href="/slack">Create art for the game</Buttons>
<Buttons content="DM @cwalker in Slack to learn more" id="5" icon="view" href="/slack">Be a scene maker</Buttons>
</Flex>
{/* <ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
play the game
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
create art for the game
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
be a scenemaker and put it all together
</Link>
</li>
</ul> */}
<Button
variant="lg"
sx={{
@ -84,8 +58,10 @@ export default function Sinerider() {
color: '#271932',
mt: 3
}}
as="a"
href="/slack"
>
Make a game
Join the development
</Button>
</Box>
</Grid>

71
components/cards/sprig-console.js
View file

@ -35,7 +35,7 @@ export default function SprigConsole() {
src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
sx={{ width: ['250px', '450px', '500px'] }}
/>
<Grid columns={[1, 2]}>
<Grid columns={[1, '1.2fr 1fr']}>
<Box>
<Text as="p" variant="subtitle">
A console you can assemble and disassemble. Each kit includes
@ -46,44 +46,35 @@ export default function SprigConsole() {
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons id="10">Build a game</Buttons>
<Buttons content="more info" id="11">Share it in the gallery</Buttons>
<Buttons content="more info" id="12" icon="sam">Get a console</Buttons>
</Flex>
{/* <ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
build a game
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
share it in the gallery
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
get a console
</Link>
</li>
</ul> */}
<Buttons
content="click here to get started in our editor"
id="6"
icon="emoji"
link="https://editor.sprig.hackclub.com"
>
Make a game
</Buttons>
<Buttons
content="make a PR to our website, click for more instructions"
id="11"
link="https://sprig.hackclub.com/share"
>
Share it in the gallery
</Buttons>
<Buttons
content="only teenagers (and younger) can get a console"
id="12"
icon="sam"
link="https://sprig.hackclub.com/"
>
Get a console
</Buttons>
</Flex>
<Button
variant="lg"
sx={{
backgroundColor: '#427A43',
color: '#fff',
// position: 'absolute',
// bottom: '32px',
// left: '32px',
mt: 3
}}
>
@ -94,9 +85,15 @@ export default function SprigConsole() {
</Grid>
</CardModel>
<img
src="https://cloud-fctxfuxex-hack-club-bot.vercel.app/0sprig-light__1_.png"
width="120%"
sx={{ position: 'absolute', right: '-100px', top: 5, width: '50%' }}
src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png"
sx={{
position: 'absolute',
right: '-120px',
top: 5,
width: '60%',
pointerEvents: 'none',
userSelect: 'none'
}}
/>
</Box>
)

234
components/cards/sprig.js
View file

@ -13,10 +13,155 @@ import {
Text
} from 'theme-ui'
import Buttons from './button'
import styled from '@emotion/styled'
/** @jsxImportSource theme-ui */
export default function Sprig({ stars }) {
function Game({ game, gameImage, gameImage1 }) {
return (
<Box
as="div"
sx={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
width: '14rem',
background: 'rgba(54, 66, 85, 0.75)',
borderStyle: 'solid',
borderWidth: '4px',
boxSizing: 'border-box',
borderImageRepeat: 'stretch',
borderImageSlice: '3',
borderImageWidth: '3',
borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
borderImageOutset: '2',
boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
'&:hover': {
transform: 'scale(1.05)',
background: 'rgba(77, 90, 114, 0.8)'
}
}}
>
<Box
as="a"
href={`https://editor.sprig.hackclub.com/?file=https://raw.githubusercontent.com/hackclub/sprig/main/games/${game.filename}.js`}
target="_blank"
rel="noopener noreferrer"
sx={{
borderStyle: 'solid',
borderWidth: '4px',
padding: '0.6rem 0.6rem 0 0.6rem',
borderImageRepeat: 'stretch',
borderImageSlice: '3',
borderImageWidth: '3',
borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
borderImageOutset: '2',
height: '100%',
textDecoration: 'none'
}}
>
<Box
sx={{
width: '100%',
height: '65%',
paddingBottom: 'calc(100%-8px)',
border: '4px solid rgb(118, 118, 143)',
margin: 0,
position: 'relative',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'white',
boxShadow: '0 4px 0px rgba(0, 0, 0, 0.1)',
'&:after': {
content: '""',
position: 'absolute',
top: 0,
height: '100%',
width: '8px',
backgroundImage:
'linear-gradient(rgb(167, 171, 185) 5px, rgb(167, 171, 185) 5px)',
backgroundSize: '8px 8px',
backgroundPosition: 'top center',
backgroundRepeat: 'no-repeat',
zIndex: 2,
left: 0
},
'&:before': {
content: '""',
position: 'absolute',
top: 0,
height: '100%',
width: '8px',
backgroundImage:
'linear-gradient(rgb(167, 171, 185) 5px, rgb(167, 171, 185) 5px)',
backgroundSize: '8px 8px',
backgroundPosition: 'bottom center',
backgroundRepeat: 'no-repeat',
zIndex: 2,
right: 0
}
}}
>
<img
src={gameImage || gameImage1}
alt="game preview"
sx={{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
objectFit: 'contain',
objectPosition: 'center',
imageRendering: 'pixelated',
width: '100%',
height: '100%',
margin: 0,
padding: 0,
background: 'white'
}}
/>
</Box>
<Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
<Text
as="h3"
sx={{
textTransform: 'lowercase',
textOverflow: 'ellipsis',
width: '100%',
overflow: 'hidden',
color: 'white',
whiteSpace: 'nowrap',
margin: '0.8rem 0 0.8rem 0',
fontSize: '1.4rem',
fontWeight: '400'
}}
>
{game.title}
</Text>
<Text
as="span"
sx={{
fontWeight: '300',
fontSize: '1.1rem',
color: 'rgb(151, 166, 187)',
padding: 0
}}
>
by {game.author}
</Text>
</Box>
</Box>
</Box>
)
}
export default function Sprig({
stars,
game,
gameImage,
gameImage1
}) {
return (
<CardModel
github_link="https://github.com/hackclub/sprig/"
@ -25,77 +170,68 @@ export default function Sprig({ stars }) {
stars={stars}
>
<img
src="https://cloud-8z5u8nfqb-hack-club-bot.vercel.app/0sprig.svg"
src="https://sprig.hackclub.com/spriglogotext.png"
sx={{ width: ['150px', '180px', '220px'] }}
/>
<Grid columns={[1, 2]}>
<Box>
<Text as="p" variant="subtitle">
Draw, make music, and craft games in our web-based JavaScript game editor.
Draw, make music, and craft games in our web-based JavaScript game
editor.
</Text>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 3 }}>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons content="click here to get started in our editor" id="6" icon="emoji" link="https://editor.sprig.hackclub.com">Make a game</Buttons>
<Buttons content="DM @leo in Slack to join" id="7" icon="friend" link="/slack">Help review games</Buttons>
<Buttons content="make a PR to our engine repo" id="8" link="https://github.com/hackclub/kaluma">Work on the engine</Buttons>
<Buttons content="we're all hanging out in #sprig on Slack" id="9" icon="friend" link="/slack">Answer questions in slack</Buttons>
<Buttons
content="click here to get started in our editor"
id="6"
icon="emoji"
link="https://editor.sprig.hackclub.com"
>
Make a game
</Buttons>
<Buttons
content="DM @leo in Slack to join"
id="7"
icon="friend"
link="/slack"
>
Help review games
</Buttons>
<Buttons
content="make a PR to our engine repo"
id="8"
link="https://github.com/hackclub/kaluma"
>
Work on the engine
</Buttons>
<Buttons
content="we're all hanging out in #sprig on Slack"
id="9"
icon="friend"
link="/slack"
>
Answer questions in slack
</Buttons>
</Flex>
{/* <ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
make a game
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
help review games
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
work on the engine
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
answer questions in Slack
</Link>
</li>
</ul> */}
<Button
variant="lg"
sx={{
backgroundColor: '#FFDE4D',
color: '#000',
mt: 3
// position: 'absolute',
// bottom: '32px',
// left: '32px'
}}
>
Make a game
</Button>
</Box>
<Box>
<Text as="p">New from the gallery...</Text>
<img
src="https://cloud-a7l67iqdj-hack-club-bot.vercel.app/0screenshot_2022-11-23_at_1.31_2.png"
width="80%"
/>
<Text as="p" sx={{fontStyle: 'italic'}}>New from <Link href="https://sprig.hackclub.com/gallery" sx={{textDecoration: 'none', color: 'inherit'}}>the gallery</Link>...</Text>
<Flex sx={{height: '80%', gap: '20px', mt: 3}}>
<Game game={game[0]} gameImage={gameImage} />
<Game game={game[1]} gameImage1={gameImage1} />
</Flex>
</Box>
</Grid>
</CardModel>

39
components/cards/workshops.js
View file

@ -46,7 +46,7 @@ export default function Workshops({ data }) {
background:
'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)'
}}
// github_link="https://github.com/hackclub/workshops"
github_link="https://github.com/hackclub/workshops"
>
<Text variant="title">Workshops</Text>
<Grid columns={[1]}>
@ -59,31 +59,22 @@ export default function Workshops({ data }) {
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons content="more 222" id="13">
<Buttons
content="click to learn more about how to submit a workshop"
id="13"
link="https://workshops.hackclub.com/submit-a-workshop/"
icon="event-add"
>
Write and submit a workshop
</Buttons>
<Buttons content="more info" id="14">
<Buttons
id="14"
link="https://workshops.hackclub.com"
icon="code"
>
Follow a workshop and build a project
</Buttons>
</Flex>
{/* <ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
Write and submit a workshop
</Link>
</li>
<li>
<Link
href="/slack"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
Build a project with a workshop
</Link>
</li>
</ul> */}
<Button
variant="lg"
sx={{
@ -91,11 +82,13 @@ export default function Workshops({ data }) {
color: 'blue',
mt: 3
}}
as="a"
href="https://workshops.hackclub.com"
>
Find workshops
</Button>
</Box>
<Fade spy={workshop} bottom>
{/* <Fade spy={workshop} bottom>
<Text
// onClick={New}
sx={{
@ -106,7 +99,7 @@ export default function Workshops({ data }) {
>
Click for random workshop: {workshop} 👀
</Text>
</Fade>
</Fade> */}
</Grid>
</CardModel>
)

76
components/hackathons/scrolling-hackathons.js
View file

@ -9,41 +9,63 @@ import {
Image,
Link
} from 'theme-ui'
import { useState } from 'react'
import { keyframes } from '@emotion/react'
import Tilt from '../tilt'
import NextLink from 'next/link'
import PageVisibility from 'react-page-visibility'
import { formatAddress } from '../../lib/helpers'
export default function ScrollingHackathons({ eventData }) {
export default function ScrollingHackathons({
eventData,
mode,
title,
...props
}) {
const [pageIsVisible, setPageIsVisible] = useState(true)
const handleVisibilityChange = isVisible => {
setPageIsVisible(isVisible)
}
return (
<>
<Container sx={{ mb: 5 }}>
<Heading
sx={{
fontSize: [36, 48],
color: 'black'
}}
>
Upcoming high school hackathons...
</Heading>
<Dot />
<Text variant="lead" sx={{ mb: 4, color: 'muted', mr: 2 }}>
from{' '}
<NextLink href="https://hackathons.hackclub.com" passHref>
<Link sx={{ color: 'currentcolor' }}>hackathons.hackclub.com</Link>
</NextLink>
, last updated just now.
</Text>
</Container>
<Ticker mode="string">
{() => (
<Box as="div" sx={{ display: 'flex', py: 3 }}>
{eventData.map(({ ...props }) => (
<EventCard key={eventData.id} {...props} />
))}
</Box>
{title ? (
<Container sx={{ mb: 5 }}>
<Heading
sx={{
fontSize: [36, 48],
color: 'black'
}}
>
Upcoming high school hackathons...
</Heading>
<Dot />
<Text variant="lead" sx={{ mb: 4, color: 'muted', mr: 2 }}>
from{' '}
<NextLink href="https://hackathons.hackclub.com" passHref>
<Link sx={{ color: 'currentcolor' }}>
hackathons.hackclub.com
</Link>
</NextLink>
, last updated just now.
</Text>
</Container>
) : (
<></>
)}
<PageVisibility onChange={handleVisibilityChange}>
{pageIsVisible && (
<Ticker mode={mode || 'string'} {...props}>
{() => (
<Box as="div" sx={{ display: 'flex', py: 3 }}>
{eventData.map(({ ...props }) => (
<EventCard key={eventData.id} {...props} />
))}
</Box>
)}
</Ticker>
)}
</Ticker>
</PageVisibility>
</>
)
}

3
package.json
View file

@ -11,6 +11,7 @@
"lint": "next lint"
},
"dependencies": {
"@apollo/client": "^3.7.1",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@github/time-elements": "^4.0.0",
@ -32,6 +33,7 @@
"devtools-detect": "^4.0.0",
"form-data": "^4.0.0",
"globby": "^11.0.4",
"graphql": "^16.6.0",
"jquery": "^3.6.1",
"lodash": "^4.17.21",
"next": "^12.3.1",
@ -43,6 +45,7 @@
"react-marquee-slider": "^1.1.5",
"react-masonry-css": "^1.0.16",
"react-page-visibility": "^7.0.0",
"react-relative-time": "^0.0.7",
"react-reveal": "^1.2.2",
"react-scrolllock": "^5.0.1",
"react-ticker": "^1.3.2",

41
pages/api/stars.js Normal file
View file

@ -0,0 +1,41 @@
import { graphql } from '@octokit/graphql'
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
})
export default async function handler(req, res) {
const { organization } = await graphql(
!req.query.admin
? `
query {
organization(login: "hackclub") {
sinerider: repository(name: "sinerider") {
stargazerCount
},
sprig: repository(name: "sprig") {
stargazerCount
}
}
}`
: `query {
organization(login: "hackclub") {
sinerider: repository(name: "sinerider") {
stargazerCount
},
sprig: repository(name: "sprig") {
stargazerCount
}
}
}`,
{
request: {
hook: auth.hook
}
}
)
res.status(200).json(organization)
}

2
pages/hackathons/index.js
View file

@ -28,7 +28,7 @@ export default function Hackathons({ data }) {
<Box as="main">
<Landing />
<Overview />
<ScrollingHackathons eventData={data} />
<ScrollingHackathons eventData={data} title={true} />
<KeepExploring />
<Money />
<Slack />

817
pages/index.js
View file

@ -37,6 +37,15 @@ import Flip from 'react-reveal/Flip'
import Fade from 'react-reveal/Fade'
import Inspect from '../components/inspect'
import AssembleImgFile from '../public/home/assemble.jpg'
import RelativeTime from 'react-relative-time'
import { get } from 'lodash'
import {
ApolloClient,
InMemoryCache,
gql,
createHttpLink
} from '@apollo/client'
import { setContext } from '@apollo/client/link/context'
let Highlight = styled(Text)`
color: inherit;
@ -58,7 +67,6 @@ const rollout = keyframes`
transform: translateY(0);
}
`
// function SlackNum({slackData}) {
// let [key, setKey] = useState()
// useEffect(() => {
@ -75,14 +83,23 @@ const rollout = keyframes`
// <></>
// )
// }
// let workshopImage = ['/', '/']
function Page({
hackathonsData,
bankData,
slackData,
stars
stars,
githubData2,
dataPieces,
game,
gameTitle
// workshopImage
// workshops
}) {
let [gameImage, setGameImage] = useState('')
let [gameImage1, setGameImage1] = useState('')
let [key, setKey] = useState(0)
let [key1, setKey1] = useState(0)
@ -109,6 +126,58 @@ function Page({
setKey1(Math.random())
}, slackData)
useEffect(() => {
if (typeof window !== 'undefined') {
let imgURL = undefined
const decode = ({ data, width }) => {
const decodedString = atob(data)
const l = decodedString.length
const buf = new Uint8ClampedArray(l)
for (let i = 0; i < l; i++) {
const char = decodedString[i]
const byte = char.charCodeAt(0)
buf[i] = byte
}
return new ImageData(buf, width)
}
async function load(title) {
if (imgURL) return
try {
const res = await fetch(
`https://editor.sprig.hackclub.com/api/thumbnail/${title}`
)
// console.log(title)
const json = await res.json()
if (json.image.kind === 'png') {
return `data:image/png;base64,${json.image.data}`
} else {
// Raw, hopefully
const imageData = decode(json.image)
const c = document.createElement('canvas')
c.width = imageData.width
c.height = imageData.height
c.getContext('2d').putImageData(imageData, 0, 0)
c.style['image-rendering'] = 'pixelated'
return c.toDataURL()
}
} catch (err) {
console.error(err)
}
}
async function getImage() {
const thing0 = await load(gameTitle[0])
const thing1 = await load(gameTitle[1])
setGameImage(thing0)
setGameImage1(thing1)
}
getImage()
}
})
const Node = ({ text, time, ...props }) => (
<Flip
bottom
@ -135,12 +204,15 @@ function Page({
fontWeight: '400 !important'
}}
>
{text}
{/* <relative-time datetime={time}>Nov 30, 2022</relative-time> */}
{text}{' '}
<span>
<RelativeTime value={time} titleformat="iso8601" />
</span>
</Link>
</Badge>
</Flip>
)
return (
<>
<Meta
@ -159,365 +231,356 @@ function Page({
<ForceTheme theme="light" />
<Nav />
<Box
as="header"
as="main"
sx={{
bg: 'dark',
pt: [5, 6],
pb: [2, 3],
textAlign: 'left',
position: 'relative',
overflowX: 'hidden'
}}
>
<BGImg
src={AssembleImgFile}
alt="Hack Clubbers assemble at Figma HQ for the first IRL hackathon in SF since 2020: Assemble. 📸 Photo by Kunal Botla, Hack Clubber in MA!"
priority
gradient="linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7))"
/>
{/* <SlideDown duration={768}> */}
<Box
as="header"
sx={{
maxWidth: [null, 'layoutPlus'],
bg: 'dark',
pt: [5, 6],
pb: [2, 3],
textAlign: 'left',
position: 'relative',
mx: 'auto'
overflowX: 'hidden'
}}
>
<Node
// text={dataPieces[0]}
// time={githubData2[0]}
text="✅ New commit in hackclub/hackclub by @bellesea"
sx={{
position: 'absolute',
top: 0,
right: 2,
zIndex: 4,
transform: 'rotate(3deg)'
}}
<BGImg
src={AssembleImgFile}
alt="Hack Clubbers assemble at Figma HQ for the first IRL hackathon in SF since 2020: Assemble. 📸 Photo by Kunal Botla, Hack Clubber in MA!"
priority
gradient="linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7))"
/>
<Fade>
<Text variant="eyebrow" sx={{ color: 'sunken' }}>
Welcome to Hack Club
</Text>
</Fade>
<Fade bottom delay={200}>
<Heading
as="h1"
variant="ultratitle"
{/* <SlideDown duration={768}> */}
<Box
sx={{
maxWidth: [null, 'layoutPlus'],
position: 'relative',
mx: 'auto'
}}
>
<Node
// text={dataPieces[0]}
// time={githubData2[0]}
text="✅ New commit in hackclub/hackclub by @bellesea"
sx={{
color: 'white',
my: [3, 4],
mx: 'auto',
zIndex: 1,
textAlign: 'left'
position: 'absolute',
top: 0,
right: 2,
zIndex: 4,
transform: 'rotate(3deg)'
}}
>
<Text
as="span"
sx={{
lineHeight: 1,
display: 'block',
pb: 3
}}
>
We inspire the hacker ethic in
<Text sx={{ color: 'transparent', mr: 2 }}>
<Text
sx={{
lineHeight: 0.875,
px: 2,
backgroundColor: 'red',
position: 'absolute',
borderRadius: 10,
transform: 'rotate(-3deg)',
color: 'white',
whiteSpace: 'nowrap',
'&:hover': { cursor: 'pointer' }
}}
>
teen makers
</Text>
teen makers{' '}
</Text>
around the {''}world by building things we {''}care about
together.
/>
<Fade>
<Text variant="eyebrow" sx={{ color: 'sunken' }}>
Welcome to Hack Club
</Text>
</Heading>
</Fade>
</Box>
{/* </SlideDown> */}
<Carousel />
</Box>
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
<Container sx={{ position: 'relative' }} pb={4}>
<Text variant="eyebrow" as="p">
A Hack Clubber is someone that
</Text>
<Text variant="title">
Makes interesting things in the real world
</Text>
<Grid columns={[1, 2]}>
<Box
pt={4}
pb={5}
sx={{
position: 'relative',
margin: 'auto'
}}
>
<Text variant="subtitle" as="p">
Here, teenagers don't wait for permission to code. Hack Clubbers
come together to code because it's fun. Whether you’re a
beginner programmer or have years of experience, there’s a place
for you at Hack Club. Coding doesn't have to be a solidary
activity. In the Hack Club Slack (Discord-style online
groupchat), you'll find a group of{' '}
{withCommas(
slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
.total_members_count
)}{' '}
fabulous people to talk to, active at all hours.
</Text>
{/* <Text variant="headline" sx={{ textAlign: 'center' }}>
Code alongside{' '}
<Text
key={key}
</Fade>
<Fade bottom delay={200}>
<Heading
as="h1"
variant="ultratitle"
sx={{
width: 'fit-content',
display: 'inline',
animation: `${rollout} 4s linear 2s`
}}
>
{withCommas(
slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
.total_members_count
)}
</Text>{' '}
other teenagers like you and make friends in the largest online
community of technical teenagers.
</Text> */}
<Link href="/slack" passHref sx={{ textDecoration: 'none' }}>
<Button
as="a"
variant="ctaLg"
sx={{
background:
'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
}}
my={3}
>
Join us →
</Button>
</Link>
</Box>
<Box
sx={{
position: 'relative',
width: '100%',
pb: '56.25%',
margin: 'auto',
borderRadius: '10px',
overflow: 'none'
}}
>
<Box
as="iframe"
muted
duration={2000}
sx={{
position: 'absolute',
// bottom: 0,
top: 0,
left: 0,
// right: 0,
// height: '100%',
color: 'white',
my: [3, 4],
mx: 'auto',
zIndex: 1,
width: '100%',
height: '100%'
// objectFit: 'cover'
textAlign: 'left'
}}
src="https://www.youtube.com/embed/-sxRdKtKNa0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></Box>
</Box>
</Grid>
<Inspect />
</Container>
<Box
sx={{
background: 'snow',
py: 4,
backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%'
}}
>
<Container>
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Text variant="title">Build open source tools</Text>
<Text variant="subtitle" as="p">
Led by engineers on the Hack Club team in collaboration with Hack
Clubbers in the community, these learning tools are built with and
for teenagers. Get involved with these projects by building
something with our tools or building out the tools itself.
</Text>
<Sprig delay={100} stars={stars} />
<Sinerider delay={200} />
<SprigConsole delay={300} />
<Workshops delay={400} />
</Container>
>
<Text
as="span"
sx={{
lineHeight: 1,
display: 'block',
pb: 3
}}
>
We inspire the hacker ethic in
<Text sx={{ color: 'transparent', mx: 2 }}>
<Text
sx={{
lineHeight: 0.875,
px: 2,
backgroundColor: 'red',
position: 'absolute',
borderRadius: 10,
transform: 'rotate(-3deg)',
color: 'white',
whiteSpace: 'nowrap'
}}
>
teen makers
</Text>
teen makers{' '}
</Text>
around the {''}world by building things we {''}care about
together.
</Text>
</Heading>
</Fade>
</Box>
{/* </SlideDown> */}
<Carousel />
</Box>
<Box>
<Container py={4}>
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
<Container
sx={{
position: 'relative'
}}
pb={4}
>
<Text variant="eyebrow" as="p">
Hack Clubbers
A Hack Clubber is someone that
</Text>
<Text variant="title">
Gather IRL to discover the{' '}
Discovers technology by building things for the joy of it
</Text>
<Grid columns={[1, 2]}>
<Box
pt={4}
pb={5}
sx={{
position: 'relative',
margin: 'auto'
}}
>
<Text variant="subtitle" as="p">
Here, teenagers don't wait for permission to code. Hack
Clubbers come together to code because it's fun. Whether
you’re a beginner programmer or have years of experience,
there’s a place for you at Hack Club. Coding doesn't have to
be a solidary activity. In the Hack Club Slack (Discord-style
online groupchat), you'll find a group of{' '}
{withCommas(
slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
.total_members_count
)}{' '}
fabulous people to talk to, active at all hours.
</Text>
<Link href="/slack" passHref sx={{ textDecoration: 'none' }}>
<Button
as="a"
variant="ctaLg"
sx={{
background:
'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
}}
my={3}
>
Join us →
</Button>
</Link>
</Box>
<Box
sx={{
position: 'relative',
width: '100%',
pb: '56.25%',
margin: 'auto',
borderRadius: '10px',
overflow: 'none'
}}
>
<Box
as="iframe"
muted
duration={2000}
sx={{
position: 'absolute',
// bottom: 0,
top: 0,
left: 0,
// right: 0,
// height: '100%',
zIndex: 1,
width: '100%',
height: '100%'
// objectFit: 'cover'
}}
src="https://www.youtube.com/embed/-sxRdKtKNa0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></Box>
</Box>
</Grid>
<Inspect />
</Container>
<Box
py={4}
sx={{
background: 'snow',
backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%'
}}
>
<Container>
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Text variant="title">Build open source tools</Text>
<Text variant="subtitle" as="p">
Led by engineers on the Hack Club team in collaboration with
Hack Clubbers in the community, these learning tools are built
with and for teenagers. Get involved with these projects by
building something with our tools or building out the tools
itself.
</Text>
<Sprig
delay={100}
stars={stars.sprig.stargazerCount}
game={game}
gameImage={gameImage}
gameImage1={gameImage1}
/>
<Sinerider delay={200} stars={stars.sprig.stargazerCount} />
<SprigConsole delay={300} />
<Workshops delay={400} />
</Container>
</Box>
<Box>
<Container py={3}>
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Text variant="title">
Gather IRL to discover the{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: '#5d114c',
bg: 'rgb(255, 212, 64)'
}}
>
joy of code
</Text>
</Text>
<Text variant="subtitle" as="p">
Meet other Hack Clubbers in your community to code and make
things, be it once a week after school, a one-time 48 hour
event, or anything in-between!
</Text>
<Bank data={bankData} delay={100} />
<Clubs delay={200} />
<Epoch delay={300} />
<Hackathons delay={400} data={hackathonsData} />
</Container>
</Box>
</Box>
<Box bg="snow" color="black" py={[3, 4]}>
<Container
sx={{
textAlign: 'left'
}}
>
<Text as="p" variant="eyebrow">
Let's quickly review
</Text>
<Heading as="h2" variant="title">
Find your second-home in{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: '#5d114c',
bg: 'rgb(255, 212, 64)'
ml: [-2, 0],
whiteSpace: ['wrap', 'nowrap'],
color: 'white',
bg: 'red'
}}
>
joy of code
Hack Club
</Text>
</Text>
<Text variant="subtitle" as="p">
Join or start a Hack Club and be part of a network of high quality
coding clubs where you learn to code entirely through building
things. You can start with no experience and build and ship a
project every meeting.
</Text>
<Clubs delay={100} />
<Bank data={bankData} delay={100} />
<Epoch delay={200} />
<Hackathons delay={300} />
.
</Heading>
<Grid
pt={[3, 4]}
pb={[4, 5]}
gap={[4, 3, 4]}
columns={[null, 3]}
sx={{
textAlign: 'left',
'> a, > div': {
borderRadius: 'extra',
boxShadow: 'elevated',
p: [3, null, 4]
},
span: {
boxShadow:
'-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
},
svg: { fill: 'currentColor' }
}}
>
<Card
as="a"
href="/slack"
variant="interactive"
sx={{
background:
'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
color: 'white',
svg: { color: 'rgb(51, 142, 218)' }
}}
>
<Stage
icon="slack"
color="white"
name="Join our online community"
desc="Connect with other technical teenagers on Slack and hack on things together."
/>
</Card>
<Card
sx={{
background:
'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
color: 'white',
svg: { color: 'rgb(236, 55, 80)' },
textDecoration: 'none'
}}
as="a"
href="/clubs"
variant="interactive"
>
<Stage
icon="clubs"
color="white"
name="Start a Club or Attend a Hackathon"
desc="Build an in-person community of high school hackers, and we're here to help."
/>
</Card>
<Card
sx={{
background:
'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
color: 'white',
svg: { color: '#fb558e' },
textDecoration: 'none'
}}
as="a"
href="https://github.com/hackclub"
variant="interactive"
>
<Stage
icon="github"
color="white"
name="Explore our open-sourced tools"
desc="We're currently building a game engine, daily streak system, graphing game, and more!"
/>
</Card>
</Grid>
</Container>
</Box>
{/* <Container py={4}>
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Text variant="title">Run high quality high school hackathons</Text>
<Text variant="subtitle" as="p">
It's not an extracurricular or a club. It's not a class or a
lecture. Hackathons are a place to build things for fun and meet
others doing the same.
</Text>
</Container> */}
{/* <ScrollingHackathons eventData={hackathonsData} /> */}
</Box>
<Box bg="snow" color="black" py={[5, 6]}>
<Container sx={{ textAlign: ['left', 'center'] }}>
<Text as="p" variant="eyebrow">
Let's quickly review
</Text>
<Heading as="h2" variant="title">
Find your second-home in{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
ml: [-2, 0],
whiteSpace: ['wrap', 'nowrap'],
color: 'white',
bg: 'red'
}}
>
Hack Club
</Text>
.
</Heading>
<Grid
pt={[3, 4]}
pb={[4, 5]}
gap={[4, 3, 4]}
columns={[null, 3]}
sx={{
textAlign: 'left',
'> a, > div': {
borderRadius: 'extra',
boxShadow: 'elevated',
px: [3, null, 4],
py: [4, null, 5]
},
span: {
boxShadow:
'-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
},
svg: { fill: 'currentColor' }
}}
>
<Card
as="a"
href="/slack"
variant="interactive"
sx={{
background:
'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
color: 'white',
svg: { color: 'rgb(51, 142, 218)' }
}}
>
<Stage
icon="slack"
color="white"
name="Join the Slack"
desc="Connect with other technical teenagers and hack on things together."
/>
</Card>
<Card
sx={{
background:
'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
color: 'white',
svg: { color: 'rgb(236, 55, 80)' },
textDecoration: 'none'
}}
as="a"
href="/clubs"
variant="interactive"
>
<Stage
icon="clubs"
color="white"
name="Start a Club or Attend a Hackathon"
desc="Build an in-person community of high school hackers, and we're here to help."
/>
</Card>
<Card
sx={{
background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
color: 'white',
svg: { color: '#fb558e' },
textDecoration: 'none'
}}
as="a"
href="https://github.com/hackclub"
variant="interactive"
>
<Stage
icon="event-code"
color="white"
name="Explore our open-sourced tools"
desc="We're currently building a game engine, daily streak system, graphing game, and more!"
/>
</Card>
</Grid>
</Container>
</Box>
<Footer
dark
@ -554,9 +617,10 @@ function Page({
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
export async function getStaticProps() {
let dataPieces = []
let dataPieces = ['hehe']
let githubData2 = ['hehe']
let bankData = []
let stars = []
// let stars = []
let initialBankData = await fetch('https://bank.hackclub.com/stats').then(r =>
r.json()
)
@ -576,9 +640,9 @@ export async function getStaticProps() {
// 'https://api.github.com/orgs/hackclub/events'
// ).then(r => r.json())
console.log(initialBankData)
// console.log(initialBankData)
// if(initialGitHubData != null) {
// // if(initialGitHubData != null) {
// let initialGitHubData1 = initialGitHubData.map(x =>
// (x.type == 'PushEvent' && x.actor.login != 'github-actions[bot]') ||
// x.type == 'WatchEvent' ||
@ -592,6 +656,7 @@ export async function getStaticProps() {
// : `🎉 New activity in ${x.repo.name}`
// : null
// )
// // }
// let initialGithubData2 = initialGitHubData.map(x =>
// (x.type == 'PushEvent' && x.actor.login != 'github-actions[bot]') ||
@ -623,10 +688,10 @@ export async function getStaticProps() {
// let sar = await fetch(
// 'https://api.github.com/repos/hackclub/some-assembly-required'
// ).then(r => r.json())
// stars.push({'sar': sar.stargazers_count})
console.log(stars)
// console.log(stars)
const formData = new FormData()
@ -649,25 +714,67 @@ export async function getStaticProps() {
let games = []
let tags = []
// games = await fetch('https://editor.sprig.hackclub.com/metadata.json').then(
// res => res.json()
// )
// ;[...games]
// .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
// .slice(games.length - 2, games.length)
// .forEach(game => (game.isNew = true))
// tags = [...new Set(games.reduce((p, c) => [...p, ...c.tags], []))]
games = await fetch('https://editor.sprig.hackclub.com/metadata.json').then(
res => res.json()
)
let game = games
.sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
.slice(0, 2)
// console.log(games)
let gameTitle = []
// const workshops = await fetch('https://api.github.com/repos/hackclub/hackclub/contents/workshops?recursive=1')
// .then((res) => res.json())
// .catch((error) => {
// console.log(error);
// return [];
// });
gameTitle = game.map(r => r.title)
let stars = await fetch('https://hackclub.com/api/stars').then(
res => res.json
)
// const httpLink = createHttpLink({
// uri: 'https://api.github.com/graphql',
// });
// const authLink = setContext(() => {
// return {
// headers: {
// authorization: `Bearer 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`
// }
// }
// })
// const client = new ApolloClient({
// link: authLink.concat(httpLink),
// cache: new InMemoryCache()
// });
// const { githubStars } = await client.query({
// query: gql`
// query {
// organization(login: "hackclub") {
// sinerider: repository(name: "sinerider") {
// stargazerCount
// },
// sprig: repository(name: "sprig") {
// stargazerCount
// }
// }
// }
// `
// })
console.log('g', githubStars)
return {
props: { hackathonsData, bankData, slackData, stars },
props: {
dataPieces,
game,
gameTitle,
// githubStars,
// workshopImage,
githubData2,
hackathonsData,
bankData,
slackData,
stars: stars.data.organization
},
revalidate: 30
}
}

106
yarn.lock
View file

@ -2,6 +2,25 @@
# yarn lockfile v1
"@apollo/client@^3.7.1":
version "3.7.1"
resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.7.1.tgz#86ce47c18a0714e229231148b0306562550c2248"
integrity sha512-xu5M/l7p9gT9Fx7nF3AQivp0XukjB7TM7tOd5wifIpI8RskYveL4I+rpTijzWrnqCPZabkbzJKH7WEAKdctt9w==
dependencies:
"@graphql-typed-document-node/core" "^3.1.1"
"@wry/context" "^0.7.0"
"@wry/equality" "^0.5.0"
"@wry/trie" "^0.3.0"
graphql-tag "^2.12.6"
hoist-non-react-statics "^3.3.2"
optimism "^0.16.1"
prop-types "^15.7.2"
response-iterator "^0.2.6"
symbol-observable "^4.0.0"
ts-invariant "^0.10.3"
tslib "^2.3.0"
zen-observable-ts "^1.2.5"
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
version "7.16.7"
resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz"
@ -491,6 +510,11 @@
resolved "https://registry.yarnpkg.com/@github/time-elements/-/time-elements-4.0.0.tgz#ca6aec5e9fbc18348d3fc980610b79c244b1b81f"
integrity sha512-oTPpERR/FylYCyUdVjufmF5MmlrIZ7gYzN59xe5mF3aQA+zn5IWiNj+5/D/6NgQWFNXoRB84DILnP/YlkETKhg==
"@graphql-typed-document-node/core@^3.1.1":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==
"@hackclub/icons@^0.0.12":
version "0.0.12"
resolved "https://registry.npmjs.org/@hackclub/icons/-/icons-0.0.12.tgz"
@ -1198,6 +1222,27 @@
"@typescript-eslint/types" "5.42.1"
eslint-visitor-keys "^3.3.0"
"@wry/context@^0.7.0":
version "0.7.0"
resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.0.tgz#be88e22c0ddf62aeb0ae9f95c3d90932c619a5c8"
integrity sha512-LcDAiYWRtwAoSOArfk7cuYvFXytxfVrdX7yxoUmK7pPITLk5jYh2F8knCwS7LjgYL8u1eidPlKKV6Ikqq0ODqQ==
dependencies:
tslib "^2.3.0"
"@wry/equality@^0.5.0":
version "0.5.3"
resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.3.tgz#fafebc69561aa2d40340da89fa7dc4b1f6fb7831"
integrity sha512-avR+UXdSrsF2v8vIqIgmeTY0UR91UT+IyablCyKe/uk22uOJ8fusKZnH9JH9e1/EtLeNJBtagNmL3eJdnOV53g==
dependencies:
tslib "^2.3.0"
"@wry/trie@^0.3.0":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.2.tgz#a06f235dc184bd26396ba456711f69f8c35097e6"
integrity sha512-yRTyhWSls2OY/pYLfwff867r8ekooZ4UI+/gxot5Wj8EFwSf2rG+n+Mo/6LoLQm1TKA4GRj2+LCpbfS937dClQ==
dependencies:
tslib "^2.3.0"
acorn-jsx@^5.3.2:
version "5.3.2"
resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@ -2557,6 +2602,18 @@ grapheme-splitter@^1.0.4:
resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
graphql-tag@^2.12.6:
version "2.12.6"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
dependencies:
tslib "^2.1.0"
graphql@^16.6.0:
version "16.6.0"
resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.6.0.tgz#c2dcffa4649db149f6282af726c8c83f1c7c5fdb"
integrity sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==
har-schema@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz"
@ -2689,7 +2746,7 @@ hastscript@^6.0.0:
property-information "^5.0.0"
space-separated-tokens "^1.0.0"
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1:
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@ -3528,6 +3585,14 @@ open@^8.4.0:
is-docker "^2.1.1"
is-wsl "^2.2.0"
optimism@^0.16.1:
version "0.16.2"
resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.2.tgz#519b0c78b3b30954baed0defe5143de7776bf081"
integrity sha512-zWNbgWj+3vLEjZNIh/okkY2EUfX+vB9TJopzIZwT1xxaMqC5hRLLraePod4c5n4He08xuXNH+zhKFFCu390wiQ==
dependencies:
"@wry/context" "^0.7.0"
"@wry/trie" "^0.3.0"
optionator@^0.9.1:
version "0.9.1"
resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
@ -3802,6 +3867,11 @@ react-page-visibility@^7.0.0:
dependencies:
prop-types "^15.7.2"
react-relative-time@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/react-relative-time/-/react-relative-time-0.0.7.tgz#9f7f4074286ebe6135b533eee1adea055df97183"
integrity sha512-1MufiuswxbmgPR0fdfKLkQpjlphkMTjC99IOOuCENRiF+7EmtlcNFi+kCNtmeCDk3gtizG3OiuYBevN0vljNYQ==
react-resize-detector@^7.1.2:
version "7.1.2"
resolved "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz"
@ -4058,6 +4128,11 @@ resolve@^2.0.0-next.3:
is-core-module "^2.2.0"
path-parse "^1.0.6"
response-iterator@^0.2.6:
version "0.2.6"
resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.6.tgz#249005fb14d2e4eeb478a3f735a28fd8b4c9f3da"
integrity sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==
reusify@^1.0.4:
version "1.0.4"
resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
@ -4353,6 +4428,11 @@ swr@^1.3.0:
resolved "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz"
integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
symbol-observable@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
synckit@^0.8.4:
version "0.8.4"
resolved "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz"
@ -4436,6 +4516,13 @@ trough@^1.0.0:
resolved "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz"
integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
ts-invariant@^0.10.3:
version "0.10.3"
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
dependencies:
tslib "^2.1.0"
tsconfig-paths@^3.14.1:
version "3.14.1"
resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
@ -4451,6 +4538,11 @@ tslib@^1.8.1:
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.1.0, tslib@^2.3.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
tslib@^2.4.0:
version "2.4.0"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
@ -4755,6 +4847,18 @@ yocto-queue@^0.1.0:
resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
zen-observable-ts@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"
integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==
dependencies:
zen-observable "0.8.15"
zen-observable@0.8.15:
version "0.8.15"
resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
zwitch@^1.0.0:
version "1.0.5"
resolved "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz"