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

opt

Browse source
This commit is contained in:
Belle 2022-12-16 09:31:28 -05:00
parent 55719ee57e
commit 29418e8177
6 changed files with 112 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -176,6 +176,9 @@ export default function Epoch() {
unexpected, share what we’ve learnt in 2022, and experience the
thrill of being in-person together.
</Text>
<Text as="p" variant="subtitle">
In <Link sx={{color: '#FF4794' }} href="https://hackclub.slack.com/archives/C04CGDDLC72" target="_blank" rel="noopener">Austin</Link>, <Link sx={{color: '#FF4794' }} href="https://epochba.hackclub.com/" target="_blank" rel="noopener">Bay Area</Link>, or <Link sx={{color: '#FF4794' }} target="_blank" rel="noopener">Vermont</Link>? Join a regional Epoch event!
</Text>
<Flex sx={{ flexDirection: 'column', mt: [3, 3, 4], position: 'relative' }}>
<Buttons
// content="travel stipends available"

65
components/index/cards/slack.js
View file

@ -23,64 +23,6 @@ import Comma from '../../comma'
import RelativeTime from 'react-relative-time'
/** @jsxImportSource theme-ui */
// const Cover = () => (
// <Box
// sx={{
// position: 'absolute',
// bottom: 0,
// top: 0,
// left: 0,
// right: 0,
// backgroundImage: t => t.util.gx('cyan', 'purple'),
// opacity: 0.825,
// zIndex: 1
// }}
// />
// )
// const Static = ({
// img = 'https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
// // img="https://cloud-re5hkabx0.vercel.app/2020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
// }) => (
// <Box
// as="section"
// id="slack"
// sx={{
// position: 'relative',
// overflow: 'hidden',
// backgroundImage: `url(https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png)`,
// backgroundSize: 'cover'
// }}
// >
// <Cover />
// <Content />
// </Box>
// )
const rollin = keyframes`
0% {
transform: translateY(100%);
},
30% {
transform: translateY(100%);
},
100% {
transform: translateY(0);
}
`
const rollout = keyframes`
0% {
transform: translateY(0);
},
60% {
transform: translateY(-100%);
},
100% {
transform: translateY(-100%);
}
`
const Cover = () => (
<Box
sx={{
@ -188,7 +130,12 @@ export default function Slack({ data, slackKey, events }) {
pt: 3
}}
>
<Flex sx={{ flexDirection: ['row', 'row', 'column'], justifyContent: 'space-between' }}>
<Flex
sx={{
flexDirection: ['row', 'row', 'column'],
justifyContent: 'space-between'
}}
>
<Text variant="eyebrow" as="p" sx={{ color: 'white' }}>
<Dot />
Live from Slack

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

@ -28,9 +28,9 @@ export default function SprigConsole({ stars, consoleCount }) {
sx={{
backgroundSize: 'cover',
backgroundColor: '#2E5626',
// backgroundImage: 'linear-gradient(to bottom,rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("https://sprig.hackclub.com/pcb.svg")',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
backgroundRepeat: 'no-repeat',
minHeight: ['300px', '400px','400px'],
}}
highlight="#427A43"
>
@ -46,7 +46,7 @@ export default function SprigConsole({ stars, consoleCount }) {
zIndex: 0
}}
/>
<img
<Image
src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
sx={{
width: ['250px', '450px', '500px'],
@ -72,7 +72,7 @@ export default function SprigConsole({ stars, consoleCount }) {
</Text>
<Grid columns={[1, '1.2fr 1fr']} sx={{zIndex: 2, position: 'relative'}}>
<Box>
<img
<Image
src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png"
sx={{
width: '120%',
@ -100,12 +100,12 @@ export default function SprigConsole({ stars, consoleCount }) {
<Box></Box>
</Grid>
</CardModel>
<img
src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png"
<Image
src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
sx={{
position: 'absolute',
right: ['', '-50%', '-20%'],
top: ['', '12%', '15%'],
right: ['', '-50%', '-25%'],
top: ['', '12%', '10%'],
width: ['', '100%', '70%'],
pointerEvents: 'none',
userSelect: 'none',

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

@ -42,7 +42,7 @@ export default function CarouselCards({
target="_blank"
rel="noopener"
>
<img
<Image
src={img}
sx={{ position: 'absolute', top: ["-26px", "-30px", "-40px"], left: ["10px", "12px", "15px"], zIndex: 2, width: ["42px", "50px", "58px"], height: ["42px", "50px", "58px"] }}
/>

6
pages/api/sprig-console.js
View file

@ -3,8 +3,12 @@ export default async function getConsoles(req, res) {
'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
).then(r => r.json())
function check(val) {
return val == 'Pending' || val == 'Approved'
}
const consoleCount = data
? data.filter(console => console.fields.Status === 'Pending').length
? data.filter(console => check(console.fields.Status)).length
: 100 // arbitrary fallback number
res.json(consoleCount)

169
pages/index.js
View file

@ -74,6 +74,7 @@ function Page({
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`
window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `
}, [])
const easterEgg = () => {
@ -94,23 +95,28 @@ function Page({
const [count, setCount] = useState(0)
let images = [
{ alt: 'Map of Hack Clubs around the world', src: '/home/map.png' },
{ alt: '1Map of Hack Clubs around the world', src: '/home/map.png' },
{
alt: 'Hack Clubbers at Space X HQ in LA',
alt: '2Hack Clubbers at Space X HQ in LA',
src: '/home/zephyr-spacex.jpeg'
},
{
alt: 'MA Hacks, Hack Clubber organized hackathon',
alt: '3MA Hacks, Hack Clubber organized hackathon',
src: '/hackathons/mahacks.jpeg'
},
{ alt: 'AMA with Sal Khan', src: '/home/ama.png' },
{ alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' }
{ alt: '4AMA with Sal Khan', src: '/home/ama.png' },
{ alt: '5Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' }
]
if (count == images.length - 2) {
setCount(0)
}
// janky right now and does not show last image
console.log(
`White sheets of paper\nWaiting to be printed on\nA blank console waits`
)
useEffect(() => {
if (count == images.length - 1) {
setCount(0)
}
}, [count])
return (
<>
<Meta
@ -289,7 +295,9 @@ function Page({
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'white',
bg: 'red'
background: theme => theme.util.gx('red', 'orange'),
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent'
}}
>
joy of code
@ -319,7 +327,10 @@ function Page({
position: 'relative',
height: ['300px', '300px', '100%']
}}
onClick={() => setCount(count + 1)}
onClick={() => {
setCount(count + 1)
console.log(count)
}}
>
<Box
sx={{ position: 'absolute', width: '100%', height: '100%' }}
@ -348,11 +359,15 @@ function Page({
<Photo
src={
count == images.length - 2
? images[0].src
: images.length - 1
? images[1].src
: images[count + 2].src
}
alt={
count == images.length - 2
? images[0].alt
: images.length - 1
? images[1].alt
: images[count + 2].alt
}
@ -471,20 +486,7 @@ function Page({
position: 'relative',
textDecoration: 'none',
borderRadius: 'extra'
// '&:hover': {
// bg: 'purple',
// color: 'white',
// cursor: 'pointer'
// },
// '&:hover span': {
// color: 'white'
// }
}}
// as="a"
// href="#community"
// data-effect="solid"
// data-tip="learn more about our online community"
// data-delay-show="142"
>
<Text as="span" color="red">
1
@ -509,20 +511,7 @@ function Page({
position: 'relative',
textDecoration: 'none',
borderRadius: 'extra'
// '&:hover': {
// bg: 'cyan',
// color: 'white',
// cursor: 'pointer'
// },
// '&:hover span': {
// color: 'white'
// }
}}
// as="a"
// href="#irl"
// data-effect="solid"
// data-tip="check out clubs and hackathons at Hack Club"
// data-delay-show="142"
>
<Text as="span" color="orange">
2
@ -550,20 +539,7 @@ function Page({
position: 'relative',
textDecoration: 'none',
borderRadius: 'extra'
// '&:hover': {
// bg: 'orange',
// color: 'white',
// cursor: 'pointer'
// },
// '&:hover span': {
// color: 'white'
// }
}}
// as="a"
// href="#tools"
// data-tip="click to projects we're currently working on"
// data-effect="solid"
// data-delay-show="142"
>
<Text as="span" color="yellow">
3
@ -586,15 +562,6 @@ function Page({
</Grid>
</Box>
</Box>
{/* <CarouselCards
background="#000"
titleColor="yellow"
descriptionColor="white"
title="Sprig"
description="Learn to code by making games in a JavaScript game editor"
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
link="https://sprig.hackclub.com"
/> */}
<Carousel />
<Box
as="section"
@ -604,7 +571,6 @@ function Page({
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%',
py: [3, 4, 5]
}}
>
<Box
@ -614,11 +580,25 @@ function Page({
maxWidth: 'layout',
margin: 'auto'
}}
pb={4}
py={5}
>
<Box sx={{ maxWidth: 'copyPlus' }}>
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Connect with builders from around the world
Connect with{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'white',
bg: 'red'
}}
>
builders
</Text>{' '}
from around the world
</Text>
<Text
variant="subtitle"
@ -633,7 +613,9 @@ function Page({
<Epoch />
<Slack slackKey={slackKey} data={slackData} events={events} />
</Box>
<Box py={4} id="tools">
</Box>
<Box>
<Box py={5}>
<Box
sx={{
width: '90vw',
@ -646,7 +628,21 @@ function Page({
Hack Clubbers
</Text> */}
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
We build open source games and tools together
We build{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'white',
bg: 'orange'
}}
>
open source
</Text>{' '}
games and tools together
</Text>
<GitHub
type={gitHubData[github].type}
@ -683,17 +679,17 @@ function Page({
</Box>
</Box>
<Box
sx={{ position: 'relative' }}
// sx={{
// background: 'sunken',
// backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
// backgroundSize: '40px 40px',
// backgroundRepeat: 'repeat',
// backgroundPosition: '10% 10%',
// '&:hover': {
// backgroundImage: `url('https://icons.hackclub.com/api/icons/0x000000/glyph:rep.svg')`
// }
// }}
sx={{
position: 'relative',
background: 'snow',
backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%',
// '&:hover': {
// backgroundImage: `url('https://icons.hackclub.com/api/icons/0x000000/glyph:rep.svg')`
// }
}}
>
<Box
sx={{
@ -707,26 +703,39 @@ function Page({
{}
</Box>
<Box
py={3}
py={5}
sx={{
width: '90vw',
maxWidth: 'layout',
margin: 'auto'
}}
id="irl"
>
{/* <Text variant="eyebrow" as="p">
Hack Clubbers
</Text> */}
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Find your IRL community
Find your{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'white',
bg: 'yellow'
}}
>
IRL community
</Text>
</Text>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Thousands of Hack Clubbers organize and participate in hackathons and after school coding clubs.
Thousands of Hack Clubbers organize and participate in
hackathons and after school coding clubs.
</Text>
<Clubs />
<Hackathons
@ -739,7 +748,7 @@ function Page({
</Box>
</Box>
</Box>
<Box bg="snow" color="black" py={[3, 4]}>
<Box py={5}>
<Box
sx={{
width: '90vw',