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

oooo

Browse source
This commit is contained in:
Belle 2022-11-29 22:11:15 -05:00
parent 81ae5829f6
commit 1b7620541c
13 changed files with 221 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/cards/bank.js
View file

@ -43,10 +43,10 @@ export default function Bank({ data }) {
A fiscal sponsor and banking platform in one to help you organize
anything!
</Text>
<Text as="p" sx={{ fontSize: 'larger', fontWeight: 'bold', mt: 2 }}>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger' }}>
<ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"

6
components/cards/card-model.js
View file

@ -15,9 +15,6 @@ import {
/** @jsxImportSource theme-ui */
const CardModel = ({ children, link, github_link, color, ...props }) => (
<Tilt>
{/* // <Box> */}
{/* // <Link href={link} sx={{textDecoration: 'none'}}> */}
<Card
sx={{ position: 'relative', width: '100%', color: color, my: 5}}
{...props}
@ -36,9 +33,6 @@ const CardModel = ({ children, link, github_link, color, ...props }) => (
)}
{children}
</Card>
{/* // </Link>
//</Box> */}
</Tilt>
)
export default CardModel

4
components/cards/clubs.js
View file

@ -29,10 +29,10 @@ export default function Clubs() {
<Text as="p" variant="subtitle">
Hack Clubs typically meet for 1.5 hours each week in high schools, makerspaces, community centers, churches, and any other venue where teenagers can gather.
</Text>
<Text as="p" sx={{ fontSize: 'larger', fontWeight: 'bold', mt: 2 }}>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger' }}>
<ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"

4
components/cards/epoch.js
View file

@ -170,7 +170,7 @@ export default function Bank() {
<Text
as="p"
sx={{
fontSize: 'larger',
fontSize: [2, 3],
fontWeight: 'bold',
mt: 2,
color: '#FF4794'
@ -178,7 +178,7 @@ export default function Bank() {
>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger' }}>
<ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://epoch.hackclub.com"

4
components/cards/hackathons.js
View file

@ -28,10 +28,10 @@ export default function Hackathons({data}) {
<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 stickers and more! </Text>
<Text as="p" sx={{ fontSize: 'larger', fontWeight: 'bold', mt: 2 }}>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger' }}>
<ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"

4
components/cards/sinerider.js
View file

@ -36,10 +36,10 @@ export default function Sinerider() {
<Text as="p" variant="subtitle">
A game about love and graphing, coming 2023! Join #gamedev in Slack to contribute.
</Text>
<Text as="p" sx={{ fontSize: 'larger', fontWeight: 'bold', mt: 2 }}>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger'}}>
<ul sx={{ mt: 0, fontSize: [2, 3]}}>
<li>
<Link
href="https://editor.sprig.hackclub.com"

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

@ -39,10 +39,10 @@ export default function SprigConsole() {
parts needed for getting started with hardware engineering and
embedded systems programming.{' '}
</Text>
<Text as="p" sx={{ fontSize: 'larger', fontWeight: 'bold', mt: 2 }}>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger' }}>
<ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"

4
components/cards/sprig.js
View file

@ -35,10 +35,10 @@ export default function Sprig() {
<Text as="p" variant="subtitle">
Build JavaScript games and earn a free console to play your games
</Text>
<Text as="p" sx={{ fontSize: 'larger', fontWeight: 'bold', mt: 2 }}>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger' }}>
<ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"

4
components/cards/workshops.js
View file

@ -28,10 +28,10 @@ export default function Workshops() {
<Box>
<Text as="p" variant="subtitle">
A collection of community-contributed, self-guided coding tutorials + ideas </Text>
<Text as="p" sx={{ fontSize: 'larger', fontWeight: 'bold', mt: 2 }}>
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<ul sx={{ mt: 0, fontSize: 'larger' }}>
<ul sx={{ mt: 0, fontSize: [2, 3] }}>
<li>
<Link
href="https://editor.sprig.hackclub.com"

154
components/carousel.js
View file

@ -14,6 +14,8 @@ import CarouselCards from './carousel-cards'
import { keyframes } from '@emotion/react'
import React, { useEffect, useState } from 'react'
import Ticker from 'react-ticker'
import PageVisibility from 'react-page-visibility'
/** @jsxImportSource theme-ui */
// const noOfCards = 7
@ -25,6 +27,13 @@ import Ticker from 'react-ticker'
export default function Carousel() {
let [speed, setSpeed] = useState(5)
const [pageIsVisible, setPageIsVisible] = useState(true)
const handleVisibilityChange = isVisible => {
setPageIsVisible(isVisible)
}
return (
// <Box
// sx={{
@ -40,75 +49,84 @@ export default function Carousel() {
// }
// }}
// >
<Ticker mode="string" speed={speed} sx={{overflowX: 'hidden'}}>
{() => (
<Box as="div" sx={{ display: 'flex', py: 4 }} onMouseOver={() => setSpeed(3)} onMouseOut={() => setSpeed(5)}>
<CarouselCards
background="#000"
titleColor="yellow"
descriptionColor="white"
title="Sprig"
description="🍃 Learn to code by making games in a JavaScript web-based game editor."
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
link="https://sprig.hackclub.com"
/>
<CarouselCards
background="#000"
titleColor="#FF4794"
descriptionColor="white"
title="EPOCH"
description="The most epic high school hackathon this new years!."
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f386@2x.png"
link="https://epoch.hackclub.com"
/>
<CarouselCards
background="blue"
titleColor="white"
textColor="white"
title="Clubs network"
description="High school students come together to have fun and code, IRL"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png"
link="/clubs"
/>
<CarouselCards
background="dark"
titleColor="red"
textColor="white"
title="Hack Club Bank"
description="Fiscal sponsorship and banking platform to organize anything."
img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png"
link="/bank"
/>
<CarouselCards
background="#271932"
titleColor="#CAB4D4"
textColor="#CAB4D4"
title="Sinerider"
description="💖 A game about love, math, and graphing built by teenagers!"
img="https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png"
link="https://sinerider.hackclub.com"
/>
<CarouselCards
background="black"
titleColor="yellow"
textColor="white"
title="High school Hackathons"
description="🔍 A curated list of high school hackathons"
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
link="/hackathons"
/>
<CarouselCards
background="snow"
titleColor="dark"
descriptionColor="black"
title="Workshops"
description="100+ short coding workshops to start building"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
link="https://workshops.hackclub.com"
/>
</Box>
<PageVisibility onChange={handleVisibilityChange}>
{pageIsVisible && (
<Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
{() => (
<Box
as="div"
sx={{ display: 'flex', py: 4 }}
onMouseOver={() => setSpeed(3)}
onMouseOut={() => setSpeed(6)}
>
<CarouselCards
background="#000"
titleColor="yellow"
descriptionColor="white"
title="Sprig"
description="🍃 Learn to code by making games in a JavaScript web-based game editor."
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
link="https://sprig.hackclub.com"
/>
<CarouselCards
background="#000"
titleColor="#FF4794"
descriptionColor="white"
title="EPOCH"
description="The most epic high school hackathon this new years!."
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f386@2x.png"
link="https://epoch.hackclub.com"
/>
<CarouselCards
background="blue"
titleColor="white"
textColor="white"
title="Clubs network"
description="High school students come together to have fun and code, IRL"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png"
link="/clubs"
/>
<CarouselCards
background="dark"
titleColor="red"
textColor="white"
title="Hack Club Bank"
description="Fiscal sponsorship and banking platform to organize anything."
img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png"
link="/bank"
/>
<CarouselCards
background="#271932"
titleColor="#CAB4D4"
textColor="#CAB4D4"
title="Sinerider"
description="💖 A game about love, math, and graphing built by teenagers!"
img="https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png"
link="https://sinerider.hackclub.com"
/>
<CarouselCards
background="black"
titleColor="yellow"
textColor="white"
title="High school Hackathons"
description="🔍 A curated list of high school hackathons"
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
link="/hackathons"
/>
<CarouselCards
background="snow"
titleColor="dark"
descriptionColor="black"
title="Workshops"
description="100+ short coding workshops to start building"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
link="https://workshops.hackclub.com"
/>
</Box>
)}
</Ticker>
)}
</Ticker>
</PageVisibility>
// </Box>
)
}

1
package.json
View file

@ -39,6 +39,7 @@
"react-dom": "^17.0.2",
"react-marquee-slider": "^1.1.5",
"react-masonry-css": "^1.0.16",
"react-page-visibility": "^7.0.0",
"react-reveal": "^1.2.2",
"react-scrolllock": "^5.0.1",
"react-ticker": "^1.3.2",

152
pages/index.js
View file

@ -330,23 +330,31 @@ function Page({ dataPieces, hackathonsData, bankData }) {
// )
// }, slackData)
const Node = ({ text }) => (
<Badge
variant="pill"
bg="black"
sx={{
flexGrow: 1,
fontSize: 2,
color: 'white'
}}
>
<Link
href="https://github.com/hackclub"
sx={{ textDecoration: 'none', color: 'inherit' }}
const Node = ({ text, ...props }) => (
<Fade>
<Badge
variant="pill"
bg="black"
sx={{
flexGrow: 1,
fontSize: 2,
color: 'white',
fontWeight: '400 !important'
}}
{...props}
>
{text}
</Link>
</Badge>
<Link
href="https://github.com/hackclub"
sx={{
textDecoration: 'none',
color: 'inherit',
fontWeight: '400 !important'
}}
>
{text}
</Link>
</Badge>
</Fade>
)
return (
<>
@ -368,7 +376,7 @@ function Page({ dataPieces, hackathonsData, bankData }) {
<Box
as="header"
sx={{
bg: 'black',
bg: 'dark',
pt: [5, 6],
pb: [2, 3],
textAlign: 'left',
@ -389,7 +397,20 @@ function Page({ dataPieces, hackathonsData, bankData }) {
mx: 'auto'
}}
>
<Node text={dataPieces[0]} />
<Node
text={dataPieces[0] != null ? dataPieces[0] : dataPieces[1]}
sx={{
position: 'absolute',
top: 0,
right: 2,
zIndex: 4,
transform: 'rotate(3deg)'
}}
/>
<Fade>
<Text variant="eyebrow">Welcome to Hack Club</Text>
</Fade>
<Fade bottom delay={200}>
<Heading
as="h1"
variant="ultratitle"
@ -409,9 +430,8 @@ function Page({ dataPieces, hackathonsData, bankData }) {
pb: 3
}}
>
<Fade bottom cascade delay={200}>
We inspire the hacker ethic {''}in teen makers around the {''}world by building things we {''}care about together.
{/* <Text sx={{ color: 'transparent', mr: 2 }}>
We inspire the hacker ethic in
<Text sx={{ color: 'transparent', mr: 2 }}>
<Text
sx={{
lineHeight: 0.875,
@ -428,43 +448,87 @@ function Page({ dataPieces, hackathonsData, bankData }) {
teen makers
</Text>
teen makers{' '}
</Text> */}
</Fade>
</Text>
around the {''}world by building things we {''}care about
together.
</Text>
</Heading>
<Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
</Fade>
{/* <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch> */}
</Box>
{/* </SlideDown> */}
<Carousel />
</Box>
<Box as="section" sx={{ py: [4, 5], color: 'black' }}>
<Box>
<Container py={4}>
<Text variant="title" sx={{ textAlign: 'center' }}>
The largest online community of technical teenagers
</Text>
<Text as="p" variant="subtitle">
Coding is often seen as an isolating activity. The stereotype of a
programmer is a person who sits alone in a dark room. It doesn't
have to be this way—in the Hack Club Slack (Discord-style online
groupchat), you'll find a group of 20,000+ fabulous people — Hack
Clubbers — 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 our Slack →
</Button>
</Link>
</Container>
</Box>
<Container>
<Text variant="title">Join our open-source projects</Text>
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Text variant="title">Build open source tools</Text>
<Text variant="subtitle" as="p">
We collaborate via <Link href='/slack'>Slack</Link>, our online community with <Text sx={{ animation: `.4s ${rollout}` }} key={Math.random()}>23,452{' '}
{/* {
We collaborate via <Link href="/slack">Slack</Link>, our online
community with{' '}
<Text sx={{ animation: `.4s ${rollout}` }} key={Math.random()}>
23,452{' '}
{/* {
slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
.total_members_count
} */}
fabulous people to talk to at all hours. Come for the skills, stay for the friends!
</Text>
fabulous people to talk to at all hours. Come for the skills, stay
for the friends!
</Text>
</Text>
<Sprig />
<Sinerider />
<SprigConsole />
</Container>
{/* <Slack /> */}
<Container mt={4}>
<Text variant="title">Start a coding club</Text>
<Text variant="subtitle" as="p">
Join or start a Hack Club and be part of a network of high quality
coding clubs where students gather to discover the joy of code.
<Box sx={{ background: 'snow' }}>
<Container py={4}>
{/* <Text variant="eyebrow" as="p">At Hack Club we </Text> */}
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Text variant="title">Gather IRL to discover the joy of code</Text>
<Text variant="subtitle" as="p">
Join or start a Hack Club and be part of a network of high quality
coding clubs where students gather to discover the joy of code.
</Text>
<Clubs />
<Workshops />
</Container>
</Box>
<Container py={4}>
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Clubs />
<Workshops />
</Container>
<Container mt={4}>
<Text variant="title">Find a hackathon</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
@ -473,7 +537,11 @@ function Page({ dataPieces, hackathonsData, bankData }) {
<Bank data={bankData} />
<Epoch />
<Hackathons />
<iframe src="https://bank.hackclub.com/poseidon-robotics" width="100%" height="400px" />
{/* <iframe
src="https://bank.hackclub.com/poseidon-robotics"
width="100%"
height="400px"
/> */}
</Container>
{/* <ScrollingHackathons eventData={hackathonsData} /> */}
</Box>
@ -626,9 +694,9 @@ export async function getStaticProps() {
'https://api.github.com/orgs/hackclub/events'
).then(r => r.json())
initialGitHubData = initialGitHubData.map(x =>
x.type == 'PushEvent' ||
(x.type == 'PushEvent' && x.actor.login != 'github-actions[bot]') ||
x.type == 'WatchEvent' ||
(x.type == 'PullRequestEvent' && x.actor.login != 'github-actions[bot]')
x.type == 'PullRequestEvent'
? x.type == 'PushEvent'
? `✅ New commit in ${x.repo.name} by ${x.actor.login}`
: x.type == 'WatchEvent'

9
yarn.lock
View file

@ -3685,7 +3685,7 @@ prop-types@^15.5.10:
object-assign "^4.1.1"
react-is "^16.8.1"
prop-types@^15.6.2, prop-types@^15.8.1:
prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -3780,6 +3780,13 @@ react-masonry-css@^1.0.16:
resolved "https://registry.npmjs.org/react-masonry-css/-/react-masonry-css-1.0.16.tgz"
integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
react-page-visibility@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/react-page-visibility/-/react-page-visibility-7.0.0.tgz#13dfe604790d061e70b900038bad1ca769a36cbc"
integrity sha512-d4Kq/8TtJSr8dQc8EJeAZcSKTrGzC5OPTm6UrMur9BnwP0fgTawI9+Nd+ZGB7vwCfn2yZS0qDF9DR3/QYTGazw==
dependencies:
prop-types "^15.7.2"
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"