mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
wahoo
This commit is contained in:
Belle
parent
36bc146094
commit
55719ee57e
11 changed files with 226 additions and 314 deletions
|
|
@ -56,7 +56,7 @@ export default function Bank({ data }) {
|
|||
backgroundColor: 'dark',
|
||||
minHeight: ['300px', '400px','300px'],
|
||||
backgroundColor: 'darkless',
|
||||
backgroundImage: `url('https://icons.hackclub.com/api/icons/0x291829/glyph:bank-account.svg')`,
|
||||
backgroundImage: `url('https://icons.hackclub.com/api/icons/0x29282C/glyph:bank-account.svg')`,
|
||||
backgroundSize: '40px 40px',
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundPosition: '10% 10%',
|
||||
|
|
@ -99,7 +99,7 @@ export default function Bank({ data }) {
|
|||
<Box
|
||||
sx={{
|
||||
backgroundImage:
|
||||
'url("https://cloud-f1orvtxst-hack-club-bot.vercel.app/0bank_vid.gif")',
|
||||
'url("https://cloud-my3o4j7oe-hack-club-bot.vercel.app/0laptop-dark__2__1.png")',
|
||||
zIndex: 2,
|
||||
position: 'absolute',
|
||||
margin: 'auto',
|
||||
|
|
@ -118,6 +118,7 @@ export default function Bank({ data }) {
|
|||
icon="bank-account"
|
||||
link="/bank"
|
||||
primary="red"
|
||||
sx={{mt: [3, 3, 4]}}
|
||||
>
|
||||
Start banking!
|
||||
</Buttons>
|
||||
|
|
@ -156,7 +157,7 @@ export default function Bank({ data }) {
|
|||
<Box
|
||||
sx={{
|
||||
backgroundImage:
|
||||
'url("https://cloud-f1orvtxst-hack-club-bot.vercel.app/0bank_vid.gif")',
|
||||
'url("https://cloud-my3o4j7oe-hack-club-bot.vercel.app/0laptop-dark__2__1.png")',
|
||||
zIndex: 2,
|
||||
position: 'absolute',
|
||||
margin: 'auto',
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export default function Clubs() {
|
|||
You can start with no experience and build and ship a project every
|
||||
meeting.
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
|
||||
<Buttons
|
||||
content="we'll support you with meeting content, stickers, and more"
|
||||
id="2"
|
||||
|
|
|
|||
|
|
@ -91,18 +91,16 @@ export default function Epoch() {
|
|||
sx={theme => ({
|
||||
color: '#FF4794',
|
||||
position: 'relative',
|
||||
width: [null, '85%', '115%'],
|
||||
height: [null, '100%', '85%'],
|
||||
py: [null, 2, 4],
|
||||
borderRadius: '5px',
|
||||
border: ['none', '1.5px solid'],
|
||||
width: [null, '85%', '80%'],
|
||||
height: [null, '50%', '85%'],
|
||||
border: 'none',
|
||||
borderColor: '#FF4794',
|
||||
fontSize: [4, 5],
|
||||
fontWeight: 'bold',
|
||||
fontSize: [3, 4],
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center'
|
||||
textAlign: 'center',
|
||||
opacity: 0.7
|
||||
})}
|
||||
>
|
||||
<Box>
|
||||
|
|
@ -117,8 +115,7 @@ export default function Epoch() {
|
|||
sx={{
|
||||
color: 'white',
|
||||
position: 'relative',
|
||||
fontSize: [1, 3, 4],
|
||||
fontWeight: 'bold',
|
||||
fontSize: [1, '16px', '20px'],
|
||||
display: 'block',
|
||||
pb: '15px'
|
||||
}}
|
||||
|
|
@ -130,25 +127,40 @@ export default function Epoch() {
|
|||
)
|
||||
})
|
||||
return (
|
||||
<CardModel
|
||||
<CardModel
|
||||
id="epoch"
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundColor: '#000'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="https://cloud-ox8syzbet-hack-club-bot.vercel.app/0ep0ch.svg"
|
||||
sx={{ width: ['150px', '180px', '220px'] }}
|
||||
<Image
|
||||
src="https://cloud-15qevu1zp-hack-club-bot.vercel.app/0assemble_2.png"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
ml: -4,
|
||||
mt: -4
|
||||
}}
|
||||
/>
|
||||
<Grid columns={[1, 1, 2]} mt={[0, 3, 3]}>
|
||||
<Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
|
||||
<Box>
|
||||
<img
|
||||
src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
|
||||
sx={{
|
||||
width: ['170px', '220px', '350px'],
|
||||
position: 'relative',
|
||||
zIndex: 2
|
||||
}}
|
||||
/>
|
||||
<Box>
|
||||
{timer.length ? (
|
||||
<Grid
|
||||
key="{e}"
|
||||
gap={[1, 2, '25px']}
|
||||
columns={['1fr 1fr 1fr 1fr']}
|
||||
// sx={{ mr: 2 }}
|
||||
sx={{ mr: 2, mt: 2 }}
|
||||
>
|
||||
{timer}
|
||||
</Grid>
|
||||
|
|
@ -156,15 +168,17 @@ export default function Epoch() {
|
|||
<></>
|
||||
)}
|
||||
</Box>
|
||||
<Box mt={['-60px', '-20px', '-100px']} ml={[0, 0, 3]}>
|
||||
</Box>
|
||||
<Box ml={[0, 0, 3]}>
|
||||
<Text as="p" variant="subtitle">
|
||||
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.
|
||||
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>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Flex sx={{ flexDirection: 'column', mt: [3, 3, 4], position: 'relative' }}>
|
||||
<Buttons
|
||||
content="travel stipends available"
|
||||
// content="travel stipends available"
|
||||
id="17"
|
||||
link="https://epoch.hackclub.com"
|
||||
icon="post"
|
||||
|
|
@ -181,21 +195,6 @@ export default function Epoch() {
|
|||
Help plan the hackathon
|
||||
</Buttons>
|
||||
</Flex>
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
as="a"
|
||||
href="https://epoch.hackclub.com/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{
|
||||
background: '#FF4794',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
mb: [3, null, null]
|
||||
}}
|
||||
>
|
||||
Sign up for Epoch
|
||||
</Button> */}
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default function Hackathons({ data, stars }) {
|
|||
// background="https://hackclub.com/bank/bg.webp"
|
||||
>
|
||||
<Image
|
||||
src="https://hackclub.com/bank/bg.webp"
|
||||
src="https://cloud-3zkwhtiid-hack-club-bot.vercel.app/0bg-min.png"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
|
|
@ -75,7 +75,7 @@ export default function Hackathons({ data, stars }) {
|
|||
world. From an online community of organizers to free stickers and
|
||||
more!{' '}
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
|
||||
<Buttons
|
||||
id="19"
|
||||
icon="event-code"
|
||||
|
|
@ -85,7 +85,7 @@ export default function Hackathons({ data, stars }) {
|
|||
Find a high school hackathon
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="learn more about available resources"
|
||||
// content="learn more about available resources"
|
||||
id="20"
|
||||
icon="bolt"
|
||||
link="/hackathons"
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default function Sinerider({ stars }) {
|
|||
highlight="#271932"
|
||||
>
|
||||
<Image
|
||||
src="https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png"
|
||||
src="https://cloud-4seh308a9-hack-club-bot.vercel.app/00initial-bg__1_-min.png"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
|
|
@ -59,7 +59,7 @@ export default function Sinerider({ stars }) {
|
|||
storytellers… so if that’s you, come join us; we need your help to
|
||||
make this thing real!
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
|
||||
<Buttons
|
||||
content="you could create the art, be a scene maker, or write graphics rendering code"
|
||||
id="4"
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import SlackEvents from '../../slack/slack-events'
|
|||
import Event from '../events'
|
||||
import Dot from '../../dot'
|
||||
import Comma from '../../comma'
|
||||
import RelativeTime from 'react-relative-time'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
// const Cover = () => (
|
||||
|
|
@ -125,48 +126,15 @@ export default function Slack({ data, slackKey, events }) {
|
|||
}}
|
||||
/>
|
||||
<Cover />
|
||||
{/* <Box
|
||||
as="video"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
poster="https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
|
||||
duration={2000}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '100%',
|
||||
zIndex: 0,
|
||||
width: '100vw',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
>
|
||||
<source
|
||||
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.hecv.mp4?v=1590780967658"
|
||||
type="video/mp4; codecs=hevc"
|
||||
/>
|
||||
<source
|
||||
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.webm?v=1590781698834"
|
||||
type="video/webm; codecs=vp9,opus"
|
||||
/>
|
||||
<source
|
||||
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.mov?v=1590781491717"
|
||||
type="video/quicktime"
|
||||
/>
|
||||
</Box> */}
|
||||
<Grid sx={{ zIndex: 2 }}>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
|
||||
Our online community
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid columns={[1, 1, 2, 2]} sx={{ zIndex: 2 }}>
|
||||
<Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
zIndex: 2,
|
||||
zIndex: 2
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
@ -176,9 +144,8 @@ export default function Slack({ data, slackKey, events }) {
|
|||
>
|
||||
Coding doesn’t have to be a solidary activity. At Hack Club, we make
|
||||
things together and in our Slack, you'll find awesome people to
|
||||
hangout with to. Across 2,000 public channels, find the community
|
||||
for your favorite programming language, ask for advice, or just hang
|
||||
out.
|
||||
hangout with to. Code together, find your programming community, or
|
||||
just hang out.
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
Sometimes, we also invite someone we really want to speak to (like
|
||||
|
|
@ -196,11 +163,11 @@ export default function Slack({ data, slackKey, events }) {
|
|||
<Event events={events} />
|
||||
|
||||
<Buttons
|
||||
content="click to learn more about how to submit a workshop"
|
||||
id="13"
|
||||
link="/slack"
|
||||
icon="slack"
|
||||
primary="purple"
|
||||
primary="red"
|
||||
sx={{ mt: [3, 3, 4] }}
|
||||
>
|
||||
Join our Slack
|
||||
</Buttons>
|
||||
|
|
@ -211,26 +178,41 @@ export default function Slack({ data, slackKey, events }) {
|
|||
height: ['170px', '170px', '100%', '100%'],
|
||||
position: ['relative', 'relative', 'absolute', 'absolute'],
|
||||
zIndex: 3,
|
||||
width: ['120%', '120%', '210px', '210px'],
|
||||
width: ['120%', '120%', '240px', '240px'],
|
||||
right: 0,
|
||||
top: [null, null, 0, 0],
|
||||
mt: [3, 3, 0, 0],
|
||||
ml: -4,
|
||||
mb: -4,
|
||||
p: 3
|
||||
p: 4,
|
||||
pt: 3
|
||||
}}
|
||||
>
|
||||
<Text variant="eyebrow" as="p" sx={{ color: 'white' }}>
|
||||
<Dot />
|
||||
Live from Slack
|
||||
</Text>
|
||||
<Flex sx={{flexDirection: ['row', 'row', 'column', 'column'], gap: '20px'}}>
|
||||
<Flex sx={{ flexDirection: ['row', 'row', 'column'], justifyContent: 'space-between' }}>
|
||||
<Text variant="eyebrow" as="p" sx={{ color: 'white' }}>
|
||||
<Dot />
|
||||
Live from Slack
|
||||
</Text>
|
||||
<Text sx={{ color: 'muted' }}>
|
||||
As of{' '}
|
||||
<RelativeTime value={data.ds} titleFormat="YYYY-MM-DD" />
|
||||
</Text>
|
||||
</Flex>
|
||||
<Grid columns={[3, 3, 1]} gap="5px">
|
||||
<Box>
|
||||
<Heading variant="headline" sx={{ mb: 0, pt: 2 }}>
|
||||
<Comma>{data.readers_count_1d}</Comma>
|
||||
</Heading>
|
||||
<Text sx={{ textTransform: 'uppercase', color: 'muted' }}>
|
||||
Online today
|
||||
Online
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading variant="headline" sx={{ mb: 0, pt: 2 }}>
|
||||
<Comma>{data.chats_channels_count_1d}</Comma>
|
||||
</Heading>
|
||||
<Text sx={{ textTransform: 'uppercase', color: 'muted' }}>
|
||||
Total channels
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
|
|
@ -249,7 +231,7 @@ export default function Slack({ data, slackKey, events }) {
|
|||
Total members
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -86,38 +86,16 @@ export default function SprigConsole({ stars, consoleCount }) {
|
|||
started with hardware engineering and embedded systems
|
||||
programming.{' '}
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Buttons
|
||||
content="click here to get started in our editor"
|
||||
id="6"
|
||||
icon="emoji"
|
||||
link="https://github.com/hackclub/sprig/blob/main/docs/GET_A_SPRIG.md"
|
||||
primary="#427A43"
|
||||
sx={{mt: [3, 3, 4]}}
|
||||
>
|
||||
Build a game and get your console
|
||||
</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> */}
|
||||
</Flex>
|
||||
{/* <Button
|
||||
as="a"
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: '#427A43',
|
||||
color: '#fff',
|
||||
mt: 3
|
||||
}}
|
||||
href="https://sprig.hackclub.com/shar"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Get your console
|
||||
</Button> */}
|
||||
</Box>
|
||||
<Box></Box>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -219,14 +219,14 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
|||
Draw, make music, and craft games in our web-based JavaScript game
|
||||
editor, which has been used by 7k+ makers around the world.
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
|
||||
<Buttons
|
||||
content="click here to get started in our editor"
|
||||
id="6"
|
||||
icon="emoji"
|
||||
link="https://editor.sprig.hackclub.com"
|
||||
primary="#FFDE4D"
|
||||
sx={{ color: 'black' }}
|
||||
sx={{ color: 'black'}}
|
||||
>
|
||||
Build a Sprig game
|
||||
</Buttons>
|
||||
|
|
@ -254,20 +254,6 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
|||
Connect with other Sprig game developers
|
||||
</Buttons>
|
||||
</Flex>
|
||||
{/* <Button
|
||||
as="a"
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: '#FFDE4D',
|
||||
color: '#000',
|
||||
mt: 3
|
||||
}}
|
||||
href="https://editor.sprig.hackclub.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Make a game
|
||||
</Button> */}
|
||||
</Box>
|
||||
<Box sx={{ mt: [0, -4, -4] }}>
|
||||
<Text sx={{ fontStyle: 'italic', fontSize: [1, '14px', '16px'] }}>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,6 @@ function BreakdownBox({
|
|||
zIndex: 2
|
||||
// justifyContent: 'flex-end'
|
||||
}}
|
||||
variant="interactive"
|
||||
as={href ? 'a' : 'div'}
|
||||
href={href}
|
||||
>
|
||||
{subtitle ? (
|
||||
<Text
|
||||
|
|
@ -130,7 +127,7 @@ export default function Winter() {
|
|||
py: 2,
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
borderRadius: 'extra',
|
||||
fontWeight: 'bold',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
Happening now
|
||||
|
|
@ -162,7 +159,6 @@ export default function Winter() {
|
|||
</>
|
||||
}
|
||||
delay="100"
|
||||
href="https://scrapbook.hackclub.com/r/10daysinpublic"
|
||||
/>
|
||||
<BreakdownBox
|
||||
icon="friend"
|
||||
|
|
@ -170,11 +166,10 @@ export default function Winter() {
|
|||
text="Friends"
|
||||
description="Find support from our community of 20k+ teenagers in the Hack Club Slack."
|
||||
delay="300"
|
||||
href="/slack"
|
||||
/>
|
||||
</Grid>
|
||||
<Buttons
|
||||
content="click to learn more about how to submit a workshop"
|
||||
// content="click to learn more about how to submit a workshop"
|
||||
id="13"
|
||||
link="/winter"
|
||||
icon="freeze"
|
||||
|
|
|
|||
|
|
@ -81,20 +81,20 @@ export default function Workshops({ data, stars }) {
|
|||
>
|
||||
<Text variant="title" sx={{fontSize: ['36px', 4, 5]}}>Workshops</Text>
|
||||
<Grid columns={[1, 2, 2]}>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Flex sx={{ flexDirection: 'column'}}>
|
||||
<Text as="p" variant="subtitle">
|
||||
100+ community-contributed, self-guided coding tutorials and ideas. Learn to code by building, one project at a time.
|
||||
</Text>
|
||||
<Buttons id="14" link="https://workshops.hackclub.com" icon="code" primary="white" sx={{color: 'blue'}}>
|
||||
Find a workshop
|
||||
<Buttons id="14" link="https://workshops.hackclub.com" icon="code" primary="white" sx={{color: 'blue', mt: [3, 3, 4]}}>
|
||||
Browse a workshop
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="click to learn more about how to submit a workshop"
|
||||
// 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
|
||||
Build a workshop
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Grid sx={{ gap: 3 }} columns={[1, 1, 2]}>
|
||||
|
|
|
|||
307
pages/index.js
307
pages/index.js
|
|
@ -72,67 +72,10 @@ function Page({
|
|||
let [slackKey, setSlackKey] = useState(0)
|
||||
let [key, setKey] = useState(0)
|
||||
|
||||
// useEffect(() => {
|
||||
// function getNewGitHubActivity() {
|
||||
// setKey(Math.random())
|
||||
// setGithub(Math.floor(Math.random() * gitHubDataLength))
|
||||
// console.log(gitHubData[github])
|
||||
// }
|
||||
// setInterval(getNewGitHubActivity, 30000)
|
||||
// }, [])
|
||||
|
||||
useEffect(() => {
|
||||
window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
|
||||
}, [])
|
||||
|
||||
// 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}`
|
||||
// )
|
||||
// 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)
|
||||
// }
|
||||
// }
|
||||
|
||||
// const fetcher = async function getImage() {
|
||||
// const thing0 = await load(gameTitle[0])
|
||||
// const thing1 = await load(gameTitle[1])
|
||||
// setGameImage(thing0)
|
||||
// setGameImage1(thing1)
|
||||
// }
|
||||
|
||||
// const { data, error } = useSWR('/api/profile-data', fetcher)
|
||||
|
||||
const easterEgg = () => {
|
||||
alert('Hey, you typed the Konami Code!')
|
||||
}
|
||||
|
|
@ -161,17 +104,7 @@ function Page({
|
|||
src: '/hackathons/mahacks.jpeg'
|
||||
},
|
||||
{ alt: 'AMA with Sal Khan', src: '/home/ama.png' },
|
||||
// {
|
||||
// alt: '10 day cross-country hackathon with 42 hackers in 2020',
|
||||
// src: '/home/golden-train.png'
|
||||
// },
|
||||
{ alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' },
|
||||
// {alt: 'Virtual Hack Club meeting, 2022', src: '/home/meetings.png'},
|
||||
// {
|
||||
// alt: 'Hacker reverse engineering a power extender!',
|
||||
// src: '/home/assemble-hardware.jpg'
|
||||
// },
|
||||
// {alt: 'Hack Clubber giving a talk on sponsorship', src: '/home/flagship_megan.png'},
|
||||
{ alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' }
|
||||
]
|
||||
|
||||
if (count == images.length - 2) {
|
||||
|
|
@ -182,7 +115,7 @@ function Page({
|
|||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="A home for high school coders"
|
||||
title="Hack Club — Home for high school coders"
|
||||
description="Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world."
|
||||
image="https://cloud-epiki4yvg.vercel.app/2020-09-09_drbp62kayjuyyy0ek89mf9fwcp5t4kuz.jpeg"
|
||||
/>
|
||||
|
|
@ -262,37 +195,7 @@ function Page({
|
|||
lineHeight: 1.1
|
||||
}}
|
||||
>
|
||||
We are <Comma>{slackData.total_members_count}</Comma> high
|
||||
schoolers from around the world that come together and code.
|
||||
</Text>
|
||||
<Button variant="ctaLg" as="a" href="/slack">
|
||||
Join our community
|
||||
</Button>
|
||||
{/* <Text
|
||||
as="span"
|
||||
sx={{
|
||||
lineHeight: 1.1,
|
||||
display: 'block',
|
||||
pb: 3
|
||||
}}
|
||||
>
|
||||
Where{' '}
|
||||
<Text
|
||||
as="a"
|
||||
onClick={() => {
|
||||
setHover(false)
|
||||
!reveal ? setReveal(true) : setReveal(false)
|
||||
}}
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
'&:hover': {
|
||||
cursor: 'help'
|
||||
}
|
||||
}}
|
||||
>
|
||||
teen makers
|
||||
</Text>{' '}
|
||||
around the world practice the
|
||||
We are <Comma>{slackData.total_members_count}</Comma>{' '}
|
||||
<Text
|
||||
sx={{
|
||||
color: 'transparent',
|
||||
|
|
@ -302,42 +205,35 @@ function Page({
|
|||
}}
|
||||
>
|
||||
<Text
|
||||
onClick={() => {
|
||||
setHover(false)
|
||||
!reveal ? setReveal(true) : setReveal(false)
|
||||
}}
|
||||
sx={{
|
||||
lineHeight: 0.875,
|
||||
// lineHeight: 0.875,
|
||||
px: 2,
|
||||
backgroundColor: 'red',
|
||||
position: 'absolute',
|
||||
borderRadius: 10,
|
||||
// transform: 'rotate(-3deg)',
|
||||
transform: 'rotate(-3deg) translateY(5px)',
|
||||
transform: 'rotate(-3deg)',
|
||||
color: 'white',
|
||||
whiteSpace: 'nowrap',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
cursor: 'pointer'
|
||||
},
|
||||
svg: {
|
||||
mb: [0, '20px', '20px'],
|
||||
opacity: 0.5,
|
||||
transition: '0.3s',
|
||||
mr: '-5px'
|
||||
},
|
||||
'&:hover svg': {
|
||||
opacity: 1
|
||||
}
|
||||
}}
|
||||
as="a"
|
||||
href="/philosophy"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
hacker ethic
|
||||
<Icon glyph="external" size={24} />
|
||||
teen makers
|
||||
{/* <Icon glyph="external" size={24} /> */}
|
||||
</Text>
|
||||
hacker ethic{' '}
|
||||
teen makers
|
||||
</Text>
|
||||
by building things together.
|
||||
</Text> */}
|
||||
from around the world that code together.
|
||||
</Text>
|
||||
<Button variant="ctaLg" as="a" href="/slack">
|
||||
Join our community
|
||||
</Button>
|
||||
</Heading>
|
||||
</Fade>
|
||||
<Box
|
||||
|
|
@ -419,7 +315,10 @@ function Page({
|
|||
pt={[3, 4]}
|
||||
>
|
||||
<Box
|
||||
sx={{ position: 'relative', height: ['300px', '300px', '100%'] }}
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: ['300px', '300px', '100%']
|
||||
}}
|
||||
onClick={() => setCount(count + 1)}
|
||||
>
|
||||
<Box
|
||||
|
|
@ -434,7 +333,7 @@ function Page({
|
|||
transform:
|
||||
count % 2 == 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
|
||||
height: '85%',
|
||||
width: ['70%', '70%', '100%'],
|
||||
width: ['70%', '70%', '100%']
|
||||
},
|
||||
zIndex: 3,
|
||||
'&:hover': {
|
||||
|
|
@ -593,8 +492,7 @@ function Page({
|
|||
<Text as="p" variant="subtitle">
|
||||
<strong>Connect with other teenage coders</strong>
|
||||
Have a coding question? Looking for project feedback? You’ll
|
||||
find hundreds of fabulous
|
||||
people to talk to in our global{' '}
|
||||
find hundreds of fabulous people to talk to in our global{' '}
|
||||
<Link href="/clubs" target="_blank" rel="noopener">
|
||||
Slack{' '}
|
||||
</Link>
|
||||
|
|
@ -748,7 +646,7 @@ function Page({
|
|||
Hack Clubbers
|
||||
</Text> */}
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
We build open source tools
|
||||
We build open source games and tools together
|
||||
</Text>
|
||||
<GitHub
|
||||
type={gitHubData[github].type}
|
||||
|
|
@ -775,12 +673,12 @@ function Page({
|
|||
gameImage={gameImage}
|
||||
gameImage1={gameImage1}
|
||||
/>
|
||||
<Sinerider delay={200} stars={stars.sinerider.stargazerCount} />
|
||||
<SprigConsole
|
||||
delay={300}
|
||||
stars={stars.sprigHardware.stargazerCount}
|
||||
consoleCount={consoleCount}
|
||||
/>
|
||||
<Sinerider delay={200} stars={stars.sinerider.stargazerCount} />
|
||||
<Workshops delay={400} stars={stars.hackclub.stargazerCount} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
@ -821,15 +719,14 @@ function Page({
|
|||
Hack Clubbers
|
||||
</Text> */}
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Join or run an IRL coding event
|
||||
Find your IRL community
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
Each year we support thousands of teenagers in organizing hackathons and after-school clubs.
|
||||
Hundreds of Hack Clubs run by high schoolers meet every week to code together in person.
|
||||
Thousands of Hack Clubbers organize and participate in hackathons and after school coding clubs.
|
||||
</Text>
|
||||
<Clubs />
|
||||
<Hackathons
|
||||
|
|
@ -898,9 +795,34 @@ function Page({
|
|||
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)' }
|
||||
svg: { color: 'rgb(51, 142, 218)' },
|
||||
position: 'relative',
|
||||
'.icon': {
|
||||
transition:
|
||||
'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
|
||||
},
|
||||
':hover,:focus': {
|
||||
'.icon': {
|
||||
transform: 'translateX(28px) translateY(-28px)',
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
className="icon"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 2,
|
||||
right: 2,
|
||||
opacity: 0.3,
|
||||
fontSize: [1, '16px', '20px'],
|
||||
zIndex: 3,
|
||||
color: 'white !important'
|
||||
}}
|
||||
/>
|
||||
<Stage
|
||||
icon="slack"
|
||||
color="white"
|
||||
|
|
@ -922,7 +844,18 @@ function Page({
|
|||
'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'
|
||||
textDecoration: 'none',
|
||||
position: 'relative',
|
||||
'.icon': {
|
||||
transition:
|
||||
'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
|
||||
},
|
||||
':hover,:focus': {
|
||||
'.icon': {
|
||||
transform: 'translateX(28px) translateY(-28px)',
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
}}
|
||||
as="a"
|
||||
href="/clubs"
|
||||
|
|
@ -930,6 +863,20 @@ function Page({
|
|||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
className="icon"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 2,
|
||||
right: 2,
|
||||
opacity: 0.3,
|
||||
fontSize: [1, '16px', '20px'],
|
||||
zIndex: 3,
|
||||
color: 'white !important'
|
||||
}}
|
||||
/>
|
||||
<Stage
|
||||
icon="clubs"
|
||||
color="white"
|
||||
|
|
@ -951,7 +898,18 @@ function Page({
|
|||
'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
|
||||
color: 'white',
|
||||
svg: { color: '#fb558e' },
|
||||
textDecoration: 'none'
|
||||
textDecoration: 'none',
|
||||
position: 'relative',
|
||||
'.icon': {
|
||||
transition:
|
||||
'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
|
||||
},
|
||||
':hover,:focus': {
|
||||
'.icon': {
|
||||
transform: 'translateX(28px) translateY(-28px)',
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
}}
|
||||
as="a"
|
||||
href="https://github.com/hackclub"
|
||||
|
|
@ -959,6 +917,20 @@ function Page({
|
|||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
className="icon"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 2,
|
||||
right: 2,
|
||||
opacity: 0.3,
|
||||
fontSize: [1, '16px', '20px'],
|
||||
zIndex: 3,
|
||||
color: 'white !important'
|
||||
}}
|
||||
/>
|
||||
<Stage
|
||||
icon="github"
|
||||
color="white"
|
||||
|
|
@ -980,28 +952,28 @@ function Page({
|
|||
</Box>
|
||||
</Box>
|
||||
<Footer
|
||||
// dark
|
||||
// sx={{
|
||||
// backgroundColor: 'dark',
|
||||
// position: 'relative',
|
||||
// overflow: 'hidden',
|
||||
// textShadow: '0 1px 2px rgba(0,0,0,0.375)',
|
||||
// 'h2,span,p,a': { color: 'white !important' },
|
||||
// '> div img': { objectPosition: ['left', 'center'] },
|
||||
// svg: {
|
||||
// fill: 'white',
|
||||
// filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
|
||||
// }
|
||||
// }}
|
||||
dark
|
||||
sx={{
|
||||
backgroundColor: 'dark',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
textShadow: '0 1px 2px rgba(0,0,0,0.375)',
|
||||
'h2,span,p,a': { color: 'white !important' },
|
||||
'> div img': { objectPosition: ['left', 'center'] },
|
||||
svg: {
|
||||
fill: 'white',
|
||||
filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* <BGImg
|
||||
<BGImg
|
||||
width={2544}
|
||||
height={2048}
|
||||
gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
|
||||
src={FooterImgFile}
|
||||
placeholder="blur"
|
||||
alt="Globe with hundreds of Hack Clubs"
|
||||
/> */}
|
||||
/>
|
||||
<style>
|
||||
{`a{
|
||||
color: #338eda
|
||||
|
|
@ -1014,20 +986,13 @@ function Page({
|
|||
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
|
||||
export async function getStaticProps() {
|
||||
let dataPieces = []
|
||||
// HCB: get total raised
|
||||
let bankData = []
|
||||
// let stars = []
|
||||
let initialBankData = await fetch('https://bank.hackclub.com/stats').then(r =>
|
||||
r.json()
|
||||
)
|
||||
|
||||
let raised = initialBankData.raised / 100
|
||||
|
||||
let slackData = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/slack'
|
||||
).then(r => r.json())
|
||||
console.log(slackData)
|
||||
|
||||
bankData.push(
|
||||
`💰 ${raised.toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
|
|
@ -1035,12 +1000,22 @@ export async function getStaticProps() {
|
|||
})} raised`
|
||||
)
|
||||
|
||||
// Slack: get total raised
|
||||
let slackData = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/slack'
|
||||
).then(r => r.json())
|
||||
|
||||
// GitHub: get latest github activity
|
||||
let gitHubData = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/github'
|
||||
).then(r => r.json())
|
||||
|
||||
let gitHubDataLength = gitHubData.length
|
||||
// GitHub: get latest GitHub stars
|
||||
let stars = await fetch('https://site-git-v4.hackclub.dev/api/stars').then(
|
||||
res => res.json()
|
||||
)
|
||||
|
||||
// Sprig: get newest games
|
||||
let game = await fetch('https://site-git-v4.hackclub.dev/api/games').then(r =>
|
||||
r.json()
|
||||
)
|
||||
|
|
@ -1050,37 +1025,33 @@ export async function getStaticProps() {
|
|||
|
||||
gameTitle = game.map(r => r.title)
|
||||
|
||||
const hackathonsData = await fetch(
|
||||
'https://hackathons.hackclub.com/api/events/upcoming'
|
||||
).then(res => res.json())
|
||||
let stars = await fetch('https://site-git-v4.hackclub.dev/api/stars').then(
|
||||
res => res.json()
|
||||
)
|
||||
|
||||
// Sprig: get console count
|
||||
const consoleCount = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/sprig-console'
|
||||
).then(r => r.json())
|
||||
|
||||
// Hackathons: get latest hackathons
|
||||
const hackathonsData = await fetch(
|
||||
'https://hackathons.hackclub.com/api/events/upcoming'
|
||||
).then(res => res.json())
|
||||
|
||||
let events = await fetch(
|
||||
'https://events.hackclub.com/api/events/upcoming/'
|
||||
).then(res => res.json())
|
||||
|
||||
return {
|
||||
props: {
|
||||
dataPieces,
|
||||
game,
|
||||
gameTitle,
|
||||
gitHubData,
|
||||
gitHubDataLength,
|
||||
consoleCount,
|
||||
// githubData2,
|
||||
hackathonsData,
|
||||
bankData,
|
||||
slackData,
|
||||
stars,
|
||||
events
|
||||
},
|
||||
revalidate: 30
|
||||
revalidate: 60
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue